$(document).ready(function() {    
  
    //Get the height of the first item  
    $('#mask').css({'height':$('#panel-1').height()});    
      
    //Calculate the total width - sum of all sub-panels width  
    //Width is generated according to the width of #mask * total of sub-panels  
    $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));  
      
    //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)  
    $('#panel div').width($('#mask').width());  
      
    //Get all the links with rel as panel  
    $('a[rel=panel]').click(function () {  
      
        //Get the height of the sub-panel  
        var panelheight = $($(this).attr('href')).height();  
          
        //Set class for the selected item  
        $('a[rel=panel]').removeClass('selected');  
        $(this).addClass('selected');  
          
        //Resize the height  
        $('#mask').animate({'height':panelheight},{queue:false, duration:500});           
          
        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor  
        $('#mask').scrollTo($(this).attr('href'), 800);       
          
        //Discard the link default behavior  
        return false;  
    });  
      
});