apeace/links.html

## links.html
<!doctype html>
<html>
<head>
    <title>Deflationary Spiral</title>
    <style>
        body {
            font-family: sans-serif;
            font-size: 1.2em;
        }
        #main {
            max-width: 500px;
            text-align: justify;
        }
        #notes .rel-links-container {
            max-width: 500px;
            border: 1px solid #000;
            background: #ddd;
            margin-bottom: 10px;
            padding: 10px;
        }
        a.highlighted {
            background: #ddf;
        }
    </style>
</head>
<body>

<div id="main">

    <p>Since the 1930's, the <a href="http://en.wikipedia.org/wiki/Keynesian_economics" title="Keynesian Economics" data-rel="Learn_More">Keynesian</a> school of thought has promoted the idea of a <a href="http://en.wikipedia.org/wiki/Deflationary_spiral#Deflationary_spiral" title="Deflationary Spiral" data-rel="Learn_More">"deflationary spiral"</a>, whereby any significant amount of <a href="http://en.wikipedia.org/wiki/Deflation_(economics)" title="Deflation" data-rel="Learn_More">deflation</a> causes the following cycle to initiate:</p>

    <ol>
        <li>Lower prices lead to lower production</li>
        <li>Lower production leads to lower wages</li>
        <li>Lower wages lead to lower demand</li>
        <li>Lower demand leads to even lower prices</li>
        <li>(repeat)</li>
    </ol>

    <p>It is odd, though, that the Keynesians have not noticed the deflation all around them. Take for example the iPod. In 2001, the original iPod Classic&mdash;with a black and white screen and 5GB of storage&mdash;<a href="http://brianford.newsvine.com/_news/2007/09/05/943723-putting-200-in-perspective-a-history-of-ipod-prices" title="Early price history of the iPod" data-rel="References">cost $399</a>. Today, <a href="https://www.apple.com/ipodclassic/" title="The current iPod Classic" data-rel="References">an iPod Classic is $249</a>, with a color screen, improved interface and hardware, and 160GB of storage. This continual price drop combined with quality increase is expected for Apple products, and yet <a href="http://www.ifoapplestore.com/apple-retail-financials/" title="Apple retail financials since 2001" data-rel="References">their sales continually increase</a>.</p>

</div>

<div id="notes">

    <div class="rel-links-container" data-rev="Learn_More">
        <p>Learn more about...</p>
        <ul class="rel-links-list"></ul>
    </div>

    <div class="rel-links-container" data-rev="References">
        <p>References</p>
        <ul class="rel-links-list"></ul>
    </div>

</div>

<script type="text/javascript">

    // TODO: requires querySelector and querySelectorAll

    function linkGroups (el) {
        var links = el.querySelectorAll("a[data-rel]");
        var groups = {};
        var link, linkGroups, j, k, group;
        for (var i = 0, l = links.length; i < l; i++) {
            link = links[i];
            linkGroups = link.getAttribute("data-rel").split(/\s+/);
            for (j = 0, k = linkGroups.length; j < k; j++) {
                group = linkGroups[j];
                if (!groups.hasOwnProperty(group)) {
                    groups[group] = [];
                }
                groups[group].push(link);
            }
        }
        return groups;
    }

    function groupLists (el) {
        var containers = el.querySelectorAll(".rel-links-container");
        var groups = {};
        var container, list, rev;
        for (var i = 0, l = containers.length; i < l; i++) {
            container = containers[i];
            list = container.querySelector("ul.rel-links-list");
            rev = container.getAttribute("data-rev");
            groups[rev] = {container: container, list: list};
        }
        return groups;
    }

    function linkLinks (fromLink, toLink) {
        var highlighted = false;
        var unhighlightLinks = function () {
            toLink.classList.remove("highlighted");
            fromLink.classList.remove("highlighted");
        };
        var highlightLinks = function () {
            toLink.classList.add("highlighted");
            fromLink.classList.add("highlighted");
        };
        fromLink.addEventListener("mouseenter", highlightLinks);
        fromLink.addEventListener("mouseleave", unhighlightLinks);
    }

    function autoAnnotate (linkGroups, lists) {
        Object.keys(lists).forEach(function (group) {
            var list = lists[group].list;
            var container = lists[group].container;
            var links = linkGroups[group];

            var openGroup = function () {
                container.classList.add("open");
                var link, cloneLink, li;
                for (var i = 0, l = links.length; i < l; i++) {
                    link = links[i];
                    cloneLink = link.cloneNode(false);
                    cloneLink.innerHTML = link.getAttribute("title");
                    cloneLink.setAttribute("target", "_blank");
                    linkLinks(cloneLink, link);
                    li = document.createElement("li");
                    li.appendChild(cloneLink);
                    list.appendChild(li);
                }
            };

            var closeGroup = function () {
                container.classList.remove("open");
                list.innerHTML = "";
            };

            container.addEventListener("mouseenter", openGroup);
            container.addEventListener("mouseleave", closeGroup);
        });
    }

    var main = document.getElementById("main");
    var notes = document.getElementById("notes");

    autoAnnotate(linkGroups(main), groupLists(notes));

