$(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 = 312;
         
        //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;
    });
     
});