1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Exponent</title>
5    <meta charset="UTF-8">
6    <style type="text/css">
7      * {
8        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
9        font-weight: 300;
10      }
11      .language {
12
13      }
14      .deviceName {
15        display: block;
16        font-size: 30px;
17        padding-bottom: 24px;
18        padding-top: 45px;
19      }
20      .screenshot {
21        cursor: pointer;
22        border: 1px #EEE solid;
23        z-index: 0;
24      }
25      th {
26        text-align: left;
27      }
28      td {
29        text-align: center;
30        min-width: 200px;
31      }
32      #overlay {
33        position:fixed;
34        top:0;
35        left:0;
36        background:rgba(0,0,0,0.8);
37        z-index:5;
38        width:100%;
39        height:100%;
40        display:none;
41        cursor: zoom-out;
42        text-align: center;
43      }
44      #imageDisplay {
45        height: auto;
46        width: auto;
47        z-index: 10;
48        cursor: pointer;
49      }
50      #imageInfo {
51        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
52        border-radius: 5px;
53        color: white;
54        margin: 20px;
55        padding: 10px;
56        position: absolute;
57        right: 0;
58        top: 0;
59        width: 250px;
60        z-index: -1;
61      }
62      #imageInfo:hover {
63        z-index: 20;
64      }
65    </style>
66  </head>
67  <body>
68
69
70
71
72
73
74      <h1 class="language">en-US</h1>
75      <hr>
76      <table>
77
78          <tr>
79            <th colspan="2">
80              <span class="deviceName">iPhone 4 (Portrait)</span>
81            </th>
82          </tr>
83          <tr>
84
85
86              <td>
87
88
89                <a href="./en-US/en-US-iPhone4-0-Intro-portrait.png" target="_blank" class="screenshotLink">
90                  <img class="screenshot"
91                         src="./en-US/en-US-iPhone4-0-Intro-portrait.png"
92                       style="width: 100%;"
93                         alt="en-US iPhone 4 (Portrait)"
94                data-counter="1" />
95                </a>
96              </td>
97
98
99              <td>
100
101
102                <a href="./en-US/en-US-iPhone4-1-Welcome-portrait.png" target="_blank" class="screenshotLink">
103                  <img class="screenshot"
104                         src="./en-US/en-US-iPhone4-1-Welcome-portrait.png"
105                       style="width: 100%;"
106                         alt="en-US iPhone 4 (Portrait)"
107                data-counter="2" />
108                </a>
109              </td>
110
111          </tr>
112
113          <tr>
114            <th colspan="2">
115              <span class="deviceName">iPhone 5 (Portrait)</span>
116            </th>
117          </tr>
118          <tr>
119
120
121              <td>
122
123
124                <a href="./en-US/en-US-iPhone5-0-Intro-portrait.png" target="_blank" class="screenshotLink">
125                  <img class="screenshot"
126                         src="./en-US/en-US-iPhone5-0-Intro-portrait.png"
127                       style="width: 100%;"
128                         alt="en-US iPhone 5 (Portrait)"
129                data-counter="3" />
130                </a>
131              </td>
132
133
134              <td>
135
136
137                <a href="./en-US/en-US-iPhone5-1-Welcome-portrait.png" target="_blank" class="screenshotLink">
138                  <img class="screenshot"
139                         src="./en-US/en-US-iPhone5-1-Welcome-portrait.png"
140                       style="width: 100%;"
141                         alt="en-US iPhone 5 (Portrait)"
142                data-counter="4" />
143                </a>
144              </td>
145
146          </tr>
147
148          <tr>
149            <th colspan="2">
150              <span class="deviceName">iPhone 6 (Portrait)</span>
151            </th>
152          </tr>
153          <tr>
154
155
156              <td>
157
158
159                <a href="./en-US/en-US-iPhone6-0-Intro-portrait.png" target="_blank" class="screenshotLink">
160                  <img class="screenshot"
161                         src="./en-US/en-US-iPhone6-0-Intro-portrait.png"
162                       style="width: 100%;"
163                         alt="en-US iPhone 6 (Portrait)"
164                data-counter="5" />
165                </a>
166              </td>
167
168
169              <td>
170
171
172                <a href="./en-US/en-US-iPhone6-1-Welcome-portrait.png" target="_blank" class="screenshotLink">
173                  <img class="screenshot"
174                         src="./en-US/en-US-iPhone6-1-Welcome-portrait.png"
175                       style="width: 100%;"
176                         alt="en-US iPhone 6 (Portrait)"
177                data-counter="6" />
178                </a>
179              </td>
180
181          </tr>
182
183          <tr>
184            <th colspan="2">
185              <span class="deviceName">iPhone 6 Plus (Portrait)</span>
186            </th>
187          </tr>
188          <tr>
189
190
191              <td>
192
193
194                <a href="./en-US/en-US-iPhone6Plus-0-Intro-portrait.png" target="_blank" class="screenshotLink">
195                  <img class="screenshot"
196                         src="./en-US/en-US-iPhone6Plus-0-Intro-portrait.png"
197                       style="width: 100%;"
198                         alt="en-US iPhone 6 Plus (Portrait)"
199                data-counter="7" />
200                </a>
201              </td>
202
203
204              <td>
205
206
207                <a href="./en-US/en-US-iPhone6Plus-1-Welcome-portrait.png" target="_blank" class="screenshotLink">
208                  <img class="screenshot"
209                         src="./en-US/en-US-iPhone6Plus-1-Welcome-portrait.png"
210                       style="width: 100%;"
211                         alt="en-US iPhone 6 Plus (Portrait)"
212                data-counter="8" />
213                </a>
214              </td>
215
216          </tr>
217
218      </table>
219
220      <div id="overlay">
221        <img id="imageDisplay" src="" alt="" />
222        <div id="imageInfo"></div>
223      </div>
224      <script type="text/javascript">
225        var overlay        = document.getElementById('overlay');
226        var imageDisplay   = document.getElementById('imageDisplay');
227        var imageInfo      = document.getElementById('imageInfo');
228        var screenshotLink = document.getElementsByClassName('screenshotLink');
229
230        function doClick(el) {
231          if (document.createEvent) {
232            var evObj = document.createEvent('MouseEvents', true);
233            evObj.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
234            el.dispatchEvent(evObj);
235          } else if (document.createEventObject) { //IE
236            var evObj = document.createEventObject();
237            el.fireEvent('onclick', evObj);
238          }
239        }
240
241        for (index = 0; index < screenshotLink.length; ++index) {
242          screenshotLink[index].addEventListener('click', function(e) {
243            e.preventDefault();
244
245            var img = e.target;
246            if (e.target.tagName == 'A') {
247              img = e.target.children[0];
248            }
249
250            // beautify
251            var tmpImg = new Image();
252            tmpImg.src = img.src;
253            imageDisplay.style.height     = 'auto';
254            imageDisplay.style.width     = 'auto';
255            if (window.innerHeight < tmpImg.height) {
256              imageDisplay.style.height = document.documentElement.clientHeight+'px';
257            } else if (window.innerWidth < tmpImg.width) {
258              imageDisplay.style.width = document.documentElement.clientWidth;+'px';
259            } else {
260              imageDisplay.style.paddingTop = parseInt((window.innerHeight - tmpImg.height) / 2)+'px';
261            }
262
263            imageDisplay.src             = img.src;
264            imageDisplay.alt             = img.alt;
265            imageDisplay.dataset.counter = img.dataset.counter;
266
267            imageInfo.innerHTML          = '<h3>'+img.alt+'</h3>';
268            imageInfo.innerHTML         += img.src.split("/").pop();
269            imageInfo.innerHTML         += '<br />'+tmpImg.height+'&times;'+tmpImg.width+'px';
270
271            overlay.style.display        = "block";
272          });
273        }
274
275        imageDisplay.addEventListener('click', function(e) {
276          e.stopPropagation(); // !
277
278          overlay.style.display = "none";
279
280          img_counter = parseInt(e.target.dataset.counter) + 1;
281          try {
282            link = document.body.querySelector('img[data-counter="'+img_counter+'"]').parentNode;
283          } catch (e) {
284            try {
285              link = document.body.querySelector('img[data-counter="0"]').parentNode;
286            } catch (e) {
287              return false;
288            }
289          }
290          doClick(link);
291        });
292
293        overlay.addEventListener('click', function(e) {
294          overlay.style.display = "none";
295        })
296
297      function keyPressed(e) {
298        e = e || window.event;
299        var charCode = e.keyCode || e.which;
300        switch(charCode) {
301          case 27: // Esc
302            overlay.style.display = "none";
303            break;
304          case 34: // right-arrow, Page Down, keypad right, ...
305          case 39:
306          case 54:
307          case 102:
308            e.preventDefault();
309            doClick(imageDisplay);
310            break;
311          case 33: // left-arrow, Page Up, keypad right, ...
312          case 37:
313          case 52:
314          case 100:
315            e.preventDefault();
316            document.getElementById('imageDisplay').dataset.counter -= 2; // hacky
317            doClick(imageDisplay);
318            break;
319         }
320      };
321      document.body.addEventListener('keydown', keyPressed);
322      </script>
323  </body>
324</html>
325