'use strict';

(function() {

  var socket = io();
  var canvas = document.getElementsByClassName('whiteboard')[0];
  var colors = document.getElementsByClassName('color');
  var drawmodes = document.getElementsByClassName('drawmode');
  var theimage = document.getElementById('myimage');
  var thecc = document.getElementById('changecol');
  var thecolours = document.getElementById('mycolours');
  var context = canvas.getContext('2d');
  var numbermd = 0, lastwas = 0;
  var prevx = 0, prevy = 0, wascolour = '';

  var current = {
    color: 'black',
    drawmode: 'line',
    imageokay: false
  };
  var drawing = false;

  canvas.addEventListener('mousedown', onMouseDown, false);
  canvas.addEventListener('mouseup', onMouseUp, false);
  canvas.addEventListener('mouseout', onMouseUp, false);
  canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);
  theimage.addEventListener('load', proceed, false);
  theimage.addEventListener('error', donotproceed, false);
  thecc.addEventListener('click', curcolclick, false);
  thecolours.addEventListener('change', curcolbecomes, false);

  for (var i = 0; i < colors.length; i++){
    colors[i].addEventListener('click', onColorUpdate, false);
  }

  for (var j = 0; j < drawmodes.length; j++){
    drawmodes[j].addEventListener('click', onDrawmodeUpdate, false);
  }

  socket.on('drawing', onDrawingEvent);
  socket.on('rectangle', onRectangleEvent);
  socket.on('circle', onCircleEvent);
  socket.on('image', onImageEvent);

  window.addEventListener('resize', onResize, false);
  onResize();


  function drawImage(x0, y0, x1, y1, color, emit){
    var aski=null;
    if (color.indexOf('.') != -1) {
      aski=color;
    } else {
      aski=prompt("Please enter image URL to place", "http://www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg");
      if (aski != null) {
        if (aski.indexOf('.') != -1) {
         wascolour = current.color;
         current.color = 'transparent';
         current.drawmode = 'line';
        }
      }
    }
    if (aski == null) return;
    if (aski.indexOf('.') == -1) return;
    current.imageok = false;
    document.getElementById('myimage').title='' + x0 + ',' + y0 + ',' + x1 + ',' + y1 + ',' + aski + ',' + emit;
    document.getElementById('myimage').src=aski;
    setTimeout(imageafters, 1000);
  }
  
  function imageafters() {
   if (current.imageok) {  
    current.imageok = false;
    var ibits=document.getElementById('myimage').title.split(',');
    var x0 = eval(ibits[0]);
    var y0 = eval(ibits[1]);
    var x1 = eval(ibits[2]);
    var y1 = eval(ibits[3]);
    var aski = ibits[4];
    var emit = eval(ibits[5]);
    context.beginPath();
    context.moveTo(x0, y0);
    if (x1 < 0 && y1 < 0) {
      context.drawImage(document.getElementById('myimage'), x0, y0);
    } else {
      context.drawImage(document.getElementById('myimage'), Math.min(x0,x1), Math.min(y0,y1), Math.max(x0,x1), Math.max(y0,y1));
    }
    context.closePath();

    if (!emit) { return; }
    var w = canvas.width;
    var h = canvas.height;

    socket.emit('image', {
      x0: x0 / w,
      y0: y0 / h,
      x1: x1 / w,
      y1: y1 / h,
      color: aski
    });
    
    current.color = wascolour;
    drawing = false;
   } else {
    setTimeout(imageafters, 1000);
   }
  }

  function drawRectangle(x0, y0, x1, y1, color, emit){
    context.beginPath();
    context.moveTo(Math.min(x0,x1), Math.min(y0,y1));
    context.fillStyle = color;
    context.fillRect(Math.min(x0,x1), Math.min(y0,y1), Math.abs(x1 - x0), Math.abs(y1 - y0));
    context.closePath();

    if (!emit) { return; }
    var w = canvas.width;
    var h = canvas.height;

    socket.emit('rectangle', {
      x0: x0 / w,
      y0: y0 / h,
      x1: x1 / w,
      y1: y1 / h,
      color: color
    });
  }

  function drawCircle(x0, y0, x1, y1, color, emit){
    context.beginPath();
    context.moveTo(x0, y0);
    context.fillStyle = color;
    context.arc(x0,y0,Math.pow((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1),0.5),0,2*Math.PI);
    context.fill();
    context.closePath();

    if (!emit) { return; }
    var w = canvas.width;
    var h = canvas.height;

    socket.emit('circle', {
      x0: x0 / w,
      y0: y0 / h,
      x1: x1 / w,
      y1: y1 / h,
      color: color
    });
  }

  function drawLine(x0, y0, x1, y1, color, emit){
   if (current.drawmode == 'image1') {
    drawImage(x1, y1, -1, -1, color, emit);
   } else {
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.strokeStyle = color;
    context.lineWidth = 2;
    context.stroke();
    context.closePath();

    if (!emit) { return; }
    var w = canvas.width;
    var h = canvas.height;

    socket.emit('drawing', {
      x0: x0 / w,
      y0: y0 / h,
      x1: x1 / w,
      y1: y1 / h,
      color: color
    });
   }
  }

  function onMouseDown(e){
    numbermd++;
    drawing = true;
    //document.title+='+' + numbermd;
    lastwas = -1;
    if (numbermd > 1) {
      //document.title='' + prevx + ',' + prevy + ',' + e.clientX + ',' + e.clientY;
      if (current.drawmode == 'rectangle') {
        drawRectangle(prevx, prevy, e.clientX, e.clientY, current.color, true);
        numbermd = 0;
      } else if (current.drawmode == 'circle') {
        drawCircle(prevx, prevy, e.clientX, e.clientY, current.color, true);
        numbermd = 0;
      } else if (current.drawmode == 'image2') {
        drawImage(prevx, prevy, e.clientX, e.clientY, current.color, true);
        numbermd = 0;
      } else {
        drawLine(prevx, prevy, e.clientX, e.clientY, current.color, true);
        numbermd = 1;
      }
    } else if (current.drawmode == 'image1') {
      drawImage(e.clientX, e.clientY, -1, -1, current.color, true);
      numbermd = 0;
    }
    current.x = e.clientX;
    current.y = e.clientY;
    prevx = current.x;
    prevy = current.y;
  }

  function onMouseUp(e){
    if (!drawing) { return; }
    if (lastwas != -1) numbermd = 0;
    //document.title+='?';
    drawing = false;
    //document.title='mu: ' + current.x + ',' + current.y + ',' + e.clientX + ',' + e.clientY;
    if (lastwas != -1) drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
    lastwas = 0;
  }

  function onMouseMove(e){
    if (!drawing) { return; }
    numbermd = 0;
    //document.title+='!';
    lastwas = 1;
    drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
    current.x = e.clientX;
    current.y = e.clientY;
  }

  function curcolclick(e){ 
      thecolours.click();
  }

  function curcolbecomes(e){ 
      current.color = thecolours.value;
  }

  function proceed(e){ 
      current.imageok = true;
  }

  function donotproceed(e){ 
      current.imageok = false;
  }

  function onDrawmodeUpdate(e){ // discrete mouse down click/touch modes
      current.drawmode = e.target.className.split(' ')[1];
  }

  function onColorUpdate(e){ // scribble mode
      current.color = e.target.className.split(' ')[1];
  }

  // limit the number of events per second
  function throttle(callback, delay) {
    var previousCall = new Date().getTime();
    return function() {
      var time = new Date().getTime();

      if ((time - previousCall) >= delay) {
        previousCall = time;
        callback.apply(null, arguments);
      }
    };
  }

  function onDrawingEvent(data){
    var w = canvas.width;
    var h = canvas.height;
    drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
  }

  function onRectangleEvent(data){
    var w = canvas.width;
    var h = canvas.height;
    //alert('here');
    drawRectangle(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
  }

  function onCircleEvent(data){
    var w = canvas.width;
    var h = canvas.height;
    //alert('here');
    drawCircle(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
  }

  function onImageEvent(data){
    var w = canvas.width;
    var h = canvas.height;
    drawImage(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
  }

  // make the canvas fill its parent
  function onResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

})();