/*
<div class="category_list">
    <a href="#">All</a>
    <a href="#">Comedians</a>
    <a href="#" class="on">Documentary</a>
    <a href="#">Science Fiction</a>
    <a href="#">Drama</a>
    <a href="#">Horror</a>
    <a href="#">Kids</a>
    <a href="#">Special</a>
</div>

<div class="item">
    <a href="#" class="thumb">
        <img src="/images/thumbnail.jpg" width="120" height="68" alt="thumbnail" />
        <h3 class="title">Arial 11pt, #333</h3>
        <p class="desc">Arial 11pt, #333</p>
    </a>
    
    <div class="buttons">
        <a href="#" class="watch_now"></a>
        <a href="#" class="watch_trailer"></a>
    </div>                 
</div>
*/

if (typeof UIEvent == "undefined") UIEvent = {}
UIEvent.CLIPS_DISPLAYED  = "UIClipsDisplayed";
UIEvent.CATEGORY_CLICKED = "UICategoryClicked";

CategoryClipList = function(options) {
    var config  = {
        category_target: "#category_list_container",
        clips_target: "#clip_list_container",
        category_container_id: "category_list",
        clip_container_id: "clip_list",
        webservice: null
    }
    this.config     = $.extend(config, options);
    this.webservice = config.webservice;
    this.channel_name = config.channel_name;
    
    // our setup
    var category_container = $("<div></div>");
    category_container.attr("id", this.config.category_container_id);
    category_container.addClass("category_list");

    var clip_container = $("<div></div>");
    clip_container.attr("id", this.config.clip_container_id);
    clip_container.addClass("list");
    
    $(this.config.category_target).append(category_container);
    $(this.config.clips_target).append(clip_container);
    
    //this.getChannels();
    this._channel_uid = this.channel_name;
    this.getCategories({data: {channelUid: this._channel_uid}});
    if (!this.config.category_id)
        this.getClips();
};
CategoryClipList.prototype = {
    getChannels: function() {
        this.webservice.get_channels(delegate(this, function(data) {
            for (var i=0; i < data.channels.length; i++) {
                var channel = data.channels[i];

                if (this.channel_name == channel.channelUid) {
                    this._channel_uid = channel.channelUid;
                    this.getCategories({data: {channelUid:channel.channelUid}});
                    if (!this.config.category_id)
                        this.getClips();
                }
            }
        }));
    },
    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("");
            
            var item = data.categories[i];
            
            var link = $("<a></a>");
            link.attr("href", "#");
            link.attr("class", "on");
            link.html(all_string);
            link.bind("click", "", delegate(this, this.selectCategory));
            
            category_list.append(link);
            
            for (var i=0; i < data.categories.length; i++) {
                var item = data.categories[i];
                
                var link = $("<a></a>");
                link.attr("href", "#");
                link.html(item.name);
                //link.bind("click", item.id, delegate(this, this.getCategories));
                link.bind("click", item.id, delegate(this, this.selectCategory));
                
                if (this.config.category_id && this.config.category_id == item.id)
                    link.click();
                
                category_list.append(link);
            }
        }
            
        ));
    },
    getClips: function(evt) {
        if (evt && typeof(evt.data) == "number")
            this._category_id = evt.data;
        else
            this._category_id = "";
            
        this.webservice.get_content(this._channel_uid, this._category_id, 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_url = BASE_URL + "?inventory="+ clip.inventoryUid + "&clip="+ clip.programUid;
                //var link_url = BASE_URL + "?inventory="+ clip.inventoryUid + "&clip="+ clip.programUid;
                //var link_url = BASE_URL + "program/"+ (LANGUAGE_ID == 50 ? permalink(clip.title) : clip.programUid)
                var link_url = BASE_URL + "program/"+ program_url(clip)
                
                var link = $("<a></a>");
                link.attr("href", link_url);
				link.attr("rel", clip.programUid);
                link.addClass("thumb");
                
                var img = $("<img></img>");
                img.attr("width", 120);
                img.attr("height", 68);
                //img.attr("src", selectThumbnail(clip.thumbnails, 120));
                img.attr("src", selectThumbnail(clip.thumbnails, 800));

                var h3 = $("<h3></h3>");
                h3.html(clip.title);
                h3.addClass("title");
                
                var p = $("<p></p>");
                p.addClass("desc");
                p.html(clip.titleBrief); // synopsis
                
                //var current_rating = clip.rating.score;
                var current_rating = 0;
                var rating = $("<div></div>");
                rating.attr("id", "rating_container_"+ i);
                rating.addClass("ratings_container")
                for (var j=0; j < 5; j++) {
                    var input = $("<input></input>");
                    input.attr("name", "star"+ i); // grouped
                    input.attr("type", "radio");
                    input.attr("value", (j+1)+"|"+clip.programUid);
                    if (j+1 == current_rating)
                        input.attr("checked", "checked");
                    input.addClass("star");
                    rating.append(input);
                }
                
                var buttons = $("<div></div>");
                buttons.addClass("buttons")
                
                /*
                // TMP: disable PPV
                if (clip.payPerView && clip.payPerView.payGateId) {
                    var pay = $("<a></a>");
                    pay.attr("rel", clip.payPerView.payGateId);
                    pay.attr("href", "#");
                    pay.attr("class", "pay button small");
                    pay.html("Buy Program");
                    
                    buttons.append(pay);
                }
                */
                
                var trailer = $("<a></a>");
                trailer.attr("href", link_url);
                trailer.attr("class", "trailer button small");
                trailer.html(watch_string);
                
                buttons.append(trailer);
                
                link.append(img).append(h3).append(p);
                div.append(link).append(buttons).append(rating);
                clip_list.append(div);
            }
            
            dispatch(UIEvent.CLIPS_DISPLAYED);
        }));
    },
    selectCategory: function(evt) {
        dispatch(UIEvent.CATEGORY_CLICKED);
        $("#"+ this.config.category_container_id).find("a").removeClass("on");
        $(evt.target).addClass("on");
        this.getClips(evt);
    }
};