/*
* Ubiquity "grab-color" color grabbing command, v1.0
* by Jacob Seidelin, jseidein@nihilogic.dk, http://blog.nihilogic.dk/
*/

CmdUtils.CreateCommand({ 
  name: "grab-color",
  icon: "http://www.nihilogic.dk/favicon.ico",
  homepage: "http://blog.nihilogic.dk/",
  author: { name: "Jacob Seidelin", email: "jseidelin@nihilogic.dk"},
  license: "",
  description: "Grab colors from web pages",
  help: "",
  takes: { "mode": noun_arb_text },
  preview: function( pblock, input ) {
    var template = "Click anywhere on the page to pick up a color.<br/>Mode is either \"hex\" or \"rgb\" (defaults to \"hex\").";
    pblock.innerHTML = CmdUtils.renderTemplate(template);
  },
  execute: function(mode) {
    var rgb = (mode.text == "rgb");
    var win = CmdUtils.getWindowInsecure();
    var doc = CmdUtils.getDocumentInsecure();

    if (doc.getElementById("pixastic-color-picker-image")) 
      return;

    var hWin = CmdUtils.getHiddenWindow();
    var shot = hWin.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
    var width = win.innerWidth;
    var height = win.innerHeight;
    shot.mozOpaque = true;
    shot.width = width;
    shot.height = height;
    shot.getContext("2d").drawWindow(win, win.scrollX, win.scrollY, width, height, "rgb(255,255,255)");

    var img = doc.createElement("img");
    img.style.position = "absolute";
    img.style.zIndex = 0x7fffffff;
    img.style.padding = img.margin = "0px";
    img.style.border = "none";
    img.style.left = win.scrollX + "px";
    img.style.top = win.scrollY + "px";
    img.style.cursor = "crosshair";
    img.id = "pixastic-color-picker-image";

    img.src = shot.toDataURL("image/png");

    var box = doc.createElement("div");
    box.style.width = "150px";
    box.style.height = "15px";
    box.style.border = "1px solid black";
    box.style.color = "black";
    box.style.fontFamily = "helvetica, sans-serif";
    box.style.fontSize = "12px";
    box.style.backgroundColor = "rgba(255,255,255,0.7)";
    box.style.position = "absolute";
    box.style.zIndex = 0x7fffffff;

    var overflow = doc.body.style.overflow;
    doc.body.style.overflow = "hidden";
    doc.body.appendChild(img);
    doc.body.appendChild(box);

    var hex = function(n) {
      var h = n.toString(16);
      if (h.length == 1) h = "0" + h;
      return h;
    }

    img.onmousemove = function(e) {
       var data = shot.getContext("2d").getImageData(e.clientX, e.clientY, 1, 1).data;
       var color = rgb ? "rgb(" + data[0] + "," + data[1] + "," + data[2] + ")"
           : "#" + hex(data[0]) + hex(data[1]) + hex(data[2]);
       box.innerHTML = "Color: " + color;
       box.style.left = (e.clientX + win.scrollX + 10) + "px";
       box.style.top = (e.clientY + win.scrollY + 10) + "px";
    }

    img.onclick = function(e) {
       doc.body.removeChild(img);
       doc.body.removeChild(box);
       doc.body.style.overflow = overflow;
       var data = shot.getContext("2d").getImageData(e.clientX, e.clientY, 1, 1).data;
       var color = rgb ? "rgb(" + data[0] + "," + data[1] + "," + data[2] + ")"
           : "#" + hex(data[0]) + hex(data[1]) + hex(data[2]);
       win.prompt("Your selected color is", color);
    }

  }
});