/* 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: 250, // 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');
        if(document.getElementById("currentBox")!=null)//by amit
        {
            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 = { x: 0, y: 0 };// $(currentLink).getPosition(); // altered for RipleEffect site layout
        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 + '', '');
    }
});