Controller = window.require 'spine/controller'

class PositionPanel extends Controller
	document: $ document
	isTouch: 'ontouchstart' in window

	elements:
		'.positionPanelWrapper': 'positionPanel'
		'.dragPanel'   : 'dragPanel'
		'span.markDown': 'marker'
		'.reference-input': 'referenceInput'

	maxX: 100
	maxY: 100

	initW: 275
	initH: 138

	markerTop: 0
	markerLeft: 0
	reference: x: 'center', y: 'center'

	constructor: ->
		super
		@refresh()

	updatePanelSize: (maxX, maxY) =>
		stageW = parseFloat @initW / (maxY/@initH)
		stageH = parseFloat @initH / (maxX/@initW)

		width = @initW*stageW/stageH
		height = @initH
		if width > @initW
			height = @initH*stageH/stageW
			width = @initW

		@positionPanel.css {width, height}

	prevent: (e) ->
		e.stopPropagation() if e.stopPropagation()?
		e.preventDefault() if e.preventDefault()?

	update : (item, type, options={}) =>
		return if !item or options.from is @
		@[i] = v for i,v of item
		do @updateMarker
		@referenceInput.text "#{@reference.y} - #{@reference.x}"

	change: =>
		@el.trigger 'change', attributes: {@x, @y, @reference}, from: @

	updateMarker: =>
		@marker.css(left: @x+'%', top: @y+'%').attr 'reference', "#{@reference.x} #{@reference.y}"

	refresh: ->
		@refreshElements()
		@getProperties()

	setDocument: (@document) -> @

	getProperties: =>
		@maxHeight = @dragPanel.height()
		@maxWidth = @dragPanel.width()
		@markerWidth = @marker.outerWidth()/2
		@markerHeight = @marker.outerHeight()/2
		@offset = @dragPanel.offset()

module.exports = PositionPanel
