// Javascript for picking the color from the grid.
// Adopted by:
// Aleksey Porollo, PhD
//   Research Assistant Professor at
//     University of Cincinnati
//   Faculty Affiliate at
//     Cincinnati Children's Hospital Medical Center (CCHMC)
//
// Script is based on the code written by
// Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
// 
// This is a simplified version of the original code.
// It also adds greyscale color bar.
//
// Last update: June 2007

var ColorPicker_targetInput = null;

function ColorPicker_show(anchorname) {
  this.showPopup(anchorname);
}

function ColorPicker_pickColor(color, obj) {
  obj.hidePopup();
  pickColor(color);
}

// A Default "pickColor" function to accept the color passed back from popup.
// User can over-ride this with their own function.
function pickColor(color) {
  if (ColorPicker_targetInput == null) {
    alert("Target Input is null, which means you either didn't use the 'select' function or you have not defined your own 'pickColor' function to handle the picked color!");
    return;
  }
  ColorPicker_targetInput.value = color;
}

// This function is the easiest way to popup the window, select a color, and
// have the value populate a form field, which is what most people want to do.
function ColorPicker_select(inputobj, linkname) {
  if (inputobj.type != "text" && inputobj.type != "hidden" && inputobj.type != "textarea") { 
    alert("colorpicker.select: Input object passed is not a valid form input object"); 
    window.ColorPicker_targetInput = null;
    return;
  }
  window.ColorPicker_targetInput = inputobj;
  this.show(linkname);
}
	
// This function runs when you move your mouse over a color block
function ColorPicker_highlightColor(c) {
  var thedoc = (arguments.length >1 ) ? arguments[1] : window.document;
  var d = thedoc.getElementById("colorPickerSelectedColor");
  d.style.backgroundColor = c;
  d = thedoc.getElementById("colorPickerSelectedColorValue");
  d.innerHTML = c;
}

function ColorPicker() {
  // Create a new PopupWindow object
  var cp = new PopupWindow();
  cp.setSize(225,225);

  // Object variables
  cp.currentValue = "#FFFFFF";
  cp.targetID = null;
	
  // Method Mappings
  cp.highlightColor = ColorPicker_highlightColor;
  cp.show = ColorPicker_show;
  cp.select = ColorPicker_select;

  // Code to populate color picker window
  var colors = new Array("#000000","#000033","#000066","#000099","#0000CC","#0000FF",
			 "#330000","#330033","#330066","#330099","#3300CC","#3300FF",
			 "#660000","#660033","#660066","#660099","#6600CC","#6600FF",
			 "#990000","#990033","#990066","#990099","#9900CC","#9900FF",
			 "#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF",
			 "#FF0000","#FF0033","#FF0066","#FF0099","#FF00CC","#FF00FF",
			 "#003300","#003333","#003366","#003399","#0033CC","#0033FF",
			 "#333300","#333333","#333366","#333399","#3333CC","#3333FF",
			 "#663300","#663333","#663366","#663399","#6633CC","#6633FF",
			 "#993300","#993333","#993366","#993399","#9933CC","#9933FF",
			 "#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF",
			 "#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF",
			 "#006600","#006633","#006666","#006699","#0066CC","#0066FF",
			 "#336600","#336633","#336666","#336699","#3366CC","#3366FF",
			 "#666600","#666633","#666666","#666699","#6666CC","#6666FF",
			 "#996600","#996633","#996666","#996699","#9966CC","#9966FF",
			 "#CC6600","#CC6633","#CC6666","#CC6699","#CC66CC","#CC66FF",
			 "#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF",
			 "#009900","#009933","#009966","#009999","#0099CC","#0099FF",
			 "#339900","#339933","#339966","#339999","#3399CC","#3399FF",
			 "#669900","#669933","#669966","#669999","#6699CC","#6699FF",
			 "#999900","#999933","#999966","#999999","#9999CC","#9999FF",
			 "#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF",
			 "#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC","#FF99FF",
			 "#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF",
			 "#33CC00","#33CC33","#33CC66","#33CC99","#33CCCC","#33CCFF",
			 "#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF",
			 "#99CC00","#99CC33","#99CC66","#99CC99","#99CCCC","#99CCFF",
			 "#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF",
			 "#FFCC00","#FFCC33","#FFCC66","#FFCC99","#FFCCCC","#FFCCFF",
			 "#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF",
			 "#33FF00","#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF",
			 "#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",
			 "#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF",
			 "#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC","#CCFFFF",
			 "#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF",
			 "#000000","#0F0F0F","#1E1E1E","#2D2D2D","#3C3C3C","#4B4B4B",
			 "#5A5A5A","#696969","#787878","#878787","#969696","#A5A5A5",
			 "#B4B4B4","#C3C3C3","#D2D2D2","#E1E1E1","#F0F0F0","#FFFFFF");
  var total = colors.length;
  var width = 18;
  var cp_contents = "";
  var windowRef = "window.opener.";
  cp_contents += "<HTML><HEAD><TITLE>Select Color</TITLE></HEAD>";
  cp_contents += "<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0><CENTER>";
  cp_contents += "<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0>";
  var use_highlight = (document.getElementById || document.all) ? true : false;
  for (var i=0; i<total; i++) {
    if ((i % width) == 0) { cp_contents += "<TR>"; }
    if (use_highlight) { var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(\''+colors[i]+'\',window.document)"'; }
    else { mo = ""; }
    cp_contents += '<TD BGCOLOR="'+colors[i]+'"><FONT SIZE="-3"><A HREF="#" onClick="'+windowRef+'ColorPicker_pickColor(\''+colors[i]+'\','+windowRef+'window.popupWindowObjects['+cp.index+']);return false;" '+mo+' STYLE="text-decoration:none;">&nbsp;&nbsp;&nbsp;</A></FONT></TD>';
    if ( ((i+1)>=total) || (((i+1) % width) == 0)) { 
      cp_contents += "</TR>";
    }
  }
  // If the browser supports dynamically changing TD cells, add the fancy stuff
  if (document.getElementById) {
    var width1 = Math.floor(width/2);
    var width2 = width = width1;
    cp_contents += "<TR><TD COLSPAN='"+width1+"' BGCOLOR='#ffffff' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+width2+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
  }
  cp_contents += "</TABLE>";
  cp_contents += "</CENTER></BODY></HTML>";
  // end populate code
  
  // Write the contents to the popup object
  cp.populate(cp_contents+"\n");
  // Move the table down a bit so you can see it
  cp.offsetY = 25;
  cp.autoHide();
  return cp;
}

// This function returns an object having .x and .y properties which are the coordinates
// of the named anchor, relative to the page.
function getAnchorPosition(anchorname) {
  // This function will return an Object with x and y properties
  var coordinates = new Object();
  var x = 0, y = 0;
  // Browser capability sniffing
  var use_gebi = false, use_css = false, use_layers = false;
  if (document.getElementById) use_gebi=true;
  else if (document.all) use_css=true;
  else if (document.layers) use_layers=true;
  // Logic to find position
  if (use_gebi && document.all) {
    x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
    y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);
  }
  else if (use_gebi) {
    var o = document.getElementById(anchorname);
    x = AnchorPosition_getPageOffsetLeft(o);
    y = AnchorPosition_getPageOffsetTop(o);
  }
  else if (use_css) {
    x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
    y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);
  }
  else if (use_layers) {
    var found = 0;
    for (var i=0; i<document.anchors.length; i++) {
      if (document.anchors[i].name == anchorname) {
	found=1;
	break;
      }
    }
    if (found == 0) {
      coordinates.x = 0;
      coordinates.y = 0;
      return coordinates;
    }
    x = document.anchors[i].x;
    y = document.anchors[i].y;
  }
  else {
    coordinates.x = 0;
    coordinates.y = 0;
    return coordinates;
  }
  coordinates.x = x;
  coordinates.y = y;
  return coordinates;
}

