/*
	Plugin created by Etienne TREMEL for BSO - October 2011
	
	Easing preview available here: http://jqueryui.com/demos/effect/easing.html
*/

(function($){
	$.fn.swipebanner = function(options) {
		var defaults = {
		   	delay:5000,
			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,
			transition:'switch', //slide, fade or switch
			useContent:false,
			displayNumber:false
		};
		
		var options = $.extend(defaults, options);
		
		var container=$(this);
		var isSliding=false;
		var imageIndex=0;
		var timeout;
		var mouseOver=false;
		
		container.find('img').hide();
		
		//Store image and informations in array:
		var gallery=[];
		container.find('img').each(function() {
			var content;
			
			if($(this).next().hasClass('content')) {
				content = $(this).next();
			} else {
				content = '';
			}
			
			var image={
				'image':$(this),
				'content':content
			}
			
			gallery.push(image);			
		});
		
		//Remove content from container:
		container.empty();
			
		//Layout:
		var swipeBanner=$('<div class="swipeBanner" />');
		var slider=$('<div class="slider" />');
		var navigation=$('<div class="navigation"><ul></ul></div>');

		//Add Layout to content:
		swipeBanner.append(slider);
		swipeBanner.append(navigation);
		container.append(swipeBanner);
		
		//Add image to layout:
		$.each(gallery, function(index, item) {
			//Main image:
			var wImage=$('<div class="wImage image_'+index+'" />');
			var image=$('<img />');
			
			if(gallery.content != '' && options.useContent) {
				var wContent=item.content;
				wImage.append(wContent);
			}
			
			if(index==0) wImage.addClass('active');
			
			wImage.append(image);
			
			image.wrap('<a href="'+item.image.attr('rel')+'" title="'+item.image.attr('alt')+'" />');
			
			slider.prepend(wImage);
			
			image.load(function() {
				if(index==0) {
					//Start sliding:
					timeout = setTimeout(function() { slide(1); }, options.delay);
				}
			});
			
			image.attr('src', item.image.attr('src'));
			
			//Generate navigation system:
			var navNumber='';
			if(options.displayNumber) navNumber=index+1;
			
			
			if(index!=0) {
				navigation.find('ul').append('<li><a>'+navNumber+'</a></li>');
			} else {
				navigation.find('ul').append('<li><a class="active">'+navNumber+'</a></li>');
			}

		});
		
		//Navigation:
		navigation.find('li').click(function(e) {
			e.preventDefault();
			if(!isSliding) {
				clearTimeout(timeout);
				slide($(this).index());
			}
		});
		
		//Mouse over:
		if(options.stopOnMouseOver) {
			swipeBanner.hover(function() {
				mouseOver=true;
				clearTimeout(timeout);
			}, function() {
				mouseOver=false;
				var n=imageIndex;
				if(imageIndex == gallery.length-1) {
					n=0;
				} else {
					n++;
				}
				
				timeout = setTimeout(function() { slide(n); }, options.delay);
			});
		}
		
		//Sliding function:
		function slide(index) {
			//Stop timer:
			clearTimeout(timeout);
		
			if(!isSliding) {
				isSliding=true;
				
				var oldIndex=0;
				slider.find('.wImage').each(function() {
					if($(this).hasClass('active')) {
						oldIndex = $(this).attr('class').match(/image_(\d+)/);	
						oldIndex = oldIndex[1];
					}
				});
				
				swipeBanner.find('.navigation ul li:eq('+oldIndex+') a').removeClass('active');

				newIndex=index;

				if(oldIndex!=newIndex) {				
					var image = slider.find('.image_'+newIndex);
					
					//Change navigation active:
					slider.find('.image_'+oldIndex).removeClass('active');
					image.addClass('active');
					imageIndex = newIndex;
					swipeBanner.find('.navigation ul li:eq('+newIndex+') a').addClass('active');
					
					switch(options.transition) {
						case 'fade':
							image.hide();
							image.appendTo(slider);
							image.stop(true, true).fadeIn({
								duration: options.transitionSpeed,
								easing: options.easing,
								complete: function() {
									if(newIndex == gallery.length-1) {
										newIndex=0;
									} else {
										newIndex++;
									}
									isSliding=false;
									timeout = setTimeout(function() { slide(newIndex); }, options.delay);
								}
							});
							break;
						case 'slide':
							image.css('margin-left',image.width()+'px');
							image.appendTo(slider);
							image.stop(true, true).animate({
								'marginLeft': 0
							}, {
								duration: options.transitionSpeed,
								easing: options.easing,
								complete: function() {
									if(newIndex == gallery.length-1) {
										newIndex=0;
									} else {
										newIndex++;
									}
									isSliding=false;
									timeout = setTimeout(function() { slide(newIndex); }, options.delay);
								}
							});
							break;
						case 'switch':
							var bLastImage = slider.find('.wImage').last();
							var switchLine = $('<div class="switchLine" />');
							
							switchLine.css({
								'position':'absolute',
								'width':parseInt(2*image.width())+'px'
							});

							image.css('margin-left',image.width()+'px');
							
							switchLine.append(bLastImage);
							switchLine.append(image);
							switchLine.appendTo(slider);
							
							switchLine.animate({
								'marginLeft': '-='+image.width()
							}, {
								duration: options.transitionSpeed,
								easing: options.easing,
								complete: function() {
									image.css('margin-left',0);
									image.unwrap($(this));
									if(newIndex == gallery.length-1) {
										newIndex=0;
									} else {
										newIndex++;
									}
									isSliding=false;
									timeout = setTimeout(function() { slide(newIndex); }, options.delay);
								}
							});
							break;
					}

				} else {
					isSliding=false;
				}
			}
		}
	}
})(jQuery);