var wm_tabStrip_globals = new function(){    
	this.css_tabHeaders_container = "wm_tabHeaders_container";
	this.css_tabHeader_selected = "wm_tabHeader_selected";
	this.css_tabHeader_mouseover = "wm_tabHeader_mouseover";
	this.css_tabHeader_mouseout = "wm_tabHeader_mouseout";
	this.css_tabHeader_right_add = " wm_tabHeader_right_add";
	this.indexOfStartTab = 0;
	this.css_tabCanvas = "wm_tabCanvas";
	this.tabSelectEvent = "click";
	this.tabHeadersPosition = "top_left";
	this.numberOfColumns = 0;

	var runtimes = {}
	this.getRuntime = function(pTabStripID){
		if (runtimes[pTabStripID] == null){
			var runtime = {"tabs":[],"tabHeaders":[],"tabCanvases":[]}
			runtimes[pTabStripID] = runtime;
		}
		return runtimes[pTabStripID];
	}
	this.init = function(pTabStripID){
	    runtimes[pTabStripID] = null;		
	}
}

function wm_tabStrip(pTabStripID, pTabSelectEvent, pIdOfStartTab, pTabHeadersPosition, pNumberOfColumns, pCssTabHeadersContainer, pCssTabHeaderSelected, pCssTabHeaderMouseover, pCssTabHeaderMouseout, pCssTabCanvas, pCustomActionBeforeTabActivation, pCustomActionAfterTabActivation, pCustomActionOnTabMouseover, pCustomActionOnTabMouseout){
	
	var eventHandlerFactory = function(pElm, pAction){
		var tabHeader = pElm;
		var tabIndex = pElm.tabIndex;

		var eventHandler;
		if (pAction == "hoverTabHeader"){
			//this action is always attached to a mouseover event
			eventHandler = function(){
				var tabCanvas = runtime.tabCanvases[tabIndex];
				if (pCustomActionOnTabMouseover){pCustomActionOnTabMouseover(pTabStripID, tabHeader, tabCanvas, tabIndex, runtime.tabHeaders.length);}

                if(tabIndex==runtime.tabHeaders.length-1 && tabHeader.className == tabHeader.individualCssClass + css_tabHeader_selected + wm_tabStrip_globals.css_tabHeader_right_add) {return}
				if (tabHeader.className == tabHeader.individualCssClass + css_tabHeader_selected){return;} 				
				tabHeader.className = tabHeader.individualCssClass + css_tabHeader_mouseover;				
				if(tabIndex==runtime.tabHeaders.length-1)
				    tabHeader.className += wm_tabStrip_globals.css_tabHeader_right_add;
				tabCanvas.className = tabCanvas.className;
			}
		}
		else if (pAction == "unHoverTabHeader"){		
			eventHandler = function(){
				var tabCanvas = runtime.tabCanvases[tabIndex];
				if (pCustomActionOnTabMouseout){pCustomActionOnTabMouseout(pTabStripID, tabHeader, tabCanvas, tabIndex, runtime.tabHeaders.length);}
				
				if(tabIndex==runtime.tabHeaders.length-1 && tabHeader.className == tabHeader.individualCssClass + css_tabHeader_selected + wm_tabStrip_globals.css_tabHeader_right_add) {return}
				if (tabHeader.className == tabHeader.individualCssClass + css_tabHeader_selected){return;}
				tabHeader.className = tabHeader.individualCssClass + css_tabHeader_mouseout;
				if(tabIndex==runtime.tabHeaders.length-1)
				    tabHeader.className += wm_tabStrip_globals.css_tabHeader_right_add;
				tabCanvas.className = tabCanvas.className;
			}
		}
		else if (pAction == "openCanvas"){
			eventHandler = function(){
				var tabIndex = pElm.tabIndex;
				var tabHeaderToSelect = pElm;
				var tabCanvasToOpen = runtime.tabCanvases[tabIndex];
			
				if (pCustomActionBeforeTabActivation){pCustomActionBeforeTabActivation(pTabStripID, tabHeaderToSelect, tabCanvasToOpen, tabIndex, runtime.tabHeaders.length);}
			
				for (var t = 0; t < runtime.tabCanvases.length; t++){
					var tabHeader = runtime.tabHeaders[t];
					var tabCanvas = runtime.tabCanvases[t];
					tabHeader.className = tabHeader.individualCssClass + css_tabHeader_mouseout;
					if(t==runtime.tabCanvases.length-1)
				        tabHeader.className += wm_tabStrip_globals.css_tabHeader_right_add;
					tabCanvas.style.display = "none";
				}
				
				tabHeaderToSelect.className = tabHeaderToSelect.individualCssClass + css_tabHeader_selected;
				if(tabIndex==runtime.tabHeaders.length-1)
				    tabHeaderToSelect.className += wm_tabStrip_globals.css_tabHeader_right_add;
				tabCanvasToOpen.style.display = "block";

				if (pCustomActionAfterTabActivation){pCustomActionAfterTabActivation(pTabStripID, tabHeaderToSelect, tabCanvasToOpen, tabIndex, runtime.tabHeaders.length);}
			}
		}
		
		return eventHandler;
	}

	this.addEvent = function(pTarget, pEventType, pEventHandler){
		if (pTarget.addEventListener){
				pTarget.addEventListener(pEventType, pEventHandler, false);
		}
		else if (pTarget.attachEvent){
			pTarget.attachEvent("on" + pEventType, pEventHandler);
		}
	}

	var tabSelectEvent = (pTabSelectEvent == null) ? wm_tabStrip_globals.tabSelectEvent : pTabSelectEvent;
	//var indexOfStartTab = (pIndexOfStartTab == null) ? wm_tabStrip_globals.indexOfStartTab : pIndexOfStartTab;
	var tabHeadersPosition = (pTabHeadersPosition == null) ? wm_tabStrip_globals.tabHeadersPosition : pTabHeadersPosition;
	var css_tabHeader_selected = (pCssTabHeaderSelected == null) ? wm_tabStrip_globals.css_tabHeader_selected : pCssTabHeaderSelected;
	var css_tabHeader_mouseover = (pCssTabHeaderMouseover == null) ? wm_tabStrip_globals.css_tabHeader_mouseover : pCssTabHeaderMouseover;
	var css_tabHeader_mouseout = (pCssTabHeaderMouseout == null) ? wm_tabStrip_globals.css_tabHeader_mouseout : pCssTabHeaderMouseout;
	var css_tabCanvas = (pCssTabCanvas == null) ? wm_tabStrip_globals.css_tabCanvas : pCssTabCanvas;
	var css_tabHeaders_container = (pCssTabHeadersContainer == null) ? wm_tabStrip_globals.css_tabHeaders_container : pCssTabHeadersContainer;
	var numberOfColumns = (pNumberOfColumns == null) ? wm_tabStrip_globals.numberOfColumns : pNumberOfColumns;

	var tabStrip = document.getElementById(pTabStripID);
	tabStrip.style.position = "relative";
	tabStrip.style.width = (tabStrip.style.width) ? tabStrip.style.width : "0px";

    wm_tabStrip_globals.init(pTabStripID);
	var runtime = wm_tabStrip_globals.getRuntime(pTabStripID);
	
	var tabIndex = -1;
	for (var t = 0; t < tabStrip.childNodes.length; t++){
		var tab = tabStrip.childNodes[t];
		if (tab.tagName == "DIV"){
			tabIndex++;//cannot use 't' as the tab index, because in FF childNodes contains also textnodes for the spaces between elements, so all these spaces will increment 't' in FF
			runtime.tabs.push(tab);
			for (var c = 0; c < tab.childNodes.length; c++){
				var child = tab.childNodes[c];
				var individualCssClass = (child.className) ? child.className + " " : "";
				child.individualCssClass = individualCssClass;
				if (child.tagName == "DIV"){
					if (runtime.tabHeaders.length < runtime.tabs.length){
						runtime.tabHeaders.push(child);
						lastChild = child;
						if(pIdOfStartTab)
						{						
							child.className = (child.parentElement.id == pIdOfStartTab) ? individualCssClass + css_tabHeader_selected : individualCssClass + css_tabHeader_mouseout;																			
						}
						else
						{
							child.className = (tabIndex == 0) ? individualCssClass + css_tabHeader_selected : individualCssClass + css_tabHeader_mouseout;												
						}
						//child.className = (tabIndex == indexOfStartTab) ? individualCssClass + css_tabHeader_selected : individualCssClass + css_tabHeader_mouseout;												
						child.style.position = "relative";
						child.id = pTabStripID + "tabHeader" + tabIndex;
						child.style.display = "block";
						child.tabIndex = tabIndex;//I cannot transfer tabIndex to the eventhandlers, because the eventhandlers run within a closure (this function execution context) and so tabIndex will be the final value then this function returns, not the value tabIndex have then the eventhandler is attached (but the value tabIndex have then the event is fired)
						addEvent(child, "mouseover", eventHandlerFactory(child, "hoverTabHeader"));
						addEvent(child, "mouseout", eventHandlerFactory(child, "unHoverTabHeader"));
						if(!child.onclick)
							addEvent(child, tabSelectEvent, eventHandlerFactory(child, "openCanvas"));						
						child.activateTab = eventHandlerFactory(child, "openCanvas");
					}
					else{
						runtime.tabCanvases.push(child);
						child.id = pTabStripID + "tabCanvas" + tabIndex;
						child.className = individualCssClass + css_tabCanvas;
						child.style.position = "relative";
						if(pIdOfStartTab)
						{						
							child.style.display = (child.parentElement.id == pIdOfStartTab) ? "block" : "none";
						}
						else
						{
							child.style.display = (tabIndex == 0) ? "block" : "none";
						}
						
					}
				}
			}
		}
	}
	
	if(lastChild)
	{
	    lastChild.className += wm_tabStrip_globals.css_tabHeader_right_add;						    
	}

	for (var t = tabStrip.childNodes.length - 1; t >= 0; t--){
	    try
	    {
		    tabStrip.removeChild(tabStrip.childNodes[t]);
	    }
	    catch(err)
	    {
	    }
	}
	
	tabStrip.length = runtime.tabHeaders.length;

	var edge = tabHeadersPosition.split('_')[0];
	var edgeAlign = tabHeadersPosition.split('_')[1];

	var tblLayout = document.createElement("TABLE");tabStrip.appendChild(tblLayout);
	tblLayout.cellPadding = 0;
	tblLayout.cellSpacing = 0;
	tblLayout.border = 0;
	tblLayout.style.width = "100%";
	tblLayout.style.height = "100%";
	var tbodyLayout = document.createElement("TBODY");tblLayout.appendChild(tbodyLayout);
	if (edge == "top" || edge == "bottom"){
		var trLayout_header = document.createElement("TR");
		var trLayout_canvas = document.createElement("TR");
		if (edge == "top"){
			tbodyLayout.appendChild(trLayout_header);
			tbodyLayout.appendChild(trLayout_canvas);
		}
		else if (edge == "bottom"){
			tbodyLayout.appendChild(trLayout_canvas);
			tbodyLayout.appendChild(trLayout_header);
		}

		var tdLayout_header = document.createElement("TD");trLayout_header.appendChild(tdLayout_header);
		tdLayout_header.className = css_tabHeaders_container;
		tdLayout_header.style.padding = "0px";
		tdLayout_header.align = (edgeAlign == "middle") ? "center" : edgeAlign;
		var tdLayout_canvas = document.createElement("TD");trLayout_canvas.appendChild(tdLayout_canvas);
		tdLayout_canvas.style.padding = "0px";

		var tblHeader = document.createElement("TABLE");tdLayout_header.appendChild(tblHeader);
		tblHeader.cellPadding = 0;
		tblHeader.cellSpacing = 0;
		tblHeader.border = 0;
		var tbodyHeader = document.createElement("TBODY");tblHeader.appendChild(tbodyHeader);
		var trHeader = null;
		if (numberOfColumns == 0){//default - only 1 row contains all tabHeaders
			trHeader = document.createElement("TR");tbodyHeader.appendChild(trHeader);
		}
		for (var t = 0; t < runtime.tabs.length; t++){
			if (numberOfColumns > 0){
				if ((t % numberOfColumns) == 0){
					trHeader = document.createElement("TR");tbodyHeader.appendChild(trHeader);
				}
			}
			var tdHeader = document.createElement("TD");trHeader.appendChild(tdHeader);
			tdHeader.style.padding = "0px";
			tdHeader.setAttribute("valign", "bottom");
			tdHeader.vAlign = "bottom";
			var tabHeader = runtime.tabHeaders[t];
			var tabCanvas = runtime.tabCanvases[t];

			tdHeader.appendChild(tabHeader);
			tdLayout_canvas.appendChild(tabCanvas)
		}
	}
	else if (edge == "left" || edge == "right"){
		var trLayout = document.createElement("TR");tbodyLayout.appendChild(trLayout);
		var tdLayout_header = document.createElement("TD");
		tdLayout_header.className = css_tabHeaders_container;
		tdLayout_header.style.padding = "0px";
		var tdLayout_canvas = document.createElement("TD");
		tdLayout_canvas.style.padding = "0px";
		if (edge == "left"){
			trLayout.appendChild(tdLayout_header);//headers column first
			trLayout.appendChild(tdLayout_canvas);
		}
		else if (edge == "right"){
			trLayout.appendChild(tdLayout_canvas);
			trLayout.appendChild(tdLayout_header);//headers column last
		}
		tdLayout_header.vAlign = edgeAlign;
		tdLayout_canvas.style.width = "100%";
		tdLayout_canvas.style.height = "100%";
		var tblHeader = document.createElement("TABLE");tdLayout_header.appendChild(tblHeader);
		tblHeader.cellPadding = 0;
		tblHeader.cellSpacing = 0;
		tblHeader.border = 0;
		var trHeader = null;//
		var tbodyHeader = document.createElement("TBODY");tblHeader.appendChild(tbodyHeader);
		for (var t = 0; t < runtime.tabs.length; t++){
			if (numberOfColumns == 0){//default - a new row for each tabHeader
				trHeader = document.createElement("TR");tbodyHeader.appendChild(trHeader);
			}
			else{
				if ((t % numberOfColumns) == 0){
					trHeader = document.createElement("TR");tbodyHeader.appendChild(trHeader);
				}
			}
			var tdHeader = document.createElement("TD");trHeader.appendChild(tdHeader);
			tdHeader.style.padding = "0px";
			tdHeader.setAttribute("valign", "bottom");
			tdHeader.vAlign = "bottom";
			var tabHeader = runtime.tabHeaders[t];
			var tabCanvas = runtime.tabCanvases[t];

			tdHeader.appendChild(tabHeader);
			tdLayout_canvas.appendChild(tabCanvas)
		}
	}

	if (tabStrip.style.height){		
		var tabStrip_height = parseInt(tabStrip.style.height, 10);
		var canvas_residual_height = tabStrip_height - trHeader.offsetHeight;
		for (var c = 0; c < runtime.tabCanvases.length; c++){
			if (edge == "top" || edge == "bottom"){
				runtime.tabHeaders[c].style.position = "relative";
				runtime.tabCanvases[c].style.height = canvas_residual_height + "px";
			}
			else{
				runtime.tabCanvases[c].style.height = tabStrip_height + "px";
			}
		}
	}
	else {		
	}
}



