var isfont =false;

function addcols() {
var wr=c("div");
wr.className = "wrapper";

for(var i=0; i<colno-1; i++){
var co=c("div");
co.className = "lft";
wr.appendChild(co);

}

var co=c("div");
co.className = "rht";
wr.appendChild(co);
return wr;
}

function addrows() {

for(var i=0; i<rowno; i++){
var row = addcols();
$("btm1").appendChild(row);

}
}

function delrows() {
    var divcol = getChildNodes($("btm1"),"div");    
    var l=divcol.length;
    for(var i=0; i<l; i++){ 
        $("btm1").removeChild(divcol[i]);
    } 
}

function calValues() {
var vwraper,vleft1,vleft2,vleft3,vright, ve;
ut = getUnit();

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

delrows();
addrows();

var up = (ut=="em") ? r : 1;
var divcol0 = getChildNodes($("btm1"),"div");
j=0;
var m=divcol0.length;
for(var j=0; j<m; j++){

var divcol = $$(divcol0[j],"div");
var l = divcol.length;

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; 
divcol0[j].style.left = vwrpleft;
divcol0[j].style.width = vwrpwidth;  
divcol0[j].style.backgroundColor = bkwrapper; 
divcol0[j].style.marginBottom = (ut=="px") ?  parseInt(2*ve/up) + ut : formatDecimals(2*ve/up,2) + ut;
var vwwp = (ut=="%") ? 100 : vwraper;

if ($("sidegap").checked) {
   vgrid = (vwwp-2*colno*ve)/colno/up<0 ? 0 : (vwwp-2*colno*ve)/colno/up;
   vgrid = (ut=="px") ?  parseInt(vgrid) + ut : formatDecimals(vgrid,2) + ut;			  

    for(var i=0; i<l-1; i++){ 
        divcol[i].style.left = (ut=="px") ?  parseInt((2*i+1)*ve/up) + ut : formatDecimals((2*i+1)*ve/up,2) + ut;
        divcol[i].style.width = vgrid;
        divcol[i].style.height =(mm=="NaN" || mm==null) ? vgrid : mm+"px";
        divcol[i].style.backgroundColor = bkleft1;
        divcol[i].onmouseover = cellhighlight;
        divcol[i].onmouseout = cellhighlight
        divcol[i].onclick = cellhighlight;
    }
     
    var ve2 = vwwp/up - (l-1) * 2*ve/up -l*parseFloat(vgrid);
  
    divcol[l-1].style.right = (ut=="px") ?  parseInt(ve/up) + ut : formatDecimals(ve/up,2) + ut;
    divcol[l-1].style.width = vgrid;
    divcol[l-1].style.height = (mm=="NaN" || mm==null) ? vgrid : mm+"px";
    divcol[l-1].style.backgroundColor = bkleft1;
    divcol[l-1].onmouseover = cellhighlight;
        divcol[l-1].onmouseout = cellhighlight
        divcol[l-1].onclick = cellhighlight;
}
else
{
    vgrid = (vwwp-2*(colno-1)*ve)/colno/up<0 ? 0 : (vwwp-2*(colno-1)*ve)/colno/up;
    vgrid = (ut=="px") ?  parseInt(vgrid) + ut : formatDecimals(vgrid,2) + ut;	    
    var ve2 = vwwp/up - (l-2) * 2*ve/up -l*parseFloat(vgrid);
  
    for(var i=0; i<l-1; i++){ 
        divcol[i].style.left = (ut=="px") ?  parseInt((2*i)*ve/up) + ut : formatDecimals((2*i)*ve/up,2) + ut;
        divcol[i].style.width = vgrid;
        divcol[i].style.height = (mm=="NaN" || mm==null) ? vgrid : mm+"px";
        divcol[i].style.backgroundColor = bkleft1;
    }
    divcol[l-1].style.right = 0 + ut;
    divcol[l-1].style.width = vgrid; 
    divcol[l-1].style.height = (mm=="NaN" || mm==null) ? vgrid : mm+"px";   
    divcol[l-1].style.backgroundColor = bkleft1;
}
 ve2 = (ut=="px") ? parseInt(ve2) : formatDecimals(ve2,2);
 var ve0 = (ut=="px") ? parseInt(2*ve/up) : formatDecimals(2*ve/up,2);
    if (ut!="%") {
    $("info").innerHTML = (ve0==ve2) ?  vgrid+ " - "+ve0 +ut +"  -  "+ ve2 +ut+ " Perfect! All gutters are equal." : vgrid+ " - "+ve0 +ut+"  -  "+ ve2+ut;
    }
}
}

