// Main app class
enyo.kind({
	name: "TamTam.App",
	kind: "FittableRows",
	published: {activity: null},
	components: [
		{name: "content", kind: "Scroller", fit: true, classes: "maincontent", onresize: "resize",
		components: [
			{name: "collections", classes: "collections", components: [
			]},
			{name: "items", classes: "items", components: [
			]}
		]}
	],

	// Constructor
	create: function() {
		this.inherited(arguments);
		this.collection = 0;
		this.computeSize();
		var that = this;
		requirejs(["sugar-web/env"], function(env) {
			env.getEnvironment(function(err, environment) {
				that.userColor = environment.user.colorvalue;
				that.draw();
			});
		});
	},

	computeSize: function() {
		var toolbar = document.getElementById("main-toolbar");
		var canvas = document.getElementById("body");
		var canvas_height = canvas.offsetHeight;
		this.$.content.applyStyle("height", (canvas_height-toolbar.offsetHeight)+"px");
	},

	resize: function() {
		this.computeSize();
		this.draw();
	},

	// Draw screen
	draw: function() {
		// Remove collections
		var items = [];
		enyo.forEach(this.$.collections.getControls(), function(item) { items.push(item); });
		for (var i = 0 ; i < items.length ; i++) { items[i].destroy();	}

		// Display collections
		document.getElementById("body").style.backgroundColor = this.userColor.fill;
		this.$.collections.applyStyle("background-color", this.userColor.fill);
		var len = TamTam.collections.length;
		for(var i = 0 ; i < len ; i++ ) {
			this.$.collections.createComponent(
				{ kind: "TamTam.Collection", name: TamTam.collections[i].name, selection: (i == this.collection), ontap: "changeCollection" },
				{ owner: this }
			).render();
		}

		// Remove items
		var items = [];
		this.$.items.applyStyle("background-color", this.userColor.fill);
		enyo.forEach(this.$.items.getControls(), function(item) { items.push(item); });
		for (var i = 0 ; i < items.length ; i++) { items[i].destroy();	}

		// Display items
		var collection = TamTam.collections[this.collection];
		var len = collection.content.length;
		for(var i = 0 ; i < len ; i++ ) {
			var item = this.$.items.createComponent(
				{ kind: "TamTam.Item", name: collection.content[i] },
				{ owner: this }
			);
			item.applyStyle("background-color", this.userColor.stroke);
			item.render();
		}
	},

	// Handle event
	changeCollection: function(s, e) {
		// Stop sound
		sound.pause();

		// Select the collection
		var len = TamTam.collections.length;
		for(var i = 0 ; i < len ; i++) {
			if (TamTam.collections[i].name == s.name) {
				this.collection = i;
				this.draw();
				return;
			}
		}
	}
});