﻿/*GMCR Mini-Cart
Rich Sturim, Shanon Place 2011
Prerequisites: 
Libraries:
    modernizr-1.7 or greater
    jquery-1.6.2 or greater
    jquery.tmpl beta or greater
Usage: 
    include <script src="URL-To-Commerce-Site/script/mini-cart.js"></script>
    include <link rel="stylesheet" href="URL-To-Commerce-Site/css/global/mini-cart.css">
    include <div id="gmcr-mini-cart"></div>

    initialize the mini-cart on document ready
    $(document).ready(function () {
            GMCR.MiniCart.initMiniCart(Commerce-Site-BaseURL, Return-URL-After-SignIn, Logo-Target-URL-Relative-to-the-commerce-site, CorMetricsVendorName, CoreMetricSiteName);
            example:
  	        GMCR.MiniCart.initMiniCart('http://www.test.gmcr.com', 'http://www.tullys.com', '/shop/k-cups-category?facets=All%20K-Cups%3ACoffee%7C%7CBrand%3ATullys&TitleTag=K-Cup%20Varieties', 'Brand+Sites', 'Tullys');
  	});
    
    that's it, enjoy the carty goodness

*/
var $j = jQuery.noConflict();
var GMCR = GMCR || {};

GMCR.MiniCart = function () {

    /*** private members ***/
    var externalSiteURL = '';
    var signInReturnURL = '';
    var baseURL = '';
    var coreMetricsSiteName = '';
    var coreMetricsCategoryName = '';
    var relativeLogoTargetURL = '';

    var mainTemplate = "";
    mainTemplate += "<!-- Not signed in -->";
    mainTemplate += "			<div data-panels=\"true\" id=\"family-of-brands-container\" class=\"hoverable\">  ";
    mainTemplate += "				<h3><a href=\"${BaseURL}${FOBLogoTargetRelative}${CMLinkFOBLogo}\">Shop <span>Green Mountain Coffee Family of Brands<\/span><\/a><\/h3>";
    mainTemplate += "				<div class=\"panel\" id=\"family-of-brands-panel\">";
    mainTemplate += "   				<a class=\"commerce-site-link insite\" href=\"${BaseURL}?${CMLinkFOBText}\">Shop for your favorite brands at GreenMountainCoffee.com<\/a>";
    mainTemplate += "				<\/div>";
    mainTemplate += "			<\/div>";
    mainTemplate += "		{{if !IsAuthenticated}}";
    mainTemplate += "	  		<div id=\"account-status\" data-panels=\"true\">";
    mainTemplate += "				<h3 class=\"no-badge\"><a href=\"${BaseURL}\/login.aspx?returnUri=${ReturnURL}&${CMLinkSignIn}\">Sign In<\/a><\/h3>";
    mainTemplate += "				<div id=\"not-signed-in\">to access you account information<\/div>";
    mainTemplate += "		{{else}}";
    mainTemplate += "			<!-- Signed in States -->";
    mainTemplate += "			<!-- Signed In, not a club member -->";
    mainTemplate += "	  		<div id=\"account-status\">";
    mainTemplate += "			{{if IsAuthenticated && !IsClubbie}}";
    mainTemplate += "			<h3 class=\"no-badge signed-in\">Hi, ${UserName}!<\/h3>";
    mainTemplate += "			<div id=\"account-links\">";
    mainTemplate += "				<a href=\"${BaseURL}\/membership\/manage-account\">My Account<\/a> |";
    mainTemplate += "				<a href=\"#\" id=\"signout\">Sign Out<\/a>";
    mainTemplate += "			<\/div>";
    mainTemplate += "			{{else}}";
    mainTemplate += "				{{if IsPlatinum}}";
    mainTemplate += "				<!-- Signed In, Platinum Club member -->";
    mainTemplate += "				<h3>Hi, ${UserName}!<\/h3>";
    mainTemplate += "					<div id=\"club-status-container\" class=\"clearfix\">";
    mainTemplate += "						<div id=\"club-badge\" class=\"club-platinum\"><span>Cafe Express Platinum<\/span><\/div>";
    mainTemplate += "						<h4>Platinum Club Member<\/h4>";
    mainTemplate += "					<\/div>";
    mainTemplate += "					<div id=\"account-links\">";
    mainTemplate += "						<a href=\"${BaseURL}\/membership\/manage-account\">My Account<\/a> |";
    mainTemplate += "						<a href=\"#\" id=\"signout\">Sign Out<\/a>";
    mainTemplate += "					<\/div>";
    mainTemplate += "				{{else}}";
    mainTemplate += "					<!-- Signed In, Club member (under threshold) -->";
    mainTemplate += "					{{if !IsInThreshold}}";
    mainTemplate += "					<h3>Hi, ${UserName}!<\/h3>";
    mainTemplate += "					<div id=\"club-status-container\" class=\"clearfix\">";
    mainTemplate += "						<div id=\"club-badge\" class=\"regular\"><span>Cafe Express<\/span><\/div>";
    mainTemplate += "						<h4 style=\"padding-top:8px;\">Club Member<\/h4>";
    mainTemplate += "					<\/div>";
    mainTemplate += "					<div id=\"account-links\">";
    mainTemplate += "						<a href=\"https:\/\/${BaseURL}\/membership\/manage-account\">My Account<\/a> |";
    mainTemplate += "	 						<a href=\"#\" id=\"signout\">Sign Out<\/a>";
    mainTemplate += "					<\/div>";
    mainTemplate += "					{{else}}";
    mainTemplate += "					<!-- Signed In, Club member (over threshold) -->";
    mainTemplate += "					<h3>Hi, ${UserName}!<\/h3>";
    mainTemplate += "					<div id=\"club-status-container\" class=\"clearfix\">";
    mainTemplate += "						<div id=\"club-badge\" class=\"regular\"><span>Cafe Express<\/span><\/div>";
    mainTemplate += "						<div id=\"near-miss-status\"><span>${RemainingOrders}<\/span> orders to <a href=\"${BaseURL}\/platinum\">Platinum Discount<\/a><\/div>";
    mainTemplate += "					<\/div>";
    mainTemplate += "					<div id=\"account-links\">";
    mainTemplate += "						<a href=\"https:\/\/${BaseURL}\/membership\/manage-account\">My Account<\/a> |";
    mainTemplate += "						<a href=\"#\" id=\"signout\">Sign Out<\/a>";
    mainTemplate += "					<\/div>";
    mainTemplate += "					{{\/if}}	";
    mainTemplate += "				{{\/if}} <!-- End if Platinum -->";
    mainTemplate += "			{{\/if}}	<!-- End is Clubbie -->";
    mainTemplate += "";
    mainTemplate += "";
    mainTemplate += "		{{\/if}} <!-- End IsAuthenticated -->";
    mainTemplate += "			<div id=\"account-panel\" class=\"panel\">";
    mainTemplate += "				{{html PlatinumMessage}}		";
    mainTemplate += "			<\/div>";
    mainTemplate += "		<\/div>";
    mainTemplate += "			{{if ItemCount > 0}}";
    mainTemplate += "				<div id=\"cart-status\" data-panels=\"true\">";
    mainTemplate += "					<h3><a href=\"${BaseURL}\/cart?${CMLinkCart}\">Cart<\/a><\/h3>";
    mainTemplate += "				{{if ItemCount < 99}}";
    mainTemplate += "					<div id=\"cart-qty\"><span>${ItemCount}<\/span><\/div>";
    mainTemplate += "				{{else}}";
    mainTemplate += "					<div id=\"cart-qty\"><span class=\"wider\">${ItemCount}<sup>+<\/sup><\/span><\/div>";
    mainTemplate += "				{{\/if}}";
    mainTemplate += "			{{else}}";
    mainTemplate += "				<div id=\"cart-status\">";
    mainTemplate += "					<h3><a href=\"${BaseURL}\/cart?${CMLinkCart}\">Cart<\/a><\/h3>";
    mainTemplate += "					<div id=\"cart-qty\" class=\"empty\"><span>${ItemCount}<\/span><\/div>";
    mainTemplate += "			{{\/if}}";
    mainTemplate += "			<div id=\"cart-panel\" class=\"panel\">";
    mainTemplate += "";
    mainTemplate += "				<h5 class=\"panel-header\">Shopping Cart:<\/h5>";
    mainTemplate += "				{{if PromoMessage}}";
    mainTemplate += "				<div id=\"special-promo-message\">";
    mainTemplate += "					${PromoMessage}";
    mainTemplate += "				<\/div>";
    mainTemplate += "				{{\/if}}";
    mainTemplate += "";
    mainTemplate += "				<ul id=\"mini-cart-items\"><\/ul>";
    mainTemplate += "";
    mainTemplate += "				<table id=\"total-items\">";
    mainTemplate += "					<tr>";
    mainTemplate += "						<th>${ItemCount} items in cart:<\/th> ";
    mainTemplate += "						<td>${CartSubTotal}<\/td>";
    mainTemplate += "					<\/tr>";
    mainTemplate += "					<tr>";
    mainTemplate += "						<th>*Estimated Shipping:<\/th> ";
    mainTemplate += "						<td>{{html EstimatedShipping}}<\/td>";
    mainTemplate += "					<\/tr>";
    mainTemplate += "					<tr id=\"subtotal\">";
    mainTemplate += "						<th>*Estimated Subtotal:<\/th> ";
    mainTemplate += "						<td>${TotalCartPriceString}<\/td>";
    mainTemplate += "					<\/tr>";
    mainTemplate += "				<\/table>";
    mainTemplate += "";
    mainTemplate += "				<div id=\"cart-actions\">";
    mainTemplate += "					<a href=\"${BaseURL}\/cart?${CMLinkCheckout}\" class=\"btn-checkout\">Check Out<\/a>";
    mainTemplate += "				<\/div>";
    mainTemplate += "				<div id=\"footnotes\">* Excluding promotional savings, taxes, additional freight charges, if applicable.<\/div>";
    mainTemplate += "";
    mainTemplate += "			<\/div>";
    mainTemplate += "		<\/div>";


    var itemTemplate = "";
    itemTemplate += "<li>";
    itemTemplate += "			<img src=\"${ThumbnailImage}\">";
    itemTemplate += "			<div class=\"item-detail\">";
    itemTemplate += "				<span class=\"brand-name\">${BrandName}<\/span>";
    itemTemplate += "				<span class=\"product-name\"><a href=\"${ProductDetailPageLink}?${$item.CMLinkPDP}\">${DisplayName}<\/a><\/span>";
    itemTemplate += "				{{if PackageDescription}}";
    itemTemplate += "					<span class=\"package-and-price\">${PackageDescription} - ${PriceString}<\/span>";
    itemTemplate += "				{{else}}";
    itemTemplate += "					<span class=\"package-and-price\">${PriceString}<\/span>";
    itemTemplate += "				{{\/if}}";
    itemTemplate += "				<span class=\"qty-and-edit-item\">Qty: ${Count} <a href=\"${CartLink}?${$item.CMLinkEditCart}\">Edit Cart<\/a><\/span>";
    itemTemplate += "			<\/div>";
    itemTemplate += "		<\/li>";

    var styleTemplate = "";
    styleTemplate += "<style>";
    styleTemplate += "#cart-panel a.btn-checkout {background-image: url(${BaseURL}\/images\/global\/sprites\/global-b2c-sprite.png);}";
    styleTemplate += "#account-status,#account-status #not-signed-in,#account-status #club-status-container #club-badge,#account-status #club-status-container #club-badge.club-platinum,#account-panel .cafe-express,#cart-status,#cart-status #cart-qty,#family-of-brands-container, #family-of-brands-container h3 a {background-image: url(${BaseURL}\/images\/global\/sprites\/global-b2c-sprite.png);}";
    styleTemplate += "<\/style>";


    /*** private methods ***/
    var buildMiniCart = function (cartJson) {
        cartJson.ReturnURL = signInReturnURL;
        var container = $j('#gmcr-mini-cart');
        $j(container).empty();
        $j.template('mainTemplate', mainTemplate);
        $j.template('itemTemplate', itemTemplate);
        $j.template('styleTemplate', styleTemplate);

        $j.tmpl('mainTemplate', cartJson).appendTo(container);

        $j.tmpl('itemTemplate', cartJson.CartItems, {
            //item level core metrics links
            CMLinkPDP: createCoreMetricsLink('Cart', 'Product+Name'),
            CMLinkEditCart: createCoreMetricsLink('Cart', 'Edit+Cart+Link')
        }).appendTo('#mini-cart-items');
        $j.tmpl('styleTemplate', cartJson).insertAfter('title');
    };

    //Builds a single core metrics link
    var createCoreMetricsLink = function (placement, actionItem) {
        var cmDelimiter = '-_-';
        return 'cm_mmc=' + coreMetricVendorName + cmDelimiter + coreMetricsCategoryName + cmDelimiter + placement + cmDelimiter + actionItem;
    };

    //Creates core metrics links as data items for binding in the client side template
    var createCoreMetricsLinksForBinding = function (dataJSON) {
        dataJSON.CMLinkFOBLogo = createCoreMetricsLink('Family+of+Brands', 'Family+Logo');
        dataJSON.CMLinkFOBText = createCoreMetricsLink('Family+of+Brands', 'Text+Link');
        dataJSON.CMLinkSignIn = createCoreMetricsLink('Account', 'Sign+In+Button');
        dataJSON.CMLinkCart = createCoreMetricsLink('Cart', 'Cart+Button');
        dataJSON.CMLinkCheckout = createCoreMetricsLink('Cart', 'Checkout');

    };

    //Creates any other data properties to include in the JSON for template binding
    var createSecondaryBindingData = function (dataJSON) {
        dataJSON.FOBLogoTargetRelative = relativeLogoTargetURL.indexOf('?') === -1 ? relativeLogoTargetURL + '?' : relativeLogoTargetURL + '&';
    };

    var displayError = function (baseURL) {
        var $cartContainer = $j('#gmcr-mini-cart');
        $cartContainer.empty();
        var strVar = "";
        strVar += "<div id=\"cart-error\">Oops. Something went wrong &hellip; <br \/>It\'s not your fault, try reloading the page. <br \/>If that doesn't work, click <a href=" + baseURL + "\/500.aspx>here<\/a> to report a problem.<\/div>";
        $j(strVar).appendTo($cartContainer);
        $j('#cart-error').css("background", "#FFF4F2 url(" + baseURL + "/images/global/icons/messages/32_error.png) no-repeat 12px 12px");
    };

    var initCartPanelTabs = function () {
        var $panels = $j('div[data-panels="true"]');
        $panels.each(function () {
            var $this = $j(this);
            $this.addClass('hoverable');

            //show subnav on hover  
            $this.mouseenter(function () {
                var $this = $j(this);
                $this.find("div.panel").stop(true, true).slideDown(200); // a little hard for IE7 (use show()?)
                $this.addClass("selected");
            });

            //hide submenus on exit  
            $this.mouseleave(function () {
                var $this = $j(this);
                $this.find("div.panel").stop(true, true).hide();
                $this.removeClass("selected");
            });
        });

        // apply css classes to the cart items
        $j('#cart-panel').show();
        var $itemContainer = $j('#mini-cart-items');
        var $items = $itemContainer.find('li');
        $items.last().addClass('last');
        if ($items.length > 2) {
            $itemContainer.height($items.eq(0).height() + $items.eq(1).height() + 32);
        }
        $j('#cart-panel').hide();

    };


    /*** PUBLIC MEMBERS ***/
    return {

        initMiniCart: function (externalSite, returnURL, logoTargetURL, cmVendorName, cmCategoryName) {
            baseURL = externalSite;
            externalSiteURL = externalSite + "/ajaxhandlers/ExternalJSONData.aspx";
            signInReturnURL = returnURL;
            coreMetricVendorName = cmVendorName;
            coreMetricsCategoryName = cmCategoryName;
            relativeLogoTargetURL = logoTargetURL;

            //show the initial loading message
            $j('<div id="cart-loading">Please stand by while we retrieve your account information &hellip;</div>').appendTo('#gmcr-mini-cart');
            $j('#cart-loading').css("background", "#FDF9F0 url(" + baseURL + "/images/global/ajax-loaders/circle-spinner-orange-32x32.gif) no-repeat 12px 12px").show();

            //Load the cart data
            GMCR.MiniCart.getCartInfo(externalSiteURL + '?cmd=minicart&callback=?');

            //wire up the sign out link
            $j('#gmcr-mini-cart').delegate('#signout', 'click', function (e) {
                GMCR.MiniCart.signOutUser();
                e.preventDefault();
            });
        },

        getCartInfo: function (dataURL) {
            $j.ajax({
                type: "POST",
                data: {},
                url: dataURL,
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                success: function (data) {
                    createCoreMetricsLinksForBinding(data);
                    createSecondaryBindingData(data);
                    buildMiniCart(data);
                    initCartPanelTabs();
                    $j('#cart-loading').hide();
                },
                error: function (data) {
                    displayError(baseURL);
                }
            });
        },

        signOutUser: function () {
            $j.ajax({
                type: "POST",
                data: {},
                url: externalSiteURL + '?cmd=signout&callback=?',
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                success: function (data) {
                    GMCR.MiniCart.getCartInfo(externalSiteURL + '?cmd=minicart&callback=?');
                },
                error: function (data) {
                    displayError(baseURL);
                }
            });
        }

    }; // end public RETURN
} ();                                            // end MODULE



