$(document).ready(function() {	

	//Get the height of the first item
	$('#panelsmask').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
	$('#panels').width(parseInt($('#panelsmask').width() * $('#panels div').length));
	
	//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
	$('#panels div').width($('#panelsmask').width());
	
	//Get all the links with rel as panel
	$('a[rel=panels]').click(function () {
	
		//Get the height of the sub-panel
		//var panelheight = $($(this).attr('href')).height();
		
		//var panelheight = 300;
		
		//Set class for the selected item
		$('a[rel=panels]').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
		$('#panelsmask').scrollTo($(this).attr('href'), 800);		
		
		//Discard the link default behavior
		return false;
	});
	


	//Get the height of the first item
	$('#panemask').css({'height':$('#pane-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
	$('#panes').width(parseInt($('#panemask').width() * $('#panes div').length));
	
	//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
	$('#panes div').width($('#panemask').width());
	
	//Get all the links with rel as panel
	$('a[rel=panes]').click(function () {
	
		//Get the height of the sub-panel
		//var panelheight = $($(this).attr('href')).height();
		
		//var panelheight = 300;
		
		//Set class for the selected item
		$('a[rel=panes]').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
		$('#panemask').scrollTo($(this).attr('href'), 800);		
		
		//Discard the link default behavior
		return false;
	});
	
});