/**
 * 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.contentID = '1670248';
        this.objName = thisName + 'Button';
        this.containerName = thisName + 'DropDownContainer';
        this.buttonPrefix = thisName;
        this.clearImage = 'res/images/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] + '_notSelected'
                }
            }
        }
    },

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

        thisState = this.parentButton.className;

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

    },

    showDropDown: function() {

        var self = this;
        var xyPos = Position.cumulativeOffset(self.parentButton);
        var xPos = xyPos[0] + 4;
        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:9001;'
                        + 'margin-left:0px;';

            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';
        //this.container.style.zIndex = "9001";
        new Effect.Appear(self.container, { duration: .3 });
    },

    highligtOrDimParentButton: function() {

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

        /* separate checks for each drop down (i.e. baby, women, etc...)
        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 (this.buttonPrefix == "baby") {
            if (docTitle.indexOf("Women's Clothes:") >= 0 || docTitle.indexOf('Maternity Clothes:') >= 0 ||
                docTitle.indexOf("Women's Plus Size Clothes:") >= 0 || docTitle.indexOf("Men's Clothes:") >= 0 ||
                docTitle.indexOf("Girl's Clothes:") >= 0 || docTitle.indexOf("Boy's Clothes:") >= 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;
            }
        }
        else if (this.buttonPrefix == "women") {

            //if (s) {
			if (typeof s != "undefined") {
                if (s.channel) {
                    thisChannel = s.channel;
                    if (thisChannel.indexOf(this.buttonPrefix) >= 0) {
                        this.parentButton.className = this.parentDimState;
                    }
                }
            }
        }
    },

    highlight: function(thisButton, thisClassName) {

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

        this.highligtOrDimParentButton();
    },

    //called from drop down button 
    dim: function(thisButton, thisClassName) {
        this.setTimer();
        var newClassName = thisClassName.replace('_selected', '_notSelected');
        $(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 womenShowDropDownHandler = function() { womenButton.showDropDown(); };
var womenHideDropDownHandler = function() { womenButton.setTimer(); };
var womenButton;

if(location.pathname != "/checkout/order.do"){
	Event.observe(window, "load", function() {		
		
		womenButton = new TopNavDropDown('division5360', 'women', '49708', '49709');

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



var topNav = {
		divisionOver : function(thisButtonId, isSelected){
			var thisButton = $(thisButtonId);
			var thisClass = thisButton.className;
			
			if(thisClass.indexOf("_selected") < 0 ){
				thisButton.className = "topnavSprite_" + thisButtonId + "_selected"; 
			}else{
				thisButton.parentNode.setAttribute("onmouseout", "topNav.divisionOut('" + thisButtonId + "', true);");
			}
		},
		divisionOut : function(thisButtonId, isSelected){
			if(!isSelected){
				$(thisButtonId).className = "topnavSprite_" + thisButtonId + "_notSelected"; 
			}
		}
	};