// JScript File
//************************************************************************************************
//****  FocusBox
//************************************************************************************************
var FocusBox = new Class({
	Implements: [Options, Events],

	options: {
        target:null,
        targetPanels: null,
        togglerLinks: null,
        scrollDuration: 1500,
        togglerId: null
	},

    initialize: function(options) {
        this.setOptions(options);
        this.targetID = 0;
        this.activePanel = 0;
        this.activeElement = null;
        this.fxScollingWindow = new Fx.Scroll(this.options.target, {
            wait: false,
            wheelStops: false,
            duration: this.options.scrollDuration,
            transition: Fx.Transitions.Quad.easeInOut
        });

        this.options.togglerLinks.each(function(element, index) {
            
            if(element.id == this.options.togglerId){ //set the first element
                this.activeElement = element;
                this.targetID = index;
                this.activePanel = index;
                this.fxScollingWindow.toElement(this.options.targetPanels[index]);
                this.updateToggler(element, index);
            }

            element.addEvent("mouseover", function() {
                if(index != this.activePanel){
                    (window.ie)?element.setStyle('cursor', 'hand'):element.setStyle('cursor', 'pointer');
                }
            }.bind(this, element, index));

            element.addEvent("mouseout", function() {
                this.setStyle('cursor', 'auto')
            });

            element.addEvent('click', function() {
                this.togglePanel(index);
                this.updateToggler(element, index);
            }.bind(this, element, index));
        }.bind(this));
    },

    togglePanel: function(index){
        this.activePanel = index;
        this.fireEvent('onPanelLoading');
        this.fxScollingWindow.toElement(this.options.targetPanels[index]);
    },

    updateToggler: function(element, index){
        this.activeElement.getParent().removeClass('selected');
        element.getParent().addClass('selected');
        this.activeElement = element;
        

        //this.activeElement.removeClass('active');
        //element.addClass('active');
        //this.activeElement.setStyle('background-image','#D08900');
        //element.setStyle('color','#ffffff');
        //this.activeElement = element;
    }
});