
<!--

var preload = "";
preload.src = "colorpicker/UNDO.GIF";
preload.src = "colorpicker/undo_button.gif";
preload.src = "colorpicker/colorbar.gif";
preload.src = "colorpicker/tack.gif";
preload.src = "colorpicker/blank.gif";
preload.src = "colorpicker/cp_lg_background.gif";
preload.src = "colorpicker/cp_lg_overlay.png;"
preload.src = "colorpicker/cp_info_1.gif;"
preload.src = "colorpicker/cp_color_slider.jpg;"
preload.src = "colorpicker/cp_arrows.gif;"
preload.src = "colorpicker/cp_cur_color_background.gif;"

        var R = 0;
        var G = 0;
        var B = 0;
        var k = 0;
	var color="#FF0000";
        var colorspaper="#EEEEEE";
        var image = "colorpicker/blank.gif";
	var colorspaper_string = "";
        var hexcolor = "#FF0000";
        var hex_array = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
        var rgbcolor = "rgb(255,0,0)";
        var rbg_array = new Array();
        var R_G_B_array = new Array(256);

function show_colorbar()
{
top.colorbar.blankDiv.style.visibility = "hidden";
top.colorbar.menuDiv.style.visibility = "visible";
}

function hide_colorbar()
{
top.colorbar.blankDiv.style.visibility = "visible";
top.colorbar.menuDiv.style.visibility = "hidden";
}

function init_colorpicker()
{
	var inp1 = document.getElementById('colorpicker');

	if(inp1) attachColorPicker(inp1, true);
//	if(inp2) attachColorPicker(inp2, true);

	hexcolor = top.colorbar.document.body.bgColor;
	rgbcolor = hex2rgb(hexcolor);
	if(hexcolor != "#000000")
	{
	 document.colors.rgb.value = hex2rgb(hexcolor);
	}
}

window.onload = init_colorpicker;

function HexToR(h) { return parseInt((cutHex(h)).substring(0,2),16) }
function HexToG(h) { return parseInt((cutHex(h)).substring(2,4),16) }
function HexToB(h) { return parseInt((cutHex(h)).substring(4,6),16) }
function cutHex(h) { return (h.charAt(0)=="#") ? h.substring(1,7) : h}

function hex_numbers()
{
 for (i = 0; i < 16; i++) 
  {
    for (j = 0; j < 16; j++)
     {
      R_G_B_array[k] = hex_array[i] + hex_array[j];
      k++;
     }
  }
}

function split_rgbcolor()
{
 var temp = new Array();
 temp = rgbcolor.split("(");
 rgbcolor = temp[1];
 temp = rgbcolor.split(")");
 rgbcolor = temp[0];
 rgb_array = rgbcolor.split(",");
 R = rgb_array[0];
 G = rgb_array[1];
 B = rgb_array[2];
}

function dropLeadingZeros(num)
{
  while (num.charAt(0) == "0")
  {
   newTerm = num.substring(1, num.length);
   num = newTerm;
  }
  if (num == "")
  {
   num = "0";
  }
  return num;
}

function rgb2hex(rgbcolor)
{
hex_numbers();
split_rgbcolor();
 while ((R > 255) || (R < 0)) 
  {
   R = 0;
  }
 while ((G > 255) || (G < 0))
  {
   G = 0;
  }		
 while ((B > 255) || (B < 0))
  {
   B = 0;
  }
 if (R == "")
   R = 0;
 if (G == "")
   G = 0;
 if (B == "")
   B = 0;
 R = dropLeadingZeros(R);
 G = dropLeadingZeros(G);
 B = dropLeadingZeros(B);
 rr = R_G_B_array[R]
 gg = R_G_B_array[G]
 bb = R_G_B_array[B]
 hexcolor = "#" + rr + gg + bb;	
 return hexcolor;
}

function hex2rgb(hexcolor)
{
R = HexToR(hexcolor);
G = HexToG(hexcolor);
B = HexToB(hexcolor);
rgbcolor = "rgb(" + R + "," + G + "," + B + ")";
return rgbcolor;
}

// ***************** FRAMES VERSION ONLY ************************

function getPage_color()
{
color = top.colorbar.document.body.bgColor;
top.mainwindow.document.body.bgColor = color;
image = top.colorbar.document.body.background;
top.mainwindow.document.body.background = image;
light = top.colorbar.lightDiv.style.filter;
top.mainwindow.lightDiv.style.filter = light;
window.focus();
}

function changePage_color(color)
{
top.colorbar.document.Wall.wall_color.value = hex2rgb(color);
top.colorbar.document.body.bgColor = color;
top.mainwindow.document.body.bgColor = color;
window.focus();
}

function storePage_color1()
{
swatch1 = top.mainwindow.colors.rgb.value;
//top.colorbar.document.stored.swatch1.value = swatch1;
top.colorbar.document.stored.swatch1.style.backgroundColor = top.colorbar.document.body.bgColor;
top.colorbar.document.stored.swatch1.style.backgroundImage = "url(colorpicker/blank.gif)";
top.colorbar.document.stored.backgrnd1.value = top.mainwindow.document.body.background;
top.colorbar.document.stored.light1.value = top.mainwindow.lightDiv.style.filter;
window.focus();
}

