// JavaScript Document       <!-- The JavaScript -->
$(function() {
	/**
	* interval : time between the display of images
	* playtime : the timeout for the setInterval function
	* current  : number to control the current image
	* current_thumb : the index of the current thumbs wrapper
	* nmb_thumb_wrappers : total number	of thumbs wrappers
	* nmb_images_wrapper : the number of images inside of each wrapper
	*/
	var interval			= 4000;
	var playtime;
	var current 			= 0;
	var current_thumb 		= 0;
	var nmb_thumb_wrappers	= $('#msg_thumbs .msg_thumb_wrapper').length;
	var nmb_images_wrapper  = 4;
	/**
	* start the slideshow
	*/
	play();
	
	/**
	* show the controls when 
	* mouseover the main container
	*/
	slideshowMouseEvent();
	function slideshowMouseEvent(){
		$('#msg_slideshow').unbind('mouseenter')
						   .bind('mouseenter',showControls)
						   .andSelf()
						   .unbind('mouseleave')
						   .bind('mouseleave',hideControls);
		}
	
	/**
	* clicking the grid icon,
	* shows the thumbs view, pauses the slideshow, and hides the controls
	*/
	$('#msg_grid').bind('click',function(e){
		hideControls();
		$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
		pause();
		$('#msg_thumbs').stop().animate({'top':'0px'},500);
		e.preventDefault();
	});
	
	/**
	* closing the thumbs view,
	* shows the controls
	*/
	$('#msg_thumb_close').bind('click',function(e){
		showControls();
		slideshowMouseEvent();
		$('#msg_thumbs').stop().animate({'top':'-230px'},500);
		e.preventDefault();
	});
	
	/**
	* pause or play icons
	*/
	$('#msg_pause_play').bind('click',function(e){
		var $this = $(this);
		if($this.hasClass('msg_play'))
			play();
		else
			pause();
		e.preventDefault();	
	});
	
	/**
	* click controls next or prev,
	* pauses the slideshow, 
	* and displays the next or prevoius image
	*/
	$('#msg_next').bind('click',function(e){
		pause();
		next();
		e.preventDefault();
	});
	$('#msg_prev').bind('click',function(e){
		pause();
		prev();
		e.preventDefault();
	});
	
	/**
	* show and hide controls functions
	*/
	function showControls(){
		$('#msg_controls').stop().animate({'right':'15px'},500);
	}
	function hideControls(){
		$('#msg_controls').stop().animate({'right':'-110px'},500);
	}
	
	/**
	* start the slideshow
	*/
	function play(){
		next();
		$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
		playtime = setInterval(next,interval)
	}
	
	/**
	* stops the slideshow
	*/
	function pause(){
		$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
		clearTimeout(playtime);
	}
	
	/**
	* show the next image
	*/
	function next(){
		++current;
		showImage('r');
	}
	
	/**
	* shows the previous image
	*/
	function prev(){
		--current;
		showImage('l');
	}
	
	/**
	* shows an image
	* dir : right or left
	*/
	function showImage(dir){
		/**
		* the thumbs wrapper being shown, is always 
		* the one containing the current image
		*/
		alternateThumbs();
		
		/**
		* the thumb that will be displayed in full mode
		*/
		var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
					.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
					.find('img');
		if($thumb.length){
			var source = $thumb.attr('alt');
			var $currentImage = $('#msg_wrapper').find('img');
			if($currentImage.length){
				$currentImage.fadeOut(function(){
					$(this).remove();
					$('<img />').load(function(){
						var $image = $(this);
						resize($image);
						$image.hide();
						$('#msg_wrapper').empty().append($image.fadeIn());
					}).attr('src',source);
				});
			}
			else{
				$('<img />').load(function(){
						var $image = $(this);
						resize($image);
						$image.hide();
						$('#msg_wrapper').empty().append($image.fadeIn());
				}).attr('src',source);
			}
					
		}
		else{ //this is actually not necessary since we have a circular slideshow
			if(dir == 'r')
				--current;
			else if(dir == 'l')
				++current;	
			alternateThumbs();
			return;
		}
	}
	
	/**
	* the thumbs wrapper being shown, is always 
	* the one containing the current image
	*/
	function alternateThumbs(){
		$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
						.hide();
		current_thumb = Math.ceil(current/nmb_images_wrapper);
		/**
		* if we reach the end, start from the beggining
		*/
		if(current_thumb > nmb_thumb_wrappers){
			current_thumb 	= 1;
			current 		= 1;
		}	
		/**
		* if we are at the beggining, go to the end
		*/					
		else if(current_thumb == 0){
			current_thumb 	= nmb_thumb_wrappers;
			current 		= current_thumb*nmb_images_wrapper;
		}
		
		$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
						.show();	
	}
	
	/**
	* click next or previous on the thumbs wrapper
	*/
	$('#msg_thumb_next').bind('click',function(e){
		next_thumb();
		e.preventDefault();
	});
	$('#msg_thumb_prev').bind('click',function(e){
		prev_thumb();
		e.preventDefault();
	});
	function next_thumb(){
		var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
		if($next_wrapper.length){
			$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
							.fadeOut(function(){
								++current_thumb;
								$next_wrapper.fadeIn();									
							});
		}
	}
	function prev_thumb(){
		var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
		if($prev_wrapper.length){
			$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
							.fadeOut(function(){
								--current_thumb;
								$prev_wrapper.fadeIn();									
							});
		}				
	}
	
	/**
	* clicking on a thumb, displays the image (alt attribute of the thumb)
	*/
	$('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
		var $this 		= $(this);
		$('#msg_thumb_close').trigger('click');
		var idx			= $this.index();
		var p_idx		= $this.parent().index();
		current			= parseInt(p_idx*nmb_images_wrapper + idx + 1);
		showImage();
		e.preventDefault();
	}).bind('mouseenter',function(){
		var $this 		= $(this);
		$this.stop().animate({'opacity':1});
	}).bind('mouseleave',function(){
		var $this 		= $(this);	
		$this.stop().animate({'opacity':0.5});
	});
	
	/**
	* resize the image to fit in the container (400 x 400)
	*/
	function resize($image){
		var theImage 	= new Image();
		theImage.src 	= $image.attr("src");
		var imgwidth 	= theImage.width;
		var imgheight 	= theImage.height;
		
		var containerwidth  = 712;
		var containerheight = 623;
	
		if(imgwidth	> containerwidth){
			var newwidth = containerwidth;
			var ratio = imgwidth / containerwidth;
			var newheight = imgheight / ratio;
			if(newheight > containerheight){
				var newnewheight = containerheight;
				var newratio = newheight/containerheight;
				var newnewwidth =newwidth/newratio;
				theImage.width = newnewwidth;
				theImage.height= newnewheight;
			}
			else{
				theImage.width = newwidth;
				theImage.height= newheight;
			}
		}
		else if(imgheight > containerheight){
			var newheight = containerheight;
			var ratio = imgheight / containerheight;
			var newwidth = imgwidth / ratio;
			if(newwidth > containerwidth){
				var newnewwidth = containerwidth;
				var newratio = newwidth/containerwidth;
				var newnewheight =newheight/newratio;
				theImage.height = newnewheight;
				theImage.width= newnewwidth;
			}
			else{
				theImage.width = newwidth;
				theImage.height= newheight;
			}
		}
		$image.css({
			'width'	:theImage.width,
			'height':theImage.height
		});
	}
});