$(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  = $('.msg_thumb_wrapper a img').length;
		/**
		* 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  = 400;
			var containerheight = 400;
        
			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
			});
		}
    });