function CreatePushButton(elementOrID, spec)
{
    var buttonElement = elementOrID;
    if (elementOrID.nodeType != Node.ELEMENT_NODE) {
        buttonElement = document.getElementById(elementOrID);
    }
    
	if (!buttonElement.loaded) {
		buttonElement.loaded = true;
        
		buttonElement.object = new PushButton(buttonElement, spec);
	}
    
    return buttonElement.object;
}

function PushButton(buttonElement, spec)
{
	this.element = buttonElement;
	
	// when cloning template, get size from original
	var styleElement = buttonElement;
    if (spec.originalID) {
       styleElement = document.getElementById(spec.originalID);
    }
	
	var text = spec.text || '';
	if (window.getLocalizedString) text = getLocalizedString(text);
    this.setText(text);
		
	this._onclick = spec.onclick || null;
	try { this._onclick = eval(this._onclick); } catch (e) { this._onclick = null; }
	
	// For JavaScript event handlers
	var _self = this;
	this._mousedownHandler = function(event) { _self._mousedown(event); }
	this._mousemoveHandler = function(event)
	{
		event.stopPropagation();
		event.preventDefault();
	}
	this._mouseoverHandler = function(event) { _self._mouseover(event); }
	this._mouseoutHandler = function(event) { _self._mouseout(event); }
	this._mouseupHandler = function(event) { _self._mouseup(event); }
	
	this.enabled = !spec.disabled;
	if (this.enabled) {
		this.onclick = this._onclick;
        if (this._onclick) {
            this.element.addEventListener("mousedown", this._mousedownHandler, true);
        }
	} else {
		this.onclick = null;
	}
	
	this._leftImageWidth = spec.leftImageWidth || 0;
	this._rightImageWidth = spec.rightImageWidth || 0;
	this._topImageWidth = 0;
	this._bottomImageWidth = 0;
	
	var imagePrefix = "Images/" + styleElement.id;
	this._image = imagePrefix + ".png"
	this._clickedImage = imagePrefix + "_clicked.png";
	this._disabledImage = imagePrefix + ".png";
}


PushButton.prototype.setEnabled = function(enabled)
{
	this.enabled = enabled;
	var image;
	
	if (enabled)
	{
		image = this._image;
        this.onclick = this._onclick;
		this.element.style.appleDashboardRegion = "dashboard-region(control rectangle)";
        if (this._onclick) {
            this.element.addEventListener("mousedown", this._mousedownHandler, true);
        }
	}	
    else 
    {
		image = this._disabledImage;
        this.onclick = null;
		this.element.style.appleDashboardRegion = "none";
        if (this._onclick) {
            this.element.removeEventListener("mousedown", this._mousedownHandler, true);
        }
	}
	
	this.element.style.borderWidth = "" + this._topImageWidth + "px " + this._rightImageWidth + "px " +  this._bottomImageWidth + "px " + this._leftImageWidth + "px";
	this.element.style.webkitBorderImage = "url(" + image + ") " + this._topImageWidth + " " + this._rightImageWidth + " " + this._bottomImageWidth + " " + this._leftImageWidth;
}


PushButton.prototype.setText = function(text) 
{
    this.element.innerText = text;
}

/*********************
* Private handlers
*/

PushButton.prototype._setPressed = function(pressed)
{
	var image;
	
	if (pressed)
	{
		image = this._clickedImage;
	}
	else
	{
		image = this._image;
	}
	
	this.element.style.borderWidth = "" + this._topImageWidth + "px " + this._rightImageWidth + "px " +  this._bottomImageWidth + "px " + this._leftImageWidth + "px";
	this.element.style.webkitBorderImage = "url(" + image + ") " + this._topImageWidth + " " + this._rightImageWidth + " " + this._bottomImageWidth + " " + this._leftImageWidth;
}

PushButton.prototype._mousedown = function(event)
{
	// If we're disabled, don't do anything
	if (!this.enabled)
	{
		event.stopPropagation();
		event.preventDefault();
		return;
	}
	
	// Change images to clicked state
	this._setPressed(true);
	
	// add temp event listeners
	document.addEventListener("mousemove", this._mousemoveHandler, true);
	document.addEventListener("mouseup", this._mouseupHandler, true);
	this.element.addEventListener("mouseover", this._mouseoverHandler, true);
	this.element.addEventListener("mouseout", this._mouseoutHandler, true);
	
	this._inside = true;
	
	event.stopPropagation();
	event.preventDefault();
}

PushButton.prototype._mouseover = function(event)
{
	// Change images to clicked state
	this._setPressed(true);
	
	this._inside = true;
	
	event.stopPropagation();
	event.preventDefault();		
}

PushButton.prototype._mouseout = function(event)
{
	// Change images to regular state
	this._setPressed(false);
	
	this._inside = false;
	
	event.stopPropagation();
	event.preventDefault();	
}

PushButton.prototype._mouseup = function(event)
{
	// Change images to regular state
	this._setPressed(false);
	
	// Remove temp event listeners
	document.removeEventListener("mousemove", this._mousemoveHandler, true);
	document.removeEventListener("mouseup", this._mouseupHandler, true);
	this.element.removeEventListener("mouseover", this._mouseoverHandler, true);
	this.element.removeEventListener("mouseout", this._mouseoutHandler, true);
	
	// Perform callback if we're inside the button
	try {
		if (this._inside && this.onclick != null)
			this.onclick(event);
	} catch(ex) {
		throw ex;
	} finally {
		event.stopPropagation();
		event.preventDefault();
		delete this._inside;
	}
}