var WASBox = new Class({
	
	Implements: Options,
	
	options: {
		elements: $$('.box')
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.elements = this.options.elements;
		this.render();
	},
	
	render: function() {
		this.elements.each(function(element) {
			// get the data we need to create the box
			var overlay = element.getFirst('div');
			var overlayInitialMarginTop = parseInt(overlay.getStyle('margin-top'));
			// check if we need any js processing for this element at all
			if (!overlay.getFirst()) {
				overlay.dispose();
				return;
			}
			var headerElement = overlay.getFirst('h1');
			var header = overlay.getFirst('h1') ? overlay.getFirst('h1').get('text').trim() : '';
			var headerImage = overlay.getFirst('h1') ? overlay.getFirst('h1').getStyle('background-image') : '';
			var overlayColor = overlay.getStyle('background-color');
			var textColor = overlay.getFirst('p') ? overlay.getFirst('p').getStyle('color') : '';
			var linkHref = overlay.getFirst('p') && overlay.getFirst('p').getFirst('a') ? overlay.getFirst('p').getFirst('a').get('href') : (overlay.getFirst('a') ? overlay.getFirst('a').get('href') : '');
			if (!linkHref) {
				// if there is no text defined, the a element is the first child of the overlay
				//linkHref = ;
			}
			var textElement = overlay.getFirst('p');
			var text = overlay.getFirst('p') ? overlay.getFirst('p').get('text').trim() : '';
			
			// link whole element if there's a link defined
			if (linkHref) {
				// we'll create an a element and position it on top of the box
				var linkOverlay = new Element('a', {
					href: linkHref,
					styles: {
						display: 'block',
						width: element.getSize().x,
						height: element.getSize().y
					},
					text: ' '
				}).inject(element).position({ relativeTo: element, position: 'upperLeft', edge: 'upperLeft' });
				if (Browser.Engine.trident) {
					linkOverlay.position({offset: {y: -300, x: -600}}); // strange IE bug
				}
			}
			
			// if header or text is missing, we'll return at this point
			if (!header && !text) {
				// first remove the overlay
				overlay.dispose();
				return;
			}
			
			
			// create a copy of the overlay and place it above it (by a negative margin-top).
			// we need this because opacity is inherited to the child elements, and we don't want this
			var overlayCopy = overlay.clone().setStyles({
				opacity: '',
				'background-color': 'transparent',
				filter: '',
				width: overlay.getSize().x,
				position: 'relative',
				top: '-' + (overlay.getSize().y) + 'px',
				left: 0
			}).removeClass('box-overlay').inject(element, 'bottom').getElements('a').setStyle('color', textColor);
			// position({relativeTo: overlay, position: 'upperLeft', edge: 'upperLeft'})
			textElement.setStyle('color', 'transparent').getElement('a').setStyle('color', 'transparent');
			headerElement.setStyle('color', 'transparent').getElement('a').setStyle('color', 'transparent');
			
			// attach events to element
			element.addEvent('mouseenter', function() {
				var newMarginTop = overlayInitialMarginTop - (overlay.getSize().y -25);
				overlay.tween('margin-top',  newMarginTop + 'px');
			}).addEvent('mouseleave', function() {
				overlay.tween('margin-top', overlayInitialMarginTop);
			});
			
		}.bind(this));
	}
});