Cages.coffee

# the collection
  Cages.Cages = Backbone.Collection.extend(
    model: Cages.Cage
    url: app.dataServer + 'cages.json?date=2013-04-07&fetch_relationships=true'

  )


# shows a list of cages
  Cages.Views.CagesList = Backbone.View.extend(
    className: 'cages'
    events:
      'click .cageContents' : 'selectCage'


    initialize: ->
      app.on('filterOne', @filterOne, @)
      app.on('filterMany', @filterMany, @)
      console.log(@collection.toJSON())
      @collection.on('reset', @render, @)  ## this is only called once
      @whichView = 'many'
      app.attachButtons()

    selectCage: (event) ->
      if (@selected == true)
        @selected = false
        @render()
      else
        # find out which model was clicked
        id = $(event.target).closest( '.cageContents' ).data().cageid
        cage = @collection.get(id)
        console.log(id, cage)
        @selectedCage = cage
        @selected = true
        @render()

    beforeRender: ->
      console.log('rendering')
      view = @
      if (view.selected) 
        view.insertView(new Cages.Views.CageSelected( model: @selectedCage), view)
      else
        @collection.each((cage) ->
          console.log(cage)
          if view.whichView == 'many'
            view.insertView(new Cages.Views.CageMany( model: cage), view)
          if view.whichView == 'one'
            view.insertView(new Cages.Views.CageOne( model: cage), view)
        )

    afterRender: ->
      # myScroll = new iScroll('cagesList', {
      #       snap: 'div'
      #       momentum: true
      #       hScrollbar: true
      #       vScrollbar: false 
      #       scrollbarClass: 'myScrollbar'
      #     }
      #   )
      if (@whichView == 'many') 
        $('.many').addClass('down')
        $('.one').removeClass('down')
      if (@whichView == 'one')
        $('.one').addClass('down')
        $('.many').removeClass('down')
      app.attachButtons()

    filterOne: ->
      @whichView = 'one'
      # @collection.setItemsPerPage(2)
      $('.one').addClass('down')
      $('.many').removeClass('down')
      @render()
      

    filterMany: ->
      @whichView = 'many';
      # @collection.setItemsPerPage(2)
      $('.many').addClass('down')
      $('.one').removeClass('down')
      @render()
    
    cleanup: ->
      @undelegateEvents()
      app.detachButtons()

  )

Router.coffee

# on the router:

 Router = Backbone.Router.extend(
    initialize: ->
      app.cages = new Cages.Cages()
      @login()

    routes:
      "": "index"
      "cages" : "cages"

    fetchData: ->
      app.cages.fetch()
      app.users.fetch()

    login: ->
      request = $.ajax
        type:   "GET"
        dataType: 'json'
        data:
          email:    some.email
          pin:    some.pin         
        async:    true
        url:    app.dataServer + "signin.json"
        xhrFields:
          withCredentials: true

      self = @
      request.done (user) ->
        app.user = user;
        console.info(user, 'logged in, now caching data')
        self.fetchData()

      request.fail (jqXHR, textStatus) ->
        console.log(jqXHR, textStatus)
    
    cages : ->  
      app.layout = new Cages.Views.Layout()
      app.layout.setViews(
        ".header"     : new Tools.Views.Header(title: "")
        ".cagesList"  : new Cages.Views.CagesList(collection: app.cages)
        # ".pagination" : new Tools.Views.PaginationIndicator(collection: app.cages)
      ).render()