From 01ae44d40e4ede0c5d0eb6551a3c86650e8ca375 Mon Sep 17 00:00:00 2001
From: Anthony Truskinger <anthony.truskinger@gmail.com>
Date: Tue, 10 Feb 2015 12:51:40 +1000
Subject: [PATCH] got zoom surface working

---
 .../eventDistribution/_eventDistribution.scss        |  1 +
 .../eventDistribution/distributionDetail.js          |  2 +-
 .../eventDistribution/distributionVisualisation.js   | 12 ++++++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
index 7e4a5e36..9dd582a4 100644
--- a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
+++ b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
@@ -91,6 +91,7 @@ event-distribution-visualisation {
 
           & div {
             font-size: 8pt;
+            color: white;
             height: 60px;
             width: 256px;
             @include vendor-prefix(transform, rotate(-90deg));
diff --git a/src/app/d3Bindings/eventDistribution/distributionDetail.js b/src/app/d3Bindings/eventDistribution/distributionDetail.js
index 04b8925b..6100b1b3 100644
--- a/src/app/d3Bindings/eventDistribution/distributionDetail.js
+++ b/src/app/d3Bindings/eventDistribution/distributionDetail.js
@@ -164,7 +164,7 @@ angular
                             fill: "white",
                             opacity: 1.0
                         })
-                        .classed("zoomSurface");
+                        .classed("zoomSurface", true);
 
                     // group for separator lines between lanes/categories
                     laneLinesGroup = main.append("g").classed("laneLinesGroup", true);
diff --git a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js
index 9a0010b9..701561df 100644
--- a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js
+++ b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js
@@ -172,13 +172,19 @@ angular
                     var style = {
                         top: 0,
                         left: left,
-                        width: tileSizePixels + "px"
+                        width: tileSizePixels + "px",
+
                     };
 
                     function getOffset(d) {
                         return d.offset.toISOString();
                     }
 
+                    function getTileImage(d, i) {
+                        var hourOfDay = d.offset.getHours();
+                        return "url(assets/temp/tiles/tile_" + hourOfDay + ".png)";
+                    }
+
                     // update old tiles
                     var tileElements = tiles.selectAll(".tile")
                         .data(visibleTiles, function (d) {
@@ -186,12 +192,14 @@ angular
                         });
 
                     // update old tiles
-                    tileElements.style("left", left);
+                    tileElements.style("left", left)
+                        .style("background-image", getTileImage);
 
                     // add new tiles
                     tileElements.enter()
                         .append("div")
                         .style(style)
+                        .style("background-image", getTileImage)
                         .classed("tile", true)
                         .append("div")
                         .text(getOffset);