/** @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));
}

/* For email signup */

// rewrite to use brx jp common libraries
el.page.initEmailSignup = function() {
		var emailInputNode = null;
		var emailContainerNode = null;
		var emailFormNode = null;
		var emailSubmitNode = null;
		var emailProgressNode = null;
		emailContainerNode = $$("div.email-signup-container");
		if (!emailContainerNode) {
			return null;
		}
		emailContainerNode.each(function(formEle) {
			var emailFormNode = formEle.select("form")[0];
			//var emailSubmitNode = formEle.select("input.input-image")[0];
			var emailProgressNode = formEle.select("span.progress")[0];
			var emailInputNode = formEle.select("input.email-signup")[0];
			var errorContainerNode = formEle.select(".error_messages")[0];
			emailFormNode.observe("submit", function(submitEvt) {
				submitEvt.preventDefault();
				//emailSubmitNode.addClassName("hidden");
				emailProgressNode.removeClassName("hidden");
				var params = emailFormNode.serialize(true);
				generic.jsonrpc.fetch({
					method : 'rpc.form',
					params: [params],
					onSuccess:function(jsonRpcResponse) {
						emailProgressNode.addClassName("hidden");
						//emailSubmitNode.removeClassName("hidden");
						//var d = jsonRpcResponse.getData();
						//var rb = generic.rb('language');
						//var msg = rb.get("email_signup_text");
						document.location.href='/account/email_signup/thankyou.tmpl';	
						//generic.showErrors([{text: msg, displayMode: "message"}]);

					},
					onFailure: function(jsonRpcResponse){
						var errorObjectsArray = jsonRpcResponse.getMessages();
						generic.showErrors(errorObjectsArray,errorContainerNode);
						emailProgressNode.addClassName("hidden");
						emailSubmitNode.removeClassName("hidden");
					}
				});
			});
		});
	};

var popup_timeout;

el.page.show_signup = function() {
    if (popup_timeout){ clearTimeout(popup_timeout) }
    $('email_sign_up_popover_div').style.display='block';
	//alert ($('email_sign_up_popover_div').style.display);
};

el.page.hide_signup = function() {
    popup_timeout = setTimeout( function(){ 
        $('email_sign_up_popover_div').style.display='none';   
        $('email_sign_up_popover_error_div').style.display='none';
    }, 1000);
};
/* /For email signup */

var quick_view = {};
quick_view.render = function(categoryId, productId) {
    if ( ! productId.toString().match(/^PROD/) ) {
        productId = "PROD" + productId;
    }
    
    if ( ! categoryId.toString().match(/^CAT/) ) {
        categoryId = "CAT" + categoryId;
    }
    
    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;
};

el.page.loadLiveChatButtons = function() {
    // Create an image object for the livechat button.
    // We want to do this asap because this image sometimes takes a while to load
    // due to the logic and roundtrip time to query the liveperson server.
    // I put this in this file due to its dependence on the above uri object.
    var uri = window.location;
    var uri_protocol = uri.protocol;
    var URL_DOMAIN = uri.protocol + "//" + uri.host;
    var timestamp = Number(new Date());
    
    var liveChatButtonImageObj = new Image();
    liveChatButtonImageObj.src = uri_protocol+'//service.liveperson.net/hc/24631554/?cmd=repstate&site=24631554&channel=web&&ver=1&imageUrl='+URL_DOMAIN+'/images/liveperson/product&skill=EL%20Germany&timestamp='+timestamp;
    liveChatButtonImageObj.name="hcIcon";
    liveChatButtonImageObj.style.border="0";
        
    // Load any livechat links with the button above
	$$('a.livechatlink').each(function(el){
		if ( el.empty() ) {
			var img = new Image();
			if (el.id == 'livechatlinkrenutriv') {
			    img.src = uri_protocol+'//service.liveperson.net/hc/24631554/?cmd=repstate&site=24631554&channel=web&&ver=1&imageUrl='+URL_DOMAIN+'/images/liveperson/renutriv&skill=EL%20Germany&timestamp='+timestamp;
			} else if (el.id == 'livechatlinkcategory') {
			    img.src = uri_protocol+'//service.liveperson.net/hc/24631554/?cmd=repstate&site=24631554&channel=web&&ver=1&imageUrl='+URL_DOMAIN+'/images/liveperson/category&skill=EL%20Germany&timestamp='+timestamp;
			} else if (el.id == 'livechatlinkspp') {
			    img.src = uri_protocol+'//service.liveperson.net/hc/24631554/?cmd=repstate&site=24631554&channel=web&&ver=1&imageUrl='+URL_DOMAIN+'/images/liveperson/spp&skill=EL%20Germany&timestamp='+timestamp;
			    img.style.paddingLeft = "3px";
			} else {
			    img.src = uri_protocol+'//service.liveperson.net/hc/24631554/?cmd=repstate&site=24631554&channel=web&&ver=1&imageUrl='+URL_DOMAIN+'/images/liveperson/product&skill=EL%20Germany&timestamp='+timestamp;
			}
			img.name = liveChatButtonImageObj.name;
			img.style.border = liveChatButtonImageObj.style.border;
			el.update(img);
		}
	});
};

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