function display(e, url)
{
	var parent = e;

	while(parent.className != "color_table")	// GET COLOR_TABLE ELEMENT
	{
		parent = parent.parentNode;
	}

	var id = getId(e.id);
	
	var detail = document.getElementById("color_details_" + id);

	if(e.active == false) 	// SELECT
	{
		setInactive(e, url);
		hideDetails(detail);
	}
	else					// DESELECT
	{
		var rows 	= parent.childNodes;
		var length	= rows.length;
		
		for(var i = 0; i < length; i++)	// DESELECT ALL ITEM- AND DETAILELEMENTS
		{
			if(rows[i].className == "row")
			{
				
				var items 		= rows[i].childNodes;
				var item_length = items.length;
				
				for(var k = 0; k < item_length; k++)
				{
					if(items[k].className == "color_item" || items[k].className == "color_item center")
					{
						setInactive(items[k], url);
					}
					else if(items[k].className == "color_details")
					{
						hideDetails(items[k]);
					}
				}
			}
		}

		setActive(e, url);
		showDetails(detail);
	}
}

function getId(str)
{
	var start 	= str.search("_") + 1;
	var end		= str.length;
	var id = str.substring(start, end);
	
	return id;
}

function getWrapper(e)
{
	var i = 0;

	while(e.childNodes[i].className != "image")
	{
		i++;
		if(i > 10) break;
	}

	var image = e.childNodes[i];
	i = 0;
	
	while(image.childNodes[i].className != "wrap")
	{
		i++;
		if(i > 10) break;
	}
	
	var wrap = image.childNodes[i];
	
	return wrap;
}

function setInactive(e, url)	// UNSELECTED ITEM
{
	e.active = true;
	
	e.style.height			= "50px";
	e.style.marginTop 		= "5px";
	e.style.marginLeft 		= "5px";
	e.style.marginBottom 	= "0px";
	e.style.marginRight 	= "5px";
	e.style.color			= "gray";
	e.style.backgroundColor = "#ffffff";
	e.style.borderBottom	= "1px solid gray";
	
	var wrap = getWrapper(e);
	wrap.style.backgroundImage = "url(" + url +  "images/color_circle.png)";
}

function setActive(e, url)	// SELECTED ITEM
{
	e.active = false;
	
	e.style.height			= "55px";
	e.style.color			= "black";
	e.style.backgroundColor = "#d8dee6";	
	e.style.borderBottom	= "1px dashed #c3cdd9";/*dark blue*/

	var wrap = getWrapper(e);
	wrap.style.backgroundImage = "url(" + url + "images/color_circle_hover.png)";
}

function hideDetails(e)
{
	e.style.display = "none";
}

function showDetails(e)	// SHOW DETAILS
{
	e.style.display = "block";
}