var isfont =false;
var vwrpwidth,vleft1width,vleft2width,vleft3width,vleft4width,vrightwidth,leftmarginright;
var bkhead,bkwrapper,bkleft1,bkleft2, bkleft3,bkleft4,bkright, bkfooter, bkbottom;

function calValues() {
var vwraper,vleft1,vleft2,vleft3,vleft4,vright, ve;
ut = x1.unit;

var r = (ut=="em") ? getfontSizeRadio() : 1;
ve = x3.values.mid;
vwraper =x1.values.mid;
vleft1 =x2.values.mid;
vleft2 =x22.values.mid;
vleft3 =x23.values.mid;
vleft4 =x24.values.mid;
var up = (ut=="em") ? r : 1;
if (ut=="%") {
    vright = ((100 - vleft1 -vleft2 - vleft3 - vleft4 - 4*ve)< 0) ? 0 : 100 - vleft1 -vleft2 - vleft3 - vleft4 - 4*ve;
    }
else
    {
    vright = ((vwraper - vleft1 -vleft2 -vleft3 - vleft4 - 4*ve)/up < 0) ? 0 : (vwraper - vleft1 -vleft2 -vleft3 - vleft4 - 4*ve)/up;
    }
    
    leftmarginright = (ut=="px") ? parseInt(ve/up) : formatDecimals(ve/up,2);
   
    vwrpwidth = (ut=="em") ? formatDecimals(vwraper/up,2) : parseInt(vwraper/up);
    vleft1width = (ut=="em") ? formatDecimals(vleft1/up,2) : parseInt(vleft1/up);    
    vleft2width = (ut=="em") ? formatDecimals(vleft2/up,2) : parseInt(vleft2/up);
    vleft3width = (ut=="em") ? formatDecimals(vleft3/up,2) : parseInt(vleft3/up);
    vleft4width = (ut=="em") ? formatDecimals(vleft4/up,2) : parseInt(vleft4/up);      
    vrightwidth = (ut=="em") ? formatDecimals(vright,2) : parseInt(vright);
vrightwidth = (ut=="%") ?  vrightwidth-0.5 : vrightwidth;

$("wrp").style.width = vwrpwidth + ut;
$("left1").style.marginRight = leftmarginright + ut;
$("left1").style.width = vleft1width + ut;
$("left2").style.width = vleft2width + ut;
$("left2").style.marginRight = leftmarginright + ut;
$("left3").style.width = vleft3width + ut;
$("left3").style.marginRight = leftmarginright + ut;
$("left4").style.width = vleft4width + ut;
$("left4").style.marginRight = leftmarginright + ut;
$("right").style.width = vrightwidth + ut;
writetotxtarea ();
}

var nt = 0;

