$(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 () {
		
		var valid = true;
		if($(this).attr('href') == '#panel-3') {
			valid = formIsValid();
		}
		
		if(valid == true) {
			//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:900});			
			
			//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
			$('#mask').scrollTo($(this).attr('href'), 2000);
		}		
		
		//Discard the link default behavior
		return false;
	});

});