brand.view = {};

/**
 * Add css classnames to form elements for IE6
 * @memberOf brand.view
 */
brand.view.setFormSelectors = function() {
    //console.log("brand.setFormSelectors");
    $$("INPUT[type=text]").invoke("addClassName","input-text");
    $$("INPUT[type=password]").invoke("addClassName","input-password"); 
    $$("INPUT[type=image]").invoke("addClassName","input-image"); 
}

/**
 * Apply rollover behavior to images w/ class "rollover"
 * @memberOf brand.view
 */
brand.view.initRollovers = function() {
    $$("img.rollover").each(function(el) { 
        var rollover = new brand.rollover(el, null); 
    }); 
}


/**
 * brand.view.colorNav
 * swf bordering globalnav that displays a clickable gradient of colors
 * Navigates to color browser
 * @memberOf brand.view
 */
brand.view.colorNav = {
   abort: false,
   placeholder: "color_nav_placeholder",
   flashid: "color_nav",
   offW: 8,
   onW: 90,
   timer: null,
 
   embed: function() { 
        if (brand.view.colorNav.abort) return;
        
        if (generic.env.isSafari) {
            var cn = $("color_nav_container");
            if (cn) { cn.style.display = "none"; }
            this.placeholder = "color_nav_placeholder_standalone";
            this.flashid = "color_nav_standalone";
        } 
        
        var params = {
            menu: "false",
            movie: "/flash/color_nav/color_nav.swf",
            flashvars: {
                gradient_uri: "/flash/color_nav/assets/color_gradient.png",
                application_uri: "/flash/color_play/index.tmpl",
                application_query_string: "?colorplaysample="
            }
        };
    
        var attr = {
            id: this.flashid,
            name: this.flashid,
            data: "/flash/color_nav/color_nav.swf",
            width: this.offW
        };
        
        if (generic.flash.playerversion) {
            attr.playerversion = generic.flash.playerversion;
        }
 
        if ($(this.placeholder)) generic.flash.embed(attr, params, this.placeholder);  
    },
    setWidth: function(e) {    
        if (e=="mouseover") { 
             clearTimeout(brand.view.colorNav.timer);  
             $(this.flashid).style.width = this.onW + "px";  
        } else {     
             brand.view.colorNav.timer = setTimeout(function(){    
                 $(brand.view.colorNav.flashid).style.width = brand.view.colorNav.offW + "px";     
             }, 600);
        }
    
    }    
}

/*
 * brand.view.utilityNav
 * sets up visual toggling of utility nav button fields
 * hooks up email & locator fields to emailSignup & locator classes if applicable
 * NOTE: search initialized from brand.search Class
 * @memberOf brand.view
 */
