var TagList = new Class({
    initialize: function(category_el, tag_el, categories, tags, jump_category, jump_tag, jump_deck) {
        this.category_el = category_el;
        this.tag_el = tag_el;
        this.categories = JSON.decode(categories);
        this.tags = JSON.decode(tags);

        this.addFavCategory();
        this.addDeckOfTheWeekCategory();        
        this.setupEvents();
        this.showCategories(jump_category);
        
        if (this.category_el.selectedIndex == 0 && gallery.getFavorites().length == 0 && this.categories.length > 1) {
            // no favorites - show next category by default
            this.category_el.selectedIndex = 1;
        }
        this.showTags(jump_tag, jump_deck);
    },
    
    addFavCategory: function() {
        var category = {};
        category.ID = 0;
        category.Name = 'My Favourites';
        this.categories.splice(0, 0, category);
    },
    
    addDeckOfTheWeekCategory: function() {
        var category = {};
        category.ID = -1;
        category.Name = 'Decks of the Week';
        this.categories[this.categories.length] = category;
    },
    
    setupEvents: function() {
        this.category_el.addEvent('change', function() {
            this.showTags();
        }.bind(this));
        this.tag_el.addEvent('change', function() {
            this.showDecks();
        }.bind(this));
    },
    
    showCategories: function(jump_category) {
        this.category_el.empty();
        var index = 0; var select = -1;
        
        this.categories.each(function(c) {
            var el = new Element('option', { 'value': c.ID }).set('text', c.Name).inject(this.category_el);
            el.data = c;
            if (jump_category && c.ID == jump_category) select = index;
            index++;
        }.bind(this));
        if (select != -1)
            this.category_el.selectedIndex = select;
    },
    
    showTags: function(jump_tag, jump_deck) {
        this.tag_el.empty();
        var index = 0; var select = -1;
        
        this.addAllTag();
        this.getTags(this.category_el.get('value')).each(function(t) {
            var el = new Element('option', { 'value': t.ID }).set('text', t.Name).inject(this.tag_el);
            el.data = t;
            if (jump_tag && t.ID == jump_tag) select = index + 1;
            index++;
        }.bind(this));
        
        if (select != -1)
            this.tag_el.selectedIndex = select;
        
        this.showDecks(jump_deck);
    },
    
    addAllTag: function() {
        var t = { 'ID': 0, 'Name': 'All', 'HasLogo': false };
        var el = new Element('option', { 'value': t.ID }).set('text', t.Name).inject(this.tag_el);
        el.data = t;
    },
    
    showDecks: function(jump_deck) {
        if (this.tag_el.selectedIndex != -1)
            gallery.show(this.category_el.options[this.category_el.selectedIndex].data, this.tag_el.options[this.tag_el.selectedIndex].data, jump_deck);
    },
    
    getTags: function(id) {
        var selected = [];
        this.tags.each(function(t) {
            if (t.TagCategoryID == id)
                selected[selected.length] = t;
        });
        return selected;
    },
    
    jumpToFavorites: function() {
        this.category_el.selectedIndex = 0;
        this.tag_el.selectedIndex = 0;
        this.showDecks();        
    }
});