/*
    htmlBuilder 
    provides a gateway to functions for writing html
*/

/// wgid - the webgateway id
this.htmlBuilder = function(){

    // shared constants
    var PRODUCT_INFO_TOOLTIP_FORMAT = "<div class=\"productInfoTooltip{5}\"><div class=\"image\">{0}</div><div class=\"info\"><strong>{1}: {2}</strong><br/>{3}<br/>size:{4}</div></div>";
    var POPUP_FORMAT = "<div class=\"image\">{0}</div><div class=\"info\"><strong>{1}</strong><br/>{2}</div>";
    var HOVER_FORMAT = "<div class=\"hover\" style=\"width:{3}px;\"> " +  POPUP_FORMAT + "</div>";
    var OUT_OF_STOCK = "Sorry, this item is not currently in stock";

    // build an anchor element
    this.buildAnchor = function(id, href, onclick, className, title, text, additionalAttributes){
        return this.buildHtml("<a id=\"{0}\" href=\"{1}\" onclick=\"{2}\" class=\"{3}\" title=\"{4}\" {6}>{5}</a>", 
                            arguments);
    };
    
    // build an anchor element
    this.buildImage = function(id, src, width, height, alt, additionalAttributes){
        return this.buildHtml("<img id=\"{0}\" src=\"{1}\" width=\"{2}\" height=\"{3}\" alt=\"{4}\" {5}/>", 
                            arguments);
    };
    
    // build an anchor element
    this.buildSimpleAnchor = function(href, title, text, additionalAttributes){
        return this.buildHtml("<a href=\"{0}\" title=\"{1}\" {3}>{2}</a>", 
                            arguments);
    };
    
    // build an anchor element in <li> tags
    this.buildAnchorInListItem = function(href, title, text, liClass, additionalAttributes){
        return this.buildHtml("<li class=\"{3}\" ><a href=\"{0}\" title=\"{1}\" {4}>{2}</a></li>", 
                            arguments);
    };
    
    // build a div elementwith optional innerHtml
    this.buildDiv = function(id, innerHtml){
        return this.buildHtml("<div id=\"{0}\">{1}</div>", 
                            arguments);
    };
    
    // build a br element with optional clear="xxx"
    this.buildBr = function(clear){
        if(typeof(clear) != 'undefined'){
            return "<br/>";
        }else{
            return this.buildHtml("<br clear=\"{0}\" /", arguments);
        }
    };
    
    // build a span element with optional innerHtml
    this.buildSpan = function(id, innerHtml){
        return this.buildHtml("<span id=\"{0}\">{1}</span>", 
                            arguments);
    };
    
    // build a table elementwith optional innerHtml
    this.buildTable = function(id, innerHtml){
        return this.buildHtml("<table id=\"{0}\">{1}</table>", 
                            arguments);
    };
    
    // build a tr element with optional innerHtml
    this.buildTableRow = function(id, innerHtml){
        return this.buildHtml("<tr id=\"{0}\">{1}</tr>", 
                            arguments);
    };
    
    // build a td element with optional innerHtml
    this.buildTableCell = function(id, innerHtml){
        return this.buildHtml("<td id=\"{0}\">{1}</td>", 
                            arguments);
    };

    // build a css link
    // + id(string) - can be null / undefined
    this.buildCssLink = function(id, href){
        var id = (null == id || typeof(id) == 'undefined')
                    ? "" 
                    : "id=\"" + id + "\" ";
                    
        return this.buildHtml("<link {0}rel=\"stylesheet\" type=\"text/css\" href=\"{1}\" media=\"screen\" />", [id, href]);
    };

    this.buildHtml = function(format, args){
        return doStringFormat(format, args);
    };
    
    // get the tooltip html for a basket item (large view)
    // + item(ProductJsonData)
    this.buildLargeBasketItemTooltipHtml = function(item){

        var FORMAT = "<div class=\"basketItemTooltip\">{0}</div>";
        
        innerHtml = this.buildHtml(PRODUCT_INFO_TOOLTIP_FORMAT, [item.MainImageHtml, 
                                                        item.ProductCode,
                                                        item.Name,
                                                        item.Description, 
                                                        item.SizeDescription,
                                                        "_main"]);
        
        
        var result = this.buildHtml(FORMAT, [innerHtml]);
        
        return result;
    
    };
    
    // get the tooltip html for a hover item with image, header and body text
    // + img (string) - image url
    // + header (string) - header text
    // + body (string) - body text
    this.buildHover = function(img, header, body, imgWidth, imgHeight, imgAlt){
        var imageHtml = this.buildImage("", img, imgWidth, imgHeight, imgAlt, "align=\"center\"");
        var result = this.buildHtml(HOVER_FORMAT, [imageHtml, header, body, imgWidth]);
        return result;
    };
    
    // get the tooltip html for a popup item with image, header and body text
    // + img (string) - image url
    // + header (string) - header text
    // + body (string) - body text
    // + imgWidth (int) - image width
    // + imgHeight (int) - image height
    // + imgAlt (int) - image alt tag
    this.buildPopupHtml = function(img, header, body, imgWidth, imgHeight, imgAlt){
        var imageHtml = this.buildImage("", img, imgWidth, imgHeight, imgAlt, "align=\"center\"");
        var result = this.buildHtml(POPUP_FORMAT, [imageHtml, header, body]);
        return result;
    };
    
    // builds the html for a custom popup
    // + id (string) an identifier for the popup
    // + innerHtml (string) the inner html for the popup
    // + visible (bool) is visible?
    // + showClose (bool) show the close link?
    // + cssClass (string) the css class name for the popup
    this.buildPopup = function(id, innerHtml, visible, showClose, cssClass){
        var FORMAT = "<div class=\"{4}\" style=\"display:{2}\" id=\"{0}\"><div class=\"header\" style=\"display:{3};float:right;\" ><a href=\"#\" onclick=\"$('#{0}').fadeOut();return false;\" title=\"close\">x</a></div>{1}</div>";
        return this.buildHtml(FORMAT, [id,
                                        innerHtml, 
                                        visible ? "block" : "none",
                                        showClose ? "block" : "none",
                                        cssClass]);
    };

    
    // get the tooltip html for a basket item
    // + item(BasketItemJsonData)
    this.buildBasketItemTooltipHtml = function(item){

        var FORMAT = "<div class=\"basketItemTooltip\">{0}</div>";
        var INNER_FORMAT = "<div class=\"image\">{0}</div><div class=\"info\"><strong>{1}</strong><br/>{2}<br/>size:{3}</div>";
        var OUT_OF_STOCK = "Sorry, this item is not currently in stock";
        
        if(!item.IsInStock){
            innerHtml = OUT_OF_STOCK;
        }else{
            innerHtml = this.buildHtml(INNER_FORMAT, [item.Product.MainImageHtml, 
                                                            item.Product.ProductCode,
                                                            item.Product.ShortDescription, 
                                                            item.Product.SizeDescription]);
        };
        
        var result = this.buildHtml(FORMAT, [innerHtml]);
        
        return result;
    
    };
    
    
    // builds the html for full product info popup
    // + product(ProductJsonData)
    // + id (string) the id for the created element
    // + visible (bool) is visible?
    // + showClose (bool) show the close link?
    this.buildFullProductInfoPopup = function(product, id, visible, showClose){
        
        var innerHtml = this.buildFullProductInfoTooltip(product);
        
        return this.buildPopup(id, innerHtml, visible, showClose, "fullProductInfoPopup");
    };
    
    // builds the html for full product info tooltip
    // + product(ProductJsonData)
    this.buildFullProductInfoTooltip = function(product, id, visible, showClose){
        
        
         
        var result = this.buildHtml(PRODUCT_INFO_TOOLTIP_FORMAT, 
                                                [product.PopupImageHtml, 
                                                product.ProductCode, 
                                                product.Name, 
                                                product.Description, 
                                                product.SizeDescription,
                                                "_popup"]);
                                                
        return result;
    };
    
    
    // builds the html for a basket item (side panel basket)
    // + basketItem (BasketItemJsonData)
    this.buildBasketItemHtml = function(basketItem){
    
        /* HTML constants */
        var BASKET_ITEM_FORMAT      = "<div id=\"basketItem_{0}\" class=\"basketItem\">" +
                                            "<div>" +
                                                "<div class=\"details\"><a id=\"basketItemTip1_{0}\" href=\"{1}\" class=\"basketItemTip\">{7}</a> {2}<br/>size:{4}&nbsp;(<a id=\"basketItemTip2_{0}\" href=\"{1}\" class=\"basketItemTip\">view</a>)</div>" + 
                                                "<div class=\"buttons\"><a href=\"javascript;\" onclick=\"javascript:$mb.deleteBasketItem({0}, {11});disableButton(this);return false;\" title=\"Remove item\" class=\"basketButtonDelete\"></a><a href=\"#\" onclick=\"javascript:$mb.moveBasketItem({0}, {10});disableButton(this);return false;\" title=\"{9}\" style=\"display:{6}\" class=\"{8}\"></a>" + 
                                            "</div>" +
                                            "<div class=\"price\">{5}</div>" + 
                                            "<br clear=\"all\" />" + 
                                      "</div>";
                                            
        var PRICE_STRING_FORMAT     = "<a href=\"{0}\" id=\"basketItemPriceTip_{1}\" title=\"{2} in {3}|Click to view / edit\">{2}</a> @ {4}</div>";
        var OUT_OF_STOCK_FORMAT     = "<span class=\"errorTextSmall\">!{1}!</span>&nbsp;{0}";

    
        var priceString = basketItem.IsInStock ? 
                                        doStringFormat(PRICE_STRING_FORMAT, 
                                        [
                                            basketItem.EditBasketUrl,
                                            basketItem.ObjectID, 
                                            basketItem.Quantity, 
                                            basketItem.IsSaveForLater ? "wishlist" : "basket",
                                            basketItem.CurrentValue.PriceString
                                        ]) 
                                            : 
                                        doStringFormat(OUT_OF_STOCK_FORMAT, [basketItem.Quantity, basketItem.StockStatus]);
                                        
        var args = [basketItem.ObjectID,
                    true == basketItem.HasProduct ? basketItem.Product.ProductPageUrl : '',
                    basketItem.Name, 
                    basketItem.ShortDescription, 
                    true == basketItem.HasProduct ? basketItem.Product.SizeDescription : '',
                    priceString,
                    basketItem.IsInStock ? "block" : "none",
                    basketItem.ProductCode,
                    basketItem.IsSaveForLater ? "basketButtonMove" : "basketButtonSave",
                    basketItem.IsSaveForLater ? "Move item to basket" : "Save for later",
                    !basketItem.IsSaveForLater,
                    basketItem.IsSaveForLater];
                    
        return this.buildHtml(BASKET_ITEM_FORMAT, args);

    };
    
    // get html for a basket item in the large basket view (checkout, merge basket contents)
    // + item (BasketItemJsonData)
    // + readonly (bool) a read-only view? e.g. non-editable: default false
    this.buildLargeBasketItemHtml = function(item, readonly){
    
        // 0 - ObjectID
        // 1 - ThumbnailImageHtml
        // 2 - Product.ProductCode
        // 3 - Product.Name
        // 4 - Product.SizeDescription
        // 5 - Quantity
        // 6 - BasketItemValue
        // 7 - Product.ProductPageUr
        // 8 - Product.MMID
        // 9 - Product.CatalogueVersion
        // 10 - Product.MainImageUrl
        // 11 - Product.ShortDescription
        // 12 - Move to wishlist?
        // 13 - Save / Add
        // 14 - Save / Add text (e.g. "Save for later")
        // 15 - IsSaveForLater (bool)
        // 16 - "basket" / "wishlist"
        // 17 - ID of add to basket button
        // 18 - ID of save for later button
        
        var FORM =   "<div class=\"control\">" +
                        "<input type=\"text\" value=\"{5}\" id=\"txtQuantity_{0}\" maxlength=\"9\" size=\"5\" />" +
                        "&nbsp;<a href=\"#\" id=\"btnAdd_{0}\" class=\"button72\" title=\"Update {16}\">Update</a>" +
                        "&nbsp;<a href=\"#\" onclick=\"$mb.deleteBasketItem({0}, false);disableButton(this);return false;\" class=\"basketButtonDelete_Large\" title=\"Remove from {16}\"><img src=\"../client/global/img/trans.gif\" width=\"24\" height=\"24\" border=\"0\"/></a>" +
                        "&nbsp;<a href=\"#\" onclick=\"$mb.moveBasketItem({0}, {12});disableButton(this);return false;\" class=\"basketButton{13}_Large\" title=\"{14}\"><img src=\"../client/global/img/trans.gif\" width=\"24\" height=\"24\" border=\"0\"/></a>" +
                    "</div>" +
                    "<span id=\"spanCost_{0}\" class=\"cost\">Cost: {6}</span>" +
                    "<script type=\"text/javascript\">$mb.registerBasketCalls({8}, {17}, {18}, null, 'txtQuantity_{0}', '', true, false);</script>";
       
       var FORM_RO = "Quantity: {5}<span id=\"spanCost_{0}\" class=\"cost\">Cost: {6}</span>";
       
      
       
       var FORMAT = 
"<div class=\"basketItem\" id=\"divItem_{0}\" style=\"display:none;\">" +
    "<div class=\"image\">" + 
        "<a href=\"#\" title=\"{8}\" class=\"productPopup\">{1}</a>" +
    "</div>" + 
    "<div class=\"info\">" +
        "<div class=\"top\">" + 
            "<a href=\"{7}\" title=\"{2}|{11}\" class=\"pipeTip\"><strong>{2}</strong></a>" +
            "<span>&nbsp;{3}&nbsp;</span>" + 
            "<a href=\"#\" title=\"{8}\" class=\"basketInfoTip\" ></a>" + 
        "</div>" + 
        "<br/>size: {4}&nbsp;<a href=\"{7}\" title=\"{2}|{11}\" class=\"pipeTip\">(view)</a>" +
    "</div>" + 
    "<div class=\"form\">" + (readonly ? FORM_RO : FORM ) + "</div>" + 
"</div>";

       

       var productData = item.Product;                    
       var args = [item.ObjectID,
                    productData.ThumbnailImageHtml,
                    productData.ProductCode, 
                    productData.Name, 
                    productData.SizeDescription,
                    item.Quantity,    
                    item.BasketItemValue.PriceString,
                    productData.ProductPageUrl,
                    productData.MMID,
                    productData.CatalogueVersion,
                    escape(productData.MainImageUrl),
                    productData.ShortDescription,
                    !item.IsSaveForLater,
                    item.IsSaveForLater ? "Move" : "Save",
                    item.IsSaveForLater ? "Move to basket" : "Save for later",
                    item.IsSaveForLater,
                    item.IsSaveForLater ? "wish list" : "basket",
                    item.IsSaveForLater ? 'null' : "'btnAdd_" + item.ObjectID + "'",
                    item.IsSaveForLater ? "'btnAdd_" + item.ObjectID + "'" : 'null'];
                    
        var result = doStringFormat(FORMAT, args);
        
        return result;
    
    };
    
    // build the html for the basket totals (both views)
    // + data (BasketJsonData)
    // + smallView (bool) is this the small basket view?
    this.buildBasketTotals = function(data, smallView){
    
        // SubTotal, Discount, Delivery, SalesTax, GrandTotal
        var FORMAT = "{0}{1}{2}{3}<hr/>{4}<hr/>";
                    
        // Field, Value
        var ITEM_FORMAT = "<div class=\"field\">{0}</div><div class=\"value\"><span class=\"{1}\">{2}</span></div><br clear=\"all\" />";
        
        var hasSalesTax = typeof(data.AreaSalesTax) != 'undefined' 
                                && null != data.AreaSalesTax;
                                
        var salesTaxLinkHtml = this.buildSimpleAnchor(
                                data.DeliveryAndSalesTaxUrl,
                                data.AreaSalesTaxName + "|" + data.AreaSalesTaxLinkTitle,
                                data.AreaSalesTaxName,
                                "class='pipeTip'");
                                        
        var deliveryLinkHtml = this.buildSimpleAnchor(
                                data.DeliveryAndSalesTaxUrl,
                                "Delivery|" + data.DeliveryLinkTitle,
                                smallView ? "Delivery" : data.DeliveryLinkText,
                                 "class='pipeTip'");
                                

                                
        var discountLinkHtml = data.CustomerLoyaltyDiscountTotal.Amount == 0 
                        ? ""
                        : this.buildSimpleAnchor(
                                "#",
                                "Loyalty Discount|" + data.CustomerLoyaltyDiscountTitle,
                                "Discount",
                                "class='pipeTip'");
                                
        var discountHtml = discountLinkHtml != ""
                                ? doStringFormat(ITEM_FORMAT, [discountLinkHtml, "negativeMoney", data.CustomerLoyaltyDiscountTotal.PriceString])
                                : "";  

        var args = [doStringFormat(ITEM_FORMAT, ["SubTotal", "", data.SubTotalCost.PriceString]),
                    discountHtml,
                    doStringFormat(ITEM_FORMAT, [deliveryLinkHtml, "", data.DeliveryCost.PriceString]),
                    doStringFormat(ITEM_FORMAT, [salesTaxLinkHtml, "", data.SalesTaxCost.PriceString]),
                    doStringFormat(ITEM_FORMAT, ["<strong>Total</strong>", "", "<strong>" + data.TotalCost.PriceString + "</strong>"])];
        
        return doStringFormat(FORMAT, args);
        
    };
    
    /// get the inner html for the basket side panel
    this.getSidePanelInnerHtmlForBasket = function(){
        return  "<div class=\"header\">Shopping</div>" + 
                "<div id=\"vwBasket\" class=\"main\">" + 
                    "<div id=\"vwBasketUserMessage\" class=\"basketUserMessage\"></div>" + 
                    "<div id=\"vwBasketItems\"></div>" + 
                    "<div id=\"vwBasketTotals\"></div>" + 
                    "<div id=\"vwBasketButtons\"></div>" + 
                "</div>";
    };
      
    /// get the inner html for the wish list side panel
    this.getSidePanelInnerHtmlForWishList = function(){
        return  "<div class=\"header\">Saved for later</div>" + 
                "<div id=\"vwWishList\" class=\"main\">" + 
                    "<div id=\"vwWishListUserMessage\" class=\"basketUserMessage\"></div>" + 
                    "<div id=\"vwWishListItems\"></div>" + 
                "</div>";
    };
    
    /// get the inner html for the wish list side panel
    this.getSidePanelInnerHtmlForMyAccount = function(){
        return  "<div class=\"header\"></div>" + 
                "<div class=\"main\"></div>";
    };
      
};