brand.view.utilityNav = {
    
    formelements: {},    
    buttonsets: {},
    minTop: 400, // minimum num of pixels from top of body to beginning of utility nav
    
    init: function(args) {

        // button/form field toggling
        var container = $("utilitynav");
        if (!container) return false;
        var nodes = container.select('.utilitynav_button');
        var self = this;
        if (args.minTop) this.minTop = args.minTop;

        nodes.each(function(node) {
            // button/form pair toggling relies on naming convention: utilitynav_[button or form]_[pair name]
            if (!node.id) return;
            var name = node.id.replace(/utilitynav_button_/g, "");
            var formnode = $("utilitynav_form_" + name);

            // get form element id's being used (not all locale's may have same elements)
            //var ftext = dojo.query("input[type=text]", formnode);
            var fieldnode = formnode.select("input[type=text]")[0];            
            var fieldsubmit = formnode.select("input[type=image]")[0];
            
            if (name && formnode && fieldnode) {
                self.buttonsets[node.id] = name;
                self.buttonsets[fieldnode.id] = name;
                self.buttonsets[fieldsubmit.id] = name;
                
                self.formelements[name] = { field: fieldnode, submit: fieldsubmit };
                node.observe("click", function() {
                    self.showForm(node);
                });
                fieldnode.observe("blur", function() {
                    self.showButton(fieldnode);
                });
                fieldsubmit.isfocused = false;
                fieldsubmit.onfocus = function() { 
                    this.isfocused = true;
                }
                fieldsubmit.observe("blur", function() {
                    self.showButton(fieldsubmit);
                });
            }       
        });

        // form submits: email signup & locator     
        if (this.formelements.email) {
            this.initEmailSignup(this.formelements.email);
        }
        if (this.formelements.locator) {
            this.initLocator(this.formelements.locator);
        }

    },

    showForm: function(node) {
        var shownode, hidenode;
        var hidenode = node;
        var name = this.buttonsets[node.id];
        var shownode = $("utilitynav_form_" + name);
        this.toggle(hidenode, shownode);
        
        // focus on field
        var focusnode = (this.formelements[name] ? $(this.formelements[name].field) : null);
        if (!focusnode) { return; }
        focusnode.focus();
        focusnode.value = "";
        focusnode.isfocused = true;
    },

    showButton: function(node) {
        var shownode, hidenode;
        node.isfocused = false;
        var name = this.buttonsets[node.id];
        var self = this;
        var submitbtn = $(this.formelements[name].submit);
        var field = $(this.formelements[name].field);
        var hidenode = $("utilitynav_form_" + name);
        var shownode = $("utilitynav_button_" + name);
        
        // wait for animation to finish
        var pause = function() {
            if (!submitbtn.isfocused && !field.isfocused) {
                self.toggle(hidenode, shownode);           
            }
        }
        setTimeout(pause, 200);
    },
    
    toggle: function(hidenode, shownode) {
        if (hidenode && shownode) {
            hidenode.style.display = "none";
            shownode.style.display = "block";
        }
    },
    
    initEmailSignup: function(formelements) {
        if (site.account && site.account.emailSignup) {
            site.account.emailSignup.init({
                submitNode: formelements.submit,
                fieldNode: formelements.field
            });
        } else {
            console.log("(site || brand).account.emailSignup not found");
        }

    },
    
    initLocator: function(formelements) {
        if (site.locator) {
            site.locator.init({
                submitNode: formelements.submit,
                fieldNode: formelements.field
            });
        } else {
            console.log("(site || brand).locator not found");
        }

    }
}


brand.view.flashPopover = { 
    params: {  
        wmode: "transparent"
    },
    attr: {
        id : "page_overlay",
        name: "page_overlay",
        height: "84",
        width:"245",  
        bgcolor: "#000" 
    },
    embed: function() {
        if (!$("page_overlay_div")) return; 
        var params = this.params;
        var attr = this.attr;
        params.movie = $("page_overlay_div").getAttribute("swf");
        attr.data = $("page_overlay_div").getAttribute("swf");
        generic.flash.embed(attr, params, "page_overlay_div");  
    },
    close: function() {  //called by shipping swf
        $("page_overlay_container_div").addClassName("page_overlay_container_div_closed"); 
        //console.log("brand.view.flashPopover.close()");
    }   
}
      

/*
 * brand.view.footer
 * Applies behavior to footer container and country chooser menu
 * @memberOf brand.view
 */
brand.view.footer = {  
    adjust: function() { 
        if (generic.env.isIE6) {
            var footerNode = $("footernav");
            this.initIELayerFix(footerNode);
            var footer = new brand.bottomFixed({
                node: footerNode
            });
        }
        
        var utilityNav = new brand.bottomFixed({
            node: $("utilitynav"),
            minTop: brand.view.utilityNav.minTop
        }); 
        
        //country chooser drop-up
        var footerMenu = new brand.menu({
            menu: "countries_container",
            target: "countries_hd"
        }); 
    
    },
    
    // IE workaround:
    // Puts an iframe behind the footer in IE so windowed elements (<select>'s) don't show through
    initIELayerFix: function(footer) {
        if (!footer) return;
        var iframe = new Element('iframe', { "id": "footer_iframe", "src": "/includes/blank.html", "frameborder": "0",  "marginwidth": "0", "marginheight": "0", "scrolling": "no" });
        footer.insert({ "top": iframe });
        var footerContent = $("footernav_content");
        var offset = iframe.offsetHeight; 
        // move the footer content up so it's on top of the iframe
        if (footerContent) {
            footerContent.style.marginTop = "-" + offset + "px";
        }
    }
};
    

/*
 * brand.view.heightHandler
 * manage height changes for/caused by absolutely positioned elements
 * @memberOf brand.view
 */
