var TopPage = {

	showFlogVideos: function (videos) {
		var small_dataset = this.extractRandomDataset(videos, 4, 2);
		this.renderInTable(small_dataset, "flog_videos_small");

		var flog_timeout;
		Event.observe(window, "unload", function () {
			if (flog_timeout) clearTimeout(flog_timeout);
		});

		$$("#flog_videos_small a").each(function (el) {
			el.observe("click", function (ev) {
				if (ev.shiftKey || ev.altKey || ev.ctrlKey || ev.metaKey) { return; }
				flog_timeout = setTimeout(function () {
					location.href = el.href.replace('http://www.flog.jp/w.php/', '');
				}, 5000);
			}.bindAsEventListener());
		});
	},

	showUadVideos: function (videos) {
		var dataset = this.extractRandomDataset(videos, 4, 1);
		this.renderInTable(dataset, "uad_videos");
	},

	showRecommendTags: function (taglist) {
		var tags = this.extractRandomSubset(this.parseTagList(taglist), 15);
		this.renderTags(tags, "recommend_tags");
	},

	extractRandomDataset: function (arr, cols, rows) {
		var dataset = [];
		for (var y = 0; y < rows && arr.length; y++) {
			dataset[y] = [];
			for (var x = 0; x < cols && arr.length; x++) {
				var n = Math.floor(Math.random() * arr.length);
				dataset[y][x] = arr[n];
				arr.splice(n, 1);
			}
		}
		return dataset;
	},

	renderInTable: function (dataset, table) {
		var	tpltbody = $(table).down("tbody"),
			tpltr    = tpltbody.down("tr"),
			tpltd    = tpltr.down("td"),
			tplhtml  = new Template(tpltd.down("textarea").value, /(^|.|\r|\n)(#(\w+)#)/);

		var tbody = tpltbody.cloneNode(false);
		tbody.style.display = "";
		for (var y = 0, ymax = dataset.length; y < ymax; y++) {
			var row = dataset[y], tr = tpltr.cloneNode(false);
			for (var x = 0, xmax = row.length; x < xmax; x++) {
				var td = tpltd.cloneNode(false);
				td.innerHTML = tplhtml.evaluate(row[x]);
				tr.appendChild(td);
			}
			tbody.appendChild(tr);
		}
		$(table).replaceChild(tbody, tpltbody);
	},

	renderInTableFlogLarge: function (dataset, table) {
		var	tpltbody = $(table).down("tbody"),
			tpltr    = tpltbody.down("tr"),
			tpltd1   = tpltr.down("td"),
			tpltd2   = tpltd1.next("td"),
			tplhtml1 = new Template(tpltd1.down("textarea").value, /(^|.|\r|\n)(#(\w+)#)/),
			tplhtml2 = new Template(tpltd2.down("textarea").value, /(^|.|\r|\n)(#(\w+)#)/);

		var tbody = tpltbody.cloneNode(false);
		tbody.style.display = "";
		for (var y = 0, ymax = dataset.length; y < ymax; y++) {
			var row = dataset[y], tr = tpltr.cloneNode(false);
			for (var x = 0, xmax = row.length; x < xmax; x++) {
				var td1 = tpltd1.cloneNode(false);
				td1.innerHTML = tplhtml1.evaluate(row[x]);
				tr.appendChild(td1);
				var td2 = tpltd2.cloneNode(false);
				td2.innerHTML = tplhtml2.evaluate(row[x]);
				tr.appendChild(td2);
			}
			tbody.appendChild(tr);
		}
		$(table).replaceChild(tbody, tpltbody);
	},

	TAG_LEVELS: {
		"1": 1, "\uFF11": 1,
		"2": 2, "\uFF12": 2,
		"3": 3, "\uFF13": 3
	},
	parseTagList: function (taglist) {
		var m, re = /^[ \t\u3000]*([^ \t\u3000\r\n]+)(?:[ \t\u3000]+([1-3\uFF11-\uFF13])?)/mg;
		var tags = [];
		while (m = re.exec(taglist)) {
			tags.push({ tag: m[1], level: this.TAG_LEVELS[m[2]] || 1 });
		}
		return tags;
	},

	renderTags: function (tags, dest) {
		dest = $(dest);
		tags.each(function (tag) {
			var el = document.createElement("a");
			el.href = "/tag/" + encodeURIComponent(tag.tag) + "?top_tag";
			el.className = "mjt_size" + tag.level;
			el.style.whiteSpace = "nowrap";
			el.appendChild(document.createTextNode(tag.tag));
			dest.appendChild(el);
			dest.appendChild(document.createTextNode(" "));
		});
	},

	extractRandomSubset: function (arr, num) {
		var subset = [];
		for (var i = 0, l = Math.min(num, arr.length); i < l; i++) {
			var n = Math.floor(Math.random() * arr.length);
			subset[i] = arr[n];
			arr.splice(n, 1);
		}
		return subset;
	}

};