var vwmask,vlmask, vwright, vwmid, vwidthcol1, vwleft,  vleftcol1,vwidthcol2,vleftcol2, vwidthcol3,vleftcol3;
var bgclhead,bgclmask,bgclmid,bgclleft,bgclcol1,bgclcol2,bgclcol3, bgclfoot, bgclbottom;
var ve = 1;
function calValues() {

vwmask = parseFloat(document.getElementById("vd1").innerHTML);
vlmask = (100 - vwmask) /2;
vwright = parseFloat(document.getElementById("vd2").innerHTML);
vwmid = parseFloat(document.getElementById("vd3").innerHTML);
vwleft = 100 - vwright - vwmid;

if (document.getElementById("sidegap")) {ve = parseFloat(document.getElementById("sidegap").options[document.getElementById("sidegap").selectedIndex].text)/2;}

//if ((document.getElementById("r1")) && (document.getElementById("r1").checked)) {
//vwidthcol2 = (vw2 - 3/2*ve < 0) ? 0 : vw2 - 3/2*ve;
//vleftcol2 = vleftcol1 - vwidthcol1 - vw2 - ve/2;
//vwidthcol5 = (vwright5 - ve*3/2 < 0) ? 0 : vwright5 - ve*3/2;

//} 
//else {
//vwidthcol2 = (vw2 - ve < 0) ? 0 : vw2 - ve;
//vleftcol2 = vleftcol1 - vwidthcol1 - vw2 - ve;
//vwidthcol5 = (vwright5 - ve < 0) ? 0 : vwright5 - ve;

//}



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

if ((document.getElementById("r1")) && (document.getElementById("r2").checked)) {
vwidthcol2 = (vwleft - ve<0) ? 0 : vwleft - ve;
vleftcol2 = vleftcol1- vwidthcol1- vwleft - ve;
vwidthcol3 = (vwright -ve<0) ? 0 : vwright -ve;
vleftcol3 = vleftcol2 + vwidthcol1 + 4*ve;
} 
else {
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;
}

document.getElementById("mask1").style.width = vwmask +"%";
document.getElementById("mask1").style.left = vlmask +"%";
document.getElementById("hd1").style.width = vwmask +"%";
document.getElementById("hd1").style.left = vlmask +"%";
document.getElementById("ft1").style.width = vwmask +"%";
document.getElementById("ft1").style.left = vlmask +"%";
document.getElementById("mid1").style.right = vwright + "%";
document.getElementById("left1").style.right = vwmid + "%";
document.getElementById("col11").style.width = vwidthcol1 + "%";
document.getElementById("col11").style.left = vleftcol1 + "%";
document.getElementById("col22").style.width = vwidthcol2 + "%";
document.getElementById("col22").style.left = vleftcol2 + "%";
document.getElementById("col33").style.width = vwidthcol3 + "%";
document.getElementById("col33").style.left = vleftcol3 + "%";
if (isload==true) {
setbgcolor();}
writetotxtarea ();

}

