/*
 Tab Strip - A reuseable Tab Strip control.
 (c) 2004 Daniel Baird - Musicmatch
 
 Ex. Useage:
 var radioHomeTabs    = new tabStrip('radioHome','tabs');
 radioHomeTabs.autoUpdate  = false; // Setting this to false means that you will have to manually trigger the "on" state for the tabs.
 radioHomeTabs.setStyle('tabOnClass','mainTabOn');
 radioHomeTabs.setStyle('tabOffClass','mainTabOff');
 radioHomeTabs.setStyle('tabDisabledClass','mainTabDisabled');
 radioHomeTabs.setStyle('tabTextClass','mainTabText');
 radioHomeTabs.setStyle('tabTextHoverClass','mainTabTextHover');
 
 radioHomeTabs.setImage('tabOff_firstImg', '/genesis/javascript/tabStrip/images/home_tabs/FirstTabOff.gif', 28, null);
 radioHomeTabs.setImage('tabOn_firstImg', '/genesis/javascript/tabStrip/images/home_tabs/FirstTabOn.gif', 28, null);
 radioHomeTabs.setImage('tabOff_lastImg', '/genesis/javascript/tabStrip/images/home_tabs/LastTabOff.gif', 28, null);
 radioHomeTabs.setImage('tabOn_lastImg', '/genesis/javascript/tabStrip/images/home_tabs/LastTabOn.gif', 28, null);
 radioHomeTabs.setImage('tabOffBgImg', '/genesis/javascript/tabStrip/images/home_tabs/TabOffBg.gif', 28, null);
 radioHomeTabs.setImage('tabOffEndImg', '/genesis/javascript/tabStrip/images/home_tabs/TabOffEnd.gif', 28, null);
 radioHomeTabs.setImage('tabOnBgImg', '/genesis/javascript/tabStrip/images/home_tabs/TabOnBg.gif', 28, null);
 radioHomeTabs.setImage('tabOnEndImg', '/genesis/javascript/tabStrip/images/home_tabs/TabOnEnd.gif', 28, null);
 radioHomeTabs.setImage('tabOnStartImg', '/genesis/javascript/tabStrip/images/home_tabs/TabOnStart.gif', 28, null);
 radioHomeTabs.setImage('tabOffJoinImg', '/genesis/javascript/tabStrip/images/home_tabs/TabsOffJoin.gif', 28, null);
 
 radioHomeTabs.addTab('home','My Match Stations','Javascript: closeArtistNav(); void getHomePage(\'home\');');
 radioHomeTabs.addTab('topStations','Top Artist Stations','Javascript: closeArtistNav(); void getHomePage(\'topStations\');');
 radioHomeTabs.addTab('programmed_home','Radio Stations','Javascript: closeArtistNav(); void getHomePage(\'programmed_home\');');
 radioHomeTabs.addTab('genres_home','Genres','Javascript: closeArtistNav(); void getHomePage(\'genre_home\');');
 radioHomeTabs.addTab('era_home','Eras','Javascript: closeArtistNav(); void getHomePage(\'era_home\');');
 radioHomeTabs.addTab('favorites','Favorites','Javascript: closeArtistNav(); void getHomePage(\'favorites\');');
*/
 
