$(document).ready(function() {

    $("a.switch_thumb").toggle(function () {
        $(this).removeClass("swap");
        $("div.list-holder").fadeOut("fast", function() {
            $(this).fadeIn("fast").removeClass("grid-view");
        });
    },
    function() {
        $(this).addClass("swap");
        $("div.list-holder").fadeOut("fast", function() {
            $(this).fadeIn("fast").addClass("grid-view");
        });

    });

    updateFilters();
});


function resetFilters() {
    $.post('resetFilters.html', {}, function(data) {
               updateResults();
        updateFilters();
    });

}

function setFilter(filterName, filterValue) {
    $.post('addFilter.html', {filterName: filterName, filterValue: filterValue}, function(data) {
        updateFilters();
                updateResults();

    });

}

function removeFilter(filterName) {
    $.post('removeFilter.html', {filterName: filterName}, function(data) {
        updateFilters();
                updateResults();

    });
}

function updateResults() {
    $.getJSON('getCurrentMatches.html', {}, function (data) {
        var itemText = "<div class=\"items-list\">";
        $.each(data, function(index, product) {
            itemText += "<div class=\"item\">";
            itemText += "<div class=\"img\"><a href=\"" + product.pageUrl + "\"><img src=\"" + product.image_url + "\"/></a></div>";
            itemText += "<div class=\"description\">";
            itemText += "<h2><a href=\"" + product.pageUrl + "\">" + product.product_name + "</a></h2>";

            itemText += "    <h3>Physical Properties</h3>";
                itemText += "<ul>";
                    itemText += "<li>Fire:Firecode</li>";
                    itemText += "<li>CAC Min:35</li>";


itemText += "                    <li>Cost:$$</li>";
                    itemText += "<li>No Sag, Mold Resistant</li>";


                itemText += "</ul>";
                itemText += "<h3>Sustainability</h3>";

                itemText += "<ul>";
                    itemText += "<li>51% Recycled</li>";
                    itemText += "<li>VOC: Zero emitting</li>";
                    itemText += "<li>LR: 0.79</li>";
                itemText += "</ul>";
                itemText += "<h3>Applications</h3>";

                itemText += "<p>Airports, Athletic Areas, Boutiques, Child Care, Corridors <a href=\"#\">see more</a></p>";
            itemText += "</div>";
            itemText += "</div>";
        });
        itemText += "</div>";

        $('.items-list').html(itemText);


    });
}

function updateFilters() {
    $.getJSON('updateFilters.html', {}, function (data) {
        var filterText = "<a href=\"javascript:resetFilters();\">Reset All Filters</a><br/>";
        filterText += "<h3>Refine List by:</h3>";
        $.each(data, function(index, filter) {
            filterText += "<h4>" + filter.filterName + "</h4>";
            if (filter.filterValues.length == 1) {
                filterText += "<a href=\"javascript:removeFilter('" + filter.filterKey + "');\">[X]</a>";
                filterText += "<ul>";
                filterText += "<li>" + filter.filterValues[0] + "</li>";

                filterText += "</ul>";
            } else {
                filterText += "<ul>";
                $.each(filter.filterValues, function (index, value) {
                    filterText += "<li><a href=\"javascript:setFilter('" + filter.filterKey + "', '" + value + "');\">" + value + "</a></li>";
                });
                filterText += "<p><a href=\"#\">see more</a></p>";
                filterText += "</ul>";
            }
        });
        $('div.filters').html(filterText);
        
        var catHeight =225;

        $('div.filters > ul ').each(function(n) {
            $('div.filters > ul:eq(' + n + ') > li:gt(4)').hide();
        });

        $('div.filters > ul > p > a').click(function(event) {
            if (!($(this).parent().parent().children().is(':hidden'))) {
                var parentUL = $(this).parent().parent();
                parentUL.children().filter("li:gt(4)").css('display', 'none');
                parentUL.css('height', 'auto');
                parentUL.css('overflow', 'visible');
                $(this).html('see more');
            } else {
                var expandable = $(this).parent().parent().children().filter("li:gt(4)");
                var expandableParent = expandable.parent();
                expandableParent.css('overflow', 'hidden');
                expandable.css('display', 'block').css('opacity', 0);
                if ((expandableParent.height()) >= catHeight) {
                    expandableParent.css('height', catHeight);
                    expandableParent.css('overflow', 'auto');
                    expandableParent.scrollTop(1);
                } else {
                    expandableParent.css('height', 'auto');
                    expandableParent.css('overflow', 'visible');
                }
                expandable.fadeTo(200, 1);
                $(this).html('see less');
            }
            return false;
        });
    });
}