/*
 * Script: SlidingPanel.js
 * 
 * Author: 
 *  Innovagency.ch (Richard Greset)
 * 
 * License: 
 *  MIT-style license
 */
 
/*
 * Class: SlidingPanel
 */
var SlidingPanel = new Class({
    _container: null,
    _width: 0,
    _height: 0,
    _panes: null,
    _currentPane: 0,
    _locked: false,
    
    options: {
        slideDuration: 500,
        slideTransition: Fx.Transitions.linear,
        onSlideStart: Class.empty,
        onSlideComplete: Class.empty,
        onFirstPane: Class.empty,
        onLastPane: Class.empty,
        defaultPane: 0
        // loopPanes: true
    },
    
    initialize: function(container, options) {
        this.setOptions(this.options, options);
        this._container = $(container);
        this._panes = this._container.getChildren();
        this._buildSlidingPanel();
    },
    
    nextPane: function() {
        
    },
    
    previousPane: function() {
        
    },
    
    getCurrentPane: function() {
        return this._panes[this._currentPane];
    },
    
    gotoPane: function(paneId) {
        var paneIndex = this._getIndexFromId(paneId);
        if (paneIndex != -1 && paneIndex != this._currentPane && !this._locked) {
            this._locked = true;
            var left = this._width;
            if (paneIndex < this._currentPane) {
                left = left * -1;
            }
            var slideEffects = new Fx.Elements([this._panes[this._currentPane], this._panes[paneIndex]], {
                duration: this.options.slideDuration,
                transition: this.options.slideTransition,
                unit: 'px',
                onStart: function() {
                    this.fireEvent('onSlideStart', [this]);
                }.bind(this),
                onComplete: function() {
                    this._currentPane = paneIndex;
                    this.fireEvent('onSlideComplete', [this]);
                    this._locked = false;
                }.bind(this)
            });
            slideEffects.start({
                '0': {
                    'left': [0, left * -1]
                },
                '1': {
                    'left': [left, 0]
                }
            });
        }
    },
    
    _buildSlidingPanel: function() {
        var wrapper = new Element('div', {
          'styles': $extend(this._container.getStyles('margin', 'height', 'width'), {
             'overflow': 'hidden',
             'position': 'relative'
          })
       }).injectBefore(this._container).adopt(this._container);
       var wrapperSize = wrapper.getSize().size;
       this._container.setStyles({
          'position': 'absolute',
          'left': '0px',
          'top': '0px'
       });
       this._width = wrapperSize.x;
       this._height = wrapperSize.y;
       this._panes.each(function(pane, index) {
           var left = (this.options.defaultPane == index) ? 0 : this._width * 2;
           pane.setStyles({
               position: 'absolute',
               top: 0,
               left: left
           });
       }.bind(this));
       this._currentPane = this.options.defaultPane;
    },
    
    _getIndexFromId: function(paneId) {
        var result = -1;
        if (! this._isInteger(paneId)) {
            for (var i = 0; i < this._panes.length; i++) {
                if (paneId == this._panes[i].id) {
                    result = i;
                    break;
                }
            }
        } else if (0 <= paneId && paneId < this._panes.length) {
            result = paneId;
        }
        return result;
    },
    
    _isInteger: function(value) {
        return ! isNaN(parseInt(value));
    }
});

SlidingPanel.implement(new Events, new Options);