/* Copyright (c) 2009 Rudie Schaaphuizen, Gillz http://www.gillz.nl
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * jQuery Imotator
 * Version: 1.0 (August 25, 2009)
 * Requires: jQuery 1.3+
 */

(function($){
    $.fn.extend({ 
        imotator: function(options) {

			var defaults = {
				imgSpacing: 20,
				auto: true,
				direction: 'next',
				interval: 5000,
				speed: 400
			};
			var options = $.extend(defaults, options);

            return this.each(function() {
			
				//een referentie naar het object maken
                var obj = $(this);
				var body = obj.html();
				var images = '';
				var imageid = 1;
				var total_items = obj.children();
				var newname = this.id;
				var imgWidth, imgHeight, imgFullWidth, imgFullHeight = 0;
				var imgSpacing = options.imgSpacing;
				var ClickCounter = 3
				var CurrentActive = 3, NextActive = '';
				var LastClicked = ''
				
				//Prepend the object with the container (div)
				obj.replaceWith('<div id="'+newname+'">'+$(this).html()+'</div>');
				obj = $('#'+newname);
				
				// voeg de divjes toe welke voor volgende en vorige zorgen
				obj.prepend('<div id="moveNext"></div>');
				obj.prepend('<div id="movePrev"></div>');
				obj.prepend('<div id="titleLeft"></div>');
				obj.prepend('<div id="titleRight"></div>');
				
				//alle li items ophalen, en deze in een array plaatsen
				var listitems = $('li', obj);
				
				//voor elke li een referentie maken via een id
				listitems.each(function() {
					var html = $(this).html();
                    $(this).replaceWith("<div class=\"imotator-image\">" + html + "</div>");
                });
                images = $("div.imotator-image", obj);
				
				// de setup uitvoeren, welke de eerste posities insteld
				setup();
				
				// zorgen dat die automatisch doordraait wanneer dit is ingesteld
				if(options.auto == 1){
					if(options.direction == 'next'){
					 setInterval(nextImage, options.interval);
					}
					else if(options.direction == 'prev'){
					 setInterval(previousImage, options.interval);
					}
					else{
					 setInterval(nextImage, options.interval);
					}
				}
				
				// de cursor instellen wanneer iemand over een afbeelding heengaat
				$('#movePrev, #moveNext', obj).mouseover(function(){
					$(this).css({'cursor': 'pointer'});									   
				});
				
				// de acties binden welke de klik functies uitvoeren
				$('#movePrev', obj).click(function(){
					$('*', obj).stop(true, true);
					previousImage();
				});
				$('#moveNext', obj).click(function(){
					$('*', obj).stop(true, true);							   
					nextImage();
				});
				
				
				// 
				// hieronder komen de functies die worden aangeroepen als iemand ergens op klikt
				//
				function nextImage(){
					ClickCounter--; if(ClickCounter < 1){ ClickCounter = 6; }// de current active optellen
					CurrentActive++; if(CurrentActive > 6){ CurrentActive = 1; }// de current active optellen
					NextActive = CurrentActive+1; if(NextActive > 6){ NextActive = 1; }// de current active optellen
					
					// de active classes plaatsen op de afbeeldingen welke actief zijn
					$('.imotator-image').removeClass('active');
					$('#imotator-imageid-' + CurrentActive).addClass('active');
					$('#imotator-imageid-' + NextActive).addClass('active');
					
					imageid = ClickCounter-2; //CurrentActive;
						if(imageid < 1){
							var count = (0 - imageid);
							imageid = (6-count);
						}
					redeclare('next');
				}
				
				function previousImage(){
					ClickCounter++; if(ClickCounter > 6){ ClickCounter = 1; }// de current active optellen
					CurrentActive--; if(CurrentActive < 1){ CurrentActive = 6; }// de current active optellen
					NextActive = CurrentActive+1; if(NextActive > 6){ NextActive = 1; }// de current active optellen
	
					// de active classes plaatsen op de afbeeldingen welke actief zijn
					$('.imotator-image').removeClass('active');
					$('#imotator-imageid-' + CurrentActive).addClass('active');
					$('#imotator-imageid-' + NextActive).addClass('active');
					 
					imageid = ClickCounter-2; //CurrentActive;
						if(imageid < 1){
							var count = (0 - imageid);
							imageid = (6-count);
						}
					redeclare('prev');
				}
				
				
				
				
				
				
				// 
				// hieronder komen de functies welke voor de animaties zorgen
				//
				function redeclare(loop){
					
					images.each(function() {
						$('img', this).removeAttr('width').removeAttr('height');
						var imgOpacity = 1;
						imgWidth =  $('img', this).width();
						imgHeight =  $('img', this).height();
						imgFullWidth = $('img', this).width();
						imgFullHeight = $('img', this).height();
						
						// de images aan de zijkant kleiner maken
						if(imageid == 1 || imageid == 6){
							imgWidth = imgWidth * 0.8;
							imgHeight = imgHeight * 0.8;
							imgOpacity = 0.7;
						}
						if(imageid == 2 || imageid == 5){
							imgWidth = imgWidth * 0.9;
							imgHeight = imgHeight * 0.9;
							imgOpacity = 0.8;
						}	
						$('img', this).attr({'width': imgWidth, 'height': imgHeight}).css({'opacity': imgOpacity});	
						
						if(loop == 'next'){
							// de afbeeldingen weer plaatsen
							if(imageid == 1){
								$(this).css({'z-index': '1'});
								$(this).css({'marginLeft': (0*imgSpacing)});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
							if(imageid == 2){
								$(this).css({'z-index': '2'});
								$(this).css({'marginLeft': (1*imgSpacing)});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
							if(imageid == 3){
								$(this).css({'z-index': '4'});
								$(this).animate({'marginLeft': (2*imgSpacing), 'opacity': '1'}, options.speed)
										.animate({'marginLeft': (2*imgSpacing)+10}, 100)
										.animate({'marginLeft': (2*imgSpacing), 'opacity': '1'}, options.speed/5);
								$('#titleLeft').html( $('img', this).attr('title') );
							}
							if(imageid == 4){
								$(this).css({'z-index': '3'});
								$(this).css({'marginLeft': (imgFullWidth+(2*imgSpacing)) + (imgFullWidth - imgWidth )});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
								$('#titleRight').html( $('img', this).attr('title') );
							}
							if(imageid == 5){
								$(this).css({'z-index': '2'});
								$(this).css({'marginLeft': (imgFullWidth+(3*imgSpacing)) + (imgFullWidth - imgWidth )});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
							if(imageid == 6){
								$(this).css({'z-index': '1'});
								$(this).css({'marginLeft': (imgFullWidth+(4*imgSpacing)) + (imgFullWidth - imgWidth )});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
						}
						if(loop == 'prev'){
							// de afbeeldingen weer plaatsen
							if(imageid == 1){
								$(this).css({'z-index': '1'});
								$(this).css({'marginLeft': (0*imgSpacing)});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
							if(imageid == 2){
								$(this).css({'z-index': '2'});
								$(this).css({'marginLeft': (1*imgSpacing)});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
							if(imageid == 3){
								$(this).css({'z-index': '3'});
								$(this).css({'marginLeft': (2*imgSpacing)});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
								$('#titleLeft').html( $('img', this).attr('title') );
							}
							if(imageid == 4){
								$(this).css({'z-index': '4'});
								$(this).animate({'marginLeft': (imgFullWidth+(2*imgSpacing)) + (imgFullWidth - imgWidth ), 'opacity': '1'}, options.speed)
										.animate({'marginLeft': (imgFullWidth+(2*imgSpacing))-10}, 100)
										.animate({'marginLeft': (imgFullWidth+(2*imgSpacing)), 'opacity': '1'}, options.speed/5);
								$('#titleRight').html( $('img', this).attr('title') );
							}
							if(imageid == 5){
								$(this).css({'z-index': '2'});
								$(this).css({'marginLeft': (imgFullWidth+(3*imgSpacing)) + (imgFullWidth - imgWidth )});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
							if(imageid == 6){
								$(this).css({'z-index': '1'});
								$(this).css({'marginLeft': (imgFullWidth+(4*imgSpacing)) + (imgFullWidth - imgWidth )});
								$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							}
						}
							
						imageid++;
						if(imageid > 6){
							imageid = 1;
						}
					});
				}// end function redeclare
				
				
				function setup(){
					images.each(function() {
						var imgOpacity = 1;
						imgWidth =  $('img', this).width();
						imgHeight =  $('img', this).height();
						imgFullWidth = $('img', this).width();
						imgFullHeight = $('img', this).height();
						
						// de images aan de zijkant kleiner maken
						if(imageid == 1 || imageid == 6){
							imgWidth = imgWidth * 0.8;
							imgHeight = imgHeight * 0.8;
							imgOpacity = 0.7;
						}
						if(imageid == 2 || imageid == 5){
							imgWidth = imgWidth * 0.9;
							imgHeight = imgHeight * 0.9;
							imgOpacity = 0.8;
						}
						$('img', this).attr({'width': imgWidth, 'height': imgHeight}).css({'opacity': imgOpacity});
						
						$(this).attr('id', 'imotator-imageid-'+imageid).css({'position': 'absolute'});
						
						if(imageid == 1){
							$(this).css({'marginLeft': (0*imgSpacing), 'z-index': '1'});
							$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
						}
						if(imageid == 2){
							$(this).css({'marginLeft': (1*imgSpacing), 'z-index': '2'});
							$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
						}
						if(imageid == 3){
							$(this).css({'marginLeft': (2*imgSpacing), 'z-index': '3'});
							$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							$('#titleLeft').html( $('img', this).attr('title') );
						}
						if(imageid == 4){
							$(this).css({'marginLeft': (imgFullWidth+(2*imgSpacing)) + (imgFullWidth - imgWidth ), 'z-index': '3'});
							$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
							$('#titleRight').html( $('img', this).attr('title') );
						}
						if(imageid == 5){
							$(this).css({'marginLeft': (imgFullWidth+(3*imgSpacing)) + (imgFullWidth - imgWidth ), 'z-index': '2'});
							$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
						}
						if(imageid == 6){
							$(this).css({'marginLeft': (imgFullWidth+(4*imgSpacing)) + (imgFullWidth - imgWidth ), 'z-index': '1'});
							$(this).css({'marginTop': (imgFullHeight - imgHeight)/2});
						}
						
						// de eerste 2 active zetten
						$('#imotator-imageid-3').addClass('active');
						$('#imotator-imageid-4').addClass('active');				
						
						// kijken of de title tag, wel of niet zichtbaar moet zijn
						$('.imotator-title').hide();
						$('.active > .imotator-title').show();
						
						imageid++;
						if(imageid > 6){
							imageid = 1;
						}
					});
				}// end function setup
				
            });
        }
    });
})(jQuery);