HoverFadeElement = function(element)
{
	this.element = element;

	this.animation = new YAHOO.util.ColorAnim(this.element,
		{ borderColor: { from: HoverFadeElement.border_color, to: HoverFadeElement.background_color } },
		0.5, YAHOO.util.Easing.easeOut);

	this.animation.onComplete.subscribe(this.handleComplete, this, true);

	YAHOO.util.Event.addListener(this.element, 'mouseover',
		this.handleMouseOver, this, true);

	YAHOO.util.Event.addListener(this.element, 'mouseout',
		this.handleMouseOut, this, true);
}

HoverFadeElement.border_color = '';
HoverFadeElement.background_color = '';

HoverFadeElement.prototype.handleMouseOver = function(e)
{
	// make sure related target is not contained in element and check if
	// we moved inside from outside the main window
	var related_target = YAHOO.util.Event.getRelatedTarget(e);
	if (related_target !== null && related_target !== undefined)
		while (related_target !== this.element && related_target.parentNode &&
			related_target.nodeName !== 'HTML')
			related_target = related_target.parentNode;

	if (related_target === null || related_target === undefined ||
		related_target !== this.element) {

		if (this.animation.isAnimated())
			this.animation.stop();

		this.element.style.borderColor = HoverFadeElement.border_color;
		this.element.style.borderWidth = '1px';
		this.element.style.borderStyle = 'solid';
		this.element.style.padding = '0';
	}
}

HoverFadeElement.prototype.handleMouseOut = function(e)
{
	// make sure related target is not contained in element and check if
	// we moved outside the main window
	var related_target = YAHOO.util.Event.getRelatedTarget(e);
	if (related_target !== null && related_target !== undefined)
		while (related_target !== this.element && related_target.parentNode &&
			related_target.nodeName !== 'HTML')
			related_target = related_target.parentNode;

	if (related_target === null || related_target === undefined ||
		related_target !== this.element)
		this.animation.animate();
}

HoverFadeElement.prototype.handleComplete = function()
{
	this.element.style.padding = '1px';
	this.element.style.borderWidth = '0';
}

HoverFade = function(id)
{
	var container = document.getElementById(id);
	var elements = [];

	for (var i = 0; i < container.childNodes.length; i++) {
		var node = container.childNodes[i];
		if (node.nodeType === 1 && YAHOO.util.Dom.hasClass(node, 'swat-tile')) {
			var element = container.childNodes[i];

			if (HoverFadeElement.border_color == '') {
				var old_class_name = element.className;
				element.className = 'pinhole-photo-tile-hover';

				HoverFadeElement.border_color =
					YAHOO.util.Dom.getStyle(element, 'color');

				HoverFadeElement.background_color =
					YAHOO.util.Dom.getStyle(element, 'backgroundColor');

				element.className = old_class_name;

				// no matching colors set
				if (HoverFadeElement.border_color == '' ||
					HoverFadeElement.border_color == 'transparent' ||
					HoverFadeElement.background_color == '' ||
					HoverFadeElement.background_color == 'transparent')
					return;
			}

			elements.push(new HoverFadeElement(element));
		}
	}
}