class Tag

class Tag.Img extends Pettanr.View
  tagName: 'img'
  
  # attr: {src: '/hoge', width: 80, ...}
  # class_name: 'El-Class'
  initialize: (options) ->
    @attr = options.attr || {}
    @class_name = options.class_name
  
  render: () ->
    this.$el.attr(@attr)
    this.$el.addClass(@class_name) if @class_name
    this

class Tag.A_ extends Pettanr.View
  tagName: 'a'
  
  initialize: (options) ->
    @attr = options.attr || {}
    @content = options.content
    @class_name = options.class_name
  
  render: () ->
    this.$el.attr(@attr)
    @el.className = @class_name if @class_name
    this.$el.html(@content)
    this
  
class Tag.A extends Tag.A_
  
  initialize: (options) ->
    super(options)
  
  render: () ->
    super()
    @events = {click: 'click'}
    @delegateEvents(@events)
    this
  
  click: () ->
    @trigger('click')
    return false
  
class Tag.Div extends Pettanr.View
  tagName: 'div'
  
  initialize: (options) ->
    @attr = options.attr || {}
    @content = options.content
    @class_name = options.class_name
  
  render: () ->
    @el.className = @class_name if @class_name
    this.$el.attr(@attr)
    this.$el.html(@content)
    this
  
class Tag.Span extends Tag.Div
  tagName: 'span'
    
class Tag.Ul extends Pettanr.View
  tagName: 'ul'
  
  initialize: (options) ->
    @attr = options.attr || {}
    @contents = options.contents
    @class_name = options.class_name
  
  render: () ->
    @el.className = @class_name if @class_name
    this.$el.attr(@attr)
    this.$el.html('')
    _.each @contents, (content) =>
      this.$el.append(content.render().el)
    this
  
class Tag.RowBreak extends Tag.Div
  initialize: (options) ->
    @attr = {}
    @content = null
    @class_name = 'row_break'
  
class Tag.H3 extends Pettanr.View
  tagName: 'h3'
  
  initialize: (options) ->
    @attr = options.attr || {}
    @content = options.content
    @class_name = options.class_name
  
  render: () ->
    this.$el.attr(@attr)
    @el.className = @class_name if @class_name
    this.$el.html(@content)
    this
  
class Tag.H2 extends Tag.H3
  tagName: 'h2'
  
class Tag.Input extends Pettanr.View
  tagName: 'input'
  
  initialize: (options) ->
    @type = options.type || 'text'
    @class_name = options.class_name
    @attr = {}
  
  render: () ->
    this.$el.attr(@attr)
    @el.className = @class_name if @class_name
    this.$el.html('')
    this
  
class Tag.Checkbox extends Tag.Input
  events: {
    click: 'click'
  }
  
  initialize: (options) ->
    super(options)
    @type = 'checkbox'
    @value = options.value
    @checked = options.checked
    @attr = {
      type: @type,
      value: @value,
      checked: @checked,
    }
  
  refresh: () ->
    @attr['checked'] = @checked
    this.$el.attr(@attr)
  
  click: () ->
    @checked = this.$el.prop('checked')
    @refresh()
    @trigger('click')
    return true
  
class Tag.Submit extends Tag.Input
  events: {
    click: 'click'
  }
  
  initialize: (options) ->
    super(options)
    @type = 'submit'
    @value = options.value
    @attr = {
      type: @type,
      value: @value,
    }
  
  click: () ->
    @trigger('click')
    return false
  
class Tag.Option extends Pettanr.View
  tagName: 'option'
  
  initialize: (options) ->
    super(options)
    @selected = options.selected
    @value = options.value || ''
    @caption = options.caption
  
  render: () ->
    this.$el.attr({value: @value, selected: @sel_attr()})
    this.$el.html(@caption)
    this
  
  sel_attr: () ->
    if @selected
      'selected'
    else
      ''
  
@Tag = Tag