/**
Script by http://www.codrops.com/
**/
jQuery(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	= jQuery('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper  = 6;
/**
* start the slideshow
*/
play();

/**
* show the controls when 
* mouseover the main container
*/
slideshowMouseEvent();
function slideshowMouseEvent(){
	jQuery('#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
*/
jQuery('#msg_grid').bind('click',function(e){
	hideControls();
	jQuery('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
	pause();
	jQuery('#msg_thumbs').stop().animate({'top':'0px'},500);
	e.preventDefault();
});

/**
* closing the thumbs view,
* shows the controls
*/
jQuery('#msg_thumb_close').bind('click',function(e){
	showControls();
	slideshowMouseEvent();
	jQuery('#msg_thumbs').stop().animate({'top':'-230px'},500);
	e.preventDefault();
});

/**
* pause or play icons
*/
jQuery('#msg_pause_play').bind('click',function(e){
	var jQuerythis = jQuery(this);
	if(jQuerythis.hasClass('msg_play'))
		play();
	else
		pause();
	e.preventDefault();	
});

/**
* click controls next or prev,
* pauses the slideshow, 
* and displays the next or prevoius image
*/
jQuery('#msg_next').bind('click',function(e){
	pause();
	next();
	e.preventDefault();
});
jQuery('#msg_prev').bind('click',function(e){
	pause();
	prev();
	e.preventDefault();
});

/**
* show and hide controls functions
*/
function showControls(){
	jQuery('#msg_controls').stop().animate({'right':'15px'},500);
}
function hideControls(){
	jQuery('#msg_controls').stop().animate({'right':'-110px'},500);
}

/**
* start the slideshow
*/
function play(){
	next();
	jQuery('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
	playtime = setInterval(next,interval)
}

/**
* stops the slideshow
*/
function pause(){
	jQuery('#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 jQuerythumb = jQuery('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
				.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
				.find('img');
	if(jQuerythumb.length){
		var source = jQuerythumb.attr('alt');
		var jQuerycurrentImage = jQuery('#msg_wrapper').find('img');
		if(jQuerycurrentImage.length){
			jQuerycurrentImage.fadeOut(function(){
				jQuery(this).remove();
				jQuery('<img />').load(function(){
					var jQueryimage = jQuery(this);
					resize(jQueryimage);
					jQueryimage.hide();
					jQuery('#msg_wrapper').empty().append(jQueryimage.fadeIn());
				}).attr('src',source);
			});
		}
		else{
			jQuery('<img />').load(function(){
					var jQueryimage = jQuery(this);
					resize(jQueryimage);
					jQueryimage.hide();
					jQuery('#msg_wrapper').empty().append(jQueryimage.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(){
	jQuery('#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;
	}
	
	jQuery('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
					.show();	
}

/**
* click next or previous on the thumbs wrapper
*/
jQuery('#msg_thumb_next').bind('click',function(e){
	next_thumb();
	e.preventDefault();
});
jQuery('#msg_thumb_prev').bind('click',function(e){
	prev_thumb();
	e.preventDefault();
});
function next_thumb(){
	var jQuerynext_wrapper = jQuery('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
	if(jQuerynext_wrapper.length){
		jQuery('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
						.fadeOut(function(){
							++current_thumb;
							jQuerynext_wrapper.fadeIn();									
						});
	}
}
function prev_thumb(){
	var jQueryprev_wrapper = jQuery('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
	if(jQueryprev_wrapper.length){
		jQuery('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
						.fadeOut(function(){
							--current_thumb;
							jQueryprev_wrapper.fadeIn();									
						});
	}				
}

/**
* clicking on a thumb, displays the image (alt attribute of the thumb)
*/
jQuery('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
	var jQuerythis 		= jQuery(this);
	jQuery('#msg_thumb_close').trigger('click');
	var idx			= jQuerythis.index();
	var p_idx		= jQuerythis.parent().index();
	current			= parseInt(p_idx*nmb_images_wrapper + idx + 1);
	showImage();
	e.preventDefault();
}).bind('mouseenter',function(){
	var jQuerythis 		= jQuery(this);
	jQuerythis.stop().animate({'opacity':1});
}).bind('mouseleave',function(){
	var jQuerythis 		= jQuery(this);	
	jQuerythis.stop().animate({'opacity':0.5});
});

/**
* resize the image to fit in the container (400 x 400)
*/
function resize(jQueryimage){
	var theImage 	= new Image();
	theImage.src 	= jQueryimage.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;
		}
	}
	*/
	jQueryimage.css({
		'width'	:theImage.width,
		'height':theImage.height
	});
}
});