gistfile1.js

/*
 * Medli.js
 * Main entry point for the board system 
 */

var cachedDOM = [];

// Because I'm lazy. And it does caching, so that's good, right?
var _g = function(id) { return cachedDOM[id] || (cachedDOM[id] = document.getElementById(id)); }

var pinItems = [];
var categories = [];

function renderPinItem(item) {
	var e = document.createElement("div");

	e.className = "pinitem";
	e.setAttribute("data-category", item.category);
	e.innerHTML = item.content;
	e.onclick = function() { top.location.href = item.action };

	_g("pincontainer").appendChild(e);

	pinItems.push(item);
	if (categories.indexOf(item.category) === -1) {
		categories.push(item.category);
		_g("linkscontainer").innerHTML += " <a href='#" + item.category + "'>" + item.category + "</a>";
	}
}

function renderBoard() {
	var filter = location.hash.substring(1);

	var x = 0;
	var y = [];
	var width = 390;
	var maxwidth = window.innerWidth || document.documentElement.clientWidth;

	// Calculate max number of pins we can fit, and derive padding from it
	var n = Math.ceil(maxwidth / (width + 20)) - 1;
	var totalWidth = (width) * n;
	var padding = 10 + (maxwidth - totalWidth) / (n + 2);
	var verticalPadding = 40;
	if (padding < 20) padding = 20;

	var children = _g("posts").childNodes;
	for (var i = 0; i < children.length; i++) {
		if (filter && filter.split(",").indexOf(children[i].getAttribute("data-category")) === -1)
		{
			children[i].style.display = "none";
			continue;
		}
		if (!children[i].style) continue;
		children[i].style.display = "block";
		children[i].style.position = "absolute";

		if (!y[x]) y[x] = 0;

		if (maxwidth <= 950)
			children[i].style.left = '0px';
		else
			children[i].style.left = 300 + padding + (x * (width + padding)) + "px";
		children[i].style.top = y[x] + "px";
		y[x] += children[i].clientHeight + verticalPadding; 
		x++;
		if (300 + padding + (x * (width + padding) + width) >= maxwidth) {
			x = 0;
		}
	}
}

window.onload = renderBoard;
window.onresize = renderBoard;