function leftAdd()
{
	var left = document.getElementById("left");
	var p = document.createElement("p");
	var dummy = document.createTextNode("Lorem ipsum ad per iriure eripuit sensibus, quo ei propriae constituto, nec impedit veritus cu. Omnis aeque petentium eum eu. Esse error splendide in vel, natum graece iriure an his.");
	p.appendChild(dummy);
	left.appendChild(p);
	contentFix();
}

function rightAdd()
{
	var right = document.getElementById("right");
	var p = document.createElement("p");
	var dummy = document.createTextNode("Lorem ipsum ad per iriure eripuit sensibus, quo ei propriae constituto, nec impedit veritus cu. Omnis aeque petentium eum eu. Esse error splendide in vel, natum graece iriure an his.");
	p.appendChild(dummy);
	right.appendChild(p);
	contentFix();
}

			//IE FIX
			function remove()
			{
					var p = document.getElementById("fixer");
					var parent = document.getElementById("fixer").parentNode;
					parent.removeChild(p);
			}
			
			function rightAddRemove()
			{
				var right = document.getElementById("right");
				var p = document.createElement("p");
				p.setAttribute("id","fixer");
				var dummy = document.createTextNode("");
				p.appendChild(dummy);
				right.appendChild(p);
				setTimeout("remove()",1);
			}


			function removeContentFix()
			{
				var parent = document.getElementById("contentFix").parentNode;
				var p = document.getElementById("contentFix");
				parent.removeChild(p);
			}
			
			function contentFix()
			{
				var right = document.getElementById("right");
				var p = document.createElement("p");
				p.setAttribute("id","contentFix");
				var dummy = document.createTextNode("");
				p.appendChild(dummy);
				right.appendChild(p);
				setTimeout("removeContentFix()",1);
				codePreviewOff();
			}

function Add()
{
	var content = document.getElementById("content");
	var p = document.createElement("p");
	var dummy = document.createTextNode("Lorem ipsum ad per iriure eripuit sensibus, quo ei propriae constituto, nec impedit veritus cu. Omnis aeque petentium eum eu. Esse error splendide in vel, natum graece iriure an his.");
	p.appendChild(dummy);
	content.appendChild(p);
	contentFix();
}


function codePreviewOff()
{
	var cssCode = document.getElementById("cssCode");
	var htmlCode = document.getElementById("htmlCode");
	
	cssCode.style.display="none";
	htmlCode.style.display="none";
}


function changeWidth()
{	
	var wrap = document.getElementById("wrap");
	var wrapStyle = wrap.getAttribute("style","width");
	
	var left = document.getElementById("left");
	var right = document.getElementById("right");
	var center = document.getElementById("center");

	function appendCSS()
	{
	var width = document.getElementById("columnWidth").value;
		if(width.length == "3")
		{
		var centerWidth = parseFloat(wrapStyle)-parseFloat(width)-parseFloat(width)-2;
	
		center.style.width=centerWidth+"px";	
		
		center.style.marginLeft=width+"px";
		center.style.marginRight=width+"px";
		
		left.style.marginLeft="-"+width+"px";
		right.style.marginRight="-"+width+"px";
		
		var colWidth = parseFloat(width)-25;
		left.style.width= colWidth+'px';
		right.style.width= colWidth+'px';
		setTimeout('rightAddRemove()',300);
		}
		else
		{
	
		}
	}

	if (typeof wrapStyle == 'string') { // what Firefox returns
		wrapStyle = wrapStyle.replace(/px/g,"");
		wrapStyle = wrapStyle.replace(/width:/g,"");
		
		appendCSS();
		
	} 
	else if (typeof wrapStyle == 'object') { // what IE returns
		wrapStyle = wrapStyle.cssText;
		wrapStyle = wrapStyle.replace(/px/g,"");
		wrapStyle = wrapStyle.replace(/WIDTH: /g,"");
		appendCSS();
	} 	
}



function changeColor()
{
	var columnColor = document.getElementById("columnColor").value;
	var float = document.getElementById("float");
	float.style.backgroundColor=columnColor;
	codePreviewOff();
	contentFix();
}

