books-quicksand.js

window.app = {};

window.location.hash = "";
app.bookshelves_url = "/google_books.json";


app.shelvesIndex = {};

app.Book = Backbone.Model.extend();

app.Bookshelf = Backbone.Collection.extend({
    initialize: function(data){
        this.name = data.name.replace(/_/g," ");
        this.total = data.total;
        this.id = data.id;
        app.shelvesIndex[data.name.replace(/_/g," ")] = data.id;
    },
    model: app.Book
});

app.Shelves = Backbone.Collection.extend({
    model: app.Shelf
});

app.ShelfView = Backbone.View.extend({
    template: _.template($("#shelfTemplate").html()),
    render: function(){
        return this.template(this.options);
    }
})

app.BookView = Backbone.View.extend({
    template: _.template($("#bookTemplate").html()),
    render: function(){
        volumeInfo = this.model.attributes.volumeInfo;
        if (typeof volumeInfo.imageLinks == 'undefined') {
            thumbnail = "";
        } else {
            if( typeof volumeInfo.imageLinks.smallThumbnail == 'undefined' ){
                thumbnail = "";
            } else {
                thumbnail = volumeInfo.imageLinks.smallThumbnail;    
            }        
        } 

        data = {
            title: volumeInfo.title,
            thumbnail: thumbnail
        }
        return this.template(data);
    }
})

app.Router = Backbone.Router.extend({
    routes: {
        "shelf/:name": "shelf"
    },
    shelf: function(name){
        app.showBookshelf(app.shelves[name]);
    }
});

app.getShelves = function(callback) {
    shelvesOut = [];
    $.getJSON(app.bookshelves_url, function(shelvesData){
        i = 0;
        _.each(shelvesData,function(shelfJSON){
            shelf = new app.Bookshelf({
                name: shelfJSON.name,
                total: shelfJSON.total,
                id: i
            })
            shelf.reset(shelfJSON.volumes);
            shelvesOut.push(shelf);
            i+=1;
        })
        if (typeof callback != 'undefined'){
            callback(shelvesOut);        
        }
    });
    return shelvesOut;
}

app.buildShelfViews = function(shelves) {
    shelfViews = _.map(shelves,function(shelf){
        return new app.ShelfView({
            title: shelf.name,
            total: shelf.total,
            id: shelf.id,
            books: shelf.models
        });
    });
    return shelfViews;
}

app.buildShelfBooksViews = function(shelf){
    return _.map(shelf.models, function(book){
        return new app.BookView({
            model: book
        });
    })
}

app.addBooksViewsToShelf = function(views){
    var $virtualDiv = $("<div/>");
    _.each(views, function(view){
        $virtualDiv.append(view.render());    
    });

    $("article ul").quicksand($virtualDiv.html(),{
        easing: "swing",
        duration: 700
    });
}

app.addShelfViewsToAside = function(shelves){
    views = app.buildShelfViews(shelves)
    var $virtualDiv = $("<div/>");

    _.each(views, function(view){
        $virtualDiv.append(view.render());    
    });

    $("aside ul").html($virtualDiv.html());

    $("aside li").on("click",function(){
        app.router.navigate("shelf/" + $(this).data('id'), {
            replace: true,
            trigger: true
        });
    });
}

app.showBookshelf = function(bookshelf){
    var shelfBooksViews = app.buildShelfBooksViews(bookshelf);
    $("article header h1").html(bookshelf.name);
    app.addBooksViewsToShelf(shelfBooksViews);    
}

app.applyColorScheme = function(colorScheme){
    $(".header-container, .footer-container, .main aside").css({
        background: colorScheme.light
    });

    $(".header-container,.main aside").css({
        "border-color": colorScheme.dark
    });

    $("nav a").css({
        background: colorScheme.dark
    });
}

// Now start doing ALL the things

app.router = new app.Router();
Backbone.history.start();

app.shelves = app.getShelves(function(shelves){
    app.addShelfViewsToAside(shelves);
    app.showBookshelf(shelves[app.shelvesIndex["programming"]]);
});

app.applyColorScheme({
    dark: "#a60000",
    light: "#bf3030"
});