pt 2
Code:
 DhtmlLayer.prototype.show = function()
{
    this.getLayer().style.visibility = 'visible';
    if (this.isIframeEnabled()) {
        this.getIframe().style.visibility = 'visible';
    }
}

DhtmlLayer.prototype.setCssClass = function(cssClass) {
    this.cssClass = cssClass;
}

DhtmlLayer.prototype.setCssFile = function(cssFile) {
    this.cssFile = cssFile;
}

DhtmlLayer.prototype.setIcon = function(imgIcon) {
    this.imgIcon = imgIcon;
}

DhtmlLayer.prototype.setHTML = function(html)
{
    this.getLayer().innerHTML = html;
}

DhtmlLayer.prototype.addHTML = function(html)
{
    this.getLayer().innerHTML += html;
}

DhtmlLayer.prototype.setOffsetX = function(Xoffset)
{
    this.offsetX = Xoffset;
}

DhtmlLayer.prototype.setOffsetY = function(Yoffset)
{
    this.offsetY = Yoffset;
}

DhtmlLayer.prototype.setLayerPosition = function(x, y)
{
    this.getLayer().style.top  = (y + this.offsetY) + 'px';
    this.getLayer().style.left = (x + this.offsetX) + 'px';
    if (this.isIframeEnabled()) {
        this.getIframe().style.top  = (y + this.offsetY) + 'px';
        this.getIframe().style.left = (x + this.offsetX) + 'px';
    }
}

DhtmlLayer.prototype.setLayerDimension = function(width, height)
{
    this.getLayer().style.width  = width;
    this.getLayer().style.height = height;
    if (this.isIframeEnabled()) {
        this.getIframe().style.width  = width;
        this.getIframe().style.height = height;
    }
}

DhtmlLayer.prototype.getLayer = function()
{
    return document.getElementById(this.layerId);
}

DhtmlLayer.prototype.writeIframe = function()
{
		if (document.all) {
				var iframe = document.createElement('iframe');
				iframe.setAttribute('src', 'javascript:;');
				iframe.setAttribute('id', this.layerID + '_iframe');
				iframe.setAttribute('frameborder', '0');
				iframe.setAttribute('scrolling', 'no');
				var layer  = this.getLayer();
				iframe.style.width           = layer.style.width;
				iframe.style.height          = layer.style.height;
				iframe.style.zIndex          = layer.style.zIndex - 1;
				iframe.style.visibility      = 'hidden';
				iframe.style.position        = 'absolute';
				layer.parentNode.insertBefore(iframe, layer);
		}
}
DhtmlLayer.prototype.getIframe = function()
{
    return document.getElementById(this.layerID+'_iframe');
}

DhtmlLayer.prototype.isIframeEnabled = function()
{
    return (document.all && this.getIframe() && this.getLayer().style.width != '');
}

// Capture events within the popup layer
if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
function captureMousePosition(e) {
    if (document.layers) {
        __calMouseXPos = e.pageX;
        __calMouseYPos = e.pageY;
    } else if (document.all) {
        __calMouseXPos = window.event.x+document.body.scrollLeft;
        __calMouseYPos = window.event.y+document.body.scrollTop;
    } else if (document.getElementById) {
        __calMouseXPos = e.pageX;
        __calMouseYPos = e.pageY;
    }
}



 * The ColorPicker class
 * 
 * @author Michael Mifsud
 * @site http://www.tropotek.com.au
 * @package ColorPicker

 * __construct
 * 
 * @param string objName - The name you called this object.
 * @param string callbackFunction - The function that gets called when an event occurs.
 */
ColorPicker.Extends(DhtmlLayer);
function ColorPicker(objName) {
    
    this.DhtmlLayer(objName);      // parent::__construct
    
    // Properties
    this.callbackFunction     = objName + '_callback';
    this.selectedColor        = '#FFFFFF';
    this.imgIcon              = 'blank.gif';
  	this.display_msg          = 'msg';               // The name of the toolbar message display element id
  	this.display_box          = 'box';               // The name of the toolbar color box display element id
    
    // __construct
    this.setCssClass('colorPicker');
    this.writeLayerDOM(document.getElementById(objName));
    
    this.getLayer().onmouseout = this.hideEvent;
}

/**
 * Writes HTML for layer, this is the clickable icon to activate the layer.
 * 
 * @param DOMElement element
 */
ColorPicker.Override(DhtmlLayer, 'writeIconDOM');
ColorPicker.prototype.writeIconDOM = function()
{
    element = arguments[0] ? arguments[0] : this.getLayer();
    if (element == null) {
        alert('Cannot attach to unknown element!');
    }
    
    var a = document.createElement('a');
    a.setAttribute('href', 'javascript: ' +
                    this.objName + '.setLayerPosition(__calMouseXPos, __calMouseYPos, this);' +
                    this.objName + '.show();');
    a.setAttribute('onclick', 'this.blur();');
    a.className = this.cssClass + '_icon';
    a.id = this.objName + '_cpIcon';
		a.style.border = '3px outset #666666';
    
    var img = document.createElement('img');
    img.setAttribute('src', this.imgIcon);
    img.setAttribute('width', '20');
    img.setAttribute('height', '20');
		img.style.border = 'none';
    
    a.appendChild(img);
    //element.parentNode.appendChild(a, element);
    element.parentNode.insertBefore(a, element);
}

