// Main app class
enyo.kind({
	name: "VideoViewer.App",
	kind: "FittableRows",
	published: {
		activity: null,
		filter: null
	},
	components: [
		{name: "spinner", kind: "Image", src: "images/spinner-light.gif", classes: "mainspinner", showing: false },
		{name: "cloudwarning", kind: "Image", src: "images/cloud-warning.svg", classes: "cloudwarning", showing: false },
		{name: "content", kind: "Scroller", fit: true, classes: "main-content", onresize: "resize",
		components: [
			{name: "items", classes: "items", components: [
			]}
		]},
		{name: "footer", classes: "viewer-footer toolbar", fit: false, components: [
			{name: "previousbutton", kind: "Button", classes: "toolbutton previous-button pull-left", title:"Previous", ontap: "showPrevious", showing: false},
			{name: "pagecount", content: "0/0", classes: "page-count"},
			{name: "nextbutton", kind: "Button", classes: "toolbutton next-button pull-right", title:"Next", ontap: "showNext", showing: false}
		]},
		{name: "libraryDialog", kind: "VideoViewer.LibraryDialog", onHide: "librariesHidden"},
		{name: "addLibraryDialog", kind: "VideoViewer.AddLibraryDialog"},
		{name: "videoDialog", kind: "VideoViewer.VideoDialog"}
	],

	// Constructor
	create: function() {
		app = this;
		this.inherited(arguments);
		this.collection = [];
		this.index = 0;
		this.computeSize();
		this.favorite = false;
		document.getElementById("exportvideo-button").addEventListener("click", enyo.bind(this, "clickExportVideo"));
		var that = this;
		requirejs(["sugar-web/env","sugar-web/datastore"], function(env,datastore) {
			env.getEnvironment(function(err, environment) {
				that.$.content.applyStyle("background-color", environment.user.colorvalue.fill);
				that.datastore = datastore;
			});
		});
	},

	loadLibraries: function() {
		var that = this;
		Util.loadLibraries(
			function() {
				app.showLibraries();
			},
			function(sender) {
				that.$.spinner.setShowing(false);
				that.$.cloudwarning.setShowing(true);
				console.log("Error loading library on '"+sender.url+"'");
			}
		);
	},

	loadDatabase: function() {
		var that = this;
		this.$.spinner.setShowing(true);
		Util.loadDatabase(function(response) {
			that.index = 0;
			that.collection = response;
			that.$.spinner.setShowing(false);
			that.$.cloudwarning.setShowing(false);
			that.draw();
		}, function(sender) {
			that.$.spinner.setShowing(false);
			that.$.cloudwarning.setShowing(true);
			console.log("Error loading database on '"+sender.url+"'");
		});
	},

	computeSize: function() {
		var toolbar = document.getElementById("main-toolbar");
		var toolbaroffset = !Util.onSugar() ? toolbar.offsetHeight : 37.5;
		var canvas = document.getElementById("body");
		var canvas_height = canvas.offsetHeight;
		this.$.content.applyStyle("height", (canvas_height-(toolbaroffset*2))+"px");
	},

	resize: function() {
		if (!Util.onSugar()) {
			this.computeSize();
			this.draw();
		}
	},

	// Draw screen
	draw: function() {
		// Remove items
		var items = [];
		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 = this.collection;
		var len = collection.length;
		var exportButton = document.getElementById("exportvideo-button");
		for(var i = 0 ; i < constant.pageCount && this.index+i < len ; i++ ) {
			this.$.items.createComponent(
				{
					kind: "VideoViewer.Item",
					code: collection[this.index+i].id,
					title: collection[this.index+i].title,
					category: collection[this.index+i].category,
					isFavorite: Util.getFavorite(collection[this.index+i].id),
					image: collection[this.index+i].image,
					onVideoPlayed: "showVideo",
					tojournal: exportButton.classList.contains("active")
				},
				{ owner: this }
			).render();
		}

		// Display button
		this.$.previousbutton.setShowing(this.index-constant.pageCount >= 0);
		var currentPage = (len?1:0)+Math.ceil(this.index/constant.pageCount);
		var lastPage = Math.ceil(len/constant.pageCount);
		this.$.pagecount.setContent(currentPage+"/"+lastPage);
		this.$.nextbutton.setShowing(currentPage < lastPage);
	},

	putItemsJournalModeTo: function(tojournal) {
		if (tojournal) {
			document.getElementById("exportvideo-button").classList.add("active");
		} else {
			document.getElementById("exportvideo-button").classList.remove("active");
		}
		enyo.forEach(this.$.items.getControls(), function(item) {
			item.tojournal = tojournal;
			item.tojournalChanged();
		});
	},

	// Page event
	showPrevious: function() {
		this.index -= constant.pageCount;
		this.saveContext();
		this.draw();
	},

	showNext: function() {
		this.index += constant.pageCount;
		this.saveContext();
		this.draw();
	},

	showVideo: function(item) {
		if (item.tojournal) {
			this.putItemsJournalModeTo(false);
			return;
		}
		this.$.videoDialog.show();
		this.$.videoDialog.setItem(item);
	},

	showLibraries: function() {
		this.$.libraryDialog.reload();
		this.$.libraryDialog.show();
	},

	hideLibraries: function() {
		this.$.libraryDialog.hide();
	},

	librariesHidden: function() {
		if (Util.getLibrary() == null)
			this.showLibraries();
	},

	setFilter: function(filter) {
		Util.setFilter(filter);
	},

	filterChanged: function(index) {
		this.collection = Util.getCollection();
		this.index = (index !== undefined ? index : 0);
		this.saveContext();
		this.draw();
	},

	clickExportVideo: function() {
		var exportButton = document.getElementById("exportvideo-button");
		var tojournal;
		tojournal = !exportButton.classList.contains("active");
		this.putItemsJournalModeTo(tojournal);
	},

	saveContext: function() {
		Util.setIndex(this.index);
		Util.saveContext();
	}
});