var MultiTeaser = new Class(
{

    height: 269,
    contentWidth: 417,
    itemHeight: 45,
    container: null,
    marker: null,
    hMarker: null,
    content: null,
    items: null,
    selectedItem: null,
    contentEffect: null,
    markerEffect: null,
    eDuration: 400,
    rDuration: 4500,
    effect: Fx.Transitions.Sine.easeOut,
    counter: 0,
    interval: null,
    effectRunning: false,

    /**
     * Constructor
     * 
     */
    initialize: function(name)
    {
        window.addEvent('domready', this.onDomReady.bind(this));
    },
    
    /**
     * Reset current selected, add behaviours and start rotation
     */
    onDomReady: function()
    {
        // reset to start
        $$('#multiteaser .switcher a.active')[0].removeClass('active');
        this.items = $$('#multiteaser .switcher a');
        this.items[0].addClass('active');
        this.content = $$('#multiteaser .gallery-holder ul')[0];
        this.content.setStyle('margin-left', 0);
        this.selectedItem = this.items[0];

        // create marker
        this.container = $('multiteaser');
        this.marker = new Element('div', {
            'id': 'multiteaser-marker'
        });
        this.marker.innerHTML = '<em>&nbsp;</em>';
        
        this.hMarker = this.marker.clone();
        this.hMarker.set('id', 'multiteaser-hover-marker');
        this.hMarker.setStyle('visibility', 'hidden');
        this.hMarker.inject(this.container);
        
        this.marker.inject(this.container);
        
        // effects
        this.markerEffect = new Fx.Morph(this.marker, {duration: this.eDuration, transition: this.effect});
        this.markerEffect.addEvent('complete', function(evt) {
            this.effectRunning = false;
            this.selectedItem.addClass('active');
        }.bind(this));
        this.contentEffect = new Fx.Morph(this.content, {duration: this.eDuration, transition: this.effect});
        
        // behaviours
        for (var i=0; i<this.items.length; i++) {
            this.items[i].mteaser = this;
            this.items[i].addEvent('mouseenter', this.onItemClick);
            //this.items[i].addEvent('mouseenter', this.onItemOver);
            //this.items[i].addEvent('mouseleave', this.onItemOut);
        }
        
        // start interval
        this.startInterval();
    },
    
    startInterval: function()
    {
        this.interval = this.next.periodical(this.rDuration, this);
    },
    clearInterval: function()
    {
        $clear(this.interval);
    },
    
    /**
     * Interval function
     */
    next: function() 
    {
        this.counter++;
        if (this.counter == this.items.length) {
            this.counter = 0;
        }
        this.switchTo(this.counter);
    },
    
    /**
     * Returns index of click item
     */
    getIndexOfItem: function(item)
    {
        return this.items.indexOf(item);
    },
    
    /**
     * Switches to the given index
     */
    switchTo: function(index)
    {
        this.markerEffect.cancel();
        this.contentEffect.cancel();
        
        
        this.counter = index;
        this.markerEffect.start({'top': index*this.itemHeight});
        this.effectRunning = true;
        this.contentEffect.start({'margin-left': -index*this.contentWidth});
        
        this.selectedItem.removeClass('active');
        this.selectedItem = this.items[index];
    },
    
    /**
     * attention: function not bound. Use this.mteaser instead
     */
    onItemClick: function(evt) 
    {
        //if (this == this.mteaser.selectedItem || this.mteaser.effectRunning) {
        //    evt.stop();
        //    return;
        //}
        this.mteaser.clearInterval();
        this.mteaser.startInterval();
        this.mteaser.switchTo(this.mteaser.getIndexOfItem(this));
        evt.stop();
    },
    
    onItemOver: function()
    {
        var that = this.mteaser;
        that.hMarker.set('styles', {visibility:'visible', top:that.itemHeight*that.getIndexOfItem(this)});
    },
    
    onItemOut: function()
    {
        var that = this.mteaser;
        that.hMarker.set('styles', {visibility:'hidden'});
    }

});
new MultiTeaser();