var rotatepage =
{
    rotatecallback:null,
    
    init:function()
    {        
        // initiately show first item    
        $("#tipContainer > div:gt(0)").hide();      
        
        // do not show current item in catalog
        $("#tipList .blockRight:eq(0)").hide();
        $("#tipList .highlight-element:eq(0)").hide();
        
        // on click switch items
        $("div.moretip").children("a").click(function(){        
            $("#tipList .blockRight").show();
            $("#tipList .highlight-element").show();
           
            $(this).parents(".blockRight:first").hide().removeClass("visible").removeClass("firstvisible");
            
            // show item with same index in the container
            var index = $("div.moretip").children("a.tipLink").index(this);   
            $("#tipContainer > div").hide();
            $("#tipContainer > div").eq(index).show();
        
            $("#tipList .blockRight.firstvisible").removeClass("firstvisible");
            $("#tipList .blockRight:visible").addClass("visible");            
            $("#tipList .blockRight:visible:first").removeClass("visible").addClass("firstvisible");
            
            if(typeof(rotatepage.rotatecallback) == "function")
                rotatepage.rotatecallback.call();            
        });    
        
        // set the class fistvisible on the first element, that is visible
        $("#tipList .blockRight:visible").addClass("visible");
        $("#tipList .blockRight:visible:first").addClass("firstvisible").removeClass("visible");
    },
    
    registerRotateCallback:function(fn)
    {
        rotatepage.rotatecallback = fn;
    }    
}

// jQuery 1.2.4 is needed
$(document).ready(function() {    
   rotatepage.init();   
});