/*
	Keytrade Bank
	home.js - handles home tabbed content & banner rotation
	Author: emakina\fde
*/

/* 	ids & classes used programmatically */
var cssjs = {
	SITENAV: 'nav',
	TABBEDDIVS: 'home-top',		// container of the tabbed content divs
	ACTIVETAB: 'current',		// class of active tab

	ANIMATION: 'animation',		// container div for the slideshow banner images
	ANIMATION_IMG_HEIGHT: 134,	// height of the animated banner images
	
	DELAY_RESET_TO_HOME: 500	// milliseconds
}


/* tabbed content on home page */

var hometabs = {
	
	currenttab:	null, // nav LI
	resethome: null,

	init: function() {
		var i;
		
		// add an event handler for the mouseover of the tabs
		var oNav = $(cssjs.SITENAV);
		var oLIs = oNav.getElementsByTagName('li');
		for(i=0;i<oLIs.length;i++) {
			var li = oLIs[i];
			li.onmouseover = this.mouseover;
			li.onmouseout = this.mouseout;
		}

		var oTab = $(cssjs.TABBEDDIVS);
		var oTabs = dom.getElementsByClassName(oTab, "div", "tabbed-content");
		for(i=0;i<oTabs.length;i++) {
			oTabs[i].onmouseover = this.tabbedcontent_mouseover;
			oTabs[i].onmouseout = this.tabbedcontent_mouseout;
		}
		
		this.currenttab = oLIs[0];
	},
	
	mouseover:	function() {
		// cancel reset to home
		if (hometabs.resethome) {
			clearTimeout(hometabs.resethome);
			hometabs.resethome = null;
		}

		var oA = this.getElementsByTagName('a')[0];
		var oLI = dom.getParent(this,'li');

		hometabs.activate(oLI);
	},
	
	activate: function(oLI) {
		// sets the current tab hightlight and displays the tabbed content

		var oNav = $(cssjs.SITENAV);
		var oLIs = oNav.getElementsByTagName('li');

		// show active tab
		if (oLI!=hometabs.currenttab){ 
			CssClass.remove(hometabs.currenttab,cssjs.ACTIVETAB);
		}
		CssClass.add(oLI,cssjs.ACTIVETAB);
		hometabs.currenttab = oLI;

		// show tabbed content if any
		var oA = oLI.getElementsByTagName('a')[0];
		var sDiv = oA.getAttribute('rel');
		if (sDiv) {
			// hide the other ones
			var i;
			var oTabbed = dom.getElementsByClassName($(cssjs.TABBEDDIVS),'div','tabbed-content');
			for (i=0;i<oTabbed.length;i++) {
				if (oTabbed[i].style.display!='none') {
					oTabbed[i].style.display='none';
				}
			}
			
			var oDiv = $(sDiv);
			oDiv.style.display = 'block';
		}
	},
	
	mouseout:	function() {
		if (!hometabs.resethome) {
			hometabs.resethome = setTimeout("hometabs.resetToHome()",cssjs.DELAY_RESET_TO_HOME); // msec
		}
	},
	
	tabbedcontent_mouseover: function() {
		if (hometabs.resethome) {
			clearTimeout(hometabs.resethome);
			hometabs.resethome = null;
		}
	},
	tabbedcontent_mouseout: function() {
		hometabs.mouseout();
	},
	
	resetToHome:	function() { 
		var oLI = $(cssjs.SITENAV).getElementsByTagName('li')[0];
		hometabs.activate(oLI);
	}
}


/* banner rotation on homepage */

var homeanim = {

	NUM_PAGES: 3,
	DISPLAY_INTERVAL: 1000*5, // milliseconds
	SLIDE_STEPS: 8,	// determines the speed of the scrolling
	
	curpage: 0,
	
	init: function() {
		this.curpage = 1;
		this.start();
	},
	start: function() {
		this.pTimer = window.setInterval( function(){homeanim.slideshowEvent()}, homeanim.DISPLAY_INTERVAL);
	},
	slideshowEvent: function() {
		this.curpage++;
		if (this.curpage > this.NUM_PAGES)
			this.curpage = 1;
		this.setslide(this.curpage);
	},
	setslide: function(pagenum) {		
		//oDiv.style.top = '-'+((pagenum-1)*cssjs.ANIMATION_IMG_HEIGHT)+'px';
		var offsy = ((pagenum-1)%(this.NUM_PAGES+1))*cssjs.ANIMATION_IMG_HEIGHT;
		this.slideElement(0,-offsy,this.SLIDE_STEPS);
		this.settab(pagenum);
	},
	settab: function(pagenum) {
		var oAnim = $(cssjs.ANIMATION);
		var oA = dom.getElementsByClassName(oAnim,'a','tab');
		var i;
		for (i=0;i<oA.length;i++)
		{
			if (i==pagenum-1)
				CssClass.add(oA[i],'on');
			else
				CssClass.remove(oA[i],'on');
		}
	},
	back: function() {
		if (--this.curpage<1)
			this.curpage = this.NUM_PAGES;
		this.stop();
		this.setslide(this.curpage);
	},
	stop: function() {
		if (this.pTimer) {
			window.clearInterval(homeanim.pTimer);
		}
		this.pTimer = null;
	},
	forward: function() {
		this.stop();
		this.slideshowEvent();
	},
	jumpto: function(pagenum) {
		this.stop();
		this.curpage = pagenum;
		this.setslide(this.curpage);
	},
	
	slideElement: function(x, y, inc) {
		var oAnim = $(cssjs.ANIMATION);
		var element = oAnim.getElementsByTagName('div')[0];
		
		if (element.sliding) clearTimeout(element.sliding);
		
		if (!element.xpos) element.xpos = 0;
		if (!element.ypos) element.ypos = 0;
	
		if (element.xpos == x && element.ypos == y) {
			/*
			console.log('page '+this.curpage+' ypos '+element.ypos);
			if (this.curpage>this.NUM_PAGES) {
				this.curpage = ((this.curpage-1)%this.NUM_PAGES)+1;
				var offsy = (this.curpage-1)*cssjs.ANIMATION_IMG_HEIGHT;
				element.ypos = -offsy;
				element.style.top = '-'+offsy+'px';
			}*/
			return true; 
		}
	
		if (element.xpos > x) {
			var dist = Math.ceil((element.xpos-x)/inc);
			element.xpos = element.xpos - dist;
		}
	
		if (element.xpos < x) {
			var dist = Math.ceil((x-element.xpos)/inc);
			element.xpos = element.xpos + dist;
		}
	
		if (element.ypos > y) {
			var dist = Math.ceil((element.ypos-y)/inc);
			element.ypos = element.ypos - dist;
		}
	
		if (element.ypos < y) {
			var dist = Math.ceil((y-element.ypos)/inc);
			element.ypos = element.ypos + dist;
		}
		
		//element.style.left = element.xpos+'px';
		element.style.top = element.ypos+'px';
		
		element.sliding = setTimeout('homeanim.slideElement('+x+','+y+','+inc+')',homeanim.SLIDE_STEPS);
	}
}


dom.addEvent(window, 'load', function(){ hometabs.init(); homeanim.init(); });