$(document).ready(function() {	

		//Get the height of the first item
		$('#mask').css({'height':$('#panel div:first').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());
		
		// kaikki mainmenun linkit
		$('a.mainlevel').click(function () {
		
			//Get the height of the sub-panel
			var panelheight = $($(this).attr('href')).height();
			
			//Set class for the selected item
			$('a.mainlevel').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;
		});
		
	});