var imgWidth_small = "143px";
var imgHeight_small ="200px";
var imgWidth_big = "287px";
var imgHeight_big ="400px";
var sliderwidth;				//slider Breite
var sliderheight="400px";		// Slider Hoehe
var slidespeed=1;				//Slider Speed: 1==langsam, 10 == schnell
var slideshowgap=20;			//Pixel-Abstand nach jedem Durchlauf (zwischen Rotationen) in px
var increaseSpeed=0;			//pixel um die die Geschwindigkeit erhoeht werden soll, wenn sich die maus nach rechts oder links bewegt
var numberOfImages = arrImages.length - 1;  //anzahl der bilder aus dem dom
var infoDivWidth = 333;
var infoDivHeight = 408;

//private:
var leftInterval;
var copyspeed=slidespeed;		//tmp-var fuer speed, um darauf arbeiten zu koennen
var arrZoomInInterval = [];
var arrZoomOutInterval = [];
var zoomSteps = 10;
var mitte = 0; /*mittelbereich in dem nicht geslidet werden soll*/
var links =0;  /*linker Bereich vom slider*/
var rechts =0; /*rechter Bereich vom slider*/
var pxToZoom_x = (parseInt(imgWidth_big) - parseInt(imgWidth_small))/zoomSteps;
var pxToZoom_y = (parseInt(imgHeight_big) - parseInt(imgHeight_small))/zoomSteps;	

var actualwidth; //Breite eines sliders wenn alle Bilder drin sind
var x_slider1;	 //Referenz auf slider1
var x_slider2;	 // Referenz auf slider2
var infoDiv;


function fillup(){  //wird im body onload aufgerufen
	var arrWindowSize = getInnerWindowSize();  //[0] = width, [1] = height
	sliderwidth = arrWindowSize[0];
	mitte = parseInt(sliderwidth/6);  /*Bereiche fuer den slider festlegen */
	links = parseInt(sliderwidth/2)-parseInt(mitte/2);
	rechts = sliderwidth - links - mitte;
	document.getElementById("wrapper").style.width=sliderwidth+"px";
    x_slider1=document.getElementById("slider1");
	x_slider2=document.getElementById("slider2");		
	actualwidth = (numberOfImages*parseInt(imgWidth_small)) + (numberOfImages*slideshowgap);
	x_slider2.style.left=actualwidth+"px"; 	
	x_slider1.style.height=sliderheight;
	x_slider2.style.height=sliderheight;
	
	//info-div erstellen und erstmal unsichtbar machen:
	infoDiv = document.createElement("div");
	infoDiv.id ="infoDiv";
	infoDiv.setAttribute("class","infoDiv");
	infoDiv.style.backgroundImage="url(media/windows/window_balloon_blackberry.png)";
	infoDiv.style.backgroundRepeat="no-repeat";
	infoDiv.style.behavior="url('lib/iepngfix/iepngfix.htc')";
	infoDiv.style.width= (infoDivWidth - 45) +"px";
	infoDiv.style.height= (infoDivHeight - 20) +"px";
	infoDiv.style.paddingLeft="25px";
	infoDiv.style.paddingRight="20px";
	infoDiv.style.paddingTop="20px";
	infoDiv.style.visibility = 'hidden';
	document.getElementById("wrapper").appendChild(infoDiv);
	
	for(var c=0;c<numberOfImages;c++){	
		//images erstellen, dann den beiden slidern anhaengen:
		//fuer Slider1:
		var tmpImg = document.createElement("img");
		tmpImg.setAttribute("id","img"+c);
		tmpImg.src = arrImages[c + 1]['path'];
		tmpImg.style.width=imgWidth_small;
		tmpImg.style.height=imgHeight_small;
		tmpImg.style.cursor="pointer";
		tmpImg.style.position="absolute";
		tmpImg.style.left = (c*parseInt(imgWidth_small))+(c*slideshowgap)+"px";
		tmpImg.style.top = "150px";
		tmpImg.onmouseover=function(){imgMouseOver(this);};
		tmpImg.onmouseout=function(){imgMouseOut(this);};
		//fuer slider2:
		var tmpImg2 = document.createElement("img");
		tmpImg2.setAttribute("id","img"+(c+numberOfImages));
		tmpImg2.src = arrImages[c + 1]['path'];
		tmpImg2.style.width=imgWidth_small;
		tmpImg2.style.height=imgHeight_small;
		tmpImg2.style.cursor="pointer";
		tmpImg2.style.position="absolute";
		tmpImg2.style.left = (c*parseInt(imgWidth_small))+(c*slideshowgap)+"px";
		tmpImg2.style.top = "150px";
		tmpImg2.onmouseover=function(){imgMouseOver(this);};
		tmpImg2.onmouseout=function(){imgMouseOut(this);};
		//jetzt den slidern anhaengen:
		x_slider1.appendChild(tmpImg);
		x_slider2.appendChild(tmpImg2);	
	}
	document.onmousemove = checkMousePos;
	leftInterval=setInterval("slide()",30); //animation starten
}


