var navArray = [];
var navBarObj = document.getElementById("nav_bar");
var jsonMenu = [];

function renderMenus() {
	var jsonString = document.getElementById("jsonMenu").value;
	jsonMenu = JSON.parse(jsonString);
	
	if (jsonMenu) {
		var menuObj = document.getElementById("menu");
		var mainString = "";
		for ( var mainMenu in jsonMenu ) {
			
			if ( jsonMenu[mainMenu].length > 0 ) {
				mainString += "<div id=\"mm_"+mainMenu+"\" class=\"menu menu-shadow\" onmouseover=\"megaHoverIn('"+mainMenu+"')\" onmouseout=\"megaHoverOut('"+mainMenu+"')\"><div class=\"menu-box\">";
					
				var l2String = "";
				for ( var i=0; i<jsonMenu[mainMenu].length; i++ ) {
					if ( i < 3 ) {
						l2String += "<div class=\"menu-col\">";
					} else {
						l2String += "<div class=\"menu-col menu-dotted\">";
					}
						l2String += "<a href=\""+jsonMenu[mainMenu][i]["url"]+"\">"+jsonMenu[mainMenu][i]["name"]+"</a>";
						
						if ( jsonMenu[mainMenu][i]["subchannels"].length > 0 ) {
							var l3String = "";
							l3String += "<ul>";
							
							for ( var j=0; j<jsonMenu[mainMenu][i]["subchannels"].length; j++ ) {
								l3String += "<li><a href=\""+jsonMenu[mainMenu][i]["subchannels"][j]["url"]+"\">"+jsonMenu[mainMenu][i]["subchannels"][j]["name"]+"</a></li>";
							}
							
							l3String += "</ul>";
							l2String += l3String;
						}
					l2String += "</div>";
						
					if ( (i%3) == 2 && i<jsonMenu[mainMenu].length-1 ) {
						l2String += "<div class=\"menu-line\"><!-- dotted line --></div>";
					}
					
				}
				mainString += l2String;
				mainString += "</div></div>";	
			}
		}
		menuObj.innerHTML = mainString;
		renderShadow();
		
	} else {
		alert("Error in JSON Format");
	}
}

renderMenus();