var blnMeerFotosTonen = false;
var objProductImage					= null;
var objZoomImage						= null;
var objProductZoom					= null;
var objProductZoomContainer	= null;
var objProductZoomWindow		= null;
var objMeerFotosAfbeelding  = null;

var ZoomWindowOffsetX;
var ZoomWindowOffsetY;
var ProductImageX;
var ProductImageY;

// Attach events
function AttachEvent(objTarget, strEvent, objEventHandler)
{
	if(window.addEventListener){ // Mozilla, Netscape, Firefox
		objTarget.addEventListener(strEvent, objEventHandler, false);
	} 
	else 
	{ // IE
		objTarget.attachEvent("on"+strEvent, objEventHandler);
	}
}

// Cancel bubble
function CancelBubble(objEvent)
{
	objEvent = objEvent?objEvent:window.event;
	if(objEvent)
	{
		objEvent.cancelBubble = true;
		if (objEvent.stopPropagation) objEvent.stopPropagation();
	}			
	return objEvent;
}

// Get x position
function getXPos(obj)
{
	var result=0;
	while(obj.offsetParent)
	{
		result = result + parseInt(obj.offsetLeft);
		obj = obj.offsetParent;
	}
	return result;
}

// Get Y position
function getYPos(obj)
{
	var result=0;
	while(obj.offsetParent)
	{
		result = result + parseInt(obj.offsetTop);
		obj = obj.offsetParent;
	}
	return result;
}

// Init product zoom
function InitProductZoom()
{
	objProductImage					= document.getElementById('afbeelding');
	objProductZoom					= document.getElementById('product-zoom-afbeelding');
	objProductZoomContainer	= document.getElementById('product-zoom-container');
	objProductZoomWindow		= document.getElementById('product-zoom-window');
	
	// Attach events to image			
	if(objProductImage)
	{
		if(document.all)
		{
			objProductImage	= objProductImage.childNodes[0];
			objZoomImage		= objProductZoom.childNodes[0];
		}
		else
		{
			objProductImage = objProductImage.childNodes[1];
			objZoomImage		= objProductZoom.childNodes[1];
		}

		AttachEvent(objProductImage, "mousemove", HoverProductAfbeelding)
		AttachEvent(objProductZoomWindow, "mousemove", HoverProductAfbeelding)
		AttachEvent(objProductImage, "mouseout", OutProductAfbeelding)
		AttachEvent(objProductZoomWindow, "mouseout", OutProductAfbeelding)
	}

	// Init window voor product hover
	if(objProductZoom && objProductImage)
	{				
		if(objProductImage && objZoomImage)
		{
			objProductZoomWindow.style.width = objProductImage.clientWidth * (objProductImage.clientWidth / objZoomImage.clientWidth) + 'px';
			objProductZoomWindow.style.height = objProductImage.clientHeight * (objProductImage.clientHeight / objZoomImage.clientHeight) + 'px';
			
			if(objProductZoomWindow.clientWidth > objProductImage.clientWidth) objProductZoomWindow.style.width = objProductImage.clientWidth + 'px';
			if(objProductZoomWindow.clientHeight > objProductImage.clientHeight) objProductZoomWindow.style.height = objProductImage.clientHeight + 'px';
		}
			
		//// calculate offset difference between zoomwindow and image 
		//ZoomWindowOffsetX = (objProductImage.offsetLeft - objProductZoomWindow.offsetLeft) + (objProductImage.clientLeft - objProductZoomWindow.clientLeft);
		//ZoomWindowOffsetY = (objProductImage.offsetTop - objProductZoomWindow.offsetTop) + (objProductImage.clientTop - objProductZoomWindow.clientTop);

		ZoomWindowOffsetX = 0;
		ZoomWindowOffsetY = 0;
		
		if(document.all)
		{
			// niet nodig in IE
			ProductImageX = 0;
			ProductImageY = 0;
		}
		else
		{
			ZoomWindowOffsetX = 0;
			ZoomWindowOffsetY = 0;
			
			ProductImageX = getXPos(objProductImage);
			ProductImageY = getYPos(objProductImage);
		}
	}			
}