function tabStrip(name,container) {
	if (container) {
		this.container = container;
	}
	this.id					= name+'_tabs_'+new Date().getTime();
	window[this.id]			= this;
	this.orientation		= 1; // 1 = horiz, 2 = vert
	this.autoUpdate			= true;
	this.tabStretchToFit	= false;
	this.currentTab			= null;
	this.images				= {};
	this.imageData			= {};
	this.tabs				= {};
	this.styles				= {};
	this.tabOrder			= [];
 
	this.addTab = function(name,value,action) {
		this.tabs[name] = {
							id  : name,
							name : value,
							state : false,
							action : action,
							pos  : this.tabOrder.length
						};
 
		this.tabOrder = [];
		for (var i in this.tabs) {
			this.tabOrder.push(i);
		}
		this.tabBits	= null;
		if (this.rendered) {
			this.rendered	= false;
			this.updateTab(this.currentTab,this.tabs[this.currentTab].state, this.tabs[this.currentTab].pos)
		}
	};
 
	this.setTab  = function(tab,state,draw,noTabPane) {
		//alert ("tab: "+tab+" state: "+state+" draw: "+draw);
		if (!this.tabs[tab]) return;
		top.activeTabs = this;
		
		if (this.tabs[tab].state != 'hidden') {
			this.tabs[tab].state = state;
		}
		
		if (this.autoUpdate || draw) {
			if ((this.currentTab && (this.currentTab != tab)) || this.currentTab == 0) {
				if (this.tabs[this.currentTab].state != 'disable' && this.tabs[this.currentTab].state != 'hidden') {
					this.tabs[this.currentTab].state = false;
					if (this.rendered) {
						this.updateTab(this.currentTab,false);
					}
				}
			}
			this.currentTab = tab;
			// Check for pab pane control.
			if (state == true && !noTabPane && this.tabPane) {
				if (!this.tabPane.rendered) {
					this.tabPane.createPane();
				}
				this.tabPane.setActivePane(this.id + '_' + this.tabs[tab].id);
			}
			this.updateTab(tab,state);
			this.tabToBeActive	= tab;
		}
	}
 
	this.updateTab  = function(tab,state,pos) {
		var tabZone  = null;
		var tabStart,tabEnd,temp;
		
		if (!this.rendered) {
			this.makeTabs();
		}
		
		if (document.getElementById(this.container)) {
			// Get the HTML objects for the tab that was clicked.
			if (document.getElementById('tab_'+tab)) {
				tabZone		= document.getElementById('tab_'+tab);
				tabStart	= document.getElementById('tab_'+tab+'_start');
				tabEnd		= document.getElementById('tab_'+tab+'_end');
			}
		}
		if (!tabZone) return;
		// We've got a tab...let's do something.
		if (state) {
			// Set this tab to active
			tabZone.className						= this.styles['tabOnClass'];
			tabZone.style.paddingBottom				= '5px';
			tabZone.firstChild.className			= this.styles['tabTextClass'];
			//tabZone.previousSibling.firstChild.src	= this.getImage('tabOnStartImg',true).cache.src;
			if (this.tabs[tab].pos == 0) {
				tabStart.firstChild.src					= this.getImage('tabOn_firstImg',true).cache.src;
			} else {
				try {
					tabZone.previousSibling.firstChild.src	= this.getImage('tabOnStartImg',true).cache.src;
				} catch (e) {
					tabZone.previousSibling.previousSibling.firstChild.src	= this.getImage('tabOnStartImg',true).cache.src;
				}
			}
			if (this.tabs[tab].pos == (this.tabOrder.length-1)) {
				tabEnd.firstChild.src	= this.getImage('tabOn_lastImg',true).cache.src;
			} else {
				tabEnd.firstChild.src	= this.getImage('tabOnEndImg',true).cache.src;
			}
			// Set mouseover.
			tabZone.firstChild.onmouseover = function() {
				return false;
			}
			tabZone.firstChild.onmouseout = function() {
				return false;
			}
		} else {
			// Set this tab to not active
			tabZone.className				= this.styles['tabOffClass'];
			tabZone.style.paddingBottom		= '3px';
			tabZone.firstChild.className	= this.styles['tabTextClass'];
			if (this.tabs[tab].pos == 0) {
				tabStart.firstChild.src					= this.getImage('tabOff_firstImg',true).cache.src;
			} else {
				try {
					tabZone.previousSibling.firstChild.src	= this.getImage('tabOffJoinImg',true).cache.src;
				} catch (e) {
					tabZone.previousSibling.previousSibling.firstChild.src	= this.getImage('tabOffJoinImg',true).cache.src;
				}
			}
			if (this.tabs[tab].pos == (this.tabOrder.length-1)) {
				tabEnd.firstChild.src	= this.getImage('tabOff_lastImg',true).cache.src;
			} else {
				tabEnd.firstChild.src	= this.getImage('tabOffJoinImg',true).cache.src;
			}
			tabZone.whichTabs = this.id;
			tabZone.firstChild.onmouseover = function() {
				tabZone.firstChild.className	= window[tabZone.whichTabs].styles['tabTextHoverClass'];
			}
			tabZone.firstChild.onmouseout = function(tabSet) {
				tabZone.firstChild.className	= window[tabZone.whichTabs].styles['tabTextClass'];
			}
		}
	}
 
	this.tabClickHander  = function(tab) {
		if (!this.tabs[tab]) return;
		//If this tab is not already active, fire it's click event.
		if (this.tabs[tab].state == false) {
			this.setTab(tab,true);
			this.tabToBeActive	= tab;
			eval(this.tabs[tab].action);
		};
	}
 
	this.setStyle = function (bit, style) {
		this.styles[bit] = style;
	}
 
	this.setImage = function (img, src, height, width) {
		this.images[img] = {
							cache	: new Image,
							src		: src,
							height	: height,
							width	: width,
							html	: '<img src="'+src+'" alt="" class="tabOn" border="0"' + ((height) ? ' height='+height : '') + ((width) ? ' width='+width : '') + '>'
						};
		this.images[img].cache.src	= src;
	}
 
	this.getImage = function (img,getData) {
		if (getData) {
			return this.images[img];
		} else {
			return this.images[img].html || '';
		}
	}
 
	this.genTabBits = function () {
		var stretchWidth	= parseInt(100/this.tabOrder.length);
		var centerTabs		= (this.tabStretchToFit)
								? (this.orientation == 2)
									? 'valign="middle" height="'+stretchWidth+'%"'
									: 'align="center" width="'+stretchWidth+'%"'
								: '';
		this.tabBits_H		= {
								tabBody    : '<td onselectstart="return false" id="tab__i_" class="'+this.styles['tabOffClass']+'" valign="bottom" nowrap '+centerTabs+' onclick="'+this.id+'.tabClickHander(\'_i_\')" style="padding-bottom:3px;"><span hidefocus tabindex="-1" class="'+this.styles['tabTextClass']+'" onmouseover="this.className=\''+this.styles['tabTextHoverClass']+'\'" onmouseout="this.className=\''+this.styles['tabTextClass']+'\'">&nbsp;&nbsp;_TABNAME_&nbsp;&nbsp;</span></td>',
								tabBegin_first : '<td id="tab__i__start"  align="left">'+this.getImage('tabOff_firstImg')+'</td>',
								
								tabEnd_last  : '<td align="right" id="tab__i__end">'+this.getImage('tabOff_lastImg')+'</td>',
								
								tabDisabled  : '<td onselectstart="return false" class="'+this.styles['tabDisabledClass']+'" valign="bottom" nowrap '+centerTabs+' style="padding-bottom:3px;">&nbsp;&nbsp;_TABNAME_&nbsp;&nbsp;</td>',
								
								tabJoin  : '<td id="tab__i__end" class="'+this.styles['tabOffClass']+'">'+this.getImage('tabOffJoinImg')+'</td>'
							};
		this.tabBits_V		= {
								tabBody    : '<tr><td onselectstart="return false" id="tab__i_" class="'+this.styles['tabOffClass']+'" valign="bottom" nowrap '+centerTabs+' onclick="'+this.id+'.tabClickHander(\'_i_\')" style="padding-bottom:3px;"><span class="'+this.styles['tabTextClass']+'" onmouseover="this.className=\''+this.styles['tabTextHoverClass']+'\'" onmouseout="this.className=\''+this.styles['tabTextClass']+'\'">&nbsp;&nbsp;_TABNAME_&nbsp;&nbsp;</span></td></tr>',
								tabBegin_first : '<tr><td id="tab__i__start" class="'+this.styles['tabOffClass']+'" align="left">'+this.getImage('tabOff_firstImg')+'</td></tr>',
								
								tabEnd_last  : '<tr><td class="'+this.styles['tabOffClass']+'" align="right" id="tab__i__end">'+this.getImage('tabOff_lastImg')+'</td></tr>',
								
								tabDisabled  : '<tr><td onselectstart="return false" class="'+this.styles['tabDisabledClass']+'" valign="bottom" nowrap '+centerTabs+' style="padding-bottom:3px;">&nbsp;&nbsp;_TABNAME_&nbsp;&nbsp;</td></tr>',
								
								tabJoin  : '<tr><td id="tab__i__end" class="'+this.styles['tabOffClass']+'">'+this.getImage('tabOffJoinImg')+'</td></tr>'
							};
		this.tabBits		= (this.orientation == 2) ? this.tabBits_V : this.tabBits_H;
		
	}

	this.makeTabs = function() {
		var output      = new Array('<table onselectstart="return false" style="display:inline;margin:0px;padding:0px" border="0" cellspacing="0" cellpadding="0" width="'+((this.tabStretchToFit) ? '100%' : '')+'"><tr>');
		
		if (!this.tabBits) this.genTabBits();
		
		var tabBits 	= this.tabBits;
		var lastTab 	= this.tabOrder.length-1;
		var numTabs 	= this.tabOrder.length;
		var temp		= '';
		for (var i=0;i<numTabs;i++) {
			var thisTab     = this.tabs[this.tabOrder[i]];
			if (this.tabs[this.tabOrder[i+1]]) {
				var nextTab     = this.tabs[this.tabOrder[i+1]];
				if (nextTab.state == 'hidden')  {
					if (i+1 == lastTab) {
						i = lastTab;
					} else {
						continue;
					}
				}
			}
			//Tabs start
			if (i == 0) {
				// First Tab
				output.push(tabBits.tabBegin_first.replace(/_i_/g, this.tabOrder[i]));
			}
			// tab body
			if (thisTab.state != 'disable') {
				temp = tabBits.tabBody.replace(/_TABNAME_/g,thisTab.name)
				temp  = temp.replace(/_i_/g, this.tabOrder[i]);
				output.push(temp);
			} else {
				output.push(tabBits.tabDisabled.replace(/_TABNAME_/g,thisTab.name));
			}
			//Tab join	
			if (i == lastTab) {
				output.push(tabBits.tabEnd_last.replace(/_i_/g, this.tabOrder[i]));
			} else {
				output.push(tabBits.tabJoin.replace(/_i_/g, this.tabOrder[i]));
			}
			
			
		}
		output.push('</tr></table>');
		var tabStrip = output.join('\n');
		this.rendered    = true;
		if (this.container && document.getElementById(this.container)) {
			document.getElementById(this.container).innerHTML = tabStrip;
		} else {
			return tabStrip;
		}
		}
	}
 
