/* Variables */
var borderSize = 2;
var paddingSize = 15;
var dialogImageContainerHeight = 130;
var bannerImages = Array();
var currentImage = 0;

/* General */
function addEvent(type, listener, object)
{
	if (typeof(listener) != "function")
	{
		listener = new Function(listener);
	}
	
	if (typeof(object) == "undefined")
	{
		object = window;
	}
	
	if (object.addEventListener)
	{
		object.addEventListener(type, listener, false);
	}
	else
	{
		object.attachEvent("on" + type, listener);
	}
}

function removeEvent(type, listener, object)
{
	if (typeof(listener) != "function")
	{
		listener = new Function(listener);
	}
	
	if (typeof(object) == "undefined")
	{
		object = window;
	}
	
	if (object.removeEventListener)
	{
		object.removeEventListener(type, listener, false);
	}
	else
	{
		object.detachEvent("on" + type, listener);
	}
}

function detectIE()
{
	var ieVersion = 0;
	if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
	{
		ieVersion = new Number(RegExp.$1);
	}
	return ieVersion;
}

/* Popup/Banner */
function showDialog(url, width, height)
{
	var objBody = document.body;
	var objOverlay = document.createElement("div");
	
	objOverlay.setAttribute("id", "Overlay");
	objOverlay.setAttribute("title", "Klik hier om te sluiten");
	addEvent("click", function ()
	{
		hideDialog();
		return false;
	}, objOverlay);
	objBody.appendChild(objOverlay);
	
	var objDialog = document.createElement("div");
	objDialog.setAttribute("id", "Dialog");
	objDialog.style.padding = paddingSize + "px";
	objDialog.style.width = (width + borderSize) + "px";
	objDialog.style.height = (height + borderSize) + "px";
	objDialog.style.marginLeft = ((width / 2) * -1) + "px";
	objDialog.style.marginTop = ((height / 2) * -1) + "px";
	objBody.appendChild(objDialog);
	
	var objDialogClose = document.createElement("a");
	objDialogClose.setAttribute("id", "CloseDialog");
	addEvent("click", hideDialog, objDialogClose);
	objDialog.appendChild(objDialogClose);
	
	var objDialogIframe = document.createElement("iframe");
	objDialogIframe.src = url;
	objDialogIframe.setAttribute("id", "DialogIframe");
	objDialogIframe.style.width = width + "px";
	objDialogIframe.style.height = height + "px";
	objDialogIframe.style.border = "1px solid #666";
	objDialogIframe.style.background = "#fff";
	objDialogIframe.frameBorder = "0";
	objDialogIframe.setAttribute("scrolling", "0");
	objDialog.appendChild(objDialogIframe);
			
	objOverlay.style.display = "block";
	objDialog.style.display = "block";
}

function getSizeDialog(width, height)
{
	var size = Array();
	var objBody = document.body;
	var objDialogContainer = document.getElementById("DialogImageContainer");
	
	size[0] = width;
	size[1] = height;
	
	objDialogContainer.style.overflowY = "hidden";
	objDialogContainer.style.overflowX = "hidden";
	
	if (height > (objBody.offsetHeight - 20))
	{
		size[1] = objBody.offsetHeight;
		objDialogContainer.style.overflowY = "auto";
	}
	
	if (width > (objBody.offsetWidth - 20))
	{
		size[0] = objBody.offsetWidth;
		objDialogContainer.style.overflowX = "auto";
	}
	return size;
}

function hideDialog()
{
	var objBody = document.body;
	var objOverlay = document.getElementById("Overlay");
	var objDialog = document.getElementById("Dialog");
	
	objDialog.style.display = "none";
	objOverlay.style.display = "none";
	
	objBody.removeChild(objDialog);
	objBody.removeChild(objOverlay);
	
	removeEvent("resize", setSizeImageDialog);
}

/* ArticleDialog */
function showOrderArticleDialog(ArticleId)
{
	showDialog("article/orderarticle.php?ArticleId=" + ArticleId, 520, 350);
}

