/****************************************************************************************************
Script name:   Offshop/xcart-4.1.9/skins/<shared> or <projectid>/customer/main/product_tabs.js
Module:        Product Tabs
Creation date: 15/09/2009
Created by:    Nitin Patel

This script takes div elements with the class 'tabbed' and creates a tabbed area for them. 

Copyright (c) 2009 Sotic Ltd
***************************************************************************************************/




	// this code creates a function called getElementByClassName - so that we can refer to HTMl elements by their class names rather then their element ids
	if (document.getElementsByClassName == undefined) {
		document.getElementsByClassName = function(cl) {
			var retnode = [];
			var myclass = new RegExp('\\b'+cl+'\\b');
			var elem = this.getElementsByTagName('*');

			for (var i = 0; i < elem.length; i++) {
				var classes = elem[i].className;
				if (myclass.test(classes))
					retnode.push(elem[i]);
			}
			return retnode;
		};
	}
	

	var tab_headers = [];
	var children = [];
	var parentNode_width = 0;
	
	var tab_objects = document.getElementsByClassName('tabbed');
	for (var x = 0; x < tab_objects.length; x++) {
		
		if (x==0)
			tab_objects[x].style.display = 'block';			// show the first tab
		else
			tab_objects[x].style.display = 'none';
		
		
		// give each tab its own class
		tab_objects[x].className = tab_objects[x].className+" tabplane"+x;
		
		
		/* ############### Calculate width of parent element ############### */
		// get width of parent html element - this is to calculate the width of the tabs
		if (x==0) {
			var parentNode_width = tab_objects[x].parentNode.offsetWidth;
		}
		else {
			var parentNode_width_temp = tab_objects[x].parentNode.offsetWidth;
			if (parentNode_width_temp < parentNode_width)					// make sure we always use the minimum width of containing parent
				parentNode_width = parentNode_width_temp
		}
		
		
		/* ############### Calculate text to put into the header tabs ############### */
		var txt_header = "";
		var children_h2 = tab_objects[x].getElementsByTagName('H2');		// get all H2 tags in this element
		var children_h3 = tab_objects[x].getElementsByTagName('H3');		// get all H3 tags in this element
		
		if (children_h2.length>0) {
			for (var h2=0; h2<children_h2.length; h2++) {
				txt_header += children_h2[h2].innerHTML;
				children_h2[h2].style.display = "none";	// hide the headers - because we will create tabs with these headers
			}
		}
		
		if (children_h3.length>0) {
			for (var h3=0; h3<children_h3.length; h3++) {
				txt_header += children_h3[h3].innerHTML;
				children_h3[h3].style.display = "none";	// hide the headers - because we will create tabs with these headers
			}
		}
		tab_headers[x] = txt_header;
		
		
		/* ############### Calculate if text has overflown a tabbed area ############### */
		// check if a div (tabbed area) has overflowed - If is has, then show a 'more' link to expand that div
		var overflow=false;
		var padding_top = 0;
		var current_height = tab_objects[x].offsetHeight;
		var overflowed_height = tab_objects[x].offsetHeight;
		for (var tabbed_children = tab_objects[x].childNodes,ary=[],c=0; c<tabbed_children.length; c++){
			if (tabbed_children[c].offsetTop + tabbed_children[c].offsetHeight > tab_objects[x].offsetHeight) 
			{
				// overflow has occured
				overflow = true
				if (tabbed_children[c].offsetTop + tabbed_children[c].offsetHeight > overflowed_height) {
					overflowed_height = tabbed_children[c].offsetTop + tabbed_children[c].offsetHeight;
				}
				
				 if (tabbed_children[c].offsetTop > padding_top) {
				 	padding_top = tabbed_children[c].offsetTop
				 }
				
			}
		}
		
		if (overflow==true) {
			tab_objects[x].innerHTML = "<div class='tabbed_more'><a id='tabplane"+x+"_more' href='#' onclick=\"expand_tab('"+x+"', '"+current_height+"', '"+overflowed_height+"', '"+padding_top+"'); return false\">View more</a></div>" + tab_objects[x].innerHTML;
			
			//alert ('overflow has occured in tabplane'+x);
		}
		 
	}
	
	
	for (var t = 0; t < tab_headers.length; t++) {
		var width_for_div = Math.floor((parentNode_width - (tab_headers.length*9)) / tab_headers.length);
		
		//var newdiv = document.createElement("<div onclick='swap_tabs("+t+");'></div>");
		
		var newdiv = document.createElement('div');
		newdiv.setAttribute('id','tab'+t);
		if (t==0)
			newdiv.className ="tabs selectedtab";
		else
			newdiv.className ="tabs";
		//newdiv.setAttribute('onclick',"swap_tabs('"+t+"');");
		newdiv.onclick=function() {swap_tabs(this.id);};
		newdiv.style.width = width_for_div+"px";
		newdiv.innerHTML = tab_headers[t];
		document.getElementById('tabbing_plane').appendChild(newdiv);
	}
	
	
	function swap_tabs(tab)
	{
		tab = tab.replace("tab", "")
	
		// hide all tab divs
		var swaptab_objects = document.getElementsByClassName('tabbed');
		for (var s = 0; s < swaptab_objects.length; s++) {
			swaptab_objects[s].style.display = 'none';
		}
		// remove the selecttab text from all tab header classes
		var swaptab_headers = document.getElementsByClassName('tabs');
		for (var s = 0; s < swaptab_headers.length; s++) {
			swaptab_headers[s].className = swaptab_headers[s].className.replace(" selectedtab", "")
		}
		
		
		// show the selected tab div
		var selecttab = 'tabplane'+tab;
		var selectedtab_object = document.getElementsByClassName(selecttab);
		for (var s = 0; s < selectedtab_object.length; s++) {
			selectedtab_object[s].style.display = 'block';
		}
		
		// give the selected tab header a selected class
		var selectheader = 'tab'+tab;
		document.getElementById(selectheader).className = document.getElementById(selectheader).className+" selectedtab";
	}
	
	
	function expand_tab(tab_number, current_height, target_height, padding_top)
	{
		// change height of div
		var tab = document.getElementsByClassName('tabplane'+tab_number);
		
		if (tab.length==1) {		// we should only have one item in this array - if not something has gone wrong
			var tab_height = target_height - (padding_top*2);
			tab[0].style.height = tab_height+"px";
			
			// get the more more/less text link
			var link = document.getElementById('tabplane'+tab_number+'_more');
			link.onclick=function() {expand_tab(tab_number, target_height, current_height, padding_top); return false;};
			
			if (current_height > target_height)
			{	// we are decreasing the div height
				link.innerHTML = "View more";
				var temp_top = link.parentNode.offsetTop - (current_height - target_height);
				link.parentNode.style.top = temp_top+"px";
			}
			else if (current_height < target_height)
			{ 	// we are increasing the div height
				link.innerHTML = "View less";
				var temp_top = link.parentNode.offsetTop + (target_height - current_height);
				link.parentNode.style.top = temp_top+"px";
			}
		}
	}