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

    log_prefix: 'Layer',
        
    proxy: null,
    dom_element: null,
    loading: null,
    btn: {
        repeat: null,
        favorit: null,
        recommend: null
    },
    btn_wrapper: null,
    next_video: {
        title: null,
        subtitle: null,
        link: null,
        img: null,
        obj: null
    },
    more_videos: {
        wrapper: null
    },
    clip: null,
    clips_index: [],
    playlist_id: 1,

    show_recommendation: false,

    json: {
        request: {
            data: null,

            recommendation_clips: {
                url: 'player_recommendation_playlist_json/CONTENTSET_ID/PLAYLIST_ID',
                obj: null
            },
            ugc_related_clips: {
                url: 'player_related_playlist_json/641057/1823771',
                obj: null
            }

        }
    },

    
    initialize: function(options)
    {
        this.logger('initialize');

        this.proxy = options.proxy;

        this.dom_element = $('player_layer');

        this.clip = this.proxy.player.active_clip;
    },


    getPlaylistRequestUrl: function(id)
    {
        var that = this;

        if('ugc' == that.proxy.json.contentset_type)
        {
            var url = that.json.request.ugc_related_clips.url.replace(/CLIP_ID/g, id);
        }
        else
        {
            var url = that.json.request.recommendation_clips.url.replace(/PLAYLIST_ID/g, id);
        }

        url = url.replace(/CONTENTSET_ID/g, that.proxy.options.contentset_id);
        url = that.proxy.baseurl + url;

        this.logger({'layer playlist request url': url});

        return url;
    },


    renderWithoutRecommendation: function()
    {
        var that = this;

        this.dom_element.empty();

        this.loading = new Element('div', {
            'class': 'loading'
        });

        this.btn.repeat = new Element('a', {
            'class': 'btn btn_clip_repeat_middle',
            'text': 'Nochmal spielen',
            'events': {
                'click': function() {
                    that.proxy.player.obj.repeatClip();
                    that.hide();
                }
            }
        });

        this.dom_element.adopt(
            this.loading,
            this.btn.repeat
        );
    },


    render: function()
    {
        var that = this;
        var contentset_id = that.proxy.options.contentset_id;

        this.dom_element.empty();

        this.loading = new Element('div', {
            'class': 'loading'
        });

        this.btn.repeat = new Element('a', {
            'class': 'btn btn_clip_repeat',
            'text': 'Nochmal spielen',
            'events': {
                'click': function() {
                    that.proxy.player.obj.repeatClip();
                    that.hide();
                }
            }
        });

        this.btn.favorit = new Element('a', {
            'class': 'btn btn_clip_favorit',
            'text': 'Favorisieren',
            'events': {
                'click': function() {
                    that.proxy.actions.obj.executeSideBarFavVideo(that.clip.id);
                }
            }
        });

        this.btn.facebook = new Element('a', {
            'class': 'btn btn_clip_facebook',
            'text': 'auf FB teilen',
            'events': {
                'click': function() {
                    executeSideBarFacebookShare(that.clip.id, contentset_id, that.clip.title);
                }
            }
        });

        this.btn.recommend = new Element('a', {
            'class': 'btn btn_clip_recommend',
            'text': 'Weiterempfehlen',
            'events': {
                'click': function() {
                    executeSideBarSendVideo(that.clip.id, contentset_id, that.clip.title);
                }
            }
        });

        this.btn.embed = new Element('a', {
            'class': 'btn btn_clip_embed',
            'text': 'Einbetten',
            'events': {
                'click': function() {
                    executeSideBarEmbedVideo(that.clip.id, contentset_id, that.clip.title);
                }
            }
        });

        this.next_video.img = new Element('img', {
            'class': 'next_video_image',
            'src': ''
        });

        this.next_video.title = new Element('h3', {
            'class': 'next_video_title'
        });

        this.next_video.subtitle = new Element('p', {
            'class': 'next_video_subtitle'
        });

        this.next_video.link = new Element('a', {
            'class': 'next_video_link',
            'href': ''
        }).adopt(
            this.next_video.img,
            this.next_video.title,
            this.next_video.subtitle
        );

        this.more_videos.wrapper = new Element('div', {
            'class': 'more_videos_wrapper'
        }).grab(
            new Element('h5', {
                'text': 'Weitere Videos'
            })
        );

        this.btn_wrapper = new Element('div', {
            'class': 'btn_wrapper'
        });

        this.btn_wrapper.adopt([
            new Element('h5', {
                'text': 'Aktuelles Video'
            }),
            this.btn.repeat,
            this.btn.favorit,
            this.btn.facebook,
            this.btn.recommend,
            this.btn.embed
        ]);

        this.dom_element.adopt([
            this.loading,
            this.btn_wrapper,
            new Element('h5', {
                'text': 'Nächstes Videos',
                'class': 'next_video_headline'
            }),
            this.next_video.link,
            this.more_videos.wrapper
        ]);
    },


    shuffle: function(arr) {
        var i = arr.length;
        if(i == 0) return false;
        while(--i)
        {
            var j = Math.floor( Math.random() * ( i + 1 ) );
            var tempi = arr[i];
            var tempj = arr[j];
            arr[i] = tempj;
            arr[j] = tempi;
        }
    },

    update: function(clip)
    {
        this.logger('update');
        this.clip = clip;
    },


    playClip: function(clip, index)
    {
        var that = this;

        that.proxy.changeClip(clip, {
            'autoplay': true
        });

        if('ugc' == that.proxy.json.contentset_type)
        {
            that.proxy.changePlaylist(1);
            that.proxy.playlist_tabs.obj.highlightFirstTab();
        }
        else
        {
            // check if active playlist_id is equal recommendation_playlist_id
            if(that.playlist_id != that.proxy.playlist.active.id)
            {
                var first_tab_playlist_id = $('player_first_tab').get('data-id');
                if(parseInt(first_tab_playlist_id) == that.playlist_id)
                {
                    that.proxy.playlist_tabs.obj.highlightFirstTab();
                }

                that.proxy.changePlaylist( that.playlist_id );
            }

            // change playlist page to current clip
            var position = index + 1;
            var page = Math.ceil(position/4);
            that.proxy.changePage(page);
        }

        // update Playlist Tabs
        that.proxy.playlist_tabs.obj.activatePlaylist(that.proxy.playlist.active.id);
    },


    showNormalRecommendation: function()
    {
        var that = this;

        var jsonRequest = new Request.JSON({
            url: that.getPlaylistRequestUrl(that.proxy.playlist.for_recommendation),
            onSuccess: function(json) {
                that.logger(json);

                that.playlist_id = json.playlist_id;
                var clips = [];
                json.clips.each(function(clip, index){
                    that.clips_index[clip.id] = index;
                    clips.push(clip);
                });

                that.updateRecommendation(clips);
            }
        }).get();
    },


    showUgcRecommendation: function()
    {
        var that = this;

        var jsonRequest = new Request.JSON({
            url: that.getPlaylistRequestUrl(that.proxy.player.active_clip.id),
            onSuccess: function(json) {
                that.logger(json);

                var clips = [];
                for(var page, i=0; page = json[++i];)
                {
                    page.each(function(clip, index) {
                        that.clips_index[clip.id] = index;
                        clips.push(clip);
                    });
                }

                that.updateRecommendation(clips);
            }
        }).get();
    },


    updateRecommendation: function(clips)
    {
        var that = this;

        // current index
        var current_clip_index = that.clips_index[that.clip.id];

        /*
         * Next Video
         */
        var next_clip_index = 0;
        if(undefined !== current_clip_index)
        {
            next_clip_index = (current_clip_index+1 == clips.length) ? 0 : current_clip_index+1;
        }
        that.next_video.obj = clips[next_clip_index];

        // update next video
        that.next_video.img.src = that.next_video.obj.image_url.getAtvUrl();
        that.next_video.title.set('text', that.next_video.obj.title);
        that.next_video.subtitle.set('text', that.next_video.obj.subtitle);

        that.next_video.link.removeEvents('click');
        that.next_video.link.addEvent('click', function(event){
            event.stop();
            that.playClip(that.next_video.obj, next_clip_index);
        });


        /*
         * More Videos
         */

        var more_clips = [];
        clips.each(function(clip) {
            // more clips without current and next video
            if(clip.id == that.clip.id || clip.id == that.next_video.obj.id)
            {
                return true;
            }
            more_clips.push(clip);
        });

        // shuffle more videos
        that.shuffle(more_clips);

        $$('.more_videos_wrapper img').dispose();
        for (i=0;i<=3;i++)
        {
            var clip = more_clips[i];

            if(undefined != clip)
            {
                var clip_element = new Element('img', {
                    'src': clip.thumbnail_url.getAtvUrl(),
                    'title': clip.title + ' - ' + clip.subtitle,
                    'data-id': clip.id
                }).addEvent('click', function(event) {
                    event.stop();

                    var clip_id = this.get('data-id');
                    var index = that.clips_index[clip_id];
                    var clip = clips[index];

                    that.playClip(clip, index);
                });

                that.more_videos.wrapper.grab(clip_element);
            }
        }

        that.hideLoading();
    },


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

        // reset clips index
        that.clips_index = [];

        if(this.show_recommendation)
        {
            this.render();
            that.showLoading();
            that.dom_element.show();

            if('ugc' == that.proxy.json.contentset_type)
            {
                that.showUgcRecommendation();
            }
            else
            {
                that.showNormalRecommendation();
            }
        }
        else
        {
            that.renderWithoutRecommendation();
            that.showLoading();
            that.dom_element.show();
            that.hideLoading();
        }
    },

    showLoading: function()
    {
        this.loading.show();
    },

    hideLoading: function()
    {
        this.loading.hide();
    },

    hide: function()
    {
        if($('proxy_player'))
        {
            $('proxy_player').show(); // ipad fix
        }
        this.dom_element.hide();
    }
});