1/*
2	Lightbox JS: Fullsize Image Overlays
3	by Lokesh Dhakar - http://www.huddletogether.com
4
5	For more information on this script, visit:
6	http://huddletogether.com/projects/lightbox/
7
8	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
9	(basically, do anything you want, just leave my name and link)
10
11	Table of Contents
12	-----------------
13	Configuration
14
15	Functions
16	- getPageScroll()
17	- getPageSize()
18	- pause()
19	- getKey()
20	- listenKey()
21	- showLightbox()
22	- hideLightbox()
23	- initLightbox()
24	- addLoadEvent()
25
26	Function Calls
27	- addLoadEvent(initLightbox)
28
29*/
30
31
32
33//
34// Configuration
35//
36
37// If you would like to use a custom loading image or close button reference them in the next two lines.
38// DOKU_BASE should be available here
39var loadingImage = DOKU_BASE.concat('lib/plugins/lightbox/loading.gif');
40var closeButton = DOKU_BASE.concat('lib/plugins/lightbox/close.gif');
41
42
43//
44// getPageScroll()
45// Returns array with x,y page scroll values.
46// Core code from - quirksmode.org
47//
48function getPageScroll(){
49
50	var yScroll;
51
52	if (self.pageYOffset) {
53		yScroll = self.pageYOffset;
54	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
55		yScroll = document.documentElement.scrollTop;
56	} else if (document.body) {// all other Explorers
57		yScroll = document.body.scrollTop;
58	}
59
60	arrayPageScroll = ['',yScroll];
61	return arrayPageScroll;
62}
63
64
65
66//
67// getPageSize()
68// Returns array with page width, height and window width, height
69// Core code from - quirksmode.org
70// Edit for Firefox by pHaez
71//
72function getPageSize(){
73
74	var xScroll, yScroll;
75
76	if (window.innerHeight && window.scrollMaxY) {
77		xScroll = document.body.scrollWidth;
78		yScroll = window.innerHeight + window.scrollMaxY;
79	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
80		xScroll = document.body.scrollWidth;
81		yScroll = document.body.scrollHeight;
82	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
83		xScroll = document.body.offsetWidth;
84		yScroll = document.body.offsetHeight;
85	}
86
87	var windowWidth, windowHeight;
88	if (self.innerHeight) {	// all except Explorer
89		windowWidth = self.innerWidth;
90		windowHeight = self.innerHeight;
91	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
92		windowWidth = document.documentElement.clientWidth;
93		windowHeight = document.documentElement.clientHeight;
94	} else if (document.body) { // other Explorers
95		windowWidth = document.body.clientWidth;
96		windowHeight = document.body.clientHeight;
97	}
98
99	// for small pages with total height less then height of the viewport
100	if(yScroll < windowHeight){
101		pageHeight = windowHeight;
102	} else {
103		pageHeight = yScroll;
104	}
105
106	// for small pages with total width less then width of the viewport
107	if(xScroll < windowWidth){
108		pageWidth = windowWidth;
109	} else {
110		pageWidth = xScroll;
111	}
112
113
114	arrayPageSize = [pageWidth,pageHeight,windowWidth,windowHeight];
115	return arrayPageSize;
116}
117
118
119//
120// pause(numberMillis)
121// Pauses code execution for specified time. Uses busy code, not good.
122// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
123//
124function pause(numberMillis) {
125	var now = new Date();
126	var exitTime = now.getTime() + numberMillis;
127	while (true) {
128		now = new Date();
129		if (now.getTime() > exitTime) {
130			return;
131    }
132	}
133}
134
135//
136// getKey(key)
137// Gets keycode. If 'x' is pressed then it hides the lightbox.
138//
139
140function getKey(e){
141	if (e == null) { // ie
142		keycode = event.keyCode;
143	} else { // mozilla
144		keycode = e.which;
145	}
146	key = String.fromCharCode(keycode).toLowerCase();
147
148	if(key == 'x'){ hideLightbox(); }
149}
150
151
152//
153// listenKey()
154//
155function listenKey () {	document.onkeypress = getKey; }
156
157
158//
159// showLightbox()
160// Preloads images. Pleaces new image in lightbox then centers and displays.
161//
162function showLightbox(objLink)
163{
164	// prep objects
165	var objOverlay = document.getElementById('overlay');
166	var objLightbox = document.getElementById('lightbox');
167	var objCaption = document.getElementById('lightboxCaption');
168	var objImage = document.getElementById('lightboxImage');
169	var objLoadingImage = document.getElementById('loadingImage');
170	var objLightboxDetails = document.getElementById('lightboxDetails');
171
172
173	var arrayPageSize = getPageSize();
174	var arrayPageScroll = getPageScroll();
175
176	// center loadingImage if it exists
177	if (objLoadingImage) {
178		objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
179		objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
180		objLoadingImage.style.display = 'block';
181	}
182
183	// set height of Overlay to take up whole page and show
184	objOverlay.style.height = (arrayPageSize[1] + 'px');
185	objOverlay.style.display = 'block';
186
187	// preload image
188	imgPreload = new Image();
189
190	imgPreload.onload=function() {
191		objImage.src = objLink.href;
192
193		// center lightbox and make sure that the top and left values are not negative
194		// and the image placed outside the viewport
195		//var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
196    // Dustin: Modified top so image shows 50px from top of page
197    var lightboxTop = arrayPageScroll[1] + 50;
198		var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
199
200		objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
201		objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
202
203
204		objLightboxDetails.style.width = imgPreload.width + 'px';
205
206		if(objLink.getAttribute('title')){
207			objCaption.style.display = 'block';
208			//objCaption.style.width = imgPreload.width + 'px';
209			objCaption.innerHTML = objLink.getAttribute('title');
210		} else {
211			objCaption.style.display = 'none';
212		}
213
214		// A small pause between the image loading and displaying is required with IE,
215		// this prevents the previous image displaying for a short burst causing flicker.
216		if (navigator.appVersion.indexOf("MSIE")!=-1){
217			pause(250);
218		}
219
220		if (objLoadingImage) {	objLoadingImage.style.display = 'none'; }
221
222		// Hide select boxes as they will 'peek' through the image in IE
223		selects = document.getElementsByTagName("select");
224        for (i = 0; i != selects.length; i++) {
225                selects[i].style.visibility = "hidden";
226        }
227
228
229		objLightbox.style.display = 'block';
230
231		// After image is loaded, update the overlay height as the new image might have
232		// increased the overall page height.
233		arrayPageSize = getPageSize();
234		objOverlay.style.height = (arrayPageSize[1] + 'px');
235
236		// Check for 'x' keypress
237		listenKey();
238
239		return false;
240	};
241
242	imgPreload.src = objLink.href;
243
244}
245
246
247
248
249
250//
251// hideLightbox()
252//
253function hideLightbox()
254{
255	// get objects
256	objOverlay = document.getElementById('overlay');
257	objLightbox = document.getElementById('lightbox');
258
259	// hide lightbox and overlay
260	objOverlay.style.display = 'none';
261	objLightbox.style.display = 'none';
262
263	// make select boxes visible
264	selects = document.getElementsByTagName("select");
265    for (i = 0; i != selects.length; i++) {
266		selects[i].style.visibility = "visible";
267	}
268
269	// disable keypress listener
270	document.onkeypress = '';
271}
272
273
274
275
276//
277// initLightbox()
278// Function runs on window load, going through link tags looking for rel="lightbox".
279// These links receive onclick events that enable the lightbox display for their targets.
280// The function also inserts html markup at the top of the page which will be used as a
281// container for the overlay pattern and the inline image.
282//
283function initLightbox()
284{
285
286	if (!document.getElementsByTagName){ return; }
287	var anchors = document.getElementsByTagName("a");
288
289	// loop through all anchor tags
290	for (var i=0; i<anchors.length; i++){
291		var anchor = anchors[i];
292
293		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
294			anchor.onclick = function () {showLightbox(this); return false;};
295		}
296	}
297
298  // Dustin: Added to handle multilpe inits per page i.e. on xhr content return
299  if (document.getElementById("overlay") != undefined) { return; }
300
301	// the rest of this code inserts html at the top of the page that looks like this:
302	//
303	// <div id="overlay">
304	//		<a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
305	//	</div>
306	// <div id="lightbox">
307	//		<a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
308	//			<img id="closeButton" />
309	//			<img id="lightboxImage" />
310	//		</a>
311	//		<div id="lightboxDetails">
312	//			<div id="lightboxCaption"></div>
313	//			<div id="keyboardMsg"></div>
314	//		</div>
315	// </div>
316
317	var objBody = document.getElementsByTagName("body").item(0);
318
319	// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
320	var objOverlay = document.createElement("div");
321	objOverlay.setAttribute('id','overlay');
322	objOverlay.onclick = function () {hideLightbox(); return false;};
323	objOverlay.style.display = 'none';
324	objOverlay.style.position = 'absolute';
325	objOverlay.style.top = '0';
326	objOverlay.style.left = '0';
327	objOverlay.style.zIndex = '90';
328 	objOverlay.style.width = '100%';
329	objBody.insertBefore(objOverlay, objBody.firstChild);
330
331	//var arrayPageSize = getPageSize();
332	//var arrayPageScroll = getPageScroll();
333
334	// preload and create loader image
335	var imgPreloader = new Image();
336
337	// if loader image found, create link to hide lightbox and create loadingimage
338	imgPreloader.onload=function() {
339
340		var objLoadingImageLink = document.createElement("a");
341		objLoadingImageLink.setAttribute('href','#');
342		objLoadingImageLink.onclick = function () {hideLightbox(); return false;};
343		objOverlay.appendChild(objLoadingImageLink);
344
345		var objLoadingImage = document.createElement("img");
346		objLoadingImage.src = loadingImage;
347		objLoadingImage.setAttribute('id','loadingImage');
348		objLoadingImage.style.position = 'absolute';
349		objLoadingImage.style.zIndex = '150';
350		objLoadingImageLink.appendChild(objLoadingImage);
351
352		imgPreloader.onload=function(){};	//	clear onLoad, as IE will flip out w/animated gifs
353
354		return false;
355	};
356
357	imgPreloader.src = loadingImage;
358
359	// create lightbox div, same note about styles as above
360	var objLightbox = document.createElement("div");
361	objLightbox.setAttribute('id','lightbox');
362	objLightbox.style.display = 'none';
363	objLightbox.style.position = 'absolute';
364	objLightbox.style.zIndex = '100';
365	objBody.insertBefore(objLightbox, objOverlay.nextSibling);
366
367	// create link
368	var objLink = document.createElement("a");
369	objLink.setAttribute('href','#');
370	objLink.setAttribute('title','Click to close');
371	objLink.onclick = function () {hideLightbox(); return false;};
372	objLightbox.appendChild(objLink);
373
374	// preload and create close button image
375	var imgPreloadCloseButton = new Image();
376
377	// if close button image found,
378	imgPreloadCloseButton.onload=function(){
379
380		var objCloseButton = document.createElement("img");
381		objCloseButton.src = closeButton;
382		objCloseButton.setAttribute('id','closeButton');
383		objCloseButton.style.position = 'absolute';
384		objCloseButton.style.zIndex = '200';
385		objLink.appendChild(objCloseButton);
386
387		return false;
388	};
389
390	imgPreloadCloseButton.src = closeButton;
391
392	// create image
393	var objImage = document.createElement("img");
394	objImage.setAttribute('id','lightboxImage');
395	objLink.appendChild(objImage);
396
397	// create details div, a container for the caption and keyboard message
398	var objLightboxDetails = document.createElement("div");
399	objLightboxDetails.setAttribute('id','lightboxDetails');
400	objLightbox.appendChild(objLightboxDetails);
401
402	// create caption
403	var objCaption = document.createElement("div");
404	objCaption.setAttribute('id','lightboxCaption');
405	objCaption.style.display = 'none';
406	objLightboxDetails.appendChild(objCaption);
407
408	// create keyboard message
409	var objKeyboardMsg = document.createElement("div");
410	objKeyboardMsg.setAttribute('id','keyboardMsg');
411	objKeyboardMsg.innerHTML = 'Click Image To Close'; //  <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
412	objLightboxDetails.appendChild(objKeyboardMsg);
413
414
415}
416
417jQuery(function(){
418    initLightbox();
419});
420