/*
 * jQuery UI Image Rotator 2.0
 * @author Geoff Mackey
 * v.1.0b
 *
 * dependencies:
 * - jquery.ui.core
 * - jquery.ui.widget
 * - jquery.bgpos-1.21.js
 * - jquery.easing.js
 */

// global 
var self = null;

(function( $, undefined ) {

$.widget( "ui.rotator", { 
    
    // object state variables
    options: {
        width: 1020,
        images: [],
        initial_image_idx: 0
    },
    
    // object constructor
    _create: function() {
        
        // setup instance variables
        self = this;
        self.current_slide = self.options.initial_image_idx;
        self.rotator = self.element;
        self.images = self.options['images'];
        
        // preload images
        $(self.options['images']).each(function() {
            (new Image()).src = this;
        });

        // setup HTML
        self.setupHTML();
        
        self.staging_window = $('div.rotator-staging-window');
        self.left_arrow = $('div.rotator-left-arrow');
        self.right_arrow = $('div.rotator-right-arrow');
        self.selection_bubbles = $('div.rotator-selection-bubbles');
        
        
        // display selection bubbles, first one is selected by default
        var count = 0;
        for(var slide in self.options['images']) {
            if (count === self.current_slide) {
                self.selection_bubbles.append('<div class="rotator-selection-bubble-selected"></div>');
            }
            else {
                self.selection_bubbles.append('<div class="rotator-selection-bubble"></div>');
            }
            count++;
        }
        
        // initial state
        self.resetStage();
        
        // register handlers
        self.registerHandlers();
        
    },
    
    setupHTML: function() {
        self.rotator.html('<div class="rotator-staging-window">' +
                '<div class="rotator-left-arrow"></div>' +
                '<div class="rotator-middle-spacer"></div>' +
                '<div class="rotator-right-arrow"></div>' +
                '<div class="rotator-selection-band">' +
                    '<div class="rotator-selection-bubbles"></div>' +
                '</div>' +
            '</div>');
    },
    
    slide: function(evt) {
        var direction = evt.data['direction'];
        var this_slide = 0;
        
        self.unregisterHandlers();
        
        if(direction === "left") {
            // determine which slide to bring in
            if (self.current_slide > 0) {
                this_slide = self.current_slide - 1;   
            } else if (self.current_slide == 0) {
                this_slide = self.images.length - 1;
            } else {
                return false;
            }
            
            // prep staging window (left)
            self.staging_window.css('background-image', 'url('+self.images[this_slide]+')');
            self.staging_window.css('background-repeat', 'no-repeat');
            self.staging_window.css('background-position', self.options['width']+'px 0');
        
        } else if(direction === "right") {
            // determine which slide to bring in
            if (self.current_slide < self.images.length - 1) {
                this_slide = self.current_slide + 1;   
            } else if (self.current_slide == self.images.length - 1) {
                this_slide = 0;
            } else {
                return false;
            }
            
            // prep staging window (right)
            self.staging_window.css('background-image', 'url('+self.images[this_slide]+')');
            self.staging_window.css('background-repeat', 'no-repeat');
            self.staging_window.css('background-position', '-'+self.options['width']+'px 0');
            
        } else {
            // corrupt slide attempt
            return false;
        }
        
        self.rotator.animate({
            backgroundPosition: '(' + (direction === 'left' ? '-' : '') + self.options['width']+'px 0)'
        }, { 
            duration: 500, 
            easing: 'easeInOutQuad', 
            complete: function() {
                // update current slide
                self.current_slide = this_slide;
                // reset stage
                self.resetStage();
                // update selection bubble
                $.each(self.selection_bubbles.children(),self.updateBubble);
                // it's okay to click again
                self.registerHandlers();
            },
            queue: false
        });
        
        self.staging_window.animate({
            backgroundPosition: '(0 0)'
        }, {
            // run this slightly slower so you get seamless transitions
            duration: 450, 
            easing: 'easeInOutQuad',
            queue: false 
        });
        
    },
    
    resetStage : function() {
        // reset the stage to prepare for the next transition
        self.rotator.css('background-image', 'url('+self.images[self.current_slide]+')');
        self.rotator.css('background-repeat', 'no-repeat');  
        self.rotator.css('background-position', '0 0')
        self.staging_window.css('background-image', 'none');
    },

    updateBubble : function(id) {
    	if (id == self.current_slide) {
    	    $('div.rotator-selection-bubble-selected').removeClass('rotator-selection-bubble-selected').addClass('rotator-selection-bubble');
    	    $(this).addClass('rotator-selection-bubble-selected');
    	}
    },
    
    registerHandlers: function() {
        self.left_arrow.bind('click', {'direction': 'left'}, self.slide);
        self.right_arrow.bind('click', {'direction': 'right'}, self.slide);
    },
    
    unregisterHandlers: function() {
        self.left_arrow.unbind('click');
        self.right_arrow.unbind('click');
    }

});

}(jQuery));