// JavaScript Document
dojo.require('dojo.fx');

dojo.addOnLoad(function() {
	if(dojo.byId('imageContainer') != null) {
		var init = new Object();
		init.duration = 500;
		init.targetW = 580;
		init.butW = 30;
		init.butH = 100;
		init.myNo = 0;
		init.scaleSmallFactor = 3;
		init.maxW = init.targetW;
		init.direction = 'small'; // small/large
	
		var nodes = getNodes();
		dojo.style(nodes.img, "cursor", "pointer");
		var imgContainer = dojo.byId('imageContainer').getElementsByTagName('img');
	
		if(imgContainer.length > 1) {
			var butImgL = document.createElement("img");
			butImgL.id = "DetailImgBoxLeftImg";
			dojo.attr(butImgL,'src','/img/imgL2.jpg');
			dojo.attr(butImgL,'alt','zurück');
			var butL = document.createElement("div");
			butL.id = "DetailImgBoxLeft";
			butL.appendChild(butImgL);
		
			var butImgR = document.createElement("img");
			butImgR.id = "DetailImgBoxRightImg";
			dojo.attr(butImgR,'src','/img/imgR2.jpg');
			dojo.attr(butImgR,'alt','weiter');
			var butR = document.createElement("div");
			butR.id = "DetailImgBoxRight";
			butR.appendChild(butImgR);
		
			var box = dojo.byId('DetailImgBox');
			dojo.place(butR,box,'first');
			dojo.place(butL,box,'first');
		
			var boxImg = dojo.byId('DetailImgBoxImage');
			dojo.style(boxImg,'margin','0 30px 0 30px');
			
			init.DetailImgBoxW = init.targetW/init.scaleSmallFactor + init.butW * 2;
			dojo.style(box,'width',Math.round(init.DetailImgBoxW)+'px');
			dojo.attr(box,'width',Math.round(init.DetailImgBoxW));
			
			
			setImage(nodes,imgContainer,init,box,true);
			var imgH = dojo.style(nodes.img,'height');
			var myY = ((imgH - init.butH) / 2);
			setNavY(butImgL,myY);
			setNavY(butImgR,myY);
				
			dojo.connect(butR,'onclick',function(evt) {
				if( (init.myNo+1) >= imgContainer.length) {
					init.myNo = 0;
				} else init.myNo++;
				setImage(nodes,imgContainer,init,box,false);
				var myY = (nodes.img.height - init.butH) / 2;
				setNavY(butL,myY);
				setNavY(butR,myY);
			});
		
			dojo.connect(butL,'onclick',function(evt) {
				if( (init.myNo-1) < 0) {
					init.myNo = imgContainer.length-1;
				} else init.myNo--;
				setImage(nodes,imgContainer,init,box,false);
				var myY = (nodes.img.height - init.butH) / 2;
				setNavY(butL,myY);
				setNavY(butR,myY);
			});
			maxW = init.targetW - 2 * init.butW;
			
		} else {
			var box = dojo.byId('DetailImgBox');
			var img = dojo.byId('DetailImg');
			init.DetailImgBoxW = init.targetW/init.scaleSmallFactor;
			dojo.style(box,'width',Math.round(init.DetailImgBoxW)+'px');
		}
		dojo.connect(nodes.img,'onclick',function(evt) {
			var containerW = dojo.style(dojo.byId('DetailImgBox'),'width');
			if(!containerW) containerW = dojo.attr(dojo.byId('DetailImgBox'),'width');
			if(!containerW) containerW = dojo.byId('DetailImgBox').width;
			if(containerW == init.targetW ) init.direction = 'small';
			else init.direction = 'large';
			animateZoom( init , imgContainer );
		});
	}
});

