/**blau
 * 
 */
if (undefined == window.console || undefined == window.console.log) {
	window.console = {
		log : function(message) {/* alert(message); */
		}
	};
}

/**
 * 
 */
$(document).ready(function() {
	initt();
});

/**
 * array selected column menu items. used for blue background
 */
var hover_col_menu_items = [];
var test_count = 0;
var alertTimerId = 0;
var root;
var bg_color = [ "003", "FC0", "CCC", "CC0", "bad7f5", "F90" ];
var language = "nl";
var colorbarlength = [];
var colorbarspacing = [];

/**
 * initialize
 */
function initt() {
	try{
		language = document.getElementById("languagecorrection").className;
	}catch(err){
		language = "nl";
	}

	// active state from breadcrumb
	menuActiveState();

	// build main menu
	mainMenu();

	// fade handlers menu items
	fadeOutMenu();

	// initial state activated menu item
	RenderCurrentSelectedTree();

	// fix header elements
	replaceMenuColor();

	// font replace
	Cufon.replace('.mainmenuitem', { hover : 'true', fontFamily: 'Futura LT'});
	Cufon.replace('.mainmenuitem_EN', { hover : 'true', fontFamily: 'Futura LT'});
	Cufon.replace('.cfn',{ fontFamily: 'DTLDocumentaST'});
	Cufon.replace('.intro',{ fontFamily: 'FuturaDemiATT'});
	Cufon.replace('H3', { fontFamily: 'FuturaDemiATT', letterSpacing:'0px'});
	
	Cufon.CSS.ready(function() {
		//calculate width
		var menu_nodes = getNodes(document.getElementById('root_menu_ul'), 0);
		for (var i in menu_nodes){
			if (undefined !== menu_nodes[i].id
			&& menu_nodes[i].className == "menuitem a_level_1") {
				var w = $("#_" + menu_nodes[i].id).width() + (35*2);
				colorbarlength.push(w);
				
				//console.log ("spacing: " + );				
				colorbarspacing.push(($("#_" + menu_nodes[i].id).parent().width() - w));

			}
		}		
	})
	
	$('H3').css("visibility", "visible");
	$('.intro').css("visibility", "visible");
	$('.cfn').css("visibility", "visible");
	$('.mainmenuitem').css("visibility", "visible");
}

/**
 * Selected menu items
 */
function menuActiveState() {
	$('.menu_col').fadeOut('slow');
	var crumb = [];
	var crumbArray = [];

	// get the href elements in the crumb array
	for ( var i = 0; i < 5; i++) {
		try {
			crumb[i] = document.getElementById('crumb' + i).href;
		} catch (err) {
			// console.log(err);
		}
	}

	// process the retrieved hrefs from crumb array
	var j = 0;
	for ( var i in crumb) {
		// split (explode) the url string into array
		try {
			var brokenString = crumb[i].split("/");
		} catch (err) {
			console.log("probably the root : " + err);
		}

		// get the latest string from the array ( that's the normalized URL )
		try {
			var lastString = brokenString.length;
			var normalized = brokenString[lastString - 1];
		} catch (err) {
			// return; // must throw exception to render alternative menu
		}

		// put the normalized URL's into array
		normalized = normalized.toLowerCase();
		if (normalized != "home") {
			j++;
			crumbArray[i] = normalized;
		}
	}

	// the root in string
	root = (crumbArray[j - 1]);

	// reverse the array to render properly
	crumbArray.reverse();

	// return when breadcrumb is empty. There is nothing to render
	try {
		if (crumbArray.length == 0)
			return;
	} catch (err) {
		// console.log(err);
		return;
	}

	// expand menu's with the selected items
	// TODO language selector!!
	for ( var i in crumbArray) {
		var l = crumbArray[i].replace(/[+]/g, "-");
		var l = l.replace("---", "-"); // fix for when string contains an -
		var lang = "-" + language;
		var s = l + lang;
		s = s.toLowerCase();
		try {
			var g = parseInt(i) + 1;
			var lastItem = (i == crumbArray.length) ? false : true;
			var test = get_arrow(s);
			expandMenu(s, g, test);
		} catch (err) {
			console.log(s + " - " + g + " - " + test + " - " + err);
		}
	}
	// console.log("---root-------------");
	// console.log(crumbArray[0]);
}

