var isfont =false;
var vhead, vwmid,vwmask,vwright,vwleft,vleftcol1,vwidthcol1,vwidthcol2,vleftcol2,vwidthcol3,vleftcol3;
var bkhead,bkmask,bkcol1,bkcol2,bkleft,bkmid, bkright, bkfooter, bkbottom,bkmiddle, bkcol3,vlmask;


function calValues() {

var vwraper,vleft,vright, ve;
ut = x1.unit;
var r = (ut=="em") ? getfontSizeRadio() : 1;
ve = x3.values.mid/2;


vwmask =x1.values.mid;
vwright =x2.values.mid;
//vwright = parseFloat(document.getElementById("vd2").innerHTML);
vwmid = x22.values.mid;
//vwmid = parseFloat(document.getElementById("vd3").innerHTML);

var up = (ut=="em") ? r : 1;


if (ut=="%") {
//vlmask = (100 - vwmask)/2;
vleftcol1 = 100+ve;
vwleft = 100 - vwright - vwmid;
}
 else {
vlmask = (vwmask - vwmask)/2;
vleftcol1 = vwmask+ve;
vwleft = vwmask - vwright - vwmid;
}

vwidthcol1 = (vwmid - 2* ve) < 0 ? 0 : vwmid - 2* ve;

if ($("sidegap").checked) {

vwidthcol2 = (vwleft - 2*ve<0) ? 0 : vwleft - 2*ve;
vleftcol2 = vleftcol1- vwidthcol1- vwleft;
vwidthcol3 = (vwright -2*ve<0) ? 0 : vwright -2*ve;
vleftcol3 = vleftcol2 + vwidthcol1 + 4*ve;

} else {

vwidthcol2 = (vwleft - ve<0) ? 0 : vwleft - ve;
vleftcol2 = vleftcol1- vwidthcol1- vwleft - ve;
vwidthcol3 = (vwright -ve<0) ? 0 : vwright -ve;
vleftcol3 = vleftcol2 + vwidthcol1 + 4*ve;

}

document.getElementById("mask1").style.width = vwmask +ut;
document.getElementById("mid1").style.right = vwright + ut;
document.getElementById("left1").style.right = vwmid + ut;
document.getElementById("col11").style.width = vwidthcol1 + ut;
document.getElementById("col11").style.left = vleftcol1 + ut;
document.getElementById("col22").style.width = vwidthcol2 + ut;
document.getElementById("col22").style.left = vleftcol2 + ut;
document.getElementById("col33").style.width = vwidthcol3 + ut;
document.getElementById("col33").style.left = vleftcol3 + 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 = htmlcode;
}

var tmpcode,clsbottom,lsheader,clsmask,clsmid,clsleft,clscol1,clscol2,clscol3,clsfooter;

