/*
	JQuery Plugin für eine große Slideshow

	Parameter:
						
		* images 					(Array)		: Bilder die in der Slidershow angezeigt werden sollen
				- src					(String)	: pfad zu den Bild
				- html 				(String) 	: kann als Bildbeschreibung genutzt werden, der Html code kommt unter die Galerie
				- button 			(Array)		: eine Liste von Buttons
						- text 		(String) 	: Text von den Button
						- type 		(String) 	: "blink" -> der Button leuchtet auf. Weiter types gibt es noch nicht
						- link 		(String) 	: Linkadresse
						- target	(String) 	: _blank, _self, _parent, _top
		
		* pictureWidth 		(Int) 		: Breite von einem Bild, daher ist es empfohlen, das alle Bilder gleich breit sind	(px)
		* pictureHeight   (Int)			: Höhe von einem Bild, daher ist es empfohlen, das alle Bilder gleich hoch sind			(px)
		* containerWidth  (Int) 		: Breite von der Bildergalerie																											(px)
		* containerHeight (Int)			: Höhe von der Bildergalerie																												(px)
		* sliderHeight 		(Int)			: Höhe von dem Rahmen																																(px)
		* sliderWidth			(Int)			: Breite von dem Rahmen																															(px)
		* sliderColor			(String)	: Rahmenfarbe
		* fadeSpeed				(Int)			: in welcher Geschwindigkeit sich das Bild einrastet, beim verschieben							(ms)
		* textSpeed				(Int)			: in welcher Geschwindigkeit sich der Text ausblendet und einblendet 								(ms)
		* blinkSpeed			(Int)			: in welcher Geschwindigkeit der Button blinkt 																			(ms)
		* new_projekt			(Boolean)	: die Galerie bekommt eine Banner
		* nexImageSpeed		(Int)			: in welcher Geschwindigkeit der automatische Bilderwechsel stattfinden soll
		


*/

