var width = 700,
    height = 350

var svg = d3.select(".map_area").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`);

var force = d3.layout.force()
    .gravity(0.009)
    .distance(500)
    .charge(-30)
    .size([width, height]);


d3.json("/static/js/group1.json", function(error, json) {
  if (error) throw error;

  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");


  var node = svg.selectAll(".node")
      .data(json.nodes)
      .enter().append("g")
      .attr("class", function(d){return "node group" + d.group})
      .attr("id", function(d){return d.id});

      node.append("image")
          // .attr("xlink:href", "/static/images/squig2.png")
          .attr("xlink:href", "/static/images/circleB.png")
          .attr("x", -8)
          .attr("y", -8)
          .attr("width", 16)
          .attr("height", 16);

      node.append("text")
          // .attr("xlink:href", "#")
          .attr("dx", 12)
          .attr("dy", ".35em")
          .text(function(d) { return d.name });


var divVideo = d3.select("body").append("div").style("opacity", 1);
var divBio = d3.select("body").append("div").style("opacity", 1);



      node.on({
        "mouseover": function(d) {
          d3.select(this).style("cursor", "pointer");
        }})
        .on("click", function(i){
              // popup video
              divVideo.transition().duration(100);
              divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';pauseAllVideos("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video"+i.id+"' width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
              divBio.transition().duration(100);
              divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio"+i.id+"'>"+i.bio+"</div>");
              // draggable


              // div.on(".drag", null);
              // span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
              // rest pop up
              popup(i.id,i.time);
            })
        .on("dblclick",connectedNodes)
        .call(force.drag);



      force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      });




// under construction
  // d3.select("body").on("click",function(i){
  //   stop(i.id);
  // });

// highlight NodeLists//Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < json.nodes.length; i++) {
    linkedByIndex[i + "," + i] = 1;
};
json.links.forEach(function (d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
    return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
    if (toggle == 0) {
        //Reduce the opacity of all but the neighbouring nodes
        d = d3.select(this).node().__data__;
        node.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
        });
        link.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
        });
        //Reduce the op
        toggle = 1;
    } else {
        //Put them back to opacity=1
        node.style("opacity", 1);
        link.style("opacity", 1);
        toggle = 0;
    }
}
//end highlight nodes




// no overlapping

//var padding = 10, // separation between circles
//    radius=8;
//function collide(alpha) {
//  var quadtree = d3.geom.quadtree(<.nodes);
//  return function(d) {
//    var rb = 2*radius + padding,
//        nx1 = d.x - rb,
//        nx2 = d.x + rb,
//        ny1 = d.y - rb,
//        ny2 = d.y + rb;
//    quadtree.visit(function(quad, x1, y1, x2, y2) {
//      if (quad.point && (quad.point !== d)) {
//        var x = d.x - quad.point.x,
//            y = d.y - quad.point.y,
//            l = Math.sqrt(x * x + y * y);
//          if (l < rb) {
//          l = (l - rb) / l * alpha;
//          d.x -= x *= l;
//          d.y -= y *= l;
//          quad.point.x += x;
//          quad.point.y += y;
//        }
//      }
//      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
//    });
//  };
//}

// scripts for mouse events
// var stopVideo = function (name) {
// function stopVideo(name) {
//     var iframe = document.querySelector( 'iframe');
//     var video = document.getElementById( "#video"+name );
//     if ( iframe !== null ) {
//         var iframeSrc = iframe.src;
//         iframe.src = iframeSrc;
//     }
//     if ( video !== null ) {
//         video.pause();
//     }
// };

// $(function (){
//     $('.topleft').click(function(){
//         $('iframe').attr('src', $('iframe').attr('src'));
//     });
// });


// function pauseAllVideos(name)
//     {
//       $("#video"+name).each(function(){
//         this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
//       });
//     }

function pauseAllVideos(name) {
  $("video"+name).each(function(){
     $(this).stopVideo();
   });
};

// $(function (){
//     $('.topleft').click(function(){
//         $('iframe').attr('src', $('iframe').attr('src'));
//     });
// });

function popup(name,time) {
      $("#show"+name).fadeIn()
      console.log("around")
      $("#thesis").fadeIn()
      $("#thesisX").fadeIn()
      $("#bio"+name).fadeIn()
      var dada = document.getElementById("text"+name);
      dada.className += " active";
      dada.scrollIntoView();
      // var audio1 = document.getElementById("audioBG");
      // audio1.currentTime = time;
      // audio1.play();
};



//stop events when clicking somewhere else
  // $(document).click(function (e) {
  //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
  //       $("#showdadaloglu").fadeOut();
  //       $("#audiodadaloglu").trigger('pause');
  //       // var textdada = document.getElementById("textdadaloglu");
  //       // textdada.classList.remove("active");
  //     };
  //   if (!$(e.target).parents().andSelf().is('#asikA')) {
  //     $("#showasikA").fadeOut();
  //       $("#audioasikA").trigger('pause');
  //       // var textasikA = document.getElementById("textasikA");
  //       // textasikA.classList.remove("active");
  //       stopVideo("#asikA");
  //   };
  //
  // });

  // $(document).click(function (e) {
  //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
  //       $("#showdadaloglu").fadeOut();
  //       $("#audiodadaloglu").trigger('pause');
  //       // var textdada = document.getElementById("textdadaloglu");
  //       // textdada.classList.remove("active");
  //     };
  //   if (!$(e.target).parents().andSelf().is('#asikA')) {
  //     $("#showasikA").fadeOut();
  //       $("#audioasikA").trigger('pause');
  //       // var textasikA = document.getElementById("textasikA");
  //       // textasikA.classList.remove("active");
  //       stopVideo("#asikA");
  //   };
  //
  // });



});

// function stop(name) {
//   $(document).click(function (e) {
//     if (!$(e.target).parents().andSelf().is('#'+ name)) {
//         $("#show"+name).fadeOut();
//         $("#audio"+name).trigger('pause');
//         var textdada = document.getElementById("text"+name);
//         textdada.classList.remove("active");
//       };
//   });
// };

//
//