haha! Rewrote basically the entire app.

app/controllers/charts_controller.rb

@@ -41,8 +41,8 @@ def charts_paginate
   # Will is the best!
   # GET /charts/1.xml
   def show
-    @data = @chart = Chart.find(params[:id])
-    @data['songs'] = @chart.songs
+    @chart = Chart.find(params[:id])
+    @data = @chart.songs.map { |song| song.attributes }
 
     render :json => @data.to_json
   end

app/views/layouts/application.html.erb

@@ -55,13 +55,13 @@
       
 
 
-      <div id="content" class="container clearfix">
-          <div id="charts"></div>
-          <div class="right"></div>
-      </div>
+      <% if current_user %>
+        <div id="content" class="container clearfix">
+            <div id="charts"></div>
+            <div id="songs"></div>
+        </div>
 
 
-      <% if current_user %>
         <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 
         <div class="jp-audio-container">
@@ -90,6 +90,8 @@
             </div>
           </div>
         </div>
+      <% else %>
+        <div id="content" class="container clearfix"><%= yield %></div>
       <% end %>
 
     </body>
@@ -111,7 +113,7 @@
         <span class="genre">{{= name }}</span>
     </script>
 
-    <script type="text/template" id="song_item_template">
+    <script type="text/template" id="song-item-template">
         <td class="thumb">
             <img src = "{{= thumbnail_small }}"/>
         </td>

config/environments/development.rb

@@ -15,7 +15,8 @@
       "jquery.jplayer.min.js",
       "underscore.js",
       "backbone.js",
