/*
Faber Online Publishing Form Handler Client Side Script

$Rev: 288 $
$LastChangedDate: 2009-01-26 22:08:50 +0100 (ma, 26 jan 2009) $

(c)Copyright 2007 Faber Online Publishing: all rights included.

Nothing from this file may be altered, copied or re-used without prior written
approval from Faber Online Publishing.

(c)Copyright 2007 Faber Online Publishing: Alle rechten voorbehouden.

Niets uit dit bestand mag gewijzigd, gekopieeerd of hergebruikt worden zonder
schriftelijke toestemmming vooraf van Faber Online Publishing.
*/

function getLabelForElement(id){
	var labels = document.getElementsByTagName("label");
	if(labels.length != 0){
		for(var i in labels){
			if(labels[i].htmlFor == id){
				return(labels[i]);
			}
		}
	}else{
		return(null);
	}
	return("onbekend");
}

function FormValidator(formName, callWhenValidated){
	this.formName = formName;
	this.items = new Array();
	this.callWhenValidated = callWhenValidated;
	this.submitBlockObjects = new Array();
	
	
	this.addItem = function(id, obligatory, regExp, maxLength){
		var label = getLabelForElement(id);
		if(label != null){
			var name = label.innerHTML;
		}
		this.items.push({"element" : document.getElementById(id), "id" : id, "label" : label, "name" : name, "obligatory" : obligatory, "regExp" : regExp, "maxLength" : maxLength, "labelClass" : label.className});
	}
	
	this.addSubmitBlock = function(object){
		this.submitBlockObjects.push(object);
	}
	
	this.checkSubmitBlocks = function(){
		for(var i in this.submitBlockObjects){
			if(!this.submitBlockObjects[i].getSubmitBlock()){
				return(false);
			}
		}
		return(true);
		
	}
	
	this.getSubmitButton = function(){
		var inputElements = document.getElementById(this.formName).getElementsByTagName("input");
		for(var i in inputElements){
			if(inputElements[i].getAttribute("type").toLowerCase() == "submit"){
				return(inputElements[i]);
			}
		}
		return(null);
	}

	this.unblockSubmission = function(){
		this.getSubmitButton().disabled = false;
	}
	
	this.blockResubmission = function(){
		var submitButton = this.getSubmitButton();
		if(submitButton != null){
			submitButton.disabled = true;
			var self = this;
			window.setTimeout(this.formName + "Validator.unblockSubmission()", 4000);
		}
	}
	
	this.validate = function(){
		if(!this.checkSubmitBlocks()){
			return(false);
		}
		var item;
		var showAlert = false;
		var alertString = "";
		if(this.items.length > 0){
			for(var i in this.items){
				var item = this.items[i];
				if(item.label){
					item.label.className = "captionNormal";
					if(item.obligatory && item.element.value.length == 0){
						alertString += "Geen waarde ingevuld voor " + item.name + "\n";
						item.label.className = "captionHighlight";
						showAlert = true;
					}else if(item.maxLength != 0 && item.element.value.length > item.maxLength){
						alertString += "Te lange tekst gebruikt bij " + item.name + "\n";
						item.label.className = "captionHighlight";
						item.element.value = item.element.value.substring(0, item.maxLength);
						showAlert = true;
					}else if(!(item.element.value.match(item.regExp) || item.element.value.length == 0)){
						alertString += "Ongeldige waarde ingevuld bij " + item.name + "\n";
						item.label.className = "captionHighlight";
						showAlert = true;
					}
				}
			}
		}
		if(showAlert){
			alert(alertString);
			return(false);
		}
		if(this.callWhenValidated != null){
			if(this.callWhenValidated(this.formName)){
				this.blockResubmission();
				return(true);
			}else{
				return(false);
			}
			return(this.callWhenValidated(this.formName));
		}
		this.blockResubmission();
		return(true);
	}
	
	if(document.getElementById(this.formName).onsubmit == null || document.getElementById(this.formName).onsubmit == ""){
		document.getElementById(this.formName).setAttribute("onsubmit", "return(" + this.formName + "Validator.validate());");
	}
}