var wm_tabStrip_APISupport = new function(){
	this.scroll = function(pElm){
		if (pElm){
			var scrollLeft = (pElm.scrollLeft) ? pElm.scrollLeft : 0;
			var scrollTop = (pElm.scrollTop) ? pElm.scrollTop : 0;
			return {"X":scrollLeft,"Y":scrollTop};
		}
		else if (document.documentElement && document.documentElement.scrollTop){
			return {"X":document.documentElement.scrollTop,"Y":document.documentElement.scrollTop};
		}
		else if (document.body){
			return {"X":document.body.scrollTop,"Y":document.body.scrollTop};
		}
		else if (window.pageXOffset){
			return {"X":window.pageXOffset,"Y":window.pageYOffset};
		}
		else{
			return {"X":0,"Y":0};
		}
	}
	
	this.coordinates = function(pElm){
		var elm = pElm;
		var pageOffsetX = viewportOffsetX = elm.offsetLeft;
		var pageOffsetY = viewportOffsetY = elm.offsetTop;
		while (elm = elm.offsetParent){
			pageOffsetX += elm.offsetLeft;
			pageOffsetY += elm.offsetTop;
			viewportOffsetX += elm.offsetLeft - this.scroll(elm).X;
			viewportOffsetY += elm.offsetTop - this.scroll(elm).Y;
		}

		var coords = {}
		coords.viewport = {"X":viewportOffsetX,"Y":viewportOffsetY};
		coords.document = {"X":pageOffsetX,"Y":pageOffsetY};
		
		return coords;
	}
}