/**
 * create main menu divs
 */
function mainMenu() {
	var menu_nodes = getNodes(document.getElementById('root_menu_ul'), 0);
	var div_str = String();
	var activated = String();
	var j = 1;
	
	var url = location.href;
	//alert (url.indexOf('/en/'));
	
	var menufixwidth = "";
	
	if (url.indexOf('/en/') != -1){
		menufixwidth = "_EN";
	}
	
	div_str = "<table style=\"width:965px\"><tr>";
	
	for ( var i in menu_nodes) {
		if (undefined !== menu_nodes[i].id
		&& menu_nodes[i].className == "menuitem a_level_1") {
			var link = menu_nodes[i].href;
			var li = location.href;
			var brokenString = li.split("/");
			var page = root + "-" + language;

			activated = (menu_nodes[i].id == page.toLowerCase()) ? "activated"
					: "";

			div_str += "<td><a id=\"_" + menu_nodes[i].id + "\" href=\"" + link
					+ "\" class='mainmenuitem" + menufixwidth + "  " + activated + "' "
					+ "onmouseover=\"expandMenu('" + menu_nodes[i].id
					+ "', 1, 1, " + j + ")\" >" + menu_nodes[i].innerHTML
					+ "</a></td>";
			j++;
			// console.log("activated : " + activated);
			// console.log(menu_nodes[i].id + " - " + page.toLowerCase());
		}
	}

	div_str += "</td></table>";
	
	test_count++;
	if (test_count == 1){
		$(div_str).appendTo("#main");
	
		/*for (var i in menu_nodes){
			if (undefined !== menu_nodes[i].id
			&& menu_nodes[i].className == "menuitem a_level_1") {
				var w = $("#_" + menu_nodes[i].id).width();

				console.log ("liner: " + menu_nodes[i].id+ " : "+w);
				console.log ("parent: " + $("#_" + menu_nodes[i].id).width());

				colorbarlength.push(w);
			}
		}*/
	}
}

/**
 * expanding column & sub menu's
 * 
 * @param id
 * @param lvl
 * @param has_childs
 * @param hascolor
 */
function expandMenu(id, lvl, has_childs, hascolor) {
	lineColor("_" + id, hascolor);
	
	// clear all columns when clicked from main menu
	for ( var i = 0; i <= 4; i++)
		if (i >= lvl)
			$("#col" + i).html("");

	// get child menu_nodes from this node
	// @todo we don't need the childs children nodes, fix that in getNodes to
	// max 1 level
	var parent_node = document.getElementById(id).parentNode;
	var menu_nodes = getNodes(parent_node, 0);
	// alert (menu_nodes);
	var str = "menuitem a_level_" + String(lvl + 1);
	var div_str = String();
	var el_arrow = String();
	var menu_node_id = false;

	for ( var i in menu_nodes) {
		if (undefined !== menu_nodes[i].id && menu_nodes[i].className == str) {
			var link = menu_nodes[i].href;
			menu_node_id = menu_nodes[i].id;
			el_arrow = get_arrow(menu_node_id);

			var arrow = (el_arrow) ? "<span class=\"menu_arrow\"></span>" : "";
			var hasChildren = (el_arrow) ? " child" : "";

			// push menu items into column
			div_str += "" + "<a href=\"" + link + "\" class=\"menuitem"
					+ hasChildren + "\"" + " onmouseover=\"expandMenu('"
					+ menu_node_id + "', " + (lvl + 1) + ", '" + el_arrow
					+ "' , " + hascolor + " ) \"" + " id=\"a_"
					+ menu_node_id + "\"" + ">"
					+ "<span class=\"start_arrow\"></span>"
					+ menu_nodes[i].innerHTML + "</a>"
		}
	}

	if (div_str != "") {
		div_str = "<div class=\"topshadow\"></div>" + div_str;
		div_str += "<div class=\"menu_item_color\"></div><div class=\"menu_item_shadow\"></div>";
	}

	// console.log(has_childs);
	// console.log(div_str);

	// first level ( main menu items )
	if (lvl == 1)
		hover_col_menu_items = [];

	// append the generated div to the right column
	$(div_str).appendTo("#col" + lvl);

	// initialize active state
	hover_items(document.getElementById(id), lvl, hasChildren);

	// render bottom colomn menu color
	if (hascolor)
		$(".menu_item_color").css("backgroundColor", "#" + bg_color[hascolor - 1]);
		$("#linecolor").css("backgroundColor", "#" + bg_color[hascolor - 1]);
}

