/**
 * 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.parentHighlightState = '';
        this.parentDimState = '';

        this.delayAmount = '500';
        this.timeoutID = null;

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

        this.initDimHighlightStates();
        this.highligtOrDimParentButton();
        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'
                }
            }
        }
    },

    /**
     * initDimHighlightStates 
     * set parent button's highlight and dim classNames
     */
    initDimHighlightStates: function() {

        thisState = this.parentButton.className;

        if (thisState.indexOf('_over') > 0) {
            this.parentHighlightState = thisState;
            this.parentDimState = thisState.replace('_over', '_off');
        }
        else {
            this.parentHighlightState = thisState.replace('_off', '_over');
            this.parentDimState = thisState;
        }

    },

    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 + '&kwid=1&sem=false',
                        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 });
    },

    highligtOrDimParentButton: function() {

        var dimParent = true;
        var docTitle = document.title;

        /*
         check if this is a baby/newborn page/category/giftguide page
         if Gift Guide Baby pages, dim parent button
         else if this is a Baby page, highlight parent
         else default to dim state
        */
        if (docTitle.indexOf('Gift Guide') >= 0 && docTitle.indexOf('Baby') >= 0) {
            this.parentButton.className = this.parentDimState;
        }
        else if (docTitle.indexOf('Baby Girl') >= 0 || docTitle.indexOf('Baby Boy') >= 0 || docTitle.indexOf('Newborn') >= 0 || gidLib.getQuerystringParam('cid') == '51350') {
        this.parentButton.className = this.parentHighlightState;
            //remove the built in onmouseout/over handlers since we are on a baby page
        }
        else {
            this.parentButton.className = this.parentDimState;
        }
    },

    highlight: function(thisButton, thisClassName) {

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

        this.highligtOrDimParentButton();
    },

    //called from drop down button 
    dim: function(thisButton, thisClassName) {
        this.setTimer();
        var newClassName = thisClassName.replace('_over', '_off');
        $(thisButton).className = newClassName;
    },

    hideDropDown: function() {

        var self = this;

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

    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;

var womenShowDropDownHandler = function() { womenButton.showDropDown(); };
var womenHideDropDownHandler = function() { womenButton.setTimer(); };
var womenButton;

Event.onDOMReady(function() {

    babyButton = new TopNavDropDown('division50733', 'baby', '51375', '6241', '6149');
    womenButton = new TopNavDropDown('division5360', 'women', '49708', '49709');

    var parentBabyButton = $('division50733');
    if ($('division50733') != null) {
        $('division50733').onmouseover = showDropDownHandler;
        $('division50733').onmouseout = hideDropDownHandler;
    }

    var parentWomenButton = $('division5360');
    if (parentWomenButton != null) {
        parentWomenButton.onmouseover = womenShowDropDownHandler;
        parentWomenButton.onmouseout = womenHideDropDownHandler;
    }
    
});