class SvgElementClass
  setup: (context=$(document))->
    #@setupSnapCode(context)
    @svg_source = context.find('#svg_element_svg')
    @preview_target = context.find('#svg-preview').css('border', '1px solid black')
    @original_svg = @svg_source.val()
    container = @
    @input_type_select = context.find('#svg_element_input_type').change ->
      switch $(@).val()
        when 'snap_code'
          container.setupSnapCode(context)
        else
          container.setupSvgEdit(context)
    .change()
  setupSvgEdit: (context)->
    @svg_source.val @original_svg #reset svg value
    $('#snap-code-ace-div').remove()
    container = @
    ace_div = $('<div></div>').attr('id', 'raw-svg-ace-div')
    ace_div.css
      width: '100%'
      height: '500px'
    @svg_source.after(ace_div)
    @editor = ace.edit('raw-svg-ace-div')
    @editor.setTheme 'ace/theme/monokai'
    @editor.getSession().setMode 'ace/mode/xml'
    @editor.setValue formatXml(@svg_source.val())
    @editor.getSession().on 'change', (e)=>
      result = @editor.getValue()
      @preview_target.html result
      @svg_source.val squashXml(result)
    #  @svg_source.val(@editor.getValue()).change()
    #@svg_source.hide()
    window.editor = @editor

  setupSnapCode: (context)->
    @snap_code_source = context.find('.snap-code-editor')
    @snap_code_source.change => @compileSource()
    #preview_target = @snap_code_source.data('previewTarget')
    #@preview_target = preview_target
    container = @
    ace_div = $('<div></div>').attr('id', 'snap-code-ace-div').html @snap_code_source.val()
    ace_div.css
      width: '100%'
      height: '500px'
    @snap_code_source.after(ace_div)

    #ACE
    @editor = ace.edit('snap-code-ace-div')
    @editor.setTheme 'ace/theme/monokai'
    @editor.getSession().setMode 'ace/mode/coffee'
    @editor.getSession().on 'change', (e)=>
      @snap_code_source.val(@editor.getValue()).change()
    @snap_code_source.hide()

    @svg_code_field = $('#svg_element_svg')
    @preview_target.on "DOMSubtreeModified", => # In image editing in debug mode????
      @svg_code_field.val @preview_target.html()

    @box_width = $('#svg_element_box_width')
    @box_height = $('#svg_element_box_height')
    @dpm = $('#svg_element_dpm')

    @box_width.change ->
      container.preview_target.attr 'width', $(@).val()
      container.compileSource()
    .change()

    @box_height.change ->
      container.preview_target.attr 'height', $(@).val()
      container.compileSource()
    .change()

    @dpm.change(->
      return unless dpm = $(@).val()
      if pheight = container.box_height.val()
        height = Math.round(100 * pheight / dpm)/100
        $('.box_height .attribute-info').html "#{height}&nbsp;<i>m</i>"

      if pwidth = container.box_width.val()
        width = Math.round(100 * pwidth / dpm)/100
        $('.box_width .attribute-info').html "#{width}&nbsp;<i>m</i>"

    ).change()
    @compileSource()
  compileSource: ->
    return unless source = @snap_code_source.val()
    #results = $(@snap_code_source.data('preview'))
    results = @preview_target
    window.compiledJS = ''
    try
      window.compiledJS = CoffeeScript.compile source, bare: on
      el = results[0]
      if el.innerText
        el.innerText = window.compiledJS
      else
        results.text(window.compiledJS)
      results.removeClass 'error'
      window.evaluator = new SnapDsl(window.compiledJS, target: @preview_target, width: @box_width.val(), height: @box_height.val())
      evaluator.result()
      $('.minibutton.run').removeClass 'error'
    catch {location, message}
      if location
        message = "Error on line #{location.first_line + 1}: #{message}"
      results.text(message).addClass 'error'
      $('.minibutton.run').addClass 'error'
class SnapDsl
  constructor: (code, options = {})->
    @js_code = code
    @options = options
    @t = options.target
    @width = options.width
    @height = options.height
    $(options.target).html('')
  result: ->
    @snap = Snap(@t[0])
    s = @snap
    try
      eval @js_code
    catch
      @t.html('cannot render')

@SvgElement = new SvgElementClass()
$ -> SvgElement.setup()