var Basket = {
    //LineTemplate1 : '<div class="BasketItem"><img width="120" height="120" src="/Shop/Lib/Img/Products/%FamilyName%.jpg" alt="%DisplayName%" />',
    LineTemplate1: '<div class="BasketItem"><img width="120" height="120" src="%Img%" alt="%DisplayName%" />',
    LineTemplate2: '<p class="productName">%DisplayName%</p><p>%ItemSummary%</p><p class="quantity">Qty ~ (%Quantity%)</p><p class="price">%Price%</p>',
    LineTemplate3: '<a class="Update" href="/Shop/Basket.aspx">Edit</a>',
    LineTemplate4: '<a class="Remove" href="#" onclick="Basket.Remove(\'%ProductId%\',\'%VariantId%\'); return false;">Remove</a><div class="clear"></div></div>',
    LocalRenderFunction: function(data) {
        // reassign this function when you need page specific JS to run on an update
    },
    Add: function(productId, variantId, quantity) {
        if (quantity == null)
            quantity = 1;
        Soane.Web.Main.Ajax.BasketService.AddToBasket(productId, variantId, quantity, Function.createDelegate(this, this.Update));
    },
    Remove: function(productId, variantId, quantity) {
        if (quantity == null)
            quantity = 1;
        Soane.Web.Main.Ajax.BasketService.RemoveFromBasket(productId, variantId, quantity, Function.createDelegate(this, this.Update));
    },
    Update: function(data) {
        this.RenderBasket(data);
        this.LocalRenderFunction(data);
        Show('MiniBasket');
    },
    RenderBasket: function(data) {
        var FullTemplate = this.LineTemplate1 + this.LineTemplate2 + this.LineTemplate3 + this.LineTemplate4;

        var html = '';
        var line = '';

        for (var i = 0; i < data.Items.length; i++) {            
            line = FullTemplate;
            line = line.replace(/%Img%/g, data.Items[i].ImageURL);
            line = line.replace(/%ProductId%/g, data.Items[i].ProductId);
            line = line.replace(/%VariantId%/g, data.Items[i].VariantId);
            line = line.replace(/%DisplayName%/g, data.Items[i].DisplayName);
            line = line.replace(/%ItemSummary%/g, data.Items[i].ItemSummary);
            line = line.replace(/%Quantity%/g, data.Items[i].Quantity);
            line = line.replace(/%Price%/g, data.Items[i].Price);
            html += line;
        }

        $('#BasketSummary').empty();
        $('#BasketSummary').append(html);
    }
};