1 // ===================================================================
2 // Author: Matt Kruse <matt@mattkruse.com>
3 // WWW: http://www.mattkruse.com/
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.
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 // ===================================================================
22 /* SOURCE FILE: AnchorPosition.js */
27 Last modified: 10/11/02
29 DESCRIPTION: These functions find the position of an <A> tag in a document,
30 so other elements can be positioned relative to it.
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
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.
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.
47 1) For popping up separate browser windows, use getAnchorWindowPosition.
48 Otherwise, use getAnchorPosition
50 2) Your anchor tag MUST contain both NAME and ID attributes which are the
52 <A NAME="test" ID="test"> </A>
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.
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
64 var coordinates=new Object();
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]);
77 var o=document.getElementById(anchorname);
78 x=AnchorPosition_getPageOffsetLeft(o);
79 y=AnchorPosition_getPageOffsetTop(o);
82 x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
83 y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
85 else if (use_layers) {
87 for (var i=0; i<document.anchors.length; i++) {
88 if (document.anchors[i].name==anchorname) { found=1; break; }
91 coordinates.x=0; coordinates.y=0; return coordinates;
93 x=document.anchors[i].x;
94 y=document.anchors[i].y;
97 coordinates.x=0; coordinates.y=0; return coordinates;
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);
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;
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;
121 else if (document.all) {
122 x=coordinates.x-document.body.scrollLeft+window.screenLeft;
123 y=coordinates.y-document.body.scrollTop+window.screenTop;
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;
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; }
140 function AnchorPosition_getWindowOffsetLeft (el) {
141 return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
143 function AnchorPosition_getPageOffsetTop (el) {
145 while((el=el.offsetParent) != null) { ot += el.offsetTop; }
148 function AnchorPosition_getWindowOffsetTop (el) {
149 return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
152 /* SOURCE FILE: PopupWindow.js */
157 Last modified: 02/16/04
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
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.
169 // Create an object for a WINDOW popup
170 var win = new PopupWindow();
172 // Create an object for a DIV window using the DIV named 'mydiv'
173 var win = new PopupWindow('mydiv');
175 // Set the window to automatically hide itself when the user clicks
176 // anywhere else on the page except the popup
179 // Show the window relative to the anchor name passed in
180 win.showPopup(anchorname);
185 // Set the size of the popup window (only applies to WINDOW popups
186 win.setSize(width,height);
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);
192 // set the URL of the window, rather than populating its contents
194 win.setUrl("http://www.site.com/");
196 // Refresh the contents of the popup
199 // Specify how many pixels to the right of the anchor the popup will appear
202 // Specify how many pixels below the anchor the popup will appear
206 1) Requires the functions in AnchorPosition.js
208 2) Your anchor tag MUST contain both NAME and ID attributes which are the
210 <A NAME="test" ID="test"> </A>
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.
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.
221 // Set the position of the popup window based on the anchor
222 function PopupWindow_getXYPosition(anchorname) {
224 if (this.type == "WINDOW") {
225 coordinates = getAnchorWindowPosition(anchorname);
228 coordinates = getAnchorPosition(anchorname);
230 this.x = coordinates.x;
231 this.y = coordinates.y;
233 // Set width/height of DIV/popup window
234 function PopupWindow_setSize(width,height) {
236 this.height = height;
238 // Fill the window with contents
239 function PopupWindow_populate(contents) {
240 this.contents = contents;
241 this.populated = false;
243 // Set the URL to go to
244 function PopupWindow_setUrl(url) {
247 // Set the window popup properties
248 function PopupWindow_setWindowProperties(props) {
249 this.windowProperties = props;
251 // Refresh the displayed contents of the popup
252 function PopupWindow_refresh() {
253 if (this.divName != null) {
254 // refresh the DIV object
256 document.getElementById(this.divName).innerHTML = this.contents;
258 else if (this.use_css) {
259 document.all[this.divName].innerHTML = this.contents;
261 else if (this.use_layers) {
262 var d = document.layers[this.divName];
264 d.document.writeln(this.contents);
269 if (this.popupWindow != null && !this.popupWindow.closed) {
271 this.popupWindow.location.href=this.url;
274 this.popupWindow.document.open();
275 this.popupWindow.document.writeln(this.contents);
276 this.popupWindow.document.close();
278 this.popupWindow.focus();
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;
291 if (this.divName != null) {
292 // Show the DIV object
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";
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";
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";
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;
319 if (screen && screen.availWidth) {
320 if ((this.x + this.width) > screen.availWidth) {
321 this.x = screen.availWidth - this.width;
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+"");
331 function PopupWindow_hidePopup() {
332 if (this.divName != null) {
334 document.getElementById(this.divName).style.visibility = "hidden";
336 else if (this.use_css) {
337 document.all[this.divName].style.visibility = "hidden";
339 else if (this.use_layers) {
340 document.layers[this.divName].visibility = "hidden";
344 if (this.popupWindow && !this.popupWindow.closed) {
345 this.popupWindow.close();
346 this.popupWindow = null;
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)) {
360 else { return false; }
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) {
372 else if (this.use_gebi && e) {
373 var t = e.originalTarget;
374 while (t.parentNode != null) {
375 if (t.id==this.divName) {
387 // Check an onMouseDown event to see if we should hide
388 function PopupWindow_hideIfNotClicked(e) {
389 if (this.autoHideEnabled && !this.isClicked(e)) {
393 // Call this to make the DIV disable automatically when mouse is clicked outside it
394 function PopupWindow_autoHide() {
395 this.autoHideEnabled = true;
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);
406 // Run this immediately to attach the event listener
407 function PopupWindow_attachListener() {
408 if (document.layers) {
409 document.captureEvents(Event.MOUSEUP);
411 window.popupWindowOldEventListener = document.onmouseup;
412 if (window.popupWindowOldEventListener != null) {
413 document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupWindow_hidePopupWindows();");
416 document.onmouseup = PopupWindow_hidePopupWindows;
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();
428 this.index = popupWindowIndex++;
429 popupWindowObjects[this.index] = this;
431 this.popupWindow = null;
434 this.populated = false;
435 this.visible = false;
436 this.autoHideEnabled = false;
440 this.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no";
441 if (arguments.length>0) {
443 this.divName = arguments[0];
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"; }
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;
471 /* SOURCE FILE: ColorPicker2.js */
474 Last modified: 02/24/2003
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.
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.
485 // Create a new ColorPicker object using DHTML popup
486 var cp = new ColorPicker();
488 // Create a new ColorPicker object using Window Popup
489 var cp = new ColorPicker('window');
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>
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>
497 // If using DHTML popup, write out the required DIV tag near the bottom
499 <SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>
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) {
510 1) Requires the functions in AnchorPosition.js and PopupWindow.js
512 2) Your anchor tag MUST contain both NAME and ID attributes which are the
514 <A NAME="test" ID="test"> </A>
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.
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.
524 ColorPicker_targetInput = null;
525 function ColorPicker_writeDiv() {
526 document.writeln("<DIV ID=\"colorPickerDiv\" STYLE=\"position:absolute;visibility:hidden;\"> </DIV>");
529 function ColorPicker_show(anchorname) {
530 this.showPopup(anchorname);
533 function ColorPicker_pickColor(color,obj) {
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!");
545 ColorPicker_targetInput.value = color;
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;
556 window.ColorPicker_targetInput = inputobj;
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");
569 function ColorPicker() {
570 var windowMode = false;
571 // Create a new PopupWindow object
572 if (arguments.length==0) {
573 var divname = "colorPickerDiv";
575 else if (arguments[0] == "window") {
580 var divname = arguments[0];
584 var cp = new PopupWindow(divname);
587 var cp = new PopupWindow();
592 cp.currentValue = "#FFFFFF";
595 cp.writeDiv = ColorPicker_writeDiv;
596 cp.highlightColor = ColorPicker_highlightColor;
597 cp.show = ColorPicker_show;
598 cp.select = ColorPicker_select;
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",
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",
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",
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",
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",
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",
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",
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",
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",
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;
672 var cp_contents = "";
673 var windowRef = (windowMode)?"window.opener.":"";
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;'>";
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)"'; }
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+'> </a></td>';
685 if ( ((i+1)>=total) || (((i+1) % width) == 0)) {
686 cp_contents += "</tr>";
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'> </td><td colspan='"+width2+"' style='text-align: center;' id='colorPickerSelectedColorValue'>#FFFFFF</td></tr>";
695 cp_contents += "</table>";
697 cp_contents += "</span></body></html>";
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