/* ================================ +
		     Studio Parkers
     	  portfolio_carrousel.js
 + ================================ */


/* 
** Made by: Thomas Lievestro
** Email:	info@lievestro.com
** Website:	www.lievestro.com
*/


/* ================================ +
              Variables
 + ================================ */
 
var images;
var totalNumberOfImages;
var middleImage;
var carrouselItems = new Array;
var imageObj;
var currentImage;

/* ================================ */


function initCarrousel(){
	imageObj = new Image().src = "images/loader.gif"; 	//Haal loader iamge op
	showLoader(); 										//Laat de loader zien
	setLayerHeight2();									//set height van carrousel protection 
	protect_carrousel();								//zet carrousel protection aan
	
	images = $F("carrousel_img").split(", ");			//Haal de afbeeldingen op uit hidden field en maak er array van
	totalNumberOfImages = images.length;				//Aantal afbeeldingen
	middleImage = Math.round((totalNumberOfImages)/2);	//Middelste afbeelding
	currentImage = totalNumberOfImages;
	
	//Maak carrousel itmes aan 
	for(a=0;a<totalNumberOfImages;a++) {
		
		//Maak carrousel_item  aan		
		var carrousel_item = new Element("div", { id: "carrousel_item_"+a+"", className: "carrousel_item", style: "position:absolute; width:68px; background:#cccccc;	border:1px solid #888888; overflow:hidden; cursor:pointer;"});
		carrousel_item.appendChild(new Element("img", { id: "carrousel_item_img"+a+"", className: "carrousel_item_img", src: "footage/68x0_"+images[a]}));
		
		//Plaats de carrousel_item achter de andere carrousel_items
		var tmpChildElements = $('carrousel_container').childElements();
		var tmpLastChildElements = tmpChildElements[tmpChildElements.length-1];
		tmpLastChildElements.insert({after: carrousel_item });
		
		//Geef carrousel item een margin-left en margin-top mee
		carrousel_item.setStyle({ 
			left: ((a*15)+((7-totalNumberOfImages)*15)+40)+'px',
			top: ((a*3)+((7-totalNumberOfImages)*3)+5)+'px'
		});	
		
		//Push carrousel item in array
		carrouselItems[a] = carrousel_item;	
	}
	
	//For elk carrousel item
	for (var b=0;b<carrouselItems.length;b++) {
		
		//Geeft carrousel item een nummer mee	
		carrouselItems[b].number = b;
		
		//Geef carrousel item een onclick mee
		carrouselItems[b].onclick = function() {
			goTo(this.number); 
			return false;
		};
		
		//Geef carrousel item een onmouseover mee
		carrouselItems[b].onmouseover = function() {
			this.setStyle({ 
				border: "1px solid #000000"
			});	
		};
		
		//Geef carrousel item een onmouseover mee
		carrouselItems[b].onmouseout = function() {
			this.setStyle({ 
				border: "1px solid #999999"
			});	
		};
		
		//Als b gelijk is aan de middelste afbeelding
		if(b == middleImage || (totalNumberOfImages == 1)){ 
			
			//Als er maar 1 afbeelding is
			if(totalNumberOfImages == 1){
				b=1;
			}
			
			//Preload middelste afbeelding
			imageObj = new Image();							
			imageObj.src = "footage/"+images[b-1];   
	
			//Als de middelste afbeeding geladen is
			imageObj.onload = function() {  
				displayMiddleImage();  	//Ga naar middelste afbeelding
				loadOtherImages();		//Laad de overige afbeeldingen
			}
		}
	}
}



function loadOtherImages(){
	for (var c=0;c<carrouselItems.length;c++) {
		imageObj[c] = new Image()
		imageObj[c].src = "footage/_"+images[c];
	}
}



