var ColorSelectorOpened = new Array();
var oColorElement = new Array();
var OutputId = new Array();
var ColorSelectorMade = new Array();
var ColorPreviewMode = new Array();
var ColorSelected = new Array();
var ColorSelectorToClose = new Array();
var isClipWindow = false;
var sCallBackCode;

function PreviewColor(selectorId, sColor) {
  document.getElementById('dvBgColorPreview'+selectorId).style.backgroundColor='#' + sColor;
  document.getElementById('dvFontColorPreview'+selectorId).style.color='#' + sColor;
}

function SelectColor(selectorId, sColor) {
   CloseColorSelector(selectorId);
   ColorSelected[selectorId] = sColor;
   if (oColorElement[selectorId]) {
   	oColorElement[selectorId].value = '#' + sColor;
  }
   if (OutputId[selectorId]) {  
         if (ColorPreviewMode[selectorId] == "font") { 
             //document.getElementById(OutputId[selectorId]).style.color = '#' + sColor; 
             document.getElementById(OutputId[selectorId]).style.backgroundColor = '#' + sColor; 
         } else {
             document.getElementById(OutputId[selectorId]).style.backgroundColor = '#' + sColor; 
		 }
		 
		 if (isClipWindow) {
            document.getElementById(OutputId[selectorId]).title = 'current background color: #' + sColor; 
			document.getElementById('fraPreview').src = 'http://content.clipmarks.com/view_clip.aspx?window=true&guid=' + sActiveClipGUID + '&bgc=' + sColor;
		 }
   }
   
   if (sCallBackCode) {
		eval(sCallBackCode);
   }
}

function MakeColorSelector(selectorId) {
  var cellCount = 0;
  var rowCount = 0;
  var myColorHex = new Array('000000','003300','006600','009900','00CC00','00FF00','66FF00','66CC00','669900','666600','663300','660000','cc0000','cc3300','cc6600','cc9900','cccc00','ccff00',
  '000033','003333','006633','009933','00cc33','00ff33','66ff00','66cc33','669933','666633','663333','660033','cc0033','cc3333','cc6633','cc9933','cccc33','ccff33',
  '000066','003366','006666','009966','00cc66','00ff66','66ff66','66cc66','669966','666666','663366','660066','cc0066','cc3366','cc6666','cc9966','cccc66','ccff66',
  '000099','003399','006699','009999','00cc99','00ff99','66ff99','66cc99','669999','666699','663399','660099','cc0099','cc3399','cc6699','cc9999','cccc99','ccff99',
  '0000cc','0033cc','0066cc','0099cc','00cccc','00ffcc','66ffcc','66cccc','6699cc','6666cc','6633cc','6600cc','cc00cc','cc33cc','cc66cc','cc99cc','cccccc','ccffcc',
  '0000ff','0033ff','0066ff','0099ff','00ccff','00ffff','66ffff','66ccff','6699ff','6666ff','6633ff','6600ff','cc00ff','cc33ff','cc66ff','cc99ff','ccccff','ccffff',
  '3300ff','3333ff','3366ff','3399ff','33ccff','33ffff','99ffff','99ccff','9999ff','9966ff','9933ff','9900ff','ff00ff','ff33ff','ff33ff','ff99ff','ffccff','ffffff',
  '3300cc','3333cc','3366cc','3399cc','33cccc','33ffcc','99ffcc','99cccc','9999cc','9966cc','9933cc','9900cc','ff00cc','ff33cc','ff33cc','ff99cc','ffcccc','ffffcc',
  '330099','333399','336699','339999','33cc99','33ff99','99ff99','99cc99','999999','996699','993399','990099','ff0099','ff3399','ff3399','ff9999','ffcc99','ffff99',
  '330066','333366','336666','339966','33cc66','33ff66','99ff66','99cc66','999966','996666','993366','990066','ff0066','ff3366','ff3366','ff9966','ffcc66','ffff66',
  '330033','333333','336633','339933','33cc33','33ff33','99ff33','99cc33','999933','996633','993333','990033','ff0033','ff3333','ff3333','ff9933','ffcc33','ffff33',
  '330000','333300','336600','339900','33cc00','33ff00','99ff00','99cc00','999900','996600','993300','990000','ff0000','ff3300','ff3300','ff9900','ffcc00','ffff00');
  var myGrayScale = new Array('ffffff','e5e5e5','cccccc','b2b2b2','999999','7f7f7f','666666','696969','4c4c4c','333333','191919','000000');

  var sHTML = '<table class="color_box" cellpadding="0" cellspacing="1"><tr>';
  for (i=0;i<myColorHex.length;i++) { 
    if (cellCount == 0) { sHTML+='<tr>'; } 
    sHTML+='<td class="Cbox" onmouseover="PreviewColor(' + selectorId + ',\'' + myColorHex[i] + '\');" bgcolor="#'+myColorHex[i] +'" title="#'+myColorHex[i]+'"><a href="javascript:SelectColor(' + selectorId + ',\''+myColorHex[i]+'\');" class="Clink">&nbsp;</a></td>';
    cellCount++;
     if (cellCount >= 18) { 
         sHTML+='<td class="Cspace">&nbsp;</td><td class="Cbox" onmouseover="PreviewColor(' + selectorId + ',\'' + myGrayScale[rowCount] + '\');" bgcolor="#'+myGrayScale[rowCount] +'" title="#'+myGrayScale[rowCount]+'"><a href="javascript:SelectColor(' + selectorId + ',\''+myGrayScale[rowCount]+'\');" class="Clink">&nbsp;</a></td>'; 
         sHTML+='</tr>';
         cellCount = 0;
	 rowCount++; 
     } 
  }

  sHTML += '</table>';
  document.getElementById('dvColorSelectorContent' + selectorId).innerHTML=sHTML;
  ColorSelectorMade[selectorId] = 1;
}