</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Deflationary Spiral</title>
	<style>
	body {
	font-family: sans-serif;
	font-size: 1.2em;
	}
	#main {
	max-width: 500px;
	text-align: justify;
	}
	#notes .rel-links-container {
	max-width: 500px;
	border: 1px solid #000;
	background: #ddd;
	margin-bottom: 10px;
	padding: 10px;
	}
	a.highlighted {
	background: #ddf;
	}
	</style>
	</head>
	<body>

	<div id="main">

	<p>Since the 1930's, the <a href="http://en.wikipedia.org/wiki/Keynesian_economics" title="Keynesian Economics" data-rel="Learn_More">Keynesian</a> school of thought has promoted the idea of a <a href="http://en.wikipedia.org/wiki/Deflationary_spiral#Deflationary_spiral" title="Deflationary Spiral" data-rel="Learn_More">"deflationary spiral"</a>, whereby any significant amount of <a href="http://en.wikipedia.org/wiki/Deflation_(economics)" title="Deflation" data-rel="Learn_More">deflation</a> causes the following cycle to initiate:</p>

	<ol>
	<li>Lower prices lead to lower production</li>
	<li>Lower production leads to lower wages</li>
	<li>Lower wages lead to lower demand</li>
	<li>Lower demand leads to even lower prices</li>
	<li>(repeat)</li>
	</ol>

	<p>It is odd, though, that the Keynesians have not noticed the deflation all around them. Take for example the iPod. In 2001, the original iPod Classic—with a black and white screen and 5GB of storage—<a href="http://brianford.newsvine.com/_news/2007/09/05/943723-putting-200-in-perspective-a-history-of-ipod-prices" title="Early price history of the iPod" data-rel="References">cost $399</a>. Today, <a href="https://www.apple.com/ipodclassic/" title="The current iPod Classic" data-rel="References">an iPod Classic is $249</a>, with a color screen, improved interface and hardware, and 160GB of storage. This continual price drop combined with quality increase is expected for Apple products, and yet <a href="http://www.ifoapplestore.com/apple-retail-financials/" title="Apple retail financials since 2001" data-rel="References">their sales continually increase</a>.</p>

	</div>

	<div id="notes">

	<div class="rel-links-container" data-rev="Learn_More">
	<p>Learn more about...</p>
	<ul class="rel-links-list"></ul>
	</div>

	<div class="rel-links-container" data-rev="References">
	<p>References</p>
	<ul class="rel-links-list"></ul>
	</div>

	</div>

	<script type="text/javascript">

	// TODO: requires querySelector and querySelectorAll

	function linkGroups (el) {
	var links = el.querySelectorAll("a[data-rel]");
	var groups = {};
	var link, linkGroups, j, k, group;
	for (var i = 0, l = links.length; i < l; i++) {
	link = links[i];
	linkGroups = link.getAttribute("data-rel").split(/\s+/);
	for (j = 0, k = linkGroups.length; j < k; j++) {
	group = linkGroups[j];
	if (!groups.hasOwnProperty(group)) {
	groups[group] = [];
	}
	groups[group].push(link);
	}
	}
	return groups;
	}

	function groupLists (el) {
	var containers = el.querySelectorAll(".rel-links-container");
	var groups = {};
	var container, list, rev;
	for (var i = 0, l = containers.length; i < l; i++) {
	container = containers[i];
	list = container.querySelector("ul.rel-links-list");
	rev = container.getAttribute("data-rev");
	groups[rev] = {container: container, list: list};
	}
	return groups;
	}

	function linkLinks (fromLink, toLink) {
	var highlighted = false;
	var unhighlightLinks = function () {
	toLink.classList.remove("highlighted");
	fromLink.classList.remove("highlighted");
	};
	var highlightLinks = function () {
	toLink.classList.add("highlighted");
	fromLink.classList.add("highlighted");
	};
	fromLink.addEventListener("mouseenter", highlightLinks);
	fromLink.addEventListener("mouseleave", unhighlightLinks);
	}

	function autoAnnotate (linkGroups, lists) {
	Object.keys(lists).forEach(function (group) {
	var list = lists[group].list;
	var container = lists[group].container;
	var links = linkGroups[group];

	var openGroup = function () {
	container.classList.add("open");
	var link, cloneLink, li;
	for (var i = 0, l = links.length; i < l; i++) {
	link = links[i];
	cloneLink = link.cloneNode(false);
	cloneLink.innerHTML = link.getAttribute("title");
	cloneLink.setAttribute("target", "_blank");
	linkLinks(cloneLink, link);
	li = document.createElement("li");
	li.appendChild(cloneLink);
	list.appendChild(li);
	}
	};

	var closeGroup = function () {
	container.classList.remove("open");
	list.innerHTML = "";
	};

	container.addEventListener("mouseenter", openGroup);
	container.addEventListener("mouseleave", closeGroup);
	});
	}

	var main = document.getElementById("main");
	var notes = document.getElementById("notes");

	autoAnnotate(linkGroups(main), groupLists(notes));

	</script>
	</body>
	</html>