$(document).ready(function(){
		//Get the height of the first item
			$('#tabbed-container').css({'height':$('#recent-posts-panel').height()});

			//Calculate the total width - sum of all sub-panels width
			//Width is generated according to the width of #mask * total of sub-panels
			$('#tabbed-panel').width(parseInt($('#tabbed-container').width() * $('#tabbed-panel div').length));

			//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
			$('#tabbed-panel div').width($('#tabbed-container').width());

			//Get all the links with rel as panel
			$('a[rel=panel]').click(function(){
				return false;
			});
			$('a[rel=panel]').mouseover(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
				$('#tabbed-container').stop().animate({'height':panelheight},{queue:false, duration:1000});

				//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
				$('#tabbed-container').scrollTo($(this).attr('href'), 800);

				//Discard the link default behavior
				return false;
		});		
	});