// JavaScript Document

Tabs = Class.create({
		initialize: function ()
		{
			// vars
			this.tabs = [
				{mode: "poker", id: "TopMenuLivePoker", objRef: null, perEx: null, enabled: true},
				{mode: "betting", id: "TopMenuBetting", objRef: null, perEx: null, enabled: true},
				{mode: "scratch", id: "TopMenuScratch", objRef: null, perEx: null, enabled: true},
				{mode: "casino", id: "TopMenuCasino", objRef: null, perEx: null, enabled: true}
				]; /* {mode: "live", id: "TopMenuLiveGaming", objRef: null, perEx: null, enabled: false}, */
			
			this.currentActive = null;
			this.activePos = 0;
			this.inactivePos = 71;
			
			document.observe("dom:loaded", this.handleDomLoaded.bind(this));
		},
		handleDomLoaded: function (evt)
		{
			for(var i=0; i < this.tabs.length; i++) {
				var tab = this.tabs[i];
				tab.objRef = $(tab.id);
				
				if(tab.mode == SiteMode && tab.enabled) {
					tab.objRef.style.top = this.activePos.toCssString();
					this.currentActive = tab;
				}
				else {
					tab.objRef.style.top = this.inactivePos.toCssString();
				}
			}
			
			this.addEventListeners();
		},
		addEventListeners: function ()
		{
			for(var i=0; i < this.tabs.length; i++) {
				var tab = this.tabs[i];
				
				if(tab.enabled) {
					Event.observe(tab.objRef, "mouseover", this.handleMouseOver.bind(this, tab));
					Event.observe(tab.objRef, "mouseout", this.handleMouseOut.bind(this, tab));
				}
			}
		},
		handleMouseOver: function (tab)
		{
			if(this.currentActive != null) {
				this.forceOut(this.currentActive);
			}
			
			this.currentActive = tab;
			
			// stop previous animation if there is one.
			if(tab.perEx != null) {
				tab.perEx.stop();
				tab.perEx = null;
			}
			
			tab.perEx = new PeriodicalExecuter(this.animateShow.bind(this, tab), 0.1);
		},
		handleMouseOut: function (tab)
		{
			if(this.currentActive.mode != SiteMode) {
				this.forceOut(tab);
			}
		},
		forceOut: function (tab)
		{
			this.currentActive = null;
			
			// stop previous animation if there is one.
			if(tab.perEx != null) {
				tab.perEx.stop();
				tab.perEx = null;
			}
			
			tab.perEx = new PeriodicalExecuter(this.animateHide.bind(this, tab), 0.1);
		},
		animateShow: function (tab)
		{
			if(tab.objRef.offsetTop > this.activePos + 1) {
				tab.objRef.style.top = Number.toCssString(tab.objRef.offsetTop + (this.activePos - tab.objRef.offsetTop) / 2);
			}
			else {
				tab.objRef.style.top = this.activePos.toCssString();
				tab.perEx.stop();
				tab.perEx = null;
			}
		},
		animateHide: function (tab)
		{
			if(tab.objRef.offsetTop < this.inactivePos - 1) {
				tab.objRef.style.top = Number.toCssString(tab.objRef.offsetTop + (this.inactivePos - tab.objRef.offsetTop) / 2);
			}
			else {
				tab.objRef.style.top = this.inactivePos.toCssString();
				tab.perEx.stop();
				tab.perEx = null;
				
				this.resetToModeTab.bind(this).delay(0.3);
			}
		},
		resetToModeTab: function ()
		{
			if(this.currentActive == null) {
				for(var i=0; i < this.tabs.length; i++) {
					var tab = this.tabs[i];
				
					if(tab.mode == SiteMode && tab.enabled) {
						this.currentActive = tab;
						
						if(tab.perEx != null) {
							tab.perEx.stop();
							tab.perEx = null;
						}
						
						tab.perEx = new PeriodicalExecuter(this.animateShow.bind(this, tab), 0.1);
						
						break;
					}
				}
			}
		}

	}) // end of class

tabs = new Tabs();