// ColorPicker.js
//  -----------------------------------------------------
// <p>Title: Color-Test.</p>
// <p>Description: test of a Color Picker in Javascript creating svg-elements to XHTML</p>
// <p>Copyright: Copyright (c) 2008</p>
// <p>Company: SiG Software Integration GmbH</p>
// <p>Author Dr. Horst Walther</p>
// <p>Version 0.2</p>
//  ----------------------------------------------------------------------------

//  ----------------------------------------------------------------------------
function ColorPicker(id) {
  var RED = '#ff0000';
  var wordy = false;
  var jMax = iMax = 20;
  var index = wl = 0
  var node = null;
  var boxNodes = new Array();
  var colors = new Array;
  var isDown = false;
  var lastX, lastY;
  var tx = 0,
    ty = 0,
    dx = 0;
  var n = 0,
    j = 0,
    i = 0;
  var p2d = null;
  var p2d = null;
  var graphPanel = null;
  var width  = 0.0;
  var height = 0.0;

//  ----------------------------------------------------------------------------
function ColorChanged(i) {
  return (xMin[i] != xMinOld[i]) || (xMax[i] != xMaxOld[i]);
}

//  ----------------------------------------------------------------------------
down = function (evt) {
  evt = fixEvent(evt);
  isDown = true;
  n = evt.target.id.substr(4) - 1;
  i = n % 2;
  j = Math.floor(n / 2);
  lastX = evt.clientX;
  lastY = evt.clientY;
  dx = evt.clientX - evt.target.getAttribute("cx");
  colors[j].getPositionTextNodes()[i] = p2d.changeText(colors[j].getPositionTextNodes(i), null, null, null, null, null, null, RED, null);
  colors[j].getPositionNodes()[i] = p2d.changeSymbol(colors[j].getPositionNodes(i), null, null, 9, null, null, RED, null);
  document.getElementById('iAx').value = j;
  document.getElementById('min').value = colors[j].getPositions(0).toFixed(colors[j].getScaler().getPlaces() + 1);
  document.getElementById('max').value = colors[j].getPositions(1).toFixed(colors[j].getScaler().getPlaces() + 1);
  show('trace', colors[j].id + ' down at ' + evt.target.id + ', dx=' + dx);
}

//  ----------------------------------------------------------------------------
up = function (evt) {
  evt = fixEvent(evt);
  isDown = false;
  colors[j].getPositionTextNodes()[i] = p2d.changeText(colors[j].getPositionTextNodes(i), null, null, null, null, null, null, 'blue', null);
  colors[j].getPositionNodes()[i] = p2d.changeSymbol(colors[j].getPositionNodes(i), null, null, 9, null, null, 'blue', null);
  show('trace', colors[j].id + ' up at ' + evt.target.id);
}

//  ----------------------------------------------------------------------------
move = function (evt) {
  if (!isDown) return;
  evt = fixEvent(evt);
  var x = evt.clientX - dx;
  //  var y = evt.clientY
  //  var dx = x - lastX;
  //  var dy = y - lastY;
  //  lastX = x;
  //  lastY = y;
  //  tx += dx;
  //  ty = 0; //  ty += dy //  movements only in x-direction
  //  evt.target.setAttribute( "transform", "translate("+tx+","+ty+")" );
  colors[j].getPositionNodes()[i] = p2d.getGraphics().changeCircle(colors[j].getPositionNodes(i), x); // , null, 9, null, null, RED, null);
  show('trace', colors[j].id + ' move ' + colors[j].getPositionTextNodes(i).id + ' : #' + n + '(' + j + ',' + i + ' - ' + x + ')');
  //  alert (colors[j].getPositionTextNodes ()[i].id+', p2d.getGraphics().changeText ('+colors[j].getPositionTextNodes(i).id+', '+x+')');
  colors[j].getPositions()[i] = colors[j].unScale(p2d.unPixelX(x)).toFixed(colors[j].getScaler().getPlaces() + 1);
  colors[j].getPositionTextNodes()[i] = p2d.getGraphics().changeText(colors[j].getPositionTextNodes(i), x, null, colors[j].getPositions(i));
  //  alert ('trace: '+'value = '+colors[j].getPositions (i)+', x = '+x+', unPixelX ('+x+') = '+p2d.unPixelX (x)+', unScale ('+p2d.unPixelX (x)+') = '+colors[j].unScale (p2d.unPixelX (x)));
  if (i) document.getElementById('max').value = colors[j].unScale(p2d.unPixelX(x)).toFixed(colors[j].getScaler().getPlaces() + 1);
  else document.getElementById('min').value = colors[j].unScale(p2d.unPixelX(x)).toFixed(colors[j].getScaler().getPlaces() + 1);
}

//  ---------------------------------------------------------------------------->
function show(id, text) {
  return document.getElementById(id).firstChild.nodeValue = text == undefined ? '' : id + ': ' + text;
}

//  ---------------------------------------------------------------------------->
function explainMe(evt) {
  evt = fixEvent(evt);
  var wl = evt.target.id.substr(2);
  document.getElementById('inputnm').value = wl;
  document.getElementById('inputrgb').value = Color(p2d.toColor(wl));
  document.getElementById('inputhex').value = RGBtoHex(p2d.toColor(wl));
  alert(wl + ' nm\n' + Color(p2d.toColor(wl)) + '\n' + RGBtoHex(p2d.toColor(wl)));
}

//  ---------------------------------------------------------------------------->
function showMe(evt) {
  evt = fixEvent(evt);
  var wl = evt.target.id.substr(2);
  document.getElementById('inputnm').value = wl;
  document.getElementById('inputrgb').value = Color(p2d.toColor(wl));
  document.getElementById('inputhex').value = RGBtoHex(p2d.toColor(wl));
  show('trace', wl + ' nm, ' + Color(p2d.toColor(wl)) + ', ' + RGBtoHex(p2d.toColor(wl)))
}

//  -------------------------------------------------------------------------->
  GraphPanel = function (id) {
    return p2d.getGraphics().getCanvas(); 
  };

//  ----------------------------------------------------------------------------
function init() {
  p2d = new plot2d(id); // , width, height, fill, opacity);
  graphPanel = new GraphPanel ('1');
  width  = p2d.getGraphics().getSize().width;
  height = p2d.getGraphics().getSize().height;
};

//  ----------------------------------------------------------------------------
function draw() {
  var wBox = width / iMax;
  var hBox = height / jMax;
  var colorInc = (p2d.getMaxWaveLength() - p2d.getMinWaveLength()) / (jMax * iMax);
  new HWText(p2d, "Color-Test (" + p2d.getMaxWaveLength() + " - " + p2d.getMinWaveLength() + " nm) by " + (jMax * iMax) + " steps", 10.0, 22.0, 24, 'black').draw('middle');
  for (var j = 0; j < jMax; j++)
    for (var i = 0; i < iMax; i++) {
      index = j * iMax + i;
      wl = p2d.getMinWaveLength() + colorInc * index
      colors[index] = p2d.toColor(wl);
//      alert('now draw the box: ' + (i * wBox) + ', ' + (j * hBox) + ', ' + wBox + ', ' + hBox + ', ' + Color(colors[index]) + ', black, 1, 1.0)');
      node = p2d.drawBoxPixel(i * wBox, j * hBox, wBox, hBox, Color(colors[index]), 'gray', 1, 1.0);
      node.id = 'nm' + Math.round(wl);
      node.onmouseover = showMe;
      node.onclick = explainMe;
      boxNodes[index] = node;
      show('trace', boxNodes[index].id + ': ' + j + ', ' + i + ', ' + 'colour=(' + colors[index] + ') ');
    }
  return colors;
}

//  -------------------------------------------------------------------------->
  createDialog = function (containerID) {

    var dialog = document.getElementById (containerID);
    var dialogPanel = new Panel ('Dialog', 'dialog'); dialog.appendChild(dialogPanel);

    var header = new Header ('1', "pick a colour"); dialogPanel.appendChild(header); header.onclickAction = function () {header.toggleHeight(header)}; 
    var minMaxPanel = new Panel ('MinMax'); dialogPanel.appendChild(minMaxPanel); 

    var numField = new Field ('iColor', 'number:', 0.0); numField.onchangeAction = function () {updateFunction (numField)}; 
    minMaxPanel.appendChild (numField);

    var nmField = new Field ('nm', 'in [nm]:', 0.0); nmField.onchangeAction = function () {updateFunction (nmField)};
    minMaxPanel.appendChild (nmField);

    var rgbField = new Field ('rgb', 'RGB:', 0.0); rgbField.onchangeAction = function () {updateFunction (rgbField)};
    minMaxPanel.appendChild (rgbField);

    var hexField = new Field ('hex', 'hex.:', 0.0); hexField.onchangeAction = function () {updateFunction (hexField)};
    minMaxPanel.appendChild (hexField);

    var buttonPanel = new Panel ('Button'); dialogPanel.appendChild(buttonPanel);
    buttonPanel.appendHeader ('actions:');

    buttonPanel.appendChild (new Button ("delete", "delete", function () {deleteColor ()}));
    buttonPanel.appendChild (document.createElement ('br'));

    buttonPanel.appendChild (new Button ("pick", "pick", function () {updateColor ()}));
    buttonPanel.appendChild (document.createElement ('br'));

    var optionsPanel = new Panel ('Options'); dialogPanel.appendChild(optionsPanel);
    optionsPanel.appendHeader ('options:');

    var toDoPanel = new Panel ('toDo'); dialogPanel.appendChild(toDoPanel);
    toDoPanel.appendHeader ('To do list ...');
    toDoPanel.appendListItem ('delete a colour');
  };

//  ----------------------------------------------------------------------------

function initForm(i) {
  var wl = p2d.getMinWaveLength();
  document.getElementById('inputiColor').value = i;
  document.getElementById('inputnm').value = wl;
  document.getElementById('inputrgb').value = Color(p2d.toColor(wl));
  document.getElementById('inputhex').value = RGBtoHex(p2d.toColor(wl));
}

//  ----------------------------------------------------------------------------
function updateColor(i) {
  i = parseInt(i);
  var wl = p2d.getMinWaveLength() + 4 * i;
  document.getElementById('inputiColor').value = i;
  document.getElementById('inputnm').value = wl;
  document.getElementById('inputrgb').value = Color(p2d.toColor(wl));
  document.getElementById('inputhex').value = RGBtoHex(p2d.toColor(wl));
}

//  ----------------------------------------------------------------------------
function deleteColor(i) {
  i = parseInt(i);
  alert('deleteColor (' + i + ') not yet implemented');
}

//  ----------------------------------------------------------------------------
  init();
  createDialog('dialog');
//  if (!p2d) return null;
  var colorPicker = draw();
  initForm (0)
  return this;
//  ----------------------------------------------------------------------------
}