class Pettanr.Views.SpeechBalloon.Element extends Pettanr.View
  tagName: 'div'
  className: 'pettanr-comic-balloon'
  
  initialize: (options) ->
    @element = options.element
    @root = options.root
    @spot = options.spot
    @balloon = @element.get('balloon')
    klass = @balloon_class()
    @balloon_view = new klass({
      parent: this, 
      element: @balloon, 
      root: @root,
      spot: @spot
    })
    @speech = @element.get('speech')
    klass = @speech_class()
    @speech_view = new klass({
      parent: this, 
      element: @speech, 
      root: @root,
      spot: @spot
    })
  
  render: () ->
    this.$el.html('')
    @balloon.get_parent('system_picture', this, {
      success: (system_picture) =>
        @balloon_view.system_picture = system_picture
        this.$el.append(@balloon_view.render().el)
        @balloon_view.init_picture()
    })
    this.$el.append(@speech_view.render().el)
    @set_style()
    this
  
  set_style: () ->
    attr = {style: Pettanr.to_style(@style())}
    this.$el.attr(attr)
  
  style: () ->
    {
      width: Pettanr.to_s(@balloon.get('width')) + 'px', 
      height: Pettanr.to_s(@balloon.get('height')) + 'px',
      top: Pettanr.to_s(@balloon.get('y')) + 'px',
      left: Pettanr.to_s(@balloon.get('x')) + 'px',
      'z-index': @element.get('z')
    }
  
  balloon_class: () ->
    Pettanr.Views.Balloon.Element
  
  speech_class: () ->
    Pettanr.Views.Speech.Element
  
class Pettanr.Views.SpeechBalloon.Element.Edit extends Pettanr.Views.SpeechBalloon.Element
  
  initialize: (options) ->
    super(options)
    @listenTo(@element, 'sort', @set_style)
    @listenTo(@element, 'active', @active)
    @listenTo(@element, 'inactive', @inactive)
    @listenTo(@balloon, 'input:r', @input_r)
    @listenTo(@balloon, 'input:x', @set_style)
    @listenTo(@balloon, 'input:y', @set_style)
    @listenTo(@balloon, 'input:width', @set_style)
    @listenTo(@balloon, 'input:height', @set_style)
  
  render: () ->
    super()
    bln = @balloon
    this.$el.draggable {
      stop: (event, ui) ->
        left = Math.floor($(@).position().left)
        top = Math.floor($(@).position().top)
        bln.set({x: left, y: top}, {silent: true})
        bln.trigger('move')
    }
    this
  
  set_style: () ->
    super()
  
  input_r: () ->
    @trigger('input:r')
  
  active: () ->
    $('.ui-resizable-handle', this.el).map ->
      $(@).css('display', 'block')
  
  inactive: () ->
    $('.ui-resizable-handle', this.el).map ->
      $(@).css('display', 'none')
  
  element_class: (element) ->
    Pettanr.Views[element.singular()].Element.Edit
  
  balloon_class: () ->
    Pettanr.Views.Balloon.Element.Edit
  
  speech_class: () ->
    Pettanr.Views.Speech.Element.Edit