'use strict';

(function() {

  var socket = io();
  var canvas = document.getElementsByClassName('whiteboard')[0];
  var elemLeft = canvas.offsetLeft;
  var elemTop = canvas.offsetTop;
  var colors = document.getElementsByClassName('color');
  var drawmodes = document.getElementsByClassName('drawmode');
  var theimage = document.getElementById('myimage');
  var thecc = document.getElementById('changecol');
  var theanswerdiv = document.getElementById('dq');
  var thequestion = document.getElementById('sdq');
  var theanswer = document.getElementById('sda');
  var thecolours = document.getElementById('mycolours');
  var iois = document.getElementById('quizzer');
  var selis = document.getElementById('siframe');
  var context = canvas.getContext('2d');
  var numbermd = 0, lastwas = 0;
  var prevx = 0, prevy = 0, wascolour = '';
  var gameon = false, pending = false;
  var cgameon = '', prevcgameon = '';
  var score = 0, goes = 0;
  var thisanswer = 0.0;
  var sigstr='', intensity=1000, arecoords=true, endcoords='', offtodraw=false;

  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);
  iois.addEventListener('load', takealook, false);
  iois.addEventListener('error', donottakealook, false);
  theanswer.addEventListener('blur', assessa, false);
  theanswer.addEventListener('change', assessa, false);
  selis.addEventListener('change', assessi, false);
  
  theanswerdiv.style.display = 'none';

  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);
  socket.on('gameon', onGameonEvent);
  socket.on('gameoff', onGameoffEvent);
  socket.on('question', onQuestionEvent);

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

  var createCookie = function(name, value, days) {  // thanks to https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
  }

  function getCookie(c_name) {  // https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie
    if (document.cookie.length > 0) {
        var c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            var c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return null; //"";
  }
  
  function fthequestion(whatq) {
    if (whatq.split(' ')[eval(-1 +  whatq.split(' ').length)] == "") {
    if (1 == 6) document.title+='A';
    } else {
    prevcgameon=whatq;
    cgameon=whatq;
    if (document.title.indexOf('Big Numbers Calculator') == -1) document.title+=' ... Big Numbers Calculator';
    socket.emit("question", whatq.split(' ')[eval(-1 +  whatq.split(' ').length)]);
    theanswerdiv.style.display = 'inline';
    thisanswer = eval(whatq.split(' ')[eval(-1 +  whatq.split(' ').length)].split('=')[1]);
    thequestion.innerHTML='Score: ' + score + '/' + goes + ' ... You got asked: ' + whatq.split(' ')[eval(-1 +  whatq.split(' ').length)].split('=')[0] + ' = ';
    }
  }
  
  function oversee(cooval) {
    if (cooval == null) cooval='';
    var retnval=prevcgameon;
    //document.title=cooval.substring(0,32);
    //if (cooval.length >= 2 && cooval.indexOf('base64') != -1) alert(cooval);
    if (cooval.length >= 2) {
      if (cooval.substring(0,2).indexOf('!') != -1) {  // Signature of Signature
        intensity = 100;
        if (cooval == "y!") {
          if (document.title.indexOf('Signature Signature') == -1) document.title=document.title.split(' ... ')[0] + ' ... Signature Signature';
          if (!arecoords) {
            //alert(endcoords.length);
            if (!offtodraw) drawImage(prevx, prevy, -1, -1, endcoords, true); 
            offtodraw=true;         
            if (1 == 2) arecoords=false;
          } else if (sigstr.indexOf(',') != -1) {
            var slines=sigstr.split(';'), slcoords=[], islines=0, islcoords=0;
            for (islines=0; islines<slines.length; islines++) {
              slcoords=slines[islines].split(',');
              for (islcoords=2; islcoords<slcoords.length; islcoords+=2) {
                //document.title='+' + eval(slcoords[eval(-2 + islcoords)]) + ',' + eval(slcoords[eval(-1 + islcoords)]) + ',' + eval(slcoords[eval(0 + islcoords)]) + ',' + eval(slcoords[eval(1 + islcoords)]);
                drawLine(eval(slcoords[eval(-2 + islcoords)]), eval(slcoords[eval(-1 + islcoords)]), eval(slcoords[eval(0 + islcoords)]), eval(slcoords[eval(1 + islcoords)]), current.color, true);
              }
            }
          }
          if (arecoords) sigstr="";
        } else if (cooval == "n!") {
          sigstr="";
        } else if (sigstr == "" || (cooval + '*').indexOf(encodeURIComponent(';base64,*')) != -1 || (cooval + '*').indexOf(';base64,*') != -1) {
          if ((cooval + '*').indexOf(encodeURIComponent(';base64,*')) != -1) {
          endcoords='' + decodeURIComponent(cooval.substring(2));
          arecoords=false;
          retnval=endcoords;
          prevcgameon=endcoords;
          } else if ((cooval + '*').indexOf(';base64,*') != -1) {
          endcoords='' + cooval.substring(2);
          arecoords=false;
          retnval=cooval;
          prevcgameon=cooval;
          } else {
          sigstr='' + cooval.substring(2);
          arecoords=true;
          retnval=cooval;
          prevcgameon=cooval;
          }
        } else if (!arecoords) {
          endcoords+='' + cooval.substring(2);
          retnval=cooval;
          prevcgameon=cooval;
        } else {
          sigstr+=';' + cooval.substring(2);
          retnval=cooval;
          prevcgameon=cooval;
        }
      } else {   // Maths Quiz
        intensity=1000;
        retnval=cooval;
      }
    } 
    return retnval;
  }

  function keepalookout() {
    cgameon=oversee(getCookie('gameon'));
    var dd = new Date();
    var sseconds = Math.round(dd.getTime() / 1000);        
    if (1 == 6) document.title=sseconds + ' ' + cgameon;
    if (cgameon == null) cgameon='';
    if (prevcgameon != cgameon) {
      if (cgameon.substring(0,1) == 'y' && cgameon.length > prevcgameon.length && cgameon.substring(1).indexOf(prevcgameon.substring(1)) != -1) {
        //alert(cgameon.substring(1) + " vs " + prevcgameon.substring(1));
        //alert(cgameon.substring(1).split(prevcgameon.substring(1))[1]);
        if (prevcgameon.substring(1) == "") {
         fthequestion(cgameon.substring(1));
         setTimeout(keepalookout, intensity);
        } else {
         fthequestion(cgameon.substring(1).split(prevcgameon.substring(1))[1]);
         setTimeout(keepalookout, intensity);
        }
      } else {
        prevcgameon = cgameon.substring(0,1);
        if (cgameon.substring(0,1) == 'y') {
          setTimeout(keepalookout, intensity);
        } else {
          if (1 == 6) document.title+='E';
        }
      }
    } else if (cgameon.substring(0,1) == 'y') {
      setTimeout(keepalookout, intensity);
    }
  }

  function drawImage(x0, y0, x1, y1, color, emit){
    var aski=null;
    if (color.length > 30 && color.indexOf(';base64,') != -1) {
      endcoords=color;
      arecoords=false;
    }
    if (!arecoords && endcoords != "") {
      aski=endcoords;
    } else if (color.indexOf('.') != -1 || color.length > 30) {
      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 (arecoords || endcoords == "") {
      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 = '';
    if (!arecoords && endcoords != '') {
     aski = endcoords;
     arecoords=true;
     endcoords='';
     offtodraw=false;
    } else {
     aski = ibits[4];
    }
    var emit = eval(ibits[eval(-1 + ibits.length)]);
    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.min(x0,x1), Math.max(y0,y1) - Math.min(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 {
    //document.title='' + x0 + ',' + y0 + ',' + x1 + ',' + y1;
    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 (e.clientX || e.clientY) {
       current.x = e.clientX - elemLeft;
       current.y = e.clientY - elemTop;
    } else {
       current.x = e.pageX - elemLeft;
       current.y = e.pageY - elemTop;
    }
    if (numbermd > 1) {
      //document.title='' + prevx + ',' + prevy + ',' + e.clientX + ',' + e.clientY;
      if (current.drawmode == 'rectangle') {
        drawRectangle(prevx, prevy, current.x, current.y, current.color, true);
        numbermd = 0;
      } else if (current.drawmode == 'circle') {
        drawCircle(prevx, prevy, current.x, current.y, current.color, true);
        numbermd = 0;
      } else if (current.drawmode == 'image2') {
        drawImage(prevx, prevy, current.x, current.y, current.color, true);
        numbermd = 0;
      } else {
        drawLine(prevx, prevy, current.x, current.y, current.color, true);
        numbermd = 1;
      }
    } else if (current.drawmode == 'image1') {
      drawImage(current.x, current.y, -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 (e.clientX || e.clientY) {
       if (lastwas != -1) drawLine(current.x, current.y, e.clientX - elemLeft, e.clientY - elemTop, current.color, true);
    } else {
       if (lastwas != -1) drawLine(current.x, current.y, e.pageX - elemLeft, e.pageY - elemTop, current.color, true);
    }
    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;
    if (e.clientX || e.clientY) {
       drawLine(current.x, current.y, e.clientX - elemLeft, e.clientY - elemTop, current.color, true);
       current.x = e.clientX - elemLeft;
       current.y = e.clientY - elemTop;
    } else {
       drawLine(current.x, current.y, e.pageX - elemLeft, e.pageY - elemTop, current.color, true);
       current.x = e.pageX - elemLeft;
       current.y = e.pageY - elemTop;
    }
    //current.x = e.clientX;
    //current.y = e.clientY;
  }

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

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

  function takealook(e){ 
  }

  function donottakealook(e){ 
  }

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

  function donotproceed(e){ 
      current.imageok = false;
  }
  
  function assessStatus() {
      if (gameon) {
       document.getElementById('dcolours').style.borderBottom = '3px solid black';
       document.getElementById('gameon').value="y";
       if (1 == 6) document.title+="gameon";
      } else {
       document.getElementById('dcolours').style.borderBottom = '';
       document.getElementById('gameon').value="";
       if (1 == 6) document.title+="gameoff";
      }
      pending = false;
  }
  
  function assessi(e){ 
      var aval=selis.value;
      if (aval == '') {
        iois.style.display='none';
      } else {
        iois.style.display='block';
        iois.src=aval;
      }
  }
  
  function assessa(e){ 
      var amsg=thequestion.innerHTML.split('You got asked: ')[1];
	  if (amsg.split('=')[0] != "") {
      goes++;
      if (Math.abs(eval(theanswer.value) - thisanswer) < 0.001) {
        score++;
        thequestion.innerHTML='Score: ' + score + '/' + goes + ' ... You got asked: ' + amsg.split('=')[0] + ' = ';
      } else {
        thequestion.innerHTML='Score: ' + score + '/' + goes + ' ... You got asked: ' + amsg.split('=')[0] + ' = ' + thisanswer + ' ... not ...';
      }
      } else {
      if (1 == 6) document.title+='C';
      }
  }  

  function onQuestionEvent(msg){ // someone challenged
     if (getCookie('gameon').split(' ')[eval(-1 + getCookie('gameon').split(' ').length)] != msg.split(' ')[eval(-1 + getCookie('gameon').split(' ').length)]) {
       if ((getCookie('gameon') + ' ' + msg).length > 230) {
        prevcgameon=getCookie('gameon').substring(0,1) + ' ' + msg;
        createCookie('gameon', prevcgameon, 365);
       } else {
        prevcgameon=getCookie('gameon') + ' ' + msg;
        createCookie('gameon', prevcgameon, 365);
       }
       cgameon=prevcgameon;
     } 
     if (msg.split(' ')[eval(-1 + getCookie('gameon').split(' ').length)] != "") {
     if (document.title.indexOf('Big Numbers Calculator') == -1) document.title=document.title.split(' ... ')[0] + ' ... Big Numbers Calculator';
     theanswerdiv.style.display = 'inline';
     thisanswer = eval(msg.split(' ')[eval(-1 + msg.split(' ').length)].split('=')[1]);
     thequestion.innerHTML='Score: ' + score + '/' + goes + ' ... You got asked: ' + msg.split(' ')[eval(-1 + msg.split(' ').length)].split('=')[0] + ' = ';
     } else {
     if (1 == 6) document.title+='B';
     }
  }
  
  function onGameonEvent(e){ // two or more players available
      gameon = true;
      if (!pending) setTimeout(assessStatus, 1500);
      pending = true;
      prevcgameon = getCookie('gameon');
      if (prevcgameon == null) {
        prevcgameon = '';
        cgameon = '';
      }
      if (cgameon.length <= 1) {
        cgameon = 'y';
        prevcgameon = cgameon;
        createCookie('gameon','y',365);
      } else {
        cgameon = 'y' + cgameon.substring(1);
        prevcgameon = cgameon;
        createCookie('gameon','y' + cgameon.substring(1),365);
      }
      setTimeout(keepalookout, 1000);
  }

  function onGameoffEvent(e){ // you are the only player
      gameon = false;
      if (!pending) setTimeout(assessStatus, 1500);
      pending = true;
      prevcgameon = getCookie('gameon');
      if (prevcgameon == null) {
        prevcgameon = '';
        cgameon = '';
      }
      createCookie('gameon','n',365);
      cgameon = 'n';
      prevcgameon = 'n';
  }

  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 = eval(0.7 * window.innerWidth);
    canvas.height = window.innerHeight;
  }

})();