jQuery(document).ready(function($) {	
	$('#featured-nav').css({'display' : 'block'});
	$('#panel-2').css({'display' : 'block'});
	$('#panel-3').css({'display' : 'block'});
	//Get the height of the first item
	$('#featured-mask').css({'height':$('#panel-1').height()}); // TODO: Safari doesn't calculate the right height
	// $('#post-3').html('height: ' + $('#panel-1').height());
	//Calculate the total width - sum of all sub-panels width
	//Width is generated according to the width of #featured-mask * total of sub-panels
	$('#featured-panel').width(parseInt($('#featured-mask').width() * $('#featured-panel div').length));
	
	//Set the sub-panel width according to the #featured-mask width (width of #featured-mask and sub-panel must be same)
	$('#featured-panel div').width($('#featured-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
		$('#featured-mask').animate({'height':panelheight},{queue:false, duration:200});			
		
		//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
		$('#featured-mask').scrollTo($(this).attr('href'), 400);		
		
		//Discard the link default behavior
		return false;
	});
	$('#featured-mask').scrollTo($('#panel-1'), 0 ); // Always start out at panel 1
	
});