/*
<div class="channel_bar">
    <a href="#">TV Shows</a>
    <a href="#" class="on">Movies</a>
</div>

<div class="grid">
    <a href="#">All</a>
    <a href="#">Comedians</a>
    <a href="#" class="on last">Documentary</a>
    <a href="#">Science Fiction</a>
    <a href="#">Drama</a>
    <a href="#" class="last">Horror</a>
    <a href="#">Kids</a>
    <a href="#">Special</a>
</div>
*/
ChannelCategoryList = function(options) {
    var config  = {
        target: "#channel_category_list",
        channel_container_id: "channel_list",
        category_container_id: "category_list",
        clips_target: "#clip_list_container",
        clip_container_id: "category_clip_list",
        webservice: null
    }
    this.config     = $.extend(config, options);
    this.webservice = config.webservice;
    
    // our setup
    var channel_container = $("<div></div>");
    channel_container.attr("id", this.config.channel_container_id);
    channel_container.addClass("channel_bar");
    
    var category_container = $("<div></div>");
    category_container.attr("id", this.config.category_container_id);
    category_container.addClass("grid");
    
    var clip_container = $("<div></div>");
    clip_container.attr("id", this.config.clip_container_id);
    clip_container.addClass("list");
    
    $(this.config.target).append(channel_container).append(category_container);
    $(this.config.clips_target).append(clip_container);
    
    this.getChannels();
};
ChannelCategoryList.prototype = {
    getChannels: function() {
        this.webservice.get_channels(delegate(this, this.displayChannels));
    },
    displayChannels: function(data) {
        var channel_list = $("#"+ this.config.channel_container_id);
        channel_list.html("");
        
        // TODO: we could/should call something like this.config.channelItemUI(channel);
        //this.addTitle(channel_list, "Channels");
        for (var i=0; i < data.channels.length; i++) {
            channel = data.channels[i];
            // FIXME - currently hides the preview channel
            if (channel.channelUid == "c4b0ef4b-b096-4a3c-b26c-1966db3be957")
                continue;
            
            link = $("<a></a>");
            link.attr("href", "#");
            link.html(channel.name);
            link.attr("rel", channel.channelUid);
            //link.bind("click", channel, delegate(this, this.getClips));
            //link.bind("click", channel, delegate(this, this.getCategories));
            link.bind("click", channel, delegate(this, this.selectChannel));
            
            channel_list.append(link);
            
            if (i == 0) link.click(); // load the first channel's categories
        }
    },
    getCategories: function(evt) {
        if (typeof(evt.data) == "number") { // category_id
            this._category_id = evt.data;
        } else {
            this._category_id = "";
            this._channel_uid = evt.data.channelUid;
        }
        
        //channel_uid = evt.target.rel;
        this.webservice.get_categories(this._channel_uid, this._category_id, delegate(this, function(data) {
            /*
            if (data.categories.length == 0) {
                $.log("No more categories, loading clips");
                this.getClips();
            }
            */
            var category_list = $("#"+ this.config.category_container_id);
            category_list.html("");
            
            if (data.categories.length == 0) {
                var item = data.categories[i];
                
                link = $("<a></a>");
                link.attr("href", "#");
                link.attr("rel", "");
                link.html("All");
                link.bind("click", "", delegate(this, this.selectCategory));
                
                category_list.append(link);
                link.click();
            }
            
            for (var i=0; i < data.categories.length; i++) {
                var item = data.categories[i];
                
                link = $("<a></a>");
                link.attr("href", "#");
                link.attr("rel", item.id);
                link.html(item.name);
                //link.bind("click", item.id, delegate(this, this.getCategories));
                link.bind("click", item.id, delegate(this, this.selectCategory));
                
                category_list.append(link);
                
                if (i == 0) link.click();
            }
        }
            
        ));
    },
    getClips: function(evt) {
        if (evt && typeof(evt.data) == "number")
            this._category_id = evt.data;
        else
            this._category_id = "";
            
        //this._category_id = "";
            
        //this.webservice.get_content(this._channel_uid, this._category_id, delegate(this, function(data) {
        this.webservice.get_content_with_paging(this._channel_uid, this._category_id, 1, 6, delegate(this, function(data) {
            dispatch(Event.CLIPS_LOADED, [data]);
            var clip_list = $("#"+ this.config.clip_container_id);
            clip_list.html("");
                        
            for (var i=0; i < data.contentList.length; i++) {
                var clip = data.contentList[i];
                
                var div  = $("<div></div>");
                div.addClass("item");
                
                var link = $("<a></a>");
                //link.attr("href", BASE_URL + "?inventory="+ clip.inventoryUid + "&clip="+ clip.programUid);
                link.attr("href", BASE_URL + "program/"+ program_url(clip));
                //link.bind('click', clip, vidunia_play_clip);
                link.addClass("thumb");
                
                var img = $("<img></img>");
                img.addClass("thumb");
                img.attr("width", 120);
                img.attr("height", 68);
                img.attr("src", selectThumbnail(clip.thumbnails, 800));
                //img.attr("src", selectThumbnail(clip.thumbnails, 120));
                
                var h3 = $("<h3></h3>");
                h3.html(clip.title);
                h3.addClass("title");
                
                var p = $("<p></p>");
                p.addClass("desc");
                p.html(clip.titleBrief); // synopsis
                
                link.append(img).append(h3).append(p);
                
                //link.bind("click", clip, delegate(this.player, this.player.play));
                //link.bind("click", clip, delegate(this, alert));
                div.append(link);

                clip_list.append(div);
            }
        }
            
        ));
    },
    selectChannel: function(evt) {
        $("#"+ this.config.channel_container_id).find("a").removeClass("on");
        $(evt.target).addClass("on");
        this.getCategories(evt);
    },
    selectCategory: function(evt) {
        $("#"+ this.config.category_container_id).find("a").removeClass("on");
        $(evt.target).addClass("on");
        this.getClips(evt);
    }
};