function displayMiddleImage(){
	
	//Zet loader uit
	showLoader();	
	
	//Geef positive mee
	posOrNeg = "positive";	
	
	//Loop door carrousel items heen
	for(d=0;d<totalNumberOfImages;d++) {
		
		//Als het nummer van de middelste afbeelding kleiner is dan totalNumberOfImages-d
		//Door totalNumberOfImages-i begint hij bij de laatste carrousel item
		if(middleImage < (totalNumberOfImages-d)){
			
			//Laat afbeelding snel zien (en haal hem daarna snel weg)
			showMiddleImageQuick(carrouselItems[(totalNumberOfImages-d)-1],d,posOrNeg);
		}
		//Als het nummer van de middelste afbeelding gelijk is aan totalNumberOfImages-d
		else if(middleImage == (totalNumberOfImages-d)){
			
			//Laat afbeelding zien
			showMiddleImage(carrouselItems[(totalNumberOfImages-d)-1],d,posOrNeg);
		}
	}
}

function goTo(number){
	
	//set height van carrousel protection 
	setLayerHeight2();
	//zet carrousel protection aan
	protect_carrousel();

	different = (parseInt(currentImage-number));

	if(different < 0){ 
		different = -different;
		posOrNeg = "negative";	
		hideImageQuick_toLeft(carrouselItems[currentImage],0,posOrNeg,currentImage);			//Hide de image weer
		
		//Loop door carrousel items heen
		for(f=0;f<(different);f++) {
			
			//Als het nummer van de middelste afbeelding gelijk is aan totalNumberOfImages-d
			if(number == ((currentImage+f)+1)){
				//Laat afbeelding zien
				showImage_toLeft(carrouselItems[(currentImage+f)+1],f,posOrNeg,currentImage);
			}
			//Als het nummer van de middelste afbeelding kleiner is dan totalNumberOfImages-d
			//Door totalNumberOfImages-i begint hij bij de laatste carrousel item
			else{
				//console.log("showImageQuick: "+((currentImage+f)+1));
				//Laat afbeelding snel zien (en haal hem daarna snel weg)
				showImageQuick_toLeft(carrouselItems[((currentImage+f)+1)],f,posOrNeg,currentImage);
			}
		}	
		
	}else{	
		posOrNeg = "positive";	
		hideImageQuick_toRight(carrouselItems[currentImage],0,posOrNeg,currentImage);			//Hide de image weer
		//Loop door carrousel items heen
		for(f=0;f<(different);f++) {
			
			//Als het nummer gelijk is aan totalNumberOfImages-f-1
			if(number == ((currentImage-f)-1)){
				//console.log("showImage: "+((currentImage-f)-1));
				//Laat afbeelding zien
				showImage_toRight(carrouselItems[((currentImage-f)-1)],f,posOrNeg,currentImage);
			}
			//Als het nummer van de middelste afbeelding kleiner is dan totalNumberOfImages-d
			//Door totalNumberOfImages-i begint hij bij de laatste carrousel item
			else{
				//Laat afbeelding snel zien (en haal hem daarna snel weg)
				showImageQuick_toRight(carrouselItems[((currentImage-f)-1)],f,posOrNeg,currentImage);
			}
		}	

	}	
}

	
function showImageQuick_toLeft(element,number,posOrNeg,numberOfImages){
//	console.log(element);
//  console.log(number);
//	console.log(posOrNeg);
//	console.log(numberOfImages);
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {	
		
		//Loop door alle afbeelingen heen		
		for(e=0;e<totalNumberOfImages;e++) {
			//console.log(e);
		//	console.log((totalNumberOfImages-e)-1);
		//	console.log(numberOfImages);
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if(e == (numberOfImages+number)+1){		
		//	console.log(" de afbeelding: "+((e)));
				if(number == 0){
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false }),		
						new Effect.Scale($('carrousel_container'), ((924+45)/$('carrousel_container').getHeight())*100, { sync:true, scaleX:false, scaleContent:false })				
					], { duration: 0.2,  transition: Effect.Transitions.sinoidal });
						
					window.setTimeout(function(){
						setLayerHeight();
					},500);
					
				}else{
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false })						
					], { duration: 0.2,  transition: Effect.Transitions.sinoidal });
					
				}
				
				$(element).setStyle({ zIndex: 20, cursor: "default", border: "1px solid #999999"});	//Verander de zIndex en de cursor van het carrousel item					
				element.onclick = function(){return false;} 				//Verwijder de onclick van het carrousel item	
				element.onmouseover = function(){return false;} 			//Verwijder de onmouseover van het carrousel item	
				element.onmouseout = function(){return false;} 				//Verwijder de onmouseout van het carrousel item
				
				//Zorgt ervoor dat de image niet gelijk vergroot wordt
				window.setTimeout(function () {
					InnerImage = $(element).childElements();				//Haal childElement van het carrousel item op
					InnerImage[0].width = 638;								//Verander de width van de afbeelding
					InnerImage[0].height = 922;								//Verander de height van de afbeelding
				},(50*number));
				
				//Zet een timeOut van 200 miliseconden 	
				window.setTimeout(function () {
					
					hideImageQuick2(element,number,posOrNeg);			//Hide de image weer
				},(200));		
			
				currentImage = element.number;								//Zet currentImage number	
				
			}
			//Als het gaat om een afbeelding voor de afbeelding die getoond moet worden
			else if(e < (numberOfImages+number)+1){
		//	console.log("voor de afbeelding: "+e);
				//Move de afbeelding naar rechts en naar beneden
				new Effect.Move(carrouselItems[e], {
					x: ((e)*15+40)+(((totalNumberOfImages-currentImage)-2)*15)+((7-totalNumberOfImages)*15), 
					y: ((e)*3+5)+(((totalNumberOfImages-currentImage)-2)*3)+((7-totalNumberOfImages)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[e]).setStyle({ zIndex: e+10});	 
			}
			//Als het gaat om een afbeelding na de afbeelding die getoond moet worden
			else if(e > (numberOfImages+number)+1){		
	//	console.log("na de afbeelding:"+e);
				//Move de afbeelding naar rechts en naar boven
				new Effect.Move(carrouselItems[e], {
					x: 785+((((e)-(currentImage+1))+1)*15), 
					y: 26-((((e)-(currentImage+1))+1)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[e]).setStyle({ zIndex: -e+10});	
			}
		}	
	},((500*number)+250));	
}

	
	
	
						
