/*Builds the top nav menu and handles the sliding. 
This is currently built against an animation function in slate_dom_lib.js, but
at some point, we'll probably want to implement JQuery
*/
var Menu = {};

//get the channels json object
Menu.getData = function()
{
	function initAjax(){var xmlHttp;try{xmlHttp = new XMLHttpRequest()}catch(e){try{xmlHttp=new ActiveXObjext('Msxml2.XMLHTTP');}catch(e){try{xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');}catch(e){alert('This site requires Ajax.');return false;}}}return xmlHttp;}
	var httpReq = initAjax();
	httpReq.open("GET","/media/files/channels.js",false);
	httpReq.send(null);
	Menu.json = eval('(' + httpReq.responseText + ')');
	Menu.buildHeader();
}

//render the channels
Menu.buildHeader = function()
{
	var header = document.getElementById("channels_header");
	var channels = Menu.json.channels;
	var a;
	var div;
	
	for(var i=0; i<channels.length; i++)
	{
		a = SlateDom.newElement("a", channels[i].name, channels[i].name);		
		a.href = "/channel/" + channels[i].href;
		header.appendChild(a);

		SlateDom.addListener(a,"mouseover",Menu.buildMenu)

		if(i<channels.length-1)
		{
			div = SlateDom.newElement("div", "|", null, "channels_head_divider");
			header.appendChild(div);
		}
	}
}

Menu.showChannels = function(evt)
{
	var menu = document.getElementById("channels_menu");
	var dur = .25;

	if(SlateDom.getCurrentStyle(menu,"height")=="0px")
	{
		SlateDom.tweenProperty(menu,"height","px",0,123,dur);
		SlateDom.tweenProperty(menu,"paddingTop","px",0,10,dur);
		SlateDom.tweenProperty("channels_window","top","px",-123,0,dur);
		document.getElementById("tab_left").id = "tab_left_active";		
		SlateDom.getTarget(evt).className = "tab1_active";
		//dispatch event on first channel item
		var firstChannel = document.getElementById("channels_header").getElementsByTagName("a")[0]
		SlateDom.dispatchEvent(firstChannel,"mouseover");
	}
	else
	{
		SlateDom.tweenProperty(menu,"height","px",123,0,dur);
		SlateDom.tweenProperty(menu,"paddingTop","px",10,0,dur);
		SlateDom.tweenProperty("channels_window","top","px",0,-123,dur);
		document.getElementById("tab_left_active").id = "tab_left";		
		SlateDom.getTarget(evt).className = "tab1";		
	}
}

Menu.buildMenu = function(evt)
{	
	var currentChannel = SlateDom.getTarget(evt).id;
	var channels = Menu.json.channels;
	var body = document.getElementById("channels_body");
	body.innerHTML = "";
	activateLink(currentChannel);
	
	for(var i=0; i<channels.length; i++)
	{
		if(channels[i].name == currentChannel)
		{
			for(var j=0; j<channels[i].subchannels.length;j++)
			{
				if(j % 3 == 0)
				{
					var group = SlateDom.newElement("div",null,null,"channels_item_group");
					body.appendChild(group);
					if(j<channels[i].subchannels.length-3)
					{					
						var divider = SlateDom.newElement("div",null,null,"channels_item_divider")
						body.appendChild(divider);
					}
				}
				var item = SlateDom.newElement("a",channels[i].subchannels[j].name,null,"channels_item_link");
				item.href = "/channel/" + channels[i].subchannels[j].href;
				group.appendChild(item);
			}
			break;
		}
	}

	function activateLink(id)
	{	
		var link = document.getElementById(id);
		var headers = document.getElementById("channels_header").getElementsByTagName("a");
		for (var i=0;i<headers.length;i++)
		{
			headers[i].style.color = "#ececec"
		}
		link.style.color = "#e06";
	}

}