function anotherclassname() {
nt = parseFloat(nt) + 1;
var str = $("html0").value;
$("html0").value = str.replace(/\d*\s*\"\s*>/g,nt+'">');
writetotxtarea();
}


function writeJS(){
nt =0;
 $("html0").value = layouthtml();
}

var tmpcode,clsbottom,lsheader,clswrapper,clsleft1,clsleft2,clsleft3,clsleft4,clsright,clsfooter;
function writetotxtarea () {

var str = $("html0").value;
var vclass = str.match(/[\"\'](\w+)[\"\']/g);

if (vclass.length==8) {
    clswrapper = vclass[0].replace(/\"/g,"");
    clsheader = vclass[1].replace(/\"/g,"");
    clsleft1 = vclass[2].replace(/\"/g,"");
    clsleft2 = vclass[3].replace(/\"/g,"");  
    clsleft3 = vclass[4].replace(/\"/g,""); 
    clsleft4 = vclass[5].replace(/\"/g,"");
    clsright = vclass[6].replace(/\"/g,"");
    clsfooter = vclass[7].replace(/\"/g,"");
}
else{
    clswrapper ="wrapper";
    clsheader ="header";
    clsleft1 = "left1";
    clsleft2 = "left2";
    clsleft3 = "left3";
    clsleft4 = "left4";
    clsright = "right";
    clsfooter = "footer";
}
getstartlayoutbkcolors();
var vleftmarginright = (leftmarginright==0) ? "" : "   margin-right: " + leftmarginright + ut+";" + "\n";

tmpcode = "." + clswrapper + "{"+ "\n"
			+ "   margin: 0px auto;" + "\n"			
			+ "   width: " + vwrpwidth + ut+";" + "\n"
			+ "   background-color: " + bkwrapper + "\n"
			+ "}" + "\n"
            +  "." + clsheader  + "{" + "\n"
            + "   float: left;" + "\n"
            + "   width: 100%;"  + "\n"  + vhdheight   
            + "   background-color: " + bkhead + "\n"
            + "}" + "\n"
            + "." + clsleft1 + "{"+ "\n"
			+ "   float: left;"+ "\n"
			+ vleftmarginright			
			+ "   width: "+ vleft1width + ut+";" + "\n"	+ vmainheight		
			+ "   background-color: " + bkleft1 + "\n"
			+ "}" + "\n"           
			+ "." + clsleft2 + "{"+ "\n"
			+ "   float: left;"+ "\n"
			+ vleftmarginright			
			+ "   width: "+ vleft2width + ut+";" + "\n"	+ vmainheight		
			+ "   background-color: " + bkleft2 + "\n"
			+ "}" + "\n" 
			+ "." + clsleft3 + "{"+ "\n"
			+ "   float: left;"+ "\n"
			+ vleftmarginright			
			+ "   width: "+ vleft3width + ut+";" + "\n"	+ vmainheight		
			+ "   background-color: " + bkleft3 + "\n"			
			+ "}" + "\n"
			+ "." + clsleft4 + "{"+ "\n"
			+ "   float: left;"+ "\n"
			+ vleftmarginright			
			+ "   width: "+ vleft4width + ut+";" + "\n"	+ vmainheight		
			+ "   background-color: " + bkleft4 + "\n"			
			+ "}" + "\n"						
			+ "." + clsright + "{"+ "\n"
			+ "   float: right;"+ "\n" 			
			+ "   width: "+ vrightwidth + ut+";" + "\n" + vmainheight		
			+ "   background-color: " + bkright + "\n"
			+ "}" + "\n"
			+ "." + clsfooter + "{" + "\n"
			+ "   float: left;" + "\n"
            + "   width: 100%;"  + "\n"  + vftheight          
			+ "   background-color: " + bkfooter  + "\n"
			+ "}"  + "\n"
			+ "body {" + "\n"
			+ "   padding: 0px;" + "\n"
			+ "   margin: 0px;" + "\n"
			+ "   font-size: " + vfont + ";" + "\n"
			+ "   background-color: " + bkbottom  + "\n"
			+ "}"  + "\n";
outputcode();

}

var vhdheight="";
var vmainheight="";
var vftheight="";
function changeheight() {
var mm = parseInt($("heith").value);

vhdheight = ((mm !="NaN") && (mm >0)) ? "   height: " + mm + "px;" + "\n" : "";

if (vhdheight!="") $("hd1").style.height = mm + "px";
mm = parseInt($("heitm").value);
vmainheight =((mm !="NaN") && (mm >0)) ? "   height: " + mm + "px;"+ "\n" : "";

if (vmainheight!="") $("left1").style.height = mm + "px";
if (vmainheight!="") $("left2").style.height = mm + "px";
if (vmainheight!="") $("left3").style.height = mm + "px";
if (vmainheight!="") $("left4").style.height = mm + "px";


if (vmainheight!="") $("right").style.height = mm + "px";

mm = parseInt($("heitf").value);
vftheight = ((mm !="NaN") && (mm >0)) ? "   height: " + mm + "px;"+ "\n" : "";
if (vftheight!="") $("ft1").style.height = mm + "px";


writetotxtarea();
}


function outputcode() {
if ( tmpcode==null) return;
var csscode;
		

if ($("is_style").checked==true) {
csscode = "<style type='text/css'>" + "\n"	+ tmpcode + "</style>";		
} else{
csscode = tmpcode;
}

if ($("is_html").checked==true) {

csscode = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + "\n"
			+ '<html xmlns="http://www.w3.org/1999/xhtml">' + "\n"
			+ '<head>' + "\n"
			+ '<title>5 Column CSS Layout - concise design</title>' + "\n"
			+ "<style type='text/css'>" + "\n"	+ tmpcode + "</style>" + "\n"
			+ '</head>' + "\n"
			+ '<body>' + "\n"
			+ '<div class="'+ clswrapper + '">' + "\n"
			+ '    <div class="' + clsheader + '">' + "\n"
			+ '        header' + "\n"
			+ '    <\/div>'  + "\n"
			+ '    <div class="' + clsleft1 + '">' + "\n"
			+ '        left1' + "\n"
			+ '    <\/div>' + "\n"
			+ '    <div class="' + clsleft2 + '">' + "\n"
			+ '        left2' + "\n"
			+ '    <\/div>' + "\n"
			+ '    <div class="' + clsleft3 + '">' + "\n"
			+ '        left3' + "\n"
			+ '    <\/div>' + "\n"
			+ '    <div class="' + clsleft4 + '">' + "\n"
			+ '        left4' + "\n"
			+ '    <\/div>' + "\n"			
			+ '    <div class="' + clsright + '">' + "\n"
			+ '        right' + "\n"
			+ '    <\/div> ' + "\n"
			+ '    <div class="' + clsfooter + '">' + "\n"
			+ '        footer' + "\n"
			+ '    <\/div>' + "\n"
			+ '<\/div>' + "\n"
			+ '</body>' + "\n"
			+ '</html>' + "\n"
}

$("css0").value = csscode;

}


function layouthtml() {
var str='';
str+='	<div class="wrapper">' + "\n";
str+='	    <div class="header">' + "\n";
str+='	         header' + "\n";
str+='	    <\/div> ' + "\n";
str+='	    <div class="left1">' + "\n";
str+='	        left1' + "\n";
str+='	    <\/div>' + "\n";
str+='	    <div class="left2">' + "\n";
str+='	        left2' + "\n";
str+='	    <\/div>' + "\n";
str+='	    <div class="left3">' + "\n";
str+='	        left3' + "\n";
str+='	    <\/div>' + "\n";
str+='	    <div class="left4">' + "\n";
str+='	        left4' + "\n";
str+='	    <\/div>' + "\n";
str+='	    <div class="right">' + "\n";
str+='	        right' + "\n";
str+='	    <\/div> '+ "\n";
str+='	    <div class="footer">' + "\n";
str+='	        footer' + "\n";
str+='	    <\/div>' + "\n";
str+='	<\/div>';
return str;
}

function unitclick(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 
var ut = o.id;
x1.newunit=o.id;
x1.convertunit();
x2.newunit=o.id;
x2.convertunit();
x22.newunit=o.id;
x22.convertunit();
x23.newunit=o.id;
x23.convertunit();
x24.newunit=o.id;
x24.convertunit();
x3.newunit=o.id;
x3.convertunit(); 
$("emfont").style.display = (ut=="em") ? "block" : "none";
}

function init() {
  
   var el =  $("unb").getElementsByTagName("li");      
  for(var i=0; i<el.length; i++){
  el[i].onclick = fontunit;
  }
   var el =  $("uns").getElementsByTagName("input"); 
  for(var i=0; i<el.length; i++){
  el[i].onclick = unitclick;
  }
  
  var e = $$($("up"),"div");

for(var i=0; i<e.length; i++){ 
e[i].onclick = fullscreen;

}

var ee = $$($("down"),"div");
for(var i=0; i<ee.length; i++){ 
ee[i].onclick = fullscreen;


}
 }

var ww,w,ut,x1,x2,x22,x23,x24,x3,utfont;
var vfont;
var sldcolor = "#33ff33";
x1 = new slider();
x2 = new slider();
x22 = new slider();
x23 = new slider();
x24 = new slider();
x3 = new slider();
x4 = new slider();

window.onload = function(){
start();
ut = "px";
utfont ="em";
vfont = "90%";

ww = parseFloat(window.screen.width);
w = getstartValues(ut,1);
var g = getstartValues(ut,2);


x1.init({id:"point1",hassteparrows:true,style:{backgroundColor:"red",width:"300px"},
pointer:{backgroundColor:"#6699cc"},values:{min:10,mid:w,max:w,fontSize:"10px"}
,fire:calValues
,unit:"px"
});

x2.init({id:"point2",hassteparrows:true,style:{backgroundColor:"red",width:"300px"},
pointer:{backgroundColor:"#6699cc"},values:{min:10,mid:200,max:w,fontSize:"10px"}
,fire:calValues
,unit:"px"
});

x22.init({id:"point3",hassteparrows:true,style:{backgroundColor:"red",width:"300px"},
pointer:{backgroundColor:"#6699cc"},values:{min:10,mid:204,max:w,fontSize:"10px"}
,fire:calValues
,unit:"px"
});

x23.init({id:"point4",hassteparrows:true,style:{backgroundColor:"red",width:"300px"},
pointer:{backgroundColor:"#6699cc"},values:{min:10,mid:177,max:w,fontSize:"10px"}
,fire:calValues
,unit:"px"
});

x24.init({id:"point5",hassteparrows:true,style:{backgroundColor:"red",width:"300px"},
pointer:{backgroundColor:"#6699cc"},values:{min:10,mid:183,max:w,fontSize:"10px"}
,fire:calValues
,unit:"px"
});

x3.init({id:"gap",hassteparrows:true,style:{backgroundColor:"red",width:"150px"},
pointer:{backgroundColor:"#6699cc"},values:{min:0,mid:20,max:g,fontSize:"10px"}
,fire:calValues
,unit:"px"
});

x4.init({id:"font",style:{backgroundColor:"red",width:"150px"},
pointer:{backgroundColor:"#6699cc"},values:{min:0.5,mid:0.9,max:1,fontSize:"10px"}
,fire:calValues
,unit:"em"
});
var mtab = new movetabs();
mtab.b();
init();
}


function selitem(id, text,bkcolor) {
this.id =id;
this.text = text;
this.bkcolor = bkcolor;
}

var item = new Array;
var t2,t3;

function start() {	

t2 = new Bindtabs("tabco2",0,"click","b");
t2.c();
t3 = new Bindtabs("tabco3",1,"click","b");
t3.c();

getstartlayoutbkcolors();

c0 = new selitem('hd1','head',bkhead);
c1 = new selitem('left1','left1 column',bkleft1);
c12 = new selitem('left2','left2 column',bkleft2);
c13 = new selitem('left3','left3 column',bkleft3);
c14 = new selitem('left4','left4 column',bkleft4);

c2 = new selitem('right','right column',bkright);
c3 = new selitem('ft1','footer',bkfooter);
c4 = new selitem('wrp','margin gap',bkwrapper);
c5 = new selitem('btm1','sides column',bkbottom);

item = [c0,c1,c12,c13,c14, c2,c3,c4,c5];

}


function getstartlayoutbkcolors() {

bkhead =getcolor($('hd1'));
bkwrapper = getcolor($('wrp'));
bkleft1 = getcolor($('left1'));
bkleft2 = getcolor($('left2'));
bkleft3 = getcolor($('left3'));
bkleft4 = getcolor($('left4'));
bkright = getcolor($('right'));
bkfooter =getcolor($('ft1'));
bkbottom =getcolor($('btm1'));
}