//slide funktion, nach links und nach rechts
function slide(){
	if(copyspeed >0){//maus ist rechts, band bewegt nach links
		//beide slider erstmal bewegen:
		x_slider1.style.left=parseInt(x_slider1.style.left)-copyspeed+"px";
		if(infoDiv.style.visibility == "visible")
			infoDiv.style.left = parseInt(infoDiv.style.left)-copyspeed+"px";
		x_slider2.style.left=parseInt(x_slider2.style.left)-copyspeed+"px";		
		//eventuell verschieben:
		if(parseInt(x_slider1.style.left)<=(actualwidth*(-1))){
			var xyz = parseInt(document.getElementById("img"+((numberOfImages*2)-1)).style.left) + parseInt(document.getElementById("img"+((numberOfImages*2)-1)).offsetWidth) + slideshowgap;
			x_slider1.style.left = xyz+"px";
			//console.log(xyz - parseInt(document.getElementById("img19").style.left) - parseInt(document.getElementById("img19").offsetWidth));
		}
		if (parseInt(x_slider2.style.left)<=(actualwidth*(-1))){
			var zyx = parseInt(document.getElementById("img"+(numberOfImages-1)).style.left) + parseInt(document.getElementById("img"+(numberOfImages-1)).offsetWidth) + slideshowgap;
			x_slider2.style.left = zyx+"px";
			//console.log(zyx - parseInt(document.getElementById("img9").style.left) - parseInt(document.getElementById("img9").offsetWidth));
		}
	}
	
	if(copyspeed <0){//maus ist links, band bewegt nach rechts
		if (parseInt(x_slider1.style.left)< actualwidth){
			x_slider1.style.left=parseInt(x_slider1.style.left)-copyspeed+"px";
			if(infoDiv.style.visibility == "visible")
				infoDiv.style.left = parseInt(infoDiv.style.left)-copyspeed+"px";		
		}
		else{			
			x_slider1.style.left=parseInt(x_slider2.style.left)-actualwidth+"px";
			}
		if (parseInt(x_slider2.style.left)< actualwidth){
			x_slider2.style.left=parseInt(x_slider2.style.left)-copyspeed+"px";
		}
		else{
			x_slider2.style.left=parseInt(x_slider1.style.left)-actualwidth+"px";
			}
	}
}

function imgMouseOver(imgO){
	var idInt = parseInt(imgO.id.substring(3));  // zwischen 0 und 19	(slider1 oder slider2 ?)
	clearInterval(arrZoomOutInterval[idInt]);
	arrZoomInInterval[idInt] = setInterval(function callFunc(){ zoomInHelp(imgO,idInt); },30);	
}