// Hover over productafbeelding
function HoverProductAfbeelding(objEvent)
{
	var evt = document.all?window.event:objEvent;
	var x = document.all?evt.offsetX:evt.clientX - ProductImageX;
	var y = document.all?evt.offsetY:evt.clientY - ProductImageY;	
	
	if(objProductZoom)
	{
		//calculate zoomwindow position;
		objProductZoomWindow.style.left = x - (objProductZoomWindow.clientWidth/2) + ZoomWindowOffsetX + 'px';
		
		
		if(document.all)
		{
			objProductZoomWindow.style.top	= y - (objProductZoomWindow.clientHeight/2) - ZoomWindowOffsetY + 'px';
		}
		else
		{
			objProductZoomWindow.style.top	= y - (objProductZoomWindow.clientHeight/2) - ZoomWindowOffsetY + document.documentElement.scrollTop + 'px';
			
		}
		
		//Check bounds
		window.status = objProductZoomWindow.clientLeft + "," + objProductZoomWindow.clientLeft;
		if(objProductZoomWindow.offsetLeft < ZoomWindowOffsetX) objProductZoomWindow.style.left = ZoomWindowOffsetX + 'px';
		if(objProductZoomWindow.offsetTop < ZoomWindowOffsetY) objProductZoomWindow.style.top  = ZoomWindowOffsetY + 'px';

		if(objProductZoomWindow.offsetLeft > ZoomWindowOffsetX + objProductImage.clientWidth - objProductZoomWindow.clientWidth - 2) objProductZoomWindow.style.left = ZoomWindowOffsetX + objProductImage.clientWidth - objProductZoomWindow.clientWidth -2 + 'px';
		if(objProductZoomWindow.offsetTop > ZoomWindowOffsetY + objProductImage.clientHeight - objProductZoomWindow.clientHeight -2) objProductZoomWindow.style.top = ZoomWindowOffsetY + objProductImage.clientHeight - objProductZoomWindow.clientHeight -2 + 'px';
	
		objProductZoomContainer.style.visibility = 'visible';
		objProductZoomWindow.style.visibility = 'visible';
		
		//Reposition zoom
		//var newX = parseInt((((objProductZoomWindow.offsetLeft-(ZoomWindowOffsetX))/(objProductImage.clientWidth+ZoomWindowOffsetX))*objZoomImage.clientWidth))
		//var newY = parseInt((((objProductZoomWindow.offsetTop-(ZoomWindowOffsetY))/(objProductImage.clientHeight+ZoomWindowOffsetY))*objZoomImage.clientHeight))
		
		var newX = parseInt((((objProductZoomWindow.offsetLeft+(ZoomWindowOffsetX))/(objProductImage.clientWidth))*410))
		var newY = parseInt((((objProductZoomWindow.offsetTop+(ZoomWindowOffsetY))/(objProductImage.clientHeight))*475))
		
		if(!(typeof newX == 'number' && isFinite(newX)) || newX<0) newX = 0;
		if(!(typeof newY == 'number' && isFinite(newY)) || newY<0) newY = 0;
				
		
		var pos = "-" + newX + "px -" + newY + "px"
		
		pos = pos.replace("--", "-");		
		//document.getElementById('debug').innerHTML = pos;
		
		objProductZoom.style.backgroundPosition = pos;
	}
}

// Mouseout productafbeelding
function OutProductAfbeelding()
{
	if(objProductZoom)
	{
		objProductZoomContainer.style.visibility = 'hidden';
		objProductZoomWindow.style.visibility = 'hidden';
	}
}

// Mouseout productafbeelding
function ToggleMeerFotos()
{
	blnMeerFotosTonen = !blnMeerFotosTonen;
	
	if(blnMeerFotosTonen)
	{
		document.getElementById('meerfotosbutton').style.display='none';
		document.getElementById('meerfotos').style.display='block';
	}
	else
	{
		document.getElementById('meerfotosbutton').style.display='block';
		document.getElementById('meerfotos').style.display='none';
	}
}

// Show Foto
function ShowFoto(intProductID, strExtra)
{
	var afbeelding = document.getElementById('productafbeelding'+intProductID+'groot');
	var zoomafbeelding = document.getElementById('product-zoom-afbeelding');
	var zoom = document.getElementById('extrafotowaarde');
	
	if(afbeelding && zoom)
	{
		if(strExtra!='') strExtra='-'+strExtra;
		afbeelding.src = '/productafbeeldingen/groot'+strExtra+'/'+intProductID+'/product.jpg';
		zoomafbeelding.style.backgroundImage = 'url(/productafbeeldingen/zoom'+strExtra+'/'+intProductID+'/product.jpg)';
		zoom.value = strExtra
		InitProductZoom()
	}
}