function tabOn(myTab,myId,tabClass) {
    myTabsOn = xGetElementsByClassName('tab-on',null,'DIV');
    for(i=0; i<myTabsOn.length; i++) {
        myTabsOn[i].className = 'tab';
    }
    myTab.className = 'tab-on';
    myCats = xGetElementsByClassName(tabClass,null,'DIV');
    for(i=0; i<myCats.length; i++) {
        xDisplay(myCats[i],'none');
    }
    xDisplay(myId,'block');
    //myCurCat = xGetElementById(myId);
    //myTabCur.className = 'tab-on';
}



// XFenLight based on XFenster:
// xFenster, Copyright 2004-2005 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xFenLight(eleId, iniX, iniY, barId) { // object prototype
    // Private Properties
    var me = this;
    var ele = xGetElementById(eleId);
    var x, y, w, h, maximized = false;
    // Public Methods
    this.onunload = function() {
        if (xIE4Up) { // clear cir refs
            xDisableDrag(barId);
            me = ele = null;
        }
    }
    this.show = function() {
        //showSelects(false);
        xDisplay(ele,'block');
        stopSelectDis();
    }
    this.hide = function() {
        //showSelects(true);
        xDisplay(ele,'none');
    }
    // Private Event Listeners
    function barOnDrag(e, mdx, mdy) {
        xMoveTo(ele, xLeft(ele) + mdx, xTop(ele) + mdy);
    }
    function fenOnMousedown() {
        xZIndex(ele, xFenLight.z++);
    }
    // Constructor Code
    xFenLight.z++;
    xMoveTo(ele, iniX, iniY);
    xEnableDrag(barId, null, barOnDrag, null);
    if (ele) {
        ele.onmousedown = fenOnMousedown;
    }
    
}   // end xFenster object prototype

xFenLight.z = 100; // xFenster static property

function showSelects(isVisible,myClass) {
    if (xIE4Up) {
        if (myClass) {
            mySelects = xGetElementsByClassName(myClass,null,'SELECT');
        } else {
            mySelects = xGetElementsByTagName('SELECT');
        }
        for(i=0; i<mySelects.length; i++) {
            xVisibility(mySelects[i],isVisible);
        }
    }
}

function xImgRollClear() {
    for (var i=0; i<arguments.length; ++i) {
        id = arguments[i];
        if (ele = xGetElementById(id)) {
            ele.onmouseout = null;
            ele.onmouseover = null;
        }
    }
}
function unNavRolls() {
    xImgRollClear('adult-costumes','plus-size','kids-costumes','makeup','hats-wigs','masks','pet-costumes');
    xImgRollClear('shopping-cart','my-account','customer-service','shipping');
}
function navRolls() {
    xImgRollSetup(_IMAGE_ROOT_+'/img/nav/','-on','.png','adult-costumes','plus-size','kids-costumes','makeup','hats-wigs','masks','pet-costumes');
    xImgRollSetup(_IMAGE_ROOT_+'/img/nav/','-on','.gif','shopping-cart','my-account','customer-service','shipping');
}

//xAddEventListener(window,'load');
//xAddEventListener(window,'unload');


function xImgMenu2(path, ovrSuffix, fileExt, triggerId, menuId, mouseMargin, openEvent, offsetX, offsetY, delay) {
    timerSet = false;
    isOpen = false;
    var trg = xGetElementById(triggerId);
    var mnu = xGetElementById(menuId);
    mnu.effectBox = 'thebox';

    if (trg && mnu) {
        if (delay) {
            xAddEventListener(trg, openEvent, startTimer, false);
            xAddEventListener(trg, 'mouseout', checkTimer, false);
        } else
            xAddEventListener(trg, openEvent, onOpen, false);
    }
    function startTimer() {
        timerSet = true;
        callLater(delay, onOpen);
    }

    function checkTimer() {
        timerSet = false;
    }
    function onOpen() {
        if (! timerSet) return;
            if (!isOpen) {
                trg.src=path + triggerId + ovrSuffix + fileExt;
                xMoveTo(mnu, xPageX(trg)+offsetX, xPageY(trg)+ offsetY + xHeight(trg));
                xDisplay(mnu,'block');
                showSelects(false,'hider');
                xShow(mnu.effectBox);
                openEffect(menuId);
                isOpen = true;
            }
        function onMousemove(ev) {
            var e = new xEvent(ev);
            if (!xHasPoint(mnu, e.pageX, e.pageY, -mouseMargin) &&
                !xHasPoint(trg, e.pageX, e.pageY, -mouseMargin))
            {
                xHide(mnu);
                showSelects(true,'hider');
                xRemoveEventListener(document, 'mousemove', onMousemove, false);
                trg.src=path + triggerId + fileExt;
                isOpen = false;
            }
        }
        mnu.savemousemove = onMousemove;
    }
} // end xMenu1


