From a7faf0986bdc654579b0b10ac6cfdcb840fafe1e Mon Sep 17 00:00:00 2001
From: Gunther Brunner <gunta85@gmail.com>
Date: Mon, 4 Aug 2014 21:57:49 +0900
Subject: [PATCH] Clicking the small image on Device List now shows the big
 device image.

---
 res/app/device-list/device-column-service.js  |  1 +
 .../device-list-details-directive.js          | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/res/app/device-list/device-column-service.js b/res/app/device-list/device-column-service.js
index edb6f8a3..6f3a5cb6 100644
--- a/res/app/device-list/device-column-service.js
+++ b/res/app/device-list/device-column-service.js
@@ -396,6 +396,7 @@ function DeviceModelCell(options) {
         , image = document.createElement('img')
         , a = document.createElement('a')
       span.className = 'device-small-image'
+      image.className = 'device-small-image-img pointer'
       span.appendChild(image)
       td.appendChild(span)
       a.appendChild(document.createTextNode(''))
diff --git a/res/app/device-list/device-list-details-directive.js b/res/app/device-list/device-list-details-directive.js
index 6c09f5d3..599e8482 100644
--- a/res/app/device-list/device-list-details-directive.js
+++ b/res/app/device-list/device-list-details-directive.js
@@ -6,6 +6,7 @@ module.exports = function DeviceListDetailsDirective(
 , DeviceColumnService
 , GroupService
 , $rootScope
+, LightboxImageService
 ) {
   return {
     restrict: 'E'
@@ -41,7 +42,7 @@ module.exports = function DeviceListDetailsDirective(
         })
       }
 
-      element.on('click', function (e) {
+      function checkDeviceStatus (e) {
         if (e.target.classList.contains('device-status')) {
           var id = e.target.parentNode.parentNode.id
           var device = mapping[id]
@@ -60,6 +61,22 @@ module.exports = function DeviceListDetailsDirective(
             e.preventDefault()
           }
         }
+      }
+
+      function checkDeviceSmallImage(e) {
+        if (e.target.classList.contains('device-small-image-img')) {
+          var id = e.target.parentNode.parentNode.parentNode.id
+          var device = mapping[id]
+
+          var title = device.name
+          var enhancedPhoto800 = '/static/app/devices/photo/x800/' + device.image
+          LightboxImageService.open(title, enhancedPhoto800)
+        }
+      }
+
+      element.on('click', function (e) {
+        checkDeviceStatus(e)
+        checkDeviceSmallImage(e)
       })
 
       // Import column definitions