function OpenColorSelector(selectorId, previewMode, oElement, outputId, bClipWindow, sCallBack) {
  ColorPreviewMode[selectorId] = previewMode;
  if (oElement) { oColorElement[selectorId] = oElement; }
  if (outputId) { OutputId[selectorId] = outputId; }
  
  if (!ColorSelectorMade[selectorId]) { MakeColorSelector(selectorId); } 
  document.getElementById('dvBgColorPreview' + selectorId).style.backgroundColor='#ffffff';
  document.getElementById('dvFontColorPreview' + selectorId).style.color='#ffffff';
  
  if (ColorPreviewMode[selectorId] == "font") { 
	document.getElementById('dvFontColorPreview' + selectorId).style.display='block';
	document.getElementById('dvBgColorPreview' + selectorId).style.display='none';
  } else {
	document.getElementById('dvFontColorPreview' + selectorId).style.display='none';
	document.getElementById('dvBgColorPreview' + selectorId).style.display='block';
  }
  
  if (ColorSelectorOpened[selectorId] == 1) { 
	  document.getElementById('dvColorSelector' + selectorId).style.display='none';
	  ColorSelectorOpened[selectorId] = 0;
  } else {
	  document.getElementById('dvColorSelector' + selectorId).style.display='block';
	  ColorSelectorOpened[selectorId] = 1;
  }
  
  if (bClipWindow) {
	isClipWindow = true; 
  }

  if (sCallBack) { 
	sCallBackCode = sCallBack;
  }

}

function CloseColorSelector(selectorId) {
  ColorSelectorOpened[selectorId] = 0;
  document.getElementById('dvColorSelector' + selectorId).style.display='none';
  if (ColorSelectorToClose[selectorId]) { 
	 clearTimeout(ColorSelectorToClose[selectorId]);
	 ColorSelectorToClose[selectorId] = null;
  }
}


function KeepSelectorOpen(selectorId) {
	clearTimeout(ColorSelectorToClose[selectorId]);
	ColorSelectorToClose[selectorId] = null;
}

function CloseSelectorTimeOut(selectorId) {
	if (!ColorSelectorToClose[selectorId]) { 
		ColorSelectorToClose[selectorId] = setTimeout('CloseColorSelector(\'' + selectorId + '\')', 2000);
	}
}