(function($){
		
	var settings = {
		images : [{
			src : "",
			html : "",
			button : []				
		}],
		pictureWidth:512,
		pictureHeight:326,
		containerWidth:648,
		containerHeight:460,
		sliderHeight:360,
		sliderWidth:520,
		sliderColor:'#FFFFFF',
		fadeSpeed:500,
		textSpeed:100,
		blinkSpeed:400,
		new_projekt: false,
		nextImageSpeed:10000
	};
	
	var methods = {
		init : function(options) {
			if((navigator.userAgent.match(/iPhone/i)) || 
				 (navigator.userAgent.match(/iPod/i)) || 
				 (navigator.userAgent.match(/iPad/i)) || 
				 (navigator.userAgent.match(/Android/i)) ||
				 (navigator.userAgent.match(/webOS/i))) {
 				var isTouchScreen = 1;
 			}else{
 				var isTouchScreen = 0;
 			}
			
			//clone setting object for multible use
			_settings = $.extend(true, {}, settings);
			
			//no initialization has been done
			if (options != undefined) { 
				$.extend( _settings, options );
			}
			this.each(function(){
				var data = $(this).data("bsSlider");
				if(!data){
					$(this).data("settings",_settings);
				}
			});
			
			var self = "";
			//Grundgerüst
			this.html(buildHTML.apply(this));
			
			//Bilder einfügen in Wrapper
			for(i=0 ; i<this.data("settings").images.length ; i++){
				methods.addImageToSlider.apply(this,[this.data("settings").images[i]]);
			}
			
			//aktuelles Bild auslesen
			this.data("currentImage",methods.getCurrentImage.apply(this));
			//Buttons setzen
			changeButtonStatus.apply(this);
			
			//Text setzen
			changeText.apply(this,[methods.getTextFromCurrentImage.apply(this)]);
			
			//Button im Textfeld setzen
			changeButtonList.apply(this,[methods.getButtonFromCurrentImage.apply(this)]);

			//Banner setzen falls neue Projekte
			if(this.data("settings").new_projekt=="true"){
				this.find(".banner").addClass("new_projekt");
			}
			
			//Events Binden
			var self = this;
			this.bind("next",nextImage);
			this.bind("previous",previousImage);
			
			this.find(".dragger").draggable({
					drag: function(){
						$.doTimeout('autoImageNext');
						if(self.data("currentImage").attr("id")!=methods.getCurrentImage.apply(self).attr("id")){
							self.data("currentImage",methods.getCurrentImage.apply(self));
							changeText.apply(self,[methods.getTextFromCurrentImage.apply(self)]);
							changeButtonList.apply(self,[methods.getButtonFromCurrentImage.apply(self)]);
						}
						DraggerPositionToDraggerImage.apply(self);
					},
					stop: function(){
						changeStatus.apply(self);
						changeButtonStatus.apply(self);
					},
					handel 					: ".dragger_selectable",
					axis						: 'x',
					containment			: 'parent',
					scrollSensetive : 100,
					scrollSpeed			: 100
			});
		
		  /** Touch funktion hinzufügen */
			this.find(".dragger").addTouch();
			this.find(".restriction_wrapper").addTouch();
			
			
			//Event auslösen bei click
			this.find(".arrow_left").click(function(){
					$.doTimeout('autoImageNext');
					methods.previousImage.apply($(this));
			});
			this.find(".arrow_right").click(function(){
					$.doTimeout('autoImageNext');																		 
					methods.nextImage.apply($(this));
			});
			
			//Bilderwechsel
			$.doTimeout('autoImageNext',this.data("settings").nextImageSpeed,function(){
					var id = methods.getCurrentImage.apply($(self)).attr("id");
					var imageCount = methods.getImageCount.apply($(self))-1;
					if(id==imageCount){
						methods.fadeToImage.apply($(self),[0]);
						return true;
					}
					methods.nextImage.apply($(self));	
					return true;
			});
			
			if(isTouchScreen){
				this.find(".restriction")
					.mousedown(function(e){
						$.doTimeout('autoImageNext');
						self.data("oldPageX",e.pageX);
						self.data("wrapperX",getWrapperPosition.apply($(self)));
						$(this).bind('mousemove',function(e){	
							var pos = e.pageX-self.data("oldPageX")+(self.data("wrapperX")*(1));
							fadeImage.apply($(self),[pos,0]);
						});
					})
					.mouseup(function(){
						changeStatus.apply($(self));								
						$(this).unbind('mousemove');
						return false;
		
					})
					.mouseleave(function(){
						changeStatus.apply($(self));								
						$(this).unbind('mousemove');
					});
			}
			
			//Css setzen
			buildCSS.apply(this);
			return this;
		},
		
		addImage : function(image){
			this.data("settings").images.push(image);
		},
		
		getImage : function(index){
			return this.find("img[id=\""+index+"\"]");
		},
		
		setTextToImage : function(index,text){
			this.find("img[id=\""+index+"\"]").data("html",text);
		},
		
		getTextFromImage : function(index){
			return this.find("img[id=\""+index+"\"]").data("html");
		},
		
		setButtonsToImage : function(index,array){
			this.find("img[id=\""+index+"\"]").data("button",array);
		},
		
		getButtonFromImage : function(index){
			return this.find("img[id=\""+index+"\"]").data("button");
		},
		
		setBannerFromImage : function(index,banner){
			this.find("img[id=\""+index+"\"]").data("banner",banner);
		},
		
		getBannerFromImage : function(index){
			return this.find("img[id=\""+index+"\"]").data("banner");
		},
		
		getImageCount : function(){
			return this.find(".restriction_wrapper img").length;
		},
		
		getCurrentImage : function(){
			var id =  Math.round(this.find(".restriction_wrapper").css("left").split("p")[0]*(-1) / settings.pictureWidth);	
			return this.find("img[id=\""+id+"\"]");
		},
		
		addImageToSlider : function(image){
			var id 		= methods.getImageCount.apply(this);
			var html  = "<img class='restriction_image' width='"+ settings.pictureWidth +"' src='"+ image.src +"' alt='"+ image.src +"' id='"+ id +"'/>";
			image.id 	= id;
			this.find(".restriction_wrapper").append(html);
		},
		
		nextImage : function(){
			this.trigger("next");
		},
		
		previousImage : function(){
			this.trigger("previous");
		},
		
		getTextFromCurrentImage : function(){
			return this.data("settings").images[methods.getCurrentImage.apply(this).attr("id")].html;
		},
		
		getButtonFromCurrentImage : function(){
			return this.data("settings").images[methods.getCurrentImage.apply(this).attr("id")].button;
		},
		
		getBannerFromCurrentImage : function(){
			return this.data("settings").images[methods.getCurrentImage.apply(this).attr("id")].banner;
		},
		
		fadeToImage : function(index){
			$.doTimeout('autoImageNext');
			var imageID = methods.getImage.apply($(this),[index]).attr("id");
			var xPosition = (-1)*imageID*this.data("settings").pictureWidth;
			fadeImage.apply(this,[xPosition,this.data("settings").fadeSpeed]);
		}
		
	};
	
	function nextImage(){
			var left = $(this).find(".restriction_wrapper").css("left").split("p")[0];
			left -= $(this).data("settings").pictureWidth;
			fadeImage.apply($(this),[left,$(this).data("settings").fadeSpeed]);	
	}
	
	function previousImage(){
			var left = $(this).find(".restriction_wrapper").css("left").split("p")[0];
			left = (left*1) + $(this).data("settings").pictureWidth;
			fadeImage.apply($(this),[left,$(this).data("settings").fadeSpeed]);
	}
	
	function changeStatus(){
		var imageID = methods.getCurrentImage.apply(this).attr("id");
		var xPosition = (-1)*imageID*this.data("settings").pictureWidth;
		fadeImage.apply($(this),[xPosition,$(this).data("settings").fadeSpeed]);
	}
	
	function changeText(text){
		if(text==undefined){
			text="";
		}
		var self = this;
		this.find(".slider_text").stop(true,true).animate({
			opacity:0
		},{
			duration : self.data("settings").textSpeed,
			complete : function(){
				$(this).html(text);
				$(this).animate({
						opacity:1
				},self.data("settings").textSpeed);
			}
		});
	}
	
	/** Button Liste unter der Bildergalerie wird geänder */
	function changeButtonList(button){
		this.find(".slider_information_button").html("");
		if(button){
			for(var i=0;i<button.length;i++){
				if(i==0) var html = "<ul>";
				
				html += "<li>";
					html += 	"<a target=\""+(button[i].target?button[i].target:"")+"\" href=\""+ button[i].link +"\">";
					html +=		"<span class='slider_information_button_text'>"+	button[i].text +"</span>";
					if(button[i].type=="blink")
						html += "<div class='slider_information_button_"+ button[i].type +"'></div>";
					html +=		"</a>";
				
				html += "</li>";
				
				if(i==(button.length-1))html +="</ul>";
			}
		}
		this.find(".slider_information_button").html(html);
		blink.apply(this,[this.find(".slider_information_button_blink")]);
	}
	
	function blink(object){
		var self = $(this);
		this.find(object).animate({
			opacity : 0
		},{
			duration : self.data("settings").blinkSpeed,
			complete : function(){
				$(this).animate({
					opacity : 1
				},{
					duration : self.data("settings").blinkSpeed,
					complete : blink.apply(self,[object])
				});
			}
		});
	}
	
	/** Links und Rechts Buttons vom Slider werden geänder */
	function changeButtonStatus(){
		var imageID = methods.getCurrentImage.apply(this).attr("id");
		var imageCount = methods.getImageCount.apply(this);
		$(this).find(".arrow_container_left").show();
		$(this).find(".arrow_container_right").show();
		if(imageID==0){
			$(this).find(".arrow_container_left").hide();
			return true;
		}
		if(imageID==(imageCount-1)){
			$(this).find(".arrow_container_right").hide();
			return true;
		}
	}
	
	function fadeImage(xPosition,time){
		var self = this;
		var wrapperWidth = self.find(".restriction_wrapper").width();
		var pictureWidth = self.data("settings").pictureWidth;
		var maxLeft = (wrapperWidth-pictureWidth+xPosition)*(-1);
		if(xPosition<=0&&maxLeft<=0){
			if(self.data("animate")==undefined||self.data("animate")==false){
				self.data("animate",true);
				$(this).find(".restriction_wrapper").animate({
					left : xPosition
				},{
					duration : time,
					step : function(){
						ImagePositionToDraggerPosition.apply(self);
					},	
					complete : function(){
						changeButtonStatus.apply(self);
						if(self.data("currentImage").attr("id")!=methods.getCurrentImage.apply(self).attr("id")){
							self.data("currentImage",methods.getCurrentImage.apply(self));
							changeText.apply(self,[methods.getTextFromCurrentImage.apply(self)]);
							changeButtonList.apply(self,[methods.getButtonFromCurrentImage.apply(self)]);
						}
						self.data("animate",false);
					}
				});
			}
		}
	}
	
	function setWrapperPosition(xPosition){
		$(this).find(".restriction_wrapper").css({
				"left":xPosition
		})
	}
		
	function getWrapperPosition(){
		return $(this).find(".restriction_wrapper").css("left").split("p")[0];
	}
	
	function DraggerPositionToDraggerImage(){
		var draggerPosition = getDraggerPosition.apply($(this));	
		var wrapperWidth = $(this).find(".restriction_wrapper").width();
		var pictureWidth = $(this).data("settings").pictureWidth;
		var draggerWidth = $(this).find(".dragger_selectable").width();
		var xPosition = -1 * draggerPosition * ((wrapperWidth-pictureWidth)/(pictureWidth-draggerWidth));
		setWrapperPosition.apply(this,[xPosition]);
	}
	
	
	function ImagePositionToDraggerPosition(){
			var wrapperWidth = $(this).find(".restriction_wrapper").width();
			var wrapperLeft  = $(this).find(".restriction_wrapper").css("left").split("p")[0];
			var pictureWidth = $(this).data("settings").pictureWidth;
			var draggerWidth = $(this).find(".dragger").width();
			var xPosition = (-1)*(pictureWidth-draggerWidth)/(wrapperWidth-pictureWidth)*wrapperLeft;
			setDraggerPosition.apply(this,[xPosition]);	
	}
	
	function setDraggerPosition(xPosition){
		$(this).find(".dragger").css({
				"left":xPosition
		});
	}
	
	function getDraggerPosition(){
		return $(this).find(".dragger").css("left").split("p")[0]; 
	}
	
	function buildHTML(){
		var html  =	"<div class='slider'>";
		html +=		"<div class='slider_content'>";
    html += 		"<div class='button_container_left'>";
    html +=  			"<div class='arrow_container_left'><a class='arrow_left'></a></div>";
    html +=			"</div>";
    html +=			"<div class='picture_border'>";
		html +=				"<div class='banner'></div>";
    html +=		  	"<div class='restriction'>";
		html +=					"<div class='restriction_wrapper'>";
		html +=					"</div>";
		html +=				"</div>";
    html +=			  	"<div class='scrollbar'>";
    html +=    				"<div class='dragger'><div class='dragger_selectable'></div></div>";
    html +=					"</div>";
    html += 			"</div>";
    html +=				"<div class='button_container_right'>";
    html +=  				"<div class='arrow_container_right'><a class='arrow_right'></a></div>"
    html += 			"</div>";
 		html += 		"</div>";
  	html += 		"<div class='slider_information'>";
    html +=			"<div class='slider_information_button'>";
    html +=			"</div>";
    html += 		"<div class='slider_text'>";
    html +=			"</div>";
  	html +=		"</div>";
		html +=	"</div>";
		return html;
	}
	
	function buildCSS(){
		var settings = $(this).data("settings");
		$(this).find(".slider").css({
			"height" 	: settings.containerHeight,
			"width"		: settings.containerWidth
		});
		
		$(this).find(".slider_content").css({
			"height"	: settings.sliderHeight
		});

		$(this).find(".button_container_left").css({
			"width"		: ((settings.containerWidth-settings.sliderWidth) /2),
			"height"	: settings.sliderHeight
		});

		$(this).find(".button_container_right").css({
			"width"		: ((settings.containerWidth-settings.sliderWidth) /2),
			"height"	: settings.sliderHeight
		});

		$(this).find(".arrow_container_left").css({
			"marginTop"		: ((settings.sliderHeight/2) - ($(this).find(".arrow_container_left").height()/2)),
			"marginLeft"	: ((settings.containerWidth-settings.sliderWidth) /2) - $(this).find(".arrow_container_left").width()
		});
		
		$(this).find(".arrow_container_right").css({
			"marginTop"		: settings.sliderHeight/2 - $(this).find(".arrow_container_right").height()/2														
		});
		
		$(this).find(".picture_border").css({
			"backgroundColor"	: settings.sliderColor,
			"width"						: settings.sliderWidth,
			"height"					: settings.sliderHeight												 
		});
		
		$(this).find(".restriction").css({
			"marginLeft"	: (settings.sliderWidth - settings.pictureWidth)/2,
			"marginTop"		: (settings.sliderWidth - settings.pictureWidth)/2,
			"width"				: settings.pictureWidth,
			"height"			: settings.pictureHeight							
		});
		
		$(this).find(".restriction_image").css({
			"height"	: settings.pictureHeight,
			"width"		: settings.pictureWidth
		});
		
		$(this).find(".restriction_wrapper").css({
			"width"		: methods.getImageCount.apply(this)*settings.pictureWidth,
			"height"	: settings.pictureHeight																		 
		});
		
		$(this).find(".scrollbar").css({
			"marginLeft"			: (settings.sliderWidth - settings.pictureWidth)/2,
			"width"						: settings.pictureWidth,
			"height"					: settings.sliderHeight - settings.pictureHeight - ((settings.sliderWidth - settings.pictureWidth)/2),
			"backgroundColor"	: settings.sliderColor
		});
			
		$(this).find(".dragger_selectable").css({
			"top" : (settings.sliderHeight - settings.pictureHeight - ((settings.sliderWidth - settings.pictureWidth)/2) - $(this).find(".dragger_selectable").height())/2						
		});
		
		$(this).find(".slider_information").css({
			"height"			: settings.containerHeight - settings.sliderHeight,
			"width"				: settings.sliderWidth,
			"marginLeft"	: ((settings.containerWidth-settings.sliderWidth) /2)														 
		});
		
	}
	
	$.fn.bsSlider = function(method) {		
		if ( methods[method] ) {
			return methods[method].apply(this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply(this, arguments );
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.bsSlide' );
		}
	};
   
})(jQuery);