/src/menu.app.js

define([
  '$',
  'underscore',
  'backbone',
  'xmessage',
  'lib/template'
], function($, util, Backbone, xmessage, template){

  // events I emit: 
  
  // session.change
  //  the stack id
  // 
  // events I observe
  //  session.new
  
  // FIXME: we need to require config! but its hardwired to main's requirements
  // so for now, we reference the global and some hardcoded values
  
  var SessionModel = Backbone.Model.extend({
    // need a service method to return details on an individual session(?)
  });
  
  var SessionCollection = Backbone.Collection.extend({
    url: function(){
      // http://localhost/{username}/{service}/{method}
      var urlTemplate = template(config.latticeUrl);
      return urlTemplate({
        latticeRoot:  config.latticeRoot,
        username: config.username || 'sam@sam-i-am.com',
        service: 'session',
        method: 'active'
      });
    },
    // extend fetch to look for the results array in the response.d property
    parse : function(resp) {
      return resp.d || resp.active_sessions;
    }
  });
  
  // A widget that contains the views for a collection of sites.
  var SessionsView = Backbone.View.extend({
    initialize: function (options) {
      options = options || {};
      this.collection = options.collection || new SessionCollection();
      this.bridge = options.bridge;

      this.collection
        .bind('add', this.render, this)
        .bind('reset', this.render, this)

        .bind('fetch', this.renderLoader, this)
        .bind('success', this.removeLoader, this);
      
      // View events
    },
    events: {
      'click .session-item': 'onitemclick'
    },
    onitemclick: function(evt) {
      var itemNode = evt.currentTarget; 
      console.log("session item clicked: ", itemNode.getAttribute("data-itemid"));
    },
    renderLoader: function () {
      // Create a new loader and assign it to a property so we can easily
      // remove it later. Creating a new loader every time means we don't
      // have to undo the animation leftovers from removeLoader.
      this.$loader = $('<div class="loading pin-center">Loading&hellip;</div>')
        .css({ opacity: 0 });
      
      $(this.el).append(this.$loader);
      this.$loader.animate({ opacity: 0.5, scale: 1 }, 500, 'ease-out');
      
      return this;
    },
    
    removeLoader: function () {
      var $loader = this.$loader;
      $loader.animate(
        { opacity: 0,  scale: 1.5 },
        400,
        'ease-in',
        // After animating the loader, remove it from the DOM.
        function () { $loader.remove(); }
      );

      return this;
    },
    
    render: function () { 
      var pages = this.collection.pluck('active_page'),
          imgTemplate = template(config.thumbnailUrl), 
          list = this.el;

      list.innerHTML = "";
      
      if(pages.length) {
        // fix me: update DOM in one swoop: probably we'll template this
        pages.forEach(function(page){
          var itemNode = document.createElement("li");
          itemNode.setAttribute("data-itemid", page.id);
          itemNode.setAttribute("title", page.title);
          itemNode.className = "session-item";
          list.appendChild(itemNode);
          
          var img = new Image(50,50);
          img.src = imgTemplate({ thumbnail_key: page.thumb_id });
          itemNode.appendChild(img);
        });
      } else {
        list.innerHTML = "<li>No active session</li>";
      }
    }
  });  

  var activeSessions = new SessionCollection([], {
  });
  
  var sessionsView = new SessionsView({
    el: document.getElementById("menu"),
    collection: activeSessions
  });

  // preload up existing sessions
  activeSessions.fetch(); 

  // The visit handler is called by the main app when it detects
  // that the current page has changed. This is just a demo.
  xmessage.registerHandler("session.new", function(msg) {
    var sessionData = msg.data, 
        currentSessionId = sessionData.session_id;
    console.log(window.name + " xmessage handler: ", msg.type, arguments);
    
    // TODO: maintain a local session list and insert the new session
    console.log("re-fetching the active sessions");
    activeSessions.fetch({
      success: function(){
        
      }
    });
  });
  
  // notify we're ready to start receiving events
  xmessage.sendMessage("top", "ready", [{ 
    source: window.name, type: "ready"
  }], function (result) {});      


});