$(function () {

    //  create product tabs
    var tabContainers = $('div.tabs div.tabcontainer div.bottom > div');

    $('div.tabs ul.tabNavigation a').click(function() {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

function chooseColour(colour) {

    //  clear selection
    $(".colours a").removeClass("on");

    //  set chosen color
    colour.addClass("on");

    //  update price
    getPrice();
}

function createCustomiseAndBuy() {

    $(".colours a").click(function () {
        chooseColour($(this));
    });
    $(".size").change(function () {
        getPrice();
    });
    $(".fabric").change(function() {
        getPrice();
    });
    $(".length").change(function () {
        getPrice();
    });
    $(".waist").change(function () {
        getPrice();
    });
    //  init the add to basket button
    $(".addtobasket").click(function () {
        getPrice(true);
    });

    //  get initial price, setting the first colour as on
    $(".colours a:first").addClass("on");
    getPrice();
}

function getPrice(addToBasket) {
    var colour = $(".colours a.on").attr("id");
    var product = $(".product-info input:first").val();
    var size = $(".optionsize").val();
    var fabric = $(".optionfabric").val();
    var length = $(".optionlength").val();
    var waist = $(".optionwaist").val();
    var notes = $(".notestextbox").val();
    var quantity = $(".quantity").val();
    
        //  handle nulls
    if (colour == undefined) colour = 0;
    if (size == undefined) size = 0;
    if (fabric == undefined) fabric = 0;
    if (length == undefined) length = 0;
    if (waist == undefined) waist = 0;
    if (notes == undefined) notes = "";
    if (quantity == undefined) quantity = 0;
    if (addToBasket == undefined) addToBasket = false;
    
        
    //  build the JSON string.
    var JSON = "{" +
               " 'Product_ID' : '" + product + "' , " +
               " 'Colour_ID' : '" + colour + "' , " +
               " 'Size_ID' : '" + size + "' , " +
               " 'Fabric_ID' : '" + fabric + "' , " +
               " 'Length_ID' : '" + length + "' , " +
               " 'Waist_ID' : '" + waist + "' , " +
               " 'Notes' : '" + notes + "' , " +
               " 'AddToBasket' : '" + addToBasket + "' , " +
               " 'Quantity' : '" + quantity + "' , " +
               " 'ReturnUrl' : '" + location.href + "' " +
               "}";
    
    //  call the web service passing the product and options
    //  and then retrieve the price.
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Assets/DanceForce/WebServices/DanceForce.asmx/GetPrice",
        data: JSON,
        dataType: "json",
        success: function(response) {
            var oResponse = eval("(" + response.d + ")");
            var items = oResponse.DataThree;
            var baskettotal = oResponse.DataTwo;
            
            if (oResponse.Valid) {
                $(".pricing").html(oResponse.Data);

                if ((addToBasket) && notes == "" && product == "162") {
                    alert("Please enter your size and colour requirements.");

                   return;
                }

                if (addToBasket) {
                    $(".message").html("<p>The item has been added to your basket. <a href='/Basket.aspx'>Click here</a> to checkout.</p>");

                    //  update basket
                    $(".total").html("<span class='baskettotal'>" + baskettotal + "</span> | <span class='basketitems'>" + items + " ITEMS</span>")
                }

            }
        },
        error: function(response) {
            alert(response.responseText);
        }
    });
}