var socket = io.connect()
var docker = new Docker(socket, error, sigstack)
var parameters = docker.graphics.parameters

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

function sigstack() {
  $('#error').hide()
  $('#clock').text((new Date()).toLocaleString())
  $('#status').removeClass().addClass('wait')
  var dot = docker.graphics.stack(parameters)
  $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
                  .attr('target', '_blank')
                  .attr('download', window.location.hostname+'.dot')
  try {
    $('#clock').text((new Date()).toLocaleString())
    var svg = docker.graphics.viz(dot)
    $('#stacks').html(svg)
    $('#status').removeClass().addClass('success')
    $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
                    .attr('target', '_blank')
                    .attr('download', window.location.hostname+'.svg')
  } catch (e) {
    error(e)
  }
  $('#clock').text((new Date()).toLocaleString())
}

function setParameters() {
  localStorage.rankdir = (++localStorage.rankdir)%setParameters.rankdirs.length
  parameters.rankdir = setParameters.rankdirs[localStorage.rankdir]
  $('#orientation').removeClass().addClass(parameters.rankdir.toLowerCase())
}
setParameters.rankdirs = ['LR', 'TB', 'RL', 'BT']
if (!localStorage.rankdir)
  localStorage.rankdir = -1
else
  --localStorage.rankdir

function init() {
  setParameters()
  $('#orientation').on('click', () => {
    setParameters()
    sigstack()
  })
  if (localStorage.position)
    $('body').removeClass().addClass(localStorage.position)
  $('header').attr('draggable', 'true')
             .on('dragstart', (event) => {
               event.originalEvent.dataTransfer.setData("text", "");
             })
  $('*').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().addClass('top')
      if (localStorage) localStorage.position = 'top';
    } else if (e.clientY > h*.9) {
      obj.removeClass().addClass('bottom')
      if (localStorage) localStorage.position = 'bottom';
    } else if (e.clientX < w*.1) {
      obj.removeClass().addClass('left')
      if (localStorage) localStorage.position = 'left';
    } else if (e.clientX > w*.9) {
      obj.removeClass().addClass('right')
      if (localStorage) localStorage.position = 'right';
    }
  }).on('drop', (event) => {
    event.preventDefault()
  })
}
$(init)