// Example:
// var button = new ImageButton({enabled:"url1", focused:"url2", triggered:"url3", disabled:"url4"});
function ImageButton(images)
{
	extend(this, Widget);
	
	if(!("enabled" in images))
	{
		throw new Error("Images does not contain a default image");
	} else
	{
		var thisRef = this;
		var domContainer = null;
		
		this.images = new Object();
		this.state = ImageButton.STATE_LOADING;
		this.image = null;
		this.currentImage = null;
		// this.enabled = false;
		
		this.setEnabled(true);
		
		for(var key in images)
		{
			Toolkit.getImage(images[key], function(path, image, async, context) {
				thisRef.images[context] = image;
				
				if(context == "enabled")
				{					
					if(thisRef.enabled)
					{
						thisRef.setState(ImageButton.STATE_DEFAULT);

						if(thisRef.container)
						{
							thisRef.container.invokeUpdate();
						}
					}
				} else if(context == "disabled" && !thisRef.enabled)
				{
					thisRef.setState(ImageButton.STATE_DISABLED);

					if(thisRef.container)
					{
						thisRef.container.invokeUpdate();
					}
				}
			}, key);
		}
		
		domContainer = this.getDOMContainer();
		
		if(images.focused)
		{
			domContainer.onmouseenter = function()
			{
				thisRef.setState(ImageButton.STATE_FOCUSED);
			}
		
			domContainer.onmouseleave = function()
			{
				thisRef.setState(ImageButton.STATE_DEFAULT);
			}
		}
		
		domContainer.onmousedown = function()
		{
			thisRef.setState(ImageButton.STATE_TRIGGERED);
			
			if(thisRef.enabled && thisRef.onClicked)
			{
				thisRef.onClicked();
			}
		}
		
		domContainer.onmouseup = function()
		{
			thisRef.setState(ImageButton.STATE_FOCUSED);
		}
	}
}

ImageButton.prototype = new Widget();

ImageButton.prototype.setEnabled = function(enabled)
{
	if(enabled != this.enabled)
	{
		this.enabled = enabled;
		
		this.getDOMContainer().style.cursor = (enabled ? "pointer" : "default");
		this.setState(enabled ? ImageButton.STATE_DEFAULT : ImageButton.STATE_DISABLED);
	}
}

ImageButton.prototype.setState = function(state)
{
	if(!this.images.enabled)
	{
		return;
	}
	
	if(state != this.state)
	{
		var newImage = null;
		var oldImage = this.currentImage;
		
		this.state = state;
		
		if(state == ImageButton.STATE_DISABLED && this.enabled)
		{
			this.setEnabled(false);
			return;
		}
		
		if(this.enabled)
		{
			switch(state)
			{
				case ImageButton.STATE_DEFAULT:
					newImage = this.images.enabled;
					break;
				case ImageButton.STATE_FOCUSED:
					newImage = this.images.focused;
					break;
				case ImageButton.STATE_TRIGGERED:
					newImage = this.images.triggered;
					break;
				default:
					throw new Error("Invalid button state " + state);
			}
		} else
		{
			this.state = ImageButton.STATE_DISABLED;
			newImage = this.images.disabled;
		}
		
		this.currentImage = (newImage ? newImage : this.images.enabled);
					
		with(this.getDOMContainer())
		{
			if(oldImage)
			{
				removeChild(oldImage);
			}

			appendChild(this.currentImage);
		}
			
		this.invokeUpdate();
	}
}

ImageButton.prototype.getPreferredSize = function()
{
	if(this.currentImage)
	{
		return {width:this.currentImage.width, height:this.currentImage.height};
	} else
	{
		return {width:0, height:0};
	}
}

ImageButton.prototype.toString = function()
{
	return "Widget/ImageButton [images = " + this.images + ", state = " + this.state + "]";
}

ImageButton.STATE_LOADING	= 0;
ImageButton.STATE_DEFAULT 	= 1;
ImageButton.STATE_FOCUSED	= 2;
ImageButton.STATE_TRIGGERED	= 3;
ImageButton.STATE_DISABLED	= 4;