/**
 * TopNavDropDown
 * @param {string} parentButton = id of parent button that triggers this drop down
 * @param {string} thisName = base name of drop down container
 * @return (string) button1 = division id (i.e. '51375')
 * @return (string) button2 OPTIONAL = division id (i.e. '51375')
 * @return (string) button3 OPTIONAL = division id (i.e. '51375')
 * @return (string) button4 OPTIONAL = division id (i.e. '51375')
 * @return (string) button5 OPTIONAL = division id (i.e. '51375')
 * Can have a variable length of drop down buttons (i.e. button6)
 * @author Jermaine Jackson
 * @date 10/8/2009
 */
 
var TopNavDropDown = Class.create();

TopNavDropDown.prototype = {

    initialize: function(parentButton, thisName, button1, button2, button3, button4, button5) {

        this.objName = thisName + 'Button';
        this.containerName = thisName + 'DropDownContainer';

        this.clearImage = '/assets/common/clear.gif';

        this.parentButton = $(parentButton);
        this.delayAmount = '500';
        this.timeoutID = null;

        this.buttons = Array(button1, button2, button3);
        this.dropDownButtons = { 'buttons': [] };

        this.initDropDownButtons();

    },

    initDropDownButtons: function() {

        for (var i = 0; i < this.buttons.length; i++) {
            if (typeof this.buttons[i] != 'undefined') {
                this.dropDownButtons.buttons[i] = {
                    'divisionID': this.buttons[i],
                    'cssClass': 'topnavSprite_division' + this.buttons[i] + '_off'
                }
            }
        }
    },

    showDropDown: function() {

        var self = this;
        var xyPos = Position.cumulativeOffset(self.parentButton);
        var xPos = xyPos[0];
        var yPos = xyPos[1] + this.parentButton.offsetHeight;

        this.cancelTimer();

        if (this.container == null) {

            var j = 0;

            styleStr = 'left:' + xPos + 'px;'
                        + 'top:' + yPos + 'px;'
                        + 'width:87px;'
                        + 'position:absolute;'
                        + 'display:none;'
                        + 'z-index:1001px;'
                        + 'margin-left:-1px;';

            var dropDownContainer = Builder.node(
                'div', { id: self.containerName, style: styleStr });

            for (j = 0; j < this.dropDownButtons.buttons.length; j++) {

                var thisDivisionID = this.dropDownButtons.buttons[j].divisionID;
                var thisButtonID = this.objName + '_division' + thisDivisionID;
                var thisCSSClass = this.dropDownButtons.buttons[j].cssClass;

                var newButton = Builder.node('div', { id: thisButtonID + '_container' });
                var newLink = Builder.node(
                    'a', {
                        href: '/browse/division.do?cid=' + thisDivisionID + '&mlink=5151,1464723,topNav_' + thisDivisionID + '&clink=1464723',
                        onmouseover: this.objName + ".highlight('" + thisButtonID + "','" + thisCSSClass + "');",
                        onmouseout: this.objName + ".dim('" + thisButtonID + "','" + thisCSSClass + "');"
                    });

                var newDropDownImage = Builder.node(
                    'img', {
                        id: thisButtonID,
                        className: thisCSSClass,
                        src: self.clearImage
                    });

                newLink.appendChild(newDropDownImage);
                newButton.appendChild(newLink);
                dropDownContainer.appendChild(newButton);
            }

            $('divisionContainer').appendChild(dropDownContainer);

            this.container = $(this.containerName);
        }

        this.container.style.left = xPos + 'px';
        this.container.style.top = yPos + 'px';
        new Effect.Appear(self.container, { duration: .3 });
    },

    highlightParentButton: function() {

        var parentClass = this.parentButton.className;
        var newClassName = parentClass.replace('_off', '_over');
        this.parentButton.className = newClassName;
    },

    dimParentButton: function() {

        var dimParent = true;
        var docTitle = document.title;
    
        //check if this is a baby/newborn page/category
        if (docTitle.indexOf('Baby Girl') >= 0 || docTitle.indexOf('Baby Boy') >= 0 || docTitle.indexOf('Newborn') >= 0 || gidLib.getQuerystringParam('cid') == '51350') {
            dimParent = false;
        }

        if (dimParent) {
            this.parentButton.className = "topnavSprite_division50733_off";
        }
        else {
            this.parentButton.className = "topnavSprite_division50733_over";
        }

    },

    highlight: function(thisButton, thisClassName) {

        this.cancelTimer();
        var newClassName = thisClassName.replace('_off', '_over');
        $(thisButton).className = newClassName;

        this.highlightParentButton();
    },

    dim: function(thisButton, thisClassName) {
        this.setTimer();
        var newClassName = thisClassName.replace('_over', '_off');
        $(thisButton).className = newClassName;
    },

    hideDropDown: function() {

        var self = this;

        new Effect.Fade(self.container, { duration: .3 });
        this.cancelTimer();

        this.dimParentButton();
    },

    setTimer: function() {
        var self = this;

        this.timeoutID = setTimeout(
            function() {
                self.hideDropDown();
            },
            self.delayAmount
        );
    },

    cancelTimer: function() {
        clearTimeout(this.timeoutID);
    }

};

var showDropDownHandler = function() { babyButton.showDropDown(); };
var hideDropDownHandler = function() { babyButton.setTimer(); };
var babyButton;

Event.onDOMReady(function() {

    babyButton = new TopNavDropDown('division50733', 'baby', '51375', '6241', '6149');
    var docTitle = document.title;
    var highlightButton = false;
    
    var parentBabyButton = $('division50733');
    if ($('division50733') != null) {
        $('division50733').onmouseover = showDropDownHandler;
        $('division50733').onmouseout = hideDropDownHandler;

        //HIGHLIGHT TOP NAV BABY BUTTON for Newborn/BB/BG pages
        if (docTitle.indexOf('Baby Girl') >= 0 || docTitle.indexOf('Baby Boy') >= 0 || docTitle.indexOf('Newborn') >= 0 || gidLib.getQuerystringParam('cid') == '51350') {
            highlightButton = true
        }

        if (highlightButton) {
            parentBabyButton.className = "topnavSprite_division50733_over";
        }
        else{
            parentBabyButton.className = "topnavSprite_division50733_off";
        }
    }

    

});