function setImage(nodes,imgContainer,init,box,start) {
	var nextObj = imgContainer[init.myNo];
	nodes.img.src = nextObj.src;
	var orgW = dojo.attr(nextObj,"width");
	if (!orgW) orgW = nextObj.width;
	if (!orgW) orgW = dojo.style(nextObj,'width');
	
	var orgH = dojo.attr(nextObj,"height");
	if (!orgH) orgH = nextObj.height;
	if (!orgH) orgH = dojo.style(nextObj,'height');
	
	if(init.direction == 'small') {
		var imgW = (orgW/init.scaleSmallFactor);
		var imgH = (orgH/init.scaleSmallFactor)
	} else {
		var imgW = (orgW);
		var imgH = (orgH);
	}
	var newImgW = imgW;
	var newImgH = imgH;
	if(imgContainer.length > 1) {
		newImgW = imgW - 2*init.butW;
		var scaleFaktor = 1/imgW*newImgW;
		newImgH = imgH*scaleFaktor;
	}
	if (start == false) {
		dojo.animateProperty({ node: nodes.img,
			 duration: init.duration,
			 properties: {
				 width: { end: Math.round(newImgW) },
				 height: { end: Math.round(newImgH) }
			 }
		}).play();
	} else {
		dojo.style(dojo.byId('DetailImg'),'width',Math.round(newImgW)+'px');
		dojo.style(dojo.byId('DetailImg'),'height',Math.round(newImgH)+'px');
	}
	
	var myW = init.butW * 2 + newImgW +0;
	dojo.style(box,'width',Math.round(myW)+'px');
	dojo.attr(box,'width',Math.round(myW) );
	nodes.title.innerHTML = nextObj.alt;
}
function setNavY(obj,myY) {
	dojo.style(obj,"top",Math.round(myY)+'px');
}




function getNodes() {
	var obj = new Object();
	obj.title = dojo.byId('DetailImgTitle');
	obj.img = dojo.byId('DetailImg');
	return obj;
}


function animateZoom(init, imgContainer) {
	var imgUrW = dojo.style(imgContainer[init.myNo],'width');
	var imgUrH = dojo.style(imgContainer[init.myNo],'height');
	if (imgUrW == 0) imgUrW = imgContainer[init.myNo].width;
	if (imgUrH == 0) imgUrH = imgContainer[init.myNo].height;
	
	if(init.direction == 'small') {
		var imgH = imgUrH / init.scaleSmallFactor;
		var boxW = init.targetW / init.scaleSmallFactor;
	} else {
		var imgH = imgUrH;
		var boxW = init.targetW;
	}
	
	var scaleFaktor = 1;
	var tarW = boxW;
	
	if(imgContainer.length > 1) {
		tarW = boxW - init.butW*2;
		scaleFaktor = 1/boxW*tarW;
	}
		
	var imgTarW = tarW;
	var imgTarH = imgH * scaleFaktor;
	
	// Container WIDTH
	if (dojo.byId('DetailImgBox')) {
		dojo.animateProperty({ node: dojo.byId('DetailImgBox'),
			 duration: init.duration,
			 properties: {
				 width: { end: boxW }
			 }
		}).play();
	}
	
	// Image WIDTH / HEIGHT
	if(dojo.byId('DetailImg')) {
		dojo.animateProperty({ node: dojo.byId('DetailImg'),
			 duration: init.duration,
			 properties: {
				 height: { end: imgTarH },
				 width: {  end: imgTarW }
			 }
		}).play();
	}
	
	if (imgContainer.length > 1) {
		// Button (links/rechts) TOP
		var tarMarTop = (imgTarH - init.butH) / 2;
		if(dojo.byId('DetailImgBoxLeftImg')) {
			dojo.animateProperty({ node: dojo.byId('DetailImgBoxLeftImg'),
				 duration: init.duration,
				 properties: {
					 top: { end: tarMarTop }
				 }
			}).play();
		}
		if(dojo.byId('DetailImgBoxRightImg')) {
			dojo.animateProperty({ node: dojo.byId('DetailImgBoxRightImg'),
				 duration: init.duration,
				 properties: {
					 top: { end: tarMarTop }
				 }
			}).play();
		}
	}
}