function zoomInHelp(imgO,id){
	if(parseInt(imgO.style.width) < (parseInt(imgWidth_big)-pxToZoom_x)){
		imgO.style.width = parseInt(imgO.style.width) + pxToZoom_x + "px";
		imgO.style.height = parseInt(imgO.style.height) + pxToZoom_y + "px";	
		imgO.style.top = parseInt(imgO.style.top)-15+"px";
		//wenn mouseover ueber ein Bild im slider, dann muss der slider rechts davon ein stueck nach rechts verschoben werden, weil sonst ueberlagerung
		if(id<numberOfImages){
			for(var i=id+1;i<numberOfImages;i++){  //alle Bilder rechts vom vergroesserten nach rechts verschieben
				var bild = document.getElementById("img"+i);
				bild.style.left = 	parseInt(bild.style.left)+15+"px";		
			}
			if(parseInt(x_slider2.style.left) > parseInt(x_slider1.style.left)){//nur wenn der zu verschiebende slider auch wirklich rechts vom "aktuellen" slider ist
				x_slider2.style.left = parseInt(x_slider2.style.left) + 15+"px";
			}
		}
		else {
			for(var i=id+1;i<(numberOfImages*2);i++){  //alle Bilder rechts vom vergroesserten nach rechts verschieben
				var bild = document.getElementById("img"+i);
				bild.style.left = 	parseInt(bild.style.left)+15+"px";		
			}
			if(parseInt(x_slider1.style.left) > parseInt(x_slider2.style.left)){//nur wenn der zu verschiebende slider auch wirklich rechts vom "aktuellen" slider ist
				x_slider1.style.left = parseInt(x_slider1.style.left) + 15+"px";
			}
		}	 		
	}
	else{
		clearInterval(arrZoomInInterval[id]);
		imgO.style.width = imgWidth_big;
		imgO.style.height = imgHeight_big;	
		
		//nun das InfoDiv anzeigen
			var tmpDiv = document.getElementById("infoDiv");
			var tmpId = (id < numberOfImages) ? id : (id-numberOfImages); //weil arrImages nur von 0 - 9
			tmpDiv.innerHTML = '<h1>'+arrImages[tmpId + 1]['name']+'</h1><h2 style="margin-top:15px; margin-bottom:5px">Zutaten</h2>'+arrImages[tmpId + 1]['ingredients']+'<h2 style="margin-top:15px; margin-bottom:5px">Zubereitung</h2>'+arrImages[tmpId + 1]['preparation']+'';
			tmpDiv.style.position="absolute";
			tmpDiv.style.textAlign="left";
			tmpDiv.style.left = parseInt(imgO.offsetLeft) + parseInt(imgWidth_big)+parseInt(imgO.offsetParent.style.left)+10+"px";
			tmpDiv.style.top= "0px";
			tmpDiv.style.visibility = 'visible';
	}	
}

function imgMouseOut(imgO){
	var idInt = parseInt(imgO.id.substring(3));  // zwischen 0 und 19	(slider1 oder slider2 ?)
	clearInterval(arrZoomInInterval[idInt]);
	arrZoomOutInterval[idInt] = setInterval(function callFunc(){ zoomOutHelp(imgO,idInt); },30);	
}

function zoomOutHelp(imgO,id){		

	
	if(parseInt(imgO.style.width) > (parseInt(imgWidth_small))){
		imgO.style.width = parseInt(imgO.style.width) - pxToZoom_x + "px";
		imgO.style.height = parseInt(imgO.style.height) - pxToZoom_y + "px";	
		imgO.style.top = parseInt(imgO.style.top)+15+"px";
		//wenn mouseover ueber ein Bild im slider, dann muss der slider rechts davon ein stueck nach rechts verschoben werden, weil sonst ueberlagerung
		if(id<numberOfImages){
			for(var i=id+1;i<numberOfImages;i++){  //alle Bilder rechts vom vergroesserten nach rechts verschieben
				var bild = document.getElementById("img"+i);
				bild.style.left = 	parseInt(bild.style.left)-15+"px";		
			}
			if(parseInt(x_slider2.style.left) > parseInt(x_slider1.style.left)){//nur wenn der zu verschiebende slider auch wirklich rechts vom "aktuellen" slider ist
				x_slider2.style.left = parseInt(x_slider2.style.left) - 15+"px";
			}
		}
		else {
			for(var i=id+1;i<(numberOfImages*2);i++){  //alle Bilder rechts vom vergroesserten nach rechts verschieben
				var bild = document.getElementById("img"+i);
				bild.style.left = 	parseInt(bild.style.left)-15+"px";		
			}
			if(parseInt(x_slider1.style.left) > parseInt(x_slider2.style.left)){//nur wenn der zu verschiebende slider auch wirklich rechts vom "aktuellen" slider ist
				x_slider1.style.left = parseInt(x_slider1.style.left) - 15+"px";
			}
		}	 		
	}
	else{
		clearInterval(arrZoomOutInterval[id]);
		imgO.style.width = imgWidth_small;
		imgO.style.height = imgHeight_small;
		imgO.style.top = "150px";	
	}
	//infoDiv unsichtbar machen:
	document.getElementById("infoDiv").style.visibility="hidden";
}

