/* On window load */
window.onload = function() {
    /* form onchange change class back */
    clearClassFormElements('');


	/* Set focus on login */
	/* if login box is available */
	if(document.getElementById('user_email')) {
		/* focus on input user_email */
		document.getElementById('user_email').focus();
	}

	/* Open and close heldesk catgeories, answers and questions */
	/* if heldesk is available */
	if(document.getElementById('helpdesk')) {
		/* root of the heldesk */	
		var root = document.getElementById('helpdesk');
		
		/* all list elements in heldesk */
		var cats = root.getElementsByTagName('li');

		for (var i=0;i<cats.length;i++) { 
			/* all list elements in array */
			var cat = cats[i];

			/* if list element has class catquestions or answer */
			if(cat.className=='catquestions' ||  cat.className=='answer' || cat.className=='helpdeskcatcontact') {
				/* set display to unvisible / none  if the element is not set on display block in xhtml */
				if(cat.style.display=='block') {
				    cat.style.display = 'block';
				}else{
					cat.style.display = 'none';
				}
			/* if list element is a heldeskcat (bar) or a question (text) */
			} else if(cat.className=='helpdeskcat' || cat.className=='question') {
				/* add an onClick listner event function */
				addEvent(cat, 'click', function() {
					/* if the element has a anker/href inside */
					if(this.firstChild.nodeName=='A') {
						anker = this.firstChild.innerHTML;
						/* create a anker namer and inject as href */
						this.firstChild.href = '#' + anker.replace(/ /g, '');
					}
					/* Opening en closing all element answers en catagories */
					for (var j=0;j<cats.length-1;j++)
					{
						var g = j+1;
						var h = j-1;
						/* if an array element equals the onClicked element */
						if(cats[j]==this) {	
							if(cats[g].style.display=='none') {
								if(this.className=='helpdeskcat') {
									/* change the button of the cat bar to downwards arrow */
									/* do this by changing the class name */
									this.firstChild.className = 'helpdeskopen';
								} 
								
								
								if(this.className=='question') {
									/* change the arrow of the answer to a downwards arraow */
									/* change the question to bold */
									this.style.listStyleImage = 'url(images/icons/arrowdown.gif)';
									this.style.fontWeight = 'bold';
								}
								/* set the nextSibling display to visible/block */ 
								cats[g].style.display = 'block';
							} else {
								if(this.className=='helpdeskcat') {
									this.firstChild.className = '';
								}
								if(this.className=='question') {
									/* change the arrow of the answer to a rightpint arraow */
									/* change the question to normal */
									this.style.listStyleImage = 'url(images/icons/arrow.gif)';
									this.style.fontWeight = 'normal';
								}
								cats[g].style.display = 'none';
							}
						
						/* set all the other elements to display none */
						} else {
							if(this.className=='helpdeskcat') {
								if(cats[g].className=='catquestions') {
									/* set the nextSibling display to unvisible/none */ 								
									cats[g].style.display = 'none';
								}
								if(cats[j].firstChild.nodeName=='A') {
									/* change the button of the cat bar to rightpoint arrow */
									/* do this by changing the classname to nothing*/
									cats[j].firstChild.className = '';
								}
							}
							if(this.className=='question') {
								if(cats[g].className=='answer') {
									/* change the arrow of the answer to a downwards arraow */
									/* change the question to normal */
									cats[j].style.listStyleImage = 'url(images/icons/arrow.gif)';
									cats[j].style.fontWeight = 'normal';
									/* set the nextSibling display to unvisible/none */ 								
									cats[g].style.display = 'none';
								} 
							}
						}
					}
				});
			}
		}
	}

	if(document.getElementById('signup')) {
	    mail =  document.getElementById('txfMail');
	    addEvent(mail, 'blur', function() {
	        getUserNameData();
	    });
	}

}


/* add event function */
function addEvent(element, type, handler) {
    // assign each event handler a unique ID
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    // create a hash table of event types for the element
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        // store the existing event handler (if there is one)
        if (element["on" + type]) {
            handlers[0] = element["on" + type];
        }
    }
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;

function removeEvent(element, type, handler) {
    // delete the event handler from the hash table
    if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
    }
};

function handleEvent(event) {
    // grab the event object (IE uses a global event object)
    event = event || window.event;
    // get a reference to the hash table of event handlers
    var handlers = this.events[event.type];
    // execute each event handler
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        this.$$handleEvent(event);
    }
};

