// JavaScript Document

// Load after all page graphics have loaded
$(window).load(function() {
    Rotator.start();
});

window.Rotator =
{    
    settings: {
        rotatorElement: '#slideshow',
        slideElement:   '.slide',
        
        // Image rotating
        interval:       5000,    // Interval between changing images
        fadeTime:       500,     // Animation duration
        
        // Console
        consoleFadeout: 500,     // On hover
        consoleFadein:  100      // On unhover
    },
    
    _timer: null,
    _index: -1,
    _items: [],
    _root: null,
    _hoverTimer: null,
    
    _onHover: function()
    {
        if (this._hoverTimer)
            { window.clearTimeout(this._hoverTimer); }
            
        this._root.find('.console').fadeTo(this.settings.consoleFadein, 0.95);
    },
    
    _onUnhover: function()
    {
        var _this = this;
        
        this._hoverTimer = window.setTimeout(
            function(){
                _this._root.find('.console').fadeTo(_this.settings.consoleFadeout, 0);
            }, 1000
        );
    },
    
    _populateConsole: function()
    {
        var rotator = this;
        var cons = $("<div class='console'></div>");
        cons.fadeTo(2000, 0);
        this._root.append(cons);
        for (var i=0; i<this._items.length; ++i)
        {
            var newNode = $('<a href="#">' + (i+1) + '</a>');
            newNode[0].index = i;
            newNode.click(function() { rotator.flipTo(this.index); return false; });
            cons.append(newNode);
        }
        
        // Register the show/hide hooks
        this._root.hover(function(){ _this._onHover(); }, function(){ _this._onUnhover(); });
    },
    
    _stopTimer: function()
    {
        // Kill it if it's already running
        if (this._timer)
            { window.clearTimeout(this._timer); }
    },
    
    _startTimer: function()
    {
        this._stopTimer();
        
        // Start again
        this._timer = window.setTimeout(function(){
            _this.flip();
        }, this.settings.interval);
        
    },
    
    start: function()
    {
        var _this = this;
        
        // Init: Rotator and rotatees
        this._root = $(this.settings.rotatorElement);
        this._items = this._root.find(this.settings.slideElement);
        this._items.css({visibility: 'visible', display: 'none'});
        
        // Init: Console
        this._populateConsole();
        
        // Init: Timer
        this._startTimer();
        
        // Start it
        this.flip();
    },
    
    flipTo: function(target)
    {
        this._stopTimer();
        
        // Stop animation
        this._items.stop();
        this._items.css({ zIndex: 0 });
        
        // Fade in
        $(this._items[target]).css({ zIndex: 1 }).fadeTo(1, 1.0);
        for (var i=0; i<this._items.length; ++i)
        {
            if (i != target) {
                $(this._items[i]).fadeTo(1, 0.0);
            }
            
        }
        
        // Set this as current
        this._index = target;
        this._updateConsole(this._index);
        // Restart timer
        this._startTimer();
    },
    
    _updateConsole: function()
    {
        var links = this._root.find('.console a');
        links.removeClass('active');
        $(links[this._index]).addClass('active');
    },
    
    flip: function()
    {
        _this = this;

        // If not the first run, select the old element
        old_el = null;
        if (_this._index != -1) {
            old_el = $(_this._items[_this._index]);
        }
        
        // Increment
        _this._index++;
        if (_this._index >= _this._items.length) { _this._index = 0; }

            // New element
            new_el = $(this._items[this._index]);
            fadeTime = this.settings.fadeTime;
        
        if (!old_el)
        {
            // First run? Make it all disappear
            var others = _this._items;
            others.css({ zIndex: 0 }).show().fadeTo(1, 0.0);
            // Leave this one showing
            new_el.css({ zIndex: 1 });
            new_el.show().fadeTo(1, 1.0);
            // Update console links
            this._index = 0;
            this._updateConsole();
        }
        else {
            // Fade in
            old_el.css({zIndex: 0});
            new_el.css({zIndex: 1});
            this._items.stop();
            var rotator = this;
            new_el.fadeTo(fadeTime, 1.0, function() { old_el.fadeTo(1, 0.0); rotator._updateConsole(); });
            
        }
        this._startTimer();
    }
};