/**
 * jQuery imageSlider v1.0 
 * 
 * @author Thomas van de Put <thomas_put@hotmail.com>
 * @version 1.0
 * @date 23-08-2011
 *
 * @desc jQuery plugin for image slider
 * @example $(element).imageSlider({key:value})
 * @requires jQuery 1.4.3 or higher
 */

(function($) {
	// The variables, methods and objects for this plugin
	var ver = '1.0',
		options = {},
		methods = {
			
			init: function(opts){	
				
				// Output version no to console.log
				methods.log(methods.version());
				
				// Merge options with default
				options = $.extend(defaults, opts);
				
				// Always return this
				return this.each(function(){
					
					methods.arrangeslides.apply(this);
					
				});
			},
			
			arrangeslides: function(){
				var target = $(this);
				
				options.slidecount = target.children().size();
				// Breedte als alle slides evenredig veel ruimte hebben
				options.openwidth = Math.floor(target.width() / options.slidecount);
				// Schaduw positie
				options.shadowposition = options.openwidth - 30;
				// Collapse width berekenen (700 is ongeveer de breedte van een open slide bij 4 of 5 slides)
				options.closedwidth = Math.ceil(($(target).width() - 700) / (options.slidecount-1));
								
				// Overlay (schaduw aan rechterkant)
				var overlay = $('<div class="overlay"></div>').css({ 'left' : options.shadowposition });
				
				$(this).find('div.slide').each(function(index,value){
					// CSS toepassen op title vlak
					$(this).find('div.title').css({
						'opacity': options.backgroundopacity,
						'backgroundColor': options.backgroundcolor
					});
										
					// CSS toepassen op eigen vlak
					$(this).css({
						'z-index': index,
						'left': options.openwidth * index
					});
					
					$(this).find('span.hovertitle').css({'opacity':0});
					$(this).find('span:eq(0)').css({'opacity':0});					
					// Voeg div toe met de schaduw aan de rechterkant
					$(this).append(overlay.clone());
					
					// Mouseover en out
					$(this).hover(function(event){
						methods.collapse.apply(target, [event, this]);
					},function(event){
						methods.collapse.apply(target, [event, this]);
					});
				});
				
				// Mouse leave terug schuiven
				$(this).bind('mouseleave', function(event){
					methods.collapse.apply(target, [event, this]);
				});
			},
						
			collapse: function(event, current){
				var target = $(this);
				
				$(this).find('div.slide').each(function(index,value){
					
					// Alle slides rechts van huidige verschuiven
					var left = event.type == 'mouseout' || event.type == 'mouseleave' ? options.openwidth : options.closedwidth;
					left = $(target).width() - left * (options.slidecount - index);
					
					if(index > $(current).prevAll().length){
						$(this).stop().animate({
							'left': left
						}, options.speed, event.type == 'mouseout' || event.type == 'mouseleave' ? options.easingout : options.easingin);
					}
					
					// Alle slides links van huidige en huidige verschuiven
					left = event.type == 'mouseout' || event.type == 'mouseleave' ? options.openwidth : options.closedwidth;
					left = left * index;
					
					if(index <= $(current).prevAll().length){
						$(this).stop().animate({
							'left': left
						}, options.speed, event.type == 'mouseout' || event.type == 'mouseleave' ? options.easingout : options.easingin);
					}
					
					// Schaduw mee animeren
					var shadowleft = event.type == 'mouseout' || event.type == 'mouseleave' ? options.shadowposition : Math.floor($(target).width() - (options.slidecount-1) * options.closedwidth - 30);
					if(index == $(current).prevAll().length){
						$(this).find('div.overlay').stop().animate({
							'left' : shadowleft
						}, options.speed, event.type == 'mouseout' || event.type == 'mouseleave' ? options.easingout : options.easingin);
					} else {
						shadowleft = event.type == 'mouseout' || event.type == 'mouseleave' ? options.shadowposition : options.closedwidth - 30;
						$(this).find('div.overlay').stop().animate({
							'left' : shadowleft
						}, options.speed, event.type == 'mouseout' || event.type == 'mouseleave' ? options.easingout : options.easingin);
					}
				
					// Title mee laten faden
					if(index == $(current).prevAll().length && event.type == 'mouseenter'){
						$(this).find('span:eq(0)').stop().animate({'opacity': 1},options.speed);
						$(this).find('.title span:eq(0)').stop().animate({'opacity': 0},options.speed);
						$(this).find('span.hovertitle').stop().animate({'opacity': 1},options.speed);
					}
					
					if((event.type == 'mouseout' || event.type == 'mouseleave') && $(this).find('span.hovertitle').is(':visible')){
						$(this).find('span:eq(0)').stop().animate({'opacity': 0},options.speed);
						$(this).find('.title span:eq(0)').stop().animate({'opacity': 1},options.speed);
						$(this).find('span.hovertitle').stop().animate({'opacity': 0},options.speed);
					}
					
				});
			},
			
			// Return version number
			version: function(){
				return 'Version no. ' + ver;
			},
			
			// Log function
			log: function(){
				if (window.console && window.console.log)
					window.console.log('[imageSlider] ' + Array.prototype.join.call(arguments,' '));
			}
			
		}
		
		// Main plugin function
	$.fn.imageSlider = function(method){
		// If given method is an existing function, call this function
		if(methods[method])
			return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
		// If given method is an object or no method is given, call init function
		else if(typeof method == 'object' || !method)
			return methods.init.apply(this,arguments);
		// If none of the above applies, call an error
		else 
			$.error('Method: \'' + method + '\' does not exist on [pluginName]');		
	}
	
	var defaults = {
		speed: 300,
		backgroundopacity:1,
		
		easingin: 'easeOutCubic',
		easingout: 'easeOutCubic',
		closedwidth: 60 // Breedte van slides als er over 1 van de slides gehoverd wordt
	}
})(jQuery)