YAHOO.si.TopNavBar = function()
{
	this.controller = YAHOO.si.Controller;
	this.menudata = [];
	this.selectedItemId = "";
	this.init = function()
	{
		try
		{
			this.menuBar = new YAHOO.widget.MenuBar("topnavi", {
																 autosubmenudisplay: true,
																 //position:"dynamic",
			                                                     hidedelay: 50000,
			                                                     submenuhidedelay:1000,
			                                                     shadow:true});
			this.menuBar.mouseOutEvent.subscribe(function()
			{
				var items = this.menuBar.getItems();
				for(var i = 0 ; i < items.length;i++)
				{
					if(items[i].id === this.selectedItemId)
					{
						items[i].cfg.setProperty("selected",true);
					}
				}
			},this,true);
			this.populate();
		}
		catch(e)
		{
			YAHOO.si.handleErrors(e);
		}		
	};
	this.handleClick = function(type,ev,item)
	{
		try
		{
	        if(item.path.substring(item.path.length - 13)=="/sitemap.json")
	        {
	        	//We need to generate a sitemap from the /pagedata/rendersitemap.js file.
	        	//Don't navigate using the pageid 
	        	YAHOO.si.HistoryManager.navigate("pageid",YAHOO.si.Sitemap.pageid);
	        }
	        else
	        {
				var language = this.controller.historyManager.language;
				var pageid = urllookup[item.path].pageid;
				var areaid =urllookup[item.path].areaid;
				var state = {"language":language,"areaid":areaid,"pageid":pageid};
				YAHOO.si.HistoryManager.multiNavigate(state);
				this.controller.setLeftMenuSelected(item.path);
				this.setSelected(item.path);
	        }
		}
		catch(e)
		{
			e.contextMessage = "url for this item:" + item.path;
			YAHOO.si.handleErrors(e);
		}
	};
	this.setWidths = function()
	{
	    var itemCount = this.menuBar.getItems().length;
	    var total = 0;
	    var targetWidth = 690;
	    var itemWidth = 0;
	    var i = 0;
	    var element = {};
	    for( i = 0; i <itemCount;i++)
	    {
	    	 element = this.menuBar.getItem(i).element;
	    	total += element.clientWidth;
	    }
	    for( i = 0; i < itemCount;i++)
	    {
	    	 element = this.menuBar.getItem(i).element;
	    	 var param = element.clientWidth + ( (targetWidth-total) / itemCount);
	    	itemWidth = parseInt(param,10 );
	    	element.style.width = itemWidth + "px";
	    }
	};
	var index = 0;
	//This is a recursive loop through all the topnavbardata for the specified 
	//language and area.  It adds onclick attributes and removes url attributes 
	//before the menubar render method is called.
	//This allows me to avoid complicated syntax like: oMenuBar.getItem(i).cfg.setProperty
	
	//You have to ensure every item in a menu is unique.
	//The id and dbid are very useful properties and I can just tack a unique index number
	//on the end of id.  I extract pageid and areaid from the array generated from splitting
	//the id for a menu item, so it is easy to ignore the unique index number with existing
	//code.
    this.addHandlers = function(itemdata)
    {
		try
		{
			for(var i = 0 ; i < itemdata.length ; i++)
			{
				//We have to remove refs to the url property in the actual menu item
				//because it triggers the default link event.  We need to stop the default.
				//This uses a custom event so I can't stop the default event. The only
				//way is to remove url and replace it with a path property.
				if(itemdata[i].url)
				{
					itemdata[i].path = itemdata[i].url;
					//I tried null but the only thing that works is undefined.
					itemdata[i].url = undefined;
				}
				itemdata[i].selected = false;
				var nodetype = itemdata[i].nodetype;
				//The unique index will be ignored by methods which
				//extract areaid or pageid from the menuitem id.
				itemdata[i].id = itemdata[i].id + "-" + index;
				index++;
				if(nodetype!="4")
				{
					//This ended up adding default.json each time
					if(itemdata[i].path.substring(itemdata[i].path.length - 13)!="/default.json")
					{
						itemdata[i].path = itemdata[i].path + "/default.json";       			
					}	
				}
				var o = itemdata[i];
				var f = this.handleClick;
				itemdata[i].onclick = {fn:f,obj:o,scope:this};
				if(itemdata[i].submenu)
				{
					//Don't forget that a submenu.id needs to be unique too, so
					//add the unique index here.
					itemdata[i].submenu.id = itemdata[i].submenu.id + "-" + index;
			    	index++;
			    	if(itemdata[i].submenu.itemdata)
			    	{
			            this.addHandlers(itemdata[i].submenu.itemdata);            		
			    	}
				}	 
			}
    	}
    	catch(e)
    	{
    		throw e;
    	}
	};
	this.populate = function()
	{
		var areaid = this.controller.historyManager.areaid;
		var language =  this.controller.historyManager.language;
		try
		{
			this.itemdata = topnavbardata[language][areaid].menudata;
			this.addHandlers(this.itemdata);
			this.menuBar.addItems(this.itemdata);
			this.menuBar.renderEvent.subscribe( function()
			{	
				//alert("fired");
				this.setWidths();			
			},this,true);
		    this.menuBar.render("topnaviholder");		    
		}
		catch(e)
		{
			YAHOO.si.handleErrors(e);
		}
		return;
	};
	/**
	 * Can't quite understand this. Anyway just make sure that you pass the element id where you want
	 * to render the menubar to the render method not to the constsructor.
	 * From the documentation: 
	      Instantiate a Menu:  The first argument passed to the   
	      constructor is the id of the element in the page   
	      representing the Menu; the second is an object literal   
	      of configuration properties.  
	 * 
	 */
	this.repaint = function()
	{
		try
		{
		    this.menuBar.clearContent();
		    var ul = document.createElement("ul");
		    ul.id = "menulisttag";
		    ul.className ="first-of-type";
		    this.menuBar.appendToBody(ul);
		    this.menuBar.init("topnavi", { autosubmenudisplay:true,
	                                     hidedelay: 50000,
	                                     submenuhidedelay:1000,
			                           shadow:true});
			this.populate(this.menuBar); 
		    /*
		    */
		}
		catch(e)
		{
			YAHOO.si.handleErrors(e);
		}
	};
	this.setSelected = function(url)
	{
		var items = this.itemdata;
		var msg = "";
		var item = {};
		for(var i = 0; i < items.length ; i++)
		{
			if(items[i].path == url)
			{
				item = this.menuBar.getItem(i);
				item.cfg.setProperty("selected",true);
				this.selectedItemId = item.id;
			}
			else
			{
				item = this.menuBar.getItem(i);
				item.cfg.setProperty("selected",false);				
			}
		}
		/*
		var dump = document.getElementById("dump");
		dump.innerHTML = msg;
		for(var i = 0 ; i < items.length;i++)
		{
			
			if(items[i].id === this.selectedItemId)
			{
				items[i].cfg.setProperty("selected",true);
			}
		}	
		*/ 	
	};
/*
 From the forum
It is really difficult to help if you cannot provide any code to look
at. How are you putting each submenu together? You should start by
setting the "submenu" configuration property of each MenuItem to a Menu
instance that contains no MenuItems. Then add a "beforeShow" event
listener for that Menu, that makes the async request, gets the data,
calls the Menu's "addItems" method, calls the Menu's "render" method,
and finally unsubscribes the "beforeShow" event listener. That should
work. Let me know.
	*/ 
	this.toString = function()
	{
		return "YAHOO.si.topNavBar";
	};
};