D-Net

/* 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 + '', '');

	}

});