function showImageQuick_toRight(element,number,posOrNeg,numberOfImages){
//	console.log(element);
//  console.log(number);
//	console.log(posOrNeg);
//	console.log(numberOfImages);
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {	
		
		//Loop door alle afbeelingen heen		
		for(e=0;e<totalNumberOfImages;e++) {
		
		//	console.log((totalNumberOfImages-e)-1);
		//	console.log(numberOfImages);
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if((totalNumberOfImages-e)-1 == (numberOfImages-number)-1){		
			// console.log(" de afbeelding: "+((totalNumberOfImages-e)-1));
				if(number == 0){
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false }),		
						new Effect.Scale($('carrousel_container'), ((924+45)/$('carrousel_container').getHeight())*100, { sync:true, scaleX:false, scaleContent:false })				
					], { duration: 0.2,  transition: Effect.Transitions.sinoidal });
						
					window.setTimeout(function(){
						setLayerHeight();
					},500);
					
				}else{
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false })						
					], { duration: 0.2,  transition: Effect.Transitions.sinoidal });
					
				}
				
				$(element).setStyle({ zIndex: 20, cursor: "default", border: "1px solid #999999"});	//Verander de zIndex en de cursor van het carrousel item			
				element.onclick = function(){return false;} 				//Verwijder de onclick van het carrousel item	
				element.onmouseover = function(){return false;} 				//Verwijder de onmouseover van het carrousel item	
				element.onmouseout = function(){return false;} 				//Verwijder de onmouseout van het carrousel item
				
				//Zorgt ervoor dat de image niet gelijk vergroot wordt
				window.setTimeout(function () {
					InnerImage = $(element).childElements();				//Haal childElement van het carrousel item op
					InnerImage[0].width = 638;								//Verander de width van de afbeelding
					InnerImage[0].height = 922;								//Verander de height van de afbeelding
				},(50*number));
				
				//Zet een timeOut van 200 miliseconden 	
				window.setTimeout(function () {
					
					hideImageQuick(element,number,posOrNeg);			//Hide de image weer
				},(200));		
				
				currentImage = element.number;								//Zet currentImage number	
				
			}
			//Als het gaat om een afbeelding voor de afbeelding die getoond moet worden
			else if((totalNumberOfImages-e)-1 < (numberOfImages-number)-1){
		//	console.log("voor de afbeelding: "+((totalNumberOfImages-e)-1));
				//Move de afbeelding naar rechts en naar beneden
				new Effect.Move(carrouselItems[(totalNumberOfImages-e)-1], {
					x: ((totalNumberOfImages-e)*15+40)+(((totalNumberOfImages-currentImage)-1)*15)+((7-totalNumberOfImages)*15), 
					y: ((totalNumberOfImages-e)*3+5)+(((totalNumberOfImages-currentImage)-1)*3)+((7-totalNumberOfImages)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-e)-1]).setStyle({ zIndex: -e+10});	
			}
			//Als het gaat om een afbeelding na de afbeelding die getoond moet worden
			else if((totalNumberOfImages-e)-1 > (numberOfImages-number)-1){		
			//console.log("na de afbeelding:"+((totalNumberOfImages-e)-1));
				//Move de afbeelding naar rechts en naar boven
				new Effect.Move(carrouselItems[(totalNumberOfImages-e)-1], {
					x: 800+((((totalNumberOfImages-e)-(currentImage+1))+1)*15), 
					y: 23-((((totalNumberOfImages-e)-(currentImage+1))+1)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-e)-1]).setStyle({ zIndex: e+10});	
			}
		}	
	},((500*number)+250));	
}




