var FeatureBox = new Class({
    Implements: Options,
    options: {
        interval: 5000
    },
    
    initialize: function() {
        this.container = $('featurebox');
        this.connections = $('connections');
        this.buttons = [];
        this.buttons[0] = $('btn0');
        this.buttons[1] = $('btn1');
        this.buttons[2] = $('btn2');
        this.buttons[3] = $('btn3');
        this.logobox = $('logobox');
        this.index = 0;
        
        if (this.container) {
            this.initButtons();
            this.start();
        }
    },
    
    initButtons: function(btn) {
        this.buttons.each(function(btn) {
            var index = this.getIndex(btn);
            btn.addEvents({
                'mouseover': function() {if (this.index != index) btn.src = btn.src.replace('.png', '_ov.png'); }.bind(this),
                'mouseout': function() { if (this.index != index)  btn.src = btn.src.replace('_ov.png', '.png'); }.bind(this),
                'click': function() { this.stop(); this.jumpTo(index); this.start(); }.bind(this)
            });
        }.bind(this));
    },
    
    getIndex: function(btn) {
        return parseInt(btn.id.substring(3, 4));
    },
    
    start: function() {
        this.rotator = this.rotate.periodical(this.options.interval, this);
    },
    
    stop: function() {
        $clear(this.rotator);
    },
    
    jumpTo: function(index) {
        this.buttons[this.index].src = this.buttons[this.index].src.replace('_ov.png', '.png');
        this.index = index;
        if (this.buttons[this.index].src.indexOf('_ov.png') == -1)
            this.buttons[this.index].src = this.buttons[this.index].src.replace('.png', '_ov.png');
        this.setContent(index);
    },
    
    setContent: function(index) {
        this.logobox.empty();
        switch (index) {
            case 0:
                new Element('img', { 'class': 'first', 'src': 'images/flywheel/logos/EDI_Walmart.png' }).inject(this.logobox);
                new Element('img', { 'class': 'second', 'src': 'images/flywheel/logos/EDI_HomeDepot.png' }).inject(this.logobox);
                new Element('img', { 'class': 'third', 'src': 'images/flywheel/logos/EDI_Lowes.png' }).inject(this.logobox);
                this.connections.src = 'images/flywheel/logos/connections_edi.png';
                break;
            case 1:
                new Element('img', { 'class': 'first', 'src': 'images/flywheel/logos/CRM_Salesforce.png' }).inject(this.logobox);
                new Element('img', { 'class': 'second', 'src': 'images/flywheel/logos/CRM_NetSuite.png' }).inject(this.logobox);
                new Element('img', { 'class': 'third', 'src': 'images/flywheel/logos/CRM_Microsoft.png' }).inject(this.logobox);
                this.connections.src = 'images/flywheel/logos/connections_crm.png';
                break;
            case 2:
                new Element('img', { 'class': 'first', 'src': 'images/flywheel/logos/Webstore_Amazon.png' }).inject(this.logobox);
                new Element('img', { 'class': 'second', 'src': 'images/flywheel/logos/Webstore_Yahoo.png' }).inject(this.logobox);
                new Element('img', { 'class': 'third', 'src': 'images/flywheel/logos/Webstore_EBay.png' }).inject(this.logobox);
                this.connections.src = 'images/flywheel/logos/connections_webstore.png';
                break;
            case 3:
                new Element('img', { 'class': 'first', 'src': 'images/flywheel/logos/SCM_DHL.png' }).inject(this.logobox);
                new Element('img', { 'class': 'second', 'src': 'images/flywheel/logos/SCM_FedEx.png' }).inject(this.logobox);
                new Element('img', { 'class': 'third', 'src': 'images/flywheel/logos/SCM_UPS.png' }).inject(this.logobox);
                this.connections.src = 'images/flywheel/logos/connections_scm.png';
                break;
        }
    },
    
    rotate: function() {
        this.jumpTo(this.index >= 3 ? 0 : this.index + 1)
    },
    
    gotoDetail: function() {
        switch (this.index) { 
            case 0: window.location.href = '/edi/edi-overview.html'; return;
            case 1: window.location.href = '/crm/crm-overview.html'; return;
            case 2: window.location.href = '/webstore/webstore-overview.html'; return;
            case 3: window.location.href = '/scm/scm-overview.html'; return;
        }
    }
});

var featureBox;
window.addEvent('domready', function() {
    featureBox = new FeatureBox();
});