/**
 * hover items selected nodes (make them blue) on initial state
 * 
 * @param me
 * @param lvl
 */
function hover_items(me, lvl, hasChildren) {
	el_arrow = get_arrow(me.id);

	// selected nodes have a blue background
	if (lvl == 1)
		hover_col_menu_items = hover_col_menu_items.splice(1, 1);
	hover_col_menu_items[lvl] = me.id;

	// console.log("--RenderCurrentSelectedTree---------");
	// console.log("input : " + me + " - " + lvl + " - " + hasChildren + " - " +
	// me.id)
}

/**
 * render the selected items
 */
function RenderCurrentSelectedTree() {
	// console.log("--RenderCurrentSelectedTree---------");
	for ( var i in hover_col_menu_items) {
		var hasChildren = false;
		try {
			var hasChildren = get_arrow(hover_col_menu_items[i]);
		} catch (err) {
		}

		if (hasChildren) {
			$("#a_" + hover_col_menu_items[i]).css("background-image",
					"url('/images/menu_item_hover.gif')");
		} else {
			$("#a_" + hover_col_menu_items[i]).css("background-image", "none");
		}

		$("#a_" + hover_col_menu_items[i]).css("background-color", "#009cd6");
		$("#a_" + hover_col_menu_items[i]).css("color", "#fff");

		// console.log("#"+hover_col_menu_items[i] + " - " + i + " : has
		// children = " + hasChildren);
	}
}

/**
 * get arrow
 * 
 * @param node_id
 * @returns
 */
function get_arrow(node_id) {
	// count amount of childnodes
	var child_amount = getNodes(document.getElementById(node_id).parentNode, 1);

	// console.log(node_id);
	// console.log("--getArrow---------");
	// console.log(child_amount.length > 1);

	// arrow or not to arrow
	return (child_amount.length > 1) ? true : false;
};

// DOM tree nodes
// /////////////////////////////////////////////////////////////////////////////////////////
/**
 * get all nodes
 * 
 * @param obj
 * @param lvl
 * @returns {Array}
 */
function getNodes(obj, lvl) {
	var results = [];
	try {
		test = obj.childNodes.length;
	} catch (err) {
		// return false;
	}

	try{
		for ( var i = 0; i < obj.childNodes.length; i++) {
			var tgNm = obj.childNodes[i].tagName ? obj.childNodes[i].tagName
					.toUpperCase() : "";
	
			// filter on element type (DOM nodes)
			if (tgNm == "OL" || tgNm == "UL" || tgNm == "LI" || tgNm == "A") {
				if (tgNm != "OL" && tgNm != "UL" && tgNm != "LI")
					results[results.length] = obj.childNodes[i];
				results = results.concat(getNodes(obj.childNodes[i], lvl));
			}
		}
	}catch(error){
		
	}
	
	return results;
}

// visual effects
// ////////////////////////////////////////////////////////////////////////////////////

/**
 * fade in out eventhandlers for menu columns
 */
function fadeOutMenu() {
	/*
	$("#container").mouseenter(function() {
		if (alertTimerId)
			clearTimeout(alertTimerId);
		alertTimerId = setTimeout(fadeOutM, 2500);
	});
	*/

	$(".menu_col").mouseleave(function() {
		if (alertTimerId) clearTimeout(alertTimerId);
		alertTimerId = setTimeout(fadeOutM, 2500);
	});

	$("#main").mouseleave(function() {
		if (alertTimerId) clearTimeout(alertTimerId);
		alertTimerId = setTimeout(fadeOutM, 2500);
	});	

	$(".menu_col").mouseenter(function() {
		clearTimeout(alertTimerId);
		fadeInM();
	});	
	
	$("#main").mouseenter(function() {
		clearTimeout(alertTimerId);
		fadeInM();
	});
	
}