function storePage_color2()
{
swatch2 = top.mainwindow.colors.rgb.value;
//top.colorbar.document.stored.swatch2.value = swatch2;
top.colorbar.document.stored.swatch2.style.backgroundColor = top.colorbar.document.body.bgColor;
top.colorbar.document.stored.swatch2.style.backgroundImage = "url(colorpicker/blank.gif)";
top.colorbar.document.stored.backgrnd2.value = top.mainwindow.document.body.background;
top.colorbar.document.stored.light2.value = top.mainwindow.lightDiv.style.filter;
window.focus();
}

function getStored_color1()
{
 if (top.colorbar.document.body.bgColor != "#000000")
  {
   hexcolor = top.colorbar.document.stored.swatch1.style.backgroundColor;
   top.mainwindow.document.body.bgColor = hexcolor;
   top.colorbar.document.body.bgColor = hexcolor;
   top.colorbar.document.Wall.wall_color.value = hex2rgb(hexcolor);
   top.mainwindow.colors.rgb.value = hex2rgb(hexcolor);
   top.mainwindow.document.body.background = top.colorbar.document.stored.backgrnd1.value;
   top.colorbar.document.body.background = top.colorbar.document.stored.backgrnd1.value;
   top.mainwindow.lightDiv.style.filter = top.colorbar.document.stored.light1.value;
   top.colorbar.lightDiv.style.filter = top.colorbar.document.stored.light1.value;
  }
window.focus();
}

function getStored_color2()
{
 if (top.colorbar.document.body.bgColor != "#000000")
  {
   hexcolor = top.colorbar.document.stored.swatch2.style.backgroundColor;
   top.mainwindow.document.body.bgColor = hexcolor;
   top.colorbar.document.body.bgColor = hexcolor;
   top.colorbar.document.Wall.wall_color.value = hex2rgb(hexcolor);
   top.mainwindow.colors.rgb.value = hex2rgb(hexcolor);
   top.mainwindow.document.body.background = top.colorbar.document.stored.backgrnd2.value;
   top.colorbar.document.body.background = top.colorbar.document.stored.backgrnd2.value;
   top.mainwindow.lightDiv.style.filter = top.colorbar.document.stored.light2.value;
   top.colorbar.lightDiv.style.filter = top.colorbar.document.stored.light2.value;
  }
window.focus();
}

function changePage_background(image)
{
top.colorbar.document.body.background = image;
top.mainwindow.document.body.background = image;
window.focus();
}

function change_lighting(image)
{
top.colorbar.lightDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" + image + "', sizingMethod='scale')";
top.mainwindow.lightDiv.style.filter = top.colorbar.lightDiv.style.filter;
window.focus();
}

function resetPage_color()
{
var defaultcolor = "#000000";
image = "colorpicker/blank.gif";
top.mainwindow.document.body.bgColor = defaultcolor;
top.mainwindow.document.body.background = image;
top.colorbar.document.body.bgColor = defaultcolor;
top.colorbar.document.body.background = image;
top.colorbar.lightDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='colorpicker/blank.gif', sizingMethod='scale')";
top.mainwindow.lightDiv.style.filter = top.colorbar.lightDiv.style.filter;
// top.mainwindow.colors.colorpicker.value = "Colors + Patterns";
window.focus();
}

function resetPage_background()
{
image = "colorpicker/blank.gif";
top.mainwindow.document.body.background = image;
top.colorbar.document.body.background = image;
window.focus();
}

function reset_lighting()
{
top.colorbar.lightDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='colorpicker/blank.gif', sizingMethod='scale')";
top.mainwindow.lightDiv.style.filter = top.colorbar.lightDiv.style.filter;
window.focus();
}