function showMiddleImageQuick(element,number,posOrNeg){
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {	
		
		//Loop door alle afbeelingen heen		
		for(e=0;e<totalNumberOfImages;e++) {
			//Als het gaat om de afbeelding die vergroot moet worden
			if((totalNumberOfImages-e)-1 == (totalNumberOfImages-number)-1){
			
		//	console.log((totalNumberOfImages-e)-1);
		//	console.log(((totalNumberOfImages-number)-1));
				
				if(number == 0){
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false }),		
						new Effect.Scale($('carrousel_container'), ((924+45)/$('carrousel_container').getHeight())*100, { sync:true, scaleX:false, scaleContent:false })				
					], { duration: 0.2,  transition: Effect.Transitions.sinoidal });
						
					window.setTimeout(function(){
						setLayerHeight();
					},500);
					
				}else{
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false })						
					], { duration: 0.2,  transition: Effect.Transitions.sinoidal });
					
				}
				
				$(element).setStyle({ zIndex: 20, cursor: "default", border: "1px solid #999999"});	//Verander de zIndex en de cursor van het carrousel item					
				element.onclick = function(){return false;} 				//Verwijder de onclick van het carrousel item	
				element.onmouseover = function(){return false;} 				//Verwijder de onmouseover van het carrousel item	
				element.onmouseout = function(){return false;} 				//Verwijder de onmouseout van het carrousel item
				
				//Zorgt ervoor dat de image niet gelijk vergroot wordt
				window.setTimeout(function () {
					InnerImage = $(element).childElements();				//Haal childElement van het carrousel item op
					InnerImage[0].width = 638;								//Verander de width van de afbeelding
					InnerImage[0].height = 922;								//Verander de height van de afbeelding
				},(50*number));
				
				//Zet een timeOut van 200 miliseconden 	
				window.setTimeout(function () {
					
					hideImageQuick(element,number,posOrNeg);			//Hide de image weer
				},(200));		
				
				currentImage = element.number;								//Zet currentImage number	
				
			}
			//Als het gaat om een afbeelding voor de afbeelding die getoond moet worden
			else if((totalNumberOfImages-e)-1 < (totalNumberOfImages-number)-1){
							
				//Move de afbeelding naar rechts en naar beneden
				new Effect.Move(carrouselItems[(totalNumberOfImages-e)-1], {
					x: ((totalNumberOfImages-e)*15+40)+(((totalNumberOfImages-currentImage)-1)*15)+((7-totalNumberOfImages)*15), 
					y: ((totalNumberOfImages-e)*3+5)+(((totalNumberOfImages-currentImage)-1)*3)+((7-totalNumberOfImages)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-e)-1]).setStyle({ zIndex: -e+10});	
			}
			//Als het gaat om een afbeelding na de afbeelding die getoond moet worden
			else if((totalNumberOfImages-e)-1 > (totalNumberOfImages-number)-1){			
				
				//Move de afbeelding naar rechts en naar boven
				new Effect.Move(carrouselItems[(totalNumberOfImages-e)-1], {
					x: 785+((((totalNumberOfImages-e)-(currentImage+1))+1)*15), 
					y: 26-((((totalNumberOfImages-e)-(currentImage+1))+1)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Geef carrousel item een onclick mee
				carrouselItems[(totalNumberOfImages-e)-1].onclick = function() {
					goTo(this.number); 
					return false;
				};
				
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-e)-1]).setStyle({ zIndex: e+10});	
			}
		}	
	},(500*number));	
}











