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

vwmask = parseFloat(document.getElementById("vd1").innerHTML);
vlmask = (100 - vwmask) /2;
vleftcol1 = 100 + ve;
vwidthcol2 = vwleft - 2*ve;
if (vwidthcol2<0) {vwidthcol2 =0;}

vleftcol2 = vleftcol1- vwidthcol1- vwleft;
vwidthcol3 = vwright -2*ve;
if (vwidthcol3<0) {vwidthcol3=0;}

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"
			+ "   boder-width: 0px;"+ "\n"
			+ "   padding: 0px;" + "\n"
			+ "   margin: 0px;" + "\n"
			+ "   font-size: 90%;" + "\n"
			+ "   width: 100%;" + "\n"
			+ "   min-width: 600px;" + "\n"
			+ "}"  + "\n";
var htmlhead = '<?xml version="1.0" encoding="UTF-8" ?>'  + '\n'
              + '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'  + '\n'
              + '<html expr:dir="data:blog.languageDirection" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">' + '\n'
			  + '<head>'  + '\n'
			  + '<title>undefined</title>'  + '\n'
			  + ' <b:skin><![CDATA['  + '\n'
			  + tmpcode 			  
			  + ']]></b:skin>'  + '\n'
			  + '</head>'
var divcode = '<body>' + '\n'
            + '<div class="bottom">' + '\n'
            + '<div class="header">' + '\n'
	        + 'head <br />' + '\n'
            + '</div>' + '\n'
            + '<div class="colmask">' + '\n'
        + '<div class="colmid">' + '\n'
          +   '<div class="colleft">' + '\n'
            +     '<div class="col1">' + '\n'
              +         'middle' + '\n'
                + '</div>' + '\n'
                + '<div class="col2">' + '\n'
                  +     'left' + '\n'
                + '</div>' + '\n'
                + '<div class="col3">' + '\n'
                 +  '    right' + '\n'
                + '</div>' + '\n'
            + '</div>' + '\n'
       +  '</div>' + '\n'
    + '</div>' + '\n'
    + '<div class="footer">' + '\n'
	+    ' footer <br />' + '\n'
   +  '</div>' + '\n'
+ '</div>' + '\n'
+ '</body>'
+ '</html>'			  
csscode = htmlhead + divcode;
//bgclhead,bgclmask,bgclmid,bgclleft,bgclcol1,bgclcol2,bgclcol3, bgclfoot;
csscodecomp = "<style type='text/css'>"
            + ".header" + ns + "{width:" + vwmask +"%;left:" + vlmask +"%;clear:both;float:left;position:relative;border-bottom:#000 1px solid;background-color:"+bgclhead+"}" 
			+ ".colmask" + ns + "{width:" + vwmask +"%;left:" + vlmask +"%;clear:both;float:left;overflow:hidden;position:relative;background-color:"+bgclmask+"}" 
            + ".colmid" + ns + "{right:"+ vwright +"%;float:left;width:100%;position:relative;background-color:"+bgclmid+"}" 
            + ".colleft" + ns + "{right:" +  vwmid + "%;float:left;width:100%;position:relative;background-color:"+bgclleft+"}"  
            + ".col1" + ns + "{width:" +  vwidthcol1 + "%;left:" +  vleftcol1 +"%;padding:0px 0px 1em 0px;float:left;overflow:hidden;position:relative;background-color:"+bgclcol1+"}"  
            + ".col2" + ns + "{width:" +  vwidthcol2 +"%;left:" +  vleftcol2 +"%;padding:0px 0px 1em 0px;float:left;overflow:hidden;position:relative;background-color:"+bgclcol2+"}"  
            + ".col3" + ns + "{width:" +  vwidthcol3 +"%;left:" +  vleftcol3 +"%;padding:0px 0px 1em 0px;float:left;overflow:hidden;position:relative;background-color:"+bgclcol3+"}"  
            + ".footer" + ns + "{width:" + vwmask +"%;left: " + vlmask +"%;clear:both;float:left;position:relative;border-bottom:#000 1px solid;background-color:"+bgclfoot+"}" 
			+ ".bottom" + ns + "{width:100%;clear:both;float:left;position:relative;background-color: " + bgclbottom + "}" 
			+ "body {border-width:0px;padding:0px;font-size:90%;margin:0px;width:100%;min-width:600px;}"
			+ "</style>";
	//dit = dit.replace(/\+/g, ' '); / +/g|
										
var re =/\n+/g;
tmpcode = tmpcode.replace(re,"");
re = / +/g;
tmpcode = tmpcode.replace(re,"");
csscodecomp1 ="<style type='text/css'>" + tmpcode + "</style>"; 
document.getElementById("textarea_1").value = csscode;                                            											
}

function writecompact() {
//setbgcolor();
document.getElementById("textarea_1").value =csscodecomp;
}

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

