var colPerLine = 15;
var colorLevels = Array('0','3','6','9','C','F','4');
var colorArray = Array();
var tableCode = '';


function colorAdd(red, green, blue)
	{
		var newRed = colorLevels[red];	
		var newGreen = colorLevels[green];		
		var newBlue = colorLevels[blue];		
		addColorArray(newRed,newGreen,newBlue);
	}

function addColorArray( red, green, blue )
	{
		colorArray[colorArray.length] = '#' + red + red + green + green + blue + blue; 
	}
	
function generateColors()
	{
		for (count = 0;count < colorLevels.length-1; count++ )	
			{
				for (count1 = 0; count1 < colorLevels.length-1; count1++)
					{
						colorAdd(count,count1,count);
					}
			}

		for (count = 0;count < colorLevels.length-1; count++ )	
			{
				for (count1 = 0; count1 < colorLevels.length-1; count1++)
					{
						colorAdd(count,count1,count1);
					}
			}

		for (count = 0;count < colorLevels.length-1; count++ )	
			{
				for (count1 = 0; count1 < colorLevels.length-1; count1++)
					{
						colorAdd(count1,count1,count);
					}
			}
		for (count = 0;count < colorLevels.length-1; count++ )	
			{
				for (count1 = 0; count1 < colorLevels.length-1; count1++)
					{
						colorAdd(count1,count,count);
					}
			}

			
		return colorArray;
	}

function setColor(color,div)
	{	
		$(div).setStyle({background: color});
	}
function getColorTable(div) 
	{
	   var colors = colorArray;
		 if( colors.length > 0 )
		 	{
				if (tableCode == '')
					{
				    tableCode += '<table border="0" cellspacing="1" cellpadding="1">';
				    for (i = 0; i < colors.length; i++) {
				         if (i % colPerLine == 0) { tableCode += '<tr>'; }
			              tableCode += '<td bgcolor="' + colors[i] + '" style="width: 15px;height: 15px;"><a style="display: block;outline: 1px solid #000000; color: ' 
			              	  + colors[i] + '; background: ' + colors[i] + ';font-size: 10px;" title="' 
			              	  + colors[i] + '" href="javascript:setColor(\'' + colors[i] + '\',\'' + div +'\');">&nbsp;</a></td>';
				         if (i % colPerLine == colPerLine - 1) { tableCode += '</tr>'; }
				    }
				    if (i % colPerLine != 0) { tableCode += '</tr>'; }
				    tableCode += '</table>';
						return tableCode;
					}	
					else
						{
						 	 return tableCode;
						}
		 	}
		else
				{	
				 generateColors();
				 tableCode = '';
		    tableCode += '<table border="0" cellspacing="1" cellpadding="1">';
		    for (i = 0; i < colors.length; i++) {
		         if (i % colPerLine == 0) { tableCode += '<tr>'; }
	              tableCode += '<td bgcolor="' + colors[i] + '" style="width: 15px;height: 15px;"><a style="display: block;text-decoration: none;outline: 1px solid #000000;  background: ' 
										+ colors[i] + ';font-size: 10px;" title="' 
	              	  + colors[i] + '" href="javascript: void(0);"onclick="javascript:setColor(\'' + colors[i] + '\',\'' + div +'\');">&nbsp;</a></td>';
		         if (i % colPerLine == colPerLine - 1) { tableCode += '</tr>'; }
		    }
		    if (i % colPerLine != 0) { tableCode += '</tr>'; }
		    tableCode += '</table>';
				return tableCode;
				}
	}
	
	
function getDiv(div)
	{
	
		colorArray = Array();
		switch (div)
			{
				case 'hrefTdBackground1':
					divPosition = 'tdBackground1';
					var setWidth = Element.getWidth($(divPosition))/4;
					var setHeight = Element.getHeight($(divPosition))+200;
					var setLeft = Element.getWidth($(divPosition))/3;
					var setTop = $(divPosition).offsetTop;
					break;	
				case 'hrefTdBackground2':
					divPosition = 'tdBackground2';
					var setWidth = Element.getWidth($(divPosition))/4;
					var setHeight = Element.getHeight($(divPosition))+200;
					var setLeft = Element.getWidth($(divPosition))/3;
					var setTop = $(divPosition).offsetTop/2 +40;
					break;	
				case 'hrefTdBackground3':
					divPosition = 'tdBackground3';
					var setWidth = Element.getWidth($(divPosition))/4;
					var setHeight = Element.getHeight($(divPosition))+200;
					var setLeft = Element.getWidth($(divPosition))/3;
					var setTop = $(divPosition).offsetTop/2+75;
					break;	
			}
	if ( $('checkWeb') && ( divPosition == 'tdBackground1'))
			{
				var setWidth = Element.getWidth($(divPosition))/3;
				var setHeight = Element.getHeight($(divPosition))+200;
				var setLeft = Element.getWidth($(divPosition))/3+30;
				var setTop = $(divPosition).offsetTop+130;
			}
			else 
				if( $('checkWeb') && (divPosition == 'tdBackground2'))
				{
					var setWidth = Element.getWidth($(divPosition))/4;
					var setHeight = Element.getHeight($(divPosition))+200;
					var setLeft = Element.getWidth($(divPosition))/3+35;
					var setTop = $(divPosition).offsetTop/2 +90;
				}
				else 
					if ($('checkWeb') && (divPosition == 'tdBackground3') )
					{
					var setWidth = Element.getWidth($(divPosition))/4;
					var setHeight = Element.getHeight($(divPosition))+200;
					var setLeft = Element.getWidth($(divPosition))/3+35;
					var setTop = $(divPosition).offsetTop/2+100;

					}

		$('colorPickerDiv').update(getColorTable(divPosition));

		Modalbox.show(
										$('colorPickerDiv'),
										{
											overrideAlert: true,
											title: 'Color Editor',
											width: setWidth + 10, 
											height: setHeight+7,
											defaultLeft: setLeft,  
											defaultTop: setTop,
										afterHide: function()
											{
												$('colorPickerDiv').innerHTML = '';
											}
										}
				);
	}