brand.view.heightHandler = { 
    pagetype: null,
    min: 620,
    winh: 0, // re-saved everytime window height changes
    bodyh: 0,
    bodyhOriginal: 0, // onload is saved as original height of body
    bodyhWithoutPanel: 0, // current body height w/out additional height of sliding panel
    offset: 0, // height as offset by footer (calculated on init)
    isCMS: false,
    spacer: null, // node to resize to affect body height
    isLoading: false,
    isResizing: false,
    timer: null,
    isIE6: false,
    hasCMSLayers: false,
    
    pagetypeAttributes: {
        "checkout" : { exclude: true },
        "flash_landing" : { fixedScrolling: true, fillsWindow: true }, // ex: home
        "full_window_flash" : { fillsWindow: true }, // ex: custom palette
        "full_window" : { fillsWindow: true }, // ex: full window image
        "flash_browser" : { excludeOnload: true, excludeOnResize: true }, // contain their own resize functions // NOTE: excludeOnResize USED TO JUST be color_play, now we're trying OTHER PRODUCT BROWSERS HERE
        "locator" : { excludeOnload: true }
    },
    
    init: function() {
        // get page type
        if (this.pagetype) { 
            type = this.pagetype;
        } else {
            try {
                this.pagetype = page_data.panel_nav["default"].id;
            }
            catch (e) { };
        }
        var pageAttributes = this.pagetypeAttributes[this.pagetype];
//console.log("heighthandler: this.pagetype = "+this.pagetype);
        
        this.isCMS = (page_data ? page_data.cms_generated : null);
        var cmslayers = $$("#main_content_td .cms_layer");
        this.hasCMSLayers = !!cmslayers.length;
        var useSetCMSHeightContainer = $$("#main_content_td .set-cms-container-height")[0];
        if (this.hasCMSLayers && useSetCMSHeightContainer) {
            this.setCMSHeight(useSetCMSHeightContainer, cmslayers); // ex: newsworthy
        } else if (this.isCMS || this.hasCMSLayers) {
            this.cmsCleanup(cmslayers);
        }
        
        if (pageAttributes && pageAttributes.exclude) { return; }
        if (!$("globalnav_container")) { return; } // ignore pages that don't have the global nav
        
        var spacer = $("column_spacer");        
        if (generic.env.isIE6) {
            this.isIE6 = true;
            var colorNav = $("color_nav_td");
            spacer = (colorNav ? colorNav : spacer); // if no color nav, don't set its height 
        }
        this.spacer = spacer;

        // get offset for footer
        var fnnode = $("footernav");
        this.offset = (fnnode ? fnnode.offsetHeight : this.offset); 
        
        // ensure that winh doesn't result in negative value later
        this.winh = this.getWindowHeight();
        if (this.winh <= this.offset) {
            this.winh = (this.offset * 2);
        }
        
        // SS NOTE: home was being excluded here, so put in equivalents, but not sure why it was being excluded
        if (!pageAttributes || (pageAttributes && !pageAttributes.fillsWindow)) {
            this.bodyhOriginal = document.body.scrollHeight; 
            this.bodyh = this.bodyhOriginal; 
        }
        
        this.onLoad(); 

        // handlers for events that can change window/body size
        var self = this;
        generic.events.observe("accordion:open", function(event) {
            self.onNavChange("show", event);
        });
        generic.events.observe("panelnav:show", function(event) {
            self.onNavChange("show", event);
        });
        generic.events.observe("panelnav:hide", function(event) {
            self.onNavChange("hide", event);
        });
        if (!pageAttributes || (pageAttributes && !pageAttributes.excludeOnResize)) {
            Event.observe(window, "resize", function() {
                self.onResize();
            });
        }
        
        this.isLoading = false;        
    },

    onLoad: function() {
        //console.log("heighthandler.onLoad");
        var pageAttributes = this.pagetypeAttributes[this.pagetype];
        if (pageAttributes && pageAttributes.excludeOnload) {
            if (!this.isIE6) {
                //console.log("heighthandler.onLoad: excluding");
                return;
            } else if (!$("color_nav_container")) {
                return;
            }
        }
        this.isLoading = true;        
        var h = (this.winh > this.min) ? this.winh : this.min; 
        var spacer = this.spacer;
  
        // home page: set height of spacer column to match window
        if (pageAttributes && pageAttributes.fillsWindow) {  
            h = (this.winh - this.offset);
            this.spacer = spacer = $("main_content");
            spacer.style.height = h + "px";
            
        // default: for sub pages
        } else {  
       
            // if body is shorter than window, set height to match window
            if (h >= this.bodyh) {    
                //console.log("body shorter than window");
                spacer.style.height = h + "px";  
                
            // IE6: cases where taller body requires explicitly setting spacer height 
            } else if (this.isIE6) {
                var colorNav = $("color_nav");  
                if (colorNav) { 
                    var maxh = (2800 > this.bodyh) ? 2800 : this.bodyh;
                    colorNav.style.height = this.bodyh + "px";
                    setTimeout(function() {
                        colorNav.style.height=maxh+"px";
                    }, 2000);  
                          
                }
                
                spacer.style.height = this.bodyh + "px"; 
            
            // for flash browsers, set spacer height to at least window initially, since flash could resize itself to shorter than window w/out triggering the resize event
            //} else if (this.pagetype === "flash_product_browser") {
            //    spacer.style.height = h + "px";
            }
        }

        this.bodyhOriginal = this.bodyh = this.bodyhWithoutPanel = h;
    },

    onNavChange: function(action, args) {
        var pageAttributes = this.pagetypeAttributes[this.pagetype];
        //if (pageAttributes && pageAttributes.fixedScrolling) return;
        //console.log("brand.view.heightHandler: onNavChange");
        
        if (this.isResizing) { return; }
        var type = args.type;
        var parentId = args.parentId;
        // ignore gnav accordion
        if (parentId === "globalnav_container" && type === "accordion") {
            return;
        }              
        var spacer = this.spacer;
        var id = args.id;
        if (type === "panel") {
            this.activePanelId = id;
        }
        
        var panel = $(this.activePanelId);
        if (!panel) { return; } // ex: open panels
        this.isResizing = true; // set isResizing after all non-returnable conditions met
        var self = this;
                
        //console.log("/panelnav/event/"+action+", id = "+id+" panel to check = "+this.activePanelId+" type = "+type+" panel node = "+panel+" parent id = "+parentId);
    
        // wait for animation to finish
        var pause = function() {
            if (action === "hide" && type === "panel") {
                var h = self.bodyhWithoutPanel;
                // compare pre-panel open body height against window height
                if (h < self.winh) {
                    h = self.winh;
                }
                //console.log("CLOSE: h = "+h+" self.bodyhWithoutPanel = "+self.bodyhWithoutPanel);
                spacer.style.height = h + "px";
                self.bodyh = h;
            } else if (action === "show") {
                var panelh = panel.offsetHeight;
                // compare against window & last known body height
                // (getting current body height here not consistent across browsers)
                if (panelh > self.winh && panelh > self.bodyh) {
                    spacer.style.height = panelh + "px";
                    self.bodyh = panelh;
                }           
            }
            self.isResizing = false;
        }
        setTimeout(pause, 600); // note: should be equal to or greater than duration of open/close Panel sliding       
    },
    
    onResize: function() {
        if ((this.isResizing || this.isLoading) && !this.isIE6) { return; }
        var winh = this.getWindowHeight();
        var bodyh = this.bodyh;        
        var page = this.pagetype;
        var pageAttributes = this.pagetypeAttributes[page];
        if (winh > bodyh) {  
            this.doResize(page, winh);
        } else if (pageAttributes && pageAttributes.fillsWindow) { // page is supposed to fill window & winh is less than bodyh
            if ((winh < this.min) && (this.min > bodyh)) { 
                this.doResize(pageAttributes, this.min);
            }
            
        // workaround for IE6: when contents in main body change dynamically (ex: elements load/display after page load), then we have to get/set height again
        } else if (this.isIE6) {            
            bodyh = document.body.scrollHeight;
            if (bodyh != this.bodyh) {
                this.doResize(page, bodyh);
                this.bodyh = bodyh;
            }
        }
        this.winh = winh;
    },
    
    doResize: function(pageAttributes, elementh) {
        var timer = this.timer;
        var spacer = this.spacer;
        var offset = this.offset;
        var h = elementh;
        var self = this;
        var resize = function() {
            if (pageAttributes && pageAttributes.fillsWindow) { h = (elementh - offset); }
            spacer.style.height = h + "px";
            self.bodyh = self.bodyhWithoutPanel = h;
        };      
    
        // avoid IE resize recursion
        if (this.isIE6) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(resize, 300);
        } else {
            resize();
        }     
    },
    
    getWindowHeight: function() {
        var h;
        if (typeof window.innerHeight !== 'undefined') {
            h = window.innerHeight;
        } else {
            h = document.documentElement.clientHeight;
        }
        return h;
    },
    
    setCMSHeight: function(container, cmslayers) {
        var h = 0;
        var nodes = cmslayers;
        if (cmslayers.length==0) { return 800 }; /** cms_generated flag inaccurately set **/
        var thisNodeBottom;
        var lastNode = cmslayers[0];
        var lastNodeBottom = 100; // arbitrary non-zero min
        // figure out which node is last on page
        cmslayers.each(function(node, ix) { 
            thisNodeBottom = parseInt(node.style.top) + parseInt(node.style.height);
            if (lastNode && lastNodeBottom) {
                if (lastNodeBottom < thisNodeBottom) {
                    lastNodeBottom = thisNodeBottom;
                    lastNode = node; 
                }
            }
        });
        // use top+height value of last node to set height for whole container
        container.style.height = (lastNodeBottom + 40 + "px"); // add 40 slop
    },
    
    cmsCleanup: function(cmslayers) { 
        var cmsBlocks = []; 
        cmslayers.each(function($_) {  
            pushNew(cmsBlocks,$_.ancestors()[0]);
        });
        cmsBlocks.each(function($_) { 
            if (!$_.hasClassName("noCMSCleanup")) {
                parseCMSLayers($_);
            }
        });
        //console.log("heightHandler.cmsCleanup");
      
        function parseCMSLayers(parentDiv) { 
            var moved = false; 
            if (parentDiv.hasClassName("hidden")) {  
                moved = true;
                parentDiv.origLeft = parentDiv.style.left;  
                parentDiv.style.left = "-5000px";
                parentDiv.removeClassName("hidden");
            }
            var input = parentDiv.select(".cms_layer");  
            var output = input.sort(function(a,b){return parseInt(a.style.top) - parseInt(b.style.top)}); 
            
            var outputRows = [];
            var outputFinal = [];
            outputRows[0] = [];
            var oIndex = 0;
            var previousTop = 0;
        
            for (var i=0;i<output.length;i++) { 
                output[i].style.height = "auto";  
                output[i].cmsTop = parseInt(output[i].style.top); 
                output[i].actualHeight = parseInt(output[i].clientHeight);   
                output[i].impliedTopMargin = (i==0) ? output[i].cmsTop : output[i].cmsTop - output[i-1].cmsTop - output[i-1].actualHeight; 
                //console.log(output[i].id + " " + output[i].actualHeight);
                previousTop = (i==0) ? output[i].style.top : output[i-1].style.top;
                
                if (output[i].style.top==previousTop) {//same row
                     
                } else {//next row
                    outputRows[oIndex] = outputRows[oIndex].sort(function(a,b){return  parseInt(a.style.left) -  parseInt(b.style.left)});    
                    oIndex++; 
                    outputRows[oIndex] = [];
                }
                outputRows[oIndex].push(output[i]);
            }
            outputRows[oIndex] = outputRows[oIndex].sort(function(a,b){return  parseInt(a.style.left) -  parseInt(b.style.left)}); 
      
            var o = {}; var css = ""; 
            var adjust = (parentDiv.id == "main_content_td" ) ? 476 : 0;
            for (var i=0;i<outputRows.length;i++) { 
                for (var j=0;j<outputRows[i].length;j++) { 
                    o = outputRows[i][j]; 
                    css = "position:relative;"
                    css += "width:" + o.style.width + ";";  
                    css += "height:" + o.actualHeight + "px;";
                    css += "margin-left:" + (parseInt(o.style.left)-adjust) + "px;";
                    css += "margin-top:" + o.impliedTopMargin + "px;"; 
                    o.style.cssText = css;  
                    parentDiv.appendChild(o);
                } 
            }   
     
            if (moved) { 
                 parentDiv.addClassName("hidden")
                 parentDiv.style.left = parentDiv.origLeft; 
            }  
        }
    
        function pushNew(arr,o) {  
            var n = true;
            for (var i=0;i<arr.length;i++) {
                if (arr[i]==o) {n = false;break;}
            }
            if (n) arr.push(o);   
        }      
/*       
        try {
            var colorNav = (generic.env.isSafari) ? $("color_nav_standalone") : $("color_nav");  
            colorNav.style.height = ($("main_table").scrollHeight + $("footernav").clientHeight + 50) +  "px"; 
        } catch(e) {}
*/
    }   
};