var Expose = Class.create();
Expose.prototype = {
	initialize: function(className, containingElement) {

		this._containingElement = containingElement;

		var exposeElements = document.getElementsByClassName(className);
		for(var i = 0; i < exposeElements.length; i++) {

			Event.observe(exposeElements[i], 'mouseover', this.showExpose.bindAsEventListener(this));
			Event.observe(exposeElements[i], 'mouseout', this.hideExpose.bindAsEventListener(this));
		}
	},

	showExpose: function(e) {

		var eventContainer = Event.findElement(e, this._containingElement);
		var eventElement = $(eventContainer).down('.expose');

		$(eventContainer).addClassName('_expose-selected');

		eventContainer.setStyle({
				position: 'relative',
				zIndex: 1099
		});

		if(eventElement.hasClassName('usehref')) {

			var imageNode = Builder.node('img', {src: eventElement.href});
		} else if(eventContainer.down('.expose-content')) {

			var existingImageNode = eventContainer.down('.expose-content');
			var imageNode = Builder.node('img', {src: existingImageNode.src});
		}

		if(eventElement.hasClassName('usealt')) {

			var titleNode = Builder.node('h3', [ eventElement.down('img').alt ]);
		}

		var exposeLayer = Builder.node('div', {id: '_expose-layer', style: 'position: absolute; z-index: 1001;', className: 'expose-item'}, [
			(typeof(titleNode) != 'undefined') ? titleNode : '',
			imageNode
		]);

		$(exposeLayer).setStyle({
				left: Position.positionedOffset(eventContainer)[0] - 3 + 'px',
				top: Position.positionedOffset(eventContainer)[1] - 3 + 'px'
		});

		Element.up(eventContainer).appendChild(exposeLayer);
	},

	hideExpose: function(event) {

		document.getElementsByClassName('_expose-selected').each(function(element) {

			element.removeClassName('_expose-selected');
			element.style.zIndex = 1;
		});

		if($('_expose-layer')) {

			$('_expose-layer').remove();
		}
	}
}



Event.observe(window, 'load', function() {

	var expose = new Expose('expose', 'li');
});