class Pettanr.PanelPicture extends Peta.Element
  url: '/panel_pictures/'
  
  @singular: () ->
    'PanelPicture'
  
  @plural: () ->
    'PanelPictures'
  
  defaults: {
    id: null
  } 
  
  @pick_item_name: () ->
    'resource_picture'
  
  @traceable_item_names: () ->
    ['ground_picture', 'picture']
  
  trace_from_ground_picture: () ->
  
  trace_from_picture: () ->
  
  pick: (picked_item) ->
    {
      picture_id: picked_item.get('picture_id'),
      width: picked_item.get('width'),
      height: picked_item.get('height')
    }
  
  picture: () ->
    new Pettanr.Cache.Retriever(Pettanr.Picture, @get('picture_id'))
  
  panel: () ->
    new Pettanr.Cache.Retriever(Pettanr.Panel, @get('panel_id'))
  
  @has_picture: () ->
    true
  
  flip: () ->
    v = if @get('height') > 0
      ''
    else
      'v'
    h = if @get('width') > 0
      ''
    else
      'h'
    res = v + h
    res = res # format of /1.png?subdir=v
    # res += '/' unless res.empty? # format of /v/1.png
    res
  
  filename: (picture) ->
    q = if _.isEmpty(@flip())
      ''
    else
      '?subdir=' + @flip()
    picture.filename() + q
  
  r_url: (picture) ->
    '/pictures/' + @filename(picture)
  
  tmb_opt_img_tag: (picture) ->
    new Pettanr.Image.SymbolPicture({
      attr: {
        src: picture.r_url(), 
        alt: @escape('caption')
      },
      picture: picture
    })
  
  symbol_option: () ->
    retriever = @picture()
    @listenTo(retriever, 'retrieve', @retrieve_symbol)
    retriever.retrieve()
  
  retrieve_symbol: (item) -> 
    @trigger('ready:symbol', item.tmb_opt_img_tag())
  
  element_face: () ->
    new Pettanr.Views.PanelPicture.ElementFace({element: this})
  
  initialize: (attr, options) ->
    super(attr, options)
    if @id
      @url = @url + @id
    @bind('change:width', () ->
      console.log('cng')
    )