MooTools.NB.Custom.TvSpots = new Class
({
    initialize: function(items)
    {
        this.items    = items;
        this.expanded = false;
        
        // add events
        $$('#tv-spots-items li').each(function(element, key) {
           element.addEvent('click', this.itemClick.bind(this));
           element.addEvent('mouseover', this.itemMouseOver.create({bind: this, arguments: [this.items[key], element]}));
        }, this);
       
       $('tv-spots-image').addEvent('click', this.imageClick.bind(this));
       
       $('tv-spots-arrow').addEvent('click', this.arrowClick.bind(this));
       
       // check if we need expand arrow (ie6 disabled)
       if ($('tv-spots-mask-inner').getDimensions().y > 120 && !Browser.Engine.trident4) {
           $('tv-spots-arrow').setStyle('display', 'block');
       } 
       
       // set initial current
        this.setCurrent(items[0], $$('#tv-spots-items li')[0]);
    }
});

MooTools.NB.Custom.TvSpots.implement
({
    arrowClick: function (event)
    {
        event.stop();  
        
        if (this.expanded)
        {
            fxTween = new Fx.Tween($('tv-spots-mask'));
            fxTween.onComplete = function ()
            {
                $('tv-spots-arrow').set('src', '/fileadmin/inc/img/xshared/icons/arrow-down-large.gif');
            }
            fxTween.start('height', 100);
            this.expanded = false;
        }
        else
        {
            fxTween = new Fx.Tween($('tv-spots-mask'));
            fxTween.onComplete = function ()
            {
                $('tv-spots-arrow').set('src', '/fileadmin/inc/img/xshared/icons/arrow-up-large.gif');
            }
            fxTween.start('height', $('tv-spots-mask-inner').getDimensions().y);
            
            this.expanded = true;
        }
        
    },
    imageClick: function (event)
    {
        event.stop(); 
        this.showMovie(this.currentItem);
    },
    itemClick: function(event)
    {
        event.stop();
        this.showMovie(this.currentItem);
    },
    itemMouseOver: function (item, element)
    {
        this.setCurrent(item, element);
    },
    setCurrent: function (item, element)
    {
        if (this.currentElement) {
            this.currentElement.removeClass('hover');
        }
        
        this.currentItem = item;
        this.currentElement = element;
        this.currentElement.addClass('hover');
        
        
        var image = $('tv-spots-image').getChildren('img')[0];
        
        if (!image)
        {
            var image = new Element('img', {src: item.image});
            $('tv-spots-image').grab(image);
        }
        else
        {
            image.set('src',  item.image);
        }
        
    },
    showMovie: function(data)
    {
        options = {
            bgcolor: '#f4e1c1',
            flashvars: 'autoplay=1&movie=' + data.movie.replace(/.flv/i, '') + '&format=' + data.format + '&preview=' + data.preview + '&width=' + data.width + '&height=' + data.height
        };

        var url = '/fileadmin/flash/TvSpots/inc/swf/player.swf';

        Mediabox.open([[url, data.headline, (parseInt(data.width, 10) + 6) + ' ' + (parseInt(data.height, 10) + 6)]], 0, options);
    }
    
});