var PRODUCT_TILE_CLASS = "product_tile";
var PRODUCT_TILE_OVER_CLASS = "product_tile_over";
var PRODUCT_SUFFIX_THUMB = "_thumbnail";
var PRODUCT_SUFFIX_DESC = "_description";

var ROLLOVER_ENABLED = true;
var DEBUG_ENABLED = false;

var ROTATE_DELAY = 10000;

/**************************************************************************
 *********************** Tile Content Rotation ****************************
 **************************************************************************/

var currentIndex = 0;

function rotateTiles()
{
	var max = tiles[0].length;
	currentIndex = (currentIndex + 1) % max;
	
	for (var i = 0; i < tiles.length; i++) 
	{
		var tileMax = tiles[i].length;
		var tileIndex = currentIndex %  tileMax;
		
		changeTileContents(i, tiles[i][tileIndex]);
	}
	
	startTileRotater();
}

function changeTileContents(tileID, product)
{
	var tile = document.getElementById("productTile_" + tileID);
	
	if (tile != overTile) 
	{
		var tileThumbnail = document.getElementById("productTile_" + tileID + "_thumbnail_image");
		tileThumbnail.src = product.thumbnail;
		tileThumbnail.alt = product.name;
		
		var tileTitle = document.getElementById("productTile_" + tileID + "_description_title");
		tileTitle.innerHTML = product.name;
		
		var tileDescription = document.getElementById("productTile_" + tileID + "_description_text");
		tileDescription.innerHTML = product.description;
		
		var tileLink = document.getElementById("productTile_" + tileID + "_description_link");
		tileLink.href = "stock.php?ProductID=" + product.productID;
	}
}

function startTileRotater()
{
	setTimeout('rotateTiles()', ROTATE_DELAY);
}

/**************************************************************************
 ********************* Tile Rollover / Animation **************************
 **************************************************************************/

var overTile = null;

function productTileRollover(senderElement)
{
	if (ROLLOVER_ENABLED) 
	{
		toggleView(senderElement, false);
	}
}

function productTileRollout(e, senderElement)
{
	if (ROLLOVER_ENABLED) 
	{
		var evt=e || window.event;
		var newFocus = evt.relatedTarget || evt.fromElement;
		
		// Dont fire for a child of the currently displayed div
		if (isParent(senderElement, newFocus) == false && newFocus.id != findTile(senderElement).id + PRODUCT_SUFFIX_DESC) 
		{
			toggleView(senderElement, true);
		}
		else
		{
			debug("Ignoring mouseout: " + newFocus.tagName + "." + newFocus.id +
				" is a parent of " +  senderElement.tagName + "." + senderElement.id);
		}
	}
}

function productTileClicked(senderElement)
{
	toggleView(senderElement, false);
}

function toggleView(senderElement, thumb)
{
	var  productTile = findTile(senderElement, false);
	if (productTile != null) 
	{
		var tileId = productTile.id;
		var descID = productTile.id + PRODUCT_SUFFIX_DESC;
		var thumbID = productTile.id + PRODUCT_SUFFIX_THUMB;
		
		var showId = thumb ? thumbID : descID;
		var hideId = thumb ? descID : thumbID;
		
		document.getElementById(hideId).style.display = 'none';
		document.getElementById(showId).style.display = 'block';
		
		document.getElementById(tileId).className = thumb ? PRODUCT_TILE_CLASS : PRODUCT_TILE_OVER_CLASS;
		
		debug("Selected " + tileId + "; Hiding: " + hideId + "; Showing " + showId);
	}
	else
	{
		debug("Could not find product_tile related to " + senderElement);
	}
	
	if (! thumb)
	{
		if (overTile != null && overTile != productTile)
		{
			toggleView(overTile, true);
		}
		
		overTile = findTile(senderElement);
	}
}

function findTile(senderElement, stop)
{
	var productTile = null;
	
	if (senderElement.className == PRODUCT_TILE_CLASS || senderElement.className == PRODUCT_TILE_OVER_CLASS)
	{
		productTile = senderElement;
	}
	else
	{
		if (! stop)
		{
			productTile = findTile(senderElement.parentNode,true)
		}
	}
	
	return productTile;
}

function getToggledElementSuffix(senderElement)
{
	if (senderElement.indexOf(PRODUCT_SUFFIX_THUMB) > 0)
		return PRODUCT_SUFFIX_DESC;
	else
		return PRODUCT_SUFFIX_THUMB;
}

function isParent(parent, child)
{
	if (child != null)
	{
		if (child.tagName == "DIV")
		{
			if (child.id == PRODUCT_SUFFIX_THUMB || child.id  == PRODUCT_SUFFIX_DESC)
			{
				return true;
			}
			else
			{
				return false;
			}
		}
		else if (child.tagName == "BODY")
		{
			return false;
		}
		else
		{
			return isParent(parent, child.parentnode);
		}
	}	
}

/**************************************************************************
 ********************** Debugging Functionality ***************************
 **************************************************************************/
function debug(line)
{
	if (DEBUG_ENABLED) 
	{
		var debugElement = document.getElementById("debug");
		debugElement.innerHTML += "\n" + line;
		debugElement.scrollTop = debugElement.scrollHeight
	}
}

if (DEBUG_ENABLED)
{
	document.writeln("<textarea id='debug'></textarea>");
}