daapr/resources/js/app.js

/*jslint laxbreak:true */
/*jslint laxcomma:true */
/*jslint loopfunc:true */
/*jslint strict:true */
/*jslint browser:true */
/*jslint devel:true */

// Filename: app.js
define([
	"underscore"
	, "jquery"
	, "backbone"
	, "async"

	, "config"

	, "views/app"
	, "views/footer"
	, "views/sidebar"
	, "views/player"
	, "views/main"

	, "models/client"
//	, "models/dmap"

	, "collections/server"

	, "text!../templates/app/modal-loading.html"
	, "text!../templates/app/modal-login.html"
],
function(
_
, $
, Backbone
, async

, Config

, AppView
, FooterView
, SideBarView
, PlayerView
, MainView

, ClientModel
//, DMAPModel
, ServerCollection

, tmplModalLoading
, tmplModalLogin
) {
	"use strict";

	return {
		init:	function() {
			_.bindAll(this
				, "_serverInit"
			);

			var that	= this
			;

			console.log("app.js::init()");

			// Setup underscore templates with mustache styles
			_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

			var Router = Backbone.Router.extend({
				routes: {
					"playlist":				"_routerActionPlaylist"
					, "servers":			"_routerActionClient"
					, "items/:id":			"_routerActionItem"
					, ":server/items/:id":	"_routerActionServerItem"
					//"*actions": "defaultRoute" // matches http://example.com/#anything-here
				}
			});

			this.Router			= new Router();

			Backbone.history.start({
				pushState: true
				, root: "/"
			});

			this.servers	= new ServerCollection();

			this.servers.on("add", function (server) {
				server.save();
			});

			this.servers.on("client:unauthorized", function __fnAppEventClientUnauthorized(event) {
				var client		= event.shift()
				;
				console.log(arguments);
			});

			this.loadingStates	= 0;
			this.loadingModal	= $(tmplModalLoading);
			this.loadingTimeout	= null;

			async.waterfall([
				function __asyncAppFetchServerCollection(callback) {
					that.servers.fetch({
						success:	function (collection, modelsAttributes) {
							if (modelsAttributes.length === 0) {
								console.info("Adding default daap server");
								collection.add(Config.daap);
							}

							callback(null, collection);
						}

						, error: callback
					});
				}

				, function __asyncAppAttachStateEvents(servers, callback) {
					async.forEach(that.servers.models, function (server) {
						that._serverInit(server);
					});

					that.servers.on("add", function (server) {
						that._serverInit(server);
					});

					callback(null, servers);
				}
			]
			, function __asyncAppDependenciesReady(err, result) {
				that.Views			= {};

				that.Views.SideBar	= new SideBarView(that.servers);
				that.Views.Player	= new PlayerView();
				that.Views.Main		= new MainView();
				that.Views.App		= new AppView();
				that.Views.Footer	= new FooterView();

				that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar() {
					that.Views.App.toggleSideBar();
				});

				that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
					$(event.target).remove();
				});

			});

			return this;
		}

		, _routerActionPlaylist:	function () {

		}

		, _routerActionClient:		function (hostname) {

		}

		, _routerActionItem:		function (item) {

		}

		, _routerActionServerItem:	function (server, item) {

		}

		, _serverInit:	function(server) {
			var that	= this
			;

			server.client.on("state", function __fnAppEventClientStateChange(client, state) {
				console.log(state);
				if (state === ClientModel.defaults._states.loading) {

					if (that.loadingStates === 0) {
						that.loadingTimeout	= setTimeout(function __fnAppTimeoutLoadingStat() {
							that.loadingModal.modal();
							that.loadingTimeout	= null;
						}, 800);
					}

					that.loadingStates++;
				} else if (state === ClientModel.defaults._states.loaded) {
					that.loadingStates--;

					if (that.loadingStates === 0) {
						clearTimeout(that.loadingTimeout);
						that.loadingModal.modal("hide");
					}
				}
			});

			server.client.on("unauthorized", function __fnAppEventClientUnauthorized(client, xhr) {
				var tmplHtml	= _.template(tmplModalLogin)({ dmap_itemname: client.url() })
				,	$tmpl		= $(tmplHtml)
				;

				$tmpl.modal();
			});

			server.client.init();
		}
	};

});