/* ------------------------------------------------------------------------
	s3Slider
	
	Developped By: Boban Karišik -> http://www.serie3.info/
        CSS Help: Mészáros Róbert -> http://www.perspectived.com/
	Version: 1.0
	
	Copyright: Feel free to redistribute the script/modify it, as
			   long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){  

    $.fn.s3Slider = function(vars) {       
        
			var element     = this;
			var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
			var current     = null;
			var timeOutFn   = null;
			var prevNo		= 0;
			var nextNo		= 0;
			var blockTransition       = false;
			var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
			var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
			//ikxx
			var itemsImage       = $("#" + element[0].id + "Content ." + element[0].id + "Image img");
			var inBigImageState = false;
			var textPosition = (vars.textPosition != undefined) ? vars.textPosition : "N";
			//movementDirection = "N" ;// North
			//movementDirection = "E" ;// East
			//movementDirection = "S" ;// South
			//movementDirection = "W" ;// West
			var slidingTime     = (vars.slidingTime != undefined) ? vars.slidingTime : 600;

        
		  items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               blockTransition = true;
            });
            
            $(items[i]).mouseout(function() {
                if(!inBigImageState){
						 blockTransition   = false;
						 pushNewImageInTime(true);
					 }
            });
				
				$(items[i]).click(function() {
                blockTransition   = true;
                showBigImage();
            });
            
        });
		  

		  
		  var showBigImage= function() 
		  {
			  clearTimeout(timeOutFn);
			  timeOutFn = null;
				inBigImageState=true;
				
				
				//use nextNo cause current is not set before first fade.
				//and current in fact positions to last image.
				var imgname= itemsImage[nextNo].src.replace("_thumb.JPG",".jpg");
				
				$('#bigImageContainerHidden').replaceWith("<div id='bigImageContainer'>" 
						+ '<img id="bigImage" src="' + imgname + '"></img>' + "</div>");
				$('#bigImage').load(function(){
					//$('#bigImageContainer').css("margin-left", (((900-$('#bigImage').width())/2) -20));
					$('#bigImageContainer').animate(
						{width: $('#bigImage').width()
						, marginLeft: (((900-$('#bigImage').width())/2) -20)
						}
						, 500);});
				//$('#bigImageContainerHidden').replaceWith("<div id='bigImageContainer'></div>");
				//$('#bigImageContainer').css("background-image", "url("+imgname+")");
				
				$('#bigImageContainer').click(function(){
					$('#bigImageContainer').replaceWith("<div id='bigImageContainerHidden'></div>");
					
					inBigImageState = false;
					blockTransition  = false;
					pushNewImageInTime();
				});
			//	$('#bigImageFiller').fadeTo(200, 0.5);
				$('#bigImage').fadeTo(500, 1);
				

			}

			var pushNewImageInTime = function() {
				 if(items.length > 0 && timeOutFn == null){
						if (!blockTransition){
							 timeOutFn = setTimeout(slideForward, timeOut);
						}
						else {
							 timeOutFn = setTimeout(pushNewImageInTime, slidingTime);
						}
				 }
        }
		  
		   //Step4
			var fadeOutImage = function()
			{
				$(items[prevNo]).fadeOut(slidingTime, fadeInImage);
			}
			//Step1
			var fadeInImage = function() {
				$(items[nextNo]).fadeIn(slidingTime, fadeInSpan);
			}
			//Step2
			var fadeInSpan = function(){
				if (itemsSpan[nextNo].innerHTML.length > 0)
				{
					if(textPosition=="S") {
						$(itemsSpan[nextNo]).slideUp(slidingTime, prepareNextImage);
					} else {
						$(itemsSpan[nextNo]).slideDown(slidingTime, prepareNextImage);
					}
				}
				else
				{
					prepareNextImage();
				}
			}

			var prepareNextImage = function (){
				current = items[nextNo];
				pushNewImageInTime();
			}
        
			var slideForward = function(){
				clearTimeout(timeOutFn);
				timeOutFn = null;
				slide(true);
			}
			
			var slideBackward = function(){
				clearTimeout(timeOutFn);
				timeOutFn = null;
				slide(false);
			}
			
			var gotoFirst = function(){
				clearTimeout(timeOutFn);
				timeOutFn = null;
				current=null;
				slide(true);
			}
			
			var gotoLast = function(){
				clearTimeout(timeOutFn);
				timeOutFn = null;
				current=items[(items.length-2)];
				slide(true);
			}
			
			$('#SlideImagePrevious').click(function(){slideBackward();});
			
			$('#SlideImageNext').click(function(){slideForward();});
			
			$('#SlideImageFirst').click(function(){gotoFirst();});
			
			$('#SlideImageLast').click(function(){gotoLast();});

			
        var slide = function(goForward) {
				var firstImg = (current == null);
				
				//if only one image, do not go trough loop more than once
				// current is set && that means that that one image is visible
				if((current != null) && (items.length == 1))
					return;
					
            current = (current != null) ? current : (items.length-1);

				prevNo      = jQuery.inArray(current, items);

				if (goForward)
				{
					nextNo = (prevNo +1);
					if (nextNo == items.length)
						nextNo = 0;
				}
				else
				{
					nextNo = prevNo -1;
					if (nextNo == -1)
						nextNo = (items.length-1);
				}
				//nextNo = goForward ? 
				//		(((prevNo + 1) == items.length) ? 0 : (prevNo +1)) : 
				//		(((prevNo - 1) == -1 ) ? (items.length-1) : (prevNo -1));
						
            //prevNo = (prevNo == items.length) ? 0 : (prevNo - 1);
           // var newMargin   = $(element).width() * prevNo;
         
			if(!blockTransition) {
				if (!firstImg)
				{
					if (itemsSpan[prevNo].innerHTML.length > 0)
					{
						if(textPosition=="S") {
							$(itemsSpan[prevNo]).slideDown(slidingTime, fadeOutImage);
						} else {
							$(itemsSpan[prevNo]).slideUp(slidingTime, fadeOutImage); 
						}
					}
					else
					{
						fadeOutImage();
					}
				}
				else
				{
					$(items[nextNo]).fadeIn(slidingTime, fadeInSpan);
				}
			}
		}
        
        slideForward();

    };  

})(jQuery);