$(document).ready(function() {
    var timeoutVariable;

    onFilteringPageLoaded();
    initHighlighting();

    // Filter clicks
    $('#search .filters ul li:not(.select-all) a').click(function() {

        if ($(this).parent('li').hasClass('selected')) {
            $(this).parent('li').removeClass('selected');
            initiateContentLoad(1);
        } else {
            $(this).parent('li').addClass('selected');
            initiateContentLoad(1);
        }

        $('#search .filters ul li.select-all').removeClass('selected');

        return false;
    });

    $('#search .filters ul li.select-all a').click(function() {
        //        if (allFiltersAreSelected()) {
        //            $('#search .filters ul li:not(.select-all)').removeClass('selected');
        //        } else {
        //            $('#search .filters ul li:not(.select-all)').addClass('selected');
        //        }
        $(this).parent('li').toggleClass('selected');

        $('#search .filters ul li:not(.select-all)').removeClass('selected');



        loadContent(1);

        return false;
    });

    function updateSelectAll() {
        if (allFiltersAreSelected()) {
            $('#search .filters ul li.select-all a').html('Inga');
        } else {
            $('#search .filters ul li.select-all a').html('Alla');
        }
    }

    function noFiltersAreSelected() {
        if ($('#search .filters ul li.selected').length > 0) {
            return false;
        }

        return true;
    }

    function allFiltersAreSelected() {
        if ($('#search .filters ul li.selected:not(.select-all)').length == $('#search .filters ul li:not(.select-all)').length) {
            return true;
        }

        return false;
    }

    // Sorting clicks
    //    $('#search .sorting ul li a').click(function() {

    //        $(this).parent('li').parent('ul').children('li').removeClass('selected');

    //        $(this).parent('li').addClass('selected');

    //        initiateContentLoad();

    //        return false;
    //    });

    // Paging
    $('div.paging div.page-next a').click(function() {
        loadContent(currentPage + 1);
        return false;
    });

    $('div.paging div.page-previous a').click(function() {
        loadContent(currentPage - 1);
        return false;
    });

    $('div.paging div.paging-center input.select-page').keydown(function(event) {
        if (event.keyCode == '13') {
            event.preventDefault();
            loadContent($(this).val());
        }
    });

    //    $('.paging ul li a').click(function() {
    //        loadContent($(this).attr('data-page'));
    //    });

    //    function getSelectedPagingPage() {
    //        if ($('.paging ul li.selected').first() == null)
    //            return 1;

    //        return $('.paging ul li.selected').first().attr('data-page');
    //    }



    function initiateContentLoad(page) {
        clearTimeout(timeoutVariable);

        if (noFiltersAreSelected()) {
            return;
        }

        timeoutVariable = setTimeout('loadContent(' + page + ')', 1000);
    }


});

var currentPage = 1;

function getAllCategoriesString() {
    var allCategories = '';

    $('#search .filters ul li:not(.select-all) a').each(function() {
        allCategories += $(this).attr('data-category') + ',';
    });

    if (allCategories.length > 0) {
        allCategories = allCategories.substring(0, allCategories.length - 1);
    }

    return allCategories;
}

function getSelectedCategoriesString() {
    var selectedCategories = '';

    $('#search .filters ul li.selected:not(.select-all) a').each(function() {
        selectedCategories += $(this).attr('data-category') + ',';
    });

    if (selectedCategories.length > 0) {
        selectedCategories = selectedCategories.substring(0, selectedCategories.length - 1);
    }

    return selectedCategories;
}

