var featuredLists;
var flag = false;

$(function() {
    loadCategories();
    loadFeaturedLists();
});

function loadFeaturedLists() {
    if ($.browser.safari || $.browser.opera) {
        $('#moreBox').css({
            marginTop: '38px'
        });
    } else {
        
    }
    $('#featuredBox, #featured, #more, #moreBox').hide();
    $.getJSON(base_url + '/list/get', function(data) {
        var lists = parseLists(data.lists);
        featuredLists = lists.featuredLists;
        if (featuredLists.length) {
            //alert(featuredLists[0].toSource());
            $('#image').attr({
                title: 'View Featured List: ' + featuredLists[0].title
            }).css({
                background: 'url(/' + featuredLists[0].iconId + '/poster.128.jpg)'
            }).click(function(id) {
                return function() {
                    document.location.href = '/find?l=' + id
                }
            }(featuredLists[0].listId));
            $('#title').html(featuredLists[0].title);
            $('#description').html(featuredLists[0].description_html);
            viewLess(featuredLists);
            iconCache = [];
            $(featuredLists).each(function() {
              var i = iconCache.length;
              iconCache[i] = new Image();
              iconCache[i].src = '/' + this.iconId + '/poster.128.jpg';
            });
            $('#featured, #featuredBox').show();
            if (featuredLists.length > 1)
              $('#more, #moreBox').show();
        }
    });
}
function viewAll() {
    $('#moreBox').html('');
    var n = featuredLists.length;
    for (var i = 1; i < n; i++) {
        var list = featuredLists[i];
        //alert(list.toSource());
        var html = '<div style="float: left; width: 60px; height: 60px; margin: 4px; background: url(' + list.iconId + '/poster.60.jpg) no-repeat">';
        html += '<img class="iconImage enabled" src="/static/images/corners60.png" title="View Featured List: ' + list.title + '" onMouseOver="viewList(' + "'" + list.listId + "'" + ')" onMouseOut="viewList(' + "'" + featuredLists[0].listId + "'" + ')" onClick="document.location.href=' + "'" + '/find?l=' + list.listId + "'" + '" />';
        html += '</div>';
        $('#moreBox').append(html);
    }
    var offset = Math.floor((featuredLists.length - 1) / 8) * 68;
    $('#moreBox').append('<div id="elementButtonAll" class="enabled element elementButton" style="position: absolute; margin-left: 208px; margin-top: ' + (offset + 72) + 'px" onclick="viewLess()">View Less</div>');
    $('#eof').css({
        height: (180 + offset) + 'px'
    });
}
function viewLess() {
    $('#moreBox').html('');
    var n = featuredLists.length;
    if (n > 9) n = 9;
    for (var i = 1; i < n; i++) {
        var list = featuredLists[i];
        //alert(list.toSource());
        var html = '<div style="float: left; width: 60px; height: 60px; margin: 4px; background: url(' + list.iconId + '/poster.60.jpg) no-repeat">';
        html += '<img class="iconImage enabled" src="/static/images/corners60.png" title="View Featured List: ' + list.title + '" onMouseOver="viewList(' + "'" + list.listId + "'" + ')" onMouseOut="viewList(' + "'" + featuredLists[0].listId + "'" + ')" onClick="document.location.href=' + "'" + '/find?l=' + list.listId + "'" + '" />';
        html += '</div>';
        $('#moreBox').append(html);
    }
    if (featuredLists.length > 9) {
        $('#moreBox').append('<div id="elementButtonAll" class="enabled element elementButton" style="position: absolute; margin-left: 208px; margin-top: 72px" onclick="viewAll()">View All</div>');
    }
    $('#eof').css({
        height: '180px'
    });
}
function viewList(id) {
    flag = true;
    for (var i in featuredLists) {
        if (featuredLists[i].listId == id) {
            if (i == 0) {
                flag = false;
                setTimeout(function() {
                    if (!flag) {
                        $('#image').css({
                            background: 'url(/' + featuredLists[i].iconId + '/poster.128.jpg)'
                        });
                        $('#title').html(featuredLists[i].title);
                        $('#description').html(featuredLists[i].description_html);
                    }
                }, 1000);
            } else {
                $('#image').css({
                    background: 'url(/' + featuredLists[i].iconId + '/poster.128.jpg)'
                });
                $('#title').html(featuredLists[i].title);
                $('#description').html(featuredLists[i].description_html);
            }
            break;
        }
    }
}
function parseLists(lists) {
    var featuredLists = [];
    var myLists = [];
    for (var i in lists) {
        var list = lists[i];
        if (list.published) {
            featuredLists.push(list);
        } else {
            myLists.push(list);
        }
    }
    featuredLists.sort(sortLists);
    myLists.sort(sortLists);
    return {
        featuredLists: featuredLists,
        myLists: myLists
    };
}
function sortLists(x, y) {
    return x.published < y.published;
}

function loadCategories() {
    $.getJSON(base_url + '/category/get', function(data) {
        for (var i in data.categories) {
            $('#selectCategory').append('<option value="' + data.categories[i] + '">&nbsp;&nbsp;' + data.categories[i] + '</option>')
        }
    });
}
function browseByCategory() {
    if ($('#selectCategory').val()) {
        document.location.href = '/find?f=category&q=' + $('#selectCategory').val();
    }
}