// JavaScript Document

// Function for sliding panel and zoom image 
$(document).ready(function() {
	// if no anchor in url, set one by default
	if(window.location.hash == ""){
		window.location.hash = "#panel-1";
	}
	var anchor = window.location.hash;
	var linkId = anchor.replace("-", "");
	
//	$(linkId).addClass('selected');	
	$(linkId).children().removeClass('resize');
	
	var links = "a[href=" + anchor + "]";
	$(links).addClass('selected');
	
	
	//get the width
	var oWidth = $('img.resize').width();
	//get the height
	var oHeight = $('img.resize').height();
	// size x2
	var mpx = 2;


	//Get the height of the first item
	$('#mask').css({'height':$(anchor).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());
	
	//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
	$('#mask').scrollTo($(anchor), 1);
	

	//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
		$('#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);
		
		// change image resize property
		$('a[rel=panel] img').addClass('resize');
		var linkId = $(this).attr('href').replace("-", "");
		$(linkId).addClass('selected');
		$(linkId).children("img").removeClass('resize');
		
		// reduce old selected link
		animate( $('a[rel=panel] img.resize'), oWidth, oHeight);
		// increase new selected link
		animate( $(linkId).children("img"), oWidth * mpx,  oHeight * mpx);
		
		
		//Discard the link default behavior
		return false;
	});
	
	
	$('a[rel=panel] img').click( function() {
		
		$('a[rel=panel] img').addClass('resize');
		$(this).removeClass('resize');
		
		animate( $('a[rel=panel] img.resize'), oWidth, oHeight );
		
	});
	//run a function when the image is hovered over
	$('a[rel=panel] img')
		//mouseOver effect
		.hover(function(){
			//take the currently targeted img
			if ($(this).attr("class") == ''){
				return;
			}
			animate( $(this), oWidth * mpx,  oHeight * mpx)
		},
		//this is just like a mouseOut effect to take the img back to the original size
		function(){
			if ($(this).attr("class") == ''){
			}
			else{
				animate( $(this), oWidth, oHeight );
			}
		});
});



function animate(container, toWidth, toHeight){
	container
			//stops the event from happening in case of an abrupt mouseOut
			.stop()
			//custom animation effect to change the width and height of the img
			.animate({
				//take the original width/height X multipler and tag on the 'px'
				width: (toWidth) +'px',
				height: (toHeight) +'px'
			//space the animation out over 1 sec (deals in milliseconds)
			},500);
}