Namespace.Register("Sage.UI");

Sage.UI.DefaultOptions = {
	flashHeaderCookieName : "sagenz_fheader"
};


/***************************
*   Base Control
***************************/
Sage.UI.Control = Class.create({
    initialize: function(elements, options) {
		this.elements = elements || {};	
		this.options = options || {};	
	},
	addEventHandler: function(element, event, callback) {
        Event.observe($(element), event, callback);
    },
    addEventHandlerByClassName: function(className, event, callback) {
        var arrElement = this.nameContainer.getElementsByClassName(className);
        for (var i = 0; i < arrElement.length; i++) {
            Event.observe(arrElement[i], event, callback);
        }
    },
    addEventHandlerBySelector: function(selectorName, event, callback) {
        var arrElement = this.nameContainer.getElementsBySelector(selectorName);
        for (var i = 0; i < arrElement.length; i++) {
            Event.observe(arrElement[i], event, callback);
        }
    }
});

/***************************
*   Flash Header Switcher
***************************/
Sage.UI.FlashHeaderSwitcher = Class.create(Sage.UI.Control,{
    initialize: function($super, elements, options) {
		$super(elements,options);
		this.isHeaderOn;
		this.btnSwitch = $(this.elements.btnSwitch);
		this.spacer = this.elements.spacer;
		this.btnOpenImageSrc = this.options.openImage;
		this.btnCloseImageSrc = this.options.closeImage;
		
		this.addEventHandler(this.btnSwitch,"click",this.btnSwitchClickListenser.bindAsEventListener(this));
		this.initLoad();
    },
    getSwitchButton: function(){
		return this.btnSwitch;
    },
    initLoad: function(){
		this.isHeaderOn = (NS.Common.ReadCookie(Sage.UI.DefaultOptions.flashHeaderCookieName) || "true").bool();
		this.flashHeading(this.isHeaderOn);	
    },
    flashHeading: function(switchOn){
		var _switcher = this;
		if (switchOn == false){
			new Effect.SlideUp(this.spacer);
			this.btnSwitch.getElementsBySelector("img")[0].src = this.btnOpenImageSrc; 
		}
		else
		{
			new Effect.SlideDown(this.spacer);
			this.btnSwitch.getElementsBySelector("img")[0].src = this.btnCloseImageSrc;
		}
		setTimeout(function(){_switcher.getSwitchButton().appear();},2000);
    },
    btnSwitchClickListenser: function(event){
		event.stop();
		this.btnSwitch.hide();
		this.flashHeading(!this.isHeaderOn);
		this.isHeaderOn = !this.isHeaderOn;
		NS.Common.SetCookie(Sage.UI.DefaultOptions.flashHeaderCookieName,this.isHeaderOn);
    }
});


/***************************
*   Tab Strip 
***************************/
Sage.UI.TabMode = {tab1:1,tab2:2,tab3:3}
Sage.UI.TabAction = {hover:"mouseover", click:"click"}
Sage.UI.DisplayMode = {normal:1 , fade:2}
Sage.UI.TabStripe = Class.create(Sage.UI.Control,{
    initialize: function($super, elements, options) {
		$super(elements,options);
        this.mode ;
        this.btnTab1 = $(this.elements.btnTab1 || "");
        this.btnTab2 = $(this.elements.btnTab2 || "");
        this.btnTab3 = $(this.elements.btnTab3 || "");
        this.panelTab1 = $(this.elements.panelTab1 || ""); 
        this.panelTab2 = $(this.elements.panelTab2 || ""); 
        this.panelTab3 = $(this.elements.panelTab3 || ""); 
        this.hoverClass = this.options.hoverClass;
        this.action = this.options.action || Sage.UI.TabAction.hover;
        this.displayMode = this.options.displayMode ||  Sage.UI.DisplayMode.normal;
        
        if (this.btnTab1){
			this.addEventHandler(this.btnTab1,this.action,this.tabButtonEventListenser.bindAsEventListener(this));
        }
		if (this.btnTab2){
			this.addEventHandler(this.btnTab2,this.action,this.tabButtonEventListenser.bindAsEventListener(this));	
		}
		if (this.btnTab3){
			this.addEventHandler(this.btnTab3,this.action,this.tabButtonEventListenser.bindAsEventListener(this));		
		}
		this.initLoad();
    },
    initLoad: function(){
		this.showTab(Sage.UI.TabMode.tab1);
    },
    display: function(tab){
		if (this.displayMode == Sage.UI.DisplayMode.fade){
			tab.appear();
		}
		else{
			tab.show();
		}
    },
    showTab: function(mode){
		this.hideTabs();
		switch(mode){
			case Sage.UI.TabMode.tab1: 
				if (this.panelTab1){
					this.display(this.panelTab1);
					this.btnTab1.addClassName(this.hoverClass);
				}
				break;
			case Sage.UI.TabMode.tab2: 
				if (this.panelTab2){
					this.display(this.panelTab2);
					this.btnTab2.addClassName(this.hoverClass);
				}
				break;
			case Sage.UI.TabMode.tab3: 
				if (this.panelTab3){
					this.display(this.panelTab3);
					this.btnTab3.addClassName(this.hoverClass);
				}
				break;
		}
		this.mode = mode;
    },
    hideTabs: function(){
		if (this.panelTab1){
			this.panelTab1.hide();
			this.btnTab1.removeClassName(this.hoverClass);
		}
		if (this.panelTab2){
			this.panelTab2.hide();
			this.btnTab2.removeClassName(this.hoverClass);
		}
		if (this.panelTab3){
			this.panelTab3.hide();
			this.btnTab3.removeClassName(this.hoverClass);			
		}
    },
    tabButtonEventListenser: function(event){
		var button = Event.findElement(event,"a");
		if (this.btnTab1 && button.id == this.btnTab1.id && this.mode != Sage.UI.TabMode.tab1){
			this.showTab(Sage.UI.TabMode.tab1);
		}else if (this.btnTab2 && button.id == this.btnTab2.id && this.mode != Sage.UI.TabMode.tab2){
			this.showTab(Sage.UI.TabMode.tab2);
		}else if (this.btnTab3 && button.id == this.btnTab3.id && this.mode != Sage.UI.TabMode.tab3){
			this.showTab(Sage.UI.TabMode.tab3);
		}
    }
});