var SlidePane = new Class({

    options: {
        initial: 0, // Initial item to display
        orientation: "horizontal",
        prevClass: "prev",
        nextClass: "next",
        contentClass: "content",
        itemClass: ".content-item",
        fxOptions: {},
        onShiftStart: Class.empty,
        onShiftComplete: Class.empty
    },

    initialize: function(element, options) {
        
        this.setOptions(options);

        this.pane = $(element);
        
        var prevBtns = this.pane.getElements("."+this.options.prevClass);
        var nextBtns = this.pane.getElements("."+this.options.nextClass);
        
        this.contentWindow = this.pane.getElement("."+this.options.contentClass);
        
        // Previous button events
        if (prevBtns.length > 0) {
            prevBtns.each(function(item) {
                item.addEvent('click', function(event) {
                    item.blur();
                    this.previous(event);
                }.bind(this));
            }, this);
        }
        
        // Next button events
        if (nextBtns.length > 0) {
            nextBtns.each(function(item) {
                item.addEvent('click', function(event) {
                    item.blur();
                    this.next(event);
                }.bind(this));
            }, this);
        }

        // Get content items
        
        var items = this.pane.getElements("."+this.options.itemClass);
        
        this.contentItems = [];
        
        var contentWindowWidth = 0;

        items.each(function(item){

            var size = item.getSize();
            
            var object = {
                item: item,
                width: size.size.x,
                height: size.size.y
            }
            
            contentWindowWidth = contentWindowWidth + size.size.x;
            
            this.contentItems.push(object);
        }, this);
        
        this.options.fxOptions.onStart = function () {
            this.fireEvent('onShiftStart', this.currentItem);
        }.bind(this);
        
        this.options.fxOptions.onComplete = function () {
            this.fireEvent('onShiftComplete', this.currentItem);
        }.bind(this);
        
        // Set content window
        this.contentWindow.setStyle('width', contentWindowWidth); // Overall content width
        
        var slideStyle = (this.options.orientation == 'vertical') ? 'top' : 'left';
        this.slide = new Fx.Style(this.contentWindow, slideStyle, this.options.fxOptions); // Window animator
        
        // Initial display state
        if (this.contentItems.length < this.options.initial) {
            this.options.initial = 0;
        }
        
        this.shift(this.options.initial);

    },

    previous: function(event) {
        event = new Event(event).stop();

        if ((this.currentItem - 1) >= 0) {
            this.shift((this.currentItem - 1));
        }

    },

    next: function(event) {
        event = new Event(event).stop();

        if ((this.currentItem + 1) < this.contentItems.length) {
            this.shift((this.currentItem + 1));
        }

    },

    shift: function(itemNum) {
        this.currentItem = itemNum;
        var target = 0;

        if (itemNum > 0) {
            for (var i = 0; i < itemNum; i++) {
                if (this.options.orientation == 'vertical') {
                    target = target + this.contentItems[i].height;
                } else {
                    target = target + this.contentItems[i].width;
                }
            }
        }

        target = (target*(-1));
        
        this.slide.start(target); // Animate shift

    }

});

SlidePane.implement(new Events, new Options);