var VideoWall = new Class({
    Implements : [ Options, Events ],
    
    type : null,
    url : 'video_wall_json',
    dom_element: null,
    json_result: [],
    elements: [],
    show_element_id: 0,
    last_element_id: null,
    periodical_obj: null,
    logger_enabled: false,
    callback: null,

    initialize : function(element, type, callback)
    {
        this.callback = callback;
        this.loadItems(element, type);
    },

    loadItems: function(element, type)
    {
        this.logger('VideoWall - loadItems');
        this.hideTitle();
        this.show_element_id = 0;
        this.last_element_id = null;
        this.dom_element = element;
        this.type = type;

        if(!$defined(this.json_result[type]))
        {
            this.updateList();
        }
        $clear(this.periodical_obj);
        this.periodical_obj = this.showTitle.periodical(5000, this);
    },
    
    stopPeriodical: function()
    {
        $clear(this.periodical_obj);
    },

    resumePeriodical: function()
    {
        this.periodical_obj = this.showTitle.periodical(5000, this);
    },

    hideTitle: function()
    {
        if($defined(this.last_element_id))
        {
            this.elements[this.type][this.last_element_id].getElements('img').each(function(img){
                img.setStyle('display');
            });
            this.elements[this.type][this.last_element_id].getElement('span').setStyle('display');
        }

    },
    
    showTitle: function()
    {
        if($defined(this.elements[this.type]))
        {
            //hide
            if($defined(this.last_element_id))
            {
                this.elements[this.type][this.last_element_id].getElements('img').each(function(img){
                    img.setStyle('display');
                });
                
                this.elements[this.type][this.last_element_id].getElement('span').setStyle('display');
                //this.logger('hide: ' + this.last_element_id);
            }
            
            // set last_element_id
            this.last_element_id = this.show_element_id;
            
            //show
            this.elements[this.type][this.show_element_id].getElements('img').each(function(img){
                img.setStyle('display', 'none');
            });
            this.elements[this.type][this.show_element_id].getElement('span').setStyle('display', 'block');
            //this.logger('show: ' + this.show_element_id);

            // increment show_element_id
            this.show_element_id = this.show_element_id + 1;
            if(this.show_element_id >= this.elements[this.type].length)
            {
                this.show_element_id = 0;
            }
        }
    },
    
    
    showRandomTitle: function()
    {
        var elements = this.dom_element.getChildren('li');
        var count = elements.length;
        if(0 < count)
        {
            elements[this.old_random_key].getElements('img').each(function(img){
                img.setStyle('display', 'block');
            });
            
            elements[this.old_random_key].getElement('span').set('style', '');
    
            var random_key = $random(0, count - 1);
            if(this.old_random_key == random_key)
            {
                var random_key = $random(0, count - 1);
            }
            this.old_random_key = random_key;
            
            elements[random_key].getElements('img').each(function(img){
                img.setStyle('display', 'none');
            });
            
            elements[random_key].getElement('span').setStyle('display', 'block');
        }
    },
    

    getElement: function(clip, class_name)
    {
        var self = this;

        if('' == class_name)
        {
            return new Element('li', {
                'class': class_name,
                'events': {
                    'mouseover': function() {
                        self.hideTitle();
                        self.stopPeriodical();
                    },
                    'mouseout': function() {
                        self.resumePeriodical();
                    }
                }
            }).grab(
                new Element('a', {
                    'href': clip.url,
                    'data-clip-id': clip.id,
                    'data-contentset-id': clip.contentset_id
                }).adopt(
                    new Element('img', {
                        'height': 73,
                        'width': 129,
                        'src': clip.image_url,
                        'alt': ''
                    }),
                    new Element('img', {
                        'class': 'play',
                        'height': 22,
                        'width': 23,
                        'src': 'static/images/ico_play.png',
                        'alt': 'Abspielen'
                    }),
                    new Element('span', {
                        'class': 'block',
                        'html': clip.video_wall_title
                    })
                ).addEvent('click', function(event){
                   // googleEventTrack('VideoWall', self.type, clip.video_wall_title, 0);
                })
            );
        }
        else
        {
            return new Element('li', {
                'class': class_name,
                'events': {
                    'mouseover': function() {
                        self.hideTitle();
                        self.stopPeriodical();
                    },
                    'mouseout': function() {
                    
                        self.resumePeriodical();
                    }
                }    
            }).grab(
                new Element('a', {
                    'href': clip.url,
                    'data-clip-id': clip.id,
                    'data-contentset-id': clip.contentset_id
                }).adopt(
                    new Element('img', {
                        'height': 147,
                        'width': 259,
                        'src': clip.image_url,
                        'alt': ''
                    }),
                    new Element('img', {
                        'class': 'play',
                        'height': 47,
                        'width': 47,
                        'src': 'static/images/ico_play_big.png',
                        'alt': 'Abspielen'
                    }),
                    new Element('span', {
                      'class': 'block',
                      'html': clip.video_wall_title
                    })
                ).addEvent('click', function(){
                    googleEventTrack('VideoWall', self.type, clip.video_wall_title, 1);
                })
            );
        }
    },


    updateList: function()
    {
        var url = this.url + '/' + this.type;
        this.dom_element.empty();
        var self = this;
        new Request.JSON({
            url: url,
            onSuccess: function(json){
            
                self.elements[self.type] = [];
                self.json_result[self.type] = json;
                var elements_list = [];
                
                /*
                 *    build items
                 */
                json.each(function(clip, index) {
                    var css_class = (0 == index) ? 'big' : '';
                    var element = self.getElement(clip, css_class);
                    elements_list[index] = element;
                    self.elements[self.type][index] = element;
                });
                
                /*
                 *    save big clip
                 */
                var big_clip = elements_list.shift();
                 

                /*
                 *    shuffle
                 */
                //elements_list.shuffle();
                
                /*
                 *    insert big clip
                 */
                var tmp_element = elements_list[8];
                elements_list[8] = big_clip;
                elements_list.include(tmp_element);
                
                /*
                 *    render items
                 */
                elements_list.each(function(element){
                    self.dom_element.grab(element);
                });

                /*
                 *    callback
                 */
                self.callback();
            }
        }).get();
    },
    
    logger: function(string)
    {
        if ( typeof console == 'object' && this.logger_enabled )
        {
            console.log( string );
        }
    }
});



