SchFrontPageInfoBox = new Class({
    Implements: Options,
    options: {
        numOfAreas: 6,
        animate: true,
        infoBox: null,
        timer: null,
        index: 0,
        initialPanel: 0,
        adSlides: [],
        adsPanel: null,
        adsPanelVisible: false,
        menuPanel: null,
        menuPanelVisible: true,
        menuBtns: [],
        menuSlides: [],
        cyclePeriod: 5500,
        knobLoaded: false,
        markerContainerId: 'div#marker',
        knobContainerId: 'div#knob',
        pauseContainerId: 'div#pause',
        slideNaviBgContainerId: 'div#slideNaviBg',
        slideNaviCtlsContainerId: 'div#slideNaviCtls',
        marker: null,
        pause: null,
        knob: null,
        slideNaviBg: null,
        slideNaviCtls: null,
        divKnob: null,
        msgs: null, //debug
        disabledMenus: [],
        currentPanelIndex: 0,
        knobUrl: '',
        tweenDuration: 300
    },
    initialize: function(options) {
        this.setOptions(options);
        this.options.marker = this.options.infoBox.getElement(this.options.markerContainerId).set('tween', { duration: this.options.tweenDuration });
        this.options.pause = this.options.infoBox.getElement(this.options.pauseContainerId).set('tween', { duration: this.options.tweenDuration });
        this.options.slideNaviBg = this.options.infoBox.getElement(this.options.slideNaviBgContainerId);
        this.options.slideNaviCtls = this.options.infoBox.getElement(this.options.slideNaviCtlsContainerId);

        if (!Browser.Engine.trident)
            this.options.pause.fade('hide');
        else
            this.options.pause.setStyles({ 'display': 'none' });

        this.options.divKnob = this.options.infoBox.getElement(this.options.knobContainerId);
        this.options.adsPanel = this.options.infoBox.getElement('div#adsSlidePanel');
        this.options.menuPanel = this.options.infoBox.getElement('div#introMenuPanel');
        this.options.adSlides = this.options.adsPanel.getChildren('div');
        this.options.menuSlides = this.options.menuPanel.getChildren('div');
        this.options.menuBtns = this.options.infoBox.getElement('div#introMenuButtons').getChildren('a');
        
        if (Browser.Plugins.Flash.version > 8) {
            this.options.knob = new Swiff(this.options.knobUrl + '?noCache=' + $time(), {
                id: "knobButton",
                width: 131,
                height: 131,
                container: this.options.divKnob,
                vars: {
                    numOfAreas: this.options.numOfAreas
                },
                callBacks: {
                    onFlashLoad: function() { this.options.knobLoaded = true; } .bind(this),
                    onTurnKnob: function(value) {
                        this.togglePanels('');
                        this.showSlide(this.options.menuSlides[value]);
                        this.placeMarker(value);
                    } .bind(this)
                }
            });
        }

        this.prepareMenu();
        this.prepareAdSlides();
        this.prepareSlideNavi();
        this.placeMarker(this.options.initialPanel);
        this.togglePanels('');
        this.showSlide(this.options.menuSlides[this.options.initialPanel]);
        this.start();
    },
    prepareSlideNavi: function() {
        this.options.slideNaviBg.set('opacity', 0.6);

        var selected = new Element('div', {
            'class': 'naviSelected'
        });
        selected.index = 0;
        this.options.slideNaviCtls.adopt(selected);

        for (var i = 1; i < this.options.adSlides.length; i++) {
            var notSelected = new Element('div', {
                'class': 'naviNotSelected'
            });

            notSelected.index = i;
            this.addEventsNavi(notSelected);
            this.options.slideNaviCtls.adopt(notSelected);
        }

        this.options.slideNaviBg.setStyles({ 'width': (this.options.slideNaviCtls.getSize().x - 3) + 'px' });
    },
    addEventsNavi: function(div) {
        div.addEvents({
            'mouseenter': function() { this.set('class', 'naviHover'); },
            'mouseleave': function() { this.set('class', 'naviNotSelected'); },
            'click': this.cycleToAdSlide.pass(div.index, this)
        });
    },
    updateSlideNavi: function() {
        this.options.slideNaviCtls.getChildren('div').each(function(div) {
            if (this.options.index == div.index) {
                div.removeEvents();
                div.set('class', 'naviSelected');
            }
            else {
                div.removeEvents();
                div.set('class', 'naviNotSelected');
                this.addEventsNavi(div);
            }
        }, this);
    },
    prepareMenu: function() {
        this.options.menuBtns.each(function(btn) {
            btn.addEvent('mouseenter', function() {
                this.pause(false);
                var indexOf = this.options.menuBtns.indexOf(btn);
                if (this.options.knobLoaded)
                    $(this.options.knob).turnToPos(indexOf);

                if (!this.options.adsPanelVisible) {
                    this.options.menuSlides.each(function(slide) { this.hideSlide(slide); }, this);
                    this.showSlide(this.options.menuSlides[indexOf]);
                    this.placeMarker(indexOf);
                }
                else {
                    this.togglePanels('');
                    this.showSlide(this.options.menuSlides[indexOf]);
                    this.placeMarker(indexOf);
                }
            } .bind(this));
            btn.addEvent('mouseleave', function() { this.unPause(false); } .bind(this));
        }, this);

        this.options.menuSlides.each(function(slide) {
            slide.addEvent('mouseenter', function() { this.pause(false); } .bind(this));
            slide.addEvent('mouseleave', function() { this.unPause(false); } .bind(this));
        }, this);

        this.options.divKnob.addEvent('mouseenter', function() { this.pause(false); } .bind(this));
        this.options.divKnob.addEvent('mouseleave', function() { this.unPause(false); } .bind(this));
    },
    isMenuDisabled: function(index) {
        return this.options.disabledMenus.contains(index);
    },
    placeMarker: function(index) {
        if (this.options.animate) {
            if (!this.isMenuDisabled(index)) {
                var curPos = this.options.marker.getPosition(this.options.infoBox).x;
                var newPos = this.options.menuBtns[index].getPosition(this.options.infoBox).x + 18;
                var distance = curPos - newPos;
                var doTween = !(distance > 400 || distance < -400);

                if (this.options.marker.getStyle('display') == 'none') {
                    this.options.marker.setStyles({ 'display': 'block', 'top': this.options.menuBtns[index].getPosition(this.options.infoBox).y });

                    if (doTween) {
                        this.options.marker.tween('left', newPos);
                    }
                    else
                        this.options.marker.setStyles({ 'left': newPos });
                }
                else {
                    this.options.marker.setStyles({ 'top': this.options.menuBtns[index].getPosition(this.options.infoBox).y });

                    if (doTween) {
                        this.options.marker.tween('left', newPos);
                    }
                    else
                        this.options.marker.setStyles({ 'left': newPos });
                }
            }
        }
        else {

            if (!this.isMenuDisabled(index)) {
                if (this.options.marker.getStyle('display') == 'none') {
                    this.options.marker.setStyles({ 'display': 'block', 'top': this.options.menuBtns[index].getPosition(this.options.infoBox).y,
                        'left': this.options.menuBtns[index].getPosition(this.options.infoBox).x + 18
                    });
                }
                else
                    this.options.marker.setStyles({ 'top': this.options.menuBtns[index].getPosition(this.options.infoBox).y,
                        'left': this.options.menuBtns[index].getPosition(this.options.infoBox).x + 18
                    });
            }
        }
    },
    togglePanels: function(panel) {
        if (panel == 'ads') {
            this.options.adsPanel.setStyles({ 'display': 'block' });
            this.options.menuPanel.setStyles({ 'display': 'none' });
            this.options.slideNaviBg.setStyles({ 'display': 'block' });
            this.options.slideNaviCtls.setStyles({ 'display': 'block' });
            this.options.adsPanelVisible = true;
            this.options.menuPanelVisible = false;
            this.options.adSlides.each(function(slide) {
                this.hideSlide(slide);
            }, this);
        }
        else {
            this.options.adsPanel.setStyles({ 'display': 'none' });
            this.options.menuPanel.setStyles({ 'display': 'block' });
            this.options.slideNaviBg.setStyles({ 'display': 'none' });
            this.options.slideNaviCtls.setStyles({ 'display': 'none' });
            this.options.adsPanelVisible = false;
            this.options.menuPanelVisible = true;
            this.options.menuSlides.each(function(slide) {
                this.hideSlide(slide);
            }, this);
        }
    },
    prepareAdSlides: function() {
        this.options.adSlides.each(function(slide) {
            slide.addEvent('mouseenter', function() { this.pause(true); } .bind(this));
            slide.addEvent('mouseleave', function() { this.unPause(true); } .bind(this));
            slide.addEvent('click', function() {
                window.location = this.getChildren('a')[0].get('href');
            } .bind(slide));
        }, this);
    },
    cycleAdsForward: function() {
        if (!this.options.adsPanelVisible) {
            this.togglePanels('ads');
        }

        this.hideSlide(this.options.adSlides[this.options.index]);

        this.options.index++;
        if (this.options.index >= this.options.adSlides.length)
            this.options.index = 0;

        this.showSlide(this.options.adSlides[this.options.index]);
        this.updateSlideNavi();
    },
    cycleToAdSlide: function(index) {
        if (this.options.index != index) {
            $clear(this.options.timer);

            this.hideSlide(this.options.adSlides[this.options.index]);
            this.options.index = index;
            this.showSlide(this.options.adSlides[this.options.index]);
            this.updateSlideNavi();

            this.options.timer = this.cycleAdsForward.periodical(this.options.cyclePeriod, this);
        }
    },
    hideSlide: function(slide) {
        if (this.options.animate) {
            slide.fade('hide');
        }
        else {
            slide.setStyles({ 'display': 'none' });
        }
    },
    showSlide: function(slide) {
        if (this.options.animate) {
            slide.fade('in');
        }
        else {
            if (slide.getStyle('display') == 'none')
                slide.setStyles({ 'display': 'block' });
        }
    },
    start: function() {
        if (this.options.adSlides.length > 0) {
            this.options.index = this.options.adSlides.length - 1;
            this.options.timer = this.cycleAdsForward.periodical(this.options.cyclePeriod, this);
        }
    },
    pause: function(showIcon) {
        $clear(this.options.timer);
        if (showIcon) {
            if (this.options.animate && !Browser.Engine.trident) {
                this.options.pause.fade('in');
            }
            else {
                this.options.pause.setStyles({ 'display': 'block' });
            }
        }
    },
    unPause: function(showIcon) {
        this.options.timer = this.cycleAdsForward.periodical(this.options.cyclePeriod, this);
        if (showIcon) {
            if (this.options.animate && !Browser.Engine.trident) {
                this.options.pause.fade('out');
            }
            else {
                this.options.pause.setStyles({ 'display': 'none' });
            }
        }
    }
});