// This function returns an object having .x and .y properties which are the coordinates
// of the named anchor, relative to the window
function getAnchorWindowPosition(anchorname) {
  var coordinates = getAnchorPosition(anchorname);
  var x = 0;
  var y = 0;
  if (document.getElementById) {
    if (isNaN(window.screenX)) {
      x = coordinates.x - document.body.scrollLeft + window.screenLeft;
      y = coordinates.y - document.body.scrollTop + window.screenTop;
    }
    else {
      x = coordinates.x + window.screenX + 
	  (window.outerWidth - window.innerWidth) - 
	  window.pageXOffset;
      y = coordinates.y + window.screenY + 
	  (window.outerHeight - 24 - window.innerHeight) - 
	  window.pageYOffset;
    }
  }
  else if (document.all) {
    x = coordinates.x - document.body.scrollLeft + window.screenLeft;
    y = coordinates.y - document.body.scrollTop + window.screenTop;
  }
  else if (document.layers) {
    x = coordinates.x + window.screenX + 
        (window.outerWidth - window.innerWidth) - 
        window.pageXOffset;
    y = coordinates.y + window.screenY + 
        (window.outerHeight - 24 - window.innerHeight) - window.pageYOffset;
  }
  coordinates.x = x;
  coordinates.y = y;
  return coordinates;
}


// Functions for IE to get position of an object
function AnchorPosition_getPageOffsetLeft (el) {
  var ol = el.offsetLeft;
  while ((el = el.offsetParent) != null) ol += el.offsetLeft;
  return ol;
}
function AnchorPosition_getWindowOffsetLeft (el) {
  return AnchorPosition_getPageOffsetLeft(el) - document.body.scrollLeft;
}	
function AnchorPosition_getPageOffsetTop (el) {
  var ot = el.offsetTop;
  while ((el = el.offsetParent) != null) ot += el.offsetTop;
  return ot;
}
function AnchorPosition_getWindowOffsetTop (el) {
  return AnchorPosition_getPageOffsetTop(el) - document.body.scrollTop;
}