function MultipleSelector(id){
	this.id = id;
	this.poolId = id + "Pool";
	this.pool = getDOMObject(this.poolId);
	this.selectionId = id + "Selection";
	this.selection = getDOMObject(this.selectionId);
	this.buttonId = id + "MoveButton";
	this.button = getDOMObject(this.buttonId);
	this.direction = "right";
	this.leftArrow = new Image();
	this.leftArrow.src = "/images/l-arr.gif";
	this.rightArrow = new Image();
	this.rightArrow.src = "/images/r-arr.gif";

	
	this.click = function(e){
		var sourceChildren, i, j, option;
		var moveOptions = new Array();
		var selectedOptions = new Array();
		if(this.direction == "right"){
			sourceChildren = this.pool.childNodes;
			destination = this.selection;
		}else{
			sourceChildren = this.selection.childNodes;
			destination = this.pool;
		}
		for(i in sourceChildren){
			option = sourceChildren[i];
			if(option.nodeType == 1 && option.selected){
				moveOptions.push(option);
				option.selected = false;
			}
		
		}
		for(i in moveOptions){
			destination.appendChild(moveOptions[i]);
		}
		this.sort(destination);
		for(i in this.selection.childNodes){
			child = this.selection.childNodes[i];
			if(child.nodeType == 1 && child.nodeName.toLowerCase() == "option" && child.parentNode.id == this.selectionId){
				option = "'" + escape(child.value) + "'";
				if(!inArray(option, selectedOptions)){
					selectedOptions.push(option);
				}
			}
		}
		document.getElementById(this.id).value = selectedOptions.join(",");
		e.stopPropagation();
	}
	
	this.sort = function(node){
		var sortArray = new Array();
		var row = new Array();
		var child;
		var sortData = new Array();
		while(child = node.firstChild){
			if(child && child.nodeType == 1 && child.nodeName.toLowerCase() == "option"){
				row["value"] = child.innerHTML;
				row["node"] = child;
				sortArray.push(this.optionArray(child));
			}
			node.removeChild(child);
		}
		sortArray.sort(this.sortByValue);
		for(var i in sortArray){
			node.appendChild(sortArray[i]["node"]);
		}
	}
	
	this.optionArray = function(node){
		var row = new Array();
		row["node"] = node;
		if(node.firstChild && node.firstChild.nodeType == 3){
			row["value"] = node.firstChild.nodeValue;
		}else{
			return(null);
		}
		return(row);
	}
	
	this.sortByValue = function(a, b){
		a = a["value"].toLowerCase();
		b = b["value"].toLowerCase();
		return((a < b) ? -1 : (a > b) ? 1 : 0);
	}
	
	this.leftFocus = function(e){
		this.direction = "right";
		this.button.src = this.rightArrow.src;
	}
	
	this.rightFocus = function(e){
		this.direction = "left";
		this.button.src = this.leftArrow.src;
	}
	
	connect(this.button, "onclick", this, this.click);
	connect(this.pool, "onfocus", this, this.leftFocus);
	connect(this.selection, "onfocus", this, this.rightFocus);
}