function openEffect(menuId) {

    e = xGetElementById(menuId);
    var btop = xTop(e);
    var bleft = xLeft(e);
    var bwidth = xWidth(e); //500;
    var bheight = xHeight(e); //300;
    var increment = .2; //this is a percentage
    var myBox = xGetElementById(e.effectBox);

    curHeight = xHeight(myBox);
    curWidth = xWidth(myBox);

    curHeight += bheight*increment;
    curWidth += bwidth*increment;

    //if either height or width goes over width or height, hide box, show menu, reset box
    if (curWidth>bwidth||curHeight>bheight) {
        myBox.style.top = btop+'px';
        myBox.style.left = bleft+'px';
        myBox.style.width = '1px';
        myBox.style.height = '1px';
        xAddEventListener(document, 'mousemove', e.savemousemove, false);
        xHide(myBox);
        xShow(e);
    } else {
       myBox.style.top = btop+'px';
       myBox.style.left = bleft+'px';
       myBox.style.width = curWidth+'px';
       myBox.style.height = curHeight+'px';

       window.setTimeout("openEffect('"+menuId+"')",30);

    }
}

function loadMenus() {
    applyDropShadow('mnu-new','/img/');
    applyDropShadow('mnu-specialty','/img/');
    new xImgMenu2('/img/nav/','-on','.gif','whats-new', 'mnu-new', 3, 'mouseover', 0, 4, 1);
    new xImgMenu2('/img/nav/','-on','.gif','specialty-shoppes', 'mnu-specialty', 3, 'mouseover', 0, 4, 1);
}