var csscode,csscodecomp, csscodecomp1;
var nt = 0;
function anotherclassname() {
if (vwmask==null) return;
nt = parseFloat(nt) + 1;
writetotxtarea();
}
function writetotxtarea () {
var tmpcode;
if (nt==0) {ns="";} else {ns=nt;}
tmpcode =  ".header" + ns + "{" + "\n"
            + "   width: " + vwmask +"%;" + "\n"
            + "   left: " + vlmask +"%" + "\n"
            + "}" + "\n"
		    + ".colmask"+ ns + "{" + "\n"
		    + "   width: " + vwmask +"%;" + "\n"
		    + "   left: " + vlmask +"%" + "\n"
	  	    + "}" + "\n"
            + ".colmid" + ns + "{ right: " + vwright +"% }" + "\n"
            + ".colleft" + ns + "{ right: " +  vwmid + "% }"  + "\n"
            + ".col1" + ns + "{" + "\n"
            + "   width: " +  vwidthcol1 + "%;" + "\n"
            + "   left: " +  vleftcol1 +"%" + "\n"
            + "}"  + "\n"
            + ".col2" + ns + "{" + "\n"
            + "   width: " +  vwidthcol2 +"%;" + "\n"
            + "   left: " +  vleftcol2 +"%" + "\n"
            + "}"  + "\n"
            + ".col3" + ns + "{" + "\n"
            + "   width: " +  vwidthcol3 +"%;" + "\n"
            + "   left: " +  vleftcol3 +"%" + "\n"
            + "}"  + "\n"
            + ".footer" + ns + "{" + "\n"
            + "   width: " + vwmask +"%;" + "\n"
            + "   left: " + vlmask +"%" + "\n"
            + "}" + "\n"
            + ".header" + ns + "{" + "\n"
            + "   clear: both;" + "\n"
            + "   float: left;" + "\n"
            + "   position: relative;" + "\n"
            + "   border-bottom: #000 1px solid;" + "\n"
            + "   background-color: " + bgclhead + "\n"
            + "}" + "\n"											
			+ ".colmask" + ns + "{"+ "\n"
			+ "   clear: both;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   overflow: hidden;"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   background-color: " + bgclmask + "\n"
			+ "}" + "\n"
			+ ".colmid" + ns + "{"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   width: 100%;"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   background-color: " + bgclmid+ "\n"
			+ "}" + "\n"
			+ ".colleft" + ns + "{"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   width: 100%;"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   background-color: " + bgclleft + "\n"
			+ "}" + "\n"
			+ ".col1" + ns + "{" + "\n"
			+ "   padding: 0px 0px 1em 0px;"+ "\n"
			+ "   overflow: hidden;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   background-color: " + bgclcol1 + "\n"
			+ "}" + "\n"
			+ ".col2" + ns + "{" + "\n"
			+ "   padding: 0px 0px 1em 0px;"+ "\n"
			+ "   overflow: hidden;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   background-color: " + bgclcol2 + "\n"
			+ "}" + "\n"
			+ ".col3" + ns + "{" + "\n"
			+ "   padding: 0px 0px 1em 0px;"+ "\n"
			+ "   overflow: hidden;"+ "\n"
			+ "   float: left;"+ "\n"
			+ "   position: relative;"+ "\n"
			+ "   background-color: " + bgclcol3 + "\n"
			+ "}" + "\n"
			+ ".footer" + ns + "{" + "\n"
			+ "   clear: both;" + "\n"
			+ "   float: left;" + "\n"
			+ "   position: relative;" + "\n"
			+ "   border-bottom: #000 1px solid;" + "\n"
			+ "   background-color: " + bgclfoot  + "\n"
			+ "}"  + "\n"
			+ ".bottom" + ns + "{" + "\n"
			+ "   clear: both;" + "\n"
			+ "   width: 100%;"+ "\n"
			+ "   float: left;" + "\n"
			+ "   position: relative;" + "\n"
			+ "   background-color: " + bgclbottom  + "\n"
			+ "}"  + "\n"
			+ "body {" + "\n"
			+ "   border-width: 0px;"+ "\n"
			+ "   padding: 0px;" + "\n"
			+ "   margin: 0px;" + "\n"
			+ "   font-size: 90%;" + "\n"
			+ "   width: 100%;" + "\n"
			+ "   min-width: 600px;" + "\n"
			+ "}"  + "\n";
			
csscode = "<style type='text/css'>" + "\n"	+ tmpcode + "</style>";										
document.getElementById("textarea_1").value = csscode;   
                                          											
}

function writecompact() {

document.getElementById("textarea_1").value =csscodecomp;
}

function writecompact() {
var u =document.getElementById("textarea_1").value;
if (u!= null) {
document.getElementById("textarea_1").value =doit(u);}
}

