/* ::---------------------------------------------------------------
:: +	imageSlider.js
	2011.03.03
	roberto cornice
	cornice@lemm.de

:: +	Image-Slider für jQuery  - lädt Bilder erst wenn sie angezeigt werden sollen

:: +	[c] 2011 by Lemm Werbeagentur GmbH

	------------------------------------------------------------::
	
	
:: +	Aufruf

		jQuery(document).ready(function() {
    		bs			= new slideIt("slideshowContainer");		//::> Id des Divs
    		bs.cWidth	= "520px";									//::> Breite
    		bs.cHeight	= "307px";									//::> Höhe
    		bs.speed	= 1000;										//::> Geschwindigkeit
			bs.start();												//::> Feuer
		});

*/

function imageSlider(slideContainer, images) 		{
	
	
	this.frequence	        = 7500;
	this.fadetime	        = 750;
	this.direction          = "right";
	// Wie soll der Slider animiert sein?
	//:>               fade || slide
	this.mode               = "slide";
	this.timeoutcontainer;
	this.showBlueboxes	    = true;
	this.showThumbs		    = true;
	
	this.naviBoxStyle	    = "bottom: 15px; left: 5px;";
	this.naviBoxBackground  = '#336699';
	this.naviBoxBorder      = "1px solid #FFF";
	
	this.naviThumbStyle		= "margin: -60px 20px 0 0";
	this.topOffset			= $(slideContainer).offset();
	this.top				= this.topOffset.top;
	this.left				= this.topOffset.left;
	this.height				= $(slideContainer).height();
	this.width				= $(slideContainer).width();
	
	this.container			= slideContainer;
	this.parentContainer	= $(slideContainer).parent();
	
	this.images				= images;
	this.size				= images["gross"].length;
	this.imagesIndex		= 0;
	this.imageHolder		= Array();
	
	this.setLoadedSrc		= Array();
	
	this.activeImageHolder	= 0;
	this.nextImageHolder	= 1;
	this.zindexstart		= 9247;
	var me = this;
	this.hold				= false;
	this.entranceblocked	= false;	
	this.loadEventHolder;
	this.counter			= 0;
	
	this.counter2			= 0;
	
	// Ist der Slider gerade in Bewegung?
	var active = false;
	
	this.init	= function()	{
		for( i = 0; i < 2; i++ )	{
			me.imageHolder[i]	= $(me.container).not(".imageSliderContainerElement").clone().appendTo(me.parentContainer).css({
				zIndex		: me.zindexstart-i,
				position	: "absolute",
				top			: "0"+"px",
				//marginTop	: ( i * (-1) * me.height ),
				left		: 0
			}).addClass("imageSliderContainerElement").
			attr({
				src			: me.images["gross"][i]
			});
		}
		//::> Klappe zu, wenn es nicht mehr als 1 Bild gibt
		if(this.size <= 1){
            return;
        }

		var nextLevel	= me.zindexstart+i+1;

		$(me.container).not(".imageSliderContainerElement").remove();
		
		if(me.mode == "slide"){
            $(me.imageHolder[1]).hide(0,0);
            $(me.parentContainer).css({overflow: "hidden"});
        } else {
            $(me.imageHolder[1]).fadeTo(0,0);
        }
		
		if( this.showBlueboxes )	{
			$(me.parentContainer).append('<div id="imageSliderNaviSquare_container" style="z-index:'+(nextLevel+1)+';position:absolute;'+me.naviBoxStyle+'"></div>');
			for( i = 0; i < me.size; i++ )	{
				$("#imageSliderNaviSquare_container").append('<div class="imageSliderNaviSquare" id="imageSliderNaviSquare_'+i+'" style="cursor:pointer;border:1px solid transparent;top:0;width:14px;height:14px;float:right;background:' + this.naviBoxBackground + ';margin:0 7px;position:relative"></div>', function()	{

				});
			}

			$(".imageSliderNaviSquare").bind("click", function()	{
				clearTimeout(me.timeoutcontainer);
				clearTimeout(me.tinyTimeoutcontainer);
				if( !typeof(me.loadEventHolder) == 'undefined' )    {
					me.loadEventHolder.unbind("load").unbind("complete");
				}
				var param		= $(this).attr("id").split("_");
				me.imagesIndex	= ( param[1] - 1 );
				me.showNext();
			});

			$("#imageSliderNaviSquare_0").css("border", this.naviBoxBorder);
		}

		if( this.showThumbs )	{
			$(me.parentContainer).append('<div id="imageSliderNaviThumb_container" style="z-index:'+(nextLevel+1)+';'+me.naviThumbStyle+'"></div>');
			for( i = 0; i < me.size; i++ )	{
				$("#imageSliderNaviThumb_container").append('<img class="imageSliderNaviThumb" id="imageSliderNaviThumb_'+i+'" style="cursor:pointer;border:2px solid #000000;top:0;float:right;margin:0 7px;position:relative" src="'+me.images["klein"][i]+'" />', function()	{

				});
			}

			$(".imageSliderNaviThumb").bind("click", function()	{
				clearTimeout(me.timeoutcontainer);
				clearTimeout(me.tinyTimeoutcontainer);
				if( !typeof(me.loadEventHolder) == 'undefined' )    {
					me.loadEventHolder.unbind("load").unbind("complete");
				}
				var param		= $(this).attr("id").split("_");
				me.imagesIndex	= ( param[1] - 1 );
				me.showNext();
			});

			$("#imageSliderNaviThumb_0").css("border", "2px solid #FFFFFF");
		}

		me.setTimer();
		
	}
	
	me.setTimer	= function()	{
		clearTimeout(me.timeoutcontainer);
		clearTimeout(me.tinyTimeoutcontainer);
		me.timeoutcontainer	= setTimeout(				
			function() { 				
				me.showNext()
			}, me.frequence
		);		
	}
	me.setTinyTimer	= function()	{
		clearTimeout(me.timeoutcontainer);
		clearTimeout(me.tinyTimeoutcontainer);
		me.tinyTimeoutcontainer	= setTimeout(				
			function() { 				
				me.showImage()
			}, 100
		);		
	}
	
	me.setLoaded	= function(index)	{
		$(me.imageHolder[index]).load(function(){
			me.setLoadedSrc[index]	= true;
		});
	}
	me.unsetLoaded	= function(index)	{
		me.setLoadedSrc[index]	= false;
	}
	
	me.getImageHolder	= function()	{
		if( me.activeImageHolder == 0 )	{
			me.nextImageHolder	= 1;
		} else {
			me.activeImageHolder	= 1;
			me.nextImageHolder	= 0;
		}
	}
	
	me.toggleImageHolder	= function()	{
		if( me.activeImageHolder == 0 )	{
			me.activeImageHolder	= 1;
			me.nextImageHolder	= 0;
		} else {
			me.activeImageHolder	= 0;
			me.nextImageHolder	= 1;
		}
	}
	
	me.showNext	= function()	{
        me.imagesIndex++;
    	if( me.imagesIndex > ( me.size - 1 ) )	{
    		me.imagesIndex = 0;
    	}
    	me.direction = "left";
    	me.showImage();
	}
	
	me.showPrev	= function()	{
        me.imagesIndex--;
		if( me.imagesIndex < 0 )	{
			me.imagesIndex = me.size - 1;
		}
		me.direction = "right";
		me.showImage();
	}
	
	me.showImage	= function()	{
	
		if( me.hold )	{
			return;
		}
		active = true;
		
		if( me.entranceblocked == true )	{
			//me.debug("activated");
			me.setTinyTimer();
		}
		
		//me.entranceblocked	= true;
		
		me.getImageHolder();
		$(me.imageHolder[me.nextImageHolder]).removeAttr("src");
		
		me.counter++;
		me.loadEventHolder	= $(me.imageHolder[me.nextImageHolder]);
		$(me.imageHolder[me.nextImageHolder]).attr("src", me.images["gross"][me.imagesIndex]).attr("alt", me.images["gross"][me.imagesIndex]).one("load",function(){
			me.entranceblocked	= true;
			$(me.imageHolder[me.nextImageHolder]).unbind("load");	
			$(".imageSliderNaviSquare").css("border", "1px solid transparent");
			$(".imageSliderNaviThumb").css("border", "2px solid #000000");
			$("#imageSliderNaviSquare_"+me.imagesIndex).css("border", "1px solid #FFFFFF");
			$("#imageSliderNaviThumb_"+me.imagesIndex).css("border", "2px solid #FFFFFF");
			
			if(me.mode == "slide"){
                if(me.direction == "right"){
                    $(me.imageHolder[me.nextImageHolder]).css({left: me.width}).show(0).animate({left: 0}, me.fadetime * 1.5);
                    $(me.imageHolder[me.activeImageHolder]).animate({left: -me.width}, me.fadetime * 1.5);
                } else if(me.direction == "left") {
                    $(me.imageHolder[me.nextImageHolder]).css({left: -me.width}).show(0).animate({left: 0}, me.fadetime * 1.5);
                    $(me.imageHolder[me.activeImageHolder]).animate({left: me.width}, me.fadetime * 1.5);
                }
            } else {
                $(me.imageHolder[me.nextImageHolder]).fadeTo(me.fadetime, 1 );
                $(me.imageHolder[me.activeImageHolder]).fadeTo(me.fadetime, 0);
            }
            
			var groar = setTimeout(function()	{
				me.entranceblocked	= false;				
				me.toggleImageHolder();
				me.counter2++;
				active = false;
				me.setTimer();
				},
				me.fadetime
			);
			/*$(me.imageHolder[me.activeImageHolder]).fadeTo(me.fadetime, 0, function()	{
				me.entranceblocked	= false;				
				//me.debug(me.frequence +" - "+ me.nextImageHolder +" - "+ me.activeImageHolder + " - "+me.counter + " - "+me.counter2 );
				me.toggleImageHolder();
				me.counter2++;
				me.setTimer();
			} );*/
		})
		.each(function(){
			if(this.complete) $(this).trigger("load");
		});
	}
	
	
	me.debug		= function( expr )	{
		$("#debug").html( expr );
	}
	
	me.notbremse	= function()	{
		me.hold	= true;
		clearTimeout(me.timeoutcontainer);		
		clearTimeout(me.tinyTimeoutcontainer);
		
		alert("Das Script wurde angehalten!");
	}
	
}