if(window.Event && Event.observe)
    Event.observe(window, 'load', initPage);

var autoPlayTimer;
function initPage() {
    if(Control && Control.Tabs) {
        
        var setTabInactive = function(container) {
            container.removeClassName('active');
        }
        
        var setTabActive = function(container) {
            container.hide().addClassName('active');
            container.addClassName('active');
            new Effect.Appear(container, {
                duration: .25
            });
        }
        
        var tabUI = $('tabUI')
        
        var tabs = new Control.Tabs(tabUI.down('ul.tabs'), {
            activeClassName: 'active',
            setClassOnContainer: true,
            hideFunction: setTabInactive,
            showFunction: setTabActive
        });
        
        var tabControls = tabUI.getElementsBySelector('.controls a')
        
        var initTabControl = function(control) {
            var goToNextTab = function(evt) {
                if(evt) Event.stop(evt);
                if(autoPlayIsOn()) {
                    resetAutoPlayTimer();
                }
                tabs.next();
            }
            var goToPreviousTab = function(evt) {
                if(evt) Event.stop(evt);
                if(autoPlayIsOn()) {
                    resetAutoPlayTimer();
                }
                tabs.previous();
            }
            
            var autoPlayIsOn = function() {
                return tabControls.any(function(ctl) {return ctl.hasClassName('play') && ctl.hasClassName('active')})
            }
            
            var startAutoPlay = function() {
                autoPlayTimer = setInterval(function() {tabs.next()}, 4000);
                this.invoke('addClassName','active')
                    .invoke('down','img')
                    .flatten()
                    .invoke('setAttribute','src','includes/TabUI/images/control_pause.png');
            }.bind(tabControls.findAll(function(ctl) {return ctl.hasClassName('play')}))
            
            var stopAutoPlay = function() {
                clearInterval(autoPlayTimer);
                this.invoke('removeClassName','active')
                    .invoke('down','img')
                    .flatten()
                    .invoke('setAttribute','src','includes/TabUI/images/control_play.png');

            }.bind(tabControls.findAll(function(ctl) {return ctl.hasClassName('play')}))
            
            var resetAutoPlayTimer = function() {
                clearInterval(autoPlayTimer);
                autoPlayTimer = setInterval(function() {tabs.next()}, 4000);
            }
            
            var toggleAutoPlay = function(evt) {
                if(evt) Event.stop(evt);
                autoPlayIsOn() ? stopAutoPlay() : startAutoPlay();
            }
            
            control.classNames().each(function(className) {
                switch(className) {
                    case 'previous':  
                        control.observe('click', goToPreviousTab);
                        break;
                    case 'next' :
                        control.observe('click', goToNextTab);
                        break;
                    case 'play' :
                        control.observe('click', toggleAutoPlay);
                        break;
                }
            });
        }
        tabControls.each(initTabControl.bind(tabControls));


        tabUI.addClassName('active');
    }
}