/**
 * Simpler Scroller, fügt schlicht die Funktionen für zurück und weiter an
 *
 * <code>
 *      <div id="outer" style="width:500px; height:200px;" >
 *      
 *          <div class="item" style="width: 500px; height: 200px;">
 *              <p>lorem lipsum</p>
 *          </div>
 *
 *          <div class="item" style="width: 500px; height: 200px;">
 *              <p>lorem lipsum</p>
 *          </div>    
 *
 *      </div>
 *      <p>
 *          <span id="left">backward</span>
 *          <span id="right">forward</span>
 *      <p>
 * </code>
 *
 * @TODO
 *     * Checken ob die Elemente für zurück und vor überhaupt da sind.
 *       siehe: initialize, setControls 
 *     
 *     * Die Schalter für zurück und vorwärts nicht per ID identifizieren, damit
 *       man mehrere Instanzen auf einer Seite laden kann.
 *     
 *     * Wenn es horizontal gescrollt wird und man z.B. 11 Elemente hat und bei
 *       step 5 angibt, wird das 11 Element nicht angezeigt
 *
 *       10 + 5 = 15. Den Index 15 gibt es aber nicht, also wird zurück auf 0
 *       gesetzt. siehe: getIndex()
 *       this.elements_count   = this.elements.length;
 *
 *     * Wenn der erste Index errreicht ist, den Schalter zurück dekativieren
 *       Analog dazu vorwärts
 *       
 *     * für den Event onMove die Element in einer Variablen zwischenspeichern
 *       
 *       this.previous
 *       this.current
 *       this.next
 *       
 *       wenn 11 Element da sind der nächste Schritt aber 15 ist, soll der nächste
 *       Schritt auf 11 zeigen. Im Moment wird im Event dann auch 15 übergeben.
 *       
 */
var Scroller_Controls = new Class({
    Implements: [Options, Events],
    options:{
        'scroller' : 'outer',
        'element'  : '.item',
        'controls' : { 
            'forward'  : 'right',
            'backward' : 'left'
        },
        'steps'               : 1,
        'direction'           : 'horizontal',
        'onMove'              : $empty,  // function(prev,current,next){},
        'fx'                  : {        // for all options see: http://mootools.net/docs/core/Fx/Fx
            'duration'   : 500,
            'link'       : 'cancel',
            'transition' : 'expo:in:out' // for all options see: http://mootools.net/docs/core/Fx/Fx.Transitions
        }
    },
    initialize: function(options) {
        this.setOptions(options)
        this.steps            = this.options.steps;
        this.direction        = this.options.direction;
        this.control_forward  = document.id( this.options.controls.forward );
        this.control_backward = document.id( this.options.controls.backward );
        this.scroller         = document.id( this.options.scroller );
        this.fx               =  new Fx.Scroll(this.scroller, this.options.fx );

        this.elements         = this.scroller.getElements(this.options.element);
        this.setControls();
        this.current_index = 0;

        /**
         * Automatisches scrollen als Plugin/Erweiterung, wie den trigger implementieren
         * wenn die Funktionen per implement angefügt wurden?
         * 
         * Event 'onInitialize':function(); erstellen, damit das dann dort getriggert werden
         * kann?
         */
        if (this.options.autoscroll) {
            this.runAutoScroll();
        }
    },
    setControls: function() {
        this.control_backward.addEvent('click',function(e) {
            e.stop();
            this.toPrev();
        }.bind(this));

        this.control_forward.addEvent('click',function(e) {
            e.stop();
            this.toNext();
        }.bind(this));
    },
    toPrev: function() {
        var index = this.getIndex('previous');
        this.move(index);
    },
    toNext: function() {
        var index = this.getIndex('next');
        this.move(index);
    },
    move: function( index ) {
        this.fx.toElement(this.elements[index]);
        this.fireEvent('move',[this.elements[index - this.steps]||false, this.elements[index], this.elements[index + this.steps]||false ] );
    },
    getIndex: function(to) {
        switch (to) {
            case 'next':
                var index = (this.current_index + this.steps);
                break;
            case 'previous':
                var index = (this.current_index - this.steps);
                break;
        }
        if (this.elements[index]) {
            this.current_index = index;
            return index;
        }
        this.current_index = 0;
        return 0;
    }
});
/**
 * Automatisches scrollen.
 */
Scroller_Controls.implement({
    /**
     * @TODO 
     *     * Die Events für start und stop separieren und bei Event nur die
     *       Funktion runAutoScroll, oder stopAutoScroll aufrufen.
     *     
     *     * Die
     */
    options : {
        'autoscroll'          : false,
        'autoscoll_interval'  : 3000
    },
    runAutoScroll: function(){
        this._autoScroll = this.toNext.periodical(this.options.autoscroll_interval, this);
        this.scroller.addEvents({
            'mouseenter':function() {
                $clear(this._autoScroll);
            }.bind(this),
            'mouseleave':function() {
                this.toNext.delay(200, this);
                this._autoScroll = this.toNext.periodical(this.options.autoscroll_interval, this);
            }.bind(this)
        })
    },
    stopAutoScroll: function(){
        $clear(this._autoScroll);
    }    
});