-      "application.js"
+      "application.js",
+      "jquery_extension.js"
   ]
   MYVOLUME_JS_APP = [
       "chart.view.js",
@@ -24,6 +25,7 @@
       "chart.collection.js",
       "song.view.js",
       "songs.view.js",
+      "songstable.view.js",
       "song.model.js",
       "song.collection.js",
       "workspace.js"

public/javascripts/chart.view.js

@@ -11,7 +11,16 @@ myvolume.views.Chart = Backbone.View.extend({
 
     initialize: function() {
         console.log("ChartItemView::Init");
-        _.bindAll(this, 'render', 'triggerClicked');
+        _.bindAll(this,
+            'render',
+            'triggerClicked', 
+            'triggerActivate',
+            'triggerDeactivate',
+            'activate',
+            'deactivate');
+
+        this.model.on('activate', this.activate);
+        this.model.on('deactivate', this.deactivate);
     },
 
     render: function() {
@@ -29,9 +38,20 @@ myvolume.views.Chart = Backbone.View.extend({
     },
 
     triggerClicked: function() {
-        this.trigger('clicked', this.model);
-        $('[active="true"]').attr('active', 'false');
+        this.trigger('chart:clicked', this.model);
+    },
+    triggerActivate: function() {
+        this.trigger('activate', this.model);
+    },
+    triggerDeactivate: function() {
+        this.trigger('deactivate', this.model);
+    },
+    activate: function() {
         $(this.el).attr('active', 'true');
+    },
+    deactivate: function() {
+        $(this.el).attr('active', 'false');
     }
 
+
 });

public/javascripts/charts.view.js

@@ -8,28 +8,37 @@ myvolume.views.Charts = Backbone.View.extend({
         this.collection = new myvolume.collections.Charts();
     },
 
-    render: function(chart_id) {
+    render: function() {
         console.log("ChartsView::Render");
         $(this.el).empty();
         $.when(this.collection.fetch()).then(this.addAll);
         return this;
     },
 
     addAll: function(callback) {
-        console.log("ChartsView::addAll");
         this.collection.each(this.addOne);
+
+        this.activeModel = this.collection.first();
+        this.activeModel.trigger('activate');
+
+        myvolume.views.songs.render(this.collection.first().get('id'));
         return this;
     },
 
     addOne: function(chart) {
         console.log("ChartsView::addOne");
         var item = new myvolume.views.Chart({ model: chart});
-        item.on('clicked', this.handleClick);
+        item.on('chart:clicked', this.handleClick);
         $(this.el).append(item.render().el);
         return this;
     },
-    handleClick: function() {
-        console.log("clicked!", arguments);
+    handleClick: function(model) {
+
+        this.activeModel.trigger('deactivate');
+        this.activeModel = model;
+        this.activeModel.trigger('activate');
+
+        myvolume.views.songs.render(model.get('id'));
     }
 
 

public/javascripts/jquery_extension.js

@@ -0,0 +1,8 @@
+(function($) { 
+    $.fn.extend({
+        htmlFadeIn: function(dom_obj) {
+            $(this).hide().html(dom_obj);
+            $(this).fadeIn();
+        }
+    });
+})(jQuery);

public/javascripts/song.collection.js

@@ -1,4 +1,12 @@
 myvolume.collections.Songs = Backbone.Collection.extend({
     model: myvolume.models.Song,
-    url: "/songs"
+    initialize: function() {
+        _.bindAll(this, 'url');
+    },
+    url: function() {
+        return "/songs?chart_id=" + this.id;
+    },
+    parse: function(response) {
+        return response;
+    }
 });

public/javascripts/song.view.js

@@ -1,10 +1,13 @@
-myvolume.views.Song = Backbone.View.extend({
+myvolume.views.SongRow = Backbone.View.extend({
     tagName: 'tr',
 
     events: {
       "click" : "play"
     },
 
+    template: _.template($('#song-item-template').html()),
+    templateGenre: _.template($('#genre-item-template').html()),
+
     initialize: function() {
         console.log("ChartItemView::Init");
 
@@ -13,16 +16,14 @@ myvolume.views.Song = Backbone.View.extend({
     },
 
     render: function() {
-        console.log("ChartItemView::Render");
-        console.log(this.model.toJSON());
+        console.log("ChartItemView::Render", this.model);
 
-        var template = ich.song_item_template(this.model.toJSON());
-        $(this.el).html(template);
+        $(this.el).html(this.template(this.model.toJSON()));
 
         //TODO: Add Genres
-        var genre = this.model.attributes.genre;
+        var genre = this.model.get('genre');
         var node = this.$(".genre");
-        node.append(ich.genre_item_template({ name: genre }));
+        node.append(this.templateGenre({ name: genre }));
 
         return this;
     },

public/javascripts/songs.view.js

@@ -1,28 +1,24 @@
 myvolume.views.Songs = Backbone.View.extend({
-    id: 'songs',
-    tagName: 'table',
+    el: '#songs',
 
     initialize: function(chartId) {
-         console.log("ChartSongsView::Init");
-         _.bindAll(this, "render", "addOne", "addAll");
+         _.bindAll(this,
+             'render',
+             'fadeIn');
+         this.view = new myvolume.views.SongsTable();
+         this.view.on('ready', this.fadeIn);
     },
 
-    render: function() {
-        console.log("ChartSongsView::render");
-        $('#content').append($(this.el));
-        this.addAll();
+    render: function(id) {
+        myvolume.routers.workspace.navigate('charts/' + id);
+        $(this.el).empty();
+        $(this.el).html('<div class="loader"><img src="/images/ajax-loader.gif" /></div>');
+        this.view.render(id);
         return this;
     },
-
-    addOne: function(result) {
-        console.log("ChartSongsView::addOne");
-        var song = new SongItemView({model: result});
-        $(this.el).append(song.render().el);
-    },
-
-    addAll: function() {
-        console.log("ChartSongsView::addAll");
-        $('table#songs').empty();
+
+    fadeIn: function() {
+        $(this.el).htmlFadeIn(this.view.el);
     }
-
+    
 });

public/javascripts/songstable.view.js

@@ -0,0 +1,35 @@
+myvolume.views.SongsTable = Backbone.View.extend({
+    id: 'songs',
+    tagName: 'table',
+
+    initialize: function(chartId) {
+         console.log("ChartSongsView::Init");
+         _.bindAll(this, "render", "addOne", "addAll");
+         this.songs = new myvolume.collections.Songs();
+         this.songs.on('reset', this.addAll);
+    },
+
+    render: function(id) {
+        console.log("ChartSongsView::render");
+        this.songs.id = id;
+        //$(this.el).empty();
+        this.songs.fetch();
+        return this;
+    },
+
+    addAll: function() {
+        console.log("ChartSongsView::addAll");
+        $(this.el).empty();
+        this.songs.each(this.addOne);
+
+        this.trigger('ready');
+    },
+
+    addOne: function(result) {
+        console.log("ChartSongsView::addOne");
+        var song = new myvolume.views.SongRow({model: result});
+        $(this.el).append(song.render().el);
+    }
+
+
+});