var MainNavbar = Class.create();

MainNavbar.prototype =
{
  initialize: function(el, currentWebApp, currentActionId, updateUrl, loginUrl, logoutUrl)
  {
  	this.el = $(el);
		this.mainContentEl = this.el.down("div.mainBar td.content");
	  this.subContentEl = this.el.down("div.subBar td.content");
		this.currentWebApp = $(currentWebApp);
		this.currentActionId = currentActionId;
		this.updateUrl = updateUrl;
		this.loginUrl = loginUrl;
		this.logoutUrl = logoutUrl;

	  // Jump out if we don't have a navbar
	  if (this.mainContentEl == null || this.subContentEl == null)
	    return;

		this.initMainButtons();
	},
	initMainButtons: function()
	{
	  var navbarButtons = this.mainContentEl.getElementsBySelector("a");
	  var navbarBtn, i, count = navbarButtons.length;
	  var leftCell = this.mainContentEl.previous();
	  var navBtnIsCurWebapp = false;

	  leftCell.setStyle({cursor: "pointer"});

		if ((count > 0) && navbarButtons[0].readAttribute("id") != this.currentWebApp)
		{
	    Event.observe(leftCell, "mouseover", function(evt)
	                                          {
	                                            var el = Event.findElement(evt, "td");
	                                            el.setStyle({backgroundImage: "url(/cache/cp/1201819920000/coupon/static/images/mainNavbar/navbarLeftSelected.gif)"});
	                                            el = el.next().down();
	                                            el.setStyle({background: "url(/cache/cp/1201819920000/coupon/static/images/mainNavbar/navbarButonSelectedBg.gif) 0 0 repeat-x;"} );
	                                          }
	    );

	    Event.observe(leftCell, "mouseout", function(evt)
	                                         {
	                                           var el = Event.findElement(evt, "td");
	                                           el.setStyle({backgroundImage: "url(/cache/cp/1201819920000/coupon/static/images/mainNavbar/navbarLeft.gif)"});
	                                           el = el.next().down();
	                                           el.setStyle({background: ""} );
	                                         }
	    );
		}


	  for (i = 0; i < count; i++)
	  {
	    navbarBtn = navbarButtons[i];
			navBtnIsCurWebapp = navbarButtons[i] == this.currentWebApp;

	    if (navBtnIsCurWebapp)
	    {
	    	var offsetAmt = document.all ? 18 : 17;
	    	var subTable = this.el.down("div.subBar table");
	      var offset1 = Position.cumulativeOffset(navbarBtn);
	      var offset2 = Position.cumulativeOffset(subTable);
	      var leftPos = (offset1[0] - offset2[0] + offsetAmt) + "px";
	      //alert(navbarBtn.getStyle("left"));
	      //alert(this.el.down("div.subBar").);
	      //Position.absolutize(this.el.down("div.subBar table"));
	      subTable.setStyle({left: leftPos});
	    }

	    if (i == 0)
	    {
	      navbarBtn.setAttribute("first", "true");
	      if (document.all)
	        Element.setStyle(navbarBtn, {left: "0px"});
	    }
	    else if (i == count - 1)
	    {
	      return;
	    }

			if (navBtnIsCurWebapp)
				continue;

	    Event.observe(navbarBtn, "mouseover", function(evt)
	                                          {
	                                            var el = Event.findElement(evt, "a");
	                                            el.setStyle({background: "url(/cache/cp/1201819920000/coupon/static/images/mainNavbar/navbarButonSelectedBg.gif) 0 0 repeat-x;"} );

	                                            if (el.getAttribute("first"))
	                                              el.up().previous().setStyle({backgroundImage: "url(/cache/cp/1201819920000/coupon/static/images/mainNavbar/navbarLeftSelected.gif)"});
	                                          }
	    );

	    Event.observe(navbarBtn, "mouseout", function(evt)
	                                         {
	                                           var el = Event.findElement(evt, "a");
	                                           el.setStyle({background: ""} );

	                                           if (el.getAttribute("first"))
	                                             el.up().previous().setStyle({backgroundImage: "url(/cache/cp/1201819920000/coupon/static/images/mainNavbar/navbarLeft.gif)"});
	                                         }
	    );
	  }
	},
	updateFromServer: function()
	{
		new Ajax.Request(this.updateUrl + "/" + this.currentActionId, {
			method: "get",
			onSuccess: this.onUpdateSuccess.bind(this)
		});
	},
	onUpdateSuccess: function(transport)
	{
		var json;

    try
    {
      json = eval("(" + transport.responseText + ")");
    }
    catch(errMsg)
    {
      alert("An unexpected error has occurred retrieving your contacts.  Please try back again later.");
      return;
    }

		// They didn't give me back json I can interpret.  Do nothing.
		if (!json.navbarActionList)
		  return;

		this.updateLoginLink(json.authenticated);
		this.updateSubnav(json.navbarActionList);
	},
	updateLoginLink: function(authenticated)
	{
		var loginEl = $(loginMainNav);
		var loginHelp = (authenticated ? "Logout of application" : "Login to the application");

		loginEl.setAttribute("href", (authenticated ? this.logoutUrl : this.loginUrl))
		loginEl.setAttribute("alt", loginHelp);
		loginEl.setAttribute("title", loginHelp);
		loginEl.down().update((authenticated ? "Logout" : "Login"));
	},
	updateSubnav: function(actionList)
	{
		var i, count, action;
		var actionStr = "";

		if (!actionList)
		 return;

		count = actionList.length;
		for (i = 0; i < count; i++)
		{
			action = actionList[i];
			actionStr += '<a id="' + action.actionId + 'SubNav" href="' + action.url +
			             '" alt="' + action.hoverHelp  + '" title="' + action.hoverHelp  +
			             '"><span>' + action.caption + '</span></a>';
		}

		this.subContentEl.update(actionStr);
	}
}