class Pettanr.Views.PanelPicture.Element extends Pettanr.View
  tagName: 'div'
  className: 'pettanr-panel-picture-wrapper'
  
  initialize: (options) ->
    @element = options.element
    @root = options.root
    @spot = options.spot
  
  render: () ->
    @element.get_parent('picture', this, {
      success: (@picture) =>
        img_class = @img_class()
        img = new img_class({
          wrapper: this,
          element: @element,
          picture: @picture,
          spot: @spot
        })
        @listenTo(img, 'http_get', @http_get)
        @restyle()
        this.$el.html(img.render().el)
        @init_picture(img)
    })
    this
  
  init_picture: (img) ->
    @img = img
  
  restyle: () ->
    attr = {style: Pettanr.to_style(@style())}
    this.$el.attr(attr)
  
  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: () ->
    if @element.get('link')
      if @element.get('link').match(/\:\/\//)
        Pettanr.Views.PanelPicture.Element.LinkedImg
      else
        Pettanr.Views.PanelPicture.Element.ButtonImg
    else
      Pettanr.Views.PanelPicture.Element.Img
  
  http_get: (url) ->
    @trigger('http_get', url)
  
class Pettanr.Views.PanelPicture.Element.LinkedImg extends Tag.A_
  
  initialize: (options) ->
    img = new Pettanr.Views.PanelPicture.Element.Img(options)
    super({content: img.render().el, attr: {href: options.element.get('link')}})
  
class Pettanr.Views.PanelPicture.Element.ButtonImg extends Tag.A
  
  initialize: (options) ->
    img = new Pettanr.Views.PanelPicture.Element.Img(options)
    @link = options.element.get('link')
    super({content: img.render().el, attr: {href: '/' + @link}})
  
  click: () ->
    super()
    @trigger('http_get', @link)
    return false
  
class Pettanr.Views.PanelPicture.Element.Img extends Pettanr.View
  tagName: 'img'
  
  initialize: (options) ->
    @wrapper = options.wrapper
    @element = options.element
    @picture = options.picture
    @spot = options.spot
  
  render: () ->
    this.$el.html('')
    @restyle()
    this
  
  restyle: () ->
    this.$el.attr(@attr(@spot))
  
  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: @picture.picture_file(@element.flip()).src(), 
      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)
  
  init_picture: (img) ->
    super(img)
    @listenTo(@element, 'input:x', @restyle)
    @listenTo(@element, 'input:y', @restyle)
    @listenTo(@element, 'sort', @restyle)
    @listenTo(@element, 'active', @active)
    @listenTo(@element, 'inactive', @inactive)
    wrapper = this
    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')
    }
    elm = @element
    img.$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('resize')
      handles: 'all',
      autoHide: true
    }
    this
  
  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
  
  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)
    @listenTo(@element, 'input:width', @restyle)
    @listenTo(@element, 'input:height', @restyle)
  
  render: () ->
    super()
  
  restyle: () ->
    super()
    resize_div = this.$el.parent()
    width = this.$el.css('width')
    height = this.$el.css('height')
    resize_div.width(width)
    resize_div.height(height)