// Set the position of the popup window based on the anchor
function PopupWindow_getXYPosition(anchorname) {
  var coordinates;
  coordinates = getAnchorWindowPosition(anchorname);
  this.x = coordinates.x;
  this.y = coordinates.y;
}

// Set width/height of popup window
function PopupWindow_setSize(width, height) {
  this.width = width;
  this.height = height;
}

// Fill the window with contents
function PopupWindow_populate(contents) {
  this.contents = contents;
  this.populated = false;
}

// Set the window popup properties
function PopupWindow_setWindowProperties(props) {
  this.windowProperties = props;
}

// Refresh the displayed contents of the popup
function PopupWindow_refresh() {
  if (this.popupWindow != null && !this.popupWindow.closed) {
    if (this.url != "") {
      this.popupWindow.location.href = this.url;
    }
    else {
      this.popupWindow.document.open();
      this.popupWindow.document.writeln(this.contents);
      this.popupWindow.document.close();
    }
    this.popupWindow.focus();
  }
}

// Position and show the popup, relative to an anchor object
function PopupWindow_showPopup(anchorname) {
  this.getXYPosition(anchorname);
  this.x += this.offsetX;
  this.y += this.offsetY;
  if (!this.populated && (this.contents != "")) this.populated = true;

  if (this.popupWindow == null || this.popupWindow.closed) {
    // If the popup window will go off-screen, move it so it doesn't
    if (this.x < 0) this.x = 0;
    if (this.y < 0) this.y = 0;
    if (screen && screen.availHeight) {
      if ((this.y + this.height) > screen.availHeight) {
	this.y = screen.availHeight - this.height;
      }
    }
    if (screen && screen.availWidth) {
      if ((this.x + this.width) > screen.availWidth) {
	this.x = screen.availWidth - this.width;
      }
    }
    var avoidAboutBlank =
      window.opera ||
      (document.layers && !navigator.mimeTypes['*']) ||
      navigator.vendor == 'KDE' ||
      (document.childNodes && !document.all && !navigator.taintEnabled);
    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 + "");
  }
  this.refresh();
}

// Hide the popup
function PopupWindow_hidePopup() {
  if (this.popupWindow && !this.popupWindow.closed) {
    this.popupWindow.close();
    this.popupWindow = null;
  }
}

// Check an onMouseDown event to see if we should hide
function PopupWindow_hideIfNotClicked(e) {
  if (this.autoHideEnabled) {
    this.hidePopup();
  }
}

// Call this to make the popup disable automatically when mouse is clicked outside it
function PopupWindow_autoHide() {
  this.autoHideEnabled = true;
}

// This global function checks all PopupWindow objects onmouseup to see if they should be hidden
function PopupWindow_hidePopupWindows(e) {
  for (var i=0; i<popupWindowObjects.length; i++) {
    if (popupWindowObjects[i] != null) {
      var p = popupWindowObjects[i];
      p.hideIfNotClicked(e);
    }
  }
}

// Run this immediately to attach the event listener
function PopupWindow_attachListener() {
  if (document.layers) {
    document.captureEvents(Event.MOUSEUP);
  }
  window.popupWindowOldEventListener = document.onmouseup;
  if (window.popupWindowOldEventListener != null) {
    document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupWindow_hidePopupWindows();");
  }
  else {
    document.onmouseup = PopupWindow_hidePopupWindows;
  }
}

// CONSTRUCTOR for the PopupWindow object
function PopupWindow() {
  if (!window.popupWindowIndex) window.popupWindowIndex = 0;
  if (!window.popupWindowObjects) window.popupWindowObjects = new Array();
  if (!window.listenerAttached) {
    window.listenerAttached = true;
    PopupWindow_attachListener();
  }
  this.index = popupWindowIndex++;
  popupWindowObjects[this.index] = this;
  this.divName = null;
  this.popupWindow = null;
  this.width = 0;
  this.height = 0;
  this.populated = false;
  this.visible = false;
  this.autoHideEnabled = false;
  
  this.contents = "";
  this.url = "";
  this.windowProperties = "toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no";
  this.type="WINDOW";

  this.use_gebi = false;
  this.use_css = false;
  this.use_layers = false;
  if (document.getElementById) this.use_gebi = true;
  else if (document.all) this.use_css = true;
  else if (document.layers) this.use_layers = true;
  else this.type = "WINDOW";
  this.offsetX = 0;
  this.offsetY = 0;

  // Method mappings
  this.getXYPosition = PopupWindow_getXYPosition;
  this.populate = PopupWindow_populate;
  this.setWindowProperties = PopupWindow_setWindowProperties;
  this.refresh = PopupWindow_refresh;
  this.showPopup = PopupWindow_showPopup;
  this.hidePopup = PopupWindow_hidePopup;
  this.setSize = PopupWindow_setSize;
  this.autoHide = PopupWindow_autoHide;
  this.hideIfNotClicked = PopupWindow_hideIfNotClicked;
}