$(document).ready(function () {

    InitProducts();
    BindPagers();

    // When a brand is clicked
    $(".brandCheck").change(function () {
        // Get Selected Brands
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });
        var minP = parseInt($("#uxSliderSelectMin").val());
        var maxP = parseInt($("#uxSliderSelectMax").val());
        var vis = parseInt($("#uxVisitorID").val());
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var vw = $("#uxCurrentView").val(); // Get View


        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);
    });

    $(".clearPrice").click(function (event) {
        $("#uxSliderSelectMin").val(parseInt($("#uxSliderMin").val()));
        $("#uxSliderSelectMax").val(parseInt($("#uxSliderMax").val()));

        $("#slider").slider("values", 0, parseInt($("#uxSliderMin").val()));
        $("#slider").slider("values", 1, parseInt($("#uxSliderMax").val()));

        $("#amount").val(parseInt($("#uxSliderMin").val()) + " - " + parseInt($("#uxSliderMax").val()));
        
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });

        var minP = parseInt($("#uxSliderSelectMin").val()); // Get First value (MIN)
        var maxP = parseInt($("#uxSliderSelectMax").val()); // Get Second value (MAX)
        var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var vis = parseInt($("#uxVisitorID").val()); // Get Visitor ID
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val()); // Get Sort type from Dropdown
        var vw = $("#uxCurrentView").val(); // Get View

        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);
    });
    
    $(".clearBrands").click(function (event) {
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked", false)) {
            }
        });
        // Get Selected Brands
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });
        var minP = parseInt($("#uxSliderSelectMin").val());
        var maxP = parseInt($("#uxSliderSelectMax").val());
        var vis = parseInt($("#uxVisitorID").val());
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var vw = $("#uxCurrentView").val(); // Get View


        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);
        return false;
    });


    // When a brand is clicked
    $(".switchView").click(function (event) {

        // Get Selected Brands
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });
        var minP = parseInt($("#uxSliderSelectMin").val());
        var maxP = parseInt($("#uxSliderSelectMax").val());
        var vis = parseInt($("#uxVisitorID").val());
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var vw = $(this).attr("class").split(' ')[1].split('_')[1] == 'LIST' ? 'List' : 'Icon';

        $("#uxCurrentView").val(vw);

        if (vw == 'List') {
            $("#uxImgViewICON").attr("src", $("#uxImgViewICON").attr("src").replace("Active", ""));
            $("#uxImgViewLIST").attr("src", $("#uxImgViewLIST").attr("src").replace(".png", "Active.png"));
        }
        else {
            $("#uxImgViewLIST").attr("src", $("#uxImgViewLIST").attr("src").replace("Active", ""));
            $("#uxImgViewICON").attr("src", $("#uxImgViewICON").attr("src").replace(".png", "Active.png"));
        }

        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);

        event.preventDefault();
        event.stopPropagation();
        return false;
    });

    // When Sliding
    $("#slider").slider({
        range: true,
        min: parseInt($("#uxSliderMin").val()), // Retrieve default MIN value from Slider
        max: parseInt($("#uxSliderMax").val()), // Retrieve default MAX value from Slider
        values: [parseInt($("#uxSliderSelectMin").val()), parseInt($("#uxSliderSelectMax").val())], // Retrieve previous limits set by visitor
        slide: function (event, ui) {
            $("#amount").val(ui.values[0] + " - " + ui.values[1]);
        },
        stop: function (event, ui) {

            // Get Selected Brands
            var brands = '';
            $(".brandCheck").each(function (node) {
                if ($(this).attr("checked")) {
                    brands += $(this).val() + '_';
                }
            });

            var minP = parseInt(ui.values[0]); // Get First value (MIN)
            var maxP = parseInt(ui.values[1]); // Get Second value (MAX)
            $("#uxSliderSelectMin").val(minP); // Set First value (MIN) for use by other JS Elements
            $("#uxSliderSelectMax").val(maxP); // Set Second value (MAX) for use by other JS Elements
            var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
            var pp = parseInt($("#uxPerPage").val()); // Get PerPage
            var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
            var vis = parseInt($("#uxVisitorID").val()); // Get Visitor ID
            var sorttype = parseInt($("#" + $("#uxSortID").val()).val()); // Get Sort type from Dropdown
            var vw = $("#uxCurrentView").val(); // Get View

            SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);
        }
    });

    // On Per Page Change
    $("#" + $("#uxPerPageID").val()).change(function () {
        // Get Selected Brands
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });
        var minP = parseInt($("#uxSliderSelectMin").val());
        var maxP = parseInt($("#uxSliderSelectMax").val());
        var vis = parseInt($("#uxVisitorID").val());
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
        $("#uxPerPage").val($(this).val());
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var vw = $("#uxCurrentView").val(); // Get View

        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);
    });

    // On SortType Change
    $("#" + $("#uxSortID").val()).change(function () {
        // Get Selected Brands
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });
        var minP = parseInt($("#uxSliderSelectMin").val());
        var maxP = parseInt($("#uxSliderSelectMax").val());
        var vis = parseInt($("#uxVisitorID").val());
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
        var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var vw = $("#uxCurrentView").val(); // Get View

        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);
    });
});