/** fade out effect */
function fadeOutM() {
	$('.menu_col').fadeOut('slow');
	$('#linecolor').fadeOut('slow');
}

/** fade in effect */
function fadeInM() {
	$('.menu_col').fadeIn('fast');
	$('#linecolor').fadeIn('slow');
}

/**
 * replaces background header image
 * 
 * @todo replace color for background images
 * @todo it's pretty static atm. Could by dynamic
 * 
 * var bg_color = [ "003", "FC0", "CCC", "CC0", "09C", "F90" ];
 * 
 */
function replaceMenuColor() {
	var bg = "";
	switch (root) {
	case "nieuws":
	case "news":
		bg = bg_color[0];
		break;
	case "aanleg":
	case "construction":
		bg = bg_color[1];
		break;
	case "economie":
	case "economy":
		bg = bg_color[2];
		break;
	case "duurzaamheid":
	case "sustainability":
		bg = bg_color[3];
		break;
	case "project":
		bg = bg_color[4];
		break;
	case "futureland":
		bg = bg_color[5];
		break;
	default:
		bg = "09c";
		break;
	}

	// puma ID = 93
	// futureland ID = 25 -> oranje
	

	var gradient_image = $("#backgroundimage").attr("class");
	if (gradient_image == "")
		gradient_image = 'blauw_oud.jpg';

	$(".menu_item_color").css("backgroundColor", "#" + bg);

	try{
		if (parentId == 93){
			bg = "bad7f5";
		}
		
		if (parentId == 25){
			bg = "F90";
		}
	}catch(error){
		
	}
	
	
	/**
	$(".hdr").css("background-image", "url(/images/gradients/" + gradient_image + ")");
	$(".hdr").css("background-color", "#" + bg);
	*/
	
	$("#payofftransparant").css("background-color", "#" + bg);
	$("#linecolor").css("background-color", "#" + bg);

	// console.log(root + "-" + bg);
	// console.log("---replaceMenuColor-------------");
	// console.log(root + " " + bg);
}



function lineColor(id, k){

	var url = location.href;
	//alert (url.indexOf('/en/'));
	
	var menuLengthFix = 0;
	
	if (url.indexOf('/en/') != -1){
		menuLengthFix = 10;
	}
	
	
	console.log ("------------------------------------");
	
	var sum_width = 0//colorbarlength[0] + 68;
	var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
	
	var ie7 = navigator.appVersion;
	ie7 = ie7.search("MSIE 7.0");
	
	for (var i = 0; i < k; i++){
		if(colorbarspacing[i - 1] == undefined){
			spacing = 0;
		}else{
			spacing = colorbarspacing[i-1];	
		}
		sum_width = (sum_width + colorbarlength[i] + spacing);
	}
	
		
	
	var offset = $("#"+id).offset();
	
	console.log("offset  = " + offset);
	console.log("offset from " + id);
	
	if(ie7 != "-1"){
		sum_width += (k * 2);
		try{
			//document.getElementById('linecolor').style.width = ((offset.left + $("#"+id).width())-80) + "px";
			document.getElementById('linecolor').style.width = (sum_width - menuLengthFix) + "px";
			//console.log (((offset.left + $("#"+id).width())-80));
		}catch(error){
			//console.log ("--");
			//console.log (error);
			document.getElementById('linecolor').style.width = (sum_width - menuLengthFix) + "px";
		}
	}else{	
		document.getElementById('linecolor').style.width = (sum_width - menuLengthFix) + "px";
	}
}





function posLeft(eElement){
	var nLeftPos = eElement.offsetLeft; 
	var eParElement = eElement.offsetParent; 
	while (eParElement != null)
	{ 
		nLeftPos += eParElement.offsetLeft; 
		eParElement = eParElement.offsetParent; 
	}
	return nLeftPos; 
}