wp-includes/js/colorpicker.js

   1 // ===================================================================
   2 // Author: Matt Kruse <matt@mattkruse.com>
   3 // WWW: http://www.mattkruse.com/
   4 //
   5 // NOTICE: You may use this code for any purpose, commercial or
   6 // private, without any further permission from the author. You may
   7 // remove this notice from your final code if you wish, however it is
   8 // appreciated by the author if at least my web site address is kept.
   9 //
  10 // You may *NOT* re-distribute this code in any way except through its
  11 // use. That means, you can include it in your product, or your web
  12 // site, or any other form where the code is actually being used. You
  13 // may not put the plain javascript up on your site for download or
  14 // include it in your javascript libraries for download.
  15 // If you wish to share this code with others, please just point them
  16 // to the URL instead.
  17 // Please DO NOT link directly to my .js files from your site. Copy
  18 // the files to your server and use them there. Thank you.
  19 // ===================================================================
  20
  21
  22 /* SOURCE FILE: AnchorPosition.js */
  23
  24 /*
  25 AnchorPosition.js
  26 Author: Matt Kruse
  27 Last modified: 10/11/02
  28
  29 DESCRIPTION: These functions find the position of an <A> tag in a document,
  30 so other elements can be positioned relative to it.
  31
  32 COMPATABILITY: Netscape 4.x,6.x,Mozilla, IE 5.x,6.x on Windows. Some small
  33 positioning errors - usually with Window positioning - occur on the
  34 Macintosh platform.
  35
  36 FUNCTIONS:
  37 getAnchorPosition(anchorname)
  38   Returns an Object() having .x and .y properties of the pixel coordinates
  39   of the upper-left corner of the anchor. Position is relative to the PAGE.
  40
  41 getAnchorWindowPosition(anchorname)
  42   Returns an Object() having .x and .y properties of the pixel coordinates
  43   of the upper-left corner of the anchor, relative to the WHOLE SCREEN.
  44
  45 NOTES:
  46
  47 1) For popping up separate browser windows, use getAnchorWindowPosition.
  48    Otherwise, use getAnchorPosition
  49
  50 2) Your anchor tag MUST contain both NAME and ID attributes which are the
  51    same. For example:
  52    <A NAME="test" ID="test"> </A>
  53
  54 3) There must be at least a space between <A> </A> for IE5.5 to see the
  55    anchor tag correctly. Do not do <A></A> with no space.
  56 */
  57
  58 // getAnchorPosition(anchorname)
  59 //   This function returns an object having .x and .y properties which are the coordinates
  60 //   of the named anchor, relative to the page.
  61 function getAnchorPosition(anchorname) {
  62         // This function will return an Object with x and y properties
  63         var useWindow=false;
  64         var coordinates=new Object();
  65         var x=0,y=0;
  66         // Browser capability sniffing
  67         var use_gebi=false, use_css=false, use_layers=false;
  68         if (document.getElementById) { use_gebi=true; }
  69         else if (document.all) { use_css=true; }
  70         else if (document.layers) { use_layers=true; }
  71         // Logic to find position
  72         if (use_gebi && document.all) {
  73                 x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
  74                 y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
  75                 }
  76         else if (use_gebi) {
  77                 var o=document.getElementById(anchorname);
  78                 x=AnchorPosition_getPageOffsetLeft(o);
  79                 y=AnchorPosition_getPageOffsetTop(o);
  80                 }
  81         else if (use_css) {
  82                 x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
  83                 y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
  84                 }
  85         else if (use_layers) {
  86                 var found=0;
  87                 for (var i=0; i<document.anchors.length; i++) {
  88                         if (document.anchors[i].name==anchorname) { found=1; break; }
  89                         }
  90                 if (found==0) {
  91                         coordinates.x=0; coordinates.y=0; return coordinates;
  92                         }
  93                 x=document.anchors[i].x;
  94                 y=document.anchors[i].y;
  95                 }
  96         else {
  97                 coordinates.x=0; coordinates.y=0; return coordinates;
  98                 }
  99         coordinates.x=x;
 100         coordinates.y=y;
 101         return coordinates;
 102         }
 103
 104 // getAnchorWindowPosition(anchorname)
 105 //   This function returns an object having .x and .y properties which are the coordinates
 106 //   of the named anchor, relative to the window
 107 function getAnchorWindowPosition(anchorname) {
 108         var coordinates=getAnchorPosition(anchorname);
 109         var x=0;
 110         var y=0;
 111         if (document.getElementById) {
 112                 if (isNaN(window.screenX)) {
 113                         x=coordinates.x-document.body.scrollLeft+window.screenLeft;
 114                         y=coordinates.y-document.body.scrollTop+window.screenTop;
 115                         }
 116                 else {
 117                         x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
 118                         y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
 119                         }
 120                 }
 121         else if (document.all) {
 122                 x=coordinates.x-document.body.scrollLeft+window.screenLeft;
 123                 y=coordinates.y-document.body.scrollTop+window.screenTop;
 124                 }
 125         else if (document.layers) {
 126                 x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
 127                 y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
 128                 }
 129         coordinates.x=x;
 130         coordinates.y=y;
 131         return coordinates;
 132         }
 133
 134 // Functions for IE to get position of an object
 135 function AnchorPosition_getPageOffsetLeft (el) {
 136         var ol=el.offsetLeft;
 137         while ((el=el.offsetParent) != null) { ol += el.offsetLeft; }
 138         return ol;
 139         }
 140 function AnchorPosition_getWindowOffsetLeft (el) {
 141         return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
 142         }
 143 function AnchorPosition_getPageOffsetTop (el) {
 144         var ot=el.offsetTop;
 145         while((el=el.offsetParent) != null) { ot += el.offsetTop; }
 146         return ot;
 147         }
 148 function AnchorPosition_getWindowOffsetTop (el) {
 149         return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
 150         }
 151
 152 /* SOURCE FILE: PopupWindow.js */
 153
 154 /*
 155 PopupWindow.js
 156 Author: Matt Kruse
 157 Last modified: 02/16/04
 158
 159 DESCRIPTION: This object allows you to easily and quickly popup a window
 160 in a certain place. The window can either be a DIV or a separate browser
 161 window.
 162
 163 COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small
 164 positioning errors - usually with Window positioning - occur on the
 165 Macintosh platform. Due to bugs in Netscape 4.x, populating the popup
 166 window with <STYLE> tags may cause errors.
 167
 168 USAGE:
 169 // Create an object for a WINDOW popup
 170 var win = new PopupWindow();
 171
 172 // Create an object for a DIV window using the DIV named 'mydiv'
 173 var win = new PopupWindow('mydiv');
 174
 175 // Set the window to automatically hide itself when the user clicks
 176 // anywhere else on the page except the popup
 177 win.autoHide();
 178
 179 // Show the window relative to the anchor name passed in
 180 win.showPopup(anchorname);
 181
 182 // Hide the popup
 183 win.hidePopup();
 184
 185 // Set the size of the popup window (only applies to WINDOW popups
 186 win.setSize(width,height);
 187
 188 // Populate the contents of the popup window that will be shown. If you
 189 // change the contents while it is displayed, you will need to refresh()
 190 win.populate(string);
 191
 192 // set the URL of the window, rather than populating its contents
 193 // manually
 194 win.setUrl("http://www.site.com/");
 195
 196 // Refresh the contents of the popup
 197 win.refresh();
 198
 199 // Specify how many pixels to the right of the anchor the popup will appear
 200 win.offsetX = 50;
 201
 202 // Specify how many pixels below the anchor the popup will appear
 203 win.offsetY = 100;
 204
 205 NOTES:
 206 1) Requires the functions in AnchorPosition.js
 207
 208 2) Your anchor tag MUST contain both NAME and ID attributes which are the
 209    same. For example:
 210    <A NAME="test" ID="test"> </A>
 211
 212 3) There must be at least a space between <A> </A> for IE5.5 to see the
 213    anchor tag correctly. Do not do <A></A> with no space.
 214
 215 4) When a PopupWindow object is created, a handler for 'onmouseup' is
 216    attached to any event handler you may have already defined. Do NOT define
 217    an event handler for 'onmouseup' after you define a PopupWindow object or
 218    the autoHide() will not work correctly.
 219 */
 220
 221 // Set the position of the popup window based on the anchor
 222 function PopupWindow_getXYPosition(anchorname) {
 223         var coordinates;
 224         if (this.type == "WINDOW") {
 225                 coordinates = getAnchorWindowPosition(anchorname);
 226                 }
 227         else {
 228                 coordinates = getAnchorPosition(anchorname);
 229                 }
 230         this.x = coordinates.x;
 231         this.y = coordinates.y;
 232         }
 233 // Set width/height of DIV/popup window
 234 function PopupWindow_setSize(width,height) {
 235         this.width = width;
 236         this.height = height;
 237         }
 238 // Fill the window with contents
 239 function PopupWindow_populate(contents) {
 240         this.contents = contents;
 241         this.populated = false;
 242         }
 243 // Set the URL to go to
 244 function PopupWindow_setUrl(url) {
 245         this.url = url;
 246         }
 247 // Set the window popup properties
 248 function PopupWindow_setWindowProperties(props) {
 249         this.windowProperties = props;
 250         }
 251 // Refresh the displayed contents of the popup
 252 function PopupWindow_refresh() {
 253         if (this.divName != null) {
 254                 // refresh the DIV object
 255                 if (this.use_gebi) {
 256                         document.getElementById(this.divName).innerHTML = this.contents;
 257                         }
 258                 else if (this.use_css) {
 259                         document.all[this.divName].innerHTML = this.contents;
 260                         }
 261                 else if (this.use_layers) {
 262                         var d = document.layers[this.divName];
 263                         d.document.open();
 264                         d.document.writeln(this.contents);
 265                         d.document.close();
 266                         }
 267                 }
 268         else {
 269                 if (this.popupWindow != null && !this.popupWindow.closed) {
 270                         if (this.url!="") {
 271                                 this.popupWindow.location.href=this.url;
 272                                 }
 273                         else {
 274                                 this.popupWindow.document.open();
 275                                 this.popupWindow.document.writeln(this.contents);
 276                                 this.popupWindow.document.close();
 277                         }
 278                         this.popupWindow.focus();
 279                         }
 280                 }
 281         }
 282 // Position and show the popup, relative to an anchor object
 283 function PopupWindow_showPopup(anchorname) {
 284         this.getXYPosition(anchorname);
 285         this.x += this.offsetX;
 286         this.y += this.offsetY;
 287         if (!this.populated && (this.contents != "")) {
 288                 this.populated = true;
 289                 this.refresh();
 290                 }
 291         if (this.divName != null) {
 292                 // Show the DIV object
 293                 if (this.use_gebi) {
 294                         document.getElementById(this.divName).style.left = this.x + "px";
 295                         document.getElementById(this.divName).style.top = this.y;
 296                         document.getElementById(this.divName).style.visibility = "visible";
 297                         }
 298                 else if (this.use_css) {
 299                         document.all[this.divName].style.left = this.x;
 300                         document.all[this.divName].style.top = this.y;
 301                         document.all[this.divName].style.visibility = "visible";
 302                         }
 303                 else if (this.use_layers) {
 304                         document.layers[this.divName].left = this.x;
 305                         document.layers[this.divName].top = this.y;
 306                         document.layers[this.divName].visibility = "visible";
 307                         }
 308                 }
 309         else {
 310                 if (this.popupWindow == null || this.popupWindow.closed) {
 311                         // If the popup window will go off-screen, move it so it doesn't
 312                         if (this.x<0) { this.x=0; }
 313                         if (this.y<0) { this.y=0; }
 314                         if (screen && screen.availHeight) {
 315                                 if ((this.y + this.height) > screen.availHeight) {
 316                                         this.y = screen.availHeight - this.height;
 317                                         }
 318                                 }
 319                         if (screen && screen.availWidth) {
 320                                 if ((this.x + this.width) > screen.availWidth) {
 321                                         this.x = screen.availWidth - this.width;
 322                                         }
 323                                 }
 324                         var avoidAboutBlank = window.opera || ( document.layers && !navigator.mimeTypes['*'] ) || navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled );
 325                         this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_"+anchorname,this.windowProperties+",width="+this.width+",height="+this.height+",screenX="+this.x+",left="+this.x+",screenY="+this.y+",top="+this.y+"");
 326                         }
 327                 this.refresh();
 328                 }
 329         }
 330 // Hide the popup
 331 function PopupWindow_hidePopup() {
 332         if (this.divName != null) {
 333                 if (this.use_gebi) {
 334                         document.getElementById(this.divName).style.visibility = "hidden";
 335                         }
 336                 else if (this.use_css) {
 337                         document.all[this.divName].style.visibility = "hidden";
 338                         }
 339                 else if (this.use_layers) {
 340                         document.layers[this.divName].visibility = "hidden";
 341                         }
 342                 }
 343         else {
 344                 if (this.popupWindow && !this.popupWindow.closed) {
 345                         this.popupWindow.close();
 346                         this.popupWindow = null;
 347                         }
 348                 }
 349         }
 350 // Pass an event and return whether or not it was the popup DIV that was clicked
 351 function PopupWindow_isClicked(e) {
 352         if (this.divName != null) {
 353                 if (this.use_layers) {
 354                         var clickX = e.pageX;
 355                         var clickY = e.pageY;
 356                         var t = document.layers[this.divName];
 357                         if ((clickX > t.left) && (clickX < t.left+t.clip.width) && (clickY > t.top) && (clickY < t.top+t.clip.height)) {
 358                                 return true;
 359                                 }
 360                         else { return false; }
 361                         }
 362                 else if (document.all) { // Need to hard-code this to trap IE for error-handling
 363                         var t = window.event.srcElement;
 364                         while (t.parentElement != null) {
 365                                 if (t.id==this.divName) {
 366                                         return true;
 367                                         }
 368                                 t = t.parentElement;
 369                                 }
 370                         return false;
 371                         }
 372                 else if (this.use_gebi && e) {
 373                         var t = e.originalTarget;
 374                         while (t.parentNode != null) {
 375                                 if (t.id==this.divName) {
 376                                         return true;
 377                                         }
 378                                 t = t.parentNode;
 379                                 }
 380                         return false;
 381                         }
 382                 return false;
 383                 }
 384         return false;
 385         }
 386
 387 // Check an onMouseDown event to see if we should hide
 388 function PopupWindow_hideIfNotClicked(e) {
 389         if (this.autoHideEnabled && !this.isClicked(e)) {
 390                 this.hidePopup();
 391                 }
 392         }
 393 // Call this to make the DIV disable automatically when mouse is clicked outside it
 394 function PopupWindow_autoHide() {
 395         this.autoHideEnabled = true;
 396         }
 397 // This global function checks all PopupWindow objects onmouseup to see if they should be hidden
 398 function PopupWindow_hidePopupWindows(e) {
 399         for (var i=0; i<popupWindowObjects.length; i++) {
 400                 if (popupWindowObjects[i] != null) {
 401                         var p = popupWindowObjects[i];
 402                         p.hideIfNotClicked(e);
 403                         }
 404                 }
 405         }
 406 // Run this immediately to attach the event listener
 407 function PopupWindow_attachListener() {
 408         if (document.layers) {
 409                 document.captureEvents(Event.MOUSEUP);
 410                 }
 411         window.popupWindowOldEventListener = document.onmouseup;
 412         if (window.popupWindowOldEventListener != null) {
 413                 document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupWindow_hidePopupWindows();");
 414                 }
 415         else {
 416                 document.onmouseup = PopupWindow_hidePopupWindows;
 417                 }
 418         }
 419 // CONSTRUCTOR for the PopupWindow object
 420 // Pass it a DIV name to use a DHTML popup, otherwise will default to window popup
 421 function PopupWindow() {
 422         if (!window.popupWindowIndex) { window.popupWindowIndex = 0; }
 423         if (!window.popupWindowObjects) { window.popupWindowObjects = new Array(); }
 424         if (!window.listenerAttached) {
 425                 window.listenerAttached = true;
 426                 PopupWindow_attachListener();
 427                 }
 428         this.index = popupWindowIndex++;
 429         popupWindowObjects[this.index] = this;
 430         this.divName = null;
 431         this.popupWindow = null;
 432         this.width=0;
 433         this.height=0;
 434         this.populated = false;
 435         this.visible = false;
 436         this.autoHideEnabled = false;
 437
 438         this.contents = "";
 439         this.url="";
 440         this.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no";
 441         if (arguments.length>0) {
 442                 this.type="DIV";
 443                 this.divName = arguments[0];
 444                 }
 445         else {
 446                 this.type="WINDOW";
 447                 }
 448         this.use_gebi = false;
 449         this.use_css = false;
 450         this.use_layers = false;
 451         if (document.getElementById) { this.use_gebi = true; }
 452         else if (document.all) { this.use_css = true; }
 453         else if (document.layers) { this.use_layers = true; }
 454         else { this.type = "WINDOW"; }
 455         this.offsetX = 0;
 456         this.offsetY = 0;
 457         // Method mappings
 458         this.getXYPosition = PopupWindow_getXYPosition;
 459         this.populate = PopupWindow_populate;
 460         this.setUrl = PopupWindow_setUrl;
 461         this.setWindowProperties = PopupWindow_setWindowProperties;
 462         this.refresh = PopupWindow_refresh;
 463         this.showPopup = PopupWindow_showPopup;
 464         this.hidePopup = PopupWindow_hidePopup;
 465         this.setSize = PopupWindow_setSize;
 466         this.isClicked = PopupWindow_isClicked;
 467         this.autoHide = PopupWindow_autoHide;
 468         this.hideIfNotClicked = PopupWindow_hideIfNotClicked;
 469         }
 470
 471 /* SOURCE FILE: ColorPicker2.js */
 472
 473 /*
 474 Last modified: 02/24/2003
 475
 476 DESCRIPTION: This widget is used to select a color, in hexadecimal #RRGGBB
 477 form. It uses a color "swatch" to display the standard 216-color web-safe
 478 palette. The user can then click on a color to select it.
 479
 480 COMPATABILITY: See notes in AnchorPosition.js and PopupWindow.js.
 481 Only the latest DHTML-capable browsers will show the color and hex values
 482 at the bottom as your mouse goes over them.
 483
 484 USAGE:
 485 // Create a new ColorPicker object using DHTML popup
 486 var cp = new ColorPicker();
 487
 488 // Create a new ColorPicker object using Window Popup
 489 var cp = new ColorPicker('window');
 490
 491 // Add a link in your page to trigger the popup. For example:
 492 <A HREF="#" onClick="cp.show('pick');return false;" NAME="pick" ID="pick">Pick</A>
 493
 494 // Or use the built-in "select" function to do the dirty work for you:
 495 <A HREF="#" onClick="cp.select(document.forms[0].color,'pick');return false;" NAME="pick" ID="pick">Pick</A>
 496
 497 // If using DHTML popup, write out the required DIV tag near the bottom
 498 // of your page.
 499 <SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>
 500
 501 // Write the 'pickColor' function that will be called when the user clicks
 502 // a color and do something with the value. This is only required if you
 503 // want to do something other than simply populate a form field, which is
 504 // what the 'select' function will give you.
 505 function pickColor(color) {
 506         field.value = color;
 507         }
 508
 509 NOTES:
 510 1) Requires the functions in AnchorPosition.js and PopupWindow.js
 511
 512 2) Your anchor tag MUST contain both NAME and ID attributes which are the
 513    same. For example:
 514    <A NAME="test" ID="test"> </A>
 515
 516 3) There must be at least a space between <A> </A> for IE5.5 to see the
 517    anchor tag correctly. Do not do <A></A> with no space.
 518
 519 4) When a ColorPicker object is created, a handler for 'onmouseup' is
 520    attached to any event handler you may have already defined. Do NOT define
 521    an event handler for 'onmouseup' after you define a ColorPicker object or
 522    the color picker will not hide itself correctly.
 523 */
 524 ColorPicker_targetInput = null;
 525 function ColorPicker_writeDiv() {
 526         document.writeln("<DIV ID=\"colorPickerDiv\" STYLE=\"position:absolute;visibility:hidden;\"> </DIV>");
 527         }
 528
 529 function ColorPicker_show(anchorname) {
 530         this.showPopup(anchorname);
 531         }
 532
 533 function ColorPicker_pickColor(color,obj) {
 534         obj.hidePopup();
 535         pickColor(color);
 536         }
 537
 538 // A Default "pickColor" function to accept the color passed back from popup.
 539 // User can over-ride this with their own function.
 540 function pickColor(color) {
 541         if (ColorPicker_targetInput==null) {
 542                 alert("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickColor' function to handle the picked color!");
 543                 return;
 544                 }
 545         ColorPicker_targetInput.value = color;
 546         }
 547
 548 // This function is the easiest way to popup the window, select a color, and
 549 // have the value populate a form field, which is what most people want to do.
 550 function ColorPicker_select(inputobj,linkname) {
 551         if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") {
 552                 alert("colorpicker.select: Input object passed is not a valid form input object");
 553                 window.ColorPicker_targetInput=null;
 554                 return;
 555                 }
 556         window.ColorPicker_targetInput = inputobj;
 557         this.show(linkname);
 558         }
 559
 560 // This function runs when you move your mouse over a color block, if you have a newer browser
 561 function ColorPicker_highlightColor(c) {
 562         var thedoc = (arguments.length>1)?arguments[1]:window.document;
 563         var d = thedoc.getElementById("colorPickerSelectedColor");
 564         d.style.backgroundColor = c;
 565         d = thedoc.getElementById("colorPickerSelectedColorValue");
 566         d.innerHTML = c;
 567         }
 568
 569 function ColorPicker() {
 570         var windowMode = false;
 571         // Create a new PopupWindow object
 572         if (arguments.length==0) {
 573                 var divname = "colorPickerDiv";
 574                 }
 575         else if (arguments[0] == "window") {
 576                 var divname = '';
 577                 windowMode = true;
 578                 }
 579         else {
 580                 var divname = arguments[0];
 581                 }
 582
 583         if (divname != "") {
 584                 var cp = new PopupWindow(divname);
 585                 }
 586         else {
 587                 var cp = new PopupWindow();
 588                 cp.setSize(225,250);
 589                 }
 590
 591         // Object variables
 592         cp.currentValue = "#FFFFFF";
 593
 594         // Method Mappings
 595         cp.writeDiv = ColorPicker_writeDiv;
 596         cp.highlightColor = ColorPicker_highlightColor;
 597         cp.show = ColorPicker_show;
 598         cp.select = ColorPicker_select;
 599
 600         // Code to populate color picker window
 601         var colors = new Array( "#4180B6","#69AEE7","#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099",
 602                                                         "#3300CC","#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",
 603                                                         "#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066","#FF0099",
 604                                                         "#FF00CC","#FF00FF","#7FFFFF","#7FFFFF","#7FF7F7","#7FEFEF","#7FE7E7","#7FDFDF","#7FD7D7","#7FCFCF","#7FC7C7","#7FBFBF",
 605                                                         "#7FB7B7","#7FAFAF","#7FA7A7","#7F9F9F","#7F9797","#7F8F8F","#7F8787","#7F7F7F","#7F7777","#7F6F6F","#7F6767","#7F5F5F",
 606                                                         "#7F5757","#7F4F4F","#7F4747","#7F3F3F","#7F3737","#7F2F2F","#7F2727","#7F1F1F","#7F1717","#7F0F0F","#7F0707","#7F0000",
 607
 608                                                         "#4180B6","#69AEE7","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333","#333366","#333399",
 609                                                         "#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300","#993333","#993366","#993399",
 610                                                         "#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#FF3300","#FF3333","#FF3366","#FF3399",
 611                                                         "#FF33CC","#FF33FF","#FF7FFF","#FF7FFF","#F77FF7","#EF7FEF","#E77FE7","#DF7FDF","#D77FD7","#CF7FCF","#C77FC7","#BF7FBF",
 612                                                         "#B77FB7","#AF7FAF","#A77FA7","#9F7F9F","#977F97","#8F7F8F","#877F87","#7F7F7F","#777F77","#6F7F6F","#677F67","#5F7F5F",
 613                                                         "#577F57","#4F7F4F","#477F47","#3F7F3F","#377F37","#2F7F2F","#277F27","#1F7F1F","#177F17","#0F7F0F","#077F07","#007F00",
 614
 615                                                         "#4180B6","#69AEE7","#006600","#006633","#006666","#006699","#0066CC","#0066FF","#336600","#336633","#336666","#336699",
 616                                                         "#3366CC","#3366FF","#666600","#666633","#666666","#666699","#6666CC","#6666FF","#996600","#996633","#996666","#996699",
 617                                                         "#9966CC","#9966FF","#CC6600","#CC6633","#CC6666","#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699",
 618                                                         "#FF66CC","#FF66FF","#FFFF7F","#FFFF7F","#F7F77F","#EFEF7F","#E7E77F","#DFDF7F","#D7D77F","#CFCF7F","#C7C77F","#BFBF7F",
 619                                                         "#B7B77F","#AFAF7F","#A7A77F","#9F9F7F","#97977F","#8F8F7F","#87877F","#7F7F7F","#77777F","#6F6F7F","#67677F","#5F5F7F",
 620                                                         "#57577F","#4F4F7F","#47477F","#3F3F7F","#37377F","#2F2F7F","#27277F","#1F1F7F","#17177F","#0F0F7F","#07077F","#00007F",
 621
 622                                                         "#4180B6","#69AEE7","#009900","#009933","#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999",
 623                                                         "#3399CC","#3399FF","#669900","#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999",
 624                                                         "#9999CC","#9999FF","#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999",
 625                                                         "#FF99CC","#FF99FF","#3FFFFF","#3FFFFF","#3FF7F7","#3FEFEF","#3FE7E7","#3FDFDF","#3FD7D7","#3FCFCF","#3FC7C7","#3FBFBF",
 626                                                         "#3FB7B7","#3FAFAF","#3FA7A7","#3F9F9F","#3F9797","#3F8F8F","#3F8787","#3F7F7F","#3F7777","#3F6F6F","#3F6767","#3F5F5F",
 627                                                         "#3F5757","#3F4F4F","#3F4747","#3F3F3F","#3F3737","#3F2F2F","#3F2727","#3F1F1F","#3F1717","#3F0F0F","#3F0707","#3F0000",
 628
 629                                                         "#4180B6","#69AEE7","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",
 630                                                         "#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66","#99CC99",
 631                                                         "#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33","#FFCC66","#FFCC99",
 632                                                         "#FFCCCC","#FFCCFF","#FF3FFF","#FF3FFF","#F73FF7","#EF3FEF","#E73FE7","#DF3FDF","#D73FD7","#CF3FCF","#C73FC7","#BF3FBF",
 633                                                         "#B73FB7","#AF3FAF","#A73FA7","#9F3F9F","#973F97","#8F3F8F","#873F87","#7F3F7F","#773F77","#6F3F6F","#673F67","#5F3F5F",
 634                                                         "#573F57","#4F3F4F","#473F47","#3F3F3F","#373F37","#2F3F2F","#273F27","#1F3F1F","#173F17","#0F3F0F","#073F07","#003F00",
 635
 636                                                         "#4180B6","#69AEE7","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00","#33FF33","#33FF66","#33FF99",
 637                                                         "#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF","#99FF00","#99FF33","#99FF66","#99FF99",
 638                                                         "#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC","#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99",
 639                                                         "#FFFFCC","#FFFFFF","#FFFF3F","#FFFF3F","#F7F73F","#EFEF3F","#E7E73F","#DFDF3F","#D7D73F","#CFCF3F","#C7C73F","#BFBF3F",
 640                                                         "#B7B73F","#AFAF3F","#A7A73F","#9F9F3F","#97973F","#8F8F3F","#87873F","#7F7F3F","#77773F","#6F6F3F","#67673F","#5F5F3F",
 641                                                         "#57573F","#4F4F3F","#47473F","#3F3F3F","#37373F","#2F2F3F","#27273F","#1F1F3F","#17173F","#0F0F3F","#07073F","#00003F",
 642
 643                                                         "#4180B6","#69AEE7","#FFFFFF","#FFEEEE","#FFDDDD","#FFCCCC","#FFBBBB","#FFAAAA","#FF9999","#FF8888","#FF7777","#FF6666",
 644                                                         "#FF5555","#FF4444","#FF3333","#FF2222","#FF1111","#FF0000","#FF0000","#FF0000","#FF0000","#EE0000","#DD0000","#CC0000",
 645                                                         "#BB0000","#AA0000","#990000","#880000","#770000","#660000","#550000","#440000","#330000","#220000","#110000","#000000",
 646                                                         "#000000","#000000","#000000","#001111","#002222","#003333","#004444","#005555","#006666","#007777","#008888","#009999",
 647                                                         "#00AAAA","#00BBBB","#00CCCC","#00DDDD","#00EEEE","#00FFFF","#00FFFF","#00FFFF","#00FFFF","#11FFFF","#22FFFF","#33FFFF",
 648                                                         "#44FFFF","#55FFFF","#66FFFF","#77FFFF","#88FFFF","#99FFFF","#AAFFFF","#BBFFFF","#CCFFFF","#DDFFFF","#EEFFFF","#FFFFFF",
 649
 650                                                         "#4180B6","#69AEE7","#FFFFFF","#EEFFEE","#DDFFDD","#CCFFCC","#BBFFBB","#AAFFAA","#99FF99","#88FF88","#77FF77","#66FF66",
 651                                                         "#55FF55","#44FF44","#33FF33","#22FF22","#11FF11","#00FF00","#00FF00","#00FF00","#00FF00","#00EE00","#00DD00","#00CC00",
 652                                                         "#00BB00","#00AA00","#009900","#008800","#007700","#006600","#005500","#004400","#003300","#002200","#001100","#000000",
 653                                                         "#000000","#000000","#000000","#110011","#220022","#330033","#440044","#550055","#660066","#770077","#880088","#990099",
 654                                                         "#AA00AA","#BB00BB","#CC00CC","#DD00DD","#EE00EE","#FF00FF","#FF00FF","#FF00FF","#FF00FF","#FF11FF","#FF22FF","#FF33FF",
 655                                                         "#FF44FF","#FF55FF","#FF66FF","#FF77FF","#FF88FF","#FF99FF","#FFAAFF","#FFBBFF","#FFCCFF","#FFDDFF","#FFEEFF","#FFFFFF",
 656
 657                                                         "#4180B6","#69AEE7","#FFFFFF","#EEEEFF","#DDDDFF","#CCCCFF","#BBBBFF","#AAAAFF","#9999FF","#8888FF","#7777FF","#6666FF",
 658                                                         "#5555FF","#4444FF","#3333FF","#2222FF","#1111FF","#0000FF","#0000FF","#0000FF","#0000FF","#0000EE","#0000DD","#0000CC",
 659                                                         "#0000BB","#0000AA","#000099","#000088","#000077","#000066","#000055","#000044","#000033","#000022","#000011","#000000",
 660                                                         "#000000","#000000","#000000","#111100","#222200","#333300","#444400","#555500","#666600","#777700","#888800","#999900",
 661                                                         "#AAAA00","#BBBB00","#CCCC00","#DDDD00","#EEEE00","#FFFF00","#FFFF00","#FFFF00","#FFFF00","#FFFF11","#FFFF22","#FFFF33",
 662                                                         "#FFFF44","#FFFF55","#FFFF66","#FFFF77","#FFFF88","#FFFF99","#FFFFAA","#FFFFBB","#FFFFCC","#FFFFDD","#FFFFEE","#FFFFFF",
 663
 664                                                         "#4180B6","#69AEE7","#FFFFFF","#FFFFFF","#FBFBFB","#F7F7F7","#F3F3F3","#EFEFEF","#EBEBEB","#E7E7E7","#E3E3E3","#DFDFDF",
 665                                                         "#DBDBDB","#D7D7D7","#D3D3D3","#CFCFCF","#CBCBCB","#C7C7C7","#C3C3C3","#BFBFBF","#BBBBBB","#B7B7B7","#B3B3B3","#AFAFAF",
 666                                                         "#ABABAB","#A7A7A7","#A3A3A3","#9F9F9F","#9B9B9B","#979797","#939393","#8F8F8F","#8B8B8B","#878787","#838383","#7F7F7F",
 667                                                         "#7B7B7B","#777777","#737373","#6F6F6F","#6B6B6B","#676767","#636363","#5F5F5F","#5B5B5B","#575757","#535353","#4F4F4F",
 668                                                         "#4B4B4B","#474747","#434343","#3F3F3F","#3B3B3B","#373737","#333333","#2F2F2F","#2B2B2B","#272727","#232323","#1F1F1F",
 669                                                         "#1B1B1B","#171717","#131313","#0F0F0F","#0B0B0B","#070707","#030303","#000000","#000000","#000000","#000000","#000000");
 670         var total = colors.length;
 671         var width = 72;
 672         var cp_contents = "";
 673         var windowRef = (windowMode)?"window.opener.":"";
 674         if (windowMode) {
 675                 cp_contents += "<html><head><title>Select Color</title></head>";
 676                 cp_contents += "<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0><span style='text-align: center;'>";
 677                 }
 678         cp_contents += "<table style='border: none;' cellspacing=0 cellpadding=0>";
 679         var use_highlight = (document.getElementById || document.all)?true:false;
 680         for (var i=0; i<total; i++) {
 681                 if ((i % width) == 0) { cp_contents += "<tr>"; }
 682                 if (use_highlight) { var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(\''+colors[i]+'\',window.document)"'; }
 683                 else { mo = ""; }
 684                 cp_contents += '<td style="background-color: '+colors[i]+';"><a href="javascript:void()" onclick="'+windowRef+'ColorPicker_pickColor(\''+colors[i]+'\','+windowRef+'window.popupWindowObjects['+cp.index+']);return false;" '+mo+'>&nbsp;</a></td>';
 685                 if ( ((i+1)>=total) || (((i+1) % width) == 0)) {
 686                         cp_contents += "</tr>";
 687                         }
 688                 }
 689         // If the browser supports dynamically changing TD cells, add the fancy stuff
 690         if (document.getElementById) {
 691                 var width1 = Math.floor(width/2);
 692                 var width2 = width = width1;
 693                 cp_contents += "<tr><td colspan='"+width1+"' style='background-color: #FFF;' ID='colorPickerSelectedColor'>&nbsp;</td><td colspan='"+width2+"' style='text-align: center;' id='colorPickerSelectedColorValue'>#FFFFFF</td></tr>";
 694                 }
 695         cp_contents += "</table>";
 696         if (windowMode) {
 697                 cp_contents += "</span></body></html>";
 698                 }
 699         // end populate code
 700
 701         // Write the contents to the popup object
 702         cp.populate(cp_contents+"\n");
 703         // Move the table down a bit so you can see it
 704         cp.offsetY = 25;
 705         cp.autoHide();
 706         return cp;
 707         }