# panel: panel item
# spot: no opacity element
class Pettanr.Views.Panel.Body extends Backbone.View
  tagName: 'div'
  
  initialize: (options) ->
    @panel = options.panel
    @spot = options.spot
    @class_name = 'pettanr-comic-panel'
    @views = []
    if @is_visible()
      _.each @panel.zorderd_elements(), (element) =>
        @add_element(element)
  
  render: () ->
    this.$el.addClass(@class_name)
    @restyle()
    #this.$el.html('')
    if not @is_visible()
      tag = new Tag.Div({
        content: I18n.t('panels.hidden'), 
        class_name: 'hidden'
      })
      this.$el.html(tag.render().el)
    this
  
  restyle: () ->
    attr = {style: Pettanr.to_style(@style())}
    this.$el.attr(attr)
  
  is_visible: () ->
    @panel.is_visible()
  
  render_element: (index) ->
  
  add_element: (element) ->
    index = element.get('z') - 1
    c = @element_class(element)
    view = new c({element: element, root: @panel, spot: @spot})
    @views.splice(index, 0, view)
    if @is_visible()
      this.$el.append(view.clear().el)
      view.render()
    view
  
  remove_element: (element) ->
    _.each @views, (view) =>
      if view.element.cid == element.cid
        view.remove()
  
  element_class: (element) ->
    Pettanr.Views[element.singular()].Element
  
  disp: (value) ->
    Pettanr.to_s(value) + 'px'
  
  style: () ->
    {
      'width': @disp(@panel.get('width')), 
      'height': @disp(@panel.get('height')), 
      'border-style': 'solid', 
      'border-width': @disp(@panel.get('border')), 
      'border-color': 'black', 
      'background-color': 'white'
    }
  
class Pettanr.Views.Panel.Body.Edit extends Pettanr.Views.Panel.Body
  
  initialize: (options) ->
    super(options)
    @listenTo(@panel, 'input:width', @restyle)
    @listenTo(@panel, 'input:height', @restyle)
    @listenTo(@panel, 'input:border', @restyle)
    @listenTo(@panel, 'active', @active)
    @listenTo(@panel, 'inactive', @inactive)
    @listenTo(this, 'active', @active)
    @listenTo(this, 'inactive', @inactive)
  
  render: () ->
    super()
    this.$el.resizable {
      stop: (event, ui) =>
        w = parseInt(this.$el.width())
        h = parseInt(this.$el.height())
        @panel.set({width: w, height: h}, {silent: true})
        @panel.trigger('resize')
      , autoHide: false
    }
    @inactive()
    _this = this
    this.$el.mouseover -> 
      _this.trigger('active')
    this.$el.mouseout -> 
      _this.trigger('inactive')
    this
  
  is_visible: () ->
    true  # show everytime as editor
  
  active: () ->
    n = @class_name
    $('.ui-resizable-handle', this.el).map ->
      if $(@).parent().hasClass(n)
        $(@).css('display', 'block')
  
  inactive: () ->
    n = @class_name
    $('.ui-resizable-handle', this.el).map ->
      if $(@).parent().hasClass(n)
        $(@).css('display', 'none')
  
  element_class: (element) ->
    Pettanr.Views[element.singular()].Element.Edit
  
class Pettanr.Views.Panel.Footer extends Backbone.View
  tagName: 'table'
  className: 'no-border'
  
  initialize: (options) ->
    @panel = options.panel
  
  render: () ->
    this.$el.html('')
    retriever = @panel.author()
    @listenTo(retriever, 'retrieve', @retrieve_author)
    retriever.retrieve()
    this
  
  retrieve_author: (@author) -> 
    @panel_icon = new Pettanr.Views.Panel.Icon({item: @panel, half: true})
    @author_icon = new Pettanr.Views.Author.Icon({item: @author, half: true})
    @inspire_icon = new Pettanr.Views.Show.LinkedInspireIcon({item: @panel, half: true})
    @edit_button = new Pettanr.Views.Show.LinkedEditButton({item: @panel})
    @listenTo(@panel_icon, 'click', @click_panel)
    @listenTo(@author_icon, 'click', @click_author)
    @listenTo(@edit_button, 'click', @click_edit)
    @listenTo(@inspire_icon, 'click', @click_inspire)
    this.$el.append(@panel_icon.render().el)
    this.$el.append(@author_icon.render().el)
    this.$el.append(
      Pettanr.AppHelper.distance_of_time_in_words_to_now(@panel.get('updated_at'))
    )
    if Pettanr.cache.operators.is_author()
      this.$el.append(@inspire_icon.render().el)
    if @panel.is_own()
      this.$el.append(@edit_button.render().el)
  
  click_panel: () ->
    @trigger('click:panel')
  
  click_author: () ->
    @trigger('click:author')
  
  click_edit: () ->
    @trigger('click:edit')
  
  click_inspire: () ->
    @trigger('click:inspire')