function cellhighlight(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 
var bk = getstyle(o,"background-color");

 if (e.type == "mouseover") {
o.style.backgroundColor=kg;
}

}

var vgrid,vwrpleft,vwrpwidth,vrightwidth,vrightright;
var bkwrapper,bkleft1, bkbottom;
var bkleft = "#c00000";
function writeJS(){
 $("html0").value = layouthtml();
}

var tmpcode;

function writetotxtarea () {
getstartlayoutbkcolors();

var divcol0 = getChildNodes($("btm1"),"div");
var divcol = $$(divcol0[0],"div");
var l = divcol.length;
var marginbottom = divcol0[0].style.marginBottom;
var height = (mm=="NaN" || mm==null) ? vgrid : mm+"px";

tmpcode =   ".wrapper"  + "{"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   left: " + vwrpleft + ";" + "\n"			
			+ "   width: " + vwrpwidth + ";" + "\n"
			+ "   margin-bottom: " + marginbottom + ";" + "\n"
			+ "   background-color: " + bkwrapper + "\n"
			+ "}" + "\n";
		
for(var i=0; i<l-1; i++){ 
vleft = divcol[i].style.left;
tmpcode = tmpcode
            + ".left"+(i+1) + "{"+ "\n"
            + "   position: relative;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   left: "+ vleft + ";" + "\n"
			+ "   width: "+ vgrid + ";" + "\n"
			+ "   height: " + height+ ";" + "\n"
			+ "   background-color: " + bkleft1 + "\n"
			+ "}" + "\n"
     
}
var vright = divcol[l-1].style.right;
tmpcode = tmpcode
            + ".right" + "{"+ "\n"
            + "   position: relative;"+ "\n"
			+ "   float: right;"+ "\n"
			+ "   right: "+ vright + ";" + "\n"
			+ "   width: "+ vgrid + ";" + "\n"
			+ "   height: " + height+ ";" + "\n"
			+ "   background-color: " + bkleft1 + "\n"
			+ "}" + "\n"

tmpcode = tmpcode			+ "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="";
var mm = null;
function changeheight() {

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

setgridheight(mm+"px");
writetotxtarea();
}

function setgridheight(hgt) {
var divcol0 = getChildNodes($("btm1"),"div");
j=0;
var m=divcol0.length;
for(var j=0; j<m; j++){

var divcol = $$(divcol0[j],"div");
var l = divcol.length;
    for(var i=0; i<l; i++){ 
        divcol[i].style.height = hgt;
    }
}
}

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>Grid Layout Generator</title>' + "\n"
			+ "<style type='text/css'>" + "\n"	+ tmpcode + "</style>" + "\n"
			+ '</head>' + "\n"
			+ '<body>' + "\n"
			+ layouthtml();
csscode +=	'</body>' + "\n"
			+ '</html>' + "\n"
}

$("css0").value = csscode;
$("html0").value = layouthtml();
}

function layouthtml() {

var str ='	<div class="wrapper">' + "\n";
for(var i=0; i<colno-1; i++){ 
    str+='	     <div class="left'+(i+1)+'">' + "\n";
    str+='	     <\/div>' + "\n";
}
    str+='	     <div class="right">' + "\n";
    str+='	     <\/div> '+ "\n";
    str+='	 <\/div> '+ "\n";
str0="";
for(var i=0; i<rowno; i++){ 
str0 += str;

}
return str0;
}

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 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("gap",y3,sldcolor,0,g,150,ut);  
$("emfont").style.display = (ut=="em") ? "block" : "none";
}
}
 
