var menus = ["showreel", "company", "service", "contact"];
var activeMenu = 0;
var contentsBase = "";

function initMenu()
{
	var txt = 	"";
	
	for(var i=0; i<menus.length; i++)
	{
		var active = "";

		if(i == activeMenu)
			active = "-active";

		var tmp = "<li><img id=\"tm_img_{idx}\" src=\"/images/topmenu/{title}{active}.jpg\"/ onmouseover=\"tm_menu_mouseOver({idx});\" onmouseout=\"tm_menu_mouseOut({idx});\" onclick=\"tm_menu_click({idx});\"></li>\n";

		tmp = tmp.replace(/{idx}/g, i);
		tmp = tmp.replace(/{title}/g, menus[i]);
		tmp = tmp.replace(/{active}/g, active);

		txt += tmp;
	}

	$("topmenu").innerHTML = txt;

	initBottomMenu();
}

function initBottomMenu()
{
	var txt = 	"<li></li>";
	
	for(var i=0; i<menus.length; i++)
	{
		var active = "";

		var tmp = "<li><a href='#' onclick=\"tm_menu_click({idx});\">{title}</a></li>\n";

		tmp = tmp.replace(/{idx}/g, i);
		tmp = tmp.replace(/{title}/g, menus[i]);

		if(i < menus.length-1)
			tmp += "<li>|</li>";
		txt += tmp;
	}

	$("bottomMenu").innerHTML = txt;
}

function tm_menu_mouseOver(idx)
{
	var id = "tm_img_"+idx;
	
	if(activeMenu != idx)
		$(id).src = "/images/topmenu/"+menus[idx]+"-active.jpg";
}

function tm_menu_mouseOut(idx)
{
	var id = "tm_img_"+idx;

	if(activeMenu != idx)
		$(id).src = "/images/topmenu/"+menus[idx]+".jpg";
}

function tm_menu_click(idx)
{
	if(activeMenu == idx)	return;

	var old = activeMenu;
	var oldid = "tm_img_"+old;
	var newid = "tm_img_"+idx;

	activeMenu = idx;

	$(oldid).src = "/images/topmenu/"+menus[old]+".jpg";
	$(newid).src = "/images/topmenu/"+menus[idx]+"-active.jpg";

	if(idx == 0)
	{
		loadProject(activeProject);
	}
	else
	{
		loadContentsBase();

		var loader = dhtmlxAjax.getSync(menus[idx]+".html");
		var txt = contentsBase.replace(/{contents}/g, loader.xmlDoc.responseText);
		$("viewArea").innerHTML = txt;
	}
}

function loadContentsBase()
{
	if(contentsBase == "")
	{
		var loader = dhtmlxAjax.getSync("/contentsContainer.html");

		contentsBase = loader.xmlDoc.responseText;
	}

}