[Summary view] [Print] [Text view]

   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      }