document.onmousedown = down;
document.onmouseup = up;
function move(e){
if (!e) e = window.event;
 if (dragok){
 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(dragwidth).innerHTML =parseInt((x_x/300)*100) + "%";
 
vwright = parseFloat(document.getElementById("vd2").innerHTML);
vwmid = parseFloat(document.getElementById("vd3").innerHTML);
vwidthcol1 = parseFloat(document.getElementById("vd4").innerHTML);


vwleft = 100 - vwright - vwmid;
if (vwleft<0) {vwleft=0;}

ve = (vwmid - vwidthcol1)/2;
if (ve<0) {ve=0;}

//document.getElementById("dragid").innerHTML = dragObject;
if (dragObject=="point2") {

if (vwleft<2*ve+1) {
vwleft=2*ve+1;
vwright=100-vwleft-vwmid;
document.getElementById("vd2").innerHTML = vwright+"%";
d.style.left = vwright/100*300 + "px";
document.getElementById(colorbar).style.width= vwright/100*300 + "px";
}

if (vwright<2*ve+1) {
vwright =2*ve+1;
document.getElementById("vd2").innerHTML = vwright+"%";
d.style.left = vwright/100*300 + "px";
document.getElementById(colorbar).style.width= vwright/100*300 + "px";
vwleft = 100 - vwright - vwmid;
}
}

if (dragObject=="point3") {
if (ve<0.5) {
ve =0.5;
vwmid = 2*0.5 + vwidthcol1;
vwleft = 100 - vwright - vwmid;
document.getElementById("vd3").innerHTML = vwmid+"%";
d.style.left = vwmid/100*300 + "px";
document.getElementById(colorbar).style.width= vwmid/100*300 + "px";
}

if (ve>3) {
ve =3;
vwmid = 2*3 + vwidthcol1;
vwleft = 100 - vwright - vwmid;
document.getElementById("vd3").innerHTML = vwmid+"%";
d.style.left = vwmid/100*300 + "px";
document.getElementById(colorbar).style.width= vwmid/100*300 + "px";
}
}

if (dragObject=="point4") {
if (ve<0.5) {
ve =0.5;
vwidthcol1 = vwmid - 2*ve;
document.getElementById("vd4").innerHTML = vwidthcol1+"%";
d.style.left = vwidthcol1/100*300 + "px";
document.getElementById(colorbar).style.width= vwidthcol1/100*300 + "px";
}

if (ve>3) {
ve =3;
vwidthcol1 = vwmid - 2*ve;
document.getElementById("vd4").innerHTML = vwidthcol1+"%";
d.style.left = vwidthcol1/100*300 + "px";
document.getElementById(colorbar).style.width= vwidthcol1/100*300 + "px";

}

}
//document.getElementById("wleft").innerHTML = vwleft;
//document.getElementById("e").innerHTML = ve;

 calValues();
  return false; 
 }
}

function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.id != dragObject){
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
 }
if (temp.id == dragObject){
 if (window.opera){
  document.getElementById("Q").focus();
 }
 dragok = true;
 temp.style.zIndex = n++;
 d = temp;
 dx = parseInt(temp.style.left+0);
 dy = parseInt(temp.style.top+0);
 x = e.clientX;
 y = e.clientY;
 document.getElementById(dragObject).style.backgroundColor="#666999";

 document.onmousemove = move;

 return false;
 }
}

function up(){
if (dragObject != null) {
document.getElementById(dragObject).style.backgroundColor="blue";}

//dragok = false;
document.onmousemove = null;
dragObject =null;
colorbar =null;
dragwidth =null;
barcolor=null;
}

      function getTargetElement(evt) {
	    var elem
	    if (evt.target) {

		    elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target

	    } else {
		    elem = evt.srcElement

	    }
	    return elem

    }
    
   
  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();}
		    }
		    else if ((elem.id == "selslider") && ( isdone =="yes")) {
		         out();
		         //if (document.getElementById("edpan")) {
		         //alert("dsds");
		        // }
		         //document.getElementById("edpan").visibility = true;
		    }
		    actid =elem.id;
		    isclicked = 1;		  		    
		    elem.className ="cmc";
		}
	    else if ((evt.type == "mouseover") && (elem.id != actid)) {
	        elem.className ="cmo";
	    }
	 }
   
   }
  
  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 ="#0099cc";
 
    }
   

function makeDraggable(item,clr,vd,wd,clrvl,maxid){
	if(!item) return;
	/*item - id name of the layer of drage point, 
	 clr - id of colorbar, 
	 vd - poistion value of drag point,
	 wd - start point of drager point, 
	 clrvl - color of colorbar
	 maxid - id of the layer display max width
	 maxvalue - max width value
	  */
	 
	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).onmousedown = function(ev){
		dragObject  = item;
		colorbar = clr;
		dragwidth =vd;
		barcolor=clrvl;
	
		return false;
	}
}

window.onload = function(){
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();
}