rlm@46: /*
rlm@46:  * Ext JS Library 2.1
rlm@46:  * Copyright(c) 2006-2008, Ext JS, LLC.
rlm@46:  * licensing@extjs.com
rlm@46:  * 
rlm@46:  * http://extjs.com/license
rlm@46:  */ 
rlm@46: Ext.BLANK_IMAGE_URL = 'theme/images/default/s.gif';
rlm@46: var mefillColor = {r:255,g:0,b:0,hex:'#ff0000',visible:'visible',color:'#ff0000',opacity:'1',gradient:'no'};
rlm@46: var mestrokeColor = {r:0,g:0,b:255,hex:'#000000',visible:'visible',color:'#ff0000',width:'1',opacity:'1',gradient:'no'};
rlm@46:  
rlm@46: var fillhex="#ff0000";  
rlm@46: var squarecont=0;
rlm@46: var squarerows=6;
rlm@46: var squarecols=6;  
rlm@46: var squarelist=new Array(squarerows);  
rlm@46: var filldraw=true;
rlm@46: var strokedraw=true;
rlm@46: var mode_render_fill=2;
rlm@46: var mode_render_stroke=2;
rlm@46: 
rlm@46: var prevselect_fill='no-fill-gradient';
rlm@46: var prevselect_stroke='no-stroke-gradient'; 
rlm@46: 
rlm@46: for (i = 0; i < squarerows; i++)
rlm@46:  {
rlm@46:      squarelist[i]=new Array(squarecols);
rlm@46:  }
rlm@46: 
rlm@46: function rgb2hex(r,g,b){                
rlm@46:  var rh= toHex(r);
rlm@46:  var gh= toHex(g);
rlm@46:  var bh= toHex(b);  
rlm@46:  return '#'+rh + '' + gh + '' + bh;
rlm@46: // document.getElementById('inputfillhex').value=fillhex;
rlm@46:  //parent.c.editCommand('mefillcolor', color);
rlm@46: }
rlm@46:  
rlm@46: function hex2rgb(hex)
rlm@46:    {
rlm@46:      var regexp = new RegExp('^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$');
rlm@46:      var match = hex.toLowerCase().match(regexp);
rlm@46:   
rlm@46:       if (match)
rlm@46:       {
rlm@46:           var rgb = new Array(parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16));
rlm@46:           return(rgb);
rlm@46:       }
rlm@46:       else
rlm@46:       {
rlm@46:           var rgb = new Array(0,0,0);
rlm@46:           return(rgb);
rlm@46:       }
rlm@46:   }
rlm@46:   
rlm@46: function toHex(color){
rlm@46: 	color=parseInt(color).toString(16);
rlm@46: 	return color.length<2?"0"+color:color;
rlm@46: } 
rlm@46: 
rlm@46: function squareDump(r,g,b,container) {  
rlm@46:  squareArray(r,g,b);
rlm@46:  for (i = 0; i < squarerows; i++)
rlm@46:    {
rlm@46:   for (j = 0; j < squarecols; j++) 
rlm@46:    { 
rlm@46:         document.getElementById(container+i+'_'+j).style.backgroundColor = squarelist[i][j];
rlm@46:    } 
rlm@46:    squarecont++;            
rlm@46:  }              
rlm@46:  squarecont=0;
rlm@46: } 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: function squareArray(r,g,b) {     
rlm@46:  
rlm@46:   var l00_05=ccnp(r,g,b,0,0,0,(squarerows+0));
rlm@46:  var color00_05=l00_05.split("_"); 
rlm@46:  
rlm@46:  var l05_55=ccnp(255,255,255,255-r,255-g,255-b,(squarerows+0));
rlm@46:  var color05_55=l05_55.split("_"); 
rlm@46: 
rlm@46:  var cols0, cols5, rowy;
rlm@46:  var cad='';
rlm@46:  for(var i=0;i<squarerows;i++){
rlm@46:         cols0=color00_05[i].split(",");
rlm@46:         cols5=color05_55[i].split(",");
rlm@46:         //for(var j=0;j<squarecols;j++){
rlm@46:         rowy=ccnprmtrc(parseInt(cols0[0]),parseInt(cols0[1]),parseInt(cols0[2]),parseInt(cols5[0]),parseInt(cols5[1]),parseInt(cols5[2]),squarecols+0);
rlm@46:         squarelist[i]=rowy.split("_");
rlm@46:         cad+=squarelist[i].join("  ");
rlm@46:         //}        
rlm@46:  }
rlm@46: 
rlm@46: //alert(l00_60);  
rlm@46: //document.getElementById('texta').value=cad;
rlm@46: }
rlm@46: function ccnp(a,b,c,d,e,f,nPartes){
rlm@46: 	var q=0
rlm@46: 	 var crdnds='';
rlm@46: 	 var h = 1 / (nPartes);
rlm@46: 	 var k = (1 - q)* a +  q * d;
rlm@46: 	 var l = (1 - q)* b +  q * e;
rlm@46: 	 var m = (1 - q)* c + q * f;
rlm@46: 	// crdnds += k +" "+ l +" "+ m +", "+ R;
rlm@46:       for (var i=0; i<=(nPartes) ;i++)
rlm@46:        { 
rlm@46: 	 k = (1 - q)* a +  q * d;
rlm@46: 	 l = (1 - q)* b +  q * e;
rlm@46: 	 m = (1 - q)* c +  q * f;
rlm@46: 	q = q + h;
rlm@46: 	if(i==(nPartes)){
rlm@46: 	   crdnds+=''+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +"" ;
rlm@46: 	 }else{
rlm@46:   	   crdnds+=''+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +"_";
rlm@46: 
rlm@46: 	 }   
rlm@46:        }  
rlm@46: 	return  crdnds;
rlm@46: }
rlm@46: function ccnprmtrc(a,b,c,d,e,f,nPartes){
rlm@46: 	var q=0
rlm@46: 	 var crdnds='';
rlm@46: 	 var h = 1 / (nPartes);
rlm@46: 	 var k = (1 - q)* a +  q * d;
rlm@46: 	 var l = (1 - q)* b +  q * e;
rlm@46: 	 var m = (1 - q)* c + q * f;
rlm@46: 	// crdnds += k +" "+ l +" "+ m +", "+ R;
rlm@46:       for (var i=0; i<=(nPartes) ;i++)
rlm@46:        { 
rlm@46: 	 k = (1 - q)* a +  q * d;
rlm@46: 	 l = (1 - q)* b +  q * e;
rlm@46: 	 m = (1 - q)* c +  q * f;
rlm@46: 	q = q + h;
rlm@46: 	if(i==(nPartes)){
rlm@46: 	   crdnds+='rgb('+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +")" ;
rlm@46: 	 }else{
rlm@46:   	   crdnds+='rgb('+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +")_";
rlm@46: 
rlm@46: 	 }   
rlm@46:        }  
rlm@46: 	return  crdnds;
rlm@46: } 
rlm@46: 
rlm@46: 
rlm@46: /**
rlm@46:  * Converts an HSL color value to RGB. Conversion formula adapted from
rlm@46:  * http://en.wikipedia.org/wiki/HSL_color_space. Assumes h, s, and l are
rlm@46:  * contained in the set [0, 1] and returns r, g, and b in the set [0, 255].
rlm@46:  *
rlm@46:  * @param   {Number}    h       The hue
rlm@46:  * @param   {Number}    s       The saturation
rlm@46:  * @param   {Number}    l       The lightness
rlm@46:  * @return  {Array}             The RGB representation
rlm@46:  */
rlm@46: var hslToRgb = function(h, s, l){
rlm@46:     var r, g, b;
rlm@46: 
rlm@46:     if(s == 0){
rlm@46:         r = g = b = l; // achromatic
rlm@46:     }else{
rlm@46:         function hue2rgb(p, q, t){
rlm@46:             if(t < 0) t += 1;
rlm@46:             if(t > 1) t -= 1;
rlm@46:             if(t < 1/6) return p + (q - p) * 6 * t;
rlm@46:             if(t < 1/2) return q;
rlm@46:             if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
rlm@46:             return p;
rlm@46:         };
rlm@46: 
rlm@46:         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
rlm@46:         var p = 2 * l - q;
rlm@46:         r = hue2rgb(p, q, h + 1/3);
rlm@46:         g = hue2rgb(p, q, h);
rlm@46:         b = hue2rgb(p, q, h - 1/3);
rlm@46:     }
rlm@46: 
rlm@46:     return [parseInt(r * 255), parseInt(g * 255), parseInt(b * 255)];
rlm@46: };  
rlm@46: /**
rlm@46:  * Converts an RGB color value to HSL. Conversion formula adapted from
rlm@46:  * http://en.wikipedia.org/wiki/HSL_color_space. Assumes r, g, and b are
rlm@46:  * contained in the set [0, 255] and returns h, s, and l in the set [0, 1].
rlm@46:  *
rlm@46:  * @param   {Number}    r       The red color value
rlm@46:  * @param   {Number}    g       The green color value
rlm@46:  * @param   {Number}    b       The blue color value
rlm@46:  * @return  {Array}             The HSL representation
rlm@46:  */
rlm@46: var rgbToHsl = function(r, g, b){
rlm@46:     r /= 255, g /= 255, b /= 255;
rlm@46:     var max = Math.max(r, g, b), min = Math.min(r, g, b);
rlm@46:     var h, s, l = (max + min) / 2;
rlm@46: 
rlm@46:     if(max == min){
rlm@46:         h = s = 0; // achromatic
rlm@46:     }else{
rlm@46:         var d = max - min;
rlm@46:         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
rlm@46:         switch(max){
rlm@46:             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
rlm@46:             case g: h = (b - r) / d + 2; break;
rlm@46:             case b: h = (r - g) / d + 4; break;
rlm@46:         }
rlm@46:         h /= 6;
rlm@46:     }
rlm@46: 
rlm@46:     return [h, s, l];
rlm@46: };
rlm@46: function selectSquare(x,y,container){   
rlm@46:    movecolors=0;
rlm@46:   //$("#square"+x+"_"+y).css("border", "1px solid #000");
rlm@46:    //  $("#square"+x+"_"+y).mouseover(function(){
rlm@46:       
rlm@46:    // }).mouseout(function(){
rlm@46:      //  $("#square"+x+"_"+y).css("border", "0px solid #000");
rlm@46:    // });  
rlm@46:    var cadcolor=document.getElementById('square_'+container+(x)+'_'+y).style.backgroundColor
rlm@46:    //document.getElementById('texta').value=cadcolor; 
rlm@46:    var treecolors=GetString(cadcolor, '(', ')');
rlm@46:    
rlm@46:    //OPCTION? 
rlm@46:    var rgb=treecolors.split(', '); 
rlm@46:    //squareDump(rgb[0],rgb[1],rgb[2],'square_'+container);
rlm@46:    if(container=='stroke')
rlm@46:     {
rlm@46:         Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});
rlm@46:         //--document.forms.formstrokedata.mestrokecolor.value=rgb[0]+','+rgb[1]+','+rgb[2];
rlm@46:         mestrokeColor.r=rgb[0]; 
rlm@46:         mestrokeColor.g=rgb[1]; 
rlm@46:         mestrokeColor.b=rgb[2];
rlm@46:         mestrokeColor.hex=rgb2hex(rgb[0],rgb[1],rgb[2]);
rlm@46:         c.editCommand('linecolor',mestrokeColor.hex);
rlm@46:     }
rlm@46:      else
rlm@46:     {
rlm@46:          //--document.forms.formfilldata.mefillcolor.value=rgb[0]+','+rgb[1]+','+rgb[2];
rlm@46:          mefillColor.r=rgb[0]; mefillColor.g=rgb[1];mefillColor.b=rgb[2];
rlm@46:          mefillColor.hex=rgb2hex(rgb[0],rgb[1],rgb[2]);
rlm@46:          c.editCommand('fillcolor',mefillColor.hex);
rlm@46: 
rlm@46:     }
rlm@46:    Ext.get('opacity-slider-'+container).applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});
rlm@46:    Ext.get(container+'-square').applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});
rlm@46:    
rlm@46:     //document.getElementById('texta').value=rgb[0]+' '+rgb[1]+' '+rgb[2]; 
rlm@46:  /*   if(actualEdit ==1){
rlm@46:       fillMemory();    
rlm@46:     }else{
rlm@46:      strokeMemory();   
rlm@46:     }
rlm@46:         $('.slider1').SliderSetValues([[Math.round(rgb[0]*45/255),0]]);  
rlm@46:         $('.slider2').SliderSetValues([[Math.round(rgb[1]*45/255),0]]);
rlm@46:         $('.slider3').SliderSetValues([[Math.round(rgb[2]*45/255),0]]);  //-(mefillColor.b*45/255)
rlm@46:  */
rlm@46:      
rlm@46: 
rlm@46: } 
rlm@46: function setbe(num,id)
rlm@46:  { 
rlm@46:   if(num == 1)
rlm@46:    { 
rlm@46:      if(filldraw==true)
rlm@46:       {
rlm@46:        
rlm@46:         Ext.get(id).dom.src ='img/theme/images/no.gif';  
rlm@46:         filldraw=false;  
rlm@46:         //--document.forms.formfilldata.fillvisible.value='hidden';
rlm@46:          mefillColor.visible='hidden';
rlm@46:          c.editCommand('fillcolor','none');
rlm@46:        // $('#tape').show("slow"); 
rlm@46:         
rlm@46:       }
rlm@46:        else 
rlm@46:       {
rlm@46:         Ext.get(id).dom.src ='img/theme/images/ok.gif';   
rlm@46:         filldraw=true; 
rlm@46:         //--document.forms.formfilldata.fillvisible.value='visible';
rlm@46:         mefillColor.visible='visible';
rlm@46:          c.editCommand('fillcolor',mefillColor.hex);
rlm@46:        // $('#tape').hide("slow"); 
rlm@46:       }
rlm@46:    }
rlm@46: 
rlm@46:   if( num== 2)  // stroke
rlm@46:    {
rlm@46:      if(strokedraw==true)
rlm@46:       {
rlm@46:         Ext.get(id).dom.src ='img/theme/images/no.gif';     
rlm@46:         strokedraw=false; 
rlm@46:         //--document.forms.formstrokedata.strokevisible.value='hidden';
rlm@46:         mestrokeColor.visible='hidden'; 
rlm@46:         c.editCommand('linecolor','none');
rlm@46:         //$('#tape').show("slow"); 
rlm@46:       }
rlm@46:        else 
rlm@46:       {
rlm@46:         Ext.get(id).dom.src ='img/theme/images/ok.gif';   
rlm@46:         strokedraw=true; 
rlm@46:         //--document.forms.formstrokedata.strokevisible.value='visible'; 
rlm@46:         mestrokeColor.visible='visible';          
rlm@46:         c.editCommand('linecolor',mestrokeColor.hex);
rlm@46:         //$('#tape').hide("slow"); 
rlm@46:       }
rlm@46:    }
rlm@46:  }                
rlm@46:  
rlm@46: ///////////
rlm@46: 
rlm@46: function onColorChange(){
rlm@46: c.lineColor =mestrokeColor.hex;
rlm@46: c.fillColor = mefillColor.hex;
rlm@46: c.lineWidth =mestrokeColor.width;
rlm@46: c.lineOpac = mestrokeColor.opacity;
rlm@46: c.fillOpac = mefillColor.opacity;
rlm@46: if(mefillColor.visible=='hidden')
rlm@46: {
rlm@46: c.fillColor = 'none';
rlm@46: }
rlm@46: if(mestrokeColor.visible=='hidden')
rlm@46: {
rlm@46: c.lineColor = 'none';
rlm@46: }
rlm@46: return;
rlm@46: }
rlm@46:  
rlm@46: ///////////
rlm@46: 
rlm@46: function setProperties(){   
rlm@46:    
rlm@46:    Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+mefillColor.r+','+mefillColor.g+','+mefillColor.b+')'});
rlm@46:    Ext.get('fill-square').applyStyles({'background-color':'rgb('+mefillColor.r+','+mefillColor.g+','+mefillColor.b+')'});
rlm@46:    squareDump(mefillColor.r,mefillColor.g,mefillColor.b,'square_fill'); 
rlm@46:    
rlm@46:    Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});
rlm@46:    Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});
rlm@46:    Ext.get('stroke-square').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});
rlm@46:    squareDump(mestrokeColor.r,mestrokeColor.g,mestrokeColor.b,'square_stroke');  
rlm@46: 
rlm@46: }                      
rlm@46: //////////
rlm@46: 
rlm@46: 
rlm@46: function GetString(source, start, end){
rlm@46: var st = source.indexOf(start) + start.length;
rlm@46: var en = source.indexOf(end, start);
rlm@46:  return source.substring(st, en);//trimAll(source.substring(st, en));
rlm@46: }
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: var basicColors=new Array(" ",
rlm@46: "ff0000","ff8800","ffcc00",
rlm@46: "ffff00","ccff00","88ff00","00ff00","00ff88","00ffcc","00ffff",
rlm@46:  "00ccff","0088ff","0000ff","8800ff","cc00ff","ff00ff","ff00cc","ff0088"
rlm@46: ); 
rlm@46: 
rlm@46: var str=''
rlm@46: for(var a=1;a<basicColors.length;a++){
rlm@46:  str+='<span id="s'+a+'" style="background-color:'+basicColors[a]+'; width:2px;font-size:0.95em">.</span>';
rlm@46: } 
rlm@46: var str1=''
rlm@46: for(var a=basicColors.length;a>0;a--){
rlm@46:  str1+='<span id="s'+a+'" style="background-color:'+basicColors[a]+'; width:2px;font-size:8px">&nbsp;</span>';
rlm@46: } 
rlm@46: 
rlm@46: 
rlm@46:   var str2='';
rlm@46:   var contx=0;
rlm@46:   var conty=0;
rlm@46:   var unitx=8;  
rlm@46:   var unity=8;
rlm@46:   var widthsq='width: '+unitx+'px;';
rlm@46:   for (i = 0; i < squarerows; i++) 
rlm@46:    { 
rlm@46:     contx=0;
rlm@46:     for (j = 0; j < squarecols; j++) 
rlm@46:      { 
rlm@46:         str2+='<div class="colorFillSquare" id="square_fill'+i+'_'+j+'" style="'+widthsq+' left:'+contx+'px; top:'+conty+'px;" onmouseover="this.style.borderWidth=\'1px\'; this.style.zIndex=100" onmouseout="this.style.borderWidth=\'0px\';this.style.zIndex=0" onclick="selectSquare('+i+','+j+',\'fill\')"></div>';
rlm@46:         contx+=unitx;
rlm@46:      } 
rlm@46:      conty+=unity;
rlm@46:    } 
rlm@46: 
rlm@46:  
rlm@46:   var str3='';
rlm@46:   var contx=0;
rlm@46:   var conty=0;
rlm@46:   var unitx=8;  
rlm@46:   var unity=8;
rlm@46:   var widthsq='width: '+unitx+'px;';
rlm@46:   for (i = 0; i < squarerows; i++) 
rlm@46:    { 
rlm@46:     contx=0;
rlm@46:     for (j = 0; j < squarecols; j++) 
rlm@46:      { 
rlm@46:         str3+='<div class="colorStrokeSquare" id="square_stroke'+i+'_'+j+'" style="'+widthsq+' left:'+contx+'px; top:'+conty+'px;" onmouseover="this.style.borderWidth=\'1px\'; this.style.zIndex=100" onmouseout="this.style.borderWidth=\'0px\';this.style.zIndex=0" onclick="selectSquare('+i+','+j+',\'stroke\')"></div>';
rlm@46:         contx+=unitx;
rlm@46:      } 
rlm@46:      conty+=unity;
rlm@46:    } 
rlm@46: 
rlm@46: ///////////////////// 
rlm@46: 
rlm@46:    var str4='';
rlm@46:        str4+='<span id="linear-fill-gradient" class="toolboxItem" title="Linear gradient" onmouseout="select(this,0,0)" onmouseover="select(this,1,0)" onclick="select(this,2,0)"><img  src="theme/images/gradient_linear.gif"></span>&nbsp;&nbsp;';
rlm@46:        str4+='<span id="radial-fill-gradient" class="toolboxItem" title="Radial gradient" onmouseout="select(this,0,1)" onmouseover="select(this,1,1)" onclick="select(this,2,1)"><img src="theme/images/gradient_radial.gif"></span>&nbsp;&nbsp;';
rlm@46:        str4+='<span id="no-fill-gradient" class="toolboxItem" title="No gradient" onmouseout="select(this,0,2)" onmouseover="select(this,1,2)" onclick="select(this,2,2)"><img src="theme/images/gradient_no.gif"></span>';
rlm@46: 
rlm@46: /////////////////////
rlm@46: 
rlm@46:    var str5='';
rlm@46:        str5+='<span id="linear-stroke-gradient" class="toolboxItem" title="Linear gradient" onmouseout="select(this,0,0)" onmouseover="select(this,1,0)" onclick="select(this,2,0)"><img  src="theme/images/gradient_linear.gif"></span>&nbsp;&nbsp;';
rlm@46:        str5+='<span id="radial-stroke-gradient" class="toolboxItem" title="Radial gradient" onmouseout="select(this,0,1)" onmouseover="select(this,1,1)" onclick="select(this,2,1)"><img src="theme/images/gradient_radial.gif"></span>&nbsp;&nbsp;';
rlm@46:        str5+='<span id="no-stroke-gradient" class="toolboxItem" title="No gradient" onmouseout="select(this,0,2)" onmouseover="select(this,1,2)" onclick="select(this,2,2)"><img src="theme/images/gradient_no.gif"></span>';
rlm@46: 
rlm@46: /////////////////////
rlm@46: 
rlm@46:  var str6='';   //<form name="formfilldata">
rlm@46:  str6+='<input type="text" class="field" name="fillvisible" title="Fill visible" value="visible"  size="2">';
rlm@46:  str6+='<input type="text" class="field" name="fillcolor" title="Fill color"value="255,0,0" size="2">';  
rlm@46:  str6+='<input type="text" class="field" name="fillopacity" title="Fill opacity" value="100" size="2">';
rlm@46:  str6+='<input type="text" class="field" name="fillgradient" title="Fill gradient" value="no" size="2">';
rlm@46:   str6+='';
rlm@46: 
rlm@46:  var str7=''; // <form name="formstrokedata">
rlm@46:  str7+='<input type="text" class="field" title="Stroke visible" name="strokevisible" value="visible"  size="2">';
rlm@46:  str7+='<input type="text" class="field" title="Stroke color" name="strokecolor" value="0,0,0" size="2">';  
rlm@46:   str7+='<input type="text" class="field" title="Stroke width" name="strokewidth" value="1" size="2">';
rlm@46:  str7+='<input type="text" class="field" title="Stroke opacity" name="strokeopacity" value="100" size="2">';
rlm@46:    str7+='<input type="text" class="field" title="Stroke gradienr" name="strokegradient" value="no" size="2">';
rlm@46: 
rlm@46:   str7+='';
rlm@46: 
rlm@46: 
rlm@46: //ONREADY
rlm@46: 
rlm@46: Ext.onReady(function() {
rlm@46: 
rlm@46:       
rlm@46:    //  Ext.get("mefillColor").dom.innerHTML=(str);
rlm@46:    //   Ext.get("mestrokeColor").dom.innerHTML=(str1); 
rlm@46:   
rlm@46: 
rlm@46: 
rlm@46:     
rlm@46:    Ext.get("fillContainer").dom.innerHTML=(str2);      
rlm@46:    Ext.get("strokeContainer").dom.innerHTML=(str3); 
rlm@46:    //Ext.get("toolbox_fill").dom.innerHTML=(str4);
rlm@46:    //Ext.get("toolbox_stroke").dom.innerHTML=(str5); 
rlm@46:   // Ext.get("divformfill").dom.innerHTML=(str6); 
rlm@46:    //Ext.get("divformstroke").dom.innerHTML=(str7); 
rlm@46: 
rlm@46:    
rlm@46:    Ext.get('fill-square').applyStyles({'background-color':'rgb(255,0,0)'});
rlm@46:    Ext.get('stroke-square').applyStyles({'background-color':'rgb(0,0,0)'});
rlm@46:   //Ext.get('no-stroke-gradient').applyStyles({'background-position':'0 0'});  
rlm@46:   //Ext.get('no-fill-gradient').applyStyles({'background-position':'0 0'});
rlm@46:   
rlm@46:          var color=hslToRgb(0, 1, 0.5); 
rlm@46:          squareDump(color[0],color[1],color[2],'square_fill');  
rlm@46:  
rlm@46:         var color=hslToRgb(0, 0, 0); 
rlm@46:         squareDump(color[0],color[1],color[2],'square_stroke');  
rlm@46:          
rlm@46:      //console.log('The windows has been loaded','fill-square' );      
rlm@46:      new Ext.Slider({
rlm@46:         renderTo: 'slider-fill',
rlm@46:         width: 62, 
rlm@46:         height: 5,
rlm@46:         minValue: -1,
rlm@46:         maxValue: 360, 
rlm@46:         value: 10,
rlm@46:         plugins: new Ext.ux.SliderFillColor()
rlm@46:     });
rlm@46:        new Ext.Slider({
rlm@46:         renderTo: 'opacity-slider-fill',
rlm@46:         width: 55,
rlm@46:         minValue: 0,
rlm@46:         maxValue: 100,
rlm@46:         value: 100,
rlm@46:         plugins: new Ext.ux.SliderOpacityFill()
rlm@46:     });     
rlm@46:         
rlm@46:         new Ext.Slider({
rlm@46:         renderTo: 'slider-stroke',
rlm@46:         width: 62,
rlm@46:         minValue: -1,
rlm@46:         maxValue: 360,
rlm@46:         value: -1,
rlm@46:         plugins: new Ext.ux.SliderStrokeColor()
rlm@46:     });   
rlm@46:    
rlm@46:       new Ext.Slider({
rlm@46:         renderTo: 'opacity-slider-stroke',
rlm@46:         width: 57,
rlm@46:         minValue: 0,
rlm@46:         maxValue: 100,
rlm@46:         value: 100, 
rlm@46:         plugins: new Ext.ux.SliderOpacityStroke()
rlm@46:     });  
rlm@46:       new Ext.Slider({
rlm@46:         renderTo: 'width-slider-stroke',
rlm@46:         width: 57,
rlm@46:         minValue: 0,
rlm@46:         maxValue: 50, 
rlm@46:         value: 1,
rlm@46:         plugins: new Ext.ux.SliderWidth()
rlm@46:     }); 
rlm@46: 
rlm@46:    
rlm@46: }); 
rlm@46: 
rlm@46: //  end ONREADY
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: Ext.ux.SliderFillColor = Ext.extend(Ext.Tip, {
rlm@46:     minWidth: 10,
rlm@46:     offsets : [0, -10],
rlm@46:     init : function(slider){
rlm@46:         slider.on('dragstart', this.onSlide, this);
rlm@46:         slider.on('drag', this.onSlide, this);
rlm@46:         slider.on('dragend', this.hide, this);
rlm@46:         slider.on('destroy', this.destroy, this);
rlm@46:     },
rlm@46: 
rlm@46:     onSlide : function(slider){
rlm@46:         //this.show();
rlm@46:         //this.doAutoWidth();
rlm@46:         //this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 
rlm@46:          if(this.getText(slider)<0 || this.getText(slider)>359)
rlm@46:           {  
rlm@46:             var color=new Array();  
rlm@46:             color[0]='0';
rlm@46:             color[1]='0';
rlm@46:             color[2]='0'; 
rlm@46: 
rlm@46:             if(this.getText(slider)>359)
rlm@46:              { 
rlm@46:  
rlm@46:               color[0]='245';
rlm@46:               color[1]='245';
rlm@46:               color[2]='245'; 
rlm@46:              }  
rlm@46:             Ext.get('fill-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:             Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:       
rlm@46:           }
rlm@46:            else
rlm@46:           {  
rlm@46:               var color=hslToRgb((this.getText(slider)/359), 1, 0.5); 
rlm@46:              Ext.get('fill-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:              Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:              //var color=hslToRgb((this.getText(slider)/359), 1, 0.5);       
rlm@46:           }
rlm@46:        
rlm@46:          squareDump(color[0],color[1],color[2],'square_fill'); 
rlm@46:          //Ext.get("fillcolor").dom.innerHTML=(color[0]+','+color[1]+','+color[2]);
rlm@46:          //--document.forms.formfilldata.fillcolor.value=color[0]+','+color[1]+','+color[2];
rlm@46:          mefillColor.r=color[0]; mefillColor.g=color[1]; mefillColor.b=color[2];
rlm@46:          mefillColor.hex=rgb2hex(color[0],color[1],color[2]);
rlm@46:          c.editCommand('fillcolor',mefillColor.hex);
rlm@46: 
rlm@46:          //Ext.get("squareFill0_0").applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'}); 
rlm@46:        // Ext.get("squareFill0_5").applyStyles({'background-color':'rgb(255,255,255)'});
rlm@46:         //Ext.get("squareFill5_5").applyStyles({'background-color':'rgb('+Math.abs(color[0]-255)+','+Math.abs(color[1]-255)+','+Math.abs(color[2]-255)+')'});
rlm@46:           //      Ext.get("squareFill5_0").applyStyles({'background-color':'rgb(0,0,0)'});
rlm@46:         //Ext.get("text").dom.innerHTML=color[0];
rlm@46:         
rlm@46:     },
rlm@46: 
rlm@46:     getText : function(slider){ 
rlm@46:        return slider.getValue();
rlm@46:     }
rlm@46: });
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46:  
rlm@46: Ext.ux.SliderStrokeColor = Ext.extend(Ext.Tip, {
rlm@46:     minWidth: 10,
rlm@46:     offsets : [0, -10],
rlm@46:     init : function(slider){
rlm@46:         slider.on('dragstart', this.onSlide, this);
rlm@46:         slider.on('drag', this.onSlide, this);
rlm@46:         slider.on('dragend', this.hide, this);
rlm@46:         slider.on('destroy', this.destroy, this);
rlm@46:     },
rlm@46: 
rlm@46:     onSlide : function(slider){
rlm@46:         //this.show();
rlm@46:         //this.doAutoWidth();
rlm@46:         //this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
rlm@46:         if(this.getText(slider)<0 || this.getText(slider)>359)
rlm@46:           {  
rlm@46:             var color=new Array();  
rlm@46:             color[0]='0';
rlm@46:             color[1]='0';
rlm@46:             color[2]='0'; 
rlm@46: 
rlm@46:             if(this.getText(slider)>359)
rlm@46:              { 
rlm@46:  
rlm@46:               color[0]='245';
rlm@46:               color[1]='245';
rlm@46:               color[2]='245'; 
rlm@46:              }  
rlm@46:             Ext.get('stroke-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:             Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:              Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46: 
rlm@46:           }
rlm@46:            else
rlm@46:           { 
rlm@46:               var color=hslToRgb((this.getText(slider)/359), 1, 0.5); 
rlm@46:              Ext.get('stroke-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:              Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46:              Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46: 
rlm@46:              /*Ext.get('stroke-square').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46:              Ext.get('opacity-slider-stroke').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46:              var color=hslToRgb((this.getText(slider)/359), 1, 0.5);
rlm@46:              Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46:             */
rlm@46:           }
rlm@46:    
rlm@46:         
rlm@46:          
rlm@46:         //Ext.get('stroke-square').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46:         //Ext.get('opacity-slider-stroke').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46: 
rlm@46:         //var color=hslToRgb((this.getText(slider)/359), 1, 0.5); 
rlm@46:         squareDump(color[0],color[1],color[2],'square_stroke'); 
rlm@46:         //--document.forms.formstrokedata.strokecolor.value=color[0]+','+color[1]+','+color[2];
rlm@46:         mestrokeColor.r=color[0]; mestrokeColor.g=color[1]; mestrokeColor.b=color[2];
rlm@46:         mestrokeColor.hex=rgb2hex(color[0],color[1],color[2]);
rlm@46:         c.editCommand('linecolor',mestrokeColor.hex);
rlm@46:         // this.body.update(''+this.getText(slider));
rlm@46: 
rlm@46:     },
rlm@46: 
rlm@46:     getText : function(slider){ 
rlm@46:        return slider.getValue();
rlm@46:     }
rlm@46:   }); 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46:   Ext.ux.SliderOpacityFill = Ext.extend(Ext.Tip, {
rlm@46:     minWidth: 10,
rlm@46:     offsets : [0, -10],
rlm@46:     init : function(slider){
rlm@46:         slider.on('dragstart', this.onSlide, this);
rlm@46:         slider.on('drag', this.onSlide, this);
rlm@46:         slider.on('dragend', this.hide, this);
rlm@46:         slider.on('destroy', this.destroy, this);
rlm@46:     },
rlm@46: 
rlm@46:     onSlide : function(slider){
rlm@46:         this.show();
rlm@46:         this.body.update(''+this.getText(slider)+'%');
rlm@46:         this.doAutoWidth();
rlm@46:         this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 
rlm@46:         changeOpacity(this.getText(slider)/100, 'opacity-slider-fill');
rlm@46:         //--document.forms.formfilldata.fillopacity.value=this.getText(slider);
rlm@46:         mefillColor.opacity=this.getText(slider)/100;
rlm@46:         c.editCommand('fillopacity',mefillColor.opacity);
rlm@46:     },
rlm@46: 
rlm@46:     getText : function(slider){
rlm@46:         return slider.getValue();
rlm@46:     }
rlm@46:   });                                      
rlm@46:   Ext.ux.SliderOpacityStroke = Ext.extend(Ext.Tip, {
rlm@46:     minWidth: 10,
rlm@46:     offsets : [0, -10],
rlm@46:     init : function(slider){
rlm@46:         slider.on('dragstart', this.onSlide, this);
rlm@46:         slider.on('drag', this.onSlide, this);
rlm@46:         slider.on('dragend', this.hide, this);
rlm@46:         slider.on('destroy', this.destroy, this);
rlm@46:     },
rlm@46: 
rlm@46:     onSlide : function(slider){
rlm@46:         this.show();
rlm@46:         this.body.update(''+this.getText(slider)+'%');
rlm@46:         this.doAutoWidth();
rlm@46:         this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 
rlm@46:         changeOpacity(this.getText(slider)/100, 'opacity-slider-stroke');
rlm@46:         //--document.forms.formstrokedata.strokeopacity.value=this.getText(slider);
rlm@46:         mestrokeColor.opacity=this.getText(slider)/100; 
rlm@46:         c.editCommand('lineopacity',mestrokeColor.opacity);
rlm@46:     },
rlm@46: 
rlm@46:     getText : function(slider){
rlm@46:         return slider.getValue();
rlm@46:     }
rlm@46:   }); 
rlm@46: 
rlm@46:   Ext.ux.SliderWidth = Ext.extend(Ext.Tip, {
rlm@46:     minWidth: 10,
rlm@46:     offsets : [0, -10],
rlm@46:     init : function(slider){
rlm@46:         slider.on('dragstart', this.onSlide, this);
rlm@46:         slider.on('drag', this.onSlide, this);
rlm@46:         slider.on('dragend', this.hide, this);
rlm@46:         slider.on('destroy', this.destroy, this);
rlm@46:     },
rlm@46: 
rlm@46:     onSlide : function(slider){
rlm@46:         this.show();
rlm@46:         this.body.update(''+this.getText(slider)+'px');
rlm@46:         this.doAutoWidth();
rlm@46:         this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 
rlm@46:         Ext.get('width-slider-stroke-mask').applyStyles({'width':this.getText(slider)+'px'});
rlm@46:         //--document.forms.formstrokedata.strokewidth.value=this.getText(slider);
rlm@46:         mestrokeColor.width=this.getText(slider);  
rlm@46:         c.editCommand('linewidth',mestrokeColor.width);
rlm@46:     },
rlm@46: 
rlm@46:     getText : function(slider){
rlm@46:         return slider.getValue();
rlm@46:     }
rlm@46:   }); 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46:                                      
rlm@46: //===================================
rlm@46: //===================================
rlm@46: 
rlm@46: function select(select,action,type){  
rlm@46:  var id=select.id;
rlm@46:  if(type==0){var text='lineal';}   
rlm@46:  if(type==1){var text='radial';}  
rlm@46:  if(type==2){var text='no';}  
rlm@46:  // && mode_render_fill!=type
rlm@46:  if(action==0 && mode_render_fill!=type)
rlm@46:   {
rlm@46:    Ext.get(id).applyStyles({'background-position':'0 12px'});  
rlm@46:     
rlm@46: 
rlm@46:   }
rlm@46:  if(action==1 && mode_render_fill!=type)
rlm@46:   {
rlm@46:    Ext.get(id).applyStyles({'background-position':'0 0'}); 
rlm@46:    
rlm@46:   } 
rlm@46:  if(action==2)
rlm@46:   { 
rlm@46:    mode_render_fill=type; 
rlm@46:    if(id.indexOf('fill')!=-1)
rlm@46:     {
rlm@46:       Ext.get(prevselect_fill).applyStyles({'background-position':'0 12px'});
rlm@46:       prevselect_fill=id; 
rlm@46:       //--document.forms.formfilldata.fillgradient.value=text;
rlm@46:     }else{ 
rlm@46:     
rlm@46:       Ext.get(prevselect_stroke).applyStyles({'background-position':'0 12px'}); 
rlm@46:       prevselect_stroke=id;
rlm@46:       //--document.forms.formstrokedata.strokegradient.value=text;
rlm@46:     }  
rlm@46:    Ext.get(id).applyStyles({'background-position':'0 0'});
rlm@46:    
rlm@46:  
rlm@46:   }  
rlm@46: } 
rlm@46: 
rlm@46: function changeOpacity(opacity, id)
rlm@46:  {  
rlm@46:        var object = document.getElementById(id).style;  
rlm@46:        object.opacity = (opacity );
rlm@46:        object.MozOpacity = (opacity);  
rlm@46:        object.KhtmlOpacity = (opacity);  
rlm@46:        object.filter = "alpha(opacity=" + parseFloat(opacity*100) + ")";  
rlm@46:  } 
rlm@46: 
rlm@46:  //print() function will just create a window similar to the default alert function within the page.
rlm@46: //Arguments
rlm@46: // txt  - The message that appears in the box.
rlm@46: // title - The title of the box(OPTIONAL) 
rlm@46: 
rlm@46: /*
rlm@46: if(typeof console != 'object') {
rlm@46: console = {};
rlm@46: console.log = function(){return false;};
rlm@46: }                
rlm@46: 
rlm@46: 
rlm@46: /////////////////
rlm@46: var Docs = function(){
rlm@46: return {
rlm@46: init : function(){
rlm@46: var loading = Ext.get('loading');
rlm@46: var mask = Ext.get('loading-mask');
rlm@46: mask.setOpacity(.1);
rlm@46: mask.shift({
rlm@46: xy:loading.getXY(),
rlm@46: width:loading.getWidth(),
rlm@46: height:loading.getHeight(),
rlm@46: remove:true,
rlm@46: duration:1,
rlm@46: opacity:.8,
rlm@46: easing:'bounceOut',
rlm@46: callback : function(){
rlm@46: loading.fadeOut({duration:.1,remove:true});
rlm@46: }
rlm@46: });
rlm@46: }
rlm@46: };
rlm@46: }();
rlm@46: Ext.onReady(Docs.init, Docs, true);
rlm@46:  */