third_party/WebKit/LayoutTests/svg/carto.net/resources/colourPicker.js

   1 /*
   2 Scripts to create interactive colour pickers in SVG using ECMA script
   3 Copyright (C) <2006>  <Andreas Neumann>
   4 Version 1.0, 2006-10-26
   5 neumann@karto.baug.ethz.ch
   6 http://www.carto.net/
   7 http://www.carto.net/neumann/
   8
   9 Credits:
  10 * none so far
  11
  12 ----
  13
  14 Documentation: http://www.carto.net/papers/svg/gui/colourPicker/
  15
  16 ----
  17
  18 current version: 1.0
  19
  20 version history:
  21 1.0 (2006-10-26)
  22 initial version
  23
  24 -------
  25
  26
  27 This ECMA script library is free software; you can redistribute it and/or
  28 modify it under the terms of the GNU Lesser General Public
  29 License as published by the Free Software Foundation; either
  30 version 2.1 of the License, or (at your option) any later version.
  31
  32 This library is distributed in the hope that it will be useful,
  33 but WITHOUT ANY WARRANTY; without even the implied warranty of
  34 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  35 Lesser General Public License for more details.
  36
  37 You should have received a copy of the GNU Lesser General Public
  38 License along with this library (lesser_gpl.txt); if not, write to the Free Software
  39 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  40
  41 ----
  42
  43 original document site: http://www.carto.net/papers/svg/gui/colourPicker/
  44 Please contact the author in case you want to use code or ideas commercially.
  45 If you use this code, please include this copyright header, the included full
  46 LGPL 2.1 text and read the terms provided in the LGPL 2.1 license
  47 (http://www.gnu.org/copyleft/lesser.txt)
  48
  49 -------------------------------
  50
  51 Please report bugs and send improvements to neumann@karto.baug.ethz.ch
  52 If you use this control, please link to the original (http://www.carto.net/papers/svg/gui/colourPicker/)
  53 somewhere in the source-code-comment or the "about" of your project and give credits, thanks!
  54
  55 */
  56
  57 function colourPicker(id,parentNode,x,y,width,height,bgstyles,textstyles,sliderSymbId,satSliderVisible,valSliderVisible,alphaSliderVisible,colValTextVisible,fillVisible,strokeVisible,startHue,endHue,nrStopVals,fillStartColor,strokeStartColor,functionToCall) {
  58     var nrArguments = 21;
  59     var createColourPicker= true;
  60     if (arguments.length == nrArguments) {
  61         this.id = id; //the id of the colour picker
  62         this.parentNode = parentNode; //the id or node reference of the parent group where the button can be appended
  63         this.x = x; //upper left corner of colour picker
  64         this.y = y; //upper left corner of colour picker
  65         this.width = width; //width of colour picker
  66         this.height = height; //height of colour picker
  67         this.bgstyles = bgstyles; //an array of literals containing presentation attributes of the colourpicker background
  68         this.textstyles = textstyles; //if shadowcolor = none than no shadow will be used
  69         this.sliderSymbId = sliderSymbId; //id referencing the slider symbol to be used for the sliders
  70         this.satSliderVisible = satSliderVisible; //possible values for visibility: true/false
  71         this.valSliderVisible = valSliderVisible; //possible values for visibility: true/false
  72         this.alphaSliderVisible = alphaSliderVisible; //possible values for visibility: true/false
  73         this.colValTextVisible = colValTextVisible; //possible values for visibility: true/false
  74         this.fillVisible = fillVisible; //possible values for visibility: true/false
  75         this.strokeVisible = strokeVisible; //possible values for visibility: true/false
  76         this.startHue = startHue; //start hue in degree (0 to 360)
  77         this.endHue = endHue; //end hue in degree (0 to 360), end hue should be larger than start hue
  78         this.nrStopVals = nrStopVals; //nr of stop vals in between, in addition to start and end
  79         this.fillStartColors = fillStartColor.split(","); //string, rgba.format, f.e. 255,0,0,1
  80         this.strokeStartColors = strokeStartColor.split(","); //string, rgba.format, f.e. 255,0,0,1
  81         this.functionToCall = functionToCall; //a function or object to call, in case of an object, the method "getColor" is called; if you don't need any, than just say undefined
  82         if (this.fillVisible) {
  83             this.activeColourType = "fill";
  84         }
  85         else {
  86             this.activeColourType = "stroke";
  87         }
  88         //now test if defs section is available
  89         try {
  90             this.svgdefs = document.getElementsByTagNameNS(svgNS,"defs").item(0);
  91         }
  92         catch (ex) {
  93             createColourPicker = false;
  94             alert("Error "+ex+", Could not find a <defs /> section in your svg-file!\nPlease add at least an empty <defs /> element!");
  95         }
  96         this.created = false;
  97     }
  98     else {
  99         createColourPicker = false;
 100         alert("Error in colourPicker ("+id+") constructor: wrong nr of arguments! You have to pass over "+nrArguments+" parameters.");
 101     }
 102     if (createColourPicker) {
 103         this.createColourpicker();
 104     }
 105     else {
 106         alert("Could not create colourPicker with id '"+id+"' due to errors in the constructor parameters");
 107     }
 108 }
 109
 110 //test if parent group exists
 111 colourPicker.prototype.testParent = function() {
 112     //test if of type object
 113     var nodeValid = false;
 114     this.parentGroup = document.createElementNS(svgNS,"g");
 115     if (typeof(this.parentNode) == "object") {
 116         if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g") {
 117             this.parentNode.appendChild(this.parentGroup);
 118             nodeValid = true;
 119         }
 120     }
 121     else if (typeof(this.parentNode) == "string") {
 122         //first test if button group exists
 123         if (!document.getElementById(this.parentNode)) {
 124             this.parentGroup.setAttributeNS(null,"id",this.parentNode);
 125             document.documentElement.appendChild(this.parentGroup);
 126             nodeValid = true;
 127            }
 128            else {
 129                document.getElementById(this.parentNode).appendChild(this.parentGroup);
 130                nodeValid = true;
 131            }
 132        }
 133        return nodeValid;
 134 }
 135
 136
 137 colourPicker.prototype.createColourpicker = function() {
 138     var result = this.testParent();
 139     if (result) {
 140         this.nrSliders = 1; //these are to define the distribution along y-axis
 141         this.nrRects = 0; //these are to define the distribution along x-axis
 142
 143         //create gradients in defs section
 144         //hueGradient
 145         var hueGradientDefs = document.createElementNS(svgNS,"linearGradient");
 146         hueGradientDefs.setAttributeNS(null,"id",this.id+"_hueGradient");
 147         var curHue = this.startHue;
 148         var curPerc = 0;
 149         var hueIncr = (this.endHue - this.startHue) / (this.nrStopVals - 1);
 150         var percIncr = 100 / (this.nrStopVals - 1);
 151         for (i = 0;i<this.nrStopVals;i++) {
 152             if (curPerc > 100) {
 153                 curPerc = 100;
 154             }
 155             if (curHue > this.endHue) {
 156                 curHue = this.endHue;
 157             }
 158             var stopVal = document.createElementNS(svgNS,"stop");
 159             stopVal.setAttributeNS(null,"offset",curPerc+"%");
 160             myRgbArr = hsv2rgb(Math.round(curHue),1,1);
 161             stopVal.setAttributeNS(null,"stop-color","rgb("+myRgbArr['red']+","+myRgbArr['green']+","+myRgbArr['blue']+")");
 162             hueGradientDefs.appendChild(stopVal);
 163             curPerc += percIncr;
 164             curHue += hueIncr;
 165         }
 166         if (this.created) {
 167             this.svgdefs.replaceChild(hueGradientDefs,document.getElementById(this.id+"_hueGradient"));
 168         }
 169         else {
 170             this.svgdefs.appendChild(hueGradientDefs);
 171         }
 172         //generate satGradient if visible
 173         if (this.satSliderVisible) {
 174             var satGradientDefs = document.createElementNS(svgNS,"linearGradient");
 175             satGradientDefs.setAttributeNS(null,"id",this.id+"_satGradient");
 176             this.satStartGradient = document.createElementNS(svgNS,"stop");
 177             this.satStartGradient.setAttributeNS(null,"offset","0%");
 178             this.satStartGradient.setAttributeNS(null,"stop-color","rgb(255,255,255)");
 179             satGradientDefs.appendChild(this.satStartGradient);
 180             this.satEndGradient = document.createElementNS(svgNS,"stop");
 181             this.satEndGradient.setAttributeNS(null,"offset","100%");
 182             this.satEndGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)");
 183             satGradientDefs.appendChild(this.satEndGradient);
 184             if (this.created) {
 185                 this.svgdefs.replaceChild(satGradientDefs,document.getElementById(this.id+"_satGradient"));
 186             }
 187             else {
 188                 this.svgdefs.appendChild(satGradientDefs);
 189             }
 190             this.nrSliders++;
 191         }
 192         //generate valGradient if visible
 193         if (this.valSliderVisible) {
 194             var valGradientDefs = document.createElementNS(svgNS,"linearGradient");
 195             valGradientDefs.setAttributeNS(null,"id",this.id+"_valGradient");
 196             this.valStartGradient = document.createElementNS(svgNS,"stop");
 197             this.valStartGradient.setAttributeNS(null,"offset","0%");
 198             this.valStartGradient.setAttributeNS(null,"stop-color","rgb(0,0,0)");
 199             valGradientDefs.appendChild(this.valStartGradient);
 200             this.valEndGradient = document.createElementNS(svgNS,"stop");
 201             this.valEndGradient.setAttributeNS(null,"offset","100%");
 202             this.valEndGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)");
 203             valGradientDefs.appendChild(this.valEndGradient);
 204             if (this.created) {
 205                 this.svgdefs.replaceChild(valGradientDefs,document.getElementById(this.id+"_valGradient"));
 206             }
 207             else {
 208                 this.svgdefs.appendChild(valGradientDefs);
 209             }
 210             this.nrSliders++;
 211         }
 212         //generate opacityGradient if visible
 213         if (this.alphaSliderVisible) {
 214             var alphaGradientDefs = document.createElementNS(svgNS,"linearGradient");
 215             alphaGradientDefs.setAttributeNS(null,"id",this.id+"_alphaGradient");
 216             this.alphaStartGradient = document.createElementNS(svgNS,"stop");
 217             this.alphaStartGradient.setAttributeNS(null,"offset","0%");
 218             this.alphaStartGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)");
 219             this.alphaStartGradient.setAttributeNS(null,"stop-opacity",0);
 220             alphaGradientDefs.appendChild(this.alphaStartGradient );
 221             this.alphaEndGradient  = document.createElementNS(svgNS,"stop");
 222             this.alphaEndGradient.setAttributeNS(null,"offset","100%");
 223             this.alphaEndGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)");
 224             this.alphaEndGradient.setAttributeNS(null,"stop-opacity",1);
 225             alphaGradientDefs.appendChild(this.alphaEndGradient);
 226             if (this.created) {
 227                 this.svgdefs.replaceChild(alphaGradientDefs,document.getElementById(this.id+"_alphaGradient"));
 228             }
 229             else {
 230                 this.svgdefs.appendChild(alphaGradientDefs);
 231             }
 232             this.nrSliders++;
 233         }
 234
 235         //create bg rectangle
 236         var bgRect = document.createElementNS(svgNS,"rect");
 237         bgRect.setAttributeNS(null,"x",this.x);
 238         bgRect.setAttributeNS(null,"y",this.y);
 239         bgRect.setAttributeNS(null,"width",this.width);
 240         bgRect.setAttributeNS(null,"height",this.height);
 241         for (var attrib in this.bgstyles) {
 242             bgRect.setAttributeNS(null,attrib,this.bgstyles[attrib]);
 243         }
 244         this.parentGroup.appendChild(bgRect);
 245
 246         //now createSliders
 247         var invisSliderLineWidth = this.width * 0.05;
 248         var slidRectHeight = invisSliderLineWidth * 0.5;
 249         var sliderStyles = {"stroke":"none","fill":"none"};
 250         var yNew = this.y + this.height * 0.13;
 251         var yNewInc = this.height * 0.8 / this.nrSliders;
 252         //create hue slider
 253         //first create rectangle behind slider to hold gradient
 254         this.rectHue = document.createElementNS(svgNS,"rect");
 255         this.rectHue.setAttributeNS(null,"x",(this.x + this.width * 0.04));
 256         this.rectHue.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5));
 257         this.rectHue.setAttributeNS(null,"width",(this.x + this.width * 0.7)-(this.x + this.width * 0.04));
 258         this.rectHue.setAttributeNS(null,"height",slidRectHeight);
 259         this.rectHue.setAttributeNS(null,"fill","url(#"+this.id+"_hueGradient)");
 260         this.parentGroup.appendChild(this.rectHue);
 261         this.slidHue = new slider("hueSlider_"+this.id,this.parentGroup,this.x + this.width * 0.04,yNew,this.startHue,this.x + this.width * 0.7,yNew,this.endHue,0,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true);
 262         var hueText = document.createElementNS(svgNS,"text");
 263         hueText.setAttributeNS(null,"x",this.slidHue.x2 + this.width * 0.02);
 264         hueText.setAttributeNS(null,"y",this.slidHue.y2 + this.width * 0.015);
 265         hueText.setAttributeNS(null,"pointer-events","none");
 266         for (var attrib in this.textstyles) {
 267             hueText.setAttributeNS(null,attrib,this.textstyles[attrib]);
 268         }
 269         var hueTextNode = document.createTextNode("Hue ("+this.startHue+String.fromCharCode(176)+"-"+this.endHue+String.fromCharCode(176)+")");
 270         hueText.appendChild(hueTextNode);
 271         this.parentGroup.appendChild(hueText);
 272
 273         //create rects to show colour values for fill and stroke
 274         if (this.strokeVisible) {
 275             this.strokeRect = document.createElementNS(svgNS,"rect");
 276             if (this.fillVisible) {
 277                 this.strokeRect.setAttributeNS(null,"x",this.slidHue.x1 + this.width * 0.1);
 278                 this.strokeRect.setAttributeNS(null,"y",this.y + this.height * 0.45);
 279             }
 280             else {
 281                 this.strokeRect.setAttributeNS(null,"x",this.slidHue.x1);
 282                 this.strokeRect.setAttributeNS(null,"y",this.y + this.height * 0.3);
 283             }
 284             this.strokeRect.setAttributeNS(null,"width",this.width * 0.15);
 285             this.strokeRect.setAttributeNS(null,"height",this.height * 0.3);
 286             this.strokeRect.setAttributeNS(null,"fill","none");
 287             this.strokeRect.setAttributeNS(null,"stroke","rgb("+this.strokeStartColors[0]+","+this.strokeStartColors[1]+","+this.strokeStartColors[2]+")");
 288             this.strokeRect.setAttributeNS(null,"stroke-width",invisSliderLineWidth * 0.5);
 289             this.strokeRect.setAttributeNS(null,"stroke-opacity",this.strokeStartColors[3]);
 290             this.strokeRect.setAttributeNS(null,"id",this.id+"_strokeColour");
 291             this.strokeRect.setAttributeNS(null,"pointer-events","all");
 292             this.strokeRect.addEventListener("click",this,false);
 293             this.parentGroup.appendChild(this.strokeRect);
 294             this.nrRects++;
 295         }
 296         if (this.fillVisible) {
 297             this.fillRect = document.createElementNS(svgNS,"rect");
 298             this.fillRect.setAttributeNS(null,"x",this.slidHue.x1);
 299             this.fillRect.setAttributeNS(null,"y",this.y + this.height * 0.3);
 300             this.fillRect.setAttributeNS(null,"width",this.width * 0.15);
 301             this.fillRect.setAttributeNS(null,"height",this.height * 0.3);
 302             this.fillRect.setAttributeNS(null,"fill","rgb("+this.fillStartColors[0]+","+this.fillStartColors[1]+","+this.fillStartColors[2]+")");
 303             this.fillRect.setAttributeNS(null,"fill-opacity",this.fillStartColors[3]);
 304             this.fillRect.setAttributeNS(null,"id",this.id+"_fillColour");
 305             this.fillRect.addEventListener("click",this,false);
 306             if (this.activeColourType == "stroke") {
 307                 this.parentGroup.insertBefore(this.fillRect,this.strokeRect);
 308             }
 309             else {
 310                 this.parentGroup.appendChild(this.fillRect);
 311             }
 312             this.nrRects++;
 313         }
 314
 315         switch(this.nrRects) {
 316             case 0:
 317                 slidLeft = this.slidHue.x1;
 318                 break;
 319             case 1:
 320                 slidLeft = this.slidHue.x1 + this.width * 0.2;
 321                 break;
 322             default:
 323                 slidLeft = this.slidHue.x1 + this.width * 0.3;
 324                 break;
 325         }
 326
 327         yNew = yNew + yNewInc;
 328         if (this.satSliderVisible) {
 329             //create rectangle to hold sat gradient
 330             this.rectSat = document.createElementNS(svgNS,"rect");
 331             this.rectSat.setAttributeNS(null,"x",slidLeft);
 332             this.rectSat.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5));
 333             this.rectSat.setAttributeNS(null,"width",(this.x + this.width * 0.7)-slidLeft);
 334             this.rectSat.setAttributeNS(null,"height",slidRectHeight);
 335             this.rectSat.setAttributeNS(null,"fill","url(#"+this.id+"_satGradient)");
 336             this.parentGroup.appendChild(this.rectSat);
 337             //create sat slider
 338             this.slidSat = new slider("satSlider_"+this.id,this.parentGroup,slidLeft,yNew,0,this.x + this.width * 0.7,yNew,100,100,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true);
 339             var satText = document.createElementNS(svgNS,"text");
 340             for (var attrib in this.textstyles) {
 341                 satText.setAttributeNS(null,attrib,this.textstyles[attrib]);
 342             }
 343             satText.setAttributeNS(null,"pointer-events","none");
 344             satText.setAttributeNS(null,"x",this.slidSat.x2 + this.width * 0.02);
 345             satText.setAttributeNS(null,"y",this.slidSat.y2 + this.width * 0.015);
 346             var satTextNode = document.createTextNode("Saturation (%)");
 347             satText.appendChild(satTextNode);
 348             this.parentGroup.appendChild(satText);
 349             yNew = yNew + yNewInc;
 350         }
 351         if (this.valSliderVisible) {
 352             //create rectangle to hold val gradient
 353             this.rectVal = document.createElementNS(svgNS,"rect");
 354             this.rectVal.setAttributeNS(null,"x",slidLeft);
 355             this.rectVal.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5));
 356             this.rectVal.setAttributeNS(null,"width",(this.x + this.width * 0.7)-slidLeft);
 357             this.rectVal.setAttributeNS(null,"height",slidRectHeight);
 358             this.rectVal.setAttributeNS(null,"fill","url(#"+this.id+"_valGradient)");
 359             this.parentGroup.appendChild(this.rectVal);
 360             //create val slider
 361             this.slidVal = new slider("valSlider_"+this.id,this.parentGroup,slidLeft,yNew,0,this.x + this.width * 0.7,yNew,100,100,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true);
 362             var valText = document.createElementNS(svgNS,"text");
 363             for (var attrib in this.textstyles) {
 364                 valText.setAttributeNS(null,attrib,this.textstyles[attrib]);
 365             }
 366             valText.setAttributeNS(null,"pointer-events","none");
 367             valText.setAttributeNS(null,"x",this.slidVal.x2 + this.width * 0.02);
 368             valText.setAttributeNS(null,"y",this.slidVal.y2 + this.width * 0.015);
 369             var valTextNode = document.createTextNode("Value (%)");
 370             valText.appendChild(valTextNode);
 371             this.parentGroup.appendChild(valText);
 372             yNew = yNew + yNewInc;
 373         }
 374         if (this.alphaSliderVisible) {
 375             //create rectangle to hold alpha gradient
 376             this.rectAlpha = document.createElementNS(svgNS,"rect");
 377             this.rectAlpha.setAttributeNS(null,"x",slidLeft);
 378             this.rectAlpha.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5));
 379             this.rectAlpha.setAttributeNS(null,"width",(this.x + this.width * 0.7)-slidLeft);
 380             this.rectAlpha.setAttributeNS(null,"height",slidRectHeight);
 381             this.rectAlpha.setAttributeNS(null,"fill","url(#"+this.id+"_alphaGradient)");
 382             this.parentGroup.appendChild(this.rectAlpha);
 383             //create val slider
 384             this.slidAlpha = new slider("alphaSlider_"+this.id,this.parentGroup,slidLeft,yNew,0,this.x + this.width * 0.7,yNew,100,100,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true);
 385             var alphaText = document.createElementNS(svgNS,"text");
 386             for (var attrib in this.textstyles) {
 387                 alphaText.setAttributeNS(null,attrib,this.textstyles[attrib]);
 388             }
 389             alphaText.setAttributeNS(null,"pointer-events","none");
 390             alphaText.setAttributeNS(null,"x",this.slidAlpha.x2 + this.width * 0.02);
 391             alphaText.setAttributeNS(null,"y",this.slidAlpha.y2 + this.width * 0.015);
 392             var alphaTextNode = document.createTextNode("Opacity (%)");
 393             alphaText.appendChild(alphaTextNode);
 394             this.parentGroup.appendChild(alphaText);
 395         }
 396         //create text to hold rgb/hsv values
 397         if (this.colValTextVisible) {
 398             this.colValText = document.createElementNS(svgNS,"text");
 399             for (var attrib in this.textstyles) {
 400                 this.colValText.setAttributeNS(null,attrib,this.textstyles[attrib]);
 401             }
 402             this.colValText.setAttributeNS(null,"x",this.slidHue.x1);
 403             this.colValText.setAttributeNS(null,"y",this.y + this.height * 0.95);
 404             var textNode = document.createTextNode("RGB: 255,0,0; HSV: 0,100,100");
 405             this.colValText.appendChild(textNode);
 406             this.parentGroup.appendChild(this.colValText);
 407         }
 408
 409         fillHSVvar = rgb2hsv(parseInt(this.fillStartColors[0]),parseInt(this.fillStartColors[1]),parseInt(this.fillStartColors[2]));
 410         strokeHSVvar = rgb2hsv(parseInt(this.strokeStartColors[0]),parseInt(this.strokeStartColors[1]),parseInt(this.strokeStartColors[2]));
 411         this.hue = new Array();
 412         this.hue["fill"] = fillHSVvar["hue"];
 413         this.hue["stroke"] = strokeHSVvar["hue"];
 414         this.sat = new Array();
 415         this.sat["fill"] = fillHSVvar["sat"];
 416         this.sat["stroke"] = strokeHSVvar["sat"];
 417         this.val = new Array();
 418         this.val["fill"] = fillHSVvar["val"];
 419         this.val["stroke"] = strokeHSVvar["val"];
 420         this.alpha = new Array();
 421         this.alpha["fill"] = parseFloat(this.fillStartColors[3]);
 422         this.alpha["stroke"] = parseFloat(this.strokeStartColors[3]);
 423         this.rgbArr = new Array();
 424         this.rgbArr["fill"] = hsv2rgb(this.hue["fill"],this.sat["fill"],this.val["fill"]);
 425         this.rgbArr["stroke"] = hsv2rgb(this.hue["stroke"],this.sat["stroke"],this.val["stroke"]);
 426         this.setRGBAColour(this.activeColourType,this.rgbArr[this.activeColourType]["red"],this.rgbArr[this.activeColourType]["green"],this.rgbArr[this.activeColourType]["blue"],this.alpha[this.activeColourType],false);
 427
 428         //indicate that it was created once
 429         this.created = true;
 430     }
 431     else {
 432         alert("could not create or reference 'parentNode' of button with id '"+this.id+"'");
 433     }
 434 }
 435
 436 colourPicker.prototype.handleEvent = function(evt) {
 437     var el = evt.target;
 438     if (evt.type == "click") {
 439         var id = el.getAttributeNS(null,"id");
 440         if (id == this.id+"_fillColour") {
 441             this.activeColourType = "fill";
 442             if (this.strokeVisible) {
 443                 this.parentGroup.insertBefore(this.strokeRect,this.fillRect);
 444             }
 445         }
 446         if (id == this.id+"_strokeColour") {
 447             this.activeColourType = "stroke";
 448             if (this.fillVisible) {
 449                 this.parentGroup.insertBefore(this.fillRect,this.strokeRect);
 450             }
 451         }
 452         if (id == this.id+"_fillColour" || id == this.id+"_strokeColour") {
 453             this.setRGBAColour(this.activeColourType,this.rgbArr[this.activeColourType]["red"],this.rgbArr[this.activeColourType]["green"],this.rgbArr[this.activeColourType]["blue"],this.alpha[this.activeColourType],false);
 454         }
 455     }
 456 }
 457
 458 //this method should be used from external
 459 colourPicker.prototype.getValues = function() {
 460     var result = {"fill":{"red":this.rgbArr["fill"]["red"],"green":this.rgbArr["fill"]["green"],"blue":this.rgbArr["fill"]["blue"],"alpha":this.alpha["fill"],"hue":this.hue["fill"],"sat":this.sat["fill"],"val":this.val["fill"]},"stroke":{"red":this.rgbArr["stroke"]["red"],"green":this.rgbArr["stroke"]["green"],"blue":this.rgbArr["stroke"]["blue"],"alpha":this.alpha["stroke"],"hue":this.hue["stroke"],"sat":this.sat["stroke"],"val":this.val["stroke"]}};
 461     return result;
 462 }
 463
 464 //this method is used by this object but may be also used from external
 465 colourPicker.prototype.setRGBAColour = function(colourType,red,green,blue,alpha,fireFunction) {
 466     //colourType = fill|stroke
 467     hsvArr = rgb2hsv(red,green,blue);
 468     this.hue[colourType] = hsvArr["hue"];
 469     this.sat[colourType] = hsvArr["sat"];
 470     this.val[colourType] = hsvArr["val"];
 471     this.alpha[colourType] = alpha;
 472     this.rgbArr[colourType]["red"] = red;
 473     this.rgbArr[colourType]["green"] = green;
 474     this.rgbArr[colourType]["blue"] = blue;
 475     if (colourType == this.activeColourType) {
 476         this.slidHue.setValue(this.hue[colourType]);
 477         if (this.satSliderVisible) {
 478             this.slidSat.setValue(Math.round(this.sat[colourType] * 100));
 479             rgbSatEnd = hsv2rgb(this.hue[this.activeColourType],1,this.val[this.activeColourType]);
 480             rgbSatStart = hsv2rgb(this.hue[this.activeColourType],0,this.val[this.activeColourType]);
 481             this.satStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatStart["red"]+","+rgbSatStart["green"]+","+rgbSatStart["blue"]+")");
 482             this.satEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatEnd["red"]+","+rgbSatEnd["green"]+","+rgbSatEnd["blue"]+")");
 483             if (myMapApp.navigator == "Batik") {
 484                 this.rectSat.removeAttributeNS(null,"fill");
 485                 this.rectSat.setAttributeNS(null,"fill","url(#"+this.id+"_satGradient)");
 486             }
 487         }
 488         if (this.valSliderVisible) {
 489             this.slidVal.setValue(Math.round(this.val[colourType] * 100));
 490             rgbValEnd = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],1);
 491             rgbValStart = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],0);
 492             this.valStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbValStart["red"]+","+rgbValStart["green"]+","+rgbValStart["blue"]+")");
 493             this.valEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbValEnd["red"]+","+rgbValEnd["green"]+","+rgbValEnd["blue"]+")");
 494             if (myMapApp.navigator == "Batik") {
 495                 this.rectVal.removeAttributeNS(null,"fill");
 496                 this.rectVal.setAttributeNS(null,"fill","url(#"+this.id+"_valGradient)");
 497             }
 498         }
 499         if (this.alphaSliderVisible) {
 500             this.slidAlpha.setValue(Math.round(this.alpha[colourType] * 100));
 501             rgbAlpha = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],this.val[this.activeColourType]);
 502             this.alphaStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")");
 503             this.alphaEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")");
 504             if (myMapApp.navigator == "Batik") {
 505                 this.rectAlpha.removeAttributeNS(null,"fill");
 506                 this.rectAlpha.setAttributeNS(null,"fill","url(#"+this.id+"_alphaGradient)");
 507             }
 508         }
 509         if (this.colValTextVisible) {
 510             this.colValText.firstChild.nodeValue = "RGBA: "+this.rgbArr[this.activeColourType]["red"]+","+this.rgbArr[this.activeColourType]["green"]+","+this.rgbArr[this.activeColourType]["blue"]+","+Math.round(this.alpha[this.activeColourType] * 100) +"; HSVA: "+this.hue[this.activeColourType]+","+Math.round(this.sat[this.activeColourType] * 100)+","+Math.round(this.val[this.activeColourType] * 100)+","+Math.round(this.alpha[this.activeColourType] * 100);
 511         }
 512     }
 513     //set values in fill and stroke rectangles
 514     if (colourType == "stroke") {
 515         this.strokeRect.setAttributeNS(null,"stroke","rgb("+red+","+green+","+blue+")");
 516         this.strokeRect.setAttributeNS(null,"stroke-opacity",alpha);
 517     }
 518     if (colourType == "fill") {
 519         this.fillRect.setAttributeNS(null,"fill","rgb("+red+","+green+","+blue+")");
 520         this.fillRect.setAttributeNS(null,"fill-opacity",alpha);
 521     }
 522     if (fireFunction) {
 523         this.fireFunction();
 524     }
 525 }
 526
 527 //this is a helper method to be used by this object only
 528 colourPicker.prototype.getSliderVal = function(changeType,sliderId,slidValue) {
 529     //get all colour values from sliders
 530     if (sliderId == "hueSlider_"+this.id) {
 531         this.hue[this.activeColourType] = Math.round(this.slidHue.value);
 532     }
 533     if (sliderId == "satSlider_"+this.id && this.satSliderVisible) {
 534         this.sat[this.activeColourType] = Math.round(this.slidSat.value) / 100;
 535     }
 536     if (sliderId == "valSlider_"+this.id && this.valSliderVisible) {
 537         this.val[this.activeColourType] = Math.round(this.slidVal.value) / 100;
 538     }
 539     if (sliderId == "alphaSlider_"+this.id && this.alphaSliderVisible) {
 540         this.alpha[this.activeColourType] = Math.round(this.slidAlpha.value) / 100;
 541     }
 542     this.rgbArr[this.activeColourType] = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],this.val[this.activeColourType]);
 543     if (this.fillVisible && this.activeColourType == "fill") {
 544         this.fillRect.setAttributeNS(null,"fill","rgb("+this.rgbArr["fill"]["red"]+","+this.rgbArr["fill"]["green"]+","+this.rgbArr["fill"]["blue"]+")");
 545         this.fillRect.setAttributeNS(null,"fill-opacity",this.alpha[this.activeColourType]);
 546     }
 547     if (this.strokeVisible && this.activeColourType == "stroke") {
 548         this.strokeRect.setAttributeNS(null,"stroke","rgb("+this.rgbArr["stroke"]["red"]+","+this.rgbArr["stroke"]["green"]+","+this.rgbArr["stroke"]["blue"]+")");
 549         this.strokeRect.setAttributeNS(null,"stroke-opacity",this.alpha[this.activeColourType]);
 550     }
 551     if (this.colValTextVisible) {
 552         this.colValText.firstChild.nodeValue = "RGBA: "+this.rgbArr[this.activeColourType]["red"]+","+this.rgbArr[this.activeColourType]["green"]+","+this.rgbArr[this.activeColourType]["blue"]+","+Math.round(this.alpha[this.activeColourType] * 100) +"; HSVA: "+this.hue[this.activeColourType]+","+Math.round(this.sat[this.activeColourType] * 100)+","+Math.round(this.val[this.activeColourType] * 100)+","+Math.round(this.alpha[this.activeColourType] * 100);
 553     }
 554     if (this.satSliderVisible) {
 555         rgbSatEnd = hsv2rgb(this.hue[this.activeColourType],1,this.val[this.activeColourType]);
 556         rgbSatStart = hsv2rgb(this.hue[this.activeColourType],0,this.val[this.activeColourType]);
 557         this.satStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatStart["red"]+","+rgbSatStart["green"]+","+rgbSatStart["blue"]+")");
 558         this.satEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatEnd["red"]+","+rgbSatEnd["green"]+","+rgbSatEnd["blue"]+")");
 559         if (myMapApp.navigator == "Batik") {
 560             this.rectSat.removeAttributeNS(null,"fill");
 561             this.rectSat.setAttributeNS(null,"fill","url(#"+this.id+"_satGradient)");
 562         }
 563     }
 564     if (this.valSliderVisible) {
 565         rgbValEnd = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],1);
 566         rgbValStart = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],0);
 567         this.valStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbValStart["red"]+","+rgbValStart["green"]+","+rgbValStart["blue"]+")");
 568         this.valEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbValEnd["red"]+","+rgbValEnd["green"]+","+rgbValEnd["blue"]+")");
 569         if (myMapApp.navigator == "Batik") {
 570             this.rectVal.removeAttributeNS(null,"fill");
 571             this.rectVal.setAttributeNS(null,"fill","url(#"+this.id+"_valGradient)");
 572         }
 573     }
 574     if (this.alphaSliderVisible) {
 575         rgbAlpha = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],this.val[this.activeColourType]);
 576         this.alphaStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")");
 577         this.alphaEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")");
 578         if (myMapApp.navigator == "Batik") {
 579             this.rectAlpha.removeAttributeNS(null,"fill");
 580             this.rectAlpha.setAttributeNS(null,"fill","url(#"+this.id+"_alphaGradient)");
 581         }
 582     }
 583     this.fireFunction();
 584 }
 585
 586 //this hides a colourPicker
 587 colourPicker.prototype.hide = function() {
 588     this.parentGroup.setAttributeNS(null,"display","none");
 589 }
 590
 591 //this method shows a colourPicker once it was hidden
 592 colourPicker.prototype.show = function() {
 593     this.parentGroup.setAttributeNS(null,"display","inherit");
 594 }
 595
 596 //this is an internal method
 597 colourPicker.prototype.fireFunction = function() {
 598     var values = this.getValues();
 599     if (typeof(this.functionToCall) == "function") {
 600         this.functionToCall(this.id,values);
 601     }
 602     if (typeof(this.functionToCall) == "object") {
 603         this.functionToCall.colourChanged(this.id,values);
 604     }
 605     if (typeof(this.functionToCall) == undefined) {
 606         return;
 607     }
 608 }
 609
 610 //this method is for internal use only
 611 colourPicker.prototype.rebuild = function() {
 612     this.fillStartColors = new Array(this.rgbArr["fill"]["red"],this.rgbArr["fill"]["green"],this.rgbArr["fill"]["blue"],this.alpha["fill"]);
 613     this.strokeStartColors = new Array(this.rgbArr["stroke"]["red"],this.rgbArr["stroke"]["green"],this.rgbArr["stroke"]["blue"],this.alpha["stroke"]);
 614     this.parentGroup.parentNode.removeChild(this.parentGroup);
 615     this.createColourpicker();
 616 }
 617
 618 //this method allows to move the colourPicker to a different position
 619 colourPicker.prototype.moveTo = function(x,y) {
 620     this.x = x;
 621     this.y = y;
 622     this.rebuild();
 623 }
 624
 625 //this method changes the size of the colourPicker, you should make sure that the width and height values aren't too small, otherwise the colourPicker would look a bit strange ...
 626 colourPicker.prototype.resize = function(width,height) {
 627     this.width = width;
 628     this.height = height;
 629     this.rebuild();
 630 }