function createCSS()
{
	var columnWidth = document.getElementById("columnWidth").value;
	
	var cssCode = document.getElementById("cssCode");
	var htmlCode = document.getElementById("htmlCode");
	
	cssCode.style.display="none";
	htmlCode.style.display="none";
	

	var wrap = document.getElementById("wrap");
	var wrapStyle = wrap.getAttribute("style");
	

		if (typeof wrapStyle == 'string') { // what Firefox returns
			wrapStyle = wrapStyle.replace(/(.*)width:/g,"");
			wrapStyle = wrapStyle.replace(/px(.*)/g,"");
			wrapStyle = wrapStyle.replace(/width:/g,"");		
			wrapStyle = wrapStyle.replace(/ /g,"");	
		} else if (typeof wrapStyle == 'object') { // what IE returns
			wrapStyle = wrapStyle .cssText;
			wrapStyle = wrapStyle.replace(/(.*)WIDTH:/g,"");
			wrapStyle = wrapStyle.replace(/px(.*)/g,"");
			wrapStyle = wrapStyle.replace(/WIDTH:/g,"");		
			wrapStyle = wrapStyle.replace(/ /g,"");				
		} 	


	
	var left = document.getElementById("left");
	var leftStyle = left.getAttribute("style");
	
		if (typeof leftStyle == 'string') { // what Firefox returns
			leftStyle = leftStyle.replace(/(.*)width:/g,"");
			leftStyle = leftStyle.replace(/px(.*)/g,"");
			leftStyle = leftStyle.replace(/width:/g,"");		
			leftStyle = leftStyle.replace(/ /g,"");	
		} else if (typeof leftStyle == 'object') { // what IE returns
			leftStyle = leftStyle.cssText;
			leftStyle = leftStyle.replace(/(.*)WIDTH:/g,"");
			leftStyle = leftStyle.replace(/px(.*)/g,"");
			leftStyle = leftStyle.replace(/WIDTH:/g,"");		
			leftStyle = leftStyle.replace(/ /g,"");	
		} 	


	
	var right = document.getElementById("right");
	var rightStyle = right.getAttribute("style");
	
		if (typeof rightStyle == 'string') { // what Firefox returns
			rightStyle = rightStyle.replace(/(.*)width:/g,"");
			rightStyle = rightStyle.replace(/px(.*)/g,"");
			rightStyle = rightStyle.replace(/width:/g,"");		
			rightStyle = rightStyle.replace(/ /g,"");
		} else if (typeof rightStyle == 'object') { // what IE returns
			rightStyle = rightStyle.cssText;
			rightStyle = rightStyle.replace(/(.*)WIDTH:/g,"");
			rightStyle = rightStyle.replace(/px(.*)/g,"");
			rightStyle = rightStyle.replace(/WIDTH:/g,"");		
			rightStyle = rightStyle.replace(/ /g,"");

		}	


	
	var center = document.getElementById("center");
	var centerStyle = center.getAttribute("style");
	
		if (typeof centerStyle == 'string') { // what Firefox returns
			centerStyle = centerStyle.replace(/(.*)width:/g,"");
			centerStyle = centerStyle.replace(/px(.*)/g,"");
			centerStyle = centerStyle.replace(/width:/g,"");		
			centerStyle = centerStyle.replace(/ /g,"");
		} else if (typeof centerStyle == 'object') { // what IE returns
			centerStyle = centerStyle.cssText;
			centerStyle = centerStyle.replace(/(.*)WIDTH:/g,"");
			centerStyle = centerStyle.replace(/px(.*)/g,"");
			centerStyle = centerStyle.replace(/WIDTH:/g,"");		
			centerStyle = centerStyle.replace(/ /g,"");

		}	

	
	var width = document.getElementById("columnWidth").value;
	width = width.replace(/px/g,"");
	var centerWidth = parseFloat(wrapStyle)-parseFloat(width)-parseFloat(width)-2;
	margin = parseFloat(width);
	widthCol = parseFloat(width)-25;
	var columnColor = document.getElementById("columnColor").value;
	
	if(columnWidth=="" && columnColor=="")
	{
	document.getElementById("cssCode").value = "";
	var newCSS = "body          {text-align:center;}"+"\n"+
	".main	      {width:980px !important; width:982px;}"+"\n"+
	".columns      {width:145px; float:left; padding:10px; position:relative; z-index:100; overflow:auto;}"+"\n"+
	".float        {float:left; display:inline;}"+"\n"+
	".topBottomBdr {border:#000 solid; border-width:1px 0px 1px 0px;}"+"\n"+
	".leftRightBdr {border:#000 solid; border-width:0px 1px 0px 1px;}"+"\n"+
	".content      {margin:15px;}"+"\n"+
	"\n"+
	"#wrap   {margin-left:auto; margin-right:auto; text-align:left;}"+"\n"+
	"#float  {background-color:#CCC;}"+"\n"+
	"#center {margin-left:165px; margin-right:165px; width:648px; background-color:#FFF;}"+"\n"+
	"#left   {margin-left:-165px;}"+"\n"+
	"#right  {margin-right:-165px; float:right;}"+"\n"+
	"#header {width:100%; height:100px; background-color:#FFF;}"+"\n"+
	"#footer {width:100%; height:20px; background-color:#FFF;}";
	
	document.getElementById("cssCode").value = newCSS;
	
	var cssCode = document.getElementById("cssCode");
	var htmlCode = document.getElementById("htmlCode");
	
	cssCode.style.display="block";
	htmlCode.style.display="block";
		
	}
	else
	{
	document.getElementById("cssCode").value = "";
	var newCSS = "body          {text-align:center;}"+"\n"+
	".main	      {width:980px !important; width:982px;}"+"\n"+
	".columns      {width:"+widthCol+"px"+"; float:left; padding:10px; position:relative; z-index:100; overflow:auto;}"+"\n"+
	".float        {float:left; display:inline;}"+"\n"+
	".topBottomBdr {border:#000 solid; border-width:1px 0px 1px 0px;}"+"\n"+
	".leftRightBdr {border:#000 solid; border-width:0px 1px 0px 1px;}"+"\n"+
	".content      {margin:15px;}"+"\n"+
	"\n"+
	"#wrap   {margin-left:auto; margin-right:auto; text-align:left;}"+"\n"+
	"#float  {background-color:"+columnColor+";}"+"\n"+
	"#center {margin-left:"+margin+"px"+"; margin-right:"+margin+"px"+"; width:"+centerWidth+"px;"+"background-color:#FFF;}"+"\n"+
	"#left   {margin-left:"+"-"+width+"px"+";}"+"\n"+
	"#right  {margin-right:"+"-"+width+"px"+"; float:right;}"+"\n"+
	"#header {width:100%; height:100px; background-color:#FFF;}"+"\n"+
	"#footer {width:100%; height:20px; background-color:#FFF;}";
	
	document.getElementById("cssCode").value = newCSS;
	
	var cssCode = document.getElementById("cssCode");
	var htmlCode = document.getElementById("htmlCode");
	
	cssCode.style.display="block";
	htmlCode.style.display="block";
	}
	
}