function showDivKeydown(div, e) {
	/* if the keydown is the esc key */
	if (e.keyCode == 27) {	
		if (overlay.style.display != 'none') showDiv(div);
	} 
}

function clearClassFormElements(div) {
    if(div) {
        elements = document.getElementById(div);
    } else {
        elements = document;
    }

	if(elements.getElementsByTagName('form')) {
	    
		/* list all input elements in a form */
		var input = elements.getElementsByTagName('input');
		
		for (var i=0;i<input.length;i++) { 
			/* all list elements in array */
			var formelement = input[i];
			addEvent(formelement, 'change', function() {
				if(this.className == 'error') {
					this.className = '';
				}
				
			});
			if(div) {
			   if(formelement.className == 'error') {
					formelement.className = '';
				} 
			}
			
		}
		var select = elements.getElementsByTagName('select');
		for (var i=0;i<select.length;i++) { 
			/* all list elements in array */
			var formelement = select[i];
			addEvent(formelement, 'change', function() {
				if(this.className == 'error') {
					this.className = '';
				}
			});
			if(div) {
			   if(formelement.className == 'error') {
					formelement.className = '';
				} 
			}
		}
		var textarea = elements.getElementsByTagName('textarea');
		for (var i=0;i<textarea.length;i++) { 
			/* all list elements in array */
			var formelement = textarea[i];
			addEvent(formelement, 'change', function() {
				if(this.className == 'error') {
					this.className = '';
				}
			});
			if(div) {
			   if(formelement.className == 'error') {
					formelement.className = '';
				} 
			}
		}
	}
}



function showChangeForm(div) {
	el = document.getElementById(div);
	visible = el.style.display;


	if(visible=='block') {
		el.style.display = 'none';
	} else {
		
		el.style.display = 'block';
	}


	
	/* Evert: Nast solution */
	if(div=='passwordchangediv') {
		clearClassFormElements('passwordchangediv');
    }
    
    if(div=='emailchangediv') {
        clearClassFormElements('emailchangediv');
    }
    
    if(div=='personalchangediv') {
        clearClassFormElements('personalchangediv');
	}
	
	if(div=='paymentchangediv') {
	    clearClassFormElements('paymentchangediv');
	}

    if(document.getElementById('password_messages')) {
	    if(document.getElementById('password_messages').style.display == 'block') {
	        document.getElementById('password_messages').style.display = 'none'; 
	        clearElement('password_messages');
	    }
    }
	
    if(document.getElementById('email_messages')) {
        if(document.getElementById('email_messages').style.display == 'block') {
            document.getElementById('email_messages').style.display = 'none'; 
            clearElement('email_messages');
        }
    }
	
	if(document.getElementById('personal_messages')) {
        if(document.getElementById('personal_messages').style.display == 'block') {
            document.getElementById('personal_messages').style.display = 'none'; 
            clearElement('personal_messages');
        }
    }
    	
    if(document.getElementById('payment_messages')) {
        if(document.getElementById('payment_messages').style.display == 'block') {
            document.getElementById('payment_messages').style.display = 'none'; 
            clearElement('payment_messages');
        }
    }	
	
}


