// Set global duration of effects (in seconds)
var globalDuration = 0.2;

// Set global timeout for hiding dropdowns (in milliseconds)
var globalTimeout = 700; 

// Contains the time interval of closing divs
var timeout;

// Stores the mouse x position
var mouseX;

// Stores the mouse y position
var mouseY;

// Init events
function initEvents() {
	
	// When navigate bar isset (not on all pages where this JS is loaded!)
	if(document.getElementById('columns')) {
		
		// Search for divs inside 
		var columns = $("columns");
		var columnChilds = columns.getElementsByTagName('*');
		
		// Walking trough all inside divs
		for(var i=0; i<columnChilds.length; i++) {
		
			// Check if the tag has the class name "dropdown"
			if(columnChilds[i].className == "dropdown") {
				
				// Set events for the elements mouse out
				var element = $(columnChilds[i].id);

				// Create dropdown object
				var splits = columnChilds[i].id.split("_");
				var contentObj = $(splits[0] + "_dropdown");
				
				// Observe
				Event.observe(element, 'mouseout', handleCloseEvent);
				Event.observe(contentObj, 'mouseout', handleCloseEvent);
			}
			
		}
		
		// register mouse coordinates
		Event.observe(document.body, 'mousemove', storeMousePosition);
		
	}
	
}

// Function: To save the x and y position of the mouse pointer
function storeMousePosition(e) {
    
	//Prevent exceptions when page is still initializing
	if(Event.pointerX) {
		
		mouseX = Event.pointerX(e);
        mouseY = Event.pointerY(e);
		
    }
	
}

// Function: Will be called when the mouse is moving out the "continents_clicks"
function handleCloseEvent(e) {
    
	// When timeout allready has been set, clear it
	if(timeout != null) {
		clearTimeout(timeout);
	}
	
	// Register a timeout, for really closing the popup div
    timeout = setTimeout(handleCloseEvent_callback, globalTimeout);
    
	// Stop the event
	Event.stop(e);
}

// Function: Will be called after a couple of (milli)seconds in handleCloseEvent() function
function handleCloseEvent_callback() {
	
	// Search for divs inside 
	var columns = $("columns");
	var columnChilds = columns.getElementsByTagName('*');
	
	// Walking trough all inside divs
	for(var i=0; i<columnChilds.length; i++) {
		
		// Check if the tag has the class name "dropdown"
		if(columnChilds[i].className == "dropdown") {
			
			var splits = columnChilds[i].id.split("_");
			var content_id = splits[0] + "_dropdown";
			
			// When mouse is not inside element
			if( !Position.within($(content_id), mouseX, mouseY)
				&& !Position.within($(columnChilds[i].id), mouseX, mouseY)
				) {
				
				closeDropdown($(content_id));  
			}
		}
		
	}
	
}


/*************************************/

var prevDropdown = null;

// Function to open a dropdown box
function openDropdown(name) {
	
	// make object from elements
	var parentElement = $(name + "_keuze");
	var element = $(name + "_dropdown");
	
	// when element is hided, open it
	if(element.style.display == "none") {
		// positionate element with respect to the selector element
		var topPos = parentElement.offsetTop;
		element.style.top = topPos + 19 + 120 + "px";
		
		// hide previously dropdown
		if(prevDropdown != null) {
			var prevObj = $(prevDropdown);
			prevObj.style.display = "none";
		}
		
		// show dropdown
		Effect.Appear(element.id, { duration: globalDuration });
		
		// remember dropwdown id for closing it directly
		prevDropdown = name + "_dropdown";
	}
	else {
		// when second click on a dropdown selector, hide dropdown
		Effect.Fade(element.id, { duration: globalDuration });
	}
}

// Function to close elements
function closeDropdown(div) {
	
	// call back for hide insided div
	var callBack = function() {
		div.style.display = "none";
	}
	
	// close div with some nice effect
	Effect.Fade(div.id, { duration: globalDuration, afterFinish: callBack });
}