var HoverBox = new Class({
	initialize: function() {
		this.pos = [];
		this.boxes = $$('[id$=_hoverbox]');
		this.boxes.setStyle('display', 'none');
		this.showHideBox();
		this.closeBox();
	},
	showHideBox: function(){
		this.boxes.each(function(item){
			this.getCurrentBox(item);
			item.addEvent('mouseleave', function(){this.closeBoxTimer()}.bind(this));
			item.addEvent('mouseenter', function(){$clear(this.delay)}.bind(this));
			$(this.currentBox).addEvent('mouseleave', function(){this.closeBoxTimer()}.bind(this));
			$(this.currentBox).addEvent('mouseenter', function(){
				this.getCurrentBox(item);
				$clear(this.delay);
				this.boxes.setStyle('display', 'none');
				item.setStyles({ display: 'block', position: 'absolute' }).setStyle('z-index', '1000000');				
 
				this.positioning(item, this.currentBox);
 
			}.bind(this)).setStyle('cursor', 'pointer');
		}.bind(this));
	},
	closeBoxTimer: function(){
		this.hideEm = function(){this.closeBox()}.bind(this);
		this.delay = this.hideEm.delay(50);
		//this.closeBox();
	},
	closeBox: function() {
		this.boxes.setStyle('display', 'none');
	},
	positioning: function(currentItem, currentLink){
		this.pos.windowSize = $(window).getSize();
		this.pos.windowScroll = $(window).getScroll();
		this.pos.boxSize = currentItem.getSize();
		this.pos.inputPOS = $(currentLink).getCoordinates();
		this.pos.inputCOOR = $(currentLink).getPosition();
		this.pos.inputSize = $(currentLink).getSize();
		this.pos.halfWindowY = this.pos.windowSize.y / 2;
		this.pos.halfWindowX = this.pos.windowSize.x / 2;
		this.pos.inputBottomPOS = this.pos.inputPOS.top + this.pos.inputSize.y;
		this.pos.inputBottomPOSAdjust = this.pos.inputBottomPOS - this.pos.windowScroll.y
		this.pos.inputLeftPOS = this.pos.inputPOS.left;
		this.pos.inputRightPOS = this.pos.inputPOS.right;
		this.pos.leftOffset = this.pos.inputCOOR.x;
		difference = {
			x: this.pos.boxSize.x - this.pos.inputSize.x,
			y: this.pos.boxSize.y - this.pos.inputSize.y
		};
		//currentItem.setStyle('top', this.pos.inputPOS.bottom - this.pos.boxSize.y);
		//currentItem.setStyle('left', (this.pos.inputPOS.right - this.pos.boxSize.x));
		currentItem.setStyle('top', this.pos.inputPOS.bottom - this.pos.boxSize.y + difference.y / 2);
		currentItem.setStyle('left', this.pos.inputPOS.right - this.pos.boxSize.x + difference.x / 2);
	},
	getCurrentBox: function(currentItem){
		this.currentBox = currentItem.getProperty('id');
		this.currentBox = this.currentBox.replace('_hoverbox', '');
	}
});