//code to absolutely position drop shadows
function applyDropShadow(e,imgPath) {
    //todo:
    //dont set negative heights (ie when something set to display:none)
    //fix when applied to borders
    //get to work with fenster?

    e=xGetElementById(e);
    var x = xPageX(e);
    var y = xPageY(e);
    var width = xWidth(e);
    var height = xHeight(e);

    //where are we appending
    if (e.hasChildNodes()) {
        positioning = xGetComputedStyle(e,'position');
        if (positioning=='relative'||positioning=='absolute') {
            x=0;
            y=0;
        }
    } else {
            e = document.body;
    }

    zind = xGetComputedStyle(e,'z-index');

    if (zind > 0) {
        zind = zind+1;
    } else {
        zind = 1;
    }

    //add corners
    var topLeftCorner = xCreateElement('IMG');
    topLeftCorner.style.position = 'absolute';
    topLeftCorner.style.zindex = zind;
    topLeftCorner.src = imgPath+'ow-drop-tl.png';
    topLeftCorner.className = 'alpha';

    var topRightCorner = xCreateElement('IMG');
    topRightCorner.style.position = 'absolute';
    topRightCorner.style.zindex = zind;
    topRightCorner.src = imgPath+'ow-drop-tr.png';
    topRightCorner.className = 'alpha';

    var bottomRightCorner = xCreateElement('IMG');
    bottomRightCorner.style.position = 'absolute';
    bottomRightCorner.style.zindex = zind;
    bottomRightCorner.src = imgPath+'ow-drop-br.png';
    bottomRightCorner.className = 'alpha';

    var bottomLeftCorner = xCreateElement('IMG');
    bottomLeftCorner.style.position = 'absolute';
    bottomLeftCorner.style.zindex = zind;
    bottomLeftCorner.src = imgPath+'ow-drop-bl.png';
    bottomLeftCorner.className = 'alpha';
    bottomLeftCorner.style.width = '8px';

    xAppendChild(e, topLeftCorner);
    xAppendChild(e, topRightCorner);
    xAppendChild(e, bottomRightCorner);
    xAppendChild(e, bottomLeftCorner);

    //bottom corner heights should match, and right corner widths should match!!
    var bottomHeight = 11;
    var rightWidth = 10;

    //pixels of bottomheight, rightwidth that is the border, includes the actual border and the inside transparent area
    var rightBorderWidth = 5;
    var bottomBorderWidth = 5;

    //pixels to expand box outwards (so it covers the square corners of the box we're surrounding)
    var expandOffset = 1;

    //other needed corner dimensions
    var topLeftHeight = 5;
    var topLeftWidth = 5;
    var topRightHeight = 8;
    var bottomLeftWidth = 8;

    //create bottom and right shadows

    var topBorder  = xCreateElement('DIV');
    topBorder.className = 'border-top';
    topBorder.style.width =(width-topLeftWidth-rightBorderWidth+2*expandOffset)+'px';
    topBorder.style.zindex = zind;
    topBorder.innerHTML = '&nbsp;';

    var rightShadow = xCreateElement('DIV');
    rightShadow.className = 'shadow-right';
    rightShadow.style.width=rightWidth+'px';
    rightShadow.style.height=(height-topRightHeight-bottomBorderWidth+2*expandOffset)+'px';
    rightShadow.style.zindex = zind;
    rightShadow.innerHTML = '&nbsp;';

    var bottomShadow = xCreateElement('DIV');
    bottomShadow.className = 'shadow-bottom';
    bottomShadow.style.width=(width-bottomLeftWidth-rightBorderWidth+(2*expandOffset))+'px';
    bottomShadow.style.height=bottomHeight+'px';
    bottomShadow.style.zindex = zind;
    bottomShadow.innerHTML = '&nbsp;';

    var leftBorder  = xCreateElement('DIV');
    leftBorder.className = 'border-left';
    leftBorder.style.height = (height-topLeftHeight-bottomBorderWidth+2*expandOffset)+'px';
    leftBorder.style.zindex = zind;
    leftBorder.innerHTML = '&nbsp;';

    //alert(width-blWidth-brWidth+(2*expandOffset));

    xAppendChild(e, rightShadow);
    xAppendChild(e, bottomShadow);
    xAppendChild(e, topBorder);
    xAppendChild(e, leftBorder);

    //position everything
    xMoveTo(topBorder,x+topLeftWidth-expandOffset,y-expandOffset);
    xMoveTo(leftBorder,x-expandOffset,y+topLeftHeight-expandOffset);
    xMoveTo(rightShadow,x+width-rightBorderWidth+expandOffset,y+topRightHeight-expandOffset);
    xMoveTo(bottomShadow,x+bottomLeftWidth-expandOffset,y+height-bottomBorderWidth+expandOffset);

    xMoveTo(topLeftCorner,x-expandOffset,y-expandOffset);
    xMoveTo(topRightCorner,x+width-rightBorderWidth+expandOffset,y-expandOffset);
    xMoveTo(bottomRightCorner,x+width-rightBorderWidth+expandOffset,y+height-bottomBorderWidth+expandOffset);
    xMoveTo(bottomLeftCorner,x-expandOffset,y+height-bottomBorderWidth+expandOffset);
}

function stopSelectDis() {
    if (document.forms[1] && document.forms[1].countryGeoId) {
        document.forms[1].countryGeoId.style.position ='absolute';
        document.forms[1].countryGeoId.style.zIndex = '0';
    }
}
//scroller rollovers
function scrollerRolls() {
    xImgRollSetup('/img/home/','-over','.gif','scroll-up','scroll-down');
}
xAddEventListener(window,'load',scrollerRolls);


/* updated pop fucntions for Product page */

function openPop(url, top) {
    var XHR = new xHttpRequest();
    XHR.send("GET", url, "", 2000, "rnd", false, null, function(req, status, obj) {
        if (status == XHR.OK) {
            var popup = xGetElementById("popupMain");
            popup.innerHTML = req.responseText;
            popup.style.display  = "block"
            popup.style.position = "absolute";
            popup.style.zIndex   = "1000";
            if (top) {
                popup.style.top = top;
            } else {
                popup.style.top = "100px";
            }
            popup.style.left     = "100px";
        }
    });
}

function swapTab(url) {
    var XHR = new xHttpRequest();
    XHR.send("GET", url, "", 2000, "rnd", false, null, function(req, status, obj) {
        if (status == XHR.OK) {
            var tab = xGetElementById("tabContent");
            tab.innerHTML = req.responseText;
            //popup.style.display  = "block"
        }
    });
}
function swapTabNoAjax(url) {
    var tab = xGetElementById("tabContent");
    //tab.innerHTML = $(url);
    tab.style.display  = "block"
}

function closePop() {
    var popup = xGetElementById("popupMain");
    popup.style.display = "none";
    popup.innerHTML = "";
}