var fixedEncodeURIComponent = function(str) {
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
                                   replace(/\)/g, '%29').replace(/\*/g, '%2A');
}

var search = function () {
    if ($('#search-form').css('display') == "block") {
        var query = $("input[id*='query']")[0].value;
        var colour = $("select[id*='colour']")[0].value;
        var brand = $("select[id*='brand']")[0].value;
        window.location = "/viewAllItems.aspx?cat=0&br=" + brand + "&colour=" + colour + "&query=" + (query != "enter query" ? fixedEncodeURIComponent(query) : "");
        return false;
    }
}

var updateData = function(newUrl, p, c) {
    $("img[id*='mainImage']")[0].src = newUrl;
    $.getJSON('/ajax.svc/ColoredProductData', { product: p, colour: c },
     function(data) {
         $("#icons").empty();
         $.each(data.d.Icons, function(index, value) {
             $("<span title='" + value.Desc + "'> <img src='" + value.Url + "' alt='" + value.Desc + "' class='icon' /></span>").appendTo("#icons");
         });
         $("#promotion").empty();
         if (data.d.Promotion != null) {
             $("<a href='" + data.d.Promotion.Url + "'>" + data.d.Promotion.Desc + "</a>").appendTo("#promotion");
         }
         images = data.d.Images;
         $("#carousel").data("jcarousel").reset();
     }
     );
}

var buildCarusel = function() {
    $("#carousel").jcarousel({
        itemLoadCallback: carousel_itemLoadCallback
    });
}

var carousel_itemLoadCallback = function(carousel, state) {
    if (state == 'init') {
        $.each(images, function(index, value) {
            carousel.add(index + 1, carousel_getItemHTML(value));
        });
        carousel.size(images.length);
        if (images.length > 3) {
            carousel.buttonNext.show();
            carousel.buttonPrev.show();
        }
        else {
            carousel.buttonNext.hide();
            carousel.buttonPrev.hide();
        }
    }
};

var carousel_getItemHTML = function(url) {
    return $('<img src="' + url + '" width="75" alt="" class="click" />').click(function() {
        $("img[id*='mainImage']")[0].src = url;
    });
};