var loading = document.getElementById('loading');
var colors  = document.getElementById('colors');
var plane   = document.createElement('div');

var offsetx = 50;
var offsety = colors.offsetTop;

var colorElem;

var mousedown = false;

var update = '';
var next   = 1000;



function createXMLHttpRequest() {
  // http://www.codepost.org/browse/snippets/59
  var types = [
    'Microsoft.XMLHTTP',
    'MSXML2.XMLHTTP.5.0',
    'MSXML2.XMLHTTP.4.0',
    'MSXML2.XMLHTTP.3.0',
    'MSXML2.XMLHTTP'
   ];

  for (var i = 0; i < types.length; i++) {
    try {
      return new ActiveXObject(types[i]);
    } catch(e) {}
  }

  try {
    return new XMLHttpRequest();
  } catch(e) { }

  return false; // XMLHttpRequest not supported
}


document.onmousedown = function(e) {
  var button = e ? e.button : window.event.button;

  if (button < 2) { // 0 for Firefox, 1 for IE
    mousedown = true;
  }
};
document.onmouseup = function() {
  mousedown = false;
};


var basepixel = document.createElement('span');
basepixel.style.position = 'absolute';
basepixel.style.width    = psize + 'px';
basepixel.style.height   = psize + 'px';

function pixelmousemove() {
  if (mousedown) {
    if (this.style.backgroundColor != colorElem.style.backgroundColor) {
      this.style.backgroundColor = colorElem.style.backgroundColor;
      update += '&' + this.id + '=' + colorElem.color.toLowerCase();
    }
  }
}
function pixelmousedown(e) {
  var button = e ? e.button : window.event.button;

  if (button < 2) { // 0 for Firefox, 1 for IE
    if (this.style.backgroundColor != colorElem.style.backgroundColor) {
      this.style.backgroundColor = colorElem.style.backgroundColor;
      update += '&' + this.id + '=' + colorElem.color.toLowerCase();
    }
  } else {
    pandacolor(this.style.backgroundColor);
  }
  
  return true;
}
function returnfalse() {
  return false;
}

var x  = 0;
var id = 1;

function addpixel(y) {
  var p = basepixel.cloneNode(false);
  p.style.left = x + 5 + 'px';
  p.style.top  = y + 5 + 'px';
  p.style.backgroundColor = init[id];
  p.id = id++;

  p.onmouseover   = pixelmousemove;
  p.onmousedown   = pixelmousedown;
  p.oncontextmenu = returnfalse;

  plane.appendChild(p);
}

function build() {
  for (var y = 0; y < (sizey * psize); y += psize) {
    addpixel(y);
  }

  x += psize;

  if (x < (sizex * psize)) {
    setTimeout(build, 0);
    loading.innerHTML += '.';
  } else {
    setTimeout(attach, 0);
    loading.innerHTML += '<br />attaching... (this could even take longer, your browser may stop responding, but you just have to wait)';
  }
}

function attach() {
  plane.style.position = 'absolute';
  plane.style.width    = (sizex * psize) + 10 + 'px';
  plane.style.height   = (sizey * psize) + 10 + 'px';
  plane.style.left     = offsetx + 'px';
  plane.style.top      = offsety + 'px';
  plane.style.backgroundColor = '#000';

  loading.innerHTML = '';

  document.body.insertBefore(plane, loading);

  colors.style.position   = 'absolute';
  colors.style.left       = offsetx + 'px';
  colors.style.top        = plane.offsetTop + plane.offsetHeight + 10 + 'px';
  colors.style.visibility = 'visible';

  setTimeout(sb_update, 10);

  setTimeout(pt_update, 1000);
}

loading.style.position = 'absolute';
loading.style.left     = (offsetx+50) + 'px';
loading.style.top      = (offsety+50) + 'px';
loading.innerHTML     += 'loading, this may take a while ('+sizex+' dots)<br />';

setTimeout(build, 10);


var addclink = colors.insertBefore(document.createElement('a'), colors.childNodes[0]);
addclink.innerHTML        = 'add color';
addclink.href             = '#';
addclink.style.marginLeft = '10px';
addclink.onclick = function() {
  window.open('addcolor.html', '_blank', 'width=260,height=250,scrollbars=no,resizable=no');

  return false;
}

function addcolor(rgb, set) {
  for (var i = 0; i < colors.childNodes.length; i++) {
    if (typeof colors.childNodes[i].color == 'undefined') {
      break;
    } else if (colors.childNodes[i].color == rgb) {
      if (set) {
        colors.childNodes[i].onclick();
      }

      return colors.childNodes[i];
    }
  }

  var c = colors.insertBefore(document.createElement('span'), addclink);
  c.style.styleFloat      = 'left'; // IE
  c.style.cssFloat        = 'left'; // Firefox
  c.style.backgroundColor = rgb;
  c.style.width           = '20px';
  c.style.height          = '20px';
  c.style.border          = '2px dotted #999';

  c.color = rgb;

  c.onclick = function() {
    colorElem.style.border = '2px dotted #999';
    colorElem = c;
    colorElem.style.border = '2px solid #000';
  };

  if (set) {
    c.onclick();
  }

  return c;
}

colorElem = addcolor('#000', false);
addcolor('#F00', true);
addcolor('#0F0', false);
addcolor('#00F', false);
addcolor('#FF0', false);
addcolor('#0FF', false);
addcolor('#F0F', false);
addcolor('#FFF', false);
addcolor('#840', false);


function pandacolor(color) {
  var c;
  if (color.indexOf('rgb') == 0) { // Firefox
    function rgb(r, g, b) {
      return '#' + r.toString(16).toUpperCase()[0] +
                   g.toString(16).toUpperCase()[0] +
                   b.toString(16).toUpperCase()[0];
    }
    c = eval(color);
  } else { // IE
    c = color.toUpperCase();
  }
  addcolor(c, true);
}


function pt_update() {
  var str = 'l=' + last + '&w=' + sizex;
  if (update != '') {
    str   += update;
    update = '';
  }

  var req = createXMLHttpRequest();
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        eval(req.responseText);
      } else {
        alert('error: ' + req.statusText);
      }
      
      setTimeout(pt_update, next);
    }
  };
  req.open('POST', 'update.php', true);
  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  req.send(str);
}