var socket = null;
var docker = null;

function error(msg, data) {
  $('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+msg+'</p><pre>'+data+'</pre>').show()
}

function sigstack() {
  $('#error').hide()
  var dot = docker.graphics.stack()
  var svg = docker.graphics.viz(dot, error)
  $('#stacks').html(svg)
  $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
                  .attr('target', '_blank')
                  .attr('download', window.location.hostname+'.svg')
  $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
                  .attr('target', '_blank')
                  .attr('download', window.location.hostname+'.dot')

}

function init() {
  socket = io.connect()
  docker = new Docker(socket, error, sigstack)
  $('header').attr('draggable', 'true')
             .on('dragstart', (event) => {
               event.originalEvent.dataTransfer.setData("text", event.originalEvent.target.id);
             })
  $('*').on('dragover', (event) => {
    event.preventDefault()
    var e = event.originalEvent
    var obj = $('body')
    var w = window.innerWidth
    var h = window.innerHeight
    if (e.clientY < h*.1) {
      obj.removeClass('bottom').removeClass('left').removeClass('right').addClass('top')
    } else if (e.clientY > h*.9) {
      obj.addClass('bottom').removeClass('left').removeClass('right').removeClass('top')
    } else if (e.clientX < w*.1) {
      obj.removeClass('bottom').addClass('left').removeClass('right').removeClass('top')
    } else if (e.clientX > w*.9) {
      obj.removeClass('bottom').removeClass('left').addClass('right').removeClass('top')
    }
  }).on('drop', (event) => {
    event.preventDefault()
  })
}
$(init)