function hideImageQuick_toLeft(element,number,posOrNeg,numberOfImages){
//	console.log(element);
//  console.log(number);
//	console.log(posOrNeg);
//	console.log(numberOfImages);
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {	
		
		//Loop door alle afbeelingen heen		
		for(e=0;e<totalNumberOfImages;e++) {
			//console.log(e);
		//	console.log((totalNumberOfImages-e)-1);
		//	console.log(numberOfImages);
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if(e == numberOfImages){		
		//	console.log(" de afbeelding: "+e);
			
					
					hideImageQuick2(element,number,posOrNeg);			//Hide de image weer
	
			}
			//Als het gaat om een afbeelding voor de afbeelding die getoond moet worden
			else if(e < numberOfImages){
		//	console.log("voor de afbeelding: "+((e)));
				//Move de afbeelding naar rechts en naar beneden
				new Effect.Move(carrouselItems[e], {
					x: ((e)*15+40)+(((totalNumberOfImages-currentImage)-1)*15)+((7-totalNumberOfImages)*15), 
					y: ((e)*3+5)+(((totalNumberOfImages-currentImage)-1)*3)+((7-totalNumberOfImages)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[e]).setStyle({ zIndex: e+10}); 
			}
		}	
	},(500*number));	
}


function hideImageQuick_toRight(element,number,posOrNeg,numberOfImages){
//	console.log(element);
//  console.log(number);
//	console.log(posOrNeg);
//	console.log(numberOfImages);
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {	
		
		//Loop door alle afbeelingen heen		
		for(e=0;e<totalNumberOfImages;e++) {
			//console.log(e);
		//	console.log((totalNumberOfImages-e)-1);
		//	console.log(numberOfImages);
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if((totalNumberOfImages-e)-1 == (numberOfImages-number)-1){		
	//		console.log(" de afbeelding: "+((totalNumberOfImages-e)-1));
			
					
					hideImageQuick(element,number,posOrNeg);			//Hide de image weer
	
			}
			//Als het gaat om een afbeelding na de afbeelding die getoond moet worden
			else if((totalNumberOfImages-e)-1 > (numberOfImages-number)-1){		
	//		console.log("na de afbeelding:"+((totalNumberOfImages-e)-1));
				//Move de afbeelding naar rechts en naar boven
				new Effect.Move(carrouselItems[(totalNumberOfImages-e)-1], {
					x: 785+((((totalNumberOfImages-e)-(currentImage+1))+1)*15), 
					y: 26-((((totalNumberOfImages-e)-(currentImage+1))+1)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-e)-1]).setStyle({ zIndex: e+10});	
			}
		}	
	},(500*number));	
}