(function colorPickerNamespace()
{
	var cp = null;

	// so we can convert names to hex codes
	var colorNames = {'aliceblue':'F0F8FF','darkslategray':'2F4F4F','lightsalmon':'FFA07A','palevioletred':'DB7093','antiquewhite':'FAEBD7','darkturquoise':'00CED1','lightseagreen':'20B2AA','papayawhip':'FFEFD5','aqua':'00FFFF','darkviolet':'9400D3','lightskyblue':'87CEFA','peachpuff':'FFDAB9','aquamarine':'7FFFD4','deeppink':'FF1493','lightslategray':'778899','peru':'CD853F','azure':'F0FFFF','deepskyblue':'00BFFF','lightsteelblue':'B0C4DE','pink':'FFC0CB','beige':'F5F5DC','dimgray':'696969','lightyellow':'FFFFE0','plum':'DDA0DD','bisque':'FFE4C4','dodgerblue':'1E90FF','lime':'00FF00','powderblue':'B0E0E6','black':'000000','firebrick':'B22222','limegreen':'32CD32','purple':'800080','blanchedalmond':'FFEBCD','floralwhite':'FFFAF0','linen':'FAF0E6','red':'FF0000','blue':'0000FF','forestgreen':'228B22','magenta':'FF00FF','rosybrown':'BC8F8F','blueviolet':'8A2BE2','fuchsia':'FF00FF','maroon':'800000','royalblue':'4169E1','brown':'A52A2A','gainsboro':'DCDCDC','mediumaquamarine':'66CDAA','saddlebrown':'8B4513','burlywood':'DEB887','ghostwhite':'F8F8FF','mediumblue':'0000CD','salmon':'FA8072','cadetblue':'5F9EA0','gold':'FFD700','mediumorchid':'BA55D3','sandybrown':'F4A460','chartreuse':'7FFF00','goldenrod':'DAA520','mediumpurple':'9370DB','seagreen':'2E8B57','chocolate':'D2691E','gray':'808080','mediumseagreen':'3CB371','seashell':'FFF5EE','coral':'FF7F50','green':'008000','mediumslateblue':'7B68EE','sienna':'A0522D','cornflowerblue':'6495ED','greenyellow':'ADFF2F','mediumspringgreen':'00FA9A','silver':'C0C0C0','cornsilk':'FFF8DC','honeydew':'F0FFF0','mediumturquoise':'48D1CC','skyblue':'87CEEB','crimson':'DC143C','hotpink':'FF69B4','mediumvioletred':'C71585','slateblue':'6A5ACD','cyan':'00FFFF','indianred':'CD5C5C','midnightblue':'191970','slategray':'708090','darkblue':'00008B','indigo':'4B0082','mintcream':'F5FFFA','snow':'FFFAFA','darkcyan':'008B8B','ivory':'FFFFF0','mistyrose':'FFE4E1','springgreen':'00FF7F','darkgoldenrod':'B8860B','khaki':'F0E68C','moccasin':'FFE4B5','steelblue':'4682B4','darkgray':'A9A9A9','lavender':'E6E6FA','navajowhite':'FFDEAD','tan':'D2B48C','darkgreen':'006400','lavenderblush':'FFF0F5','navy':'000080','teal':'008080','darkkhaki':'BDB76B','lawngreen':'7CFC00','oldlace':'FDF5E6','thistle':'D8BFD8','darkmagenta':'8B008B','lemonchiffon':'FFFACD','olive':'808000','tomato':'FD6347','darkolivegreen':'556B2F','lightblue':'ADD8E6','olivedrab':'6B8E23','turquoise':'40E0D0','darkorange':'FF8C00','lightcoral':'F08080','orange':'FFA500','violet':'EE82EE','darkorchid':'9932CC','lightcyan':'E0FFFF','orangered':'FF4500','wheat':'F5DEB3','darkred':'8B0000','lightgoldenrodyellow':'FAFAD2','orchid':'DA70D6','white':'FFFFFF','darksalmon':'E9967A','lightgreen':'90EE90','palegoldenrod':'EEE8AA','whitesmoke':'F5F5F5','darkseagreen':'8FBC8F','lightgrey':'D3D3D3','palegreen':'98FB98','yellow':'FFFF00','darkslateblue':'483D8B','lightpink':'FFB6C1','paleturquoise':'AFEEEE','yellowgreen':'9ACD32'};

	function hex(c)
        {
		c=parseInt(c).toString(16);
		return c.length<2?"0"+c:c
	}

	function mouseCoordinates(ev)
        {
		ev = ev || window.event;
		if(ev.pageX || ev.pageY)
			return {x:ev.pageX, y:ev.pageY};
		return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
				  y:ev.clientY + document.body.scrollTop  - document.body.clientTop};
	}

	function getPosition(obj)
        {
		var left = 0;
		var top  = 0;

		while (obj.offsetParent){
			left += obj.offsetLeft;
			top  += obj.offsetTop;
			obj   = obj.offsetParent;
		}
		left += obj.offsetLeft;
		top  += obj.offsetTop;

		return {x:left, y:top};
	}

	function $DOM(A)
        {
		var aL = A.length, node, child, ref={}, bRef=false;
		if(aL>=1){
			node = cE(A[0]);
			if(aL>=2){
				for(var arg in A[1]){
					if(arg.indexOf('on')==0){
						node[arg] = A[1][arg];
					}else if(arg=='ref'){
						ref[A[1][arg]] = node;
						ref['DOM']     = node;
						bRef           = true;
					}else{
						if(arg=='style'){
							node.style.cssText   = A[1][arg];
						} else if(arg.toLowerCase()=='classname'){
							node.style.className = A[1][arg];
						} else {
							node.setAttribute(arg, A[1][arg]);
						}
					}
				}
			}
			for(var i=2; i<aL; i++){
				if(typeof(A[i])=='string'){
					node.appendChild(document.createTextNode(A[i]));
				} else {
					child = $DOM(A[i]);
					if(child.DOM){
						bRef = true;
						for(n in child){
							if(n=='DOM'){
								node.appendChild(child[n]);
							}else{
								ref[n] = child[n];
							}
						}
						ref['DOM'] = node;
					}else{
						node.appendChild(child);
					}
				}
			}
			return bRef?ref:node;
		}
		return null;
	}

	function cE()
        {
		var A = arguments;

		if(!cE.cache[A[0]]) cE.cache[A[0]]=document.createElement(A[0]);
		return cE.cache[A[0]].cloneNode(false);
	}
	cE.cache    = {};

	function createColorPicker()
        {
		if(cp) return;

		var imgBase = "colorpicker/";

		cp = $DOM(
			['DIV', {style:'position:absolute; top:0px; left:0px; font-family: Trebuchet MS, Arial, sans-serif; font-size:10px; line-height:10px; font-weight:light; font-color:black;', ref:'ColorPicker'},
				['DIV', {style:'background-color:#FFF;line-height:2px;width:423px;width:424px;height:21px;border:1px solid #000;', ref:'hColorPicker'},
					['DIV', {style:'width:50px;height:21px;border-right:1px solid #FFF;float:left;', ref:'hColorDiv'}],
					['DIV', {style:'float:left;'},
						['IMG', {style:'cursor:pointer;', src:imgBase +'cp_horizontal_picker.jpg', width:350, height:21, onmousemove:hColorPickerMouseMove, onmousedown:hColorPickerMouseDown, ref:'hColorImg'}],
						['IMG', {style:'cursor:pointer;margin-left:1px;', src:imgBase +'cp_mini_icon.gif', width:21, height:21, ref:'hColorIcon', onClick:show_patternbox}]
					]
				],
				['DIV', {style:'border:1px solid #000;width:390px;height:305px;position:relative;background-color:#EEEEEE;', ref:'fColorPicker'},
					['DIV', {style:'position:absolute;top:0px;left:0px;'}, ''],
					['IMG', {src:imgBase +'cp_info_1.gif', width:366, height:10, style:'position:absolute;top:8px;left:10px;', galleryimg:'yes'}],
					['INPUT', {type:'checkbox', style:'position:absolute;top:200px;left:7px;', ref:'websafeCheckbox'}],
					['IMG', {src:imgBase +'cp_lg_background.gif', width:260, height:260, style:'position:absolute;top:20px;left:44px;', galleryimg:'yes'}],
					['IMG', {src:imgBase +'cp_lg_overlay.png', width:256, height:256, style:'cursor:pointer;position:absolute;top:22px;left:46px;', galleryimg:'yes', ref:'fColorImg', onmousedown:cpMouseDown, onmouseup:cpMouseUp, onclick:cpMouseClick}],
					['IMG', {src:imgBase +'cp_color_slider.jpg', width:23, height:260, style:'cursor:pointer;position:absolute;top:20px;left:10px;z-index:2;', ref:'colorSlider', onmousedown:cpSliderMouseDown, onmouseup:cpSliderMouseUp, onclick:cpSliderClick}],
					['IMG', {src:imgBase +'cp_arrows.gif', width:40, height:9, style:'cursor:pointer;position:absolute;top:18px;left:1px;z-index:1;', ref:'Arrows', onmousedown:cpSliderMouseDown, onmouseup:cpSliderMouseUp, onclick:cpSliderClick}],
					['IMG', {src:imgBase +'blank.gif', width:0, height:0, style:'cursor:pointer;position:absolute;top:0px;left:0px;', alt:'', ref:'websafeImg', onclick:selectWebSafeColor}],
					['DIV', {style:'z-index:2;position:absolute;top:21px;left:315px;width:58px;height:57px;', ref:'curColorDiv'}],
					['DIV', {style:'z-index:2;cursor:hand;position:absolute;top:92px;left:315px;width:58px;height:58px;', ref:'OrigColorDiv', onclick:resetColor}],
					['IMG', {src:imgBase +'rgb.gif', width:18, height:69, style:'position:absolute;top:166px;left:316px;',ref:'rgb', galleryimg:'yes'}],
					['INPUT', {type: 'textbox', style:'position:absolute;top:163px;left:338px;width:36px;', ref:'rInput', onchange:setCPColor}],
					['INPUT', {type: 'textbox', style:'position:absolute;top:188px;left:338px;width:36px;', ref:'gInput', onchange:setCPColor}],
					['INPUT', {type: 'textbox', style:'position:absolute;top:213px;left:338px;width:36px;', ref:'bInput', onchange:setCPColor}],
					['INPUT', {type: 'textbox', style:'position:absolute;bottom:44px;left:308px;width:66px;height:20px;font-family:Trebuchet MS,Arial,sans-serif;font-size:14px;line-height:16px; font-weight:light; font-color:#000000;', ref:'hexcolor', onchange:setCPColor}],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:22px;left:306px;width:68px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', ref:'OK', onclick:hColorPickerMouseDown}, 'OK'],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:1px;left:306px;width:68px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', ref:'Close', onclick:hideColorPicker}, 'Close'],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:1px;left:10px;width:20px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', onclick:showhelp}, '?'],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:1px;left:42px;width:63px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', ref:'Patterns', onclick:show_patternbox}, 'Patterns'],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:1px;left:108px;width:63px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', ref:'Textures', onclick:show_texturebox}, 'Textures'],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:1px;left:174px;width:63px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', ref:'Lighting', onclick:show_lightingbox}, 'Lighting'],
					['BUTTON', {style:'cursor:hand;position:absolute;bottom:1px;left:240px;width:63px;height:20px;font-family: Trebuchet MS, Arial, sans-serif; font-size:12px; line-height:12px; font-weight:light; font-color:#969696;background-color:#B9CDFB', ref:'Framing', onclick:show_framingbox}, 'Framing'],
					['IMG', {src:imgBase +'cp_cur_color_background.gif', width:60, height:141, style:'position:absolute;top:20px;left:314px;'}]
				]
			]);

		document.onmousemove         = cpMouseMove;
		cp.baseColor                 = {r:255, g:0, b:0};
		document.body.appendChild(cp.ColorPicker);
		cp.ColorPicker.style.display = 'none';
		cp.OrigColorDiv.style.backgroundColor = top.colorbar.document.body.bgColor;
	}

	function getHorizColor(i, width, height)
        {
		var sWidth = (width)/7;         // "section" width
		var C=i%width;                  // column
		var R=Math.floor(i/(sWidth*7)); // row
		var c=i%sWidth;                 // column in current group
		var r, g, b, h;

		var l=(255/sWidth)*c;           // color percentage

		if(C>=sWidth*6){
			r=g=b=255-l;
		} else {
			h=255-l;

			r=C<sWidth?255:C<sWidth*2?h:C<sWidth*4?0:C<sWidth*5?l:255;
			g=C<sWidth?l:C<sWidth*3?255:C<sWidth*4?h:0;
			b=C<sWidth*2?0:C<sWidth*3?l:C<sWidth*5?255:h;

			if(R<(height/2)){
				var base = 255-(255*2/height)*R;

				r=base+(r*R*2/height);
				g=base+(g*R*2/height);
				b=base+(b*R*2/height);
			}else if(R>(height/2)){
				var base = (height-R)/(height/2);

				r=r*base;
				g=g*base;
				b=b*base;
			}
		}

		return hex(r)+hex(g)+hex(b);
	}

	function getVertColor(i, sZ)
        {
		var n=sZ/6, j=sZ/n, C=i, c=C%n;

		r=C<n?255:C<n*2?255-c*j:C<n*4?0:C<n*5?c*j:255;
		g=C<n*2?0:C<n*3?c*j:C<n*5?255:255-c*j;
		b=C<n?c*j:C<n*3?255:C<n*4?255-c*j:0;

		return {r:r, g:g, b:b};
	}

	function getGradientColor(x, y, Base)
        {
		x = x<0?0:x>255?255:x;
		y = y<0?0:y>255?255:y;

		var r = Math.round((1-(1-(Base.r/255))*(x/255))*(255-y));
		var g = Math.round((1-(1-(Base.g/255))*(x/255))*(255-y));
		var b = Math.round((1-(1-(Base.b/255))*(x/255))*(255-y));

		return {r:r, g:g, b:b};
	}

	function getWebSafeColor(color)
        {
		var rMod = color.r % 51;
		var gMod = color.g % 51;
		var bMod = color.b % 51;

		if((rMod==0) && (gMod==0) && (bMod==0)) return false;

		var wsColor={};

		wsColor.r=(rMod<=25?Math.floor(color.r/51)*51:Math.ceil(color.r/51)*51);
		wsColor.g=(gMod<=25?Math.floor(color.g/51)*51:Math.ceil(color.g/51)*51);
		wsColor.b=(bMod<=25?Math.floor(color.b/51)*51:Math.ceil(color.b/51)*51);

		return wsColor;
	}

	function hColorPickerMouseMove(ev)
        {
		ev            = ev || window.event;
		var hCPImg    = ev.target || ev.srcElement;

		var mousePos  = mouseCoordinates(ev);
		cp.colorPos   = getPosition(hCPImg);

		var x         = mousePos.x-cp.colorPos.x;
		var y         = mousePos.y-cp.colorPos.y;
		var width     = parseInt(hCPImg.offsetWidth);
		var height    = parseInt(hCPImg.offsetHeight);

		var color     = getHorizColor(y*width+x, width, height);

		cp.hColorDiv.style.backgroundColor = cp.cpColor = '#'+color;
	}

	function hColorPickerMouseDown()
        {
		cp.OrigColorDiv.style.backgroundColor = top.colorbar.document.body.bgColor;
		if(cp.cpColor.r || (cp.cpColor.r===0)) cp.cpColor = '#'+hex(cp.cpColor.r)+hex(cp.cpColor.g)+hex(cp.cpColor.b);
//		cp.cpInput.value = cp.cpColor;
// ***************** FRAMES VERSION ONLY ************************
//		cp.cpInput.value = hex2rgb(cp.cpColor);
//		rgbcolor = cp.cpInput.value;
//		hexcolor = rgb2hex(rgbcolor);
//		changePage_color(hexcolor);
		changePage_color(cp.cpColor);
// ****************** DISPLAY HEX COLOR ***********************
		cp.hexcolor.value = cp.cpColor;
	}

	function attachColorPicker(input, noLg)
        {
		createColorPicker();
		cp.OrigColorDiv.style.backgroundColor = top.colorbar.document.body.bgColor;
		if(noLg) input.setAttribute('noLg', 'l');
		input.onfocus = showLgColorPicker;
// ***************** FRAMES VERSION ONLY ************************
		input.onblur  = tryHideColorPicker;
		input.onclick = showLgColorPicker;
	}

	function showSmColorPicker(ev)
        {
		cp.clicked = true;
		showColorPicker(ev, 's');
	}

	function showLgColorPicker(ev)
        {
		cp.clicked = true;
		showColorPicker(ev, 'l');
	}

	function showColorPicker(ev, size)
        {
		ev         = ev        || window.event;
		var input  = ev.target || ev.srcElement;
		size       = size      || (cp.fColorPicker.style.display=='block'?'l':'s');

		cp.ColorPicker.style.display  = 'block';
		if(input.nodeName=='INPUT'){
			cp.cpInput = input;
		}

		cp.hColorIcon.style.display = cp.cpInput.getAttribute('noLg')=='1'?'none':'inline';
		cp.OrigColorDiv.style.backgroundColor = top.colorbar.document.body.bgColor;

		var inpPos = getPosition(cp.cpInput);

		cp.ColorPicker.style.left = inpPos.x;
		cp.ColorPicker.style.top  = inpPos.y+parseInt(cp.cpInput.offsetHeight);

		cp.hColorPicker.style.display = cp.fColorPicker.style.display = 'none';
		(size=='s'?cp.hColorPicker:cp.fColorPicker)['style'].display = 'block';

		if(size!='s'){
//		cp.baseColor = parseColor(cp.cpInput.value);
// ***************** FRAMES VERSION ONLY ************************
		if(top.colorbar.document.body.bgColor == "#000000")
		 {
		  cp.baseColor = parseColor("#FF0000");
		 }
		else
		 {
		  cp.baseColor = parseColor(top.colorbar.document.body.bgColor);
		 }
// ***************** FRAMES VERSION ONLY ************************
		setCPColor(cp.fColorImg.style.backgroundColor = cp.origColor = cp.OrigColorDiv.style.backgroundColor = '#'+hex(cp.baseColor.r)+hex(cp.baseColor.g)+hex(cp.baseColor.b));
		cp.sliderPos = getPosition(cp.colorSlider);
		}
	}


	function showhelp()
        {
		window.open('colorpicker/help.htm#COLORPICKER HELP','Help','status=1,scrollbars=1,resizable=1,width=640,height=480');
	}

	function tryHideColorPicker()
        {
		if(!cp.clicked) hideColorPicker();
	}

	function hideColorPicker()
        {
		cp.ColorPicker.style.display  = 'none';
	}

	function cpMouseDown(ev)
        {
		cp.cpPos       = getPosition(cp.fColorImg);
		cp.cpMouseDown = true;

		return false;
	}

	function cpMouseUp(ev)
        {
		cp.cpMouseDown = false;
	}

	function cpSliderMouseDown(ev)
        {
		cp.csPos           = getPosition(cp.colorSlider);
		cp.SliderMouseDown = true;

		return false;
	}

	function cpSliderMouseUp(ev)
        {
		cp.SliderMouseDown = false;
	}

	function cpSliderClick(ev)
        {
		ev           = ev || window.event;
		var mousePos = mouseCoordinates(ev);

		var y        = mousePos.y-cp.sliderPos.y-4;

		cpSliderSetColor(y);
	}

	function cpMouseClick(ev)
        {
		ev           = ev || window.event;
		var mousePos = mouseCoordinates(ev);

		var x        = mousePos.x-cp.cpPos.x-1;
		var y        = mousePos.y-cp.cpPos.y-1;

		setCPColor(getGradientColor(x, y, cp.baseColor));
	}

	function cpMouseMove(ev)
        {
		 // fired when mouse moves over the color picker
		if(cp.cpMouseDown){
			cpMouseClick(ev);
		}

		// fired when mouse moves over the color slider
		if(cp.SliderMouseDown){
			cpSliderClick(ev);
		}

		return false;
	}

	function cpSliderSetColor(y)
        {
		y = y<0?0:y>255?255:y;

		cp.Arrows.style.top      = (y+18)+'px';
		var color = cp.baseColor = getVertColor(y, 256);

		cp.fColorImg.style.backgroundColor = '#'+hex(color.r)+hex(color.g)+hex(color.b);
	}

	function selectWebSafeColor()
        {
		setCPColor(getWebSafeColor(cp.cpColor));
	}

	function resetColor()
        {
		setCPColor(cp.origColor);
	}

	function setCPColor(color)
        {
// ***************** FRAMES VERSION ONLY ************************
//		if(color.srcElement || color.target) color=null;
		if(color && (!color.r && (color.r!=0))) color = parseColor(color);
		if(!color){
			color = {
				r:parseInt(cp.rInput.value),
				g:parseInt(cp.gInput.value),
				b:parseInt(cp.bInput.value)
			}
		}
		var wsColor = getWebSafeColor(color)

		if(wsColor && !cp.websafeCheckbox.checked){
			cp.websafeImg.style.display         = 'block';
			cp.websafeImg.style.backgroundColor = '#'+hex(wsColor.r)+hex(wsColor.g)+hex(wsColor.b);
		}else{
			if(wsColor && cp.websafeCheckbox.checked) color = wsColor;
			cp.websafeImg.style.display         = 'none';
		}

		cp.rInput.value = color.r;
		cp.gInput.value = color.g;
		cp.bInput.value = color.b;
// ****************** DISPLAY HEX COLOR ***********************
		cp.hexcolor.value = hexcolor;
		cp.cpColor = color;

// ****************** FRAMES VERSION ONLY ***********************
		cp.OrigColorDiv.style.backgroundColor = top.colorbar.document.body.bgColor;
		cp.curColorDiv.style.backgroundColor = '#'+hex(color.r)+hex(color.g)+hex(color.b);
	}

	function parseColor(text)
        {
		if(colorNames[text.toLowerCase()]) text = colorNames[text.toLowerCase()];
		if(/^\#?[0-9A-F]{6}$/i.test(text)){
			return {
				r: eval('0x'+text.substr(text.length==6?0:1, 2)),
				g: eval('0x'+text.substr(text.length==6?2:3, 2)),
				b: eval('0x'+text.substr(text.length==6?4:5, 2))
			}
		}
		return {r:255, g:0, b:0};
	}

	function documentMouseDown(ev)
        {
		if(!cp) return;
		ev         = ev            || window.event;
		var target = ev.srcElement || ev.target;

		while(target){
			if(target==cp.ColorPicker) return;
			target = target.parentNode;
		}
		cp.ColorPicker.style.display = 'none';
	}

	function documentMouseUp(ev)
        {
		if(!cp) return;
		cpMouseUp(ev);
		cpSliderMouseUp(ev);
	}

