var AjaxImageButton = new Class(
{
	initialize: function()
	{
		this.states = ["n", "h", "a", "i"];
		this.activeItems = {};

		uiDialog.registerInitHandler("imgBtn", this.init);
	},

	init: function(control, clientData)
	{
		control.store("imgBtn_data", clientData["imgBtn"]);

		control.addEvent('mouseenter', imgBtn.onMouseEnter);
		control.addEvent('mouseleave', imgBtn.onMouseLeave);
		control.addEvent('mousedown', imgBtn.onMouseDown);
		control.addEvent('mouseup', imgBtn.onMouseUp);
	},

	collectViewState: function(control)
	{
		return {};
	},

	activate: function(section, control)
	{
		var currentControl = $(imgBtn.activeItems[section]);

		if (currentControl == control)
		{
			return;
		}

		if (currentControl != null)
		{
			imgBtn.setStatus(section, currentControl, 0, true);
		}

		imgBtn.activeItems[section] = control.id;
	},

	isActivated: function(imgButton, data)
	{
		if (data.section == "")
		{
			return false;
		}

		return imgBtn.activeItems[data.section] == imgButton;
	},

	getImageUrl: function(data, status)
	{
		var extension = data.imageUrl.substr(data.imageUrl.length - 4, 4);
		var currentStatus = imgBtn.states.indexOf(data.imageUrl.substr(data.imageUrl.length - 5, 1));

		return data.imageUrl.substr(0, data.imageUrl.length - 5) + imgBtn.states[status] + extension;
	},

	setStatus: function(imgButton, data, status)
	{
		var newImageUrl = null;

		if (status == 0)
		{
			newImageUrl = data.imageUrl;
		}
		else
		{
			newImageUrl = imgBtn.getImageUrl(data, status);
		}

		if (imgButton.src != newImageUrl)
		{
			imgButton.src = newImageUrl;
		}
	},

	onMouseEnter: function()
	{
		var data = this.retrieve("imgBtn_data");

		if (data == null || imgBtn.isActivated(this, data) || !data.hasHoverState)
		{
			return;
		}

		imgBtn.setStatus(this, data, 1);
	},

	onMouseLeave: function()
	{
		var data = this.retrieve("imgBtn_data");

		if (data == null || imgBtn.isActivated(this, data) || !data.hasHoverState)
		{
			return;
		}

		imgBtn.setStatus(this, data, 0);
	},

	onMouseDown: function()
	{
		var data = this.retrieve("imgBtn_data");

		if (data == null || !data.hasActiveState)
		{
			return;
		}

		imgBtn.setStatus(this, data, 2);
	},

	onMouseUp: function()
	{
		var data = this.retrieve("imgBtn_data");

		if (data == null || !data.hasActiveState)
		{
			return;
		}

		imgBtn.setStatus(this, data, 0);
	},

	setImageUrl: function(dialogID, controlID, imageUrl)
	{
		var control = ui.getNestedControl(dialogID, controlID);

		if (control == null)
		{
			return;
		}

		control["imageUrl"] = imageUrl;
		control.src = imageUrl;
	}

	//	initControl: function(dialogID, controlID, imageUrl, section, hasHoverState, hasActiveState)
	//	{
	//		var control = ui.getNestedControl(dialogID, controlID);

	//		if (control == null)
	//		{
	//			return;
	//		}

	//		control["section"] = section;
	//		control["imageUrl"] = imageUrl;
	//		control["hasHoverState"] = hasHoverState;
	//		control["hasActiveState"] = hasActiveState;

	//		control.addEvent('mouseenter', imgBtn.onMouseEnter);
	//		control.addEvent('mouseleave', imgBtn.onMouseLeave);
	//		control.addEvent('mousedown', imgBtn.onMouseDown);
	//		control.addEvent('mouseup', imgBtn.onMouseUp);
	//		control.addEvent('click', imgBtn.onClick);
	//	}
});

var imgBtn = new AjaxImageButton();