/************************************************************************
TABALICIOUS v1.0.200807311
Create tabbed content in a cinch.

This Javascript, CSS, and HTML for creating HTML tabs in a cinch was designed and written by Eli Szus.
Please credit the author and website when using the script.
http://www.tabalicious.com/
A link to tabalicious.com from the page you use this on would be greatly appreciated.

HIGHLIGHTS:
- Set up tabs on a webpage in moments, by following the simple implementation below.
- Unlimited tabs (up to the window width)
- Tab width is autoset by the width of the tab name
- Tab titles are easily set as the id of the div holding the tab content
- Set the default tab to load by the setting class="init_tab" on the div of your choice
- Send people links straight into a tab by appending the token load_tab to your URL
  - For example: http://www.tabalicious.com/somefolder/pagename.html?load_tab=value
	- the load_tab value can be the name of a tab (using underscores) or the numeric position of the tab
- Since it is built with divs only, you should be able to put any HTML content within the tabs

NOTES:
- It is highly recommended that all style changes are made in the inline styles in the html rather than in the CSS.
- All divs within the to_tab div must have underscores(_) instead of spaces, though they will show as spaces in the visual tabs
  - For example: id="Best_tab_Ever" will show the tab text as "Best tab Ever"
	- When using the load_tab token you must use the case-sensitive underscore version of the name
- The divs tabs_div and to_tab must NOT be changed.

IMPLEMENTATION:
Beginner:
1) Unzip the contents of the version file.
2) Upload the tabalicious folder into the same folder that holds the file you will be adding the tabs to in step 2.
3) Place the html content of tabalicious.htm into the html file of your choice. See tabalicious_sample_html.htm as an example.
4) Add as many divs as you want (or can fit) by adding divs inside of the to_tab div. There should already be 3 divs in there.
5) Add your content inside of these divs.
6) Adjust the inline styles as needed:
(It is recommended that you not adjust the CSS file for your sanity).
- Adjust the total height and width using the height on the tabalicious_container div. The default setting is 70%, but these can be set to 100px or 1000px - whatever floats your boat.
- Move the tabs horizontally by adjusting the left px value in the tabs_div style.

Intermediate:
- If you will be using the tabs on multiple pages on your site, you can place the tabalicious folder at the root level of your site. Then you need to change the JS and CSS sources to reference that directory.

Feel free to email comments and suggestions to tabman @ tabalicious.com!
************************************************************************/

function tabber(){
	var d = document;

	var tabs_div = d.getElementById("tabs_div");
	
	var tab_ids = tab_list();
	
	set_init_tab();

	//create tabs
	for(var i=0; i<tab_ids.length; i++){		
		var new_tab_id = tab_ids[i] + "_tab";
		
		//create the tabs
		var new_tab = document.createElement("span");
		new_tab.setAttribute('id',new_tab_id);
		tabs_div.appendChild(new_tab);
		new_tab.onclick = function() {show_tab(this.id)};
		if(d.getElementById(tab_ids[i]).className.match("init_tab")){
			new_tab.className = 'tabalicious tab_selected';
		} else new_tab.className = 'tabalicious tab_unselected';
		var new_tab_text = document.createTextNode(tab_ids[i].replace(/_/g,' '));
		new_tab.appendChild(new_tab_text);
		var new_space = document.createTextNode(" ");
		tabs_div.appendChild(new_space);
	}	
}
function show_tab(tab){
	var d = document;

	var to_tab_id = tab.replace('_tab','').replace(' ','_');
	
	var tab_ids = tab_list();//list of all tab content divs
	
	for(var i=0;i<tab_ids.length;i++){
		if(tab_ids[i]==to_tab_id){
			//show tab content
			d.getElementById(tab_ids[i]).style.display = "block";
			d.getElementById(tab_ids[i]+'_tab').className = 'tabalicious tab_selected';
		}else{
			//hide tab content
			d.getElementById(tab_ids[i]).style.display = "none";
			d.getElementById(tab_ids[i]+'_tab').className = 'tabalicious tab_unselected';			
		}
	}
}
function tab_list(){
	var d = document;
	var to_tab = d.getElementById("to_tab");
	var to_tab_kids = to_tab.childNodes;
	var tab_ids = new Array();
		
	for(var i=0; i<to_tab_kids.length; i++){
		if(to_tab_kids[i].id){
		//create the tabs
			tab_ids.push(to_tab_kids[i].id);
		}	
	}
	return tab_ids;
}
function getParam(param) {
		var result = location.search.match("[\?&]"+param+"=([^&#]*)");
		if(result!="" && result!=null){
			var results = result.slice("=");
			return results[1];
		} else return '';
}
function set_init_tab(){
	var d = document;
	var load_tab = getParam("load_tab");
	var tab_ids = tab_list();
	var tab_choice = "";

	//check if init_tab is set on any tabs
	for(var i=0; i<tab_ids.length; i++){
		if(d.getElementById(tab_ids[i]).className.match("init_tab")){
			tab_choice = d.getElementById(tab_ids[i]);
		} 
	}

	//check if token should set tab
	if(load_tab!=''){
 		for(var i=0;i<tab_ids.length;i++){
  	var l_lower = load_tab.toLowerCase();
		var t_lower = tab_ids[i].toLowerCase();
			if(load_tab==tab_ids[i]||l_lower==t_lower||parseInt(load_tab)==i+1){
 				tab_choice = d.getElementById(tab_ids[i]);
 			}
 		}
	}

	//if nothing is set yet set first tab
	if(!tab_choice||tab_choice=="")
		tab_choice = d.getElementById(tab_ids[0]);

	//choose tab to initialize with
	for(var i=0; i<tab_ids.length; i++){
		if(d.getElementById(tab_ids[i]).id==tab_choice.id){
			tab_choice.style.display = "block";
			tab_choice.className = "init_tab";
		} else {
			d.getElementById(tab_ids[i]).style.display = "none";
			d.getElementById(tab_ids[i]).className = "";
		}
	}
}
if (typeof document.attachEvent!='undefined') {
	window.attachEvent('onload',tabber);
} else {
	window.addEventListener('load',tabber,false);
}