function hideImageQuick(element,number,posOrNeg){

	element.style.width = '638px';
	element.style.height = '924px';
	//Het effect
	new Effect.Parallel([
		new Effect.Move(element, { x:800, y:23, mode: 'absolute', sync:true }),
		new Effect.Scale(element, (68/640)*100, { sync:true, scaleY:false }),
		new Effect.Scale(element, (99/924)*100, { sync:true, scaleX:false })

	], { duration: 0.2, transition: Effect.Transitions.sinoidal });
	
	$(element).setStyle({zIndex: 17, cursor: "pointer"});		//Verander de zIndex van het carrousel item		
	
	//Zet de onclick van het carrousel item
	element.onclick = function(){ 
		goTo(this.number); 
		return false;
	} 
	
	//Zet de onmouseover van het carrousel item
	element.onmouseover = function(){ 
		this.setStyle({ 
			border: "1px solid #000000"
		});	
	} 
	
	//Zet de onmouseout van het carrousel item
	element.onmouseout = function(){ 
		this.setStyle({ 
			border: "1px solid #999999"
		});	
	} 	
	
	//Zorgt ervoor dat de image niet gelijk verkleind wordt
	window.setTimeout(function () {
		imgg = $(element).childElements();
	//	imgg[0].src = imgg[0].src.replace(".jpg","t.jpg");
		imgg[0].width = 70;
		imgg[0].height = 101;
	},(100*number));
}

function hideImageQuick2(element,number,posOrNeg){
	
	element.style.width = '638px';
	element.style.height = '924px';
	//Het effect
	new Effect.Parallel([
		new Effect.Move(element, { x:130, y:23, mode: 'absolute', sync:true }),
		new Effect.Scale(element, (68/640)*100, { sync:true, scaleY:false }),
		new Effect.Scale(element, (99/924)*100, { sync:true, scaleX:false })
	], { duration: 0.2, transition: Effect.Transitions.sinoidal });
	
	$(element).setStyle({zIndex: 17, cursor: "pointer"});		//Verander de zIndex van het carrousel item		
	
	//Zet de onclick van het carrousel item
	element.onclick = function(){ 
		goTo(this.number); 
		return false;
	} 	
		
	//Zet de onmouseover van het carrousel item
	element.onmouseover = function(){ 
		this.setStyle({ 
			border: "1px solid #000000"
		});	
	} 
	
	//Zet de onmouseout van het carrousel item
	element.onmouseout = function(){ 
		this.setStyle({ 
			border: "1px solid #999999"
		});	
	} 	
	
	//Zorgt ervoor dat de image niet gelijk verkleind wordt
	window.setTimeout(function () {
		imgg = $(element).childElements();
	//	imgg[0].src = imgg[0].src.replace(".jpg","t.jpg");
		imgg[0].width = 70;
		imgg[0].height = 101;
	},(100*number));
}












