<html>

<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="{{ url_for("static", filename="js/d3.min.js") }}"></script>
      <script src="{{ url_for("static", filename="js/jquery-3.3.1.min.js") }}"></script>
<style>
body{
  width:100%;
  height:100%;
  padding: 0;
  margin:0;

}
rect{
  width: 40px;
  height: 40px;
  stroke: black;
  fill: none;
}
svg{
  width:100%;
  height:100%;
  padding: 0;
  margin:0;
}
.bg{
  fill: blue;
  width: 100%;
  height:100%;
}

.no_cover{
fill: yellow;
}

</style>
</head>
<body>

<script>
console.log("hello");
// d3.json("/api/books").then(function(data){
//   console.log("loaded");
//   console.log(data)
//   var g = d3.select('body')
//   .append('div')
//   .append('div');
//   g.selectAll("div.item")
//   .data(data.books)
//   .enter()
//   .append("div")
//   .attr("class", "item")
//   .text(function(d){return d.title})
//   .style("position", "absolute")
//   .style("top", function (d) { return d.scapeY})
//   .style("left", function (d) { return d.scapeX})
//
// }) //.err(function(err) {console.log("error!", err)})
d3.json("/api/books").then(function(data){
  console.log("loaded");
  console.log(data)

  var svg = d3.select('body')
  .append('svg');

  var bounds = svg.node().getBoundingClientRect(),
    width = bounds.width, height = bounds.height;
  var bg = svg.append("rect")
    .attr("class", "bg")
    .attr("width", width)
    .attr("height", height)
    .style("pointer-events", "all")
    .call(d3.zoom()
            .scaleExtent([0.1, 6])
          .on("zoom", zoomed));

  function zoomed(){
g.attr("transform", d3.event.transform);

  }

  var g = svg.append('g');
  var join = g.selectAll("g.item")
  .data(data.books, function (d) { return d.id });

  // process new items (enter)
  join.enter()
  .append("g")
  .attr("class", "item")
//  .text(function(d){return d.title})
  .style("position", "absolute")
  .attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"})
  .call(d3.drag()
  .on("start", function(d) {
    svg.selectAll("g.item").sort(function (a, b) { // select the parent and sort the path's
      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
      else return 1;                             // a is the hovered element, bring "a" to the front
  });
})
  .on("drag", function(d,i) {

  d.scapeX += d3.event.dx
  d.scapeY += d3.event.dy
  updateDB(d.id, d.scapeX, d.scapeY);
  d3.select(this).attr("transform", function(d,i){
    return "translate(" + [ d.scapeX,d.scapeY ] + ")"
  })})
);

  var itemLink = g.selectAll("g.item")
  .append("a")
  .attr("xlink:href", function(d){return "/books/"+d.id});


/*itemLink.append("rect")
.attr("class", "no_cover")
.attr('x', 0)
.attr('y', 0)
.attr('height', 60)
.attr('width', 40);*/


  itemLink.append("svg:image")
.attr("class", "no_cover")
.attr('x', 0)
.attr('y', 0)
.attr('height', 60)
.attr('width', 40)
.attr("xlink:href", function(d){if(d.cover!=null) return "/cover/"+d.cover});

itemLink.append("text")
.text(function(d){return d.title})
.attr("x", 0)
 .attr("y", 80)
.style("font-size", "6px");
/* .style("font-size", "10px")

  .attr("width", 80);*/
  // update existing elements
  join.transition(1000).attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"});
  join.exit().remove();





  function updateDB(id, xPos, yPos){
    var postForm = { //Fetch form data
   'id'     : id,
   'x'     : xPos, //Store name fields value,
   'y'     : yPos
};

    $.ajax({ //Process the form using $.ajax()
  type      : 'POST', //Method type
  url       : '/scape', //Your form processing file URL
  data      : postForm, //Forms name
  dataType  : 'json'
});

  }

})

</script>
</body>
</html>