/* show language and overlay elements */
function showDiv(div) {
	var overlay = document.getElementById('overlay');
	var lightbox = document.getElementById('lightbox');
	var element = document.getElementById(div);

	/* if the requested element id equals 'languages' */
	if(div=='languages') {
		/* get the hight of the sidebarcontent */
		var h = document.getElementById('sidebarcontent').offsetHeight;
		/* change the height of the language element */
		document.getElementById('languages').style.height = h+'px';
		/* change the language element display */
		if(element.style.display=='none' || element.style.display=='') {
			element.style.display = 'block';
		} else {
			element.style.display = 'none';
		}

	/* if the requested element id DOES NOT equals 'overlay' */
	} else if(div!='overlay') {
		/* 
		- change te element display = hide overlay + element
		- change the height of the overlay
		- add an onClick event on overlay = hide overlay + element 
		- add an onKeyPress(esc) event on the document = hide overlay + element
		*/
		
		if(overlay.style.display=='none' || overlay.style.display=='') {
			/* get the page sizes */			
			var arrayPageSize = getPageSize();
			/* get the scrollTop */
			var arrayPageScroll = getPageScroll();
			/*
			Change the lightbox, (the container of alle overlay elements except the overlay self)
			- Place it Xpx from the top of the window
			- Change the width from 100% to the width of the lightbox element 680px
			- Place it Xpx to the left (its an absolute element not relative
			- Display the lightbox 
			*/	
			var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
			var lightboxLeft =  (arrayPageSize[2]/2)-(680/2);
			lightbox.style.width = 680+'px';
			lightbox.style.top = lightboxTop+'px';
			lightbox.style.left = lightboxLeft+'px';			
			lightbox.style.display = 'block';

			/* set te element of the lightbox on display, this is the id of the requested element */
			element.style.display = 'block';

			/* set the overlay on display, this is an empty element just the overlay background*/
			overlay.style.display = 'block';
			/* change the height of the overlay to the height of the page */
			overlay.style.height = arrayPageSize[1]+'px';
			/* add an onClick listner on the overlay */			
			addEvent(overlay, 'click', function(div) {
					/* overlay display unvisible/none */
					overlay.style.display = 'none';

					elements = lightbox.getElementsByTagName('div');
					/* set all elements display in the lightbox to unvisible/none */
					for(i=0; i<elements.length; i++) {
						elements[i].style.display = 'none';
					}
					/* set the lightbox display to unvisible/none */
					lightbox.style.display = 'none';
					if (overlay.style.display != 'none') showDiv(element.id);
				}
			);
			
			/* add an onkeydown lister to the document */					
			//addEvent(document, 'keydown', function(e) {
	        //        if (e.keyCode == 27) {	
		    //            if (overlay.style.display != 'none') showDiv(div);
	        //        }
			//	}
			//);			
		} else {
			/* set the following elements to unvisible/none */
			overlay.style.display='none';
			element.style.display = 'none';
			lightbox.style.display = 'none';
		}
	}
}

/* get the page-scrollbar top position in */
function getPageScroll(){
	var yScroll;
	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

/* get alle the page sizes and windowsizes */
function getPageSize(){
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}




function insertElement(text, objType, objID, objClass, objParent, objSibling, numOfNodes) {
	// if the object doesnt exsist yet
	if(!document.getElementById(objID)) {
	// create an element with the objType
	var objElement = document.createElement(objType);
		// if there is an id, assign it to the element
		if(objID) 		
			objElement.setAttribute('id', objID);
		// if there is an class, assign it to the element
		if(objClass)
			objElement.className = objClass;
		// if there is any text, insert it into the element
		if(text)
			objElement.innerHTML = text;

		// insert the element inside an other element
		objParent = document.getElementById(objParent);
		if(objParent) {
			objParent.appendChild(objElement);
		}
		// insert the element after an other element
		objSibling = document.getElementById(objSibling);
		if(objSibling) {
			if(numOfNodes>0) {
                for(var n=0; n<numOfNodes; n++) {
	                objSibling = objsibling.nextSibling;
                }
			}
			objSibling.parentNode.insertBefore(objElement, objSibling.nextSibling );
		}
	}
}

function clearElement(element) {
    document.getElementById(element).innerHTML = '';
}

function setVisualHeader(image) {
    if(document.getElementById('homeheader')) {
        headeris = document.getElementById('homeheader');
    } else if(document.getElementById('header')) {
        headeris = document.getElementById('header');
    }
    headeris.style.backgroundImage = 'url('+image+')';
}


function disappear(element, opacity) {
    element = document.getElementById(element); 
	var reduce_opacity_by = 15;
	var rate = 30;	// 15 fps
	
	if (opacity > 0) {
		opacity -= reduce_opacity_by;
		if (opacity < 0) opacity = 0;
		
		if (element.filters) {
			try {
				element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
			} catch (e) { 
				// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
				element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
			}
		} else {
			element.style.opacity = opacity / 100;
		}
	}
	

	if(opacity > 0) {
		setTimeout(function() { disappear(element.id, opacity); }, rate);
	} else {
		element.style.display = "none";
	}
}


function setButtonLoader(buttonid) {
    if(document.getElementById(buttonid)) {
        button = document.getElementById(buttonid);
        if(button.className=='buttonsmall') {
            button.className = 'buttonsmall_loading';
        } else if(button.className=='buttonmiddle') {
            button.className = 'buttonmiddle_loading';
        } else if(button.className=='buttonlarge') {
            button.className = 'buttonlarge_loading';
        }
    }
}

function setButtonLoaded(buttonid) {
    if(document.getElementById(buttonid)) {
        button = document.getElementById(buttonid);
        if(button.className=='buttonsmall_loading') {
            button.className = 'buttonsmall';
        } else if(button.className=='buttonmiddle_loading') {
            button.className = 'buttonmiddle';
        } else if(button.className=='buttonlarge_loading') {
            button.className = 'buttonlarge';
        }
    }
}