function drawInit(){
  window.board=document.createElement('canvas');

  if(board.getContext){
    window.context=board.getContext('2d');
    board.height=900;
    board.width=1300;

    bg=new Image();
    bg.onload=function(){
      context.drawImage(bg, 0, 0);
    };
    bg.src='includes/default/bg.png';

    document.body.style.background='none';

    board.addEventListener('mousedown', brushStart, false);
    board.addEventListener('mouseup', brushStop, false);
    board.addEventListener('mouseout', brushStop, false);
    board.addEventListener('click', brushDot, false);
    document.body.appendChild(board);

    window.oldX=null;
    window.oldY=null;

    context.lineJoin='round';
    changeSize();
    changeColor();

    window.drawCtl=document.getElementById('drawCtl');
    drawCtl.style.display='block';
    document.getElementById('brushToggle').addEventListener('click', drawStart, false);
    document.getElementById('size').addEventListener('click', sizeToggle, false);
    document.getElementById('swatch').addEventListener('click', CPToggle, false);
    document.getElementById('upload').addEventListener('click', bgUpload, false);
  }
}

function getCoord(ev){
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  }
  if (ev.offsetX || ev.offsetX == 0) {
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x:x,y:y};
}

function drawStart(){
  board.style.zIndex=10;
  this.removeEventListener('click', drawStart, false);
  this.addEventListener('click', drawStop, false);
  this.style.background="url('includes/default/brushon.png')";
  document.body.style.cursor='crosshair';
  document.getElementById('swatch').style.display='block';
  document.getElementById('size').style.display='block';
  document.getElementById('upload').style.display='block';
}

function drawStop(){
  board.style.zIndex=0;
  this.removeEventListener('click', drawStop, false);
  this.addEventListener('click', drawStart, false);
  this.style.background="url('includes/default/brush.png')";
  document.body.style.cursor='';
  document.getElementById('swatch').style.display='none';
  document.getElementById('size').style.display='none';
  document.getElementById('upload').style.display='none';
  document.getElementById('colorPicker').style.display='none';
  document.getElementById('sizePicker').style.display='none';
}

function brushStart(e){
  this.addEventListener('mousemove', brush, false);
  pos=getCoord(e);
  oldX=pos.x;
  oldY=pos.y;
}

function brushStop(){
  this.removeEventListener('mousemove', brush, false);
}

function brush(e){
  pos=getCoord(e);
  context.beginPath();
  context.moveTo(oldX, oldY);
  context.lineTo(pos.x, pos.y);
  context.closePath();
  context.stroke();
  oldX=pos.x;
  oldY=pos.y;
}

function brushDot(e){
  pos=getCoord(e);
  context.beginPath();
  context.moveTo(pos.x, pos.y);
  context.lineTo(pos.x+1, pos.y);
  context.closePath();
  context.stroke();
  oldX=e.offsetX;
  oldY=e.offsetY;
}

function changeSize(){
  context.lineWidth=document.getElementById('sizeRange').value;
}

function changeColor(){
  r=document.getElementById('r').value;
  g=document.getElementById('g').value;
  b=document.getElementById('b').value;
  a=document.getElementById('a').value/100;
  context.strokeStyle='rgba('+r+','+g+','+b+','+a+')';
  document.getElementById('swatch').style.backgroundColor=context.strokeStyle;
}

function CPToggle(){
  if(document.getElementById('colorPicker').style.display!='block'){
    document.getElementById('colorPicker').style.display='block';
    document.getElementById('sizePicker').style.display='none';
  }else{
    document.getElementById('colorPicker').style.display='none';
  }
}

function sizeToggle(){
  if(document.getElementById('sizePicker').style.display!='block'){
    document.getElementById('sizePicker').style.display='block';
    document.getElementById('colorPicker').style.display='none';
  }else{
    document.getElementById('sizePicker').style.display='none';
  }
}

function bgUpload(){
  if(confirm("Upload this image as the new background \nfor theangryorts.com?")){
    str=board.toDataURL();
    str=str.substr(str.indexOf(',')+1);
    str=str.replace(' ','+');
    req=new XMLHttpRequest();
    req.open('POST', 'bgsave.php', true);
    req.onreadystatechange=function(){
      if(req.readyState==4)alert(req.responseText);
    };
    req.setRequestHeader('Content-Type', 'text/plain');
    req.send(str);
  }
}