var scale9TabbedBoxBuilder	= function() {
	
	// limit to part of the page ... pass an ID to limitTo:
	// supersleight.limitTo('menu');
	// or define here: 
	var root = "content";
	
	// Path to scale9Box elemets
	// !! left and right element must have the same width
	// elements in one row most have the same height
	
	var tl			= new Image();
		tl.src		= baseURL + 'gfx/scale9box_tl_tabbed.png';  // top left corner NOSCALE
	var tc			= new Image();
		tc.src		= baseURL + 'gfx/scale9box_tc_tabbed.png';  // top center  REPEAT-X
	var tr			= new Image();
		tr.src		= baseURL + 'gfx/scale9box_tr_tabbed.png';  // top right corner NOSCALE
	
	var ml			= new Image();
		ml.src		= baseURL + 'gfx/scale9box_ml.png';  // middle left  REPEAT-Y
	var mc			= new Image();
		mc.src		= baseURL + 'gfx/scale9box_mc.png';  // middle left  TILE
	var mr			= new Image();
		mr.src		= baseURL + 'gfx/scale9box_mr.png';  // middle right  REPEAT-Y
	
	var bl			= new Image();
		bl.src		= baseURL + 'gfx/scale9box_bl.png';  // bottom left corner NOSCALE
	var bc			= new Image();
		bc.src		= baseURL + 'gfx/scale9box_bc.png';  // bottom center  REPEAT-X
	var br			= new Image();
		br.src		= baseURL + 'gfx/scale9box_br.png';  // bottom right corner NOSCALE
		
		
	var active_tableft		= new Image();
		active_tableft.src	= baseURL + 'gfx/scale9box_tab_active_l.png';  // left corner NOSCALE
	var active_tabc			= new Image();
		active_tabc.src		= baseURL + 'gfx/scale9box_tab_active_c.png';  // center  REPEAT-X
	var active_tabr			= new Image();
		active_tabr.src		= baseURL + 'gfx/scale9box_tab_active_r.png';  // right corner NOSCALE
		
	var inactive_tableft		= new Image();
		inactive_tableft.src	= baseURL + 'gfx/scale9box_tab_inactive_l.png';  // left corner NOSCALE
	var inactive_tabc			= new Image();
		inactive_tabc.src		= baseURL + 'gfx/scale9box_tab_inactive_c.png';  // center  REPEAT-X
	var inactive_tabr			= new Image();
		inactive_tabr.src		= baseURL + 'gfx/scale9box_tab_inactive_r.png';  // right corner NOSCALE

	var create9scaleTabbedBox = function() { 
	
		// make array of div elements that have "scale9box" ass className
		// limited to part of the page given in root
		if (root) {
			root = document.getElementById(root);
		}else{
			root = document;
		}
		var apply9scaleTo = new Array();
		apply9scaleTo = getElementsByClassName("scale9tabbedBox",root);

		for (var i = 0; i < apply9scaleTo.length; i++) {

			var oTbl 	= document.createElement("table");
			var oTR 	= oTbl.insertRow(0);
			var oTD 	= oTR.insertCell(0);
				oTD.style.width = tl.width+"px";
				oTD.style.height = tl.height+"px";
				oTD.style.backgroundImage = "url("+tl.src+")";
				oTD.style.backgroundRepeat = "no-repeat";
				oTD 	= oTR.insertCell(1);
				oTD.style.height = tc.height+"px";
				oTD.style.backgroundImage = "url("+tc.src+")";
				oTD.style.backgroundRepeat = "repeat-x";
				oTD.style.verticalAlign = "top";
				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				// inherit boxTab elements 
				var alltabs 	= getElementsByClassName("boxTab",apply9scaleTo[i]);
				for (var t = 0; t < alltabs.length; t++) {

					var setTabVisuals = function (what, state){

						what.className = state+"Tab";
						what.style.backgroundImage = "url(" + eval(state + "_tabc").src + ")";
						what.style.height = (eval(state + "_tabc").height)+"px";

						var t1_loc = getElementsByClassName("tabLeft",what);
						t1_loc[0].style.width = (eval(state + "_tableft").width)+"px";
						t1_loc[0].style.height = (eval(state + "_tableft").height)+"px";
						t1_loc[0].style.backgroundImage = "url("+(eval(state + "_tableft").src)+")";
						t1_loc[0].style.backgroundRepeat = "no-repeat";
						t1_loc[0].style.position = 'absolute';
						
						var t2_loc = getElementsByClassName("tabCenter",what);
						t2_loc[0].style.padding = "12px "+ (eval(state + "_tabr").width) +"px 0px "+ (eval(state + "_tabr").width) +"px ";

						var t3_loc = getElementsByClassName("tabRight",what);
						t3_loc[0].style.width = (eval(state + "_tabr").width)+"px";
						t3_loc[0].style.height = (eval(state + "_tabr").height)+"px";
						t3_loc[0].style.backgroundImage = "url("+(eval(state + "_tabr").src)+")";
						t3_loc[0].style.backgroundRepeat = "no-repeat";
						t3_loc[0].style.position = 'absolute';
						t3_loc[0].style.right = '0px';
						
					}; 
					
					var tab = document.createElement("a");
					var tabLeft 	= document.createElement("div");
						tabLeft.className = "tabLeft";
					var tabCenter 	= document.createElement("div");
						tabCenter.className = "tabCenter";
					var tabRight 	= document.createElement("div");
						tabRight.className = "tabRight";
					
					tab.id = "tab" + t;
					
					var selectedTab = '0';
					tab.onclick = function () 
					{
						disableElement =  document.getElementById("tabContent"+selectedTab);
						disableElement.style.display = "none";
						setTabVisuals(document.getElementById("tab"+selectedTab), "inactive");
						
						selectedTab = this.id.substring(3,4);
						
						enableElement =  document.getElementById("tabContent"+selectedTab);
						enableElement.style.display = "block";
						setTabVisuals(document.getElementById("tab"+selectedTab), "active");
					}

					tabCenter.innerHTML = alltabs[t].innerHTML;
					tab.appendChild(tabLeft);
					tab.appendChild(tabRight);
					tab.appendChild(tabCenter);
					
					oTD.appendChild(tab);
					if (t>0) setTabVisuals(tab, "inactive"); else setTabVisuals(tab, "active");
					
				}
				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				oTD 	= oTR.insertCell(2);
				oTD.style.width = tr.width+"px";
				oTD.style.height = tr.height+"px";
				oTD.style.backgroundImage = "url("+tr.src+")";
				oTD.style.backgroundRepeat = "no-repeat";

				
				oTR 	= oTbl.insertRow(1);
				oTD 	= oTR.insertCell(0);
				oTD.style.width = ml.width+"px";
				oTD.style.backgroundImage = "url("+ml.src+")";
				oTD.style.backgroundRepeat = "repeat-y";
				oTD 	= oTR.insertCell(1);
				oTD.style.backgroundImage = "url("+mc.src+")";
				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				// inherit tabContent elements 
				var allTabContent 	= getElementsByClassName("tabContent",apply9scaleTo[i]);
				for (var c = 0; c < allTabContent.length; c++) {
					var tabContent = document.createElement("div");
					if (c > 0) tabContent.style.display = "none";
					tabContent.id = "tabContent" + c;
					tabContent.innerHTML = allTabContent[c].innerHTML
					oTD.appendChild(tabContent);
				}

				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				oTD 	= oTR.insertCell(2);
				oTD.style.width = mr.width+"px";
				oTD.style.backgroundImage = "url("+mr.src+")";
				oTD.style.backgroundRepeat = "repeat-y";


				oTR 	= oTbl.insertRow(2);
				oTD 	= oTR.insertCell(0);
				oTD.style.width = bl.width+"px";
				oTD.style.height = bl.height+"px";
				oTD.style.backgroundImage = "url("+bl.src+")";
				oTD.style.backgroundRepeat = "no-repeat";
				oTD 	= oTR.insertCell(1);
				oTD.style.height = bc.height+"px";
				oTD.style.backgroundImage = "url("+bc.src+")";
				oTD.style.backgroundRepeat = "repeat-x";
				oTD 	= oTR.insertCell(2);
				oTD.style.width = br.width+"px";
				oTD.style.height = br.height+"px";
				oTD.style.backgroundImage = "url("+br.src+")";
				oTD.style.backgroundRepeat = "no-repeat";

			oTbl.style.width = "100%";
			oTbl.cellSpacing = "0";
			oTbl.cellPadding = "0";
			removeChildNodes(apply9scaleTo[i]);
			apply9scaleTo[i].appendChild(oTbl);
		}

	};
	
	var getElementsByClassName = function(classNameRef,finderRoot) { 
		var a = new Array();
		var e = finderRoot.getElementsByTagName('div');
		for ( var i = 0; i<e.length; i++ ) {
			var classNameFinder = new RegExp(classNameRef);
			if ( e[i].className && e[i].className.match(classNameFinder) ) a.push(e[i]);
		}
		return a;
	};
	
	var removeChildNodes = function (parent){
		while(parent.hasChildNodes()){
			parent.removeChild(parent.childNodes[0])
		}
	}; 
	
	var addLoadEvent = function(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			};
		}
	};
	
	return {
		init: function() { 
			addLoadEvent(create9scaleTabbedBox);
		},
		
		limitTo: function(element) {
			root = element;
		},
		
		run: function() {
			create9scaleTabbedBox();
		}
	};
}();

// limit to part of the page ... pass an ID to limitTo:
// scale9boxBuilder.limitTo('header');

scale9TabbedBoxBuilder.init();