# HG changeset patch
# User paulo
# Date 1466227457 25200
# Node ID 256b8df1c6869d8ab56c7c477c576ae84930f1dc
# Parent  ff0878207f0e838582a6a94330e8fa058def0962
add life_calendar

diff -r ff0878207f0e -r 256b8df1c686 life_calendar/happy.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/life_calendar/happy.js	Fri Jun 17 22:24:17 2016 -0700
@@ -0,0 +1,134 @@
+/*global $*/
+(function happyJS($) {
+    function trim(el) {
+        return (''.trim) ? el.val().trim() : $.trim(el.val());
+    }
+    $.fn.isHappy = function isHappy(config) {
+        var fields = [], item;
+        var pauseMessages = false;
+
+        function isFunction(obj) {
+            return !!(obj && obj.constructor && obj.call && obj.apply);
+        }
+        function defaultError(error) { //Default error template
+            var msgErrorClass = config.classes && config.classes.message || 'unhappyMessage';
+            return $('<span id="' + error.id + '" class="' + msgErrorClass + '" role="alert">' + error.message + '</span>');
+        }
+        function getError(error) { //Generate error html from either config or default
+            if (isFunction(config.errorTemplate)) {
+                return config.errorTemplate(error);
+            }
+            return defaultError(error);
+        }
+        function handleSubmit() {
+            var  i, l;
+            var errors = false;
+            for (i = 0, l = fields.length; i < l; i += 1) {
+                if (!fields[i].testValid(true)) {
+                    errors = true;
+                }
+            }
+            if (errors) {
+                if (isFunction(config.unHappy)) config.unHappy();
+                return false;
+            } else if (config.testMode) {
+                if (isFunction(config.happy)) return config.happy();
+                if (window.console) console.warn('would have submitted');
+                return false;
+            }
+            if (isFunction(config.happy)) return config.happy();
+        }
+        function handleMouseUp() {
+            pauseMessages = false;
+        }
+        function handleMouseDown() {
+            pauseMessages = true;
+            $(window).bind('mouseup', handleMouseUp);
+        }
+        function processField(opts, selector) {
+            var field = $(selector);
+            var error = {
+                message: opts.message || '',
+                id: selector.slice(1) + '_unhappy'
+            };
+            var errorEl = $(error.id).length > 0 ? $(error.id) : getError(error);
+            var handleBlur = function handleBlur() {
+                if (!pauseMessages) {
+                    field.testValid();
+                } else {
+                    $(window).bind('mouseup', field.testValid.bind(this));
+                }
+            };
+
+            fields.push(field);
+            field.testValid = function testValid(submit) {
+                var val, gotFunc, temp;
+                var el = $(this);
+                var errorTarget = (opts.errorTarget && $(opts.errorTarget)) || el;
+                var error = false;
+                var required = !!el.get(0).attributes.getNamedItem('required') || opts.required;
+                var password = (field.attr('type') === 'password');
+                var arg = isFunction(opts.arg) ? opts.arg() : opts.arg;
+                var fieldErrorClass = config.classes && config.classes.field || 'unhappy';
+
+                // handle control groups (checkboxes, radio)
+                if (el.length > 1) {
+                  val = [];
+                  el.each(function(i,obj) {
+                    val.push($(obj).val());
+                  });
+                  val = val.join(',');
+                } else {
+                  // clean it or trim it
+                  if (isFunction(opts.clean)) {
+                      val = opts.clean(el.val());
+                  } else if (!password && typeof opts.trim === 'undefined' || opts.trim) {
+                      val = trim(el);
+                  } else {
+                      val = el.val();
+                  }
+
+                  // write it back to the field
+                  el.val(val);
+                }
+
+                // get the value
+                gotFunc = ((val.length > 0 || required === 'sometimes') && isFunction(opts.test));
+
+                // check if we've got an error on our hands
+                if (submit === true && required === true && val.length === 0) {
+                    error = true;
+                } else if (gotFunc) {
+                    error = !opts.test(val, arg);
+                }
+
+                if (error) {
+                    errorTarget.addClass(fieldErrorClass).after(errorEl);
+                    return false;
+                } else {
+                    temp = errorEl.get(0);
+                    // this is for zepto
+                    if (temp.parentNode) {
+                        temp.parentNode.removeChild(temp);
+                    }
+                    errorTarget.removeClass(fieldErrorClass);
+                    return true;
+                }
+            };
+            field.bind(opts.when || config.when || 'blur', handleBlur);
+        }
+
+        for (item in config.fields) {
+            processField(config.fields[item], item);
+        }
+
+        $(config.submitButton || this).bind('mousedown', handleMouseDown);
+
+        if (config.submitButton) {
+            $(config.submitButton).click(handleSubmit);
+        } else {
+            this.bind('submit', handleSubmit);
+        }
+        return this;
+    };
+})(this.jQuery || this.Zepto);
diff -r ff0878207f0e -r 256b8df1c686 life_calendar/index.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/life_calendar/index.html	Fri Jun 17 22:24:17 2016 -0700
@@ -0,0 +1,386 @@
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <title>Life Calendar</title>
+        <style type="text/css">
+            body {
+                padding: 0;
+                margin: 0;
+                position: relative;
+                font-family: sans-serif;
+                background-size: cover;
+            }
+
+            a, a:visited {
+                color: #70BCF9;
+            }
+
+            table {
+                width: 100%;
+                height: 100%;
+            }
+
+            table, td {
+                border: 1px solid;
+                border-collapse: collapse;
+                padding: 0;
+                margin: 0;
+            }
+
+            div#welcome {
+                display: none;
+
+                width: 50vw;
+                margin: 8vh auto 0;
+            }
+
+            div#welcome h1 {
+                text-align: center;
+                text-transform: uppercase;
+                font-family: serif;
+                font-size: 4em;
+            }
+            div#welcome form {
+                border: 1px solid #999999;
+                padding: 10px 20px;
+            }
+
+            div#welcome .settings {
+                margin-left: 5px;
+                padding: 5px;
+            }
+
+            div#welcome div#footer {
+                color: #a6a6a6;
+                padding-top: 50px;
+                text-align: center;
+            }
+
+            #settingsForm span.unhappyMessage {
+                font-size: 0.8em;
+                padding-left: 10px;
+            }
+
+            div#tooltip {
+                background-color: #5070D0;
+                padding: 0.5em;
+            }
+
+            div#tooltip h1 {
+                color: #DFDFDF;
+                font-size: 1.25em;
+                margin: 1px;
+            }
+
+            div#tooltip h2 {
+                color: #AAAAAA;
+                font-size: 0.75em;
+                font-weight: normal;
+                margin: 1px;
+            }
+
+            td {
+                border-color: #FFFFFF;
+            }
+
+            table {
+                border-color: #FFFFFF;
+            }
+
+            tr.previous td {
+                background-color: #BBBBBB;
+            }
+
+            tr.current td.partial {
+                background-color: #CCDDCC;
+            }
+
+            tr.current td.today {
+                background-color: #DDDDCC;
+            }
+
+            tr.current td.future {
+                background-color: #DDCCCC;
+            }
+
+            tr.future {
+                background-color: #DDDDDD;
+            }
+
+        </style>
+        <script src="jquery-2.1.3.min.js"></script>
+        <script src="happy.js"></script>
+        <script src="tooltip.js"></script>
+
+        <script type="text/javascript">
+            var nWeeks = 52;
+            var nMsPerDay = 3600 * 24 * 1000;
+            var nMsPerWeek = 7 * nMsPerDay;
+            var QSParams;
+
+            var birthday;
+            var birthdayString;
+            var birthdayDate;
+
+            var lifespan;
+
+            var age;
+            var ageYears;
+            var remainder;
+
+            var previousYears;
+            var futureYears;
+            var remainderWeeks;
+            var restOfYearWeeks;
+
+            function validateBirthday(birthday) {
+                var birthdayPattern = /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/;
+                return birthdayPattern.test( $("#birthday").val());
+            }
+
+            function validateLifespan(lifespan) {
+                var lifespanPattern = /^[0-9]{1,3}$/;
+                return lifespanPattern.test( $("#lifespan").val());
+            }
+
+            // Read a page's GET URL variables and return them as an associative array.
+            // From http://jquery-howto.blogspot.ca/2009/09/get-url-parameters-values-with-jquery.html
+            function getQSParams()
+            {
+                var vars = [], hash;
+                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+                for(var i = 0; i < hashes.length; i++)
+                {
+                    hash = hashes[i].split('=');
+                    vars.push(hash[0]);
+                    vars[hash[0]] = hash[1];
+                }
+                return vars;
+            }
+
+            function isLeapYear(year) {
+                var d = new Date(year, 1, 28);
+                d.setDate(d.getDate() + 1);
+                return d.getMonth() == 1;
+            }
+
+            function getAge(date) {
+                var d = new Date(date), now = new Date();
+                var years = now.getFullYear() - d.getFullYear();
+                d.setFullYear(d.getFullYear() + years);
+                if (d > now) {
+                    years--;
+                    d.setFullYear(d.getFullYear() - 1);
+                }
+                var days = (now.getTime() - d.getTime()) / nMsPerDay;
+                return years + days / (isLeapYear(now.getFullYear()) ? 366 : 365);
+            }
+
+            function getCalendar(d, week, year) {
+                var c = new Date(d);
+                c.setFullYear(d.getFullYear() + year);
+                c.setTime(c.getTime() + (week * nMsPerWeek)); 
+                return c;
+            }
+
+            function getWeekYearCal(e, week) {
+                var yearParent = e.parentNode;
+                var calParent = yearParent.parentNode;
+                var year;
+                for (year = 0; year < calParent.childNodes.length; year++) {
+                    if (calParent.childNodes[year] === yearParent) {
+                        break;
+                    }
+                }
+                var cal = getCalendar(birthdayDate, week, year);
+                return {
+                    week: week,
+                    year: year,
+                    cal: cal,
+                }
+            }
+
+            function loop(x, f) {
+                for (var i = 0; i < x; f(i++));
+            }
+
+            function mapLoop(x, f) {
+                var ret = [];
+                for (var i = 0; i < x; i++) {
+                  ret.push(f(i));
+                }
+                return ret;
+            }
+
+            function cycleColors(e) {
+                var colors = [
+                    undefined,
+                    "black",
+                    "red",
+                    "green",
+                    "blue",
+                    "white",
+                ];
+
+                var i = 0;
+                for (; i < colors.length, colors[i] != e._fill_color; i++);
+                e._fill_color = colors[(i + 1) % colors.length];
+                if (e._fill_color != undefined) {
+                    e.setAttribute("style", "background-color: " + e._fill_color);
+                } else {
+                    e.setAttribute("style", undefined);
+                }
+            }
+
+            function _createElement(tagName, className) {
+                var e = document.createElement(tagName);
+                if (className) {
+                    e.className = className;
+                }
+                return e;
+            }
+
+            function weekElem(className) {
+                return _createElement("td", className);
+            }
+
+            function yearElem(className) {
+                return _createElement("tr", className);
+            }
+
+            function yearWeekElems() {
+                return mapLoop(nWeeks, function(i) {
+                    var e = weekElem();
+                    addWeekMouseEvents(e, i);
+                    return e;
+                });
+            }
+
+            function addWeekMouseEvents(e, i) {
+                e.addEventListener("mouseover", function(evt) {
+                    var wyc = getWeekYearCal(e, i);
+                    var calYear = wyc.cal.getFullYear();
+                    var calMonth = wyc.cal.getMonth() + 1;
+                    var calDay = wyc.cal.getDate();
+                    createTooltip(evt, calYear + '-' + calMonth + '-' + calDay, "(Week: " + wyc.week + ", Year: " + wyc.year + ")");
+                });
+                e.addEventListener("click", function() {
+                    cycleColors(e);
+                });
+            }
+
+            $( document ).ready(function() {
+                $( "#settingsForm" ).isHappy({
+                    fields: {
+                        '#birthday': {
+                            required: true,
+                            test: validateBirthday,
+                            message: 'Please enter your birthday (like YYYY-MM-DD).'
+                        },
+                        '#lifespan': {
+                            required: true,
+                            test: validateLifespan,
+                            message: 'Please enter your expected lifespan (like 90)'
+                        }
+                    }
+                });
+
+                QSParams = getQSParams();
+
+                if(!("birthday" in QSParams) | !("lifespan" in QSParams)) {
+                    // Show the form
+                    $("#welcome").css("display", "block");
+
+                    // Give the first field focus
+                    $("#birthday").focus();
+                    return;
+                }
+
+                $("body").append( '<table id="calendar"></table>' );
+
+                birthday = QSParams["birthday"];
+                birthdayString = birthday + "T00:00:00";
+                birthdayDate = new Date(birthdayString);
+
+                lifespan = QSParams["lifespan"];
+
+                age = getAge(birthdayDate);
+                ageYears = Math.floor(age);
+                remainder = age - ageYears;
+
+                previousYears = (ageYears).toFixed(0);
+
+                if( lifespan > ageYears) {
+                    futureYears = lifespan - ageYears - 1;
+                    remainderWeeks = Math.floor(remainder * nWeeks);
+                    restOfYearWeeks = Math.ceil(nWeeks - remainderWeeks) - 1;
+                } else {
+                    futureYears = 0;
+                    remainderWeeks = nWeeks;
+                    restOfYearWeeks = 0;
+                }
+
+                // Fill in lived years
+                loop(previousYears, function() {
+                    var tr = yearElem("previous");
+                    $(tr).append(yearWeekElems());
+                    $("#calendar").append(tr);
+                })
+
+                // Fill in the current birth-year (the number of weeks elapsed since the most recent birthday.)
+                var current_tr = yearElem("current");
+                loop(remainderWeeks, function(i) {
+                    var e = weekElem("partial");
+                    addWeekMouseEvents(e, i);
+                    $(current_tr).append(e);
+                })
+                var e = weekElem("today");
+                addWeekMouseEvents(e, remainderWeeks);
+                $(current_tr).append(e);
+                loop(restOfYearWeeks, function(i) {
+                    var e = weekElem("future");
+                    addWeekMouseEvents(e, remainderWeeks + 1 + i);
+                    $(current_tr).append(e);
+                })
+                $("#calendar").append(current_tr);
+
+                // Fill in future years
+                loop(futureYears, function() {
+                    var tr = yearElem("future");
+                    $(tr).append(yearWeekElems());
+                    $("#calendar").append(tr);
+                })
+            });
+        </script>
+    </head>
+    <body>
+        <div id="welcome">
+            <h1>Life Calendar</h1>
+            <p>
+                A minimalist life calendar. Shows the number of weeks you've lived and the number of weeks you
+                have left.
+            </p>
+            <form method="get" action="" id="settingsForm">
+                <p>
+                    <label for="birthday">Birthday:
+                        <input class="settings" id="birthday" name="birthday" placeholder="1985-01-01"/>
+                    </label>
+                </p>
+                <p>
+                    <label for="lifespan">Life expectancy:
+                        <input class="settings" id="lifespan" name="lifespan" placeholder="90"/>
+                    </label>
+                </p>
+                <p>
+                    <input type="submit" id="submit" value="Show calendar" />
+                </p>
+            </form>
+            <div id="footer">
+                <p>
+                    Based on <a href="http://waitbutwhy.com/2014/05/life-weeks.html">Your Life in Weeks</a>
+                    and <a href="http://count.life">count.life</a>.
+                </p>
+            </div>
+        </div>
+    </body>
+</html>
diff -r ff0878207f0e -r 256b8df1c686 life_calendar/tooltip.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/life_calendar/tooltip.js	Fri Jun 17 22:24:17 2016 -0700
@@ -0,0 +1,58 @@
+// Based on http://matthias-schuetz.js.org/tooltip.js/
+
+var _tt_options = {
+	tooltipId: "tooltip",
+	offsetDefault: 15
+};
+
+function getTooltipElm() {
+	return document.querySelector("#" + _tt_options.tooltipId);
+}
+
+function adjustTooltip(evt, tooltipElm, title, text) {
+	var offset = _tt_options.offsetDefault;
+	var scrollY = window.scrollY || window.pageYOffset;
+	var scrollX = window.scrollX || window.pageXOffset;
+	var tooltipTop = evt.pageY + offset;
+	var tooltipLeft = evt.pageX + offset;
+
+	tooltipTop = (tooltipTop - scrollY + tooltipElm.offsetHeight + 20 >= window.innerHeight ? (tooltipTop - tooltipElm.offsetHeight - 20) : tooltipTop);
+	tooltipLeft = (tooltipLeft - scrollX + tooltipElm.offsetWidth + 20 >= window.innerWidth ? (tooltipLeft - tooltipElm.offsetWidth - 20) : tooltipLeft);
+
+	tooltipElm.style.top = tooltipTop + "px";
+	tooltipElm.style.left = tooltipLeft + "px";
+
+	setTooltipText(tooltipElm, title, text);
+}
+
+function removeTooltip() {
+	document.querySelector("body").removeChild(getTooltipElm());
+}
+
+function createTooltip(evt, title, text) {
+	var tooltipElm = getTooltipElm();
+
+	if (!tooltipElm) {
+		tooltipElm = document.createElement("div");
+		tooltipElm.appendChild(document.createElement("h1"));
+		tooltipElm.appendChild(document.createElement("h2"));
+
+		tooltipElm.style.position = "absolute";
+		tooltipElm.setAttribute("id", _tt_options.tooltipId);
+
+		document.querySelector("body").appendChild(tooltipElm);
+	}
+
+	adjustTooltip(evt, tooltipElm, title, text);
+}
+
+function setTooltipText(tooltipElm, title, text) {
+	var eTitle = tooltipElm.children[0];
+	var eText = tooltipElm.children[1];
+	if (eTitle && title) {
+		eTitle.textContent = title;
+	}
+	if (eText && text) {
+		eText.textContent = text;
+	}
+}