function doit(ins){var rd=ins.indexOf("<");if(rd>-1){var rx=ins.indexOf(">");var hd=ins.slice(rd+1,rx);ins=ins.slice(rx+1,ins.length);rd=ins.indexOf("<");rx=ins.indexOf(">");var ft=ins.slice(rd+1,rx+1);ins=ins.slice(0,rd);}ins=ins.replace(/^\s+/,"");ins=ins.replace(/\n+/g,"");
ins = ins.replace(/\/\*.*\*\//g, "");
ins=ins.replace(/\s+;/g,";");ins=ins.replace(/;\s+/g,";");ins=ins.replace(/:\s+/g,":");ins=ins.replace(/\{\s+/g,"{");ins=ins.replace(/\s+\{/g,"{");ins=ins.replace(/\}\s+/g,"}");ins=ins.replace(/\s+\}/g,"}");ins=ins.replace(/;+\}/g,"}");var ss=ins.split("}");var n=ss.length;var i,j;var sss=new Array(n);var vvv=new Array(n);for(i=0;i<=n-1;i++){sss[i]=ss[i].slice(0,ss[i].indexOf("{"));}for(i=0;i<=n-1;i++){vvv[i]=ss[i].slice(ss[i].indexOf("{")+1,ss[i].length);}for(i=0;i<=n-1;i++){for(j=0;j<=n-1;j++){if(i!=j){if(sss[j]==sss[i]){sss[j]="";vvv[i]=vvv[i]+";"+vvv[j];vvv[j]="";}}}if(sss[i]!=""){sss[i]=sss[i]+"{"+vvv[i]+"}";}}var t=sss.join("");if(hd){t="<"+hd+">"+t+"<"+ft;}return t;}


var dragObject =null;
var colorbar =null;
var dragwidth =null;
var barcolor =null;
var pointcolor =null;
var dragok = false;
var y,x,d,dy,dx;

document.onmousedown = down;
document.onmouseup = up;
function move(e){
e = (e) ? e : ((window.event) ? window.event : "");

if ((d.id=='cfs') || (d.id=='edpan') || (d.id=='edpan2') ) {
d.style.left = dx + e.clientX - x + "px";
d.style.top  = dy + e.clientY - y + "px";
}
else {
var x_x;
x_x = dx + e.clientX - x; 
if (x_x>300) {
	x_x = 300;
} else
if (x_x<0) {
	x_x = 1;d.style.left = x_x + "px";
} 
d.style.left = x_x + "px";


 // document.getElementById(colorbar).innerHTML ="."; is for firefox show style
document.getElementById(colorbar).innerHTML =".";
document.getElementById(colorbar).style.width= x_x + "px";
document.getElementById(colorbar).style.backgroundColor =barcolor;
//document.getElementById(dragObject).style.backgroundColor =barcolor;
document.getElementById(dragwidth).innerHTML =parseInt((x_x/300)*100) + "%";

calValues();}
return false; 
 
}

function down(e){
e = (e) ? e : ((window.event) ? window.event : "");
var temp = getTargetElement(e); 
if ((temp.id == dragObject) || (temp.id=='cfs') || (temp.id=='edpan') || (temp.id=='edpan2') ){
 
d = temp;
dx = parseInt(temp.style.left+0);
dy = parseInt(temp.style.top+0);
x = e.clientX;
y = e.clientY;

//if (dragObject) {document.getElementById(dragObject).style.backgroundColor="#666999";}

document.onmousemove = move;
return false;
 }
}

function up(){
//if (dragObject != null) {
//document.getElementById(dragObject).style.backgroundColor="blue";}
document.onmousemove = null;
dragObject =null;
colorbar =null;
dragwidth =null;
barcolor=null;
}

