project.player.PlaylistTabs = new Class({
    Implements: project.player.Logging,

    log_prefix: 'PlaylistTabs',

    proxy: null,
    contentset_type: null,
    playlists: null,
    active_playlist_id: null,
    is_user: null,
    related: null,
    change_playlist_callback: null,
    load_user_playlist_callback: null,
    tabs_maxwidth: 350,

    first_tab: {
        dom_element: null,
        active: false,
        title: 'Folgen',
        playlist: {},
        page_count: null
    },

    second_tab: {
        dom_element: null,
        active: false,
        title: 'Mehr Videos',
        playlists: [],
        clip_count: 0,
        active_playlist: null,
        has_dropdown: false,
        visible: true,
        playlists_index: []
    },

    dropdown: null,


    initialize: function(obj)
    {
        this.logger('initialize');
        this.proxy = obj.proxy;
        this.contentset_type = obj.contentset_type;
        this.playlists = obj.playlists;
        this.active_playlist_id = obj.active_playlist_id;
        this.is_user = obj.is_user;
        this.related = obj.related;
        this.change_playlist_callback = obj.change_playlist_callback;
        this.load_user_playlist_callback = obj.load_user_playlist_callback;
        this.first_tab.title = obj.proxy.json.first_tab_title;
        this.second_tab.title = obj.proxy.json.second_tab_title;

        this.setup();
    },


    setup: function()
    {
        var that = this;

        if('normal' == this.contentset_type)
        {
            that.first_tab.playlist = that.playlists[0];
            that.first_tab.active = (that.active_playlist_id == that.first_tab.playlist.id);

            that.first_tab.page_count = that.first_tab.playlist.page_count;

            that.second_tab.playlists = that.playlists.slice(1);
            that.second_tab.has_dropdown = true;
            that.second_tab.visible = (that.second_tab.playlists.length > 0);
            that.first_tab.playlist.playlist_type = 'normal';

            that.second_tab.playlists.each(function(playlist, index){
                that.second_tab.playlists_index[playlist.id] = index;
            });
            that.second_tab.active = that.isPlaylistOnSecondTab(that.active_playlist_id);

            // Film Contentset
            if('Filme' == that.proxy.player.active_clip.category)
            {
                that.first_tab.title = that.proxy.json.first_tab_title;
                that.second_tab.visible = false;
            }
        }

        if('ugc' == this.contentset_type)
        {
            that.first_tab.playlist = that.playlists[0];
            that.first_tab.playlist.playlist_type = 'ugc';
            that.first_tab.title = that.proxy.json.first_tab_title;
            that.first_tab.active = (that.related);
            that.first_tab.page_count = that.first_tab.playlist.page_count;

            that.second_tab.playlists = that.playlists.slice(1);
            that.second_tab.title = that.proxy.json.second_tab_title;
            that.second_tab.clip_count = that.second_tab.playlists[0].clip_count;
            that.second_tab.has_dropdown = false;
            that.second_tab.active = (that.is_user);
        }

        this.render();
    },

    isPlaylistOnSecondTab: function(playlist_id)
    {
        return (undefined !== this.second_tab.playlists_index[playlist_id]);
    },

    activatePlaylist: function(playlist_id)
    {
        var that = this;

        if(that.isPlaylistOnSecondTab(playlist_id))
        {
            var index = that.second_tab.playlists_index[playlist_id];
            var playlist = that.second_tab.playlists[index];

            that.changeSecondTabPlaylist(playlist, false)
        }
    },

    render: function()
    {
        var that = this;
        that.logger('render');

        $('player_playlist_tabs').empty();

        /*
         * first tab
         */
        that.first_tab.dom_element = new Element('li', {
            'id': 'player_first_tab',
            'text': that.getTabTitle({
                'title': that.first_tab.title,
                'clip_count': that.first_tab.playlist.clip_count,
                'is_first': true
            }),
            'data-id': that.playlists[0].id,
            'data-pages': that.playlists[0].page_count
        }).addEvent('click', function(event){
            event.stop();

            var playlist_id = parseInt(this.get('data-id'));
            var page_count = parseInt(this.get('data-pages'));

            that.proxy.playlist_cache.setPlaylistPageCount(playlist_id, page_count);

            that.first_tab.active = true;
            that.first_tab.dom_element.addClass('active');
            if(that.second_tab.dom_element)
            {
                that.second_tab.active = false;
                that.second_tab.dom_element.removeClass('active');
            }

            that.change_playlist_callback(playlist_id);
        });

        if(that.first_tab.active)
        {
            that.first_tab.dom_element.addClass('active');
        }

        $('player_playlist_tabs').grab(that.first_tab.dom_element);


        /*
         * second tab
         */
        if(that.second_tab.visible)
        {
            that.second_tab.dom_element = new Element('li', {
                'id': 'player_second_tab'
            });

            if(that.second_tab.active)
            {
                that.second_tab.dom_element.addClass('active');
            }

            if(that.second_tab.has_dropdown)
            {
                /*
                 * Dropdown
                 */
                that.dropdown = new Element('div', {
                    'id': 'dropping'
                });

                that.second_tab.playlists.each(function(playlist){

                    var playlist_link = new Element('a', {
                        'text': playlist.title + ' (' + playlist.clip_count + ')',
                        'data-id': playlist.id,
                        'data-pages': playlist.page_count
                    }).addEvent('click', function(event){
                        event.stop();


                        var playlist_id = parseInt(this.get('data-id'));
                        var index = that.second_tab.playlists_index[playlist_id];
                        var playlist = that.second_tab.playlists[index];

                        that.logger(that.second_tab.playlists);
                        that.logger(playlist);


                        that.changeSecondTabPlaylist(playlist, true);
                    });
                    that.dropdown.grab(playlist_link);

                    that.second_tab.clip_count += playlist.clip_count;
                });

                that.second_tab.dom_element.addEvents({
                    'mouseover': function() {
                        that.dropdown.show();
                        that.updateDropdownPosition();
                    },
                    'mouseleave': function() {
                        that.dropdown.hide();
                    }
                });


            }

            var title_element = that.getTabTitle({
                'title': that.second_tab.title,
                'clip_count': that.second_tab.clip_count,
                'is_first': false
            });


            that.second_tab.dom_element.grab(title_element);

            if(that.dropdown)
            {
                var span = new Element('span');
                that.second_tab.dom_element.grab(span);

                that.second_tab.dom_element.grab(that.dropdown);
            }

            that.second_tab.dom_element.addEvent('click', function(event) {
                event.stop();

                that.logger('second tab click');

                // load last active playlist
                if(that.second_tab.active_playlist)
                {
                    that.changeSecondTabPlaylist(that.second_tab.active_playlist, true);
                }

                // load user playlist
                if('ugc' == that.contentset_type)
                {
                    that.loadUserPlaylist();
                }

            });

            $('player_playlist_tabs').grab(that.second_tab.dom_element);
        }
    },





    loadUserPlaylist: function()
    {
        this.first_tab.active = false;
        this.first_tab.dom_element.removeClass('active');
        this.second_tab.active = true;
        this.second_tab.dom_element.addClass('active');

        this.load_user_playlist_callback();
    },


    highlightFirstTab: function()
    {
        var that = this;

        that.first_tab.active = true;
        that.first_tab.dom_element.addClass('active');
        that.second_tab.active = false;
        that.second_tab.dom_element.removeClass('active');
    },


    changeSecondTabPlaylist: function(playlist, execute_playlist_callback)
    {
        var that = this;

        that.logger('changeSecondTabPlaylist: ' + playlist.title);

        that.first_tab.active = false;
        that.first_tab.dom_element.removeClass('active');
        that.second_tab.active = true;
        that.second_tab.dom_element.addClass('active');

        if(that.second_tab.dom_element.getElement('p'))
        {
            that.second_tab.dom_element.getElement('p').set('text', playlist.title + ' | mehr');
            that.second_tab.dom_element.getElement('p').setProperty('title', playlist.title);
        }
        else
        {
            // ugc contentset
            that.second_tab.dom_element.set('text', playlist.title);
            that.second_tab.dom_element.setProperty('title', playlist.title);
        }

        that.checkTabSize();

        if(that.second_tab.has_dropdown)
        {
            that.second_tab.dom_element.grab(that.dropdown);
            that.dropdown.hide();
        }

        // load playlist
        that.second_tab.active_playlist = playlist;
        that.logger(['that.second_tab.active_playlist', playlist]);

        if(execute_playlist_callback)
        {
            that.change_playlist_callback( playlist.id, playlist.page_count, playlist.playlist_type );
        }
    },


    getTabTitle: function(tab)
    {
        this.logger({'getTabTitle': tab});
        var title = '';
        if(tab.is_first)
        {
            title = tab.title + ' (' + tab.clip_count + ')';
            if(tab.clip_count <= 1)
            {
                title = tab.title; // Film Contentset
            }

            return title;
        }
        else
        {
            var clip_count = ''; // (this.second_tab.clip_count >= 1) ? ' (' + this.second_tab.clip_count + ')' : '';

            this.second_tab_title = new Element('p', {
                'text': tab.title + clip_count
            });

            return this.second_tab_title;
        }
    },



    setFirstTabTitle: function(value, clip_count)
    {
        this.logger(['setFirstTabTitle', value]);
        this.first_tab.clip_count = clip_count;
        this.first_tab.dom_element.set('html', this.getTabTitle({
            'title': value,
            'clip_count': clip_count,
            'is_first': true
        }));
    },



    setSecondTabTitle: function(value, clip_count)
    {
        this.logger(['setSecondTabTitle', value]);
        this.second_tab.clip_count = clip_count;
        this.second_tab.dom_element.set('html', this.getTabTitle({
            'title': value,
            'clip_count': clip_count,
            'is_first': false
        }));
    },


    updateDropdownPosition: function()
    {
        var dropdown_width = this.dropdown.getSize().x;
        var left = 13+this.first_tab.dom_element.getSize().x;

        if(left + dropdown_width > this.tabs_maxwidth)
        {
            var current_tabs_width = this.first_tab.dom_element.getSize().x + this.second_tab.dom_element.getSize().x;

            left = current_tabs_width - dropdown_width + 11;
        }
        
        this.dropdown.setPosition({x: left, y: 40});
    },


    checkTabSize: function()
    {
        this.logger('checkTabSize');

        var first_tab_width = this.first_tab.dom_element.getSize().x;
        var second_tab_width = this.second_tab.dom_element.getSize().x;

        if(first_tab_width + second_tab_width > this.tabs_maxwidth)
        {
            this.checkSecondTabTitleLength('.. | mehr');
        }
    },


    checkFirstTabTitleLength: function(suffix, str_length)
    {
        this.logger('checkFirstTabTitleLength');
        var dom_element = this.first_tab.dom_element;
        var max_width = 260;
        var width = dom_element.getSize().x;
        var title = dom_element.get('text');

        if(width > max_width)
        {
            str_length = str_length || title.length;
            dom_element.set('text', title.substring(0, str_length));
            this.checkFirstTabTitleLength(suffix, str_length-1);
        }
        else
        {
            if(undefined !== str_length)
            {
                dom_element.set('text', title + suffix);
            }
        }
    },


    checkSecondTabTitleLength: function(suffix, str_length)
    {
        this.logger('checkSecondTabTitleLength');
        if(this.second_tab.dom_element)
        {
            var dom_element = this.second_tab.dom_element.getElement('p');

            var title = dom_element.get('text');
            dom_element.set('text', title + suffix);


            var first_tab_width = this.first_tab.dom_element.getSize().x;
            var second_tab_width = this.second_tab.dom_element.getSize().x;

            if(first_tab_width + second_tab_width > this.tabs_maxwidth)
            {
                str_length = str_length || title.length;
                dom_element.set('text', title.substring(0, str_length));
                this.checkSecondTabTitleLength(suffix, str_length-1);
            }
        }
    }
});