Contact =  Backbone.Model.extend(
  defaults:
    first_name: ''
    last_name: ''
    email: ''
    dob: ''
    notes: ''
)

PhoneNumber = Backbone.Model.extend(
  defaults:
   contact_id: 0
   type: ''
   number: ''
)

Contacts = Backbone.Collection.extend(

  model: Contact

  localStorage: new Backbone.LocalStorage("com.thomporter.contactsDemo.contacts")

  initialize: ->

    @comparator = @comparatorDefault

    @sort()

  comparatorDefault: (model) ->
    return model.get('last_name') + ' ' + model.get('first_name');

  comparatorFirstThenLast: (model) ->
    return model.get('first_name') + ' ' + model.get('last_name');

)

PhoneNumbers = Backbone.Collection.extend(

  model: PhoneNumber

  localStorage: new Backbone.LocalStorage("com.thomporter.contactsDemo.phone_numbers"),
)

PhoneInListView = Backbone.View.extend(

  tagName: 'li'

  className: 'phoneInListView'

  initialize: (options) ->

    @model = options.model

    @app = options.app

  events:
    'click': 'clickMe'

  clickMe: (e) ->

    e.preventDefault()

    @app.phoneNumberClick(@model)

  render: ->

    $(@el).html('<span>' + @model.get('type') + ':</span> ' + @model.get('phone_number'))
    @
)

PhoneListView = Backbone.View.extend(

  tagName: 'ul'

  className: 'phoneList'

  initialize: (options) ->

    @app = options.app

    @collection = options.collection

  render: ->

    @collection.each( (p) =>

      if p.get('contact_id') == @app.editingContact

        v = new PhoneInListView({model:p, app:@app})
        $(v.render().el).appendTo(@el)

    )
    @
)

ContactInListView = Backbone.View.extend(

  tagName: 'div'

  className: 'contactInListView'

  initialize: (options) ->

    @model = options.model

    @app = options.app

  events:
    'click' : 'clickMe'

  render: ->

    $(@el).html(@model.get('last_name') + ', ' + @model.get('first_name'))

    @

  clickMe: (e) ->

    $('.contact-on').removeClass('contact-on')

    $(@el).addClass('contact-on')

    @app.showContactForm(@model)


)

ContactsView = Backbone.View.extend(

  initialize: (options) ->

    @el = $('#contactList')

    @collection = options.collection

    @app = options.app

  render: ->

    @el.find('.contactInListView').remove()

    @collection.each( (contact) =>

      v = new ContactInListView({model:contact, app: @app})

      $(v.render().el).appendTo(@el)
    )

    @
)

ContactView = Backbone.View.extend(

  initialize: (options) ->

    @model = options.model

    @app = options.app

  events:
    'click .btnSaveContact': 'btnSaveClick'
    'click .btnCancelContact': 'btnCancelClick'
    'click .addPhone': 'addPhoneClick'
    'click .savePhone': 'savePhoneClick'

  render: ->

    $(@el).html(_.template($('#tmplContactView').html(), @model.attributes))

    @

  btnSaveClick: (e) ->

    e.preventDefault()

    @app.saveContactClick(@model)

  btnCancelClick: (e) ->

    e.preventDefault()

    @app.cancelContactClick(@model)

  addPhoneClick: (e) ->

    e.preventDefault()

    @app.addPhoneClick()

  savePhoneClick: (e) ->

    e.preventDefault()

    @app.savePhoneClick()

)