function getTargetElement(evt) {
    var elem = (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
    return elem;
}

function ibot() {
var oDL=document.createElement("div");
oDL.style.fontWeight='bold';
oDL.style.fontFamily='arial';
oDL.style.padding='3';
oDL.style.cursor='default'
oDL.style.fontSize='11px';
oDL.style.color='#4B7A98';
oDL.onclick = btnfull;
var txt = document.createTextNode("Cancel Full Screen");
oDL.appendChild(txt); 
return oDL;
}
function obot() {
if (document.getElementById("cfs")) {
document.getElementById("cfs").style.visibility ='visible';
return;}
else {
var oDL=document.createElement("div");
oDL.id='cfs';
oDL.style.width='112px';
oDL.style.fontFamily='arial';
oDL.style.border='1px solid #A5CFE9';
oDL.style.padding='1';
oDL.style.position='absolute';
oDL.style.cursor='move'
oDL.style.left='2 px';
oDL.style.top='2 px';
oDL.style.fontSize='11px';
oDL.style.color='#4B7A98';
oDL.style.background='#D5EBF9';
oDL.style.filter='alpha(opacity=85)'; // IE
oDL.style.opacity='0.85'; // FF
oDL.appendChild(ibot()); 
document.body.appendChild(oDL);}
}

function btnfull() {
document.getElementById("btm1").style.position="relative";
document.getElementById("cfs").style.visibility ='hidden';

}

function fullscreen() {
document.getElementById("btm1").style.position="absolute";
obot();
}
    
function socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
}
  
  var actid="selslider";
   var isclicked =null;
        function menuEvent (evt) {
   evt = (evt) ? evt : ((window.event) ? window.event : "")
	if (evt) {
	    var elem = getTargetElement(evt);
	    //elem.className = (evt.type == "mouseout") ? "cco" : "cmo"
		if (evt.type == "mouseout") {		
		    if (elem.id != actid) {
		    elem.className ="cco";
		    }
		    else if ((elem.id == actid) && (isclicked== 1)) {		   
		    elem.className ="cmc";		   
		    }
		    isclicked =null;
		}
		else if (evt.type == "click") {		    
		    var ele;
		    for (var i=0;i<menuitem.length;i++) {
		        ele = menuitem[i];
		        if ((document.getElementById(ele).className == "cmc") && (elem.id != ele)) {
		        document.getElementById(ele).className ="cco";
		        }
		    }
		    //alert("elem.id = " +elem.id + "\n" + "isdone = " + isdone+"\n")
		    if ((elem.id == "selcolor") && ( isdone =="yes")) {
		       if (isload==false) {
				var oBl=document.createElement("div");
				oBl.id = "ldg";
				oBl.className="lgng";
				var tT = document.createTextNode("loading...");
				oBl.appendChild(tT);
				oBl.style.visibility = "visible";
				document.getElementById("hdd").appendChild(oBl);
            
		        loadjs(); 
		        } else {		        
		        movee();}
		        hidegap();
		        		        
		    }
		    else if ((elem.id == "selslider") && ( isdone =="yes")) {
		         if (document.getElementById("edpan")) {
		         out();}
		         
		         hidegap();
		         document.getElementById("slipan").style.visibility="visible";
		        
		    }
		    else if ((elem.id == "selgap") && ( isdone =="yes")) {
		    
		      if (document.getElementById("edpan")) {
		      out();
		      //document.getElementById("edpan").style.visibility="hidden"; ;
		      }
		        
		      showgap();		    
		      document.getElementById("slipan").style.visibility="hidden";  
		       
		    }
		    		    
		    actid =elem.id;
		    isclicked = 1;		  		    
		    elem.className ="cmc";
		}
	    else if ((evt.type == "mouseover") && (elem.id != actid)) {
	        elem.className ="cmo";
	    }
	 }
   
   }
  
  
var isgap=false;  
function hidegap() {
if (document.getElementById("edpan2")) {document.getElementById("edpan2").style.visibility="hidden";}
isgap=false;
}
  
function showgap() {

if (document.getElementById("edpan2")) {
document.getElementById("edpan2").style.visibility="visible";
} else {
document.body.appendChild(obgap());
}
isgap=true;
}

function obgap() {

var oDL=document.createElement("div");
oDL.id="edpan2";
oDL.style.top="250px";
oDL.className="edpanc2";
oDL.style.cursor='move';
oDL.appendChild(ogap());
return oDL;
}