function tabPane(controller,container) {
	if (!controller) {
		alert ('No tabStrip to control this pane set.  Please specify a tabStrip');
		return false;
	}

	window[controller].tabPane	= this;
	this.tabController			= window[controller];
	this.id						= this.tabController.id + "_tabPane";
	this.currentVisible			= null;
	this.rendered				= false;
	
	this.createPane    = function () {
		var tabStrip		= this.tabController;
		var numTabs			= tabStrip.tabOrder.length;
		var html			= new Array();
		var tab				= '';
		var parentHeight	= 0;
		this.paneHolder		= (container)
								? document.getElementById(container)
								: document.body;
		
		for (var i=0;i<numTabs;i++) {
			tab	= tabStrip.tabs[tabStrip.tabOrder[i]];
			html.push('<div id="');
			html.push(tabStrip.id);
			html.push('_');
			html.push(tab.id);
			html.push('"');
			if (global.browser.name == 'msie') {
				html.push(' style="top:0;overflow:auto;');
			} else {
				html.push(' style="overflow:-moz-scrollbars-vertical;');
			}
			html.push('position:absolute;display:none;visibility:hidden">');
			html.push('Loading...'+i);
			html.push('</div>\n');			
		}
		this.paneHolder.innerHTML	= html.join('');
		
		this.paneHolder.style.visibility	= 'visible'
		this.paneHolder.style.position		= 'relative';
		this.paneHolder.style.overflow		= 'hidden';
		
		this.sizeTabPanes();
		this.rendered    = true;
	};
	this.setActivePane   = function (pane) {
		if (this.currentVisible) {
			this.currentVisible.style.display  = 'none';
			this.currentVisible.style.visibility = 'hidden';          
		} else {
			this.hideAllPanes();
		}
		var newPane  = document.getElementById(pane);
		if (newPane && newPane.style.visibility != 'visible') {
			newPane.style.display		= 'inline';
			newPane.style.visibility	= 'visible';
			this.currentVisible  	  	= newPane;
			this.sizeTabPanes(newPane);
		}
	};
	
	this.sizeTabPanes	= function(pane) {
		pane	= (pane) ? pane : this.currentVisible;
		parentHeight	= (global.browser.name == 'ns')
							? window.innerHeight
							: this.paneHolder.offsetParent.clientHeight;
							
		this.paneHolder.style.height	= parentHeight-this.offsetY();
		
		if (pane && pane.offsetParent) {
			pane.style.height	= pane.offsetParent.offsetHeight;
			pane.style.width	= pane.offsetParent.offsetWidth;
			window.onresize  = function () {
				top.activeTabs.tabpane.sizeTabPanes();
			};
		}
		
	};
	
	this.hideAllPanes   = function () {
		var tabStrip     = this.tabController;
		var numTabs     = tabStrip.tabOrder.length;
		for (var i=0;i<numTabs;i++) {
			var tab     = tabStrip.tabs[tabStrip.tabOrder[i]];
			var pane    = document.getElementById(tabStrip.id + '_' + tab.id);
			if (!pane) continue;
			pane.style.display		= 'none';
			pane.style.visibility	= 'hidden';
			pane.style.pixelWidth	= 0;
			pane.style.pixelHeight	= 0;
		}
	};
	this.resetPane    = function (pane) {
		var tabStrip      = this.tabController;
		var element      = null;
		if (pane) {
			element = document.getElementById(tabStrip.id + '_' + pane);
			element.innerHTML   = '';
		} else {
			this.paneHolder.innerHTML = '';
			this.createPane();
		}
	};
	
	this.offsetY	= function () {
		var el	= this.paneHolder;
		var y	= 0;
		var add	= 0;
		y	= this.paneHolder.offsetTop;
		while (el.offsetParent) {
			y = y + el.offsetParent.offsetTop;
			el	= el.offsetParent;
		}
		return y;
	};
}