ContactApp = Backbone.View.extend(

  editingContact: 0

  editingPhone: 0

  initialize: ->

    @contacts = new Contacts(null, @)

    @contacts.bind("reset", @renderContacts, @)
    @contacts.bind("change", @renderContacts, @)

    @contacts.bind("add", @renderContacts, @)

    @phoneNumbers = new PhoneNumbers(null, @)

    @phoneNumbers.bind("reset", @renderPhoneNumbers, @)
    @phoneNumbers.bind("change", @renderPhoneNumbers, @)

    @phoneNumbers.bind("add", @renderPhoneNumbers, @)

    @

  events:
    'click a.loadDB': 'initDB'
    'click a.clearDB': 'clearDB'
    'click a.addContact': 'addContactClick'

  renderContacts: ->

    @contactsListView = new ContactsView({collection: @contacts, app: @})

    @contactsListView.render()

  showContactForm: (model) ->

    @editingContact = model.get('id')

    @contactView = new ContactView({model:model, app: @})

    $('#contactView').html(@contactView.render().el)

    @renderPhoneNumbers()

  saveContactClick: (model) ->

    $.each($('#contactForm').serializeArray(), ->

      model.set(this.name,this.value)

    )

    if (@editingContact)
      @contacts.get(model.get('id')).save()

    else
      @contacts.create(model)
      @showContactForm(model)

  renderPhoneNumbers: ->

    @phoneListView = new PhoneListView({collection: @phoneNumbers, app: @})

    $('#phoneList').html(@phoneListView.render().el)

    @

  cancelContactClick: (model) ->

    @showContactForm(model)

    @

  addPhoneClick: ->

    $('#phoneForm').show().find('input').val('')

    @editingPhone = 0

    @

  savePhoneClick: ->

    l = $('#phone_label').val()
    p = $('#phone_number').val()

    return if (l == '' || p == '')

    data =
      contact_id: @editingContact
      type: l
      phone_number: p

    if (@editingPhone)
      @phoneNumbers.get(@editingPhone).set(data).save()

    else
      @phoneNumbers.create(data)

    $('#phoneForm').hide()

    @

  phoneNumberClick: (model) ->

    @editingPhone = model.get('id')

    $('#phone_label').val(model.get('type'))
    $('#phone_number').val(model.get('phone_number'))
    $('#phoneForm').show()

  addContactClick: (e) ->

    @showContactForm(new Contact)

  clearDB: ->

    while (@contacts.models.length)
      @contacts.each((contact)->
        contact.destroy()
      )
    $('.contactInListView').remove()

    @

  initDB: ->

    data = [
      {first_name: 'Babe',  last_name: 'Ruth',  email: '714@xyz.com'},
      {first_name: 'Maralyn',   last_name: 'Monroe',    email: 'normajean@xyz.com'},
      {first_name: 'Albert',    last_name: 'Einstien',   email: 'emc2@xyz.com'},
      {first_name: 'Amadeaus',  last_name: 'Motzart',   email: 'trebble@xyz.com'},
      {first_name: 'Harry',     last_name: 'Potter',    email: 'underthestairs@xyz.com'},
      {first_name: 'Henry D.',  last_name: 'Theraeu',   email: 'inthewoods@xyz.com'},
      {first_name: 'George',    last_name: 'Jones',     email: 'whitelightning@xyz.com'},
      {first_name: 'Benjamin',  last_name: 'Franklin',  email: 'electric@xyz.com'},
      {first_name: 'Dinocrates',  last_name: 'Rhodes',  email: 'alexandria@xyz.com'},
      {first_name: 'Elvis',  last_name: 'Presley',  email: 'leftthebuilding@xyz.com'},
      {first_name: 'Robert',  last_name: 'Oppenheimer',  email: 'whathaveidone@xyz.com'},
      {first_name: 'Nikola',  last_name: 'Tesla',  email: 'thecoil@xyz.com'},
      {first_name: 'Abraham',  last_name: 'Lincoln',  email: 'emancipate@xyz.com'},
      {first_name: 'Mark',  last_name: 'Antony',  email: 'cleopatra@xyz.com'},


    ]

    $.each(data, (index,contact) =>

      c = @contacts.create(contact)

      @phoneNumbers.create(
        contact_id: c.id
        type: 'Home'
        phone_number: '888-888-8888'
      )
    )

    @

)

$ ->

  _.templateSettings =
    evaluate:    /\{\{#([\s\S]+?)\}\}/g,            # {{# console.log("blah") }}
    interpolate: /\{\{[^#\{]([\s\S]+?)[^\}]\}\}/g,  # {{ title }}
    escape:      /\{\{\{([\s\S]+?)\}\}\}/g,         # {{{ title }}}

  $.c = new ContactApp({el:$('#contactsUI')});

  $.c.contacts.fetch()
  $.c.phoneNumbers.fetch()