/** @namespace global namespace for all JS code on esteelauder.com site */
var brx = brx || {};
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();

	/* 36065 COG Sep 16 2010 - Fixed shadow table border issue in IE */
	try {
		var check =  Selector.findChildElements(node, $A(arguments));
	}
	catch (e) {
		var check = Selector.findChildElements(node, ['.shadow_table_inner'], ['*']);
	}

	return check;
	/* 36065 COG Sep 16 2010 - Fixed shadow table border issue in IE */
}

/* 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?email='+emailInputNode.value;	
						//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';
};

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);
};

el.page.hide_signup_now = function() {
    $('email_sign_up_popover_div').style.display='none';   
    $('email_sign_up_popover_error_div').style.display='none';
};

/* /For email signup */

var quick_view = {};
quick_view.render = function(categoryId, productId, skuId) {
    if ( ! productId.toString().match(/^PROD/) ) {
        productId = "PROD" + productId;
    }
    
    if ( ! categoryId.toString().match(/^CAT/) ) {
        categoryId = "CAT" + categoryId;
    }
    
    skuId = skuId || '';
    
    if ( skuId && ! skuId.toString().match(/^SKU/) ) {
        skuId = "SKU" + skuId;
    }
    
    // TODO: add sku subsets to quick_view.render
    el.productView.quickshopById(categoryId, productId, [], undefined, skuId);
}

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 skuIds;
    if (ids = btn.getAttribute("skuIds")) {
        skuIds = ids.split(",");
    } else {
        skuIds = [];
    }

    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();
        
        if ( ! productId.toString().match(/^PROD/) ) {
            productId = "PROD" + productId;
        }
        
        if ( ! categoryId.toString().match(/^CAT/) ) {
            categoryId = "CAT" + categoryId;
        }
        
        if (skuIds.length) {
            for (var i = 0; i < skuIds.length; i++) {
               if (! skuIds[i].toString().match(/^SKU/)) {
                   skuIds[i] = "SKU" + skuIds[i];
               } 
            }
        }
        el.productView.quickshopById(categoryId, productId, skuIds, evt.target);
    });
        
    // 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");
    
    var skuIds;
    if (ids = span.getAttribute("skuIds")) {
        skuIds = ids.split(",");
    } else {
        skuIds = [];
    }
    
    // need category/product id to call a quickview
    if (!productId || !categoryId) {
        return;    
    }
    
    span.observe("click", function(evt) {
        if (skuIds.length) {
            for (var i = 0; i < skuIds.length; i++) {
               if (! skuIds[i].toString().match(/^SKU/)) {
                   skuIds[i] = "SKU" + skuIds[i];
               } 
            }
        }
        
        el.productView.quickshopById(categoryId, productId, skuIds);
    });    
}

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"});
    });
         
    Event.observe(gp, "click", function(evt) {
        var target = evt.target;
        if (target.hasClassName('quickshop-btn')) {
            return;
        }
        
        Event.stop(evt);
        btn.simulate('click');
    });
    
    if (generic.env.isIE) {
        gp.style.backgroundImage = "url(/images/btn/btn_trans.gif)";
    }
    
    gp.setStyle({ cursor: 'pointer' });
    
    /* 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;
    }
}

Element.addMethods({
  pngHack: function(el){
    var el = $(el);
    if (!generic.env.isIE6) return el;
    var gif = '/images/common/s.gif';
    if ((el.match('img')) && (el.src.include('png'))){
      var alphaImgSrc  = el.src;
      var sizingMethod = 'image';
      el.src = gif;
    } else if (el.getStyle('backgroundImage').include('png')){
      var bgc = el.getStyle('backgroundColor') || '';
      var alphaImgSrc = el.getStyle('backgroundImage').gsub(/url\(|\)|'|"/, '');
      var sizingMethod = 'crop';
      el.setStyle({ background: [bgc, ' url(', gif, ') no-repeat'].join('') });
    } else {
      return el;
    }
    el.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{al}",sizingMethod="#{sz}")'.interpolate({ al: alphaImgSrc, sz: sizingMethod }); 
    return el;
  }
});

el.page.pngFix = function(rootNode) {
    // TODO: Narrow this down to IE6 when generic code is in place
    // Need to do nodes with background image pngs
    
	if (!generic.env.isIE6) return false;
	//alert(rootNode);
    var root = rootNode || $(document.body);
    root.select("img").each(function(img) {
        $(img).pngHack();
    });

};

el.page.contact_cs = {
    init: function() {
        var elm = document.getElementById("contact_cs");
        if (elm == undefined) return;
        if (elm.className == "") elm.className = "contact_cs_btn";
        elm.onmouseover = function() {
            this.className += " over";
        }
        elm.onmouseout = function() {
            this.className = this.className.replace(" over","");
        }
    }
};

el.page.tracking_add_ons = {
	init: function() {
		if(($$('iframe[name="google_conversion_frame"]')[0])){
			($$('iframe[name="google_conversion_frame"]')[0]).setStyle({position: 'absolute', left: '-1000px'});
		}
	}
};

el.page.facebookShare = function(args) {
    var cat   = args.categoryId;
    var prod  = args.productId;
    var img   = args.image;
    var url   = args.url;
    var title = args.title || '';
    var desc  = args.description || '';
    
    if ( ! cat.toString().match(/^CAT/) ) {
        cat = "CAT" + cat;
    }
    
    if ( ! prod.toString().match(/^PROD/) ) {
        prod = "PROD" + prod;
    }
    
    var parts = url.split('#');
    
    var tmplurl = [
        'http://www.esteelauder.com/product/facebook.tmpl?CATEGORY_ID=',
        cat,
        '&PRODUCT_ID=',
        prod,
        '&title=',
        encodeURIComponent(title),
        '&image=',
        encodeURIComponent(img),
        '&description=',
        encodeURIComponent(desc),
        '&refresh_url=',
        parts[0]
    ].join('');

    if ( parts[1] ) {
        tmplurl += encodeURIComponent( '#' + parts[1]);
    }

    var result = [
        "http://www.facebook.com/sharer.php?u=",
        encodeURIComponent(tmplurl)
    ].join('');
    
    return result;
}

brx.xmasZipCheck = function(options) {
  var callback, getCallback, onClose;
  options = options || {};
  getCallback = function (callback) {
    return (typeof callback === "function") ? callback : function (err, data) {};
  };

  callback = getCallback(options.callback);
  onClose = getCallback(options.onClose);

  new Ajax.Request("/includes/content/sat-xmas-zip-check-form.tmpl", {
    method: 'get',
    onSuccess: function (transport) {
      var $editDisplayNameForm, $errListNode, $shipAvaialble, $shipUnavailable;
      generic.overlay.launch({
        onClose: onClose,
        content: transport.responseText,
        includeBackground: true,
        cssStyle: {
          width: "485px",
          background: "#fff"
        }
      });
      $form = $$("form#sat-xmas-zip-check-form").first();
      $shipAvailable = $$("form#sat-xmas-zip-check-form .shipping-available").first();
      $shipUnavailable = $$("form#sat-xmas-zip-check-form .shipping-unavailable").first();
      $errListNode = $$("form#sat-xmas-zip-check-form ul.error_messages").first();
      Element.observe($form, "submit", function(event) {
        event.stop();
        var $zip = $$('form#sat-xmas-zip-check-form input[name="zip"]').first();
        $shipAvailable.hide();
        $shipUnavailable.hide();
        paramObj = {};
        paramObj.zip = $F($zip).strip();
        generic.jsonrpc.fetch({
          method: 'address.SaturdayAMDelivery',
          params: [paramObj],
          onSuccess: function (jsonRpcResponse) {
            var data = jsonRpcResponse.getValue();
            if (data.available == 1) {
              $shipAvailable.show();
            }
            else {
              $shipUnavailable.show();
            }
            callback(null, data);
          },
          onFailure: function (jsonRpcResponse) {
            var errorObjectsArray = jsonRpcResponse.getMessages();
            generic.showErrors(errorObjectsArray, $errListNode, $form);
            callback(errorObjectsArray);
          }
        }); // end jsonRpcWrapper.fetch 
      });
    }
  });
};

document.observe("dom:loaded", function() {
  if(location.hash == "#holiday_delivery") {
    brx.xmasZipCheck();
  }
});

el.page.notifyMe = function() {
	  $$('.notify-btn-init').each(function(btn) {
        el.page.notifyMe.hookup(btn);
    });
}

el.page.notifyMe.hookup = function(btn) {
    btn.observe("click", function(evt) {
        evt.preventDefault();
				generic.templatefactory.get({path: '/promotions/includes/popovers/mpp_po_notify_me.tmpl?productId='+btn.getAttribute('productId')}).evaluateCallback({
            callback: function(html) {
              generic.overlay.launch({
                  content: html,
                  includeBackground: true,
                  lockPosition: true,
                  cssStyle: {
                  	  height: '197px',
                	    width: '375px',
                	    border: 'none'
                  }
              });
            }
        });
        
    });
    
        
    // handle notifyMe mouseovers
    var gp = btn.parentNode.parentNode;
    if (btn.hasClassName("notify-btn-mouseover")) {
        el.page.notifyMe.handle_mouseover(btn,gp);
    }
}
el.page.notifyMe.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"});
    });
         
    Event.observe(gp, "click", function(evt) {
        var target = evt.target;
        if (target.hasClassName('quickshop-btn')) {
            return;
        }
        
        Event.stop(evt);
        btn.simulate('click');
    });
    
    if (generic.env.isIE) {
        gp.style.backgroundImage = "url(/images/btn/btn_trans.gif)";
    }
    
    gp.setStyle({ cursor: 'pointer' });
    
    /* 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.submit_popup_email = function (emailType, thank_you_div){
    $('popover_signup_error').style.display = 'none';
    generic.jsonrpc.fetch({ 
        method : 'email.signup',
        params: [{
            "PC_EMAIL_ADDRESS": $F('popover_signup_email_address'),
            "ACTION": 'set',
            "_SUBMIT": "email_signup",
            "form--email_signup--field--PC_EMAIL_ADDRESS": "1",
            "LAST_SOURCE" : $('special_reference').value,
            "ORIGINAL_SOURCE" : $('special_reference').value,
            "CH_EMAIL_TYPE" : emailType
        }],
        onSuccess: function(jsonRpcResponse) { 
            if ($(thank_you_div)){
                $(thank_you_div).style.display = 'inline';
            }
        },
        onFailure: function(jsonRpcResponse) { $('popover_signup_error').style.display = 'inline';return 0; } 
    });                               
    return true;
}

brx.getQuerystringValue = function (paramName){
	      var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if (pair[0] == paramName) {
                return pair[1];
            }
        }
}

/* 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();    
    
    // scan page for notifyMe buttons
    el.page.notifyMe();
    
    el.page.contact_cs.init();          // contact customer service - IE mouseover
	
	el.page.tracking_add_ons.init();	//google tracking iframe and 1 pixels images affecting layout...
});