function DateInput(id, formHandler, dayPos, monthPos, yearPos, separator, dayNames, monthNames){
	this.dayPos = dayPos;
	this.monthPos = monthPos;
	this.yearPos = yearPos;
	this.separator = separator;
	this.monthNames = monthNames;
	this.dayNames = dayNames;
	this.id = id;
	this.formHandler = formHandler;
	this.inputElem = document.getElementById(id);
	this.dateSelectorLayer = this.inputElem.nextSibling;
	this.bodyClickEvent = null;
	while(this.dateSelectorLayer.nodeType != 1){
		this.dateSelectorLayer = this.dateSelectorLayer.nextSibling;
	}
	this.dateSelectorLayer.className = "dateSelectorLayer";
	this.yearSelector = null;
	this.monthSelector = null;
	this.daySelector = null;
	this.yearUpButton = null;
	this.yearDownButton = null;
	
	this.toggleSelector = function(e){
		if(this.dateSelectorLayer.style.visibility == "visible"){
			this.dateSelectorLayer.style.visibility = "hidden";
			this.monthSelector.disabled = true;
			this.yearSelector.disabled = true;
		}else{
			var dateElems = this.inputElem.value.split(this.separator);
			this.monthSelector.selectedIndex = parseInt(dateElems[this.monthPos]) - 1;
			this.yearSelector.value = dateElems[this.yearPos];
			this.populateDays();
			this.dateSelectorLayer.style.visibility = "visible";
			this.monthSelector.disabled = false;
			this.yearSelector.disabled = false;
		}
		if(e){
			e.stopPropagation();
		}
		return(false);
	}
	
	this.hideSelector = function(e){
		this.dateSelectorLayer.style.visibility = "hidden";
	}
	
	this.daysInMonth = function(year, month){
		return 32 - new Date(year, month, 32).getDate();
	}
	
	this.firstDayInMonth = function(year, month){
		return(new Date(year, month, 1).getDay() - 1 % 7);
	}
	
	this.getMonth = function(){
		for(var i = 0; i < this.monthSelector.options.length; i++){
			if(this.monthSelector.options[i]){
				return(parseInt(this.monthSelector.options[i].value));
			}
		}
		return(null);
	}
	
	this.removeDayCellsRows = function(){
		while(this.daySelector.firstChild.childNodes[1]){
			this.daySelector.firstChild.removeChild(this.daySelector.firstChild.childNodes[1]);
		}

	}
	
	this.addDayCellsRow = function(){
		var cell;
		var row = document.createElement("tr");
		for(day = 0; day < 7; day++){
			cell = document.createElement("td");
			row.appendChild(cell);
		}
		this.daySelector.firstChild.appendChild(row);
		return(row);
	}
	
	this.populateDays = function(e){
		var val, elem, newRow;
		var year = parseInt(this.yearSelector.value);
		var month = this.monthSelector.selectedIndex;
		var noOfDays = this.daysInMonth(year, month);
		var index = -(((this.firstDayInMonth(year, month) + 1) % 7) - 1);
		var dateElems = this.inputElem.value.split(this.separator);
		var currentDay = parseInt(dateElems[0]);
		var highLightCurrentDay = (month == parseInt(dateElems[this.monthPos]) - 1 && year == parseInt(dateElems[this.yearPos]));
		this.removeDayCellsRows();
		while(index <= noOfDays){
			newRow = this.addDayCellsRow();
			for(var i = 0; i < 7; i++){
				elem = newRow.childNodes[i];
				if(index > 0 && index <= noOfDays){
					val = index;
					connect(elem, "onclick", this, this.selectDate);
					connect(elem, "onmouseover", this, this.highlightDay);
					connect(elem, "onmouseout", this, this.deHighlightDay);
					elem.style.cursor = "pointer";
					elem.innerHTML = index;
					if(highLightCurrentDay && index == currentDay){
						elem.id = "currentDay";
					}
				}else{
					elem.style.cursor = "default";
				}
				index++;
			}
		}
		if(e){
			e.stopPropagation();
		}
		return(false);
	}
	
	this.highlightDay = function(e){
		e.src().className = "highlight";
	}
	
	this.deHighlightDay = function(e){
		e.src().className = "";
	}
	
	this.selectDate = function(e){
		var day = e.src().firstChild.nodeValue;
		if(day.length == 1){
			day = "0" + day;
		}
		var month = String(this.monthSelector.selectedIndex + 1);
		if(month.length == 1){
			month = "0" + month;
		}
		var year = this.yearSelector.value;
		var newVal = "";
		var separator = "";
		for(var i = 0; i < 3; i++){
			newVal += separator;
			if(i == this.dayPos){
				newVal += day;
			}
			if(i == this.monthPos){
				newVal += month;
			}
			if(i == this.yearPos){
				newVal += year;
			}
			if(separator == ""){
				separator = this.separator;
			}
		}
		this.inputElem.value = newVal;
		this.toggleSelector();
		if(e){
			e.stopPropagation();
		}
		return(false);
	}
	
	this.setYear = function(e){
		this.populateDays();
		e.stopPropagation();
		return(false);
	}
	
	this.incrementYear = function(e){
		this.yearSelector.value = parseInt(this.yearSelector.value) + 1;
		this.populateDays();
		if(e){
			e.stopPropagation();
		}
		return(false);
	}
	
	this.decrementYear = function(e){
		this.yearSelector.value = parseInt(this.yearSelector.value) - 1;
		this.populateDays();
		if(e){
			e.stopPropagation();
		}
		return(false);
	}
	
	this.getSubmitBlock = function(s){
		return(this.dateSelectorLayer.style.visibility != "visible");
	}
	
	this.captureClicks = function(e){
		e.stopPropagation();
		return(false);
	}
	
	this.focusYearInput = function(e){
		if(this.bodyClickEvent != null){
			disconnect(this.bodyClickEvent);
			this.bodyClickEvent = null;
		}
	}
	
	this.blurYearInput = function(e){
		if(this.bodyClickEvent == null){
			this.bodyClickEvent = connect(document, "onclick", this, this.hideSelector);
		}
	}
	
	this.createMonthSelector = function(){
		this.monthSelector = document.createElement("select");
		this.monthSelector.setAttribute("size", 1);
		this.monthSelector.disabled = true;
		for(var i = 0; i < 12; i++){
			var option = document.createElement("option");
			option.setAttribute("value", i + 1);
			option.appendChild(document.createTextNode(this.monthNames[i]));
			this.monthSelector.appendChild(option);
		}
		connect(this.monthSelector, "onchange", this, this.populateDays);
		return(this.monthSelector);
	}
	
	this.createYearSelector = function(){
		var layOutTable = document.createElement("table");
		layOutTable.style.borderCollapse = "collapse";
		var row = document.createElement("tr");
		var cell = document.createElement("td");
		row.appendChild(cell);
		cell.style.textAlign = "right";
		this.yearSelector = document.createElement("input");
		this.yearSelector.setAttribute("type", "text");
		this.yearSelector.disabled = true;
		this.yearSelector.className = "dateSelectorYearInput";
		connect(this.yearSelector, "onchange", this, this.setYear);
		connect(this.yearSelector, "onfocus", this, this.focusYearInput);
		connect(this.yearSelector, "onblur", this, this.blurYearInput);
		cell.appendChild(this.yearSelector);
		var hiddenButton = document.createElement("button"); // Vangt click op eerstvolgende button af na enter in input veld in Opera en Firefox
		hiddenButton.style.display = "none";
		connect(hiddenButton, "onclick", this, this.setYear); // Opera onchange op input werkt niet
		cell.appendChild(hiddenButton);
		var cell = document.createElement("td");
		cell.className = "dateSelectorButtons";
		this.yearUpButton = document.createElement("button");
		this.yearUpButton.style.height = "50%";
		this.yearUpButton.style.width = "100%";
		this.yearUpButton.style.margin = "0px;";
		var upImage = document.createElement("img");
		upImage.src = "/images/btnarrowup.gif";
		upImage.setAttribute("alt", "Increment year");
		this.yearUpButton.appendChild(upImage);
		cell.appendChild(this.yearUpButton);
		cell.appendChild(document.createElement("br"));
		this.yearDownButton = document.createElement("button");
		this.yearDownButton.style.height = "50%";
		this.yearDownButton.style.width = "100%";
		this.yearDownButton.style.margin = "0px";
		var downImage = document.createElement("img");
		downImage.src = "/images/btnarrowdown.gif";
		downImage.setAttribute("alt", "Decrement year");
		this.yearDownButton.appendChild(downImage);
		cell.appendChild(this.yearDownButton);
		row.appendChild(cell);
		layOutTable.appendChild(row);
		connect(this.yearUpButton, "onclick", this, this.incrementYear);
		connect(this.yearDownButton, "onclick", this, this.decrementYear);
		return(layOutTable);
	}
	
	this.createDaySelectorTable = function(){
		this.daySelector = document.createElement("table");
		this.daySelector.className = "dateSelectorDays";
		var row = document.createElement("tr");
		for(var i = 0; i < 7; i++){
			var cell = document.createElement("th");
			cell.appendChild(document.createTextNode(this.dayNames[i]));
			row.appendChild(cell);
		}
		this.daySelector.appendChild(document.createElement("tbody"));
		this.daySelector.firstChild.appendChild(row);
		return(this.daySelector);
	}
	
	this.createSelectorLayer = function(){
		while(this.dateSelectorLayer.childNodes.length > 0){
			this.dateSelectorLayer.removeChild(this.dateSelectorLayer.firstChild);
		}
		var layOutTable = document.createElement("table");
		var row = document.createElement("tr");
		layOutTable.appendChild(row);
		var cell = document.createElement("td");
		cell.style.textAlign = "left";
		cell.appendChild(this.createMonthSelector());
		row.appendChild(cell);
		var cell = document.createElement("td");
		cell.style.textAlign = "right";
		cell.appendChild(this.createYearSelector());
		row.appendChild(cell);
		var row = document.createElement("tr");
		layOutTable.appendChild(row);
		var cell = document.createElement("td");
		cell.setAttribute("colspan", 2);
		row.appendChild(cell);
		cell.appendChild(this.createDaySelectorTable());
		this.dateSelectorLayer.appendChild(layOutTable);
	}
	
	this.dateSelectorLayer.id = this.id + "SelectorLayer";
	var container = document.createElement("div");
	container.className = 'dateContainer';
	this.inputElem.parentNode.replaceChild(container, this.inputElem);
	container.appendChild(this.inputElem);
	var icon = document.createElement("img");
	icon.className = "dateSelectorIcon";
	icon.src = '/images/dateselectoricon.gif';
	container.appendChild(icon);
	this.createSelectorLayer();
	container.appendChild(this.dateSelectorLayer.parentNode.removeChild(this.dateSelectorLayer));
	connect(icon, "onclick", this, this.toggleSelector);
	this.bodyClickEvent = connect(document, "onclick", this, this.hideSelector);
	connect(this.dateSelectorLayer, "onclick", this, this.captureClicks);
	connect(this.inputElem, "onfocus", this, this.hideSelector);
	formHandler.addSubmitBlock(this);
	if(navigator.appName == "Microsoft Internet Explorer"){
		IEFixDateInput(this);
	}
}