function move_box(an, box)
{
    var cleft = document.body.clientLeft + 0;
    var ctop = document.body.clientTop + 283;
    var obj = an;

    box.style.left = cleft + 'px';
    ctop += an.offsetHeight + 0;

    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}

// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is currently shown

function show_patternbox()
{
	show_patterns(this, 386, 180, '1px solid #000000');
	window.focus();
}

function show_patterns(an, width, height, borderStyle)
{
    var obj = an;
    var href = an.href;
    an.href = "colorpicker/patterns.htm";

    var boxdiv1 = document.getElementById(href);

    // Create box object through DOM
    boxdiv1 = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv1.setAttribute('id', href);

    boxdiv1.style.display = 'block';
    boxdiv1.style.position = 'absolute';
    boxdiv1.style.width = width + 'px';
    boxdiv1.style.height = height + 'px';
    boxdiv1.style.border = borderStyle;
    boxdiv1.style.textAlign = 'right';
    boxdiv1.style.color = '#000000';
    boxdiv1.style.padding = '1px';
    boxdiv1.style.background = '#EEEEEE';
    cp.ColorPicker.appendChild(boxdiv1);
    var offset = 0;

    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { boxdiv1.style.display = 'none'; }
    close_href.appendChild(document.createElement("<input type=button value='OK' alt='CLOSE' style='position:absolute; top:2px; right:60px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));

    var patternhelp_href = document.createElement('a');
    patternhelp_href.href = 'javascript:void(0);';
    patternhelp_href.onclick = function()
        { window.open('colorpicker/help.htm#patternpicker','Help','status=1,scrollbars=1,resizable=1,width=640,height=480'); }
    patternhelp_href.appendChild(document.createElement("<input type=button value='?' alt='HELP' style='position:absolute; top:2px; right:2px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 10pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));
    boxdiv1.appendChild(patternhelp_href);
    offset = patternhelp_href.offsetHeight;

    var reset_pattern = document.createElement('a');
    reset_pattern.href = 'javascript:void(0);';
    reset_pattern.onclick = function()
        { changePage_background('colorpicker/blank.gif'); }
    reset_pattern.appendChild(document.createElement("<input type=button value='  ' alt='UNDO' style='position:absolute; top:2px; right:31px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB; background-image: url(\"colorpicker/undo_button.gif\");' >"));
    boxdiv1.appendChild(reset_pattern);
    boxdiv1.appendChild(close_href);
    offset = close_href.offsetHeight;

    var contents = document.createElement('iframe');
    //contents.scrolling = 'no';
    contents.overflowX = 'hidden';
    contents.overflowY = 'scroll';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';
    boxdiv1.appendChild(contents);

    move_box(an, boxdiv1);
    contents.src = an.href;


    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}

function show_texturebox()
{
	show_textures(this, 386, 180, '1px solid #000000');
	window.focus();
}

function show_textures(an, width, height, borderStyle)
{
    var obj = an;
    var href = an.href;
    an.href = "colorpicker/textures.htm";

    var boxdiv2 = document.getElementById(href);

    // Create box object through DOM
    boxdiv2 = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv2.setAttribute('id', href);

    boxdiv2.style.display = 'block';
    boxdiv2.style.position = 'absolute';
    boxdiv2.style.width = width + 'px';
    boxdiv2.style.height = height + 'px';
    boxdiv2.style.border = borderStyle;
    boxdiv2.style.textAlign = 'right';
    boxdiv2.style.color = '#000000';
    boxdiv2.style.padding = '1px';
    boxdiv2.style.background = '#EEEEEE';
    cp.ColorPicker.appendChild(boxdiv2);
    var offset = 0;

    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { boxdiv2.style.display = 'none'; }
    close_href.appendChild(document.createElement("<input type=button value='OK' alt='CLOSE' style='position:absolute; top:2px; right:60px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));

    var texturehelp_href = document.createElement('a');
    texturehelp_href.href = 'javascript:void(0);';
    texturehelp_href.onclick = function()
        { window.open('colorpicker/help.htm#texturepicker','Help','status=1,scrollbars=1,resizable=1,width=640,height=480'); }
    texturehelp_href.appendChild(document.createElement("<input type=button value='?' alt='HELP' style='position:absolute; top:2px; right:2px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 10pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));
    boxdiv2.appendChild(texturehelp_href);
    offset = texturehelp_href.offsetHeight;

    var reset_texture = document.createElement('a');
    reset_texture.href = 'javascript:void(0);';
    reset_texture.onclick = function()
        { changePage_background('colorpicker/blank.gif'); }
    reset_texture.appendChild(document.createElement("<input type=button value='  ' alt='UNDO' style='position:absolute; top:2px; right:31px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB; background-image: url(\"colorpicker/undo_button.gif\");' >"));
    boxdiv2.appendChild(reset_texture);
    boxdiv2.appendChild(close_href);
    offset = close_href.offsetHeight;

    var contents = document.createElement('iframe');
    //contents.scrolling = 'no';
    contents.overflowX = 'hidden';
    contents.overflowY = 'scroll';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';
    boxdiv2.appendChild(contents);

    move_box(an, boxdiv2);
    contents.src = an.href;


    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}

function show_lightingbox()
{
	show_lighting(this, 386, 180, '1px solid #000000');
	window.focus();
}

function show_lighting(an, width, height, borderStyle)
{
    var obj = an;
    var href = an.href;
    an.href = "colorpicker/lighting.htm";

    var boxdiv3 = document.getElementById(href);

    // Create box object through DOM
    boxdiv3 = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv3.setAttribute('id', href);

    boxdiv3.style.display = 'block';
    boxdiv3.style.position = 'absolute';
    boxdiv3.style.width = width + 'px';
    boxdiv3.style.height = height + 'px';
    boxdiv3.style.border = borderStyle;
    boxdiv3.style.textAlign = 'right';
    boxdiv3.style.color = '#000000';
    boxdiv3.style.padding = '1px';
    boxdiv3.style.background = '#EEEEEE';
    cp.ColorPicker.appendChild(boxdiv3);
    var offset = 0;

    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { boxdiv3.style.display = 'none'; }
    close_href.appendChild(document.createElement("<input type=button value='OK' alt='CLOSE' style='position:absolute; top:2px; right:60px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));

    var lightinghelp_href = document.createElement('a');
    lightinghelp_href.href = 'javascript:void(0);';
    lightinghelp_href.onclick = function()
        { window.open('colorpicker/help.htm#lightpicker','Help','status=1,scrollbars=1,resizable=1,width=640,height=480'); }
    lightinghelp_href.appendChild(document.createElement("<input type=button value='?' alt='HELP' style='position:absolute; top:2px; right:2px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 10pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));
    boxdiv3.appendChild(lightinghelp_href);
    offset = lightinghelp_href.offsetHeight;

    var reset_lighting = document.createElement('a');
    reset_lighting.href = 'javascript:void(0);';
    reset_lighting.onclick = function()
        { change_lighting('colorpicker/blank.gif'); }
    reset_lighting.appendChild(document.createElement("<input type=button value='  ' alt='UNDO' style='position:absolute; top:2px; right:31px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB; background-image: url(\"colorpicker/undo_button.gif\");' >"));
    boxdiv3.appendChild(reset_lighting);
    boxdiv3.appendChild(close_href);
    offset = close_href.offsetHeight;

    var contents = document.createElement('iframe');
    //contents.scrolling = 'no';
    contents.overflowX = 'hidden';
    contents.overflowY = 'scroll';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';
    boxdiv3.appendChild(contents);

    move_box(an, boxdiv3);
    contents.src = an.href;


    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}

function show_framingbox()
{
	show_framing(this, 386, 180, '1px solid #000000');
	window.focus();
}

function show_framing(an, width, height, borderStyle)
{
    var obj = an;
    var href = an.href;
    an.href = "colorpicker/framing.htm";

    var boxdiv4 = document.getElementById(href);

    // Create box object through DOM
    boxdiv4 = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv4.setAttribute('id', href);

    boxdiv4.style.display = 'block';
    boxdiv4.style.position = 'absolute';
    boxdiv4.style.width = width + 'px';
    boxdiv4.style.height = height + 'px';
    boxdiv4.style.border = borderStyle;
    boxdiv4.style.textAlign = 'right';
    boxdiv4.style.color = '#000000';
    boxdiv4.style.padding = '1px';
    boxdiv4.style.background = '#EEEEEE';
    cp.ColorPicker.appendChild(boxdiv4);
    var offset = 0;

    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { boxdiv4.style.display = 'none'; }
    close_href.appendChild(document.createElement("<input type=button value='OK' alt='CLOSE' style='position:absolute; top:2px; right:60px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));

    var framinghelp_href = document.createElement('a');
    framinghelp_href.href = 'javascript:void(0);';
    framinghelp_href.onclick = function()
        { window.open('colorpicker/help.htm#framepicker','Help','status=1,scrollbars=1,resizable=1,width=640,height=480'); }
    framinghelp_href.appendChild(document.createElement("<input type=button value='?' alt='HELP' style='position:absolute; top:2px; right:2px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 10pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB'>"));
    boxdiv4.appendChild(framinghelp_href);
    offset = framinghelp_href.offsetHeight;

    var reset_framing = document.createElement('a');
    reset_framing.href = 'javascript:void(0);';
    reset_framing.onclick = function()
        { changePage_background('colorpicker/blank.gif'); }
    reset_framing.appendChild(document.createElement("<input type=button value='  ' alt='UNDO' style='position:absolute; top:2px; right:31px; cursor: hand; width: 26px; height: 26px; font-family: Trebuchet MS;  font-size: 9pt; font-weight: bold; font-style: normal; text-indent: 0px; line-height: 14px; letter-spacing: normal; text-align: center; vertical-align: middle; margin: 0px; padding: 0px; color:#969696; background-color:#B9CDFB; background-image: url(\"colorpicker/undo_button.gif\");' >"));
    boxdiv4.appendChild(reset_framing);
    boxdiv4.appendChild(close_href);
    offset = close_href.offsetHeight;

    var contents = document.createElement('iframe');
    //contents.scrolling = 'no';
    contents.overflowX = 'hidden';
    contents.overflowY = 'scroll';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';
    boxdiv4.appendChild(contents);

    move_box(an, boxdiv4);
    contents.src = an.href;


    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}

	document.onmousedown     = documentMouseDown;
	document.onmouseup       = documentMouseUp;
	top.mainwindow.attachColorPicker = attachColorPicker;
})();
//-->