         @updateInputs()
 
     updateInputs:()->
-        console.log(_this.id)
-        document.getElementById(_this.id+'map_lat').value  = this.data.map.lat
-        document.getElementById(_this.id+'map_lng').value  = this.data.map.lng
-        document.getElementById(_this.id+'map_zoom').value = this.data.map.zoom
+        @inptMapLat.value  = this.data.map.lat
+        @inptMapLng.value  = this.data.map.lng
+        @inptMapZoom.value = this.data.map.zoom
 
-        document.getElementById(_this.id+'street_heading').value = this.data.streetview.heading
-        document.getElementById(_this.id+'street_pitch').value   = this.data.streetview.pitch
-        document.getElementById(_this.id+'street_zoom').value    = this.data.streetview.zoom
+        @inptSvHeading.value = this.data.streetview.heading
+        @inptSvPitch.value   = this.data.streetview.pitch
+        @inptSvZoom.value    = this.data.streetview.zoom
 
 handleEvent = (object, name, handler)->
   google.maps.event.addDomListener object, name, ()->

_this=null

class MapInput
    constructor: (@id, @data)->
        window.mapInputs[id] = this
        _this = this

        @el   = document.getElementById(@id)
        @info = document.createElement('div')
        @save = document.createElement('input')

        @position   = new google.maps.LatLng(data.map.lat, data.map.lng)
        @map        = null
        @marker     = null
        @streetview = null

        handleEvent window, 'load', ()->
        _this.init()

    init: ()->
        @initMap()
        @initMarker()
        @initStreetView()

    initMap: ()->
        @map = new google.maps.Map @el,
              center: @position,
              zoom: 18,
              streetViewControl: true
        handleEvent @map, 'zoom_changed', ()->
            _this.updateMapZoom @getZoom()

    initMarker: ()->
        @marker = new google.maps.Marker

            animation: google.maps.Animation.DROP,
            draggable: true
        handleEvent @marker, 'dragend', ()->
            _thisMap.updateMapPosition this.getPosition()

    initStreetView: ()->
        @streetview = @map.getStreetView()
        @streetview.setPosition @position
        @streetview.setPov
            heading: parseFloat(_thisMap.data.streetview.heading),
            pitch:   parseFloat(_thisMap.data.streetview.pitch),
            zoom:    parseFloat(_thisMap.data.streetview.zoom)
        handleEvent @streetview, 'pov_changed', ()->
            _thisMap.updatePov @getPov()

    initInputs: ()->
        @inptMapLat.onchange = (e)->
            _thisMap.data.map.lat = this.value
            _thisMap.updateMap()
        @inptMapLng.onchange = (e)->
            _thisMap.data.map.lng = this.value
            _thisMap.updateMap()
        @inptMapZoom.onchange = (e)->
            _thisMap.data.map.zoom = this.value
            _thisMap.updateMap()

        @inptSvHeading.onchange = (e)->
            _thisMap.data.streetview.heading = this.value
            _thisMap.updateStreetView()
        @inptSvPitch.onchange = (e)->
            _thisMap.data.streetview.pitch = this.value
            _thisMap.updateStreetView()
        @inptSvZoom.onchange = (e)->
            _thisMap.data.streetview.zoom = this.value
            _thisMap.updateStreetView()

    updateMap: ()->
        pos =
            lat: parseFloat(@data.map.lat),
            lng: parseFloat(@data.map.lng)
        
        @map.setCenter pos
        @map.setZoom parseInt(@data.map.zoom)
        @marker.setPosition pos

    updateStreetView: ()->
        @streetview.setPov
            heading: parseFloat(@data.streetview.heading),
            pitch:   parseFloat(@data.streetview.pitch),
            zoom:    parseFloat(@data.streetview.zoom)

    updateMapPosition: (pos)->
        @data.map.lat = pos.lat()