function ogap() {

var o=document.createElement("div");
o.className="edpanc";
var txt = document.createTextNode("side gaps?      Yes ");
o.appendChild(txt);
o.appendChild(createRadio("wgap","r1", "checked"));
var txt = document.createTextNode("   No ");
o.appendChild(txt);
o.appendChild(createRadio("wgap","r2", ""));
o.appendChild(document.createElement('br'));
o.appendChild(document.createElement('br'));

var txt = document.createTextNode("gap width          ");
o.appendChild(txt);
o.appendChild(createSelect());

return o;
}


function createSelect(){

var s = document.createElement("select"); 
s.id = "sidegap"; 
s.size =0; 
s.length=1;
       
s.appendChild(createOption("0%"));
s.appendChild(createOption("1%"));
s.appendChild(createOption("2%"));
s.appendChild(createOption("3%"));
s.appendChild(createOption("4%"));         
s.selectedIndex=3; 
s.onchange = function () {
calValues();};           
return s;
}

function createOption(i) {
var it = document.createElement('option'); 
it.appendChild(document.createTextNode(i));
return it;

}

function createRadio(nm,idd, check) {
var o;
if (document.all) {
o = document.createElement('<input type="radio" onclick="calValues()" name="' +nm+'" '+check+' id="'+idd+'">');}
else {
o = document.createElement("input");
o.checked = check;
o.type = "radio";
o.id =idd;
o.onclick = function () {
calValues();};
o.name = nm;
}
return o;
}
  var isload=false;
  function loadjs(){
  if (isload==false) {    
      var fl ="script/color.js"	
      var rf=document.createElement('script')
      rf.setAttribute("language","javascript")
      rf.setAttribute("type","text/javascript")
      rf.setAttribute("src", fl)
      if (typeof rf!="undefined") {	       
		 document.getElementsByTagName("head")[0].appendChild(rf);    	
	    } 	   
	   isload=true;
     }
  }
  
var spot;
var isdone ="yes";
var menuitem = new Array;

function init() {
    var elem = document.getElementsByTagName("div");
    var ele = document.getElementsByTagName("span");
    var j=0;
    for(var i=0; i<ele.length; i++){
        if (ele[i].id.indexOf("sel") != -1) {
            ele[i].onclick = menuEvent;
            ele[i].onmouseover = menuEvent;
            ele[i].onmouseout = menuEvent;	
            menuitem[j] = ele[i].id;
            j = j+1;
         }
   }
		 
            bgclhead = "#b4d2f7";
            bgclmask = "#b4d2f7";
            bgclmid = "#b4d2f7";
            bgclleft = "#b4d2f7";
            bgclcol1 = "#99ccff";
            bgclcol2 = "#99ccff";
            bgclcol3 = "#99ccff";
            bgclfoot = "#b4d2f7";
            bgclbottom ="#cdeb8b";
 }
   

function makeDraggable(item,clr,vd,wd,clrvl,maxid){
	if(!item) return;
	
	document.getElementById(clr).innerHTML =".";
    document.getElementById(clr).style.width= parseInt(wd/100*300) + "px";
    document.getElementById(clr).style.backgroundColor = clrvl;
    document.getElementById(item).style.left= parseInt(wd/100*300) + "px";
    document.getElementById(vd).innerHTML =wd +"%";
    document.getElementById(maxid).innerHTML = 100 +"%";
	document.getElementById(item).style.backgroundColor = clrvl;
	document.getElementById(item).onmousedown = function(ev){
		dragObject  = item;
		colorbar = clr;
		dragwidth =vd;
		barcolor=clrvl;
	
		return false;
	}
}

function start(){
makeDraggable("point1","clr1","vd1",100,"#ff666C","mx1");
makeDraggable("point2","clr2","vd2",21,"#4DC65D","mx2");
makeDraggable("point3","clr3","vd3",60,"#EADB0E","mx3");
//makeDraggable("point4","clr4","vd4",58,"#99ccff","mx4");
 init();
}

window.onload = function(){
start();
}