/*@cc_on @*/
/*@if (@_jscript_version >= 4)
document.execCommand("BackgroundImageCache", false, true);
/*@end @*/

/**
 * @see <a href="http://mrclay.org/web_design/shrink_to_fit/">Shrink to Fit</a>
 */
function shrinkToFit(div) {

  var contents, newHTML;

  if ((div.className) && (div.className.indexOf("shrinkToFit")!= -1)) {
  	
	  contents = div.innerHTML;
    newHTML = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td>" + contents + "</td></tr></table>";
	  div.insertAdjacentHTML('afterEnd',newHTML);
	  div.nextSibling.className = div.className;
	  if (div.id) 
	  	div.nextSibling.id = div.id;
	  div.parentNode.removeChild(div);
  }
}

var LiquidSubMenu = Class.create();

LiquidSubMenu.prototype = {
	
	initialize: function (id, w, x, y, a) {

		this.id = id;
		this.width = w;
		this.xpos = x;
		this.ypos = y;
		this.alpha = a;
		this.items = new Array();
		this.links = new Array();
		this.html = "";
    this.isIE = navigator.userAgent.toLowerCase().indexOf("msie") >= 0;
		EventDispatcher.initialize(this);
		//Event.observe(window, "load", this.onLoad.bind(this));
	},
	
	onLoad: function () {
		
		this.element = $(this.id);
		Event.observe(this.element, "mouseover", this.onRollOver.bind(this));
		Event.observe(this.element, "mouseout", this.onRollOut.bind(this));
		this.setStyles();
	},
	
	getHtml: function (ext) {
  	
  	ieStyle = "";/*
  	if (this.isIE)
	  	var ieStyle = " style=\"background-image:url(images/blank.gif); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/submenubg.png', sizingMethod='crop')\"";
*/
		this.html += "<div id=\""+ this.id +"\"><div class=\"shrinkToFit\">" + 
								 "<div" + ieStyle + " class=\"tl\"></div>" + 
								 "<div" + ieStyle + " class=\"tr\"></div>" +
								 "<div class=\"inside\"><ul>\n";
		
		var itemCount = this.items.length;
		for (var i = 0;i < itemCount;i++) {

			this.html += "<li><a href=\""+this.links[i]+"\">"+this.items[i]+"</a></li>";
		}
		
		this.html += "</ul></div>\n" +
								 "<div" + ieStyle + " class=\"bl\"></div>" + 
								 "<div" + ieStyle + " class=\"br\"></div>" + 
								 "</div></div>";

		return this.html;
	},
	
	addItem: function (item, link) {
		
		this.items.push(item);
		this.links.push(link);
	},
	
	printHtml: function () {
		
		document.write(this.getHtml());
		this.onLoad();
	},
	
	setStyles: function () {

		var style = {
			position: "absolute",
			marginLeft: this.xpos + "px",
			minWidth: this.width + "px",
			opacity: navigator.userAgent.match(/Mac/) ? 1 : this.alpha/100,
			filter: "alpha(opacity=" + this.alpha + ")",
			display: "none"
		};
		Element.setStyle(this.element, style);
		if (this.isIE)
			shrinkToFit(this.element.childNodes[0]);
	}, 
	
	onRollOver: function (e) {
	  
	  this.dispatchEvent("onRollOver",this);
	  Event.stop(e);
	  return true;
	},
	
	onRollOut: function (e) {
	  
	  this.dispatchEvent("onRollOut",this);
	  return true;
	},
	
	show: function () {
		
		Element.show(this.element);
	},
	
	hide: function () {
		
		Element.hide(this.element);
	},
	
	toString: function () {
		
		return "[LiquidSubMenu id=\"" + this.id + "\"]";
	}
};

var HoverLayer = Class.create();

HoverLayer.prototype = {
	
	initialize: function (id) {

		this.id = id;
		this.element = $(this.id);
		EventDispatcher.initialize(this);
		Event.observe(this.element, "mouseover", this.onRollOver.bind(this));
		Event.observe(this.element, "mouseout", this.onRollOut.bind(this));
	},
	
	onRollOver: function (e) {
	  
	  this.dispatchEvent("onRollOver",this);
	  Event.stop(e);
	  return true;
	},
	
	onRollOut: function (e) {
	  
	  this.dispatchEvent("onRollOut",this);
	  return true;
	}
};