class Pettanr.Views.Balloon.Element extends Backbone.View
  tagName: 'img'
  className: 'pettanr-balloon'
  
  initialize: (options) ->
    @element = options.element
    @root = options.root
    @spot = options.spot
    @speech_balloon = options.parent
  
  clear: () ->
    this
  
  render: () ->
    this.$el.html('')
    retriever = @element.system_picture()
    @listenTo(retriever, 'retrieve', @retrieve_system_picture)
    retriever.retrieve()
  
  retrieve_system_picture: (@system_picture) ->
    @set_style()
  
  set_style: () ->
    attr = {
      src: @system_picture.r_url(), 
      alt: @element.get('caption'),
      style: Pettanr.to_style(@style())
    }
    this.$el.attr(attr)
  
  style: () ->
    {
      'width': '100%',
      'height': '100%',
      'z-index': 1  # play case
    }
  
  add_element: (element) ->
    null
  
class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element
  
  initialize: (options) ->
    super(options)
    @listenTo(@element, 'input:system_picture_id', @input_r)
    @listenTo(@element, 'input:width', @resize)
    @listenTo(@element, 'input:height', @resize)
  
  retrieve_system_picture: (@system_picture) ->
    super(@system_picture)
    sb = @speech_balloon
    elm = @element
    this.$el.resizable {
      stop: (event, ui) ->
        resize_div = $(@)
        speech_balloon_div = sb.$el
        
        resize_div.css('top', '0px')
        resize_div.css('left', '0px')
        # resize_div.css('z-index', 1)
        width = ui.size.width
        height = ui.size.height
        top = speech_balloon_div.position().top
        if ui.originalPosition.top != ui.position.top
          top += ui.position.top
          speech_balloon_div.css('top', top.toString() + 'px')
          speech_balloon_div.css('height', height + 'px')
        left = speech_balloon_div.position().left
        if ui.originalPosition.left != ui.position.left
          left += ui.position.left
          speech_balloon_div.css('left', left.toString() + 'px')
          speech_balloon_div.css('width', width + 'px')
        speech_balloon_div.css('width', width.toString() + 'px')
        speech_balloon_div.css('height', height.toString() + 'px')
        elm.set({
          x: Math.floor(left), 
          y: Math.floor(top), 
          width: width, 
          height: height
        }, {silent: true})
        elm.trigger('resize')
      handles: 'all',
      autoHide: true
    }
    this
  
  style: () ->
    {
      top: '0px',
      left: '0px',
      width: Pettanr.to_s(@element.get('width')) + 'px', 
      height: Pettanr.to_s(@element.get('height')) + 'px',
      'z-index': 1  # play case
    }
  
  input_r: () ->
    @render()
    resize_div = this.$el.parent()
    resize_div.css('z-index', 1)
  
  resize: () ->
    resize_div = this.$el.parent()
    resize_div.css('width', '100%')
    resize_div.css('height', '100%')
    this.$el.css('width',  '100%')
    this.$el.css('height', '100%')