function writetotxtarea () {
var str = $("html0").value;
var vclass = str.match(/[\"\'](\w+)[\"\']/g);
//colmask header colmid colleft col1 col2 col3
if (vclass.length==8) {
    clsmask = vclass[0].replace(/\"/g,"");
    clsheader = vclass[1].replace(/\"/g,"");
    clsmid = vclass[2].replace(/\"/g,"");    
    clsleft = vclass[3].replace(/\"/g,"");
    clscol1 = vclass[4].replace(/\"/g,"");
    clscol2 = vclass[5].replace(/\"/g,"");
    clscol3 = vclass[6].replace(/\"/g,"");
    clsfooter = vclass[7].replace(/\"/g,"");
}
else
{
    clsheader ="header";
    clsmask ="mask";
    clsmid ="mid";
    clsleft = "left";
    clscol1 = "col1";
    clscol2 = "col2";
    clscol3 = "col3";
    clsfooter = "footer";
}

getstartlayoutbkcolors();

tmpcode ="." + clsmask + "{"+ "\n"
            + "   position: relative;" + "\n"
            + "   overflow: hidden;" + "\n"
			+ "   margin: 0px auto;" + "\n"			
			+ "   width: " + vwmask + ut+";" + "\n"+vhdheight
			+ "   background-color: " + bkmask + "\n"
			+ "}" + "\n"       
			+ "." + clsheader  + "{" + "\n"
            + "   float: left;" + "\n"
            + "   width: 100%;"  + "\n"  + vhdheight   
            + "   background-color: " + bkhead + "\n"
            + "}" + "\n"
            
			+ "." + clsmid + "{"+ "\n"
			+ "   position: relative;" + "\n"
			+ "   width: 100%;" + "\n"	
			+ "   right: "+	vwright + ut+";" + "\n"
			+ "   background-color: " + bkleft + "\n"
			+ "}" + "\n"
                   
			+ "." + clsleft + "{"+ "\n"
			+ "   position: relative;" + "\n"
			+ "   width: 100%;" + "\n"	
			+ "   right: "+	vwmid +ut+";" + "\n"
			+ "   background-color: " + bkleft + "\n"
			+ "}" + "\n"
			+ "." + clscol1 + "{"+ "\n"
			+ "   position: relative;" + "\n"
            + "   overflow: hidden;" + "\n"	
			+ "   float: left;"+ "\n" 			
			+ "   width: "+ vwidthcol1 + ut+";" + "\n"
			+ "   left: "+	vleftcol1 +ut+";" + "\n"+vmainheight		
			+ "   background-color: " + bkcol1 + "\n"
			+ "}" + "\n"
			+ "." + clscol2 + "{"+ "\n"
			+ "   position: relative;" + "\n"
            + "   overflow: hidden;" + "\n"	
			+ "   float: left;"+ "\n" 			
			+ "   width: "+ vwidthcol2 + ut+";" + "\n"
			+ "   left: "+	vleftcol2 +ut+";" + "\n"+vmainheight		
			+ "   background-color: " + bkcol2 + "\n"
			+ "}" + "\n"
			+ "." + clscol3 + "{"+ "\n"
			+ "   position: relative;" + "\n"
            + "   overflow: hidden;" + "\n"	
			+ "   float: left;"+ "\n" 			
			+ "   width: "+ vwidthcol3 + ut+";" + "\n"
			+ "   left: "+	vleftcol3 +ut+";" + "\n"+vmainheight		
			+ "   background-color: " + bkcol3 + "\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!="") $("col11").style.height = mm + "px";
if (vmainheight!="") $("col22").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>3 Column CSS Layout - nested design</title>' + "\n"
			+ "<style type='text/css'>" + "\n"	+ tmpcode + "</style>" + "\n"
			+ '</head>' + "\n"
			+ '<body>' + "\n"
			+ '<div class="' + clsmask + '">' + "\n"
			+ '    <div class="' + clsheader + '">' + "\n"
			+ '        header' + "\n"
			+ '    <\/div>'  + "\n"  
			+ '    <div class="' + clsmid + '">' + "\n"
			+ '    <div class="' + clsleft + '">' + "\n"
			
			+ '        <div class="' + clscol1 + '">' + "\n"
			+ '            mid' + "\n"
			+ '        <\/div>' + "\n"
			+ '        <div class="' + clscol2 + '">' + "\n"
			+ '            left' + "\n"
			+ '        <\/div> ' + "\n"
			+ '        <div class="' + clscol3 + '">' + "\n"
			+ '            right' + "\n"
			+ '        <\/div> ' + "\n"
			+ '    <\/div> ' + "\n"
			+ '    <\/div>' + "\n"
			+ '    <div class="' + clsfooter + '">' + "\n"
			+ '        footer' + "\n"
			+ '    <\/div>' + "\n"

			+ '<\/div>' + "\n"
			+ '</body>' + "\n"
			+ '</html>' + "\n"
}

$("css0").value = csscode;

}

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();

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,x3,utfont;
var vfont;
var sldcolor = "#33ff33";

x1 = new slider();
x2 = new slider();
x22 = new slider();

x3 = new slider();
x4 = new slider();

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

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:"%"
});

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

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

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

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,htmlcode;
function start() {	
htmlcode = $("html0").value;


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('col22','left column',bkleft);
c2 = new selitem('col11','middle column',bkmiddle);
c22 = new selitem('col33','right column',bkright);

c3 = new selitem('ft1','footer',bkfooter);
c4 = new selitem('left1 mask1','margin gap',bkmask);
c5 = new selitem('btm1','sides column',bkbottom);

item = [c0,c1,c2,c22,c3,c4,c5];
}

function getstartlayoutbkcolors() {

bkhead =getcolor($('hd1'));
bkmask = getcolor($('mask1'));
bkmid = getcolor($('mid1'));

bkleft = getcolor($('left1'));
bkcol1 = getcolor($('col11'));
bkcol2 = getcolor($('col22'));
bkcol3 = getcolor($('col33'));

bkfooter =getcolor($('ft1'));
bkbottom =getcolor($('btm1'));

}