/**
 * Tooth & Nail global SlidePane JS
 * Used for sliding stuff around -- usually image galleries and such. Markup should be something like:
 *
 * <div id="slidey"><!-- Pass this element to the constructor -->
 *      <div id="cropper">
 *          <div id="content-wrapper"><!-- This is absolutely positioned, 
 *              <div class="content-item"><img src="..." /></div><!-- Set the CSS class here as the 'contentClass' option -->
 *              <div class="content-item"><img src="..." /></div>
 *              <div class="content-item"><img src="..." /></div>
 *          </div>
 *      </div>
 * </div
 *
 * Dependencies:
 *      -   MooTools 1.11
 *          http://mootools.net/
 *      -   Modernizr
 *          /_global/lib/js/modernizr-latest.js
 *
 * Author: Cuban Council / $horty chris@cubancouncil.com
 */
var SlidePane = new Class({

    options: {
        initial: 0, // Initial item to display
        orientation: "horizontal", // Either 'horizontal' or vertical
        prevClass: "prev", // Class for 'previous' nav button
        nextClass: "next", // Class for 'next' nav button
        indexButtons: null, // Class for index nav buttons, e.g. if you have 3 content items, this should be a $$() collection of 3 buttons tied to them
        contentClass: "content", // Class of element to be animated/shifted that wraps around content items
        itemClass: "content-item", // Class of each content item to be shifted to
        fxOptions: { // MooTools animation Fx options
            'duration': 500
        },
        onShiftStart: Class.empty,
        onShiftComplete: Class.empty
    },
    
    // Settings
    
    slideProperty: null, // CSS property to animate for shift, either 'top' or 'left'
    
    // Elements
    
    pane: null, // Main element that wraps around everything else
    contentWindow: null, // Content window to be animated/shifted found using options.contentClass
    contentItems: [], // Array of content items
    
    // Animators
    
    slideAnim: null, // Animator for slide element, only present if csstransitions aren't supported
    
    initialize: function(element, options) {
        
        var self = this;
        
        this.setOptions(options);

        this.pane = $(element);
        this.contentWindow = this.pane.getElement("." + this.options.contentClass);
        
        var prevBtns = this.pane.getElements("."+this.options.prevClass);
        var nextBtns = this.pane.getElements("."+this.options.nextClass);
        
        
        // ---- EVENTS
        
        // 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);
        }
        
        // Index buttons
        
        if (this.options.indexButtons) {
            this.options.indexButtons.each(function(el, index) {
                $(el).addEvent('click', function(e) {
                    new Event(e).stop();
                    this.blur();
                    self.shift(index);
                });
            })
        }

        // 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 up content window
        
        this.slideProperty = (this.options.orientation == 'vertical') ? 'top' : 'left';
        this.contentWindow.setStyle(this.slideProperty, 0);
        this.contentWindow.setStyles({
            'position': 'absolute',
            'width': contentWindowWidth // Total content width
        });
        
        
        if (!Modernizr.csstransitions) {
            this.slideAnim = new Fx.Style(this.contentWindow, this.slideProperty, 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;
                }
            }
        }
        
        // On state
        
        if (this.options.indexButtons) {
            this.options.indexButtons.each(function(el, index) {
                if (index == itemNum) {
                    $(el).addClass('on');
                } else {
                    $(el).removeClass('on');
                }
            });
        }
        
        target = target * -1;
        
        if (Modernizr.csstransitions) {
            this.contentWindow.setStyle(Modernizr.prefixed('transition'), this.slideProperty + ' ' + this.options.fxOptions.duration + 'ms ease-in-out');
            this.contentWindow.setStyle(this.slideProperty, target);
        } else {
            this.slideAnim.start(target); // Animate shift
        }
    }

});

SlidePane.implement(new Events, new Options);