/**
 * Show the div
 */
ColorPicker.Override(DhtmlLayer, 'show');
ColorPicker.prototype.show = function() {

    var cellwidth = 20, cellheight = 20;
  	var maxrows = 12, maxcols = 18, padcols = 3, cellcolor = '#000000';
  	var blockcols = 6, blockrows = 6;
  	var prime = ["#000000","#333333","#666666","#999999","#CCCCCC","#FFFFFF","#FF0000","#00FF00","#0000FF","#FFFF00","#00FFFF","#FF00FF"];
  	
  	var html = '<table cellpadding="0" cellspacing="2" border="0" >';
  	html += '<tr bgcolor="#3399CC"><td colspan="'+(maxcols+padcols)+'" height="25">'+
  	   '**<span id="'+this.layerID+'_'+this.display_box+
  	   '" class="box">********</span>'+
  		 '<span id="'+this.layerID+'_'+this.display_msg+'" class="msg" style="font-size:14px;padding: 0px 5px;font-color:#000000;"><em>COLOR SELECTOR</em></span>'+
  		 '</td></tr>';
  	for(var row = 0; row < maxrows; row++) {
  		
  		html += '<tr>';
  		for(var col = 0; col < maxcols+padcols; col++) {
    			// start padding cols
    			if (col < padcols) {
      				if (col == 1) {
      					 cellcolor = prime[row];
      				}else{
      					 cellcolor = cellcolor.setColor(0x00, 0x00, 0x00);
      				}
    			}else{
      				if (col < blockcols + padcols) {
      					if (row < blockrows) {
      						  cellcolor = cellcolor.setColor(0x00, 0x33*((col-padcols)%blockcols), 0x33*row);
      					}else{
      						  cellcolor = cellcolor.setColor(0x99, 0x33*((col-padcols)%blockcols), 0x33*(row-blockrows));
      					}
      				} else if (col < (blockcols*2) + padcols) {
      					if (row < blockrows) {
      						  cellcolor = cellcolor.setColor(0x33, 0x33*((col-padcols)%blockcols), 0x33*row);
      					}else{
      						  cellcolor = cellcolor.setColor(0xCC, 0x33*((col-padcols)%blockcols), 0x33*(row-blockrows));
      					}
      				} else if (col < (blockcols*3) + padcols) {
      					if (row < blockrows) {
      						  cellcolor = cellcolor.setColor(0x66, 0x33*((col-padcols)%blockcols), 0x33*row);
      					}else{
      						  cellcolor = cellcolor.setColor(0xFF, 0x33*((col-padcols)%blockcols), 0x33*(row-blockrows));
      					}
      				} else {
      				  // Throw error
      				}
    			}
          html += '<td width="'+cellwidth+'" height="'+cellheight+'" bgcolor="'+cellcolor+
    			    '" onmouseover="'+this.objName+'.setToolbar(\''+cellcolor+'\')" '+
    					'onClick="'+this.objName+'.setColor(\''+cellcolor+'\');'+this.callbackFunction+'(\''+cellcolor+'\');'+this.objName+'.hide();"></td>';
    		}
    		html += '</tr>';
  	}
  	html += '</table>';
    
    this.setHTML(html);
    // Call show() method
    this.DhtmlLayer_show();
}

/**
 * Set the tool bar values when the cusor hovers over a color.
 */
ColorPicker.prototype.setToolbar = function(color) {
    colorBox = document.getElementById(this.layerID+'_'+this.display_box);
    colorBox.style.backgroundColor = color;
  	msgBox = document.getElementById(this.layerID+'_'+this.display_msg);
  	msgBox.innerHTML = color;
}

/**
 * Set the selected color
 */
ColorPicker.prototype.setColor = function(color) {
    var icon = document.getElementById(this.objName + '_cpIcon');
    if (icon) {
      icon.style.backgroundColor = color;
    }
}



 * Convert a hex or dec value to a hex str
 * @param int Dec A hex or int value.
 * @todo check for bounds errors -255 to 255 ????
 */
function Dec2Hex (Dec) {
  var hexChars = "0123456789ABCDEF";
  var a = Dec % 16;
  var b = (Dec - a)/16;
  hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
  return hex;
}
/**
 * This function should set a hex color value.
 * 
 * @param hex r The red value to add
 * @param hex g The green value to add
 * @param hex b The blue value to add
 */
function CP_setColor(r, g, b) {
	var r_str, g_str, b_str;
	
  if (this.substr(0, 1) == '#') {
		// Calc Red
		if (r >= 0xFF) {
		  r_str = Dec2Hex(0xFF);
	  }else if (r <= 0x00) {
			r_str = Dec2Hex(0x00);
		}else{
		  r_str = Dec2Hex(r);
	  }
		// Calc Green
		if (g >= 0xFF) {
		  g_str = Dec2Hex(0xFF);
	  }else if (g <= 0x00) {
			g_str = Dec2Hex(0x00);
		}else{
		  g_str = Dec2Hex(g);
	  }
		// Calc Blue
		if (b >= 0xFF) {
		  b_str = Dec2Hex(0xFF);
	  }else if (b <= 0x00) {
			b_str = Dec2Hex(0x00);
		}else{
		  b_str = Dec2Hex(b);
	  }
  }
	return '#'+r_str+g_str+b_str;
}
String.prototype.setColor = CP_setColor;