function addInput(parent, l_var, name, val) {
  var p = document.createElement("div");
  var text = document.createTextNode(name + ": ");
  l_var.type = "text";
  l_var.value = val;
  l_var.style.zIndex = 1;
  p.appendChild(text);
  p.appendChild(l_var);
  parent.appendChild(p);
}

function rgbt(r, g, b, t) {
  this.red = r;
  this.green = g;
  this.blue = b;
  this.trans = t;
}

function openMenu(foo) {
  foo.openMenu();
}

function gradient(parent) {
  function controls(parent) {
    var me_c = this;
    this.hide = function hide() {
      if (me_c.controls.style.visibility == "hidden") {
        me_c.controls.style.visibility = "visible";
      } else {
        me_c.controls.style.visibility = "hidden";
      }
    }
    this.controls = document.createElement("div");
    parent.appendChild(this.controls);
    this.x = document.createElement("input");
    addInput(this.controls, this.x, "X", "0");
    this.controls.appendChild(this.x);
    this.r = document.createElement("input");
    addInput(this.controls, this.r, "R", "0");
    this.controls.appendChild(this.r);
    this.g = document.createElement("input");
    addInput(this.controls, this.g, "G", "0");
    this.controls.appendChild(this.g);
    this.b = document.createElement("input");
    addInput(this.controls, this.b, "B", "0");
    this.controls.appendChild(this.b);
    this.t = document.createElement("input");
    addInput(this.controls, this.t, "T", "0");
    this.controls.appendChild(this.t);
    var submit = document.createElement("button");
    submit.onclick = function() {
      var x = parseFloat(me_c.x.value);
      var r = parseFloat(me_c.r.value);
      var g = parseFloat(me_c.g.value);
      var b = parseFloat(me_c.b.value);
      var t = parseFloat(me_c.t.value);
      me.addValue(x,r,g,b,t);
      me.display();
    }
    var text = document.createTextNode("Add");
    submit.appendChild(text);
    this.controls.appendChild(submit);

    this.controls.style.position = "absolute";
    this.controls.style.top = 20;
    this.controls.style.width = 200;

    
  }
  this.widget = document.createElement("div");
  var disp_grad_width = 100 + 2;
  var disp_grad_height = 15 + 2;
  parent.appendChild(this.widget);
  var grad_color = document.createElement("div");
  grad_color.style.width = disp_grad_width;
  grad_color.style.height = disp_grad_height;
  grad_color.style.left = 10;
  grad_color.style.position = "absolute";
  grad_color.style.backgroundColor = "#000000";
  this.widget.appendChild(grad_color);
  
  this.disp = new Array();
  for (var i = 0; i < disp_grad_width - 2; ++i) {
    this.disp[i] = document.createElement("div");
    this.disp[i].style.width=1;
    this.disp[i].style.height = disp_grad_height - 2;
    this.disp[i].style.left=1*i + 1;
    this.disp[i].style.top=1;
    grad_color.appendChild(this.disp[i]);
    this.disp[i].style.position="absolute";
    this.disp[i].style.zIndex=1;
  }
  var me = this;
  this.openMenu = function openMenu() {
    me.controls.hide();
  }
  var top = document.createElement("div");
  top.style.width = grad_color.style.width;
  top.style.height = grad_color.style.height;
  top.style.left = 0;
  top.style.top = 0;
  top.style.zIndex = 2;
  top.onclick = function() {
    me.openMenu();
  }
  top.style.position = "absolute";
  grad_color.appendChild(top);
  this.widget.style.left=300;
  this.widget.style.position="absolute";

  this.display = function display() {
    for (var i = 0; i < disp_grad_width - 2; ++i) {
      this.disp[i].style.backgroundColor =
          this.getpixel(i/(disp_grad_width - 3),0);
    }
  }
  this.data = new Array();
  this.addValue = function addValue(x, r, g, b, t) {
    // First make sure we don't need to just remove a number.  This can be done
    // better, I'm sure.
    for (var i = 0; i < this.data.length; ++i) {
      if (this.data[i][0] == x) {
        delete this.data[i][1];
        this.data[i][1] = new rgbt(r,g,b,t);
        return;
      }
    }
    var i = this.data.length;
    this.data[i] = new Array();
    for (; i > 0; --i) {
      if (this.data[i-1][0] > x) {
        this.data[i][0] = this.data[i-1][0];
        this.data[i][1] = this.data[i-1][1];
      } else {
        this.data[i][0] = x;
        this.data[i][1] = new rgbt(r,g,b,t);
        i = -1;
      }
    }
    if (i == 0) {
      this.data[0][0] = x;
      this.data[0][1] = new rgbt(r,g,b,t);
    }
  }
  this.getpixel = function getpixel(x,y) {
    var i = 0;
    var data = this.data;
    for ( ; i < data.length && data[i][0] < x; ++i);
    if (i <= 0) return rgb(0,0,0);
    if (i >= data.length) return rgb(0,0,0);
    var dist = (x - data[i-1][0])/ (data[i][0] - data[i-1][0]);
    return rgb(cosInt(data[i-1][1].red,data[i][1].red,dist),
               cosInt(data[i-1][1].green,data[i][1].green,dist),
               cosInt(data[i-1][1].blue,data[i][1].blue,dist));
  }

  this.controls = new controls(this.widget);
}

// 0 <= x <= 1, returns in [a,b]
function cosInt(a,b,x) {
  var ft = x * Math.PI;
  var f = (1 - Math.cos(ft)) * .5;
  var ret = a * (1 - f) + b * f;
return ret;
//  return a*(1-f) + b*f;
}