//gibt die aktuele Mausposition zurueck, als Array
function mouse_pos(e) { 
	if(!e) e = window.event; 
	var arrTmp = new Array();
	arrTmp[0] =e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop; //left bzw. x
	arrTmp[1] = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft  - document.body.clientLeft; // top bzw. y
	return arrTmp;
}

//setzt anhand der aktuellen Mausposition die Geschwindigkeit und die Richtung fuer das Laufband
function checkMousePos(e){ 
    var p = mouse_pos(e); 
    var oben = parseInt(document.getElementById("wrapper").style.top);
    var hoehe = parseInt(sliderheight); //400


    //wenn mausposition weiter rechts dann geschwindigkeit erhoehen:											//+100                    -100		
    if((p[1] > ((parseInt(sliderwidth)/2)+parseInt(mitte/2))-1) &&  (p[1] < parseInt(sliderwidth)) &&  (p[0] > (oben)) && (p[0] < oben + hoehe)){
        var tmpPx = ((fDiv((p[1] -rechts-mitte),100))*3);  //vorher speichern damit nicht 3mal berechnet werden muss
        if( tmpPx - increaseSpeed !=0 ){ //wegen Performance, um Zuweisungen zu sparen vorher pruefen ob noetig
	        copyspeed +=  tmpPx - increaseSpeed; //pixelanzahl erhoehen, um die das laufband gescrollt wird 
	        increaseSpeed= tmpPx;   				 // neuen wert zwischenspeichern
        }
    }
    //wenn mausposition in mitte dann stoppen:
    else{
        if(p[1] < ((parseInt(sliderwidth)/2)+parseInt(mitte/2))  && (p[1] > ((parseInt(sliderwidth)/2)-parseInt(mitte/2))) &&  (p[0] > oben) && (p[0] < oben + hoehe)){
            copyspeed = 0;
            increaseSpeed =0;           
        }
        else{ // wenn mausposition weiter links dann geschwindigkeit erhoehen:
            if((p[1] < ((parseInt(sliderwidth)/2)-parseInt(mitte/2))+1) /*&& (p[1] > links)*/ &&  (p[0]> oben) && (p[0] < oben + hoehe)){
                var tmpPx2 = (fDiv(links,100)*3)-(fDiv(p[1],100))*3;  //vorher speichern damit nicht 3mal berechnet werden muss
                if( tmpPx2 - increaseSpeed !=0 ){ //wegen Performance, um Zuweisungen zu sparen vorher pruefen ob noetig
        	        copyspeed +=  (-1)*(tmpPx2 - increaseSpeed); //pixelanzahl erhoehen, um die das laufband gescrollt wird 
        	        increaseSpeed= tmpPx2;   				 // neuen wert zwischenspeichern
                }
            }
            else{//maus ausserhalb des sliders
            	copyspeed = slidespeed;
            	increaseSpeed =0;
            }
        }
    }
}

//ganzahlige Division
function fDiv(n1, n2){ 
	return Math.floor( n1/n2);
}