Menu = Class.create();
Menu.prototype =
{
	initialize: function()
	{
		if ($("home-banner").visible())
			this.banner = true;
		else
			this.banner = false
		this.rollingOut = false;
		this.rollingOver = false;
		this.rolledIndex = -1;
		this.items = $$(".menu-title");
		this.subMenus = $$(".submenu-container");
		this.subTitles = $$(".submenu-title");
		this.verticals = $$(".menu-vertical");
		this.horizontals = $$(".menu-horizontal");
		this.currentIndex = -1;
		Cufon.now();
		for (i=0; i<this.items.length; i++)
		{
			this.items[i].observe("click", this.update.bind(this, i));
			$(this.items[i].parentNode).observe("mouseover", this.rollover.bind(this, i));
			$(this.items[i].parentNode).observe("mouseout", this.rollout.bind(this, i));
			if (this.items[i].hasClassName('current-id'))
			{
				$("menu-bar").setStyle({width: (this.items[i].getWidth() - 15)+"px", right: (document.viewport.getWidth() - this.items[i].cumulativeOffset().left - this.items[i].getWidth())+"px", background: this.items[i].readAttribute("colortag")});
				this.currentIndex = i;
			}
		}
		this.resize();
		Event.observe(window, "resize", this.resize.bind(this));
	},
	
	resize: function()
	{
		h = document.viewport.getHeight();
		if (h < 700)
		{
			s = 0.3*h-80;
			$("menu").setStyle({ top: parseInt(s-5)+"px" });
			for (i=0; i<this.items.length; i++)
			{
				this.items[i].setStyle({ fontSize: parseInt(0.02*h)+"px" });
			}
			for (i=0; i<this.subMenus.length; i++)
				this.subMenus[i].setStyle({ padding: parseInt(2.5*h/700)+"px 0", top: parseInt(this.items.first().getHeight() + 24)+"px", height: "auto" });
			for (i=0; i<this.subTitles.length; i++)
				this.subTitles[i].setStyle({ lineHeight: parseInt(12*h/700)+"px", fontSize: parseInt(12*h/700)+"px" });
			for (i=0; i<this.verticals.length; i++)
			{
				this.verticals[i].setStyle({ height: parseInt(s-25)+"px", width: parseInt((s-25)*70/105)+"px" });
				this.horizontals[i].setStyle({ height: parseInt(s-25)+"px", width: parseInt((s-25)*290/105)+"px", left: parseInt((s-25)*70/105+5)+"px" });
			}
		}
		else
		{
			for (i=0; i<this.items.length; i++)
			{
				this.items[i].setStyle({ fontSize: "14px" });
			}
			for (i=0; i<this.subMenus.length; i++)
				this.subMenus[i].setStyle({ paddingTop: "5px", top: "40px", height: "17px" });
			for (i=0; i<this.subTitles.length; i++)
				this.subTitles[i].setStyle({ fontSize: "12px" });
			for (i=0; i<this.verticals.length; i++)
			{
				this.verticals[i].setStyle({ height: "105px", width: "70px" });
				this.horizontals[i].setStyle({ height: "105px", width: "290px", left: "75px" });
			}
			$("menu").setStyle({ top: "125px" });
		}
		Cufon.refresh();
		l = this.items.first().cumulativeOffset().left;
		if (l < 335)
			$("menu-images").setStyle({ left: "350px" });
		else
			$("menu-images").setStyle({ left: (l + 15)+"px" });
		if (document.viewport.getWidth() < 830)
			$("menu-images").hide();
		else
			$("menu-images").show();
		fstyle = parseInt(this.items[0].getStyle('font-size')) - 1;
		fwidth = 80;
		for (i=0; i<this.items.length; i++)
		{
			fwidth += this.items[i].offsetWidth + 20;
		}
		if (fwidth > document.viewport.getWidth())
		{
			newSize = Math.floor(document.viewport.getWidth() / fwidth * fstyle);
			f2style = Math.floor(newSize * 0.85);
			for (i=0; i<this.items.length; i++)
			{
				this.items[i].setStyle({ fontSize: newSize+"px" });
			}
			for (i=0; i<this.subTitles.length; i++)
				this.subTitles[i].setStyle({ fontSize: f2style+"px" });
		}
		if (this.currentIndex != -1)
			$("menu-bar").setStyle({ top: parseInt(this.items[this.currentIndex].getHeight() + 22)+"px", width: (this.items[this.currentIndex].getWidth() - 15)+"px", right: (document.viewport.getWidth() - this.items[this.currentIndex].cumulativeOffset().left - this.items[this.currentIndex].getWidth())+"px"});
		this.rollout(0);
	},
	
	goToLink: function(index)
	{
		window.location.href = $(this.items[index].parentNode).readAttribute("href");
	},
	
	rollover: function(index, event)
	{
		if (this.currentIndex != index)
		{
			if ($("menu-image-"+(index-1)))
				$("menu-image-"+(index-1)).show();
			if (this.banner && index != 0)
				$("home-banner").hide();
			else if ($("menu-image-"+(this.currentIndex-1)))
				$("menu-image-"+(this.currentIndex-1)).hide();
			if (index == 0)
				$("home-banner").show();
		}
		this.selectedItem = index;
		this.isRollover = true;
		if (!this.busy)
		{
			this.busy = true;
			this.determineState.bind(this).delay(0.2);
		}
	},
	
	determineState: function()
	{
		if (this.isRollover)
			this.doRollover(this.selectedItem);
		else
			this.doRollout(this.selectedItem);
	},
	
	doRollover: function(index)
	{
		if (this.currentEffect)
			this.currentEffect.cancel();
		for (i=0; i<this.items.length; i++)
		{
			this.items[i].setStyle({color: "#999"});
			if (!(i == index && index == this.currentIndex) && $("submenu-"+this.items[i].readAttribute("menuid")))
				$("submenu-"+this.items[i].readAttribute("menuid")).hide();
		}
		this.items[index].setStyle({color: "#444"});
		if (index == this.currentIndex && $("submenu-"+this.items[index].readAttribute("menuid")))
			new Effect.Appear("submenu-"+this.items[index].readAttribute("menuid"));
		this.currentEffect = new Effect.Morph("menu-bar", {
			style: "width: "+(this.items[index].getWidth() - 15)+"px; right: "+(document.viewport.getWidth() - this.items[index].cumulativeOffset().left - this.items[index].getWidth())+"px; background: "+this.items[index].readAttribute("colortag"),
			duration: 0.5
		});
		Cufon.refresh();
		this.busy = false;
	},
	
	unrollOver: function()
	{
		this.rollingOver = false;
	},
	
	unrollOut: function()
	{
		this.rollingOut = false;
	},
	
	rollout: function(index, event)
	{
		$("home-banner").hide();
		if ($("menu-image-"+(index-1)))
			$("menu-image-"+(index-1)).hide();
		if (this.banner)
			$("home-banner").show();
		else if ($("menu-image-"+(this.currentIndex-1)))
			$("menu-image-"+(this.currentIndex-1)).show();
		this.selectedItem = index;
		this.isRollover = false;
		if (!this.busy)
		{
			this.busy = true;
			this.determineState.bind(this).delay(0.2);
		}
	},
	
	doRollout: function(index)
	{
		if (index == this.currentIndex)
		{
			this.busy = false;
			return;
		}
		if (this.currentEffect)
			this.currentEffect.cancel();
		if (this.items[this.currentIndex])
		{
			index = this.currentIndex;
			for (i=0; i<this.items.length; i++)
			{
				this.items[i].setStyle({color: "#999"});
				if ($("submenu-"+this.items[i].readAttribute("menuid")))
					$("submenu-"+this.items[i].readAttribute("menuid")).hide();
			}
			this.items[index].setStyle({color: "#444"});
			if ($("submenu-"+this.items[index].readAttribute("menuid")))
				new Effect.Appear("submenu-"+this.items[index].readAttribute("menuid"));
			this.currentEffect = new Effect.Morph("menu-bar", {
				style: "width: "+(this.items[index].getWidth() - 15)+"px; right: "+(document.viewport.getWidth() - this.items[index].cumulativeOffset().left - this.items[index].getWidth())+"px; background: "+this.items[index].readAttribute("colortag"),
				duration: 0.5
			});
		}
		else
		{
			for (i=0; i<this.items.length; i++)
			{
				this.items[i].setStyle({color: "#999"});
				if ($("submenu-"+this.items[i].readAttribute("menuid")))
					$("submenu-"+this.items[i].readAttribute("menuid")).hide();
			}
			this.currentEffect = new Effect.Morph("menu-bar", {
				style: "width: 0px; right: 0px; background: #000",
				duration: 0.5
			});
		}
		Cufon.refresh();
		this.busy = false;
	},
	
	update: function(index, event)
	{
		if (this.currentEffect)
			this.currentEffect.cancel();
		event.stop();
		for (i=0; i<this.items.length; i++)
		{
			this.items[i].setStyle({color: "#999"});
			if ($("submenu-"+this.items[i].readAttribute("menuid")))
				$("submenu-"+this.items[i].readAttribute("menuid")).hide();
		}
		this.items[index].setStyle({color: "#444"});
		if ($("submenu-"+this.items[index].readAttribute("menuid")))
			new Effect.Appear("submenu-"+this.items[index].readAttribute("menuid"));
		this.currentEffect = new Effect.Morph("menu-bar", {
			style: "width: "+(this.items[index].getWidth() - 15)+"px; right: "+(document.viewport.getWidth() - this.items[index].cumulativeOffset().left - this.items[index].getWidth())+"px; background: "+this.items[index].readAttribute("colortag"),
			duration: 0.5,
			afterFinish: this.goToLink.bind(this, index)
		})
		this.currentIndex = index;
		Cufon.refresh();
	}
};

new Menu();