
<public:component tagName="span" lightWeight=true />

<!-- Change this value to alter the text hilite color -->
<public:property name="m_nSelected" value="0" />
<public:property name="m_sImage" />

<!-- events (all bubble) -->
<public:attach event="ondocumentready" handler="initialize" />
<public:attach event="onmouseover" handler="onMouseOver" />
<public:attach event="onmouseout"  handler="onMouseOut" />
<public:attach event="onmousedown"  handler="onMouseDown" />
<public:attach event="onmouseup"  handler="onMouseUp" />
<public:attach event="onpropertychange" onevent="onPropertyChange()" />

<script language="jscript">

function initialize()
{
	// Clear hover state
	//element.children(0).style.backgroundImage = "";
	
	// Set select state
	if (parseInt(element.m_nSelected) != 0)
	{
		element.style.backgroundImage = "url(" + element.m_sImage + ".png)";
		element.style.backgroundImage = "url(" + element.m_sImage + "r.png)";
		element.style.backgroundImage = "url(" + element.m_sImage + "g.png)";
		element.style.cursor = "default";
		element.tabIndex = -1;
	}
	else
	{
		element.style.backgroundImage = "url(" + element.m_sImage + "g.png)";
		element.style.backgroundImage = "url(" + element.m_sImage + "r.png)";
		element.style.backgroundImage = "url(" + element.m_sImage + ".png)";
		element.style.cursor = "hand";
		element.tabIndex = 0;
	}
}

function refresh()
{
	// Clear hover state
	//element.children(0).style.backgroundImage = "";
	
	// Set select state
	if (parseInt(element.m_nSelected) != 0)
	{
		element.style.backgroundImage = "url(" + element.m_sImage + "g.png)";
		element.style.cursor = "default";
		element.tabIndex = -1;
	}
	else
	{
		element.style.backgroundImage = "url(" + element.m_sImage + ".png)";
		element.style.cursor = "hand";
		element.tabIndex = 0;
	}
}

function onPropertyChange()
{
	if (event.propertyName == "m_nSelected")
	{
		refresh();
	}
}

function onMouseOver()
{
	if (parseInt(element.m_nSelected) == 0)
	{
		// We change background on an enclosed image to prevent flashing behavior
		//element.children(0).style.backgroundImage = "url(" + element.m_sImage + "r.png)";
		element.children(0).style.cursor = "hand";

		element.style.backgroundImage = "url(" + element.m_sImage + "r.png)";

	}
}

function onMouseOut()
{
	if (parseInt(element.m_nSelected) == 0)
	{
		//element.children(0).style.backgroundImage = "";
		element.children(0).style.cursor = "default";
		element.style.backgroundImage = "url(" + element.m_sImage + ".png)";
	}
}

function onMouseDown()
{
	if (parseInt(element.m_nSelected) == 0)
	{
		element.style.backgroundImage = "url(" + element.m_sImage + "g.png)";
	}
}

function onMouseUp()
{
	if (parseInt(element.m_nSelected) == 0)
	{
		element.style.backgroundImage = "url(" + element.m_sImage + "r.png)";
	}
}
 
</script>

</htc>
