class Pettanr.Views.PanelPicture.Element extends Backbone.View
  tagName: 'div'
  className: 'pettanr-panel-picture-wrapper'
  
  initialize: (options) ->
    @element = options.element
    @root = options.root
    @spot = options.spot
    img_class = @img_class()
    @img = new img_class({
      wrapper: this,
      element: @element,
      spot: @spot
    })
    @element.fetch({cache: false})
  
  render: () ->
    @attr = {style: Pettanr.to_style(@style())}
    this.$el.attr(@attr)
    this.$el.html(@img.clear().el)
    this
  
  style: () ->
    {
      'top': Pettanr.to_s(@element.get('y')) + 'px',
      'left': Pettanr.to_s(@element.get('x')) + 'px',
      'z-index': @element.get('z'),
      'position': 'absolute'
    }
  
  element_class: (element) ->
    Pettanr.Views[element.singular()].Element
  
  img_class: () ->
    Pettanr.Views.PanelPicture.Element.Img
  
class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View
  tagName: 'img'
  
  initialize: (options) ->
    @wrapper = options.wrapper
    @element = options.element
    @spot = options.spot
    @picture = @element.picture()
    @listenTo(this, 'ready', @render)
    @picture.fetch({cache: true}).done =>
      @trigger('ready')
  
  clear: () ->
    this
  
  render: () ->
    this.$el.attr(@attr(@spot))
    this
  
  attr: (spot = null, opacity = 20) ->
    style = {}
    if spot and spot.constructor == @element.constructor and spot.get('id') != @element.get('id')
      @element.merge_opacity(style, opacity)
    {
      vPicture: @element.get('id'), 
      src: @element.r_url(@picture), 
      width: Pettanr.to_s(Math.abs(@element.get('width'))) + 'px', 
      height: Pettanr.to_s(Math.abs(@element.get('height'))) + 'px', 
      alt: @element.get('caption'), 
      style: Pettanr.to_style(style)
    }
  
class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture.Element
  
  initialize: (options) ->
    super(options)
    @listenTo(@root, 'input:width', @restyle)
    @listenTo(@root, 'input:height', @restyle)
  
  render: () ->
    super()
    img = @img
    wrapper = this
    elm = @element
    this.$el.draggable {
      stop: (event, ui) ->
        left = img.$el.parent().position().left + wrapper.$el.position().left
        top = img.$el.parent().position().top + wrapper.$el.position().top
        elm.set({x: parseInt(left), y: parseInt(top)}, {silent: true})
        elm.trigger('move')
    }
    this
  
  element_class: (element) ->
    Pettanr.Views[element.singular()].Element.Edit
  
  img_class: () ->
    Pettanr.Views.PanelPicture.Element.Img.Edit
  
class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPicture.Element.Img
  
  initialize: (options) ->
    super(options)
  
  render: () ->
    super()
    wrapper = @wrapper
    elm = @element
    this.$el.resizable {
      stop: (event, ui) ->
        resize_div = ui.element
        panel_picture_div = wrapper.$el
        
        resize_div.css('top', '0px')
        resize_div.css('left', '0px')
        top = panel_picture_div.position().top
        if ui.originalPosition.top != ui.position.top
          top += ui.position.top
          #@element.set({y: Math.floor(top)}, {silent: true})
          panel_picture_div.css('top', top.toString() + 'px')
        left = panel_picture_div.position().left
        if ui.originalPosition.left != ui.position.left
          left += ui.position.left
          #@element.set({y: leftp)}, {silent: true})
          panel_picture_div.css('left', left.toString() + 'px')
        width = if elm.get('width') < 0
          -ui.size.width
        else
          ui.size.width
        height = if elm.get('height') < 0
          -ui.size.height
        else
          ui.size.height
        elm.set({
          x: Math.floor(left), 
          y: Math.floor(top), 
          width: width, 
          height: height
        }, {silent: true})
        elm.trigger('move')
      handles: 'all',
      autoHide: true
    }