/**
 * @author Simon Schmidt
 */
jQuery.fn.slideshow = function(options) {
	//current instance of the slideshow
	var slideshow = this;
	
	//width of currently inactive images
	slideshow.inactive_image_width 		= 0;
	//opacity of currently inactive image
	slideshow.inactive_image_opacity 	= (options.inactive_image_opacity=="undefined")?0.5:options.inactive_image_opacity;
	
	//width of currently active image
	slideshow.active_image_width 		= options.active_image_width;
	
	//specifies if the Navigation should be hidden while sliding
	//(Recommended: Prevents undesireable flashing of images)
	slideshow.on_slide_disable_navi     = (options.on_slide_disable_navi=="undefined")?true:options.on_slide_disable_navi;

	//speed of fading out of current and the fading in of next image
	slideshow.slide_speed				= (options.slide_speed=="undefined")?300:options.slide_speed;
	
	//AUTO SLIDE
	//Specifies if autoslide is turned on
	slideshow._autoSlide				= (options.auto_slide=="undefined")?false:options.auto_slide;
	//speed of the autoslide
	slideshow._autoSlideSpeed			= (options.auto_slide_speed=="undefined")?1000:options.auto_slide_speed;
	//Mode:loop or there-and-back-again
	slideshow._autoSlideMode			= (options.auto_slide_mode=="undefined")?"loop":options.auto_slide_mode;
	//Direction: 1:left to right, 0: right to left
	slideshow._autoSlideDirection		= 1;
	
	//specifies if the slideshow is being paused when mouse is over it 
	slideshow._pause_slide_on_hover		= (options.pause_slide_on_hover=="undefined")?"false":options.pause_slide_on_hover;
	
	
	//state: defines if the slideshow was paused because the mouse is hovering it
	//or if it's paused for another reason
	slideshow._paused_on_hover			= false;
	
	
	//state: nume images
	slideshow._num_images				= 0;
	
	//state: current image
	slideshow._current_image_ID			= 1;
	
	//div that contains the Slideshow
	slideshow.container 				= "";
	//div that contains the Images
	slideshow.image_container 			= "";
	//div that contains the Navi
	slideshow.image_navi 				= "";
	//Play button
	slideshow.play_button				= ""
	
	slideshow.timer						= null;
	//initialisation
	this.init 							= function(container)
	{
		//TODO: cast errors if containers don't exist
		//get the slideshow container
		slideshow.container 			= container;
		//get the image container
		slideshow.image_container 		= container.find('.image-container');
		//get the navi container
		slideshow.image_navi 			= container.find('.navi');
		//get the play button
		slideshow.play_button			= container.find('a.play');
		
		
		//num of images in the container;
		slideshow._num_images 			= slideshow.image_container.find('.image').length;
		
		//calculate the width of inactive images				
		slideshow.inactive_image_width 	= (slideshow.image_container.innerWidth() - slideshow.active_image_width) / (slideshow._num_images - 1);
		
		
		/* temp save the content of the image conatainer and
		 * display a loading message there while initialisation
		 * then replace the loader with the content again
		 * TODO: image preloader
		 */
		var image_container_content 	= slideshow.image_container.html();
		
		var loader_image				= 	'<div class="loader" style="background-color:#BA6236;opacity:0.4;position:absolute;text-align:center;'+
												'height:'+slideshow.image_container.innerHeight()+'px;'+
												'width:'+slideshow.image_container.innerWidth()+'px;">'+
												'<img style="margin-top:40%" src="img/ajax-loader.gif" />'+
											'</div>';
		
		slideshow.image_container.prepend(loader_image);
		
		/* create Navi and
		 * create Events for the images 
		 */
		var navi = "";
		var x = 1;
		slideshow.image_container.find('.image').each(function(){
			//give each image an unique class
			$(this).addClass('image-'+x);
			
			//Set Image IDs
			$(this).attr("CIID", x);
			
			//set the image description as title for the image
			$(this).attr('title', $(this).find('.info b').text());
			
			//get the href-attribute of the link
			var link = $(this).find('.link').attr('href');
			
			/* Set actions for mouseover and click events
			 * (this is just set in the case there is given a link
			 * that should be executed if the image was clicked)
			 */
			if (link != "undefined") {
				
				$(this).mouseover(function(){
					$(this).css("cursor", "pointer");
				});
				
				$(this).click(function(){
					//if($(this).hasClass('current'))
					//{
						window.location.href = link;									
					//}
				});				
			}
			
			/*
			 * Event for mouseenter
			 * (the action should be only performed if:
			 * 		-the hovered image is the currently active image
			 * 		-the pause_on_hover flag is set, so that pausing may be executed
			 * 		-autoslide is turned on)
			 */
			$(this).mouseenter(function(){
				if($(this).hasClass('current')
					&& slideshow._pause_slide_on_hover  
					&& slideshow._autoSlide)
				{
					//stop the slideshow
					slideshow.autoSlideStop();
					
					//set the paused_on_hover flag
					slideshow._paused_on_hover = true;
				}
			});
			
			/*
			 * Event for mouseleave
			 * (the action should be only performed if:
			 * 		-the hovered image is the currently active image
			 * 		-the pause_on_hover flag is set, so that pausing may be executed)
			 */
			$(this).mouseleave(function(){
				if($(this).hasClass('current') 
					&& slideshow._paused_on_hover)
				{
					slideshow._paused_on_hover = false;
					slideshow.autoSlideStart();
				}
			});
			
			//create a new link for the navigation
			navi += '<a class="show-image" CIID="'+x+'" title="'+slideshow.container.find('.image').eq(x-1).attr('title')+'">'+x+'</a>&nbsp;'; 
			x++;
		})
		
		//get the height of the slideshow
		slideshow_height 				= slideshow.container.innerHeight();
		//get the height of the navi
		slideshow_navi_height 			= slideshow.image_navi.innerHeight();
		//get the height of the info box
		slideshow_info_height 			= slideshow.image_container.find('.info').innerHeight();
		
		//place the navi container correctly in the lower left corner
		slideshow.image_navi			.css("margin-top", (slideshow_height - slideshow_navi_height) + "px");
		//put the navi content into the navi container
		slideshow.image_navi			.html(navi);
		
		/*
		 * Set some styles for the images
		 * and the info
		 */
		slideshow.image_container		.find('.image').css({
			'opacity' 	: slideshow.inactive_image_opacity,
			'height' 	: slideshow.container.innerHeight() + "px",
			'width'		: slideshow.inactive_image_width + "px"
		}).find('.info').css('margin-top', (slideshow_height - slideshow_navi_height - slideshow_info_height) + "px");
		
			
		/*
		 * Set some tsyles for the first image (active one)
		 * and fade in info
		 */
		slideshow.image_container		.find('.image:first').css({
			'width': slideshow.active_image_width + "px",
			'opacity': "1.0"
		}).find('.info').show();//.fadeIn('slow');
		
		//set the class for the current navi element
		slideshow.image_navi			.find('a:first').addClass('current_opener');
		
		//set a function for the click event of the play button
		slideshow.play_button.click(function(){
			slideshow.autoSlideStart();
		}).css("margin", "385px 0 0 " + (115 - slideshow.play_button.innerWidth()) + "px");
		
		//set events for the navi links
		slideshow.image_navi.find('a').each(function(){
			$(this).click(function(){
				//set the pauesd on over to false, so the slideshow would not 
				//resume on mouseleave
				slideshow._paused_on_hover = false;
				//stop the autosliding
				slideshow.autoSlideStop();
				//slide to the selected image
				slideshow.slide( $(this).attr("CIID") );		
			})				
		});
		
		//remove the loader
		slideshow.image_container.find('.loader').remove();
		
		//set a timeout and after that start the autoslideing
		if(slideshow.timer!=null)
			window.clearTimeout(slideshow.timer);
		slideshow.timer	= window.setTimeout(slideshow.autoSlide, slideshow._autoSlideSpeed);
		
	}
	
	this.error = function( msg )
	{
		alert(msg);
	}

	this.killFalseSlide 		= function( jNode )
	{
		jNode.stop(true, true).css({
			"width" 	: slideshow.inactive_image_width+"px",
			"opacity" 	: slideshow.inactive_image_opacity
		});
	}
	
	this.slideClose 			= function( jNode )
	{
		//hide the info box of the currently active image
		if(jNode.length<1)
			return;
		jNode.find('.info').hide();//fadeOut('fast');
		jNode.stop(true, false).animate({
			width: slideshow.inactive_image_width+"px",
			opacity: slideshow.inactive_image_opacity
		}, slideshow.slide_speed-4, "linear", function(){
			
		})	
	}
	
	this.slideOpen				= function ( jNode )
	{
		jNode.stop(true, false).animate({
			width: slideshow.active_image_width+"px",
			opacity: "1"
		}, slideshow.slide_speed, "linear", function(){
			$(this).addClass('current');
			slideshow.image_container.find('.current').find('.info').show();//.fadeIn('slow');
		})
	}

	this.slide 					= function( CIID )
	{
		//get the current image
		var current = slideshow.image_container.find('.image-'+slideshow._current_image_ID);
		//get the image
		var image = "image-"+CIID;
		var next	= slideshow.image_container.find('.'+image)
		$('.current').removeClass('current');
		
		//disable the navi (if activated)
		if (slideshow.on_slide_disable_navi) {
			slideshow.image_navi.fadeOut('fast');
		}		
		
		
		//NAVI
		
		
		
		//unset the current navi element identicator
		slideshow.image_navi.find('a[CIID="'+slideshow._current_image_ID+'"]').removeClass('current_opener');
		//add the current identicator to the new node
		slideshow.image_navi.find('a[CIID="'+CIID+'"]').addClass('current_opener');
		
		//ANIMATION
		//stop any running animation and clear the animation queue
		slideshow.image_container.each(function(){
			$(this).stop(true, false);
		})
		
		//hide the current image
		slideshow.slideClose(current);
		//show the next image		
		slideshow.slideOpen(slideshow.image_container.find('.'+image))			
		
		//set new current image ID
		slideshow._current_image_ID = CIID;
		
		//display the navi again if it was disabled
		if (slideshow.on_slide_disable_navi) {
			slideshow.image_navi		.fadeIn('slow');
		}
	}
	
	this.autoSlideNext 					= function()
	{
		var CIID = "";
		
		/*
		 * Get the direction to be slided to
		 */
		if(slideshow._autoSlideDirection == 1)
			CIID = slideshow._current_image_ID+1;
		else
			CIID = slideshow._current_image_ID-1;
			
		//if slideshow reached left or right border
		if(CIID <= 0 || CIID > slideshow._num_images)
		{
			//depending on slideshow mode set a new image to resume with
			if (slideshow._autoSlideMode == "there-and-back-again") {
				slideshow._autoSlideDirection = (slideshow._autoSlideDirection==1)?-1:1;
				if(slideshow._autoSlideDirection == 1)
					CIID = slideshow._current_image_ID+1;
				else
					CIID = slideshow._current_image_ID-1;
			}
			else if(slideshow._autoSlideMode == "loop")
			{
				if(slideshow._autoSlideDirection == 1)
					CIID = 1;
				else
					CIID = slideshow._num_images-1;
			}
			else
			{
				CIID = 1;
			}
		}
	
		//slide
		slideshow.slide( CIID );
		//start slideshow
		if(slideshow.timer!=null)
			window.clearTimeout(slideshow.timer);
		slideshow.timer	= window.setTimeout(slideshow.autoSlide, slideshow._autoSlideSpeed);
	}
	
	this.autoSlide						= function()
	{
		
		if(slideshow._autoSlide)
		{
			slideshow.autoSlideNext();
		}
		else
			return false;
	}
	
	this.autoSlideStop					= function()
	{
		
		slideshow._autoSlide = false;
		//show restarter icon
		slideshow.container.find('.play').fadeIn('slow');
	}
	
	this.autoSlideStart					= function()
	{
		slideshow.container.find('.play').fadeOut('slow');
		slideshow._autoSlide = true;
		slideshow.image_container.children('.image').each(function(){
			$(this).stop();
		})
		slideshow.autoSlide();
	}
	
	this.each(function(){
		var jNode = $( this );
		slideshow.init(jNode);		
	});
	
	return this;

}