var socket = io.connect('localhost:3000');
var ctx;
var canvas;
var eraseMode = false;
var data = {};
var scrollItems;

$(document).ready(function()
{
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  scrollItems = 0;
  initCanvas();

  $('#chat_input').width($('.chat').width() - 3 * $('#send').width());

  socket.on('draw', draw);
  socket.on('clear', clear);
});

var welcome = function(data)
{
  $('#future').append("Welcome " + socket.id + "!<br/>"); //hier nog naam invullen, argument data is naam
}

$(window).on('resize', function()
{
  socket.emit('clear', "");
  canvas.style.width='100%';
  canvas.style.height='100%';
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  $('#chat_input').width($('.chat').width() - 3 * $('#send').width());
});

function resizeCanvas()
{
  $('#canvas').attr("width", $('.canvas').width());
  $('#canvas').attr("height", $('.canvas').height());
}

var draw = function(data)
{
  ctx.fillStyle = data.kleur;
  ctx.beginPath();
  ctx.arc(data.x, data.y, data.dikte, 0, 2 * Math.PI);
  ctx.fill();
};

var clear = function()
{
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

var clearChat = function()
{
  $("#future").empty();
  scrollItems = 0;
}

var scrollChatDown = function()
{
  scrollItems++;
  var chat = $('#future');
  chat.animate({scrollTop: (chat.prop('scrollHeight') * scrollItems)});
}

var initCanvas = function()
{
  var mouseClicked;
  var kleur;

  data.dikte = 5;
  data.kleur = "black";

  welcome("");
  $('#small').attr("style", "background-color: blue; color: white;");

  $('.kleurButtons').on('click', 'button', function(){
    if(!eraseMode) data.kleur = $(this).attr('value');

    //Als de eraser wordt uitgeschakeld => weer standaardkleur = zwart
    if($(this).attr("id") === "eraser") {
      eraseMode = eraseMode ? false : true;
      if(eraseMode === true) {
        $(this).attr("style", "background-color: blue; color: white;");
      } else {
        $(this).attr("style", "background-color: white;");
        data.kleur = "black";
      }
    }
  });

  $('.dikteButtons').on('click', 'button', function(){
    data.dikte = $(this).attr('value');
    $('.dikteButtons').children().css("background-color", "white");
    $('.dikteButtons').children().css("color", "black");
    $(this).attr("style", "background-color: blue; color: white;");
  });

  canvas.addEventListener('mousedown', function(event) {
    mouseClicked = true;
  });

  canvas.addEventListener('mouseup', function(event) {
    mouseClicked = false;
  });

  canvas.addEventListener('mousemove', function(event) {
    var parentOffset = $(this).offset();
    data.x = event.pageX - parentOffset.left;
    data.y = event.pageY - parentOffset.top;
    if (mouseClicked == true) {
      draw(data);
      socket.emit('draw', data);
    };
  });

  $('.clear').click(function() {
    clear();
    socket.emit('clear', "");
  });

  socket.on('broad', function(data) {
    $('#future').append("<p style='margin: 0 0 0 0;'>" + data + "</p>");
    scrollChatDown();
  });

  socket.on('join', function(data) {
    $('#future').append("<p style='color:green'>" + data + " joined!</p>");
    scrollChatDown();
  });

  socket.on('left', function(data) {
    $('#future').append("<p style='color:red'>" + data + " left!</p>");
    scrollChatDown();
  });

  $('#chat_form').submit(function(e){
      e.preventDefault();
      var message = $('#chat_input').val();
      $('#chat_input').val('');
      socket.emit('messages', message);
  });
}

//alles ivm REST
var getAllUsers = function()
{
  $.ajax({
    type: "GET",
    url: 'http://localhost:3000/users',
    dataType: "json",
    success: function(data) {
      console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log('error ' + textStatus + " " + errorThrown);
    }
  });
}

var deleteUser = function(name)
{
  $.ajax({
    type: "DELETE",
    url: 'http://localhost:3000/user/' + name,
    success: function() {
      console.log("Delete Successful");
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log('error ' + textStatus + " " + errorThrown);
    }
  });
}

var addUser = function(name, password)
{
  console.log(getUser(name));
  if(getUser(name) === undefined) {
    var postData = {username: name, password: password, highscore: 0};
    $.ajax({
      type: "POST",
      data: postData,
      url: 'http://localhost:3000/user',
      success: function(data) {
        console.log(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log('error ' + textStatus + " " + errorThrown);
      }
    });
  } else {
    console.log("username already taken");
  }
}

var getUser = function(name)
{
  $.ajax({
    type: "GET",
    url: 'http://localhost:3000/user/' + name,
    dataType: "json",
    success: function(data) {
      console.log(data);
      return data;
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log('error ' + textStatus + " " + errorThrown);
    }
  });
}

//hieronder alles ivm beurten