project.player.PlaylistItem = new Class({
    Implements: [Options, project.player.Logging],

    log_prefix: 'PlaylistItem',

    options: {
        active: null,
        title: null,
        subtitle: null,
        description: null,
        category: null,
        image_url: null,
        type: 'normal', // normal / epg / ugc
        broadcast_time: null,
        wdh_broadcast_times: null,
        owner: null,
        click_callback: null,
        show_overlay_callback: null
    },
    
    initialize: function(options)
    {
        this.setOptions(options);
        this.logger('initialize');
    },


    render: function()
    {
        var that = this;

        // noraml
        var li_element = new Element('li');
        if(that.options.active) { li_element.addClass('active'); }

        var description = new Element('div', {
            'class': 'description'
        }).adopt([
            new Element('h5', {
                'text': that.options.title
            }),
            new Element('p', {
                'text': that.options.subtitle
            })
        ]);

        li_element.adopt([
            new Element('img', {
                'class': 'videoth',
                'src': that.options.image_url.getAtvUrl()
            }),
            new Element('img', {
                'class': 'play_btn',
                'src': 'static/images/player/play_button.png'
            }),
            description
        ]);

        li_element.addEvent('click', that.options.click_callback);


        var show_overlay_btn = new Element('img', {
            'src': 'static/images/player/playlist_content_button.png'
        });

        show_overlay_btn.addEvent('click', that.options.show_overlay_callback);


        if('normal' == that.options.type)
        {
            description.grab(
                new Element('div', {
                    'class': 'normal'
                }).adopt([
                    show_overlay_btn
                ])
            );
        }

        if('epg' == that.options.type)
        {
            description.grab(
                new Element('div', {
                    'class': 'epg'
                }).adopt([
                    new Element('span', {
                        'class': 'epg_date',
                        'text': that.options.epg.day + ' ' + that.options.epg.date
                    }),
                    new Element('span', {
                        'class': 'epg_time',
                        'text': that.options.epg.time + ' Uhr'
                    }),
                    show_overlay_btn
                ])
            );
        }

        if('ugc' == that.options.type)
        {
            var userlink = 'http://' + window.location.hostname + that.options.user_link;
            description.grab(
                new Element('div', {
                    'class': 'ugc'
                }).adopt([
                    new Element('a', {
                        'class': 'username',
                        'html': that.options.username,
                        'href': userlink
                    }).addEvent('click', function(event) {
                        event.stop();
                        ATV.navigateTo(userlink);
                    }),
                    show_overlay_btn
                ])
            );
        }

        return li_element;
    }
});