class Gallery {
	constructor(uuid, meta) {
		this.uuid = uuid

		this.frame = document.createElement("div");
		this.frame.setAttribute("class", "gallery");

		this.count = document.createElement("div");
		this.count.setAttribute("class", "count");

		this.nodes = [];

		this.gallery = meta;
	}

	set gallery(meta) {
		if (meta == null) {
			while (this.frame.firstChild) {
				this.frame.removeChild(this.frame.firstChild);
			}
			this.nodes = [];
		} else {
			var elems = meta["elems"]
			var counts = {}
			for (var i = 0; i < elems.length; i++) {
				var node = getnode(this.uuid, elems[i]);
				this.frame.appendChild(node);
				this.nodes.push(node);
				if (counts[elems[i]["type"]] == undefined) {
					counts[elems[i]["type"]] = 1
				} else {
					counts[elems[i]["type"]] += 1
				}
			}
			this.counts = counts
		}
	}

	set counts(counts) {
		if (counts["GraphImage"] != undefined) {
			var c = document.createElement("span")
			var i = document.createElement("img");
			i.setAttribute("src", "static/image.png");
			i.setAttribute("alt", "imágenes");
			c.innerHTML += counts["GraphImage"]
			c.appendChild(i)
			c.setAttribute("class", "count");
			this.count.appendChild(c)
		}
		if (counts["GraphVideo"] != undefined) {
			var c = document.createElement("span")
			var i = document.createElement("img");
			i.setAttribute("src", "static/video.png");
			i.setAttribute("alt", "vídeos");
			c.innerHTML += counts["GraphVideo"]
			c.appendChild(i)
			c.setAttribute("class", "count");
			this.count.appendChild(c)
		}
	}

	get node() {
		var node = document.createElement("div");
		node.appendChild(this.count);
		node.appendChild(this.frame);
		return node;
	}
}

function getnode(uuid, meta) {
	function getImageNode(uuid, meta) {
		var path = "img/" + uuid + "/" + meta["file"];
		var node = document.createElement("img");
		var a    = document.createElement("a");
		node.setAttribute("src", path);
		node.setAttribute("alt", path);
		return node;
	}

	function getVideoNode(uuid, meta) {
		var path = "img/" + uuid + "/" + meta["file"];
		var video = document.createElement("video");
		video.setAttribute("src", path);
		video.setAttribute("controls", "");
		return video;
	}

	function getGalleryNode(uuid, meta) {
		return (new Gallery(uuid, meta)).node;
	}

	var node;
	switch (meta["type"]) {
		case "GraphImage":
			node = getImageNode(uuid, meta);
			break;
		case "GraphVideo":
			node = getVideoNode(uuid, meta);
			break;
		case "Gallery":
			node = getGalleryNode(uuid, meta);
			break;
	}
	return node;
}

function httpGetSync(url) {
	var xmlHttp = new XMLHttpRequest();
	xmlHttp.open("GET", url, false); // true for asynchronous 
	xmlHttp.send(null);
	return xmlHttp.responseText;
}

function load() {
	var meta = JSON.parse(httpGetSync("api/meta?uuid=" + uuid));
	var view = document.querySelector("main");
	var desc = document.querySelector("#desc");
	var date = document.querySelector("#date");

	var node = getnode(uuid, meta);

	view.appendChild(node);
	desc.innerText = meta["description"];

	options = {
		weekday: "long",
		year: "numeric",
		month:"long",
		day:"numeric"
	};
	date.innerText = (new Date(meta["date"].replace(/-/g, "/"))).toLocaleString(window.navigator.language, options);
}

console.log(uuid)

window.onload = load;