var isfont =false;


function calValues() {
var vwraper,vleft,vright, ve;

ut = getUnit();
var r = (ut=="em") ? getfontSizeRadio() : 1;
ve = x3.startlength/2;
vwraper =x1.startlength;
vleft =x2.startlength;
var up = (ut=="em") ? r : 1;

if ($("sidegap").checked) {
    if (ut=="%") {
    vright = ((100 - vleft -4*ve)< 0) ? 0 : 100 - vleft -4*ve;
    }
    else
    {
    vright = ((vwraper - vleft - 4*ve)/up < 0) ? 0 : (vwraper - vleft - 4*ve)/up;
    }
    vwrpleft = (ut=="px") ? parseInt((w/up-vwraper/up)/2) + ut : formatDecimals((w/up-vwraper/up)/2,2)+ ut;
    vwrpwidth = (ut=="px") ?  parseInt(vwraper/up) + ut : formatDecimals(vwraper/up,2) + ut;       
    vleftleft = (ut=="px") ?  parseInt(ve/up) + ut : formatDecimals(ve/up,2) + ut;    
    vleftwidth = (ut=="px") ?  parseInt(vleft/up) + ut : formatDecimals(vleft/up,2) + ut;
    vrightwidth = (ut=="px") ?  parseInt(vright) + ut : formatDecimals(vright,2) + ut;
    vrightright = (ut=="px") ?  parseInt(ve/up) + ut : formatDecimals(ve/up,2) + ut;
}
else
{
    if (ut=="%") {
    vright = ((100 - vleft -2*ve)< 0) ? 0 : 100 - vleft -2*ve;
    }
    else
    {
    vright = ((vwraper - vleft - 2*ve)/up < 0) ? 0 : (vwraper - vleft - 2*ve)/up;
    }
     vwrpleft = (ut=="px") ? parseInt((w/up-vwraper/up)/2) + ut : formatDecimals((w/up-vwraper/up)/2,2)+ ut;
    vwrpwidth = (ut=="px") ?  parseInt(vwraper/up) + ut : formatDecimals(vwraper/up,2) + ut; 
    vleftleft =  "0" + ut;
    vleftwidth = (ut=="px") ?  parseInt(vleft/up) + ut : formatDecimals(vleft/up,2) + ut;
    vrightwidth = (ut=="px") ?  parseInt(vright) + ut : formatDecimals(vright,2) + ut;
    vrightright =  "0" + ut;

}


$("wrp").style.left = vwrpleft;
$("wrp").style.width = vwrpwidth;
$("left").style.width = vleftwidth;
$("left").style.left = vleftleft;
$("right").style.right =vrightright;
$("right").style.width = vrightwidth;
$("hd1").style.left =vwrpleft;
$("hd1").style.width = vwrpwidth;
$("ft1").style.left = vwrpleft;
$("ft1").style.width = vwrpwidth;

}

var nt = 0;

