
var News_Header = new Class({
    initialize: function()
    {
        replaceHoefler($('contentHeader'));

        this.mask = $('news-header-mask');
        this.container =  $('news-header-container');
        this.collection = $$('#news-header .news');
        
        this.current = 0;
        
        this.newsWidth = this.collection[0].getSize().x;
        this.newsHeight = this.collection[0].getSize().y;
        
        this.updatePosition();
        
        this.collection.setStyle('top', 0);
        this.collection.setStyle('visibility', 'visible');
        
        $$('.news-header-pagebrowser .news-header-pagebrowser-button').each(function(element) {
            element.addEvent('click', this.onPagebrowserClick.create({bind: this, event: true, arguments: element}));
        }.bind(this));
        
        this.mask.addEvent('mouseover', this.onMaskMouseOver.bind(this));
        this.mask.addEvent('mouseout', this.onMaskMouseOut.bind(this));
        
        this.startSlide();
    },
    clearSlide: function()
    {
        if (this.interval)
        {
            $clear(this.interval);  
        }
    },
    startSlide: function()
    {
        this.clearSlide();
        
        this.interval = this.slide.create({bind: this, delay: 5000})();
    },
    onMaskMouseOver: function()
    {
        this.clearSlide();
        
        this.mask.addClass('news-header-mask-hover');
    },
    onMaskMouseOut: function()
    {
        this.startSlide();
        
        this.mask.removeClass('news-header-mask-hover');
    },
    updatePosition: function()
    {
        if (this.current == 0)
        {
            var prev = this.collection[3];
            var next = this.collection[1];
            var nextnext =  this.collection[2];
        }
        else if (this.current == 1)
        {
            var prev = this.collection[0];
            var next = this.collection[2];
            var nextnext = this.collection[3];
        }
        else if  (this.current == 2)
        {
            var prev = this.collection[1];
            var next = this.collection[3];
            var nextnext = this.collection[0];
        }
        else if (this.current == 3)
        {
            var prev = this.collection[2];
            var next = this.collection[0];
            var nextnext = this.collection[1];
        }
        
        prev.setStyle('left', this.newsWidth * -1);
        next.setStyle('left', this.newsWidth * 1);
        nextnext.setStyle('left', this.newsWidth * 2);
        
        this.collection[this.current].setStyle('left', 0);
        this.container.setStyle('left', 0);
    },
    onPagebrowserClick: function(event, element)
    {
        event.stop();
        
        if (this.current == element.get('rel'))
        {
            return;
        }
        
        if (this.block)
        {
            return;
        }
        
        this.collection[element.get('rel')].setStyle('top', this.newsHeight * -1);
        this.collection[element.get('rel')].setStyle('left', 0);
        this.collection.setStyle('z-index', 1);
        this.collection[element.get('rel')].setStyle('z-index', 2);

        var animation = new Fx.Tween(this.collection[element.get('rel')], {
            onComplete: this.onPagebrowserComplete.create({bind: this, arguments: element.get('rel')}),
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        
        this.block = true;
        
        this.clearSlide();
        
        animation.start('top', 0);
    },
    onPagebrowserComplete: function(current)
    {
        this.current = parseInt(current, 10);
        
        this.block = false;
        
        this.updatePosition();
        
        this.startSlide();
    },
    slide: function()
    {
        if (this.block)
        {
            return;
        }
        
        var animation = new Fx.Tween(this.container, {
            onComplete: this.onSlideComplete.bind(this),
            duration: 1000,
            transition: Fx.Transitions.Back.easeInOut
        });
     
        this.block = true;
        
        animation.start('left', this.newsWidth * -1);
    },
    onSlideComplete: function()
    {
        if (this.current == 3)
        {
            this.current = 0;
        } 
        else
        {
            this.current = this.current + 1;
        }
        
        this.block = false;
        
        this.updatePosition();
        
        this.startSlide();
    }
        

    
});