function BindPagers() {

    // When a pager is clicked
    $(".pager ").click(function (event) {

        // Get Selected Brands
        var brands = '';
        $(".brandCheck").each(function (node) {
            if ($(this).attr("checked")) {
                brands += $(this).val() + '_';
            }
        });


        var minP = parseInt($("#uxSliderSelectMin").val());
        var maxP = parseInt($("#uxSliderSelectMax").val());
        var vis = parseInt($("#uxVisitorID").val());
        var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
        var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
        var cp = parseInt($(this).attr("href"));
        var pp = parseInt($("#uxPerPage").val()); // Get PerPage
        var vw = $("#uxCurrentView").val();

        SetProducts(minP, maxP, vis, sorttype, cp, pp, cat, brands, vw);

        event.preventDefault();
        event.stopPropagation();
        return false;
    });
}

// On Page Load
function InitProducts() {
    // Get Selected Brands
    var brands = '';
    $(".brandCheck").each(function (node) {
        if ($(this).attr("checked")) {
            brands += $(this).val() + '_';
        }
    });
    var minPrice = parseInt($("#uxSliderSelectMin").val());
    var maxPrice = parseInt($("#uxSliderSelectMax").val());
    var sorttype = parseInt($("#" + $("#uxSortID").val()).val());
    var cp = parseInt($("#uxCurrentPage").val()); // Get CurrentPage
    var pp = parseInt($("#uxPerPage").val()); // Get PerPage
    var cat = parseInt($("#uxCurrentCategory").val()); // Get Category
    var vw = $("#uxCurrentView").val(); // Get View
    var vis = parseInt($("#uxVisitorID").val());

    SetProducts(minPrice, maxPrice, vis, sorttype, cp, pp, cat, brands, vw);
    $("#amount").val(minPrice + " - " + maxPrice);
};

// Set Products
function SetProducts(minPrice, maxPrice, visitor, sortType, currentPage, perPage, category, brands, view) {
    // Main Productview container
    var Container = $("#productView");
    //$('#ProdHolder').html("");
   // $('#ListProducts').remove();
    //$('#ThumbProducts').remove();
    $('#uxThrob').show();
    

    // Get JSON Url
    var url = (location.href.indexOf('localhost') != -1 ? "/Skikker2011" : "") + "/json/GetProducts.aspx?min=" + minPrice + "&max=" + maxPrice + "&vis=" + visitor + "&sort=" + sortType + "&p=" + currentPage + "&pp=" + perPage + "&cat=" + category + "&brands=" + brands + "&vw=" + view;

    // Retrieve Products from JSON
    $.getJSON(url, function (data) {
        //var items = []; // Holder for Product LI elements
        //var index = 0; // Current Product Index
        var totalCount = data.Products.length; // Total products retrieved from JSON
        //alert(totalCount);
        var output = "";

        if (view == "List") {
            var firstChild = '';
            output = $('#ListProducts').parseTemplate(data);
        }
        else {
            output = $('#ThumbProducts').parseTemplate(data);
        }
        $("#uxPager > li.p").remove();
        if (data.Pagers)
            $('#uxPager').append(data.Pagers);

        if (data.PreviousPager) {
            $('#uxPagerPrevious').attr('href', '' + data.PreviousPager + '');
            $('#uxPagerPreviousLi').show();
            $('#uxPagerPrevious').show();
        }
        else {
            $('#uxPagerPrevious').hide();
            $('#uxPagerPreviousLi').hide();
        }

        if (data.NextPager) {
            $('#uxPagerNext').attr('href', '' + data.NextPager + '');
            $('#uxPagerNextLi').show();
            $('#uxPagerNext').show();
        }
        else {
            $('#uxPagerNext').hide();
            $('#uxPagerNextLi').hide();
        }

        $('#ProdHolder').html(output);
        $('#uxThrob').hide();

        BindPagers();
    });
}