function validinput(){
var vb = $("inu").value;

if ((isNaN(vb)) || (vb.search(/\./)>-1)) {alert("Input must be an integer");
$("inu").value=rowno;
}
else {
if (vb<1) {
alert("Input should be more than 0")
vb=1;
}
 if (vb>20) {
 alert("Input is set not more than 20");
 vb=20;}
 $("inu").value = vb; 
 rowno = parseInt($("inu").value);


}
} 

function  selrow(e) {
 e = (e) ? e : ((window.event) ? window.event : "");
 var elem = getTargetElement(e);
 var ep = (elem.className =="arrowbox1") ? elem : elem.parentNode;
 var epc = $$(ep,"div");
 var l =epc.length;
 
 if (e.type == "mouseover") {
 for (var i=0; i < l-1; i++) {
 epc[i].style.backgroundColor = "#6699cc";
 epc[i].style.borderLeft ="solid 1px #6699cc";
 epc[i].style.borderRight ="solid 1px #6699cc";
 }
 epc[l-1].style.backgroundColor = "#6699cc";
 
 }
 if (e.type == "mouseout") {
 for (var i=0; i < l-1; i++) {
 epc[i].style.backgroundColor = "#cfcfcf";
 epc[i].style.borderLeft ="solid 1px #cfcfcf";
 epc[i].style.borderRight ="solid 1px #cfcfcf";
 }
 epc[l-1].style.backgroundColor = "#cfcfcf";
 
 
 
 }
 if (e.type == "click") {
 var v = parseInt($("inu").value);
 var n = (ep.id!="inr") ? -1 : 1;
 var r = v +n;
 
 if (r<1) r=1;
 if (r>20) r=20;
 $("inu").value = r; 
 rowno = parseInt($("inu").value);
 calValues();
 writetotxtarea();
 }
 
} 
  
 
var rowno = 1;
var colno = 5;
    
function selcol(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var elem = getTargetElement(e);

var ep = elem.parentNode.getElementsByTagName('li');
var m = getIndex(ep,elem);

if (e.type == "mouseover") {
if (m!=(colno-1)) {

ep[m].style.backgroundColor = "#ffffcc";
}

}

if (e.type == "mouseout") {

if (m!=(colno-1)) {
ep[m].style.backgroundColor = "#cfcfcf";
}
}

if (e.type == "click") {
ep[colno-1].style.backgroundColor = "#cfcfcf";
colno = m+1;
ep[m].style.backgroundColor = "#828282";
 
calValues(); 
writetotxtarea();
}

}



function init() {
  
var el = $$($("cb"),"li");
for(var i=0; i<el.length; i++){ 
el[i].onmouseover = selcol;
el[i].onmouseout = selcol;
el[i].onclick = selcol;

}


var e = $$($("arr"),"div");

for(var i=0; i<e.length; i++){ 
if (e[i].parentNode.id !="arr") {
e[i].onmouseover = selrow;
e[i].onmouseout = selrow;
e[i].onclick = selrow;}

}

  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";
var kg ="#828282";
window.onload = function(){
start();
ut = "px";
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(); 

x3 = new slider("gap",10,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,grid) {
this.id =id;
this.text = text;
this.bkcolor = bkcolor;
this.grid = grid;
}

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

c1 = new selitem('left1','left1 column',bkleft1);
c2 = new selitem('wrp','margin gap',bkwrapper);
c3 = new selitem('btm1','sides column',bkbottom,true);

item = [c1,c2,c3];

}


function getstartlayoutbkcolors() {
bkleft1 = getcolor($$($$($('btm1'),'div')[0],'div')[0]);
bkwrapper = getcolor($$($('btm1'),'div')[0]);
bkbottom =getcolor($('btm1'));

}