/* Image Dialog */
function showImageDialog(images, width, height, title)
{
	bannerImages = images;
	
	var bannerImage = new Image();
	
	bannerImage.src = bannerImages[0];
	
	if (bannerImages.length <= 1) {	dialogImageContainerHeight = 27; }
	
	var objBody = document.body;
	var objOverlay = document.createElement("div");
	
	objOverlay.setAttribute("id", "Overlay");
	objOverlay.setAttribute("title", "Klik hier om te sluiten");
	addEvent("click", function() { hideDialog(); return false; }, objOverlay);
	objBody.appendChild(objOverlay);
	
	var objDialog = document.createElement("div");
	objDialog.setAttribute("id", "Dialog");
	objDialog.style.padding = paddingSize + "px";
	objBody.appendChild(objDialog);
	
	var objDialogContainer = document.createElement("div");
	objDialogContainer.setAttribute("id", "DialogImageContainer");
	objDialog.appendChild(objDialogContainer);
	
		var objDialogImage = document.createElement("img");
		objDialogImage.setAttribute("id", "DialogImage");
		objDialogImage.setAttribute("src", bannerImage.src);
		objDialogImage.setAttribute("alt", title);
		objDialogImage.setAttribute("title", title);
		objDialogImage.setAttribute("width", width);
		objDialogImage.setAttribute("height", height);
		objDialogContainer.appendChild(objDialogImage);
	
		if (bannerImages.length > 1) {
			var objDialogNavigationLeft = document.createElement("a");
			objDialogNavigationLeft.setAttribute("id", "DialogImageNavigationLeft");
			addEvent("click", function() { navigateImage(-1); }, objDialogNavigationLeft);
			objDialogContainer.appendChild(objDialogNavigationLeft);
			
				var objDialogNavigationLeftImage = document.createElement("img");
				objDialogNavigationLeftImage.src = "images/transparent.gif";
				objDialogNavigationLeftImage.width = 100 + "%";
				objDialogNavigationLeftImage.height = 100 + "%";
				objDialogNavigationLeft.appendChild(objDialogNavigationLeftImage);
			
			var objDialogNavigationRight = document.createElement("a");
			objDialogNavigationRight.setAttribute("id", "DialogImageNavigationRight");
			addEvent("click", function() { navigateImage(+1); }, objDialogNavigationRight);
			objDialogContainer.appendChild(objDialogNavigationRight);
				
				var objDialogNavigationRightImage = document.createElement("img");
				objDialogNavigationRightImage.src = "images/transparent.gif";
				objDialogNavigationRightImage.width = 100 + "%";
				objDialogNavigationRightImage.height = 100 + "%";
				objDialogNavigationRight.appendChild(objDialogNavigationRightImage);
		}
		
		var objDialogDetail = document.createElement("div");
		objDialogDetail.setAttribute("id", "DialogImageDetail");
		objDialogDetail.innerHTML = "Afbeelding " + (currentImage + 1) + " van " + bannerImages.length;
		objDialog.appendChild(objDialogDetail);
	
		var objDialogClose = document.createElement("div");
		objDialogClose.setAttribute("id", "DialogImageClose");
		objDialog.appendChild(objDialogClose);
	
			var objDialogCloseLink = document.createElement("a");
			objDialogCloseLink.setAttribute("id", "CloseDialogImage");
			objDialogCloseLink.setAttribute("title", "Klik hier om te sluiten");
			addEvent("click", function() { hideDialog(); return false; }, objDialogCloseLink);
			objDialogClose.appendChild(objDialogCloseLink);
	
		if (bannerImages.length > 1){
			var objDialogImageContainer = document.createElement("div");
			objDialogImageContainer.setAttribute("id", "DialogThumbsContainer");
			objDialog.appendChild(objDialogImageContainer);
			
			for (var i = 0; i < bannerImages.length; i++) {
				var objDICImage = document.createElement("img");
				objDICImage.src = bannerImages[i];
				addEvent("click", "navigateImage(" + i + ");", objDICImage);
				objDialogImageContainer.appendChild(objDICImage);
			}
		}
	
	objOverlay.style.display = "block";
	objDialog.style.display = "block";
	
	setSizeImageDialog();
	
	addEvent("resize", setSizeImageDialog);
}

function setSizeImageDialog()
{
	var objDialog = document.getElementById("Dialog");
	var objDialogContainer = document.getElementById("DialogImageContainer");
	var objDialogImage = document.getElementById("DialogImage");
	
	var width = (objDialogImage.offsetWidth + (paddingSize * 2) + borderSize);
	var height = (objDialogImage.offsetHeight + (paddingSize * 2) + dialogImageContainerHeight + borderSize);
	var divsize = getSizeDialog(width, height);
	
	objDialog.style.width = (divsize[0] - (borderSize * 2) - (paddingSize * 2)) + "px";
	objDialog.style.height = (divsize[1] - (borderSize * 2) - (paddingSize * 2)) + "px";
	objDialog.style.marginLeft = ((divsize[0] / 2) * -1) + "px";
	objDialog.style.marginTop = ((divsize[1] / 2) * -1) + "px";
	
	objDialogContainer.style.width = (divsize[0] - (borderSize * 2) - (paddingSize * 2)) + "px";
	objDialogContainer.style.height = (divsize[1] - dialogImageContainerHeight - borderSize - (paddingSize * 2)) + "px";
}

function navigateImage(action)
{
	var objDialogImage = document.getElementById("DialogImage");
	var objDialogNavigationLeft = document.getElementById("DialogImageNavigationLeft");
	var objDialogNavigationRight = document.getElementById("DialogImageNavigationRight");
	var objDialogDetail = document.getElementById("DialogImageDetail");
	
	if (action == +1 && (currentImage + 1) < bannerImages.length || action == -1 && (currentImage - 1) >= 0) {
		switch (action){
			case +1:
				currentImage++;
				break;
			case -1:
				currentImage--;
				break;
		}
	}
	else { currentImage = action; }
	
	if (currentImage == 0) { objDialogNavigationLeft.style.display = "none"; }
	else { objDialogNavigationLeft.style.display = "block"; }
	
	if (currentImage == (bannerImages.length - 1)) { objDialogNavigationRight.style.display = "none"; }
	else { objDialogNavigationRight.style.display = "block"; }
	
	objDialogImage.src = bannerImages[currentImage];
	objDialogDetail.innerHTML = "Afbeelding " + (currentImage + 1) + " van " + bannerImages.length;
}