var UPEXT = "_up.gif";
var OVEREXT = "_over.gif";
var DOWNEXT = "_down.gif";
var SELEXT = "_selall.gif";

var left = 0;

var NavButton = Class.create();

NavButton.prototype = {
	
	initialize: function (id, src, w, h, txt, alt) {

		this.id = id;
		this.source = src;
		this.width = w;
		this.height = h;
		this.header = txt;
		this.alt = alt;
		this.preImgHtml = "";
		this.html = "";
  		this.handCursor = true;
		this.href = "javascript://";
		this.enabled = true;
		this.selected = false;
    	this._mouseOver = this.onRollOver.bindAsEventListener(this);
    	this._mouseOut = this.onRollOut.bindAsEventListener(this);
		EventDispatcher.initialize(this);
		//Event.observe(window, "load", this.onLoad.bind(this));
		this.preload();
	},

	onLoad: function () {
		
		this.element = $(this.id);
		//if (this.subMenu != null) {
			Event.observe(this.element, "mouseover", this._mouseOver);
			Event.observe(this.element, "mouseout", this._mouseOut);
			if (this.preImgHtml != "") {
				Event.observe(this.element.parentNode, "mouseover", this._mouseOver);
				Event.observe(this.element.parentNode, "mouseout", this._mouseOut);
			}
		//}
		if (this.isLI())
			this.setStyles();
	},
	
	preload: function () {
  
	  this.upImage = new Image(this.width,this.height);
	  this.upImage.src = this.source + UPEXT;
	  /*this.downImage = new Image(this.width,this.height);
	  this.downImage.src = this.source + DOWNEXT;*/
	  this.overImage = new Image(this.width,this.height);
	  this.overImage.src = this.source + OVEREXT;
	},
	
	setSubMenu: function (submenu) {
		
		this.subMenu = submenu;
		this.enable();
	},

	useHandCursor: function (bool) {
  
	 	this.handCursor = bool;
	},
	
	addHyperlink: function (href) {
		
  		this.href = href;
	},
	
	getListHtml: function (ext) {
		
  	var img = (this.selected) ? this.selImage : this.upImage;

		if (this.selected)
			this.html = "<li id=\""+ this.id +"\" class=\"Selected\"";
		else
			this.html = "<li id=\""+ this.id +"\"";
		if (!this.handCursor)
			this.html += " style=\"cursor:default\"";
		if (this.alt > "")
		  this.html += " title=\""+ this.alt +"\"";
		this.html += ">";
		if (this.enabled)
			this.html += "<a href=\"" + this.href + "\" onfocus=\"this.blur()\">";
		if (!this.selected)
			this.html += "<img src=\"" + img.src + "\" width=\"0\" height=\"0\" border=\"0\" alt=\"\" />";
		
		this.html += this.header
		if (this.enabled)
			this.html += "</a>";
		this.html += "</li>";

		return this.html;
	},
	
	printHtml: function () {
		
		document.write(this.getListHtml());
		this.onLoad();
	},
	
	setPreImgHtml: function (html) {
		
		this.preImgHtml = html;
	},
	
	getImageHtml: function (hide, html) {
  
  	if (html == undefined)
  		html = "";
  		var img = (this.selected) ? this.selImage : this.upImage;
  
		this.html = "<a href=\"" + this.href + "\" onfocus=\"this.blur();\"";
		if (!this.handCursor)
			this.html += " style=\"cursor:default\"";
		this.html += ">" + this.preImgHtml + "<img id=\""+ this.id +"\" src=\""+ img.src +"\"";
		if (this.width > 0)
		  this.html += (hide) ? " width=\"0\"" : " width=\""+ this.width +"\"";
		if (this.height > 0)
		  this.html += (hide) ? " height=\"0\"" : " height=\""+ this.height +"\"";
		if (this.alt > "")
		  this.html += " alt=\""+ this.alt +"\"";
		if (hide)
		  this.html += " style=\"width:" + this.width + "px; height:" + this.height + "px\"";
		this.html += " border=\"0\" />" + this.header + "</a>";

		return this.html + html;
	},
	
	printAsImgHtml: function (html) {
		
		document.write(this.getImageHtml(true,html));
		this.onLoad();
	},
	
	setStyles: function () {
		
		/* the container DIV style */
		var style = {
			width: (this.width + 2) + "px",
			height: this.height + "px",
			backgroundRepeat: "no-repeat",
			backgroundPosition: left + "px 0px"
		};
		Element.setStyle(this.element, style);
		/* the anchor A style */
		var style = {
			width: (this.width + 2) + "px",
			height: this.height + "px"
		};
		if (this.enabled)
			Element.setStyle(this.element.firstChild, style);
		/* the IMG inside the anchor style */
		var style = {
			marginLeft: left + "px"
		};
		if (!this.selected)
			Element.setStyle(this.element.firstChild.firstChild, style);
		left -= this.width + 2;
	}, 
	
	rollOver: function () {

		if (this.isIMG()) {
	  	this.element.src = this.overImage.src;
		}
		else {
			/* show the over state that's in the A child, see: #menu LI A:hover */
			Element.setStyle(this.element.childNodes[0], {visibility: "visible"});
			/* hide the up state that's in the A IMG child, see #menu LI A:hover IMG */
			Element.setStyle(this.element.childNodes[0].childNodes[0], {visibility: "hidden"});
		}
	},
	
	onRollOver: function (e) {

		if (this.enabled) {
		  	
			this.enabled = false;
			if (!this.selected)
				this.rollOver();
		  this.dispatchEvent("onRollOver",this,this.subMenu);
			this.enabled = true;
		}
	  Event.stop(e);
	 	return true;
	},
	
	rollOut: function () {

		if (this.isIMG()) {
	  	this.element.src = this.upImage.src;
		}
		else {
			/* hide the over state that's in the A child, see: #menu LI A:hover */
			Element.setStyle(this.element.childNodes[0], {visibility: "hidden"});
			/* show the up state that's in the A IMG child, see #menu LI A:hover IMG */
			Element.setStyle(this.element.childNodes[0].childNodes[0], {visibility: "visible"});
		}
	},
	
	onRollOut: function (e) {

	  if (this.enabled) {
			
			this.enabled = false;
			if (!this.selected)
	 			this.rollOut();
			this.dispatchEvent("onRollOut",this,this.subMenu);
			this.enabled = true;
	  }
	  return true;
	},
	
	enable: function () {
		
		this.enabled = true;
		this.useHandCursor(true);
	},
	
	disable: function () {
		
		this.enabled = false;
		this.useHandCursor(false);
	},
	
	select: function (ext,disable) {
		
		this.selected = true;
	  this.selImage = new Image(this.width,this.height);
	  if (ext == undefined)
		  this.selImage.src = this.source + SELEXT;
		else
		  this.selImage.src = this.source + ext;
	  if (disable != false)
		  this.disable();
	},
	
	isIMG: function () {

		return this.element.nodeName.toUpperCase() == "IMG";
	},
	
	isLI: function () {
	
		return this.element.nodeName.toUpperCase() == "LI";
	},
	
	toString: function () {
		
		return "[NavButton id=\"" + this.id + "\"]";
	}
};