1.1 --- a/life_calendar/index.html	Sat Jul 23 15:25:44 2016 -0600
     1.2 +++ b/life_calendar/index.html	Sat Sep 17 00:11:41 2016 -0700
     1.3 @@ -79,6 +79,12 @@
     1.4                  margin: 1px;
     1.5              }
     1.6  
     1.7 +            div#tooltip h3 {
     1.8 +                color: #333333;
     1.9 +                font-size: 0.8em;
    1.10 +                margin: 2px;
    1.11 +            }
    1.12 +
    1.13              td {
    1.14                  border-color: #FFFFFF;
    1.15              }
    1.16 @@ -133,6 +139,10 @@
    1.17              var remainderWeeks;
    1.18              var restOfYearWeeks;
    1.19  
    1.20 +            var selecting = false;
    1.21 +            var start_wyc = null;
    1.22 +            var end_wyc = null;
    1.23 +
    1.24              function validateBirthday(birthday) {
    1.25                  var birthdayPattern = /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/;
    1.26                  return birthdayPattern.test( $("#birthday").val());
    1.27 @@ -192,14 +202,18 @@
    1.28                          break;
    1.29                      }
    1.30                  }
    1.31 -                var cal = getCalendar(birthdayDate, week, year);
    1.32                  return {
    1.33                      week: week,
    1.34                      year: year,
    1.35 -                    cal: cal,
    1.36 +                    cal: getCalendar(birthdayDate, week, year),
    1.37 +                    weeks: nWeeks*year + week,
    1.38                  }
    1.39              }
    1.40  
    1.41 +            function inSpan(x, s, e) {
    1.42 +                return x >= s && x <= e;
    1.43 +            }
    1.44 +
    1.45              function loop(x, f) {
    1.46                  for (var i = 0; i < x; f(i++));
    1.47              }
    1.48 @@ -212,6 +226,41 @@
    1.49                  return ret;
    1.50              }
    1.51  
    1.52 +            function setStyle(e) {
    1.53 +                var styles = [];
    1.54 +
    1.55 +                if (e["_fill_color"] != undefined) {
    1.56 +                    styles.push("background-color: " + e._fill_color);
    1.57 +                } 
    1.58 +                if (e["_border_color"] != undefined) {
    1.59 +                    styles.push("border-color: " + e._border_color);
    1.60 +                }
    1.61 +
    1.62 +                if (styles.length == 0) {
    1.63 +                    e.setAttribute("style", undefined);
    1.64 +                } else {
    1.65 +                    e.setAttribute("style", styles.join('; '));
    1.66 +                }
    1.67 +            }
    1.68 +
    1.69 +            function highlightDistance(e0, e1_wyc, e2_wyc) {
    1.70 +                var calParent = e0.parentNode.parentNode;
    1.71 +                var min_wyc = (e1_wyc.weeks <= e2_wyc.weeks) ? e1_wyc : e2_wyc;
    1.72 +                var max_wyc = (e2_wyc == min_wyc) ? e1_wyc : e2_wyc;
    1.73 +                for (var year = 0; year < lifespan; year++) {
    1.74 +                    for (var week = 0; week < nWeeks; week++) {
    1.75 +                        w = nWeeks*year + week;
    1.76 +                        e = calParent.childNodes[year].childNodes[week]  
    1.77 +                        if (inSpan(w, min_wyc.weeks, max_wyc.weeks)) {
    1.78 +                            e._border_color = "black";
    1.79 +                        } else {
    1.80 +                            e._border_color = undefined;
    1.81 +                        }
    1.82 +                        setStyle(e);
    1.83 +                    }
    1.84 +                }
    1.85 +            }
    1.86 +
    1.87              function cycleColors(e) {
    1.88                  var colors = [
    1.89                      undefined,
    1.90 @@ -225,11 +274,7 @@
    1.91                  var i = 0;
    1.92                  for (; i < colors.length, colors[i] != e._fill_color; i++);
    1.93                  e._fill_color = colors[(i + 1) % colors.length];
    1.94 -                if (e._fill_color != undefined) {
    1.95 -                    e.setAttribute("style", "background-color: " + e._fill_color);
    1.96 -                } else {
    1.97 -                    e.setAttribute("style", undefined);
    1.98 -                }
    1.99 +                setStyle(e);
   1.100              }
   1.101  
   1.102              function _createElement(tagName, className) {
   1.103 @@ -262,10 +307,40 @@
   1.104                      var calYear = wyc.cal.getFullYear();
   1.105                      var calMonth = wyc.cal.getMonth() + 1;
   1.106                      var calDay = wyc.cal.getDate();
   1.107 -                    createTooltip(evt, calYear + '-' + calMonth + '-' + calDay, "(Week: " + wyc.week + ", Year: " + wyc.year + ")");
   1.108 +                    var title = calYear + '-' + calMonth + '-' + calDay;
   1.109 +                    var text = "(Week: " + wyc.week + ", Year: " + wyc.year + ")";
   1.110 +                    var subtext = null;
   1.111 +                    if (selecting) {
   1.112 +                        end_wyc = wyc;
   1.113 +                        highlightDistance(e, start_wyc, end_wyc);
   1.114 +                    }
   1.115 +                    if (start_wyc && end_wyc) {
   1.116 +                        var min_wyc = (start_wyc.weeks <= end_wyc.weeks) ? start_wyc : end_wyc;
   1.117 +                        var max_wyc = (end_wyc == min_wyc) ? start_wyc : end_wyc;
   1.118 +                        if (inSpan(wyc.weeks, min_wyc.weeks, max_wyc.weeks)) {
   1.119 +                            var sel_weeks = max_wyc.weeks - min_wyc.weeks;
   1.120 +                            var sel_years = sel_weeks/nWeeks;
   1.121 +                            subtext = "[Selected: weeks: " + sel_weeks + " years: " + sel_years.toFixed(2) + "]";
   1.122 +                        }
   1.123 +                    }
   1.124 +                    createTooltip(evt, title, text, subtext);
   1.125                  });
   1.126                  e.addEventListener("click", function() {
   1.127 -                    cycleColors(e);
   1.128 +                    var wyc = getWeekYearCal(e, i);
   1.129 +                    highlightDistance(e, wyc, wyc);
   1.130 +                    if (start_wyc && end_wyc) {
   1.131 +                        start_wyc = null;
   1.132 +                        end_wyc = null;
   1.133 +                    } else {
   1.134 +                        cycleColors(e);
   1.135 +                    }
   1.136 +                });
   1.137 +                e.addEventListener("mousedown", function() {
   1.138 +                    selecting = true;
   1.139 +                    start_wyc = getWeekYearCal(e, i);
   1.140 +                });
   1.141 +                e.addEventListener("mouseup", function() {
   1.142 +                    selecting = false;
   1.143                  });
   1.144              }
   1.145