window.addEvent('domready', function()
{
    if (!$('videowall')) {
        return ;
    }
    
    var video_wall = new VideoWall($('videowall_latest_clips'), 'latest', function(){
        // loading finish
        /*


        $$('#videowall a', '#videoteaser a').each(function(link) {
            link.addEvent('click', function(event){
                event.stop();

                var contentset_id = this.get('data-contentset-id');
                var clip_id = this.get('data-clip-id');

                var href = this.href;

                // fallback
                if(null === contentset_id)
                {
                    var regExp = /contentset\/([0-9]+)/;
                    var match = href.match(regExp);
                    contentset_id = match[1];
                }

                //console.log( contentset_id );
                //console.log( clip_id );

                var myRequest = new Request({
                        url: 'track',
                        timeout: 1000,
                        noCache: true,
                        onSuccess: function() {
                            window.document.location = href;
                        },
                        onFailure: function()
                        {
                            window.document.location = href;
                        },
                        onTimeout: function() {
                            window.document.location = href;
                        }
                }).post({
                    contentset_id: contentset_id,
                    clip_id: clip_id
                });
           });
        });
         */
    });

    $('videowall_latest').addClass('active');
    
    /*
     *  lastest
     */
    $('videowall_latest').addEvent('click', function(){
        var clips_list = $('videowall_latest_clips');
        
        video_wall.loadItems(clips_list, 'latest');
        
        $('videowall_tags').getChildren().each(function(li){
            li.removeClass('active');
            $(li.get('id') + '_clips').addClass('hide');
        });
        this.addClass('active');
        clips_list.removeClass('hide');
        
        trackAll();        
    });

    /*
     *  popular
     */    
    $('videowall_popular').addEvent('click', function(){
        var clips_list = $('videowall_popular_clips');
        
        video_wall.loadItems(clips_list, 'popular');
        
        $('videowall_tags').getChildren().each(function(li){
           li.removeClass('active');
           $(li.get('id') + '_clips').addClass('hide');
        });
        this.addClass('active');
        clips_list.removeClass('hide');
        
        trackAll();        
    });

    /*
     *  comments
     */
    $('videowall_comments').addEvent('click', function(){
        var clips_list = $('videowall_comments_clips');
        
        video_wall.loadItems(clips_list, 'comments');
        
        $('videowall_tags').getChildren().each(function(li){
            li.removeClass('active');
            $(li.get('id') + '_clips').addClass('hide');
        });
        this.addClass('active');
        clips_list.removeClass('hide');
        
        trackAll();        
    });
});