function loadContent(page, categories) {
    //var categories = '';
    var sorting = '';

    // Categories
    if (categories == null) {

        if ($('#search .filters ul li.select-all.selected').length > 0) {
            categories = getAllCategoriesString();
        } else {
            categories = getSelectedCategoriesString();
        }
    }

    if (page == null) {
        page = 1;
    }

    //Sorting
//    if ($('#search .sorting ul li.selected').first() != null) {
//        sorting = $('#search .sorting ul li.selected a').attr('data-sortorder');
//    } else {
//        sorting = $('#search .sorting ul li a').first().attr('data-sortorder');
//    }

    //var ajaxUrl = '/data/getImageContent/?categories=' + categories + '&sortOrder=' + sorting + '&page=' + page;

    //$('div.content').html(categories + "<br />" + sorting + '<br /><br />' + ajaxUrl);
    
    $('div.content-loading').show();

    $.getJSON("/ImageHandler.ashx",
    { categories: categories,
        sortOrder: sorting,
        page: page
    },
    function(data) {
        $('div.content-loading').hide();

        var hash = 'categories=' + categories + '&page=' + page;
        location.hash = hash;

        var content = Mustache.to_html(imageTemplate, data);

        $('.content').html(content);

        currentPage = data.currentPage;

        if (currentPage <= 1) {
            $('div.page-previous').hide();
        } else {
            $('div.page-previous').show();
        }

        if (currentPage >= data.totalPages) {
            $('div.page-next').hide();
        } else {
            $('div.page-next').show();
        }

        $('input.select-page').val(currentPage);
        $('span.total-pages').html(data.totalPages);

        initHighlighting();

    });

}

/*

<li id="liPhoto" clientidmode="Static" runat="server">
    <span class="boxgrid caption">
        <asp:HyperLink ID="hplPhoto" runat="server" >
            <asp:Image ID="imgPhoto" runat="server" />
        </asp:HyperLink>
        <span class="cover boxcaption">
            <strong>
                <asp:Literal ID="litTitle" runat="server" />
            </strong>
        </span> 
    </span>
</li>

*/


var imageTemplate = '<ul id="gallery" class="grid"> {{#Images}}' +
'<li id="liPhoto" data-id="id-11" data-category="{{category}}" class="background-highlight">' +
'<span class="boxgrid caption">' +
'<a href="{{photoUrl}}"><img src="{{imageUrl}}" alt="{{photoAlt}}"/></a>' +
'<span class="cover boxcaption"><strong>{{title}}</strong>' + '</span>' +
'</span>' +
'</li>' +
'{{/Images}}  </ul>'

var imageTemplate2 = '<ul id="gallery" class="grid"> {{#Images}}' +
'<li id="liPhoto" data-id="id-11" data-category="{{category}}" class="background-highlight">' +
'{{test}} : {{data}}' +
'</li>' +
'{{/Images}}  </ul>'

function initHighlighting() {
    // Highlight with filter
    $('#search .filters ul li:not(.select-all) a').mouseenter(function() {
        $('div.content .background-highlight').stop();
        $('div.content .background-highlight').removeAttr('style');

        var color = $(this).attr('data-background');
        var category = $(this).attr('data-category');

        $('div.content .background-highlight[data-category="' + category + '"]')
        .animate({ backgroundColor: color }, 500);
    });

    $('#search .filters ul li:not(.select-all) a').mouseleave(function() {
        $('div.content .background-highlight').stop();

        var category = $(this).attr('data-category');

        $('div.content .background-highlight[data-category="' + category + '"]')
        .animate({ backgroundColor: '#212121' }, 500, null, function() {
            $(this).removeAttr('style');
        });
    });

}
function onFilteringPageLoaded() {
    if (window.location.hash != '') {
        var hashValues = getHashValues();
        var categories = hashValues['categories'];

        loadContent(hashValues['page'], categories);

        if (categories == getAllCategoriesString()) {
            $('#search .filters ul li.select-all').addClass('selected');
        } else {

            var singleCategories = hashValues['categories'].split(',');

            for (i = 0; i < singleCategories.length; i++) {
                $('#search .filters ul li:not(.select-all) a[data-category="' + singleCategories[i] + '"]').parent('li').addClass('selected');
            }

            $('#search .filters ul li.select-all').removeClass('selected');
        }
    }
}

function getHashValues()
{
    var values = [], hash;
    var hashes = window.location.hash.slice(window.location.hash.indexOf('#') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        values.push(hash[0]);
        values[hash[0]] = hash[1];
    }

    return values;
}