$(document).ready(function () {

    // Convert from Typo3 to my form
    var counter = 1;
    $(".HiddenContent .Entry").each(function(){
        
        var theLink = $(this).find(".Link");
        $(theLink).attr("class", "Entry"+counter);
        $(".Menubox").append( theLink );
        
        var theInfo = $(this).find(".Info");
        $(theInfo).attr("class", "InfoEntry"+counter);
        $(".TextInfoBox").append( theInfo );
        
        var theImage = $(this).find(".Image");
        $(theImage).attr("class", "ImageEntry"+counter);
        $(".ImageBox").append( theImage );
        
        counter++;
    });

    $(".HiddenContent").remove();

    var EntryName = "Entry1";
    var OldEntryName = "Entry1";

    var EntryImageName = ".Image"+EntryName
    var EntryInfoName = ".Info"+EntryName

    var OldEntryImageName = ".Image"+EntryName
    var OldEntryInfoName = ".Info"+EntryName

    $(EntryInfoName).stop(true,true).animate(
           {left: "+=292px"},
           400, 
           "bounceout",
           function() {

              $(EntryImageName).stop(true,true).animate(
                    {top: "+=262px"},
                    400, 
                    "bounceout"
              ); 

           }
    ); 

    $(".Menubox a").each(function(){

      $(this).click(function(){

        EntryName = $(this).attr("class");

        if( EntryName != OldEntryName ) {

            EntryImageName = ".Image"+EntryName
            EntryInfoName = ".Info"+EntryName

            $(OldEntryImageName).stop(true,true).animate(
                  {top: "-=262px"},
                  400, 
                  "bounceout",
                  function() {
                      $(OldEntryInfoName).stop(true,true).animate(
                          {left: "-=292px"},
                          400, 
                          "bounceout",
                          function() {

                              $(EntryInfoName).stop(true,true).animate(
                                  {left: "+=292px"},
                                  400, 
                                  "bounceout",
                                  function() {
                                      $(EntryImageName).stop(true,true).animate(
                                          {top: "+=262px"},
                                          400, 
                                         "bounceout"
                                      ); 

                                      OldEntryImageName = EntryImageName;
                                      OldEntryInfoName = EntryInfoName; 
                                      OldEntryName = EntryName;

                                  }
                              );

                          }
                      ); 
                  }
            );
            
        }

        return false;


      });

    });
    
});