class Pettanr.Views.Speech.Element extends Pettanr.View
  tagName: 'div'
  className: 'pettanr-comic-speech'
  
  initialize: (options) ->
    @element = options.element
    @root = options.root
    @spot = options.spot
    @parent = options.parent
    c = @inner_class()
    @inner = new c({
      element: @element,
      parent: this
    })
  
  render: () ->
    @set_style()
    this.$el.html(@inner.render().el)
    this
  
  add_element: (element) ->
    null
  
  set_style: () ->
    attr = {style: Pettanr.to_style(@style())}
    this.$el.attr(attr)
  
  style: () ->
    {
      top: Pettanr.to_s(@element.get('y')) + '%', 
      left: Pettanr.to_s(@element.get('x')) + '%', 
      width: Pettanr.to_s(@element.get('width') + '%'), 
      height: Pettanr.to_s(@element.get('height')) + '%',
      'z-index': 2
    }
  
  inner_class: () ->
    Pettanr.Views.Speech.Element.Inner
  
class Pettanr.Views.Speech.Element.Inner extends Pettanr.View
  tagName: 'div'
  className: 'pettanr-comic-speech-inner'
  
  initialize: (options) ->
    @element = options.element
    @speech_view = options.parent
    @speech_balloon_view = @speech_view.parent
  
  render: () ->
    @set_style()
    this.$el.html(@element.scenario())
    this
  
  set_style: () ->
    attr = {style: Pettanr.to_style(@style())}
    this.$el.attr(attr)
  
  style: () ->
    {
      'font-size': Pettanr.to_s(@element.get('font_size')) + 'em',
      'text-align': @element.text_align_text(), 
      color: '#' + ('000000' + @element.get('fore_color').toString(16)).slice(-6)
    }
  
class Pettanr.Views.Speech.Element.Edit extends Pettanr.Views.Speech.Element
  
  initialize: (options) ->
    super(options)
  
  render: () ->
    super()
    sb_view = @parent
    @inner.$el.mouseover -> 
      sb_view.element.trigger('active')
    @inner.$el.mouseout -> 
      sb_view.element.trigger('inactive')
    this
  
  inner_class: () ->
    Pettanr.Views.Speech.Element.Inner.Edit
  
class Pettanr.Views.Speech.Element.Inner.Edit extends Pettanr.Views.Speech.Element.Inner
  
  initialize: (options) ->
    super(options)
    @listenTo(@speech_balloon_view, 'input:r', @input_r)
    @listenTo(@element, 'input:content', @render)
    @listenTo(@element, 'input:font_size', @set_style)
    @listenTo(@element, 'input:text_align', @set_style)
    @listenTo(@element, 'input:fore_color', @set_style)
  
  input_r: () ->
    @set_style()