var startend = "";

// function preload(arrayOfImages) {
//   $(arrayOfImages).each(function(){
//       $('<img/>')[0].src = this;
//       // Alternatively you could use:
//       // (new Image()).src = this;
//   });
// }

// // Usage:

// preload([
//   '../datasource-data/NoiseData/Icons_soundquiz/s_noise_spacecadet.png',
//   '../datasource-data/NoiseData/Icons_soundquiz/s_noise_paologreen.png',
//   '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rosybrown.png'
// ]);

function dragstart_handler(e) {
  var img = new Image();
  img.src = "../images/icons/locationSMsmall.png";

  e.dataTransfer.setDragImage(img, 11, 24);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz1(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_spacecadet.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz2(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_paologreen.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz3(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rosybrown.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz4(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rosevale.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz5(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_myrtlegreen.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz6(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_babyblue.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz7(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rubyred.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}
function dragstart_handler_quiz8(e) {
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_greensheen.png';
  // e.dataTransfer.setDragImage(img, 23, 45);
  // e.dataTransfer.setDragImage(img, 75, 145);
}

function dragEnter(e) {
  var map = vcs.vcm.Framework.getInstance().getActiveMap();
  var viewer = map.getCesiumWidget();
  var scene = map.getCesiumWidget()._scene;

  // var scene = viewer.scene;
  var billboards = scene.primitives.add(new Cesium.BillboardCollection());

  event.preventDefault();
  return true;
}

function dragDrop(e) {
  var map = vcs.vcm.Framework.getInstance().getActiveMap();
  var viewer = map.getCesiumWidget();
  var scene = map.getCesiumWidget()._scene;

  // stop Firefox from executing its default behaviour
  if (e.preventDefault) {
    e.preventDefault();
  }
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  // var scene = viewer.scene;
  // var billboards = scene.primitives.add(new Cesium.BillboardCollection());

  // var canvas = document.createElement('canvas');
  // canvas.width = 32;
  // canvas.height = 32;
  // var ctx = canvas.getContext('2d');
  // ctx.beginPath();
  // ctx.arc(16, 16, 15, 0, Cesium.Math.TWO_PI, true);
  // ctx.closePath();
  // ctx.fillStyle = `hsl(${Math.random()*360},55%,55%)`;
  // ctx.fill();

  var cartesian = viewer.camera.pickEllipsoid(
    new Cesium.Cartesian3(e.clientX, e.clientY),
    scene.globe.ellipsoid
  );

  // billboards.add({
  //   image: canvas,
  //   position: cartesian
  // });
  var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  console.log(cartographic);
  var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
  ballonContent.lon = longitudeString;
  var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
  ballonContent.lat = latitudeString;

  if (startend == "start") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "Start";
    var text = document.getElementById("Spunktlat");
    text.value = ballonContent.lat;
    var text = document.getElementById("Spunktlon");
    text.value = ballonContent.lon;
    // visualize a Point at the clicked location
    setPoint("Start", pointd);
  } else if (startend == "end") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "End";

    var text = document.getElementById("Epunktlat");
    text.value = ballonContent.lat;
    var text = document.getElementById("Epunktlon");
    text.value = ballonContent.lon;
    // visualize a Point at the clicked location
    setPoint("End", pointd);
  } else if (startend == "fav") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "fav";

    // var text = document.getElementById('Epunktlat');
    // text.value = ballonContent.lat;
    // var text = document.getElementById('Epunktlon');
    // text.value = ballonContent.lon;
    // visualize a Point at the clicked location
    setPointFav("fav", pointd);
  } else if (startend == "quiz_baustelle") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_baustelle";
    point_baustelle = pointd;

    setPointFav("quiz_baustelle", pointd);
  } else if (startend == "quiz_pragfriedhof") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_pragfriedhof";
    point_pragfriedhof = pointd;

    setPointFav("quiz_pragfriedhof", pointd);
  } else if (startend == "quiz_marktplatz") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_marktplatz";
    point_marktplatz = pointd;

    setPointFav("quiz_marktplatz", pointd);
  } else if (startend == "quiz_skaten") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_skaten";
    point_skaten = pointd;

    setPointFav("quiz_skaten", pointd);
  } else if (startend == "quiz_kirche") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_kirche";
    point_kirche = pointd;

    setPointFav("quiz_kirche", pointd);
  } else if (startend == "quiz_meerschweinchen") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_meerschweinchen";
    point_meerschweinchen = pointd;

    setPointFav("quiz_meerschweinchen", pointd);
  } else if (startend == "quiz_ufapalast") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_ufapalast";
    point_ufapalast = pointd;

    setPointFav("quiz_ufapalast", pointd);
  } else if (startend == "quiz_rostensteinpark") {
    var pointd = {
      lat: "",
      lon: "",
      loc: "",
    };
    pointd.lat = ballonContent.lat;
    pointd.lon = ballonContent.lon;
    pointd.loc = "quiz_rostensteinpark";
    point_rosensteinpark = pointd;

    setPointFav("quiz_rostensteinpark", pointd);
  }
}

function dragOver(e) {
  var map = vcs.vcm.Framework.getInstance().getActiveMap();
  var viewer = map.getCesiumWidget();
  var scene = map.getCesiumWidget()._scene;

  // var scene = viewer.scene;
  var billboards = scene.primitives.add(new Cesium.BillboardCollection());
  e.preventDefault();
}

function setPointStartEnd(loc) {
  startend = loc;
}