$(function(){
	$.fn.supersized.options = {
		startwidth: 1280,
		startheight: 720,
		minsize: .5,
		slideshow: 1,
		slideinterval: 10000
	};
	$('#background').supersized();

// Animations for Changing Tabs //

$(document).ready(function() {	

	//Get the height of the first item
	$('#content').css({'height':$('#panel-1').height()});	
	
	//Calculate the total width - sum of all sub-panels width
	//Width is generated according to the width of #content * total of sub-panels
	$('#panel').width(parseInt($('#content').width() * $('#panel div').length));
	
	//Set the sub-panel width according to the #content width (width of #content and sub-panel must be same)
	$('#panel div').width($('#content').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');
			
		//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
		 $('#content').scrollTo($(this).attr('href'), 800);
		
		
		//Resize the height
		$('#content').animate({'height':panelheight},{queue:true, duration:800});			
		
		//Discard the link default behavior
		return false;
	});
	
});




// Animations for Changing Pages //

$(function(){  // $(document).ready shorthand
  $('#body').hide().fadeIn('fast');
 
 
});

});