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

function M_Out(){
 document.getElementById("myLayer").style.visibility = "hidden";
}

function M_Over() {
 document.getElementById("myLayer").innerHTML = "<center><img src=\"images/photo.jpg\"></center>";
 document.getElementById("myLayer").style.visibility = "visible";
}