var generic = generic || {};
var oj = oj || {};

// resource bundling

oj.globalnav = {
	emailInputNode : null,
	emailContainerNode : null,
	emailFormNode : null,
	emailSubmitNode : null,
	emailProgressNode : null,
	emailHeader : null,
	emailSignedUp : null,
	emailErrorNode : null,
	initEmailSignup : function() {
		emailContainerNode = $$("div.email-signup-container")[0];
		if (!emailContainerNode) {
			return null;
		}
		emailFormNode = emailContainerNode.select("form")[0];
		emailSubmitNode = emailContainerNode.select("input.input-image")[0];
		emailProgressNode = emailContainerNode.select("span.progress")[0];
		emailInputNode = emailContainerNode.select("input.email-signup")[0];
		emailHeader = emailContainerNode.select("h3")[0];
		emailSignedUp = emailContainerNode.select(".email-signed-up")[0];
		emailErrorNode = emailContainerNode.select("div.error")[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");
					//generic.showErrors([{text: msg, displayMode: "message"}]);
					emailErrorNode.addClassName("hidden");
					emailHeader.addClassName("hidden");
					emailFormNode.addClassName("hidden");
					emailSignedUp.removeClassName("hidden");
				},
				onFailure: function(jsonRpcResponse){
					var errorObjectsArray = jsonRpcResponse.getMessages();
					if(emailErrorNode){
						emailErrorNode.update();
						errorObjectsArray.each(function(errmsg){emailErrorNode.insert(errmsg.text);});
						emailErrorNode.up().setStyle({height: '180px'});
						emailErrorNode.removeClassName("hidden");
					}else{
						generic.showErrors(errorObjectsArray);
					}
					emailProgressNode.addClassName("hidden");
					emailSubmitNode.removeClassName("hidden");
				}
			});
		});
	}
};

oj.globalnav.menuNav = {
    init: function() {
        nav_items = $$("#nav_buttons .section_item");
        if (nav_items == undefined) return;
		
        var is_mac = navigator.userAgent.toLowerCase().indexOf("mac") != -1;
        var is_safari = navigator.userAgent.toLowerCase().indexOf("safari") != -1;

        for (i=0; i<nav_items.length; i++) {
            this.center_drop_pane( nav_items[i] );

            if (i == 1) {
                this.add_anim(nav_items[i], nav_items[i].select(".menu_pane")[0]);
            }

            // only install mouseover listeners if we are IE lt 7
            // -or- safari :: added for drop-menu positioning - safari can't calculate offsetWidth at load time
            if (!(document.all&&document.getElementById&&!is_mac) && !(is_safari)) continue;
            nav_items[i].idx = i;
            this.install_listeners(nav_items[i]);
        }
    },
    
    center_drop_pane: function( elm ) {
        
        var amt = -0.5; 

        var menu_item = elm.select(".menu_item")[0];

        var drop_pane = elm.select(".menu_pane")[0];
        if (drop_pane == undefined) return;
		
        this.add_anim(elm, drop_pane);
    },

    add_anim: function(elm, drop_pane) {
        if (elm == undefined || drop_pane == undefined) return;
        drop_pane.id = elm.id + "_menu_pane";
        elm.observe('mouseover', function(e) {
            oj.globalnav.menuPaneAnim.start();
        });

        elm.observe('mouseout', function(e) {
            oj.globalnav.menuPaneAnim.end();
        });
    },
    
    install_listeners: function(elm) {
        if (!(elm.className.match("has_menu_pane"))) return;
        var self = this;

        elm.observe('mouseover', function(e) {
            this.className+=" over has_menu_pane_over";
            self.center_drop_pane( elm );
        });
        
        elm.observe('mouseout', function(e) {
            this.className = this.className.replace(" over",""); 
            this.className = this.className.replace(" has_menu_pane_over","");
        });
    }
}

oj.globalnav.menuPaneAnim = {
    start: function(e) {
        // TODO: Implement animation for global nav dropdown 
        // promo pane
        return;
    },
    end: function(e) {
        // TODO: ""
        return;
    }
};

oj.globalnav.browser = {
    init: function() {
    	oj.globalnav.browser.is_mobile = navigator.userAgent.match(/mobile/i);
    	oj.globalnav.browser.userAgent = navigator.userAgent;
    	oj.globalnav.browser.mobile_type = (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i)));
		oj.globalnav.browser.browser_type = (navigator.userAgent.match(/Chrome/i) || navigator.userAgent.match(/Safari/i) || navigator.userAgent.match(/Firefox/i) || (navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Opera/i)));

    }
};