function anotherclassname() {

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


var vwrpleft,vwrpwidth,vleftleft,vleftwidth,vrightwidth,vrightright;
var bkhead,bkwrapper,bkleft, bkright, bkfooter, bkbottom;

function writeJS(){

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



var tmpcode,clsbottom,lsheader,clswrapper,clsleft,clsright,clsfooter;
function writetotxtarea () {

var str = $("html0").value;
var vclass = str.match(/[\"\'](\w+)[\"\']/g);
if (vclass.length==5) {    
    clsheader = vclass[0].replace(/\"/g,"");
    clswrapper = vclass[1].replace(/\"/g,"");
    clsleft = vclass[2].replace(/\"/g,"");
    clsright = vclass[3].replace(/\"/g,"");
    clsfooter = vclass[4].replace(/\"/g,"");
}
else
{
    clswrapper ="wrapper";
    clsheader ="header";
    clsleft = "left";
    clsright = "right";
    clsfooter = "footer";
}


getstartlayoutbkcolors();

tmpcode =   "." + clsheader  + "{" + "\n"
			+ "   position: relative;" + "\n"
            + "   float: left;" + "\n"
            + "   left: " + vwrpleft + ";" + "\n"
            + "   width: " + vwrpwidth + ";" + "\n" + vhdheight
            + "   background-color: " + bkhead + "\n"
            + "}" + "\n"											
			+ "." + clswrapper + "{"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   left: " + vwrpleft + ";" + "\n"			
			+ "   width: " + vwrpwidth + ";" + "\n"
			+ "   background-color: " + bkwrapper + "\n"
			+ "}" + "\n"
			+ "." + clsleft + "{"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   left: "+ vleftleft + ";" + "\n"
			+ "   width: "+ vleftwidth + ";" + "\n"	+ vmainheight		
			+ "   background-color: " + bkleft + "\n"
			+ "}" + "\n"
			+ "." + clsright + "{"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   float: right;"+ "\n"
			+ "   right: "+ vrightright + ";" + "\n"
			+ "   width: "+ vrightwidth + ";" + "\n" + vmainheight		
			+ "   background-color: " + bkright + "\n"
			+ "}" + "\n"
			+ "." + clsfooter + "{" + "\n"
			+ "   position: relative;" + "\n"
			+ "   float: left;" + "\n"
			+ "   left: " + vwrpleft + ";" + "\n"
            + "   width: " + vwrpwidth + ";" + "\n"  + vftheight          
			+ "   background-color: " + bkfooter  + "\n"
			+ "}"  + "\n"
			+ "body {" + "\n"
			+ "   border-width: 0px;"+ "\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!="") $("left").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>2 Column CSS Layout - parellel design</title>' + "\n"
			+ "<style type='text/css'>" + "\n"	+ tmpcode + "</style>" + "\n"
			+ '</head>' + "\n"
			+ '<body>' + "\n"
			+ '    <div class="' + clsheader + '">' + "\n"
			+ '        header' + "\n"
			+ '    <\/div>'  + "\n"
			+ '    <div class="' + clswrapper + '">' + "\n"
			+ '        <div class="' + clsleft + '">' + "\n"
			+ '            left' + "\n"
			+ '        <\/div>' + "\n"
			+ '        <div class="' + clsright + '">' + "\n"
			+ '            right' + "\n"
			+ '        <\/div> ' + "\n"
			+ '    <\/div>' + "\n"
			+ '    <div class="' + clsfooter + '">' + "\n"
			+ '        footer' + "\n"
			+ '    <\/div>' + "\n"
			+ '</body>' + "\n"
			+ '</html>' + "\n"
}

$("css0").value = csscode;

}


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



function unitclick(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 

if (ut!=o.id) {
var u =ut;
ut = o.id;
var y1 = unitconversion(x1.startlength, u, ut);
x1.startlength =y1;
var y2 = unitconversion(x2.startlength, u, ut);
x2.startlength =y2;

var y3 = unitconversion(x3.startlength, u, ut);
x3.startlength =y3;
w = getstartValues(ut,1);
var g = getstartValues(ut,2);

Draggable("point1",y1,sldcolor,0,w,300,ut);
Draggable("point2",y2,sldcolor,0,w,300,ut); 
Draggable("gap",y3,sldcolor,0,g,150,ut);  
$("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,x3,utfont;
var vfont;
var sldcolor = "#33ff33";
window.onload = function(){

ut = "%";
utfont ="em";
vfont = "90%";
$(ut).checked =true;

ww = parseFloat(document.body.clientWidth);
w = getstartValues(ut,1);
var g = getstartValues(ut,2);

x1 = new slider("point1",w,sldcolor,0,w,300,ut);
x1.b(); 
x2 = new slider("point2",parseInt(w*49/100),sldcolor,0,w,300,ut); 
x2.b();
x3 = new slider("gap",0,sldcolor,0,g,150,ut); 
x3.b();

x4 = new slider("font",0.9,sldcolor,0.5,1,150,utfont); 
x4.b();

start();
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('left','left column',bkleft);
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,c2,c3,c4,c5];

}


function getstartlayoutbkcolors() {


bkhead =getcolor($('hd1'));
bkwrapper = getcolor($('wrp'));
bkleft = getcolor($('left'));
bkright = getcolor($('right'));
bkfooter =getcolor($('ft1'));
bkbottom =getcolor($('btm1'));
//vwrpleft = getLeft($("wrp"));
//vwrpwidth = getWidth($("wrp"));
//vleftleft = getLeft($("left"));
//vleftwidth = getWidth($("left"));
//vrightwidth = getWidth($("right"));
//vrightright = getRight($("right"));

}