$(document).ready ->
  svg = undefined
  if listBean.length > 0
    nameOfImage = new String($('#departments option:selected').text()).replace(/\s/g, "")
    nameOfImage = nameOfImage + '.svg'
  else
    nameOfImage = 'error.png'
  height = 800
  width = $('#mapa').innerWidth()
  twidth = $('#mapa').innerWidth()
  map = d3.floorplan()
  imagelayer = d3.floorplan.imagelayer()
  mapdata = {}

  map.addLayer imagelayer


  skalirajx = undefined
  skalirajy = undefined
  window.onload = ->
    tmpimg = undefined
    tmpimg = new Image();

    tmpimg.src = '/floorplan/' + nameOfImage;
    tmpimg.onload = ->
      width = tmpimg.width;
      height = tmpimg.height * twidth / width;
      i=0
      while i<listBean.length
        console.log listBean[i]
        listBean[i].x=listBean[i].x * twidth / width
        listBean[i].y=listBean[i].y * twidth / width
        i++
      mapdata[imagelayer.id()] = [ {
        url: '/floorplan/' + nameOfImage
        x: 0
        y: 0
        height: height
        width: twidth
      }]
      xscale = d3.scale.linear().domain([0,twidth]).range([0,twidth])
      yscale = d3.scale.linear().domain([0,height]).range([0,height])
      map.xScale(xscale).yScale(yscale)
      svg = d3.select('#mapaOvde').append('svg').attr('id', 'svgMapa').attr("width", twidth).attr("height", height).datum(mapdata).call(map)
      crtajUredaje()
      drag = d3.behavior.drag().origin((d) -> d).on('dragstart', dragstarted).on('drag', dragged)
      d3.selectAll('.xpass').call(drag).data listBean
    return

  d3.selectAll('.map-controls .layer-controls').remove()

  # ==================== Prikaz podataka o uredjaju ====================

  window.showInformation = (data) ->
    i=0
    while i<listBean.length
      if Math.round(listBean[i].x * 10) / 10 == Math.round(data.x * 10) / 10 && Math.round(listBean[i].y * 10) / 10 == Math.round(data.y * 10) / 10
        #console.log listBean[i]
        break
      i++
    return

  # ==================== Postavljanje inicijalnih vrednosti ====================
  window.crtajUredaje = () ->
    if !listBean.length
      $("#saveDevices").hide()
    i = 0
    while i < listBean.length
      d3.select('.imagelayer').append('image').attr(                # ====== Dodavanje slike uredjaju
        'xlink:href': 'https://www.supremainc.com/sites/all/themes/suprema/images/products/XPass_D2/XPass_D2_Mullion_1.png'
        x: listBean[i].x
        y: listBean[i].y
        height: 30).attr('class', 'xpass').attr('data-tooltip',true).attr('aria-haspopup','true').attr('data-toggle', 'tooltip').attr("title", listBean[i].device_name)
      d3.selectAll('.xpass').classed('draggable', true)
      $('.xpass').tooltip()
      d3.select('.imagelayer').append('circle').attr("cx",(listBean[i].x + 15)).attr("cy", (listBean[i].y + 15)).attr("r", 5).attr("fill", "red")
      i++
    showInformation(listBean[0])

  # ==================== Popunjavanje dropdown-a sa update-ovanim vrednostima i slanje vrednosti kontroleru ====================

  window.saveDevices = () ->
    uredjaji = listBean
    $.ajax(
      type: "POST"
      url: "/advancedOptions/getDevices"
      contentType: "application/json; charset=utf-8"
      dataType: "text"
      data: JSON.stringify uredjaji
    )
    return

  # ==================== DRAGGING DEVICES ====================

  window.dragstarted = (d) ->
    d3.event.sourceEvent.stopPropagation()
    return

  window.dragged = (d) ->
    dx = d3.event.x
    dy = d3.event.y
    for obj in listBean
      if obj.device_id == d.device_id
        d3.select(this).attr('x', dx)
        d3.select(this).attr('y', dy)
        $(this).next().attr('cx', dx + 14)
        $(this).next().attr('cy', dy + 15) #kruzici za status
        obj.x =  dx# * width / width
        obj.y =  dy# * width / width
        console.log obj.x,obj.y
        break
    showInformation(d)
    return