// EMAIL SIGNUP pop over
oj.popupEmailSignup = {
    emailInputNode : null,
    emailContainerNode : null,
    emailFormNode : null,
    emailSubmitNode : null,
    emailProgressNode : null,
	emailFormPane : null,
    emailThankyouPane : null,
    initEmailSignup : function() {
		
		var containerDiv = new Element("div", { "class":"overlay_cus-content" });
		containerDiv.style.display = "none";
		containerDiv.addClassName("overlay_cus-content-container");
		
		var req = new Ajax.Request('/includes/content/signup_popup.tmpl', {
			method:'get',
			onSuccess: function(transport) {
				var response = transport.responseText || "no response text";
				containerDiv.update(response);
				document.body.appendChild(containerDiv);
				oj.popupEmailSignup.initEmailPop(containerDiv);
			},
			onFailure: function(){
				var errMsg = "Error loading " + '/includes/content/signup_popup.tmpl'
				containerDiv.update(errMsg);
			}
		});
	},
	initEmailPop : function(containerDiv) {
		var styleObj = {};
		styleObj.width = '316px';
		styleObj.height = '131px';
		var cssClass = "emailpop";
		
		containerDiv.style.display = "block";
		generic.overlay_cus.launch({
			url: '/includes/content/signup_popup.tmpl',
			content: containerDiv,
			includeBackground: true,
			cssStyle: styleObj,
			cssClass: cssClass
		});
		
        emailContainerNode = containerDiv.select("div#popup_email_signup")[0];
		emailFormPane = containerDiv.select("div#email_popup_form")[0];
		emailThankyouPane = containerDiv.select("div#email_popup_thankyou")[0];
        if (!emailContainerNode) {
            return null;
        }
		
        emailFormNode = containerDiv.select("form")[0];
        emailSubmitNode = containerDiv.select("input.input-image")[0];
        emailInputNode = containerDiv.select("input.email-signup")[0];
		
        emailFormNode.observe("submit", function(submitEvt) {
            submitEvt.preventDefault();
            var params = emailFormNode.serialize(true);
            var rb = generic.rb('language');
            generic.jsonrpc.fetch({
                method : 'rpc.form',
                params: [params],
                onSuccess:function(jsonRpcResponse) {
                    var d = jsonRpcResponse.getData();
                    var msg = rb.get("email_signup_text");
                    emailInputNode.value = rb.get("thanks");
					emailFormPane.addClassName('hidden');
					emailThankyouPane.removeClassName('hidden');
                },
                onFailure: function(jsonRpcResponse){
                    var errorObjectsArray = jsonRpcResponse.getMessages();
                    emailInputNode.value =  rb.get("please_try_again");
                }
            });
        });
    }
};

oj.initHover = function(ulId) {
    if(document.getElementById(ulId) !=  null){
        var sfEls = document.getElementById(ulId).getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
};

oj.initHovers = function() {
    var ullist = ["global_nav", "service_nav"];
    for (var x=0; x<ullist.length; x++) {
        oj.initHover(ullist[x]);
    }
};

document.observe("dom:loaded", function() {
    oj.initHovers();
    // setup user
    var userParams = {};
    userParams.pageDataKey = 'globalnav.user';
    // generic.user.getUser(userParams);

    // setup cart
    var cartParams = {};
    cartParams.pageDataKey = 'globalnav.cart';
    generic.checkout.cart.getCart(cartParams);
    
    if (!!(generic.env.isIE6)) {
        //brx.initHovers();  initialize hover states for IE6     
    }

   var emailContainerNode = $$("div.sign_up_email")[0];
   if(emailContainerNode) {
       var emailInputNode = emailContainerNode.select("input.email-signup")[0];
       emailInputNode.observe("focus", function(e) {
           emailInputNode.value = '';
           emailInputNode.style.color = "#939393";
       });
   } 

   var emailContainerNodeNew = $$("div.sign_up_email_new")[0];
   if(emailContainerNodeNew) {
       var emailInputNodeNew = emailContainerNodeNew.select("input.message")[0];
       emailInputNodeNew.observe("focus", function(e) {
           emailInputNodeNew.value = '';
           emailInputNodeNew.style.color = "#939393";
       });
   } 
    
    oj.globalnav.initEmailSignup();
});

// Email sign up popover
// HOME page pop over - start
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else { 
document.getElementById(layer).style.display="none";
}
}
// HOME page pop over - end
oj.globalnav.updateOrientation = function() {
    window.onorientationchange = function() {
        var orientation = window.orientation;
        
        switch(orientation) {
            case 0:
                if($('footer')) { $('footer').show(); }
                if($('slideup_promo_wrapper')) { $('slideup_promo_wrapper').show(); }
                if($('slideup_promo')){ setTimeout("oj.globalnav.promoFooter.promoSlide('up')", 0); }
            break;
            
            case 90:
            case -90:
                if($('slideup_promo')){ setTimeout("oj.globalnav.promoFooter.promoSlide('down')", 0); }
                if($('footer')) { $('footer').hide(); }
                if($('slideup_promo_wrapper')) { $('slideup_promo_wrapper').hide(); }
            break;
        }
    }
};

