if (typeof(ZG) == 'undefined') var ZG = {};

ZG.Scroller = function() {
    var self = this,
        args = arguments;

    self.init.apply(self, args);
};

ZG.Scroller.prototype = {
    options: function() {
        var self = this;
        return {
            total_width: self.scroller_wrapper.width()
        };
    },
    
    init: function(scroller, children, controls, options) {
        var self = this;
        
        self.scroller_wrapper = $(scroller);
        self.children = $(children);
        self.controls = (controls) ? $(controls) : false;
        
        self.options = jQuery.extend(options, self.options());
                
        // Foreach of the panels, create an ImageScrollerPanel
        self.panels = new Array();
        self.indicators = new Array();

        self.children.each(function(index) {
            if (!self.panel_width) self.panel_width = $(this).width();
            self.panels.push($(this));
        });
        
        self.current_panel = 0;
        
        // Position the panels so that the second one is right next to the first one.
        self.positionPanels();
        
        self.bindEvents();
        
        if (self.options.delay) {
            self.initAutoScroll();
        }
        
        self.addIndicators();
    },
    
    addIndicators: function() {
        var self = this;
        
        var indicator_wrapper = $('<div/>').addClass('indicators');
        
        indicator_wrapper.css('margin-left', -indicator_wrapper.width()).fadeIn('slow');
        
        $.each(self.panels, function(index, panel) {
            var ind = $('<a/>').attr({
                'class': 'indicator',
                'id': 'indicator-'+index
            }).click(function(event) {
                self.destroyAutoScroll()
                self.switchPanels(index);
                self.initAutoScroll();
            }).appendTo(indicator_wrapper);
            
            if (index == 0) {
                ind.addClass('selected');
            };
            
            self.indicators.push(ind);
        });
        
        indicator_wrapper.appendTo(self.scroller_wrapper.children('.inner'));
    },
    
    initAutoScroll: function() {
        var self = this;
        
        if (self.interval)
            self.destroyAutoScroll();
        
        // set a timer to automatically push a pane on that interval
        self.interval = setInterval(function() {
            self.autoSwitchPanels();
        }, self.options.delay*1000);
    },
    
    destroyAutoScroll: function() {
        var self = this;
        
        clearInterval(self.interval);
    },
    
    positionPanels: function() {
        var self = this;
        
        $.each(self.panels, function(i, panel) {
            panel.css('left', self.panel_width*i);
        });
    },
    
    bindEvents: function() {
        var self = this;
        
        if (self.options.delay) {
            /*self.scroller_wrapper*/
            $('a.viewCaseStudy').bind('mouseover', function(event) {
                self.destroyAutoScroll();
            }).bind('mouseout', function(event) {
                self.initAutoScroll();
            });
            
            // If the window loses focus, pause the scroller.
            $(window).bind('blur', function(event) {
                self.destroyAutoScroll();
            }).bind('focus', function(event) {
                self.initAutoScroll();
            });
            
        }
    },
    
    get_panel: function(id) {
        var self = this;
        return self.panels[id];
    },
    
    get_indicator: function(id) {
        var self = this;
        return self.indicators[id];
    },
    
    switchPanels: function(target) {
        var self = this;
        
        if (target == self.current_panel) return false;
        
        var current_panel = self.get_panel(self.current_panel),
            target_panel = self.get_panel(target);
        
        current_panel.animate({ left: -self.panel_width, opacity: 0 }, {
            duration: 'slow',
            easing: 'easeOutExpo',
            complete: function() {
                current_panel.css('left', self.panel_width*(target+1));
            }
        });
        
        target_panel.show().animate({ left: 0, opacity: 1 }, {
            duration: 'slow',
            easing: 'easeOutExpo'
        });
        
        var current_indicator = self.get_indicator(self.current_panel),
            target_indicator = self.get_indicator(target);
        
        current_indicator.removeClass('selected');
        target_indicator.addClass('selected');
        
        self.current_panel = target;
    },
    
    autoSwitchPanels: function() {
        var self = this,
            target = (self.current_panel+1 == self.panels.length) ? 0 : self.current_panel+1;
        
        self.switchPanels(target);
    }
};