/* Smart Hover Box for Mootools 1.2
 * v1.0
 * Dedicated to public domain 
 * troy@consideropen.com
 * www.consideropen.com/blog
*/

/* Usage:
 * to implement smart hover box, 
 * take the id of the element you want to hover over, 
 * then use the id +  the "smartBoxSuffix" as the id for the hover element.
 * Finally, create a new SmartHoverBox class and set any options you want to change.
*/
/*
var SmartHoverBox = new Class({    
	Implements: Options,  
	options: {  
		boxTimer        : 1000, // how many milliseconds before the box hides after mouseleave
		yOffset         : -10, // up and down offset in px - accepts negative ints		
		xOffset         : -10, // left and right offset in px - accepts negative ints
		smartBoxSuffix  : '_smarthbox', //suffix that creates a hover box
		smartBoxClose   : 'smarthbox_close', //this class will add "close" click event to element
		lockY   		: '', // 'top', 'bottom'
		lockX    		: '' // 'left', 'right'
	},  
	initialize: function(options) {  
		this.setOptions(options);
		this.pos = [];
		this.smartBoxes = $$('[id$=' + this.options.smartBoxSuffix + ']');
		this.closeElem = $(document.body).getElements('.' + this.options.smartBoxClose); 
		this.closeElem.addEvent('click', function(e){ 
			e.preventDefault();								
			this.closeBox();
		}.bind(this)).setStyle('cursor', 'pointer');
		this.smartBoxes.setStyle('display', 'none');
		this.showHideBox();
		this.closeBox();
	},
	showHideBox: function(){
		this.smartBoxes.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.smartBoxes.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(this.options.boxTimer);
	},
	closeBox: function() {
		this.smartBoxes.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.options.xOffset;
		this.pos.inputRightPOS = this.pos.inputPOS.right;
		this.pos.leftOffset = this.pos.inputCOOR.x + this.options.xOffset;
		
		if(this.pos.halfWindowY < this.pos.inputBottomPOSAdjust && this.options.lockY == 'none' || this.options.lockY == 'top') { 
			currentItem.setStyle('top', this.pos.inputPOS.top - this.pos.boxSize.y - this.options.yOffset); //top
			if (this.pos.inputLeftPOS < this.pos.halfWindowX && this.options.lockX == 'none' || this.options.lockX == 'left' ) { 
				currentItem.setStyle('left', this.pos.leftOffset); //top left
			}
			else { currentItem.setStyle('left', (this.pos.inputPOS.right - this.pos.boxSize.x) - this.options.xOffset); }; //top right
		}
		else {
			currentItem.setStyle('top', this.pos.inputBottomPOS + this.options.yOffset); //bottom
			if (this.pos.inputLeftPOS < this.pos.halfWindowX && this.options.lockX == 'none' || this.options.lockX == 'left' ) { 
				currentItem.setStyle('left', this.pos.leftOffset); //bottom left
			} 
			else { currentItem.setStyle('left', (this.pos.inputPOS.right - this.pos.boxSize.x) - this.options.xOffset);};//bottom right
		};
	},
	getCurrentBox: function(currentItem){
		this.currentBox = currentItem.getProperty('id');
		this.currentBox = this.currentBox.replace('' + this.options.smartBoxSuffix + '', '');	
	}
}); 	

/* Known Bugs:
 * 
 * 
 * 
 * 
*/

//Smart Hover Box for Mootools 1.2 v0.11
//dedicated to the public domain
//by www.consideropen.com/blog

var smartHoverBox = function(boxTimer, xOffset, yOffset, container, smartBoxSuffix, smartBoxClose) {
	var smartBoxes = $(document.body).getElements('[id$=' + smartBoxSuffix + ']');
	
	var closeElem = $(document.body).getElements('.' + smartBoxClose);  
	
	var closeBoxes = function() { smartBoxes.setStyle('display', 'none'); };
	
	//closeBoxes();
	
	closeElem.addEvent('click', function(){ closeBoxes() }).setStyle('cursor', 'pointer');
	var closeBoxesTimer = 0;	
	smartBoxes.each(function(item){	
		var currentBox = item.getProperty('id');
		currentBox = currentBox.replace('' + smartBoxSuffix + '', '');	 
		
		$(currentBox).addEvent('mouseleave', function(){
			closeBoxesTimer = closeBoxes.delay(boxTimer);									  
		});	
		
		item.addEvent('mouseleave', function(){
			closeBoxesTimer = closeBoxes.delay(boxTimer);								  
		});	
		
		$(currentBox).addEvent('mouseenter', function(){ 
			if($defined(closeBoxesTimer)) $clear(closeBoxesTimer); 
		});
		
		item.addEvent('mouseenter', function(){
			if($defined(closeBoxesTimer)) $clear(closeBoxesTimer);
		});  
		
		
		
		item.setStyle('margin', '0'); 
		$(currentBox).addEvent('mouseenter', function(){					 
				smartBoxes.setStyle('display', 'none');
				item.setStyles({ display: 'block', position: 'absolute' }).setStyle('z-index', '1000000'); 

				//coordinates and size vars and math 
				var inputCOOR = $(currentBox).getPosition($(container));
//alert('inputCOOR: '+inputCOOR.x+','+inputCOOR.y+'\nOffset: '+xOffset+','+yOffset);
				item.setStyle('top', inputCOOR.y + yOffset);
				item.setStyle('left', inputCOOR.x + xOffset);
		}).setStyle('cursor', 'pointer');	
	});
};