function status_update(ev) {
  console.log("Got message from server: " + ev.data);
}

function ws_connected(ev) {
  console.log("Connection to fetapi now active!");
  ev.target.onmessage = status_update;
  ev.target.send("test");
}

function connect_ws() {
  webSocket = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/ws");
  webSocket.onopen = ws_connected;
}

function drehscheibe_init() {
  drehscheibe = document.querySelector("#drehscheibe")
  drehscheibe.onmousedown = drehscheibe_click;
  document.onmouseup = function(e){
    document.onmousemove = function(){};
    rotateBack(drehscheibe);
  };
}

function drehscheibe_click(e) {
  e.preventDefault();
  document.onmousemove = drehscheibe_drag;
  click_degree = 0;
  drehscheibe_rect = drehscheibe.getBoundingClientRect();
  drehscheibe_center = { x: (drehscheibe_rect.x + drehscheibe_rect.width/2), y: (drehscheibe_rect.y + drehscheibe_rect.height/2) };
  if (e.clientX > drehscheibe_center.x) {
    base_vector = [ 10, 0 ];
    deg_offset = 0;
  } else {
    base_vector = [ -10, 0 ];
    deg_offset = 180;
  }
  mouse_vector = [ e.clientX - drehscheibe_center.x, e.clientY - drehscheibe_center.y ];
  vector_product = (mouse_vector[0]*base_vector[1])-(mouse_vector[1]*base_vector[0]);
  scalar_product = (Math.sqrt(Math.pow(mouse_vector[0], 2) + Math.pow(mouse_vector[1], 2))) * Math.sqrt(Math.pow(base_vector[0], 2) + Math.pow(base_vector[1], 2))
  rad = Math.acos(vector_product/scalar_product);
  degree = rad * (180/Math.PI);
  degree = degree + deg_offset;
  click_degree = degree;
  //console.log("Click deg: " + click_degree);
}

function drehscheibe_drag(e) {
  max_rotate = 125;
  drehscheibe_rect = drehscheibe.getBoundingClientRect();
  drehscheibe_center = { x: (drehscheibe_rect.x + drehscheibe_rect.width/2), y: (drehscheibe_rect.y + drehscheibe_rect.height/2) };
  if(e.clientX > drehscheibe_center.x) {
    base_vector = [ 10, 0 ];
    degree_offset = 0;
  } else if (e.clientX < drehscheibe_center.x) {
    base_vector = [ -10, 0];
    degree_offset = 180;
  }
  mouse_vector = [ e.clientX - drehscheibe_center.x, e.clientY - drehscheibe_center.y ];
  vector_product = (mouse_vector[0]*base_vector[1])-(mouse_vector[1]*base_vector[0]);
  scalar_product = (Math.sqrt(Math.pow(mouse_vector[0], 2) + Math.pow(mouse_vector[1], 2))) * Math.sqrt(Math.pow(base_vector[0], 2) + Math.pow(base_vector[1], 2))
  rad = Math.acos(vector_product/scalar_product);
  degree = rad * (180/Math.PI);
  real_degree = (degree+degree_offset)-click_degree;
  if(real_degree < 0) {
    real_degree = 360 + real_degree;
  }
  if(click_degree > 125) {
    rotation_degree = -(360-click_degree);
  } else {
    rotation_degree = click_degree;
  }
  if(real_degree+rotation_degree < 125){
    drehscheibe.style.transform = "rotate(" + real_degree + "deg)";
  }
}

function rotateBack(e) {
  drehscheibe.style.transform = "rotate(" + 0 + "deg)";
}

function getRotation(e) {
  var st = window.getComputedStyle(e, null);
  var tr = st.getPropertyValue("transform");
  var values = tr.split('(')[1],
    values = values.split(')')[0],
    values = values.split(',');
  var a = values[0];
  var b = values[1];
  var c = values[2];
  var d = values[3];
  var angle = Math.asin(b) * (180/Math.PI);
  return angle;
}

function init() {
  connect_ws();
  drehscheibe_init();
}

document.addEventListener("DOMContentLoaded", init);