/** @namespace global namespace for all JS code on esteelauder.com site */
var el = el || {};

/** @namespace namespace for page-specific JS code */
el.page = {};

el.urlRoot = window.location.protocol + "//" + window.location.hostname;

// Limit the scope of a DOM node search to a 
// specific node. It's like $$() only the second 
// arg is a node so the whole document doesn't have to 
// be searched. Also useful if the node you want to search/find
// is not in the DOM yet
// el.query(".css_selector", DOMNode)
el.query = function() {
    var node = $A(arguments).pop();
    return Selector.findChildElements(node, $A(arguments));
}

var quick_view = {};
quick_view.render = function(categoryId, productId) {
    if (typeof productId === "number") {
        productId = "PROD" + productId;
    }
    
    el.productView.quickshopById(categoryId, productId);
}

el.page.quickshop = function() {
    $$('.quickshop-btn-init').each(function(btn) {
        el.page.quickshop.hookup(btn);
    });
    
    $$('.quickshop-btn-hide').each(function(btn) {
        var parent = btn.parentNode;
        $(parent).setStyle({"display" : "none"});
    });
    
    // text modules
    $$('.quickshop-txt-init').each(function(span) {
        el.page.quickshop.hookupText(span);
    });
}

el.page.quickshop.hookup = function(btn) {
    var productId = btn.getAttribute("productId");
    var categoryId = btn.getAttribute("categoryId");
    var disable = parseInt(btn.getAttribute("disable") || "0");
    var gp = btn.parentNode.parentNode;
    if ((!productId || !categoryId) || disable) {
        // don't try to hook up the button if
        // we can't get a category/product id
         
        // if there is no button, allow link to be
        // enabled
        if (gp && btn.hasClassName("quick-shop-mouseover") && !disable) {
            $(gp).setStyle({"display":"none"});
        } else if (btn.hasClassName("quick-shop-mouseover")) {
            el.page.quickshop.handle_mouseover(btn,gp);
        }
        
        return;
    }
        
    btn.observe("click", function(evt) {
        evt.preventDefault();
        el.productView.quickshopById(categoryId, productId);
    });
        
    // handle quick-shop mouseovers
    if (btn.hasClassName("quick-shop-mouseover")) {
        el.page.quickshop.handle_mouseover(btn,gp);
    }
}

el.page.quickshop.hookupText = function(span) {
    var productId = span.getAttribute("productId");
    var categoryId = span.getAttribute("categoryId");
    // need category/product id to call a quickview
    if (!productId || !categoryId) {
        return;    
    }
    
    span.observe("click", function(evt) {
        el.productView.quickshopById(categoryId, productId);
    });    
}

el.page.quickshop.handle_mouseover = function(btn,gp) {
    Event.observe(gp, "mouseover", function(evt) {
        btn.setStyle({"display": "block"});
    });
            
    Event.observe(gp, "mouseout", function(evt) {
        btn.setStyle({"display": "none"});
    });
           
    if (generic.env.isIE) {
        gp.style.backgroundImage = "url(/images/btn/btn_trans.gif)";
    }
            
    /* NOTE: Don't forget to add a 'position' attribute to your
     * button. Otherwise setting top and left is meaningless
     */
    var button_height = 22;
    var button_width = 84;
    var container_height = parseInt(gp.style.height.replace("px", ""));
    var container_width  = parseInt(gp.style.width.replace("px", ""));
    btn.style.top = ((container_height / 2) - (button_height / 2)) + "px";
    btn.style.left = ((container_width / 2) - (button_width / 2))+ "px";
}

el.page.shadowBox = {
    shadowTable: null,
    init: function(args) {
        var elm = (args.className) ?
            $$("."+ args.className)
            :
            $$(".shadow_container")
        ;
        
        this.shadowTable = this.shadowTable || this.create_shadow_table();
        
        var self = this;
        
        elm.each(function(container) {
            self.attachShadow(container);
        });
    },
    
    attachShadow: function(node) {
        var shadow = this.shadowTable.cloneNode(true);
        shadow.inner = el.query(".shadow_table_inner", shadow)[0];
           
        if (node.id != undefined && node.id.length > 0) {
            shadow.inner.className += " "+shadow.inner.className+"_for_"+node.id;
        }
            
        while (node.childNodes.length > 0) {
            shadow.inner.appendChild(node.childNodes[0]);
        }
           
        node.appendChild(shadow);
    },
    
    create_shadow_table: function() {
        var cnr_tl =  document.createElement("td");
        var cnr_tr =  document.createElement("td");
        var cnr_br =  document.createElement("td");
        var cnr_bl =  document.createElement("td");
        var bdr_t =  document.createElement("td");
        var bdr_r =  document.createElement("td");
        var bdr_b =  document.createElement("td");
        var bdr_l =  document.createElement("td");
        var bdr_l =  document.createElement("td");
        var shadow_table_inner = document.createElement("td");
        
        cnr_tl.className = "cnr_tl";
        cnr_tr.className =  "cnr_tr";
        cnr_br.className =  "cnr_br";
        cnr_bl.className =  "cnr_bl";
        bdr_t.className =  "bdr_t";
        bdr_r.className =  "bdr_r";
        bdr_b.className =  "bdr_b";
        bdr_l.className =  "bdr_l";
        shadow_table_inner.className = "shadow_table_inner";
        
        var row_top =  document.createElement("tr");
        var row_mid =  document.createElement("tr");
        var row_bot =  document.createElement("tr");
        
        row_top.className =  "shd_row_top";
        row_mid.className =  "shd_row_mid";
        row_bot.className =  "shd_row_bot";

        var tableBody = document.createElement("tbody");
        var shadowTable = document.createElement("table");
        shadowTable.className = "shadow_table";

        row_top.appendChild(cnr_tl);
        row_top.appendChild(bdr_t);
        row_top.appendChild(cnr_tr);
        
        row_mid.appendChild(bdr_l);
        row_mid.appendChild(shadow_table_inner);
        row_mid.appendChild(bdr_r);
        
        row_bot.appendChild(cnr_bl);
        row_bot.appendChild(bdr_b);
        row_bot.appendChild(cnr_br);
        
        tableBody.appendChild(row_top);
        tableBody.appendChild(row_mid);
        tableBody.appendChild(row_bot);
        
        shadowTable.appendChild(tableBody);
        
        return shadowTable;
    }
}

el.page.pngFix = function() {
    // TODO: Narrow this down to IE6 when generic code is in place
    // Need to do nodes with background image pngs
    
    return;
};

/* add page events */
document.observe("dom:loaded", function() {
    el.page.shadowBox.init({});
    
    // TODO: Not working yet
    el.page.pngFix();
    
    // scan page for quickshops
    el.page.quickshop();    
});