oj.globalnav.promoFooter = {
    init: function() {
		var promoElement = $('slideup_promo');
		var promo_down;
		var promo_up;
		//Ensure mobile emulators display correct behavior
        if (Object.isElement(promoElement) && !(navigator.userAgent.match(/mobile/i))) {
    		promoElement.observe('mouseover', function(e) {
				if(typeof(promo_down) != "undefined") {promo_down.cancel();}
    			promo_up = oj.globalnav.promoFooter.promoSlide('up');
    		});
		
    		promoElement.observe('mouseout', function(e) {
				if(typeof(promo_up) != "undefined") {promo_up.cancel();}
    			promo_down = oj.globalnav.promoFooter.promoSlide('down');
    		});
        }
	},
	promoSlide: function(direction) {
		var yMove = (direction == 'up') ? -143 : -33;
		var promo_effect = new Effect.Move('slideup_promo', { x: 0, y: yMove, mode: 'absolute' });
		return promo_effect;
	}
};

oj.globalnav.initMobile = function() {
    //oj.globalnav.browser.init();
    
    

    
    //Footer
    if($('footer')) {
        if($('home') != undefined ) {
            $('footer').setStyle({ height: '26px', width: '100%' });
            $('footer-mid').hide(); //Facebook

            bodyNode = $$('body')[0];
            contentNode = bodyNode.identify();
            myScroll = new iScroll(contentNode);
        } else {
            $('footer').setStyle({ visibility: 'hidden' });
            $('footer').hide();
        }
    }
    
    //Hide slot
    if($('promo_2')) {
        $('promo_2').hide(); 
    }
    //Hide gnav element
    if($('haircare-diag')) {
        $('haircare-diag').hide();  
    }
    
    //QuickShop - Ideally listeners would turned off outside of mpp.js (wip)
    /*
    mobileQuickShopLinks = $$('a.quickshop-link');
    Event.stopObserving( document, 'click');
    if (mobileQuickShopLinks) {
        mobileQuickShopLinks.each(
        function(mobileQuickshopLink) {
            mobileQuickshopLink.stopObserving("click");
            var mobileQuickshopButton = mobileQuickshopLink.select('.quickshop-btn')[0];
            
            mobileQuickshopLink.stopObserving("mouseover", function (e) {
                 mobileQuickshopButton.removeClassName('qs-active');
                 mobileQuickshopButton.addClassName('hidden');
                 });
            mobileQuickshopLink.stopObserving('mouseout', function (e) {
                 mobileQuickshopButton.removeClassName('qs-active');
                 mobileQuickshopButton.addClassName('hidden');
                 });
        });
    }
    */
};

document.observe("dom:loaded", function() {
    // setup user
    var userParams = {};
    userParams.pageDataKey = 'globalnav.user';
    // generic.user.getUser(userParams);

    // setup cart
    var cartParams = {};
    cartParams.pageDataKey = 'globalnav.cart';
    // generic.checkout.cart.getCart(cartParams);

	oj.globalnav.initEmailSignup();
    if($('slideup_promo')){ oj.globalnav.menuNav.init(); }

    oj.globalnav.promoFooter.init();
    oj.globalnav.initCartCount();
    

	
    //Mobile Footer/Promo/QuickShop
    if(navigator.userAgent.match(/mobile/i)) {
        oj.globalnav.initMobile();
        oj.globalnav.updateOrientation();
    }
    else {
    //Desktop Promo
	if($('slideup_promo')){ setTimeout("oj.globalnav.promoFooter.promoSlide('down')", 4000); }
	}
});


oj.globalnav.initCartCount = function() {
    oj.globalnav.countNode = $$("div.utility-nav span.items_count")[0];
    
    // fetch cart contents
    var cartDataFromPage = generic.page_data("globalnav").get('cart');
    if (cartDataFromPage && cartDataFromPage['rpcdata']) {
        cartData = cartDataFromPage['rpcdata'];
    } else {
        return null;
    }
    if ( !cartData.order || !Object.isArray(cartData.order.items) ) {
        return null;
    }
	var totalShoppedItems = 0;
    for (var i=0, len=cartData.order.items.length; i<len; i++ ) {
		totalShoppedItems+=cartData.order.items[i].ITEM_QUANTITY;
        cartData.order.items[i] =  generic.jsonrpc.parseCartItem(cartData.order.items[i]);
    };
    // console.log("cartData");
    // console.log(cartData);
   // oj.globalnav.updateItemsCount(cartData.order.items.length);
    oj.globalnav.updateItemsCount(totalShoppedItems);

    document.observe("cart:updated", function(cartEvt) {
        var cartResponseObj = cartEvt.memo;

        if (typeof cartResponseObj.getItem !== "function") {
            return;
        }
        var order = cartResponseObj.getOrderData();
        var totalShoppedItems = 0;
        for (var i=0, len=order.order.items.length; i<len; i++ ) {
		totalShoppedItems+=order.order.items[i].ITEM_QUANTITY;
        cartData.order.items[i] =  generic.jsonrpc.parseCartItem(cartData.order.items[i]);
     };
		oj.globalnav.updateItemsCount(totalShoppedItems);
    });
};


oj.globalnav.updateItemsCount = function(count) {
    if (oj.globalnav.countNode) {
        oj.globalnav.countNode.update(count);
    }
};



// assumes user:loaded event exists
document.observe("user:updated", function(){
    //console.log( "user:updated event caught" );
    // update any user-dependent display
});