function wm_tabStrip_getTabHeaderTop_viewport(pTabStripID, pTabIndex){
	var tabHeader = document.getElementById(pTabStripID + "tabHeader" + pTabIndex);
	return wm_tabStrip_APISupport.coordinates(tabHeader).viewport.Y;
}

function wm_tabStrip_getTabHeaderLeft_viewport(pTabStripID, pTabIndex){
	var tabHeader = document.getElementById(pTabStripID + "tabHeader" + pTabIndex);
	return wm_tabStrip_APISupport.coordinates(tabHeader).viewport.X;
}

function wm_tabStrip_getTabHeaderRight_viewport(pTabStripID, pTabIndex){
	var tabHeader = document.getElementById(pTabStripID + "tabHeader" + pTabIndex);
	return wm_tabStrip_getTabHeaderLeft_viewport(pTabStripID, pTabIndex) + tabHeader.offsetWidth;
}

function wm_tabStrip_getTabHeaderBottom_viewport(pTabStripID, pTabIndex){
	var tabHeader = document.getElementById(pTabStripID + "tabHeader" + pTabIndex);
	return wm_tabStrip_getTabHeaderTop_viewport(pTabStripID, pTabIndex) + tabHeader.offsetWidth;
}

function wm_tabStrip_activateTab(pTabStripID, pTabIndex){
	//note that you don't need this function to activate a specific tab on page load - this can be achieved directly in wm_tabStrip argument list as : pIndexOfStartTab
	//this function could be used eg. with a timer setting up a slide show each tab being a slide
	var tabHeader = document.getElementById(pTabStripID + "tabHeader" + pTabIndex);
	tabHeader.activateTab();
}

function wm_tabStrip_repaint(pTabStripID, pTabSelectEvent, pIndexOfStartTab, pTabHeadersPosition, pNumberOfColumns, pCssTabHeaderSelected, pCssTabHeaderMouseover, pCssTabHeaderMouseout, pCssTabCanvas, pCustomActionBeforeTabActivation, pCustomActionAfterTabActivation, pCustomActionOnTabMouseover, pCustomActionOnTabMouseout){
	//all the arguments of wm_tabStrip
	//this is not going to be that easy because the original HTML markup is not existing on DOM anymore
	
	var tabStrip = document.getElementById(pTabStripID);
}

function wm_tabStrip_tabLength(pTabStripID){
	var tabStrip = document.getElementById(pTabStripID);
	return tabStrip.length;
}