/*
	Plugin created by Etienne TREMEL for BSO - November 2011
	
	Easing preview available here: http://jqueryui.com/demos/effect/easing.html
	Don't miss to add this lines in your HTML file:
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
*/

(function($){
	$.fn.simplegallery = function(options) {
		var defaults = {
		   	delay:6000,
			transitionSpeed:600,
			easing:'easeInOutQuint', //linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
			stopOnMouseOver:true
		};
		
		var options = $.extend(defaults, options);
		
		var container=$(this);
		var isSliding=false;
		var imageIndex=0;
		var timeout;
		var mouseOver=false;
		var imageWidth=0;
		var titleWidth=0;
		
		container.find('img').hide();
		
		//Store image and informations in array and remove it:
		var gallery=[];
		container.find('img').each(function() {		
			gallery.push($(this));	
			$(this).remove();	
		});
			
		//Layout:
		var simpleGallery=$('<div class="simpleGallery" />');
		var wSlider=$('<div class="wSlider" />');
		var slider=$('<div class="slider" />');
		var navigation=$('<div class="navigation"><div class="left"></div><div class="wTitle"><div class="titleContainer"></div></div><div class="right"></div></div>');

		//Add Layout to content:
		wSlider.append(slider);
		simpleGallery.append(wSlider);
		simpleGallery.append(navigation);
		container.append(simpleGallery);
		
		//Add first image to layout:
		var image=$('<img />');
		var wImage=$('<div class="wImage image_0" />');
		wImage.append(image);
		slider.prepend(wImage);
		
		navigation.find('.titleContainer').html($('<div class="title title_0" />').html(gallery[0].attr('alt')));
		
		image.load(function() {
			//Start sliding:
			timeout = setTimeout(function() { slide('fromRight'); }, options.delay);
			imageWidth=$(this).width();
			slider.width(imageWidth*2);
			
			titleWidth=parseInt(navigation.find('.title').width());
			navigation.find('.titleContainer').width(titleWidth*2);
		}).attr('src', gallery[0].attr('src'));
		
		//Navigation:
		navigation.find('.left').click(function(e) {
			if(!isSliding) {
				clearTimeout(timeout);
				slide('fromLeft');
			}
		});
		
		navigation.find('.right').click(function(e) {
			if(!isSliding) {
				clearTimeout(timeout);
				slide('fromRight');
			}
		});
		
		//Mouse over:
		if(options.stopOnMouseOver) {
			simpleGallery.hover(function() {
				mouseOver=true;
				clearTimeout(timeout);
			}, function() {
				mouseOver=false;
				timeout = setTimeout(function() { slide('fromRight'); }, options.delay);
			});
		}

		//Sliding function:
		function slide(direction) {
			//Stop timer:
			clearTimeout(timeout);

			if(!isSliding) {
				isSliding=true;
				var oldIndex=0;
				oldIndex = slider.find('.wImage').attr('class').match(/image_(\d+)/);	
				oldIndex = parseInt(oldIndex[1]);
				
				var newIndex;
				if(direction=='fromRight') {
					if(oldIndex == gallery.length-1) {
						newIndex=0;
					} else {
						newIndex=oldIndex+1;
					}
				} else {
					if(oldIndex == 0) {
						newIndex=gallery.length-1;
					} else {
						newIndex=oldIndex-1;
					}
				}
					
				var image=$('<img />');
				imageIndex = newIndex;
				
				//Add image to layout:
				var wImage=$('<div class="wImage image_'+imageIndex+'" />');
				wImage.append(image);
				
				var wTitle=$('<div class="title title_'+imageIndex+'" />').html(gallery[imageIndex].attr('alt'));
				
				//Define width and position of the slider:
				var directionValue, directionValueTitle;
				
				if(direction=='fromRight') {
					slider.css('margin-left', 0);
					directionValue='-='+imageWidth+'px';
					slider.append(wImage);
					
					directionValueTitle='-='+titleWidth+'px';
					navigation.find('.titleContainer').css('margin-left', 0);
					navigation.find('.titleContainer').append(wTitle);
					
				} else {
					slider.css('margin-left', -imageWidth+'px');
					directionValue=0;
					slider.prepend(wImage);
					
					directionValueTitle=0;
					navigation.find('.titleContainer').css('margin-left', -titleWidth+'px');
					navigation.find('.titleContainer').prepend(wTitle);
				}

				navigation.find('.title').html(gallery[imageIndex].attr('alt'));
				image.load(function() {
					
					//Animation image:
					slider.stop(true, true).animate({
						'marginLeft':directionValue
					}, {
						duration: options.transitionSpeed,
						easing: options.easing,
						complete: function() {
							slider.find('.image_'+oldIndex).remove();
							slider.css('margin-left', 0);
							isSliding=false;
						}
					});
					
					//Animation title:
					navigation.find('.titleContainer').delay(150).stop(true, true).animate({
						'marginLeft':directionValueTitle
					}, {
						duration: options.transitionSpeed,
						easing: options.easing,
						complete: function() {
							navigation.find('.titleContainer').find('.title_'+oldIndex).remove();
							navigation.find('.titleContainer').css('margin-left', 0);
							isSliding=false;
							timeout = setTimeout(function() { slide('fromRight'); }, options.delay);
						}
					});
					
				}).attr('src', gallery[imageIndex].attr('src'));
			}
		}
	}
})(jQuery);