function changeOpacity(){
	document.getElementById('rotImageMain').setOpacity(50);
alert(document.getElementById('rotImageMain').getOpacity());
	document.getElementById('rotImageMain').fadeTo(100, 5);
}

function ImageViewer(data){
	this.speed = 5
	this.thumbnails = data.small;
	this.largeImages = data.large;
	this.imageIndex = 0;
	this.mainLayer = document.getElementById("rotImageMain");
	this.leftLayer = document.getElementById("rotImageLeft");
	this.rightLayer = document.getElementById("rotImageRight");
	this.hiddenLayer = document.getElementById("rotImageHidden"); // Speciaal voor de kneuzen van Micro$oft
	this.container = this.mainLayer.parentNode;
	this.lx = px2int(getStyle(this.leftLayer, "left"));
	this.ly = px2int(getStyle(this.leftLayer, "top"));
	this.lw = px2int(getStyle(this.leftLayer, "width"));
	this.lh = px2int(getStyle(this.leftLayer, "height"));
	this.mx = px2int(getStyle(this.mainLayer, "left"));
	this.my = px2int(getStyle(this.mainLayer, "top"));
	this.mw = px2int(getStyle(this.mainLayer, "width"));
	this.mh = px2int(getStyle(this.mainLayer, "height"));
	this.rx = px2int(getStyle(this.rightLayer, "left"));
	this.ry = px2int(getStyle(this.rightLayer, "top"));
	this.rw = px2int(getStyle(this.rightLayer, "width"));
	this.rh = px2int(getStyle(this.rightLayer, "height"));
	this.leftLayer.setOpacity(75);
	this.rightLayer.setOpacity(75);
	this.hiddenLayer.setOpacity(0);
	this.hiddenLayer.style.visibility = "visible";
	if(navigator.appVersion.indexOf("MSIE") != -1){
		this.hiddenLayer.firstChild.style.visibility = "visible";
	}
	this.leftImageClick = null
	this.rightImageClick = null;
	this.mainImageClick = null;
	this.leftClickLayer = document.getElementById("leftClickLayer");
	this.rightClickLayer = document.getElementById("rightClickLayer");
	this.popupImageLayer = null;
	
	this.getImageElement = function(element){
		var child = element.firstChild;
		while(child.nodeType != 1 && child.nodeName.toLowerCase() != "img"){
			child = child.nextSibling;
		}
		return(child);
	}

	this.setImageInLayer = function(element, number){
		var child = element.firstChild;
		while(child.nodeType != 1 && child.nodeName.toLowerCase() != "img"){
			child = child.nextSibling;
		}
		if(number >= 0 && number < this.thumbnails.length){
			child.src = this.thumbnails[number].location;
			element.style.visibility = "visible";
		}else{
			element.style.visibility = "hidden";
		}
	}
	
	this.rotateLeft = function(){
		window.focus();
		if(window.getSelection){
			window.getSelection().removeAllRanges();
		}
		if(this.imageIndex + 1 < this.thumbnails.length){
			var newRightLayer = this.hiddenLayer;
			newRightLayer.style.left = this.rx + "px";
			newRightLayer.style.top = this.ry + "px";
//		this.setImageInLayer(newRightLayer, (this.imageIndex + 2) % this.thumbnails.length);
			this.setImageInLayer(newRightLayer, this.imageIndex + 2);
			this.rightLayer.style.zIndex = 10;
			this.leftLayer.style.zIndex = 5;
			this.mainLayer.style.zIndex = 7;
			scaleMoveHelper(this.mainLayer, this.mx, this.my, this.mw, this.mh, this.lx, this.ly, this.lw, this.lh, this.speed, 1);
			scaleMoveHelper(this.rightLayer, this.rx, this.ry, this.rw, this.rh, this.mx, this.my, this.mw, this.mh, this.speed, 1);
			this.hiddenLayer = this.leftLayer;
			this.leftLayer = this.mainLayer;
			this.mainLayer = this.rightLayer;
			this.rightLayer = newRightLayer;
			this.rightLayer.fadeTo(75, 100 / this.speed);
			this.mainLayer.fadeTo(100, 100 / this.speed);
			this.leftLayer.fadeTo(75, 100 / this.speed);
			this.hiddenLayer.fadeTo(0, 100 / this.speed);
			this.setClickEvents();
			var me = this;
			window.setTimeout(function (){ me.scaleClickLayers() }, 300);
			this.imageIndex = (this.imageIndex + 1) % this.thumbnails.length;
		}
	}
	
	this.rotateRight = function(){
		window.focus();
		if(window.getSelection){
			window.getSelection().removeAllRanges();
		}
		if(this.imageIndex > 0){
			var newLeftLayer = this.hiddenLayer;
			newLeftLayer.style.left = this.lx + "px";
			newLeftLayer.style.top = this.ly + "px";
//		this.setImageInLayer(newLeftLayer, (this.imageIndex + (this.thumbnails.length - 2)) % this.thumbnails.length);
			this.setImageInLayer(newLeftLayer, this.imageIndex - 2);
			this.leftLayer.style.zIndex = 10;
			this.rightLayer.style.zIndex = 5;
			this.mainLayer.style.zIndex = 7;
			scaleMoveHelper(this.mainLayer, this.mx, this.my, this.mw, this.mh, this.rx, this.ry, this.rw, this.rh, this.speed, 1);
			scaleMoveHelper(this.leftLayer, this.lx, this.ly, this.lw, this.lh, this.mx, this.my, this.mw, this.mh, this.speed, 1);
			this.hiddenLayer = this.rightLayer;
			this.rightLayer = this.mainLayer;
			this.mainLayer = this.leftLayer;
			this.leftLayer = newLeftLayer;
			this.rightLayer.fadeTo(75, 100 / this.speed);
			this.mainLayer.fadeTo(100, 100 / this.speed);
			this.leftLayer.fadeTo(75, 100 / this.speed);
			this.hiddenLayer.fadeTo(0, 100 / this.speed);
			this.setClickEvents();
			var me = this;
			window.setTimeout(function (){ me.scaleClickLayers() }, 300);
			this.imageIndex = (this.imageIndex + (this.thumbnails.length - 1)) % this.thumbnails.length;
		}
	}
	
	this.zoom = function(e){
		var currentImage = this.largeImages[this.imageIndex];
		imageZoomer.open(currentImage.location, currentImage.width, currentImage.height, '', this);
	}
	
	this.getCurrentImageIndex = function(){
		return(this.imageIndex);
	}
	
	this.hasNextImage = function(id){
		return(id + 1 < this.thumbnails.length);
	}
	
	this.getNextZoomData = function(id){
		if(this.hasNextImage(id)){
			var data = this.largeImages[id + 1];
			data.id = id + 1;
			return(data)
		}
		return(null);
	}
	
	this.hasPrevImage = function(id){
		return(id > 0);
	}
	
	this.getPrevZoomData = function(id){
		if(this.hasPrevImage(id)){
			var data = this.largeImages[id - 1];
			data.id = id - 1;
			return(data);
		}
		return(null);
	}

	this.setClickEvents = function(){
		if(this.leftImageClick != null){
			disconnect(this.leftImageClick);
			disconnect(this.rightImageClick);
			disconnect(this.mainImageClick);
		}
		this.leftImageClick = connect(this.getImageElement(this.leftLayer), "onclick", this, this.rotateRight);
		this.rightImageClick = connect(this.getImageElement(this.rightLayer), "onclick", this, this.rotateLeft);
		this.mainImageClick = connect(this.getImageElement(this.mainLayer), "onclick", this, this.zoom);
	}
	
	this.scaleClickLayers = function(){
		var li = this.getImageElement(this.leftLayer);
		this.leftClickLayer.style.width = li.offsetWidth + "px";
		this.leftClickLayer.style.height = li.offsetHeight + "px";
		this.leftClickLayer.style.left = li.offsetLeft + "px";
		this.leftClickLayer.style.top = li.offsetTop + "px";
		var ri = this.getImageElement(this.rightLayer);
		this.rightClickLayer.style.width = ri.offsetWidth + "px";
		this.rightClickLayer.style.height = ri.offsetHeight + "px";
		this.rightClickLayer.style.left = ri.offsetLeft + "px";
		this.rightClickLayer.style.top = ri.offsetTop + "px";
	}
	
	this.setClickEvents();
	this.leftClickLayer = this.leftClickLayer.appendChild(document.createElement("div"));
	this.leftClickLayer.style.position = "absolute";
	this.rightClickLayer = this.rightClickLayer.appendChild(document.createElement("div"));
	this.rightClickLayer.style.position = "absolute";
	this.scaleClickLayers();
	connect(this.leftClickLayer, "onclick", this, this.rotateRight);
	connect(this.rightClickLayer, "onclick", this, this.rotateLeft);
	connect(document.getElementById("prevImageButton"), "onclick", this, this.rotateRight);
	connect(document.getElementById("zoomImageButton"), "onclick", this, this.zoom);
	connect(document.getElementById("nextImageButton"), "onclick", this, this.rotateLeft);
	document.getElementById("imageButtonLayer").style.visibility = "visible";
	document.getElementById("imageButtonLayer").fadeTo(100, 5);
	this.prefetch = new Array;
	var tmp;
	for(var i in this.thumbnails){
		tmp = new Image();
		tmp.src = this.thumbnails[i];
		this.prefetch.push(tmp);
	}
}

function px2int(px){
	return(parseInt(px.substr(0, px.length - 2)));
}

function getStyle(el,styleProp){
	if(el.nodeType){
		var x = el;
	}else{
		var x = document.getElementById(el);
	}
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}

function scaleMoveHelper(element, ox, oy, ow, oh, nx, ny, nw, nh, noOfSteps, currentStep){
	if(currentStep > noOfSteps){
		return(true);
	}
	var cx, cy, cw, ch;
	var p = currentStep / noOfSteps;
	cx = Math.round(ox + ((nx - ox) * p));
	cy = Math.round(oy + ((ny - oy) * p));
	cw = Math.round(ow + ((nw - ow) * p));
	ch = Math.round(oh + ((nh - oh) * p));
	element.style.left = cx + "px";
	element.style.top = cy + "px";
	element.style.width = cw + "px";
	element.style.height = ch + "px";
	window.setTimeout(function(){scaleMoveHelper(element, ox, oy, ow, oh, nx, ny, nw, nh, noOfSteps, currentStep + 1);}, 40);
}