class Pettanr.Views.GroundPicture.Element extends Pettanr.View
  tagName: 'div'
  className: 'pettanr-comic-ground-picture'
  
  initialize: (options) ->
    @element = options.element
    @root = options.root
    @spot = options.spot
  
  init_picture: () ->
  
  render: () ->
    @element.get_parent('picture', this, {
      success: (@picture) =>
        @init_picture()
        @restyle()
    })
    this
  
  restyle: () ->
    s = @style(@spot)
    _.extend(s, @style_wh())
    attr = {
      style: Pettanr.to_style(s)
    }
    this.$el.attr(attr)
  
  style: (spot = null, opacity = 20) ->
    r = {
      position: 'absolute', 
      top: '0px', 
      left: '0px',
      'z-index': @element.get('z'), 
      'background-image': 'url(' + @picture.picture_file().src() + ')', 
      'background-repeat': @element.repeat_text(), 
      'background-position': Pettanr.to_s(@element.get('x')) + '% ' + Pettanr.to_s(@element.get('y')) + '%'
    }
    r
  
  style_wh: () ->
    {
      width: Pettanr.to_s(@root.get('width')) + 'px', 
      height: Pettanr.to_s(@root.get('height')) + 'px'
    }
  
class Pettanr.Views.GroundPicture.Element.Edit extends Pettanr.Views.GroundPicture.Element
  
  initialize: (options) ->
    super(options)
  
  init_picture: () ->
    super()
    @listenTo(@root, 'resize', @restyle)
    @listenTo(@root, 'input:width', @restyle)
    @listenTo(@root, 'input:height', @restyle)
    @listenTo(@element, 'input:repeat', @restyle)
    @listenTo(@element, 'input:x', @restyle)
    @listenTo(@element, 'input:y', @restyle)
    @listenTo(@element, 'active', @active)
    @listenTo(@element, 'inactive', @inactive)
    @listenTo(@element, 'sort', @restyle)
  
  active: () ->
    @root.trigger('active')
  
  inactive: () ->
    @root.trigger('inactive')