var scale9boxBuilder	= 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.png';  // top left corner NOSCALE
	var tc			= new Image();
		tc.src		= baseURL + 'gfx/scale9box_tc.png';  // top center  REPEAT-X
	var tr			= new Image();
		tr.src		= baseURL + 'gfx/scale9box_tr.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 create9scaleBox = 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("scale9box",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.innerHTML = getElementsByClassName("boxTitle",apply9scaleTo[i])[0].innerHTML; // inherit Title
				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				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+")";
				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				oTD.innerHTML = getElementsByClassName("boxContent",apply9scaleTo[i])[0].innerHTML; // inherit Content
				//////////////////////////////////////////////////////////////////////////////////////////////////////////
				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(create9scaleBox);
		},
		
		limitTo: function(element) {
			root = element;
		},
		
		run: function() {
			create9scaleBox();
		}
	};
}();

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

scale9boxBuilder.init();