function showMiddleImage(element,number,posOrNeg){
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {
	
		//Loop door alle afbeelingen heen		
		for(z=0;z<totalNumberOfImages;z++) {
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if((totalNumberOfImages-z)-1 == (totalNumberOfImages-number)-1){

				if(number == 0){
					
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false }),					
						new Effect.Scale($('carrousel_container'), ((924+45)/$('carrousel_container').getHeight())*100, { sync:true, scaleX:false, scaleContent:false })
					], { duration: 0.5, transition: Effect.Transitions.sinoidal });
						
					window.setTimeout(function(){
						setLayerHeight();
					},500);
					
				}else{
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false })
					], { duration: 0.5, transition: Effect.Transitions.sinoidal });
					
				}
				
				$(element).setStyle({ zIndex: 20, cursor: "default", border: "1px solid #999999"});		//Verander de zIndex en de cursor van het carrousel item					
				element.onclick = function(){return false;} 				//Verwijder de onclick van het carrousel item	
				element.onmouseover = function(){return false;} 				//Verwijder de onmouseover van het carrousel item	
				element.onmouseout = function(){return false;} 				//Verwijder de onmouseout van het carrousel item
				
				//Zorgt ervoor dat de image niet gelijk vergroot wordt
				window.setTimeout(function () {
					InnerImage = $(element).childElements();					//Haal childElement van het carrousel item op				
					InnerImage[0].src = InnerImage[0].src.replace("68x0_","");	//Verander van thumbnail naar grote afbeelding
					InnerImage[0].width = 638;									//Verander de width van de afbeelding
					InnerImage[0].height = 922;									//Verander de height van de afbeelding
				},(50*number));
				
				 
				currentImage = element.number;								//Zet currentImage number		
				
				setLayerHeight();
			}
			//Als het gaat om een afbeelding voor de afbeelding die getoond moet worden
			else if((totalNumberOfImages-z)-1 < (totalNumberOfImages-number)-1){
			
				//Move de afbeelding naar rechts en naar beneden
				new Effect.Move(carrouselItems[(totalNumberOfImages-z)-1], {
					x: ((totalNumberOfImages-z)*15+40)+(((totalNumberOfImages-currentImage)-1)*15)+((7-totalNumberOfImages)*15), 
					y: ((totalNumberOfImages-z)*3+5)+(((totalNumberOfImages-currentImage)-1)*3)+((7-totalNumberOfImages)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-z)-1]).setStyle({ zIndex: -z+10});			
			}
			//Als het gaat om een afbeelding na de afbeelding die getoond moet worden
			else if((totalNumberOfImages-z)-1 > (totalNumberOfImages-number)-1){
				
				//Move de afbeelding naar rechts en naar boven
				new Effect.Move(carrouselItems[(totalNumberOfImages-z)-1], {
					x: 785+((((totalNumberOfImages-z)-(currentImage+1))+1)*15), 
					y: 26-((((totalNumberOfImages-z)-(currentImage+1))+1)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-z)-1]).setStyle({ zIndex: z+10});	
			}
		}	
		//zet carrousel protection uit		
		protect_carrousel();
		
	},(500*number));		
}




function showImage_toLeft(element,number,posOrNeg,numberOfImages){
//  console.log(element);
//  console.log(number);
//	console.log(posOrNeg);
//	console.log(numberOfImages);
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {	
		
		//Loop door alle afbeelingen heen		
		for(e=0;e<totalNumberOfImages;e++) {
			//console.log(e);
		//	console.log((totalNumberOfImages-e)-1);
		//	console.log(numberOfImages);
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if(e == (numberOfImages+number)+1){		
		//	console.log(" de afbeelding: "+((e)));
				if(number == 0){
					
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false }),					
						new Effect.Scale($('carrousel_container'), ((924+45)/$('carrousel_container').getHeight())*100, { sync:true, scaleX:false, scaleContent:false })
					], { duration: 0.5, transition: Effect.Transitions.sinoidal });
						
					window.setTimeout(function(){
						setLayerHeight();
					},500);
	
				}else{
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false })
					], { duration: 0.5, transition: Effect.Transitions.sinoidal });
					
				}
				
				$(element).setStyle({ zIndex: 20, cursor: "default", border: "1px solid #999999"});		//Verander de zIndex en de cursor van het carrousel item				
				element.onclick = function(){return false;} 				//Verwijder de onclick van het carrousel item	
				element.onmouseover = function(){return false;} 				//Verwijder de onmouseover van het carrousel item	
				element.onmouseout = function(){return false;} 				//Verwijder de onmouseout van het carrousel item
				
				//Zorgt ervoor dat de image niet gelijk vergroot wordt
				window.setTimeout(function () {
					InnerImage = $(element).childElements();					//Haal childElement van het carrousel item op				
					InnerImage[0].src = InnerImage[0].src.replace("68x0_","");	//Verander van thumbnail naar grote afbeelding
					InnerImage[0].width = 638;									//Verander de width van de afbeelding
					InnerImage[0].height = 922;									//Verander de height van de afbeelding
				},(50*number));
				
				 
				currentImage = element.number;								//Zet currentImage number		
				
				setLayerHeight();
				
			}
			//Als het gaat om een afbeelding na de afbeelding die getoond moet worden
			else if(e > (numberOfImages+number)+1){		
			//	console.log("na de afbeelding:"+e);
				//Move de afbeelding naar rechts en naar boven
				new Effect.Move(carrouselItems[e], {
					x: 785+((((e)-(currentImage+1))+1)*15), 
					y: 26-((((e)-(currentImage+1))+1)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				
				//Verander de zIndex
				$(carrouselItems[e]).setStyle({ zIndex: -e+10});	
			}
		}	
		//zet carrousel protection uit		
		protect_carrousel();
		
	},((500*number)+250));	
}



function showImage_toRight(element,number,posOrNeg,numberOfImages){
	
	//Zet timeOut van 500 miliseconden keer het nummer (d) van de for loop van displayMiddleImage()
	window.setTimeout(function () {
	
		//Loop door alle afbeelingen heen		
		for(z=0;z<totalNumberOfImages;z++) {
			
			//Als het gaat om de afbeelding die vergroot moet worden
			if((totalNumberOfImages-z)-1 == (numberOfImages-number)-1){

				if(number == 0){
					
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false }),					
						new Effect.Scale($('carrousel_container'), ((924+45)/$('carrousel_container').getHeight())*100, { sync:true, scaleX:false, scaleContent:false })
					], { duration: 0.5, transition: Effect.Transitions.sinoidal });
						
					window.setTimeout(function(){
						setLayerHeight();
					},500);
					
				}else{
				
					element.style.width = '68px';
					element.style.height = '99px';
					//Het effect
					new Effect.Parallel([
						new Effect.Move(element, {x: 180, y: 26 , mode: 'absolute', sync:true }),
						new Effect.Scale(element, (638/70)*100, { sync:true, scaleY:false }),
						new Effect.Scale(element, (922/101)*100, { sync:true, scaleX:false })
					], { duration: 0.5, transition: Effect.Transitions.sinoidal });
					
				}
				
				$(element).setStyle({ zIndex: 20, cursor: "default", border: "1px solid #999999"});		//Verander de zIndex en de cursor van het carrousel item					
				element.onclick = function(){return false;} 				//Verwijder de onclick van het carrousel item	
				element.onmouseover = function(){return false;} 				//Verwijder de onmouseover van het carrousel item	
				element.onmouseout = function(){return false;} 				//Verwijder de onmouseout van het carrousel item
				
				//Zorgt ervoor dat de image niet gelijk vergroot wordt
				window.setTimeout(function () {
					InnerImage = $(element).childElements();					//Haal childElement van het carrousel item op				
					InnerImage[0].src = InnerImage[0].src.replace("68x0_","");	//Verander van thumbnail naar grote afbeelding
					InnerImage[0].width = 638;									//Verander de width van de afbeelding
					InnerImage[0].height = 922;									//Verander de height van de afbeelding
				},(50*number));
				
				 
				currentImage = element.number;								//Zet currentImage number		
				
				setLayerHeight();
			}
			//Als het gaat om een afbeelding voor de afbeelding die getoond moet worden
			else if((totalNumberOfImages-z)-1 < (numberOfImages-number)-1){
			
				//Move de afbeelding naar rechts en naar beneden
				new Effect.Move(carrouselItems[(totalNumberOfImages-z)-1], {
					x: ((totalNumberOfImages-z)*15+40)+(((totalNumberOfImages-currentImage)-1)*15)+((7-totalNumberOfImages)*15), 
					y: ((totalNumberOfImages-z)*3+5)+(((totalNumberOfImages-currentImage)-1)*3)+((7-totalNumberOfImages)*3), 
					mode: 'absolute', 
					duration: 0.2 
				});
				//Verander de zIndex
				$(carrouselItems[(totalNumberOfImages-z)-1]).setStyle({ zIndex: -z+10});			
			}
		}	
		//zet carrousel protection uit		
		protect_carrousel();
		
	},((500*number)+250));		
}







Behaviour.addLoadEvent(function(){ 
	initCarrousel();
});