Statistics
| Branch: | Tag: | Revision:

root / src / gr / grnet / pithos / web / public / lytebox.js @ 5e2c1280

History | View | Annotate | Download (38.6 kB)

1
//***********************************************************************************************************************************/
2
//        LyteBox v3.22
3
//
4
//         Author: Markus F. Hay
5
//  Website: http://www.dolem.com/lytebox
6
//           Date: October 2, 2007
7
//        License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
8
// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):
9
//                                * Firefox: 2.0.0.7, 1.5.0.12
10
//                                * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
11
//                                * Opera: 9.23
12
//
13
// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62
14
//                                * v3.22 (10/02/07)
15
//                                * v3.21 (09/30/07)
16
//                                * v3.20 (07/12/07)
17
//                                * v3.10 (05/28/07)
18
//                                * v3.00 (05/15/07)
19
//                                * v2.02 (11/13/06)
20
//
21
//   Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
22
//                         information please visit http://huddletogether.com/projects/lightbox2/
23
//***********************************************************************************************************************************/
24
Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
25
Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }
26
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }
27

    
28
function LyteBox() {
29
        /*** Start Global Configuration ***/
30
                this.theme                                = 'grey';        // themes: grey (default), red, green, blue, gold
31
                this.hideFlash                        = true;                // controls whether or not Flash objects should be hidden
32
                this.outerBorder                = true;                // controls whether to show the outer grey (or theme) border
33
                this.resizeSpeed                = 8;                // controls the speed of the image resizing (1=slowest and 10=fastest)
34
                this.maxOpacity                        = 80;                // higher opacity = darker overlay, lower opacity = lighter overlay
35
                this.navType                        = 1;                // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
36
                this.autoResize                        = true;                // controls whether or not images should be resized if larger than the browser window dimensions
37
                this.doAnimations                = true;                // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
38
                
39
                this.borderSize                        = 12;                // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
40
        /*** End Global Configuration ***/
41
        
42
        /*** Configure Slideshow Options ***/
43
                this.slideInterval                = 4000;                // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
44
                this.showNavigation                = true;                // true to display Next/Prev buttons/text during slideshow, false to hide
45
                this.showClose                        = true;                // true to display the Close button, false to hide
46
                this.showDetails                = true;                // true to display image details (caption, count), false to hide
47
                this.showPlayPause                = true;                // true to display pause/play buttons next to close button, false to hide
48
                this.autoEnd                        = true;                // true to automatically close Lytebox after the last image is reached, false to keep open
49
                this.pauseOnNextClick        = false;        // true to pause the slideshow when the "Next" button is clicked
50
        this.pauseOnPrevClick         = true;                // true to pause the slideshow when the "Prev" button is clicked
51
        /*** End Slideshow Configuration ***/
52
        
53
        if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
54
        if(this.resizeSpeed < 1) { resizeSpeed = 1; }
55
        this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
56
        this.resizeWTimerArray                = new Array();
57
        this.resizeWTimerCount                = 0;
58
        this.resizeHTimerArray                = new Array();
59
        this.resizeHTimerCount                = 0;
60
        this.showContentTimerArray        = new Array();
61
        this.showContentTimerCount        = 0;
62
        this.overlayTimerArray                = new Array();
63
        this.overlayTimerCount                = 0;
64
        this.imageTimerArray                = new Array();
65
        this.imageTimerCount                = 0;
66
        this.timerIDArray                        = new Array();
67
        this.timerIDCount                        = 0;
68
        this.slideshowIDArray                = new Array();
69
        this.slideshowIDCount                = 0;
70
        this.imageArray         = new Array();
71
        this.activeImage = null;
72
        this.slideArray         = new Array();
73
        this.activeSlide = null;
74
        this.frameArray         = new Array();
75
        this.activeFrame = null;
76
        this.checkFrame();
77
        this.isSlideshow = false;
78
        this.isLyteframe = false;
79
        /*@cc_on
80
                /*@if (@_jscript)
81
                        this.ie = (document.all && !window.opera) ? true : false;
82
                /*@else @*/
83
                        this.ie = false;
84
                /*@end
85
        @*/
86
        this.ie7 = (this.ie && window.XMLHttpRequest);        
87
        this.initialize();
88
}
89
LyteBox.prototype.initialize = function() {
90
        this.updateLyteboxItems();
91
        var objBody = this.doc.getElementsByTagName("body").item(0);        
92
        if (this.doc.getElementById('lbOverlay')) {
93
                objBody.removeChild(this.doc.getElementById("lbOverlay"));
94
                objBody.removeChild(this.doc.getElementById("lbMain"));
95
        }
96
        var objOverlay = this.doc.createElement("div");
97
                objOverlay.setAttribute('id','lbOverlay');
98
                objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
99
                if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) {
100
                        objOverlay.style.position = 'absolute';
101
                }
102
                objOverlay.style.display = 'none';
103
                objBody.appendChild(objOverlay);
104
        var objLytebox = this.doc.createElement("div");
105
                objLytebox.setAttribute('id','lbMain');
106
                objLytebox.style.display = 'none';
107
                objBody.appendChild(objLytebox);
108
        var objOuterContainer = this.doc.createElement("div");
109
                objOuterContainer.setAttribute('id','lbOuterContainer');
110
                objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
111
                objLytebox.appendChild(objOuterContainer);
112
        var objIframeContainer = this.doc.createElement("div");
113
                objIframeContainer.setAttribute('id','lbIframeContainer');
114
                objIframeContainer.style.display = 'none';
115
                objOuterContainer.appendChild(objIframeContainer);
116
        var objIframe = this.doc.createElement("iframe");
117
                objIframe.setAttribute('id','lbIframe');
118
                objIframe.setAttribute('name','lbIframe');
119
                objIframe.style.display = 'none';
120
                objIframeContainer.appendChild(objIframe);
121
        var objImageContainer = this.doc.createElement("div");
122
                objImageContainer.setAttribute('id','lbImageContainer');
123
                objOuterContainer.appendChild(objImageContainer);
124
        var objLyteboxImage = this.doc.createElement("img");
125
                objLyteboxImage.setAttribute('id','lbImage');
126
                objImageContainer.appendChild(objLyteboxImage);
127
        var objLoading = this.doc.createElement("div");
128
                objLoading.setAttribute('id','lbLoading');
129
                objOuterContainer.appendChild(objLoading);
130
        var objDetailsContainer = this.doc.createElement("div");
131
                objDetailsContainer.setAttribute('id','lbDetailsContainer');
132
                objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
133
                objLytebox.appendChild(objDetailsContainer);
134
        var objDetailsData =this.doc.createElement("div");
135
                objDetailsData.setAttribute('id','lbDetailsData');
136
                objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme);
137
                objDetailsContainer.appendChild(objDetailsData);
138
        var objDetails = this.doc.createElement("div");
139
                objDetails.setAttribute('id','lbDetails');
140
                objDetailsData.appendChild(objDetails);
141
        var objCaption = this.doc.createElement("span");
142
                objCaption.setAttribute('id','lbCaption');
143
                objDetails.appendChild(objCaption);
144
        var objHoverNav = this.doc.createElement("div");
145
                objHoverNav.setAttribute('id','lbHoverNav');
146
                objImageContainer.appendChild(objHoverNav);
147
        var objBottomNav = this.doc.createElement("div");
148
                objBottomNav.setAttribute('id','lbBottomNav');
149
                objDetailsData.appendChild(objBottomNav);
150
        var objPrev = this.doc.createElement("a");
151
                objPrev.setAttribute('id','lbPrev');
152
                objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme);
153
                objPrev.setAttribute('href','#');
154
                objHoverNav.appendChild(objPrev);
155
        var objNext = this.doc.createElement("a");
156
                objNext.setAttribute('id','lbNext');
157
                objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme);
158
                objNext.setAttribute('href','#');
159
                objHoverNav.appendChild(objNext);
160
        var objNumberDisplay = this.doc.createElement("span");
161
                objNumberDisplay.setAttribute('id','lbNumberDisplay');
162
                objDetails.appendChild(objNumberDisplay);
163
        var objNavDisplay = this.doc.createElement("span");
164
                objNavDisplay.setAttribute('id','lbNavDisplay');
165
                objNavDisplay.style.display = 'none';
166
                objDetails.appendChild(objNavDisplay);
167
        var objClose = this.doc.createElement("a");
168
                objClose.setAttribute('id','lbClose');
169
                objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme);
170
                objClose.setAttribute('href','#');
171
                objBottomNav.appendChild(objClose);
172
        var objPause = this.doc.createElement("a");
173
                objPause.setAttribute('id','lbPause');
174
                objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme);
175
                objPause.setAttribute('href','#');
176
                objPause.style.display = 'none';
177
                objBottomNav.appendChild(objPause);
178
        var objPlay = this.doc.createElement("a");
179
                objPlay.setAttribute('id','lbPlay');
180
                objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
181
                objPlay.setAttribute('href','#');
182
                objPlay.style.display = 'none';
183
                objBottomNav.appendChild(objPlay);
184
};
185
LyteBox.prototype.updateLyteboxItems = function() {        
186
        var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
187
        for (var i = 0; i < anchors.length; i++) {
188
                var anchor = anchors[i];
189
                var relAttribute = String(anchor.getAttribute('rel'));
190
                if (anchor.getAttribute('href')) {
191
                        if (relAttribute.toLowerCase().match('lytebox')) {
192
                                anchor.onclick = function () { myLytebox.start(this, false, false); return false; }
193
                        } else if (relAttribute.toLowerCase().match('lyteshow')) {
194
                                anchor.onclick = function () { myLytebox.start(this, true, false); return false; }
195
                        } else if (relAttribute.toLowerCase().match('lyteframe')) {
196
                                anchor.onclick = function () { myLytebox.start(this, false, true); return false; }
197
                        }
198
                }
199
        }
200
};
201
LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {
202
        if (this.ie && !this.ie7) {        this.toggleSelects('hide');        }
203
        if (this.hideFlash) { this.toggleFlash('hide'); }
204
        this.isLyteframe = (doFrame ? true : false);
205
        var pageSize        = this.getPageSize();
206
        var objOverlay        = this.doc.getElementById('lbOverlay');
207
        var objBody                = this.doc.getElementsByTagName("body").item(0);
208
        objOverlay.style.height = pageSize[1] + "px";
209
        objOverlay.style.display = '';
210
        this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));
211
        var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
212
        if (this.isLyteframe) {
213
                this.frameArray = [];
214
                this.frameNum = 0;
215
                if ((imageLink.getAttribute('rel') == 'lyteframe')) {
216
                        var rev = imageLink.getAttribute('rev');
217
                        this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));
218
                } else {
219
                        if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) {
220
                                for (var i = 0; i < anchors.length; i++) {
221
                                        var anchor = anchors[i];
222
                                        if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
223
                                                var rev = anchor.getAttribute('rev');
224
                                                this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));
225
                                        }
226
                                }
227
                                this.frameArray.removeDuplicates();
228
                                while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; }
229
                        }
230
                }
231
        } else {
232
                this.imageArray = [];
233
                this.imageNum = 0;
234
                this.slideArray = [];
235
                this.slideNum = 0;
236
                if ((imageLink.getAttribute('rel') == 'lytebox')) {
237
                        this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
238
                } else {
239
                        if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {
240
                                for (var i = 0; i < anchors.length; i++) {
241
                                        var anchor = anchors[i];
242
                                        if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
243
                                                this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
244
                                        }
245
                                }
246
                                this.imageArray.removeDuplicates();
247
                                while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }
248
                        }
249
                        if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {
250
                                for (var i = 0; i < anchors.length; i++) {
251
                                        var anchor = anchors[i];
252
                                        if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
253
                                                this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
254
                                        }
255
                                }
256
                                this.slideArray.removeDuplicates();
257
                                while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }
258
                        }
259
                }
260
        }
261
        var object = this.doc.getElementById('lbMain');
262
                object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
263
                object.style.display = '';
264
        if (!this.outerBorder) {
265
                this.doc.getElementById('lbOuterContainer').style.border = 'none';
266
                this.doc.getElementById('lbDetailsContainer').style.border = 'none';
267
        } else {
268
                this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
269
                this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
270
        }
271
        this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }
272
        this.doc.getElementById('lbMain').onclick = function(e) {
273
                var e = e;
274
                if (!e) {
275
                        if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
276
                                e = window.parent.window.event;
277
                        } else {
278
                                e = window.event;
279
                        }
280
                }
281
                var id = (e.target ? e.target.id : e.srcElement.id);
282
                if (id == 'lbMain') { myLytebox.end(); return false; }
283
        }
284
        this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; }
285
        this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }
286
        this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }        
287
        this.isSlideshow = doSlide;
288
        this.isPaused = (this.slideNum != 0 ? true : false);
289
        if (this.isSlideshow && this.showPlayPause && this.isPaused) {
290
                this.doc.getElementById('lbPlay').style.display = '';
291
                this.doc.getElementById('lbPause').style.display = 'none';
292
        }
293
        if (this.isLyteframe) {
294
                this.changeContent(this.frameNum);
295
        } else {
296
                if (this.isSlideshow) {
297
                        this.changeContent(this.slideNum);
298
                } else {
299
                        this.changeContent(this.imageNum);
300
                }
301
        }
302
};
303
LyteBox.prototype.changeContent = function(imageNum) {
304
        if (this.isSlideshow) {
305
                for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
306
        }
307
        this.activeImage = this.activeSlide = this.activeFrame = imageNum;
308
        if (!this.outerBorder) {
309
                this.doc.getElementById('lbOuterContainer').style.border = 'none';
310
                this.doc.getElementById('lbDetailsContainer').style.border = 'none';
311
        } else {
312
                this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
313
                this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
314
        }
315
        this.doc.getElementById('lbLoading').style.display = '';
316
        this.doc.getElementById('lbImage').style.display = 'none';
317
        this.doc.getElementById('lbIframe').style.display = 'none';
318
        this.doc.getElementById('lbPrev').style.display = 'none';
319
        this.doc.getElementById('lbNext').style.display = 'none';
320
        this.doc.getElementById('lbIframeContainer').style.display = 'none';
321
        this.doc.getElementById('lbDetailsContainer').style.display = 'none';
322
        this.doc.getElementById('lbNumberDisplay').style.display = 'none';
323
        if (this.navType == 2 || this.isLyteframe) {
324
                object = this.doc.getElementById('lbNavDisplay');
325
                object.innerHTML = '&nbsp;&nbsp;&nbsp;<span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next &raquo;</a>';
326
                object.style.display = 'none';
327
        }
328
        if (this.isLyteframe) {
329
                var iframe = myLytebox.doc.getElementById('lbIframe');
330
                var styles = this.frameArray[this.activeFrame][2];
331
                var aStyles = styles.split(';');
332
                for (var i = 0; i < aStyles.length; i++) {
333
                        if (aStyles[i].indexOf('width:') >= 0) {
334
                                var w = aStyles[i].replace('width:', '');
335
                                iframe.width = w.trim();
336
                        } else if (aStyles[i].indexOf('height:') >= 0) {
337
                                var h = aStyles[i].replace('height:', '');
338
                                iframe.height = h.trim();
339
                        } else if (aStyles[i].indexOf('scrolling:') >= 0) {
340
                                var s = aStyles[i].replace('scrolling:', '');
341
                                iframe.scrolling = s.trim();
342
                        } else if (aStyles[i].indexOf('border:') >= 0) {
343
                                // Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)
344
                                //var b = aStyles[i].replace('border:', '');
345
                                //iframe.style.border = b.trim();
346
                        }
347
                }
348
                this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
349
        } else {
350
                imgPreloader = new Image();
351
                imgPreloader.onload = function() {
352
                        var imageWidth = imgPreloader.width;
353
                        var imageHeight = imgPreloader.height;
354
                        if (myLytebox.autoResize) {
355
                                var pagesize = myLytebox.getPageSize();
356
                                var x = pagesize[2] - 150;
357
                                var y = pagesize[3] - 150;
358
                                if (imageWidth > x) {
359
                                        imageHeight = Math.round(imageHeight * (x / imageWidth));
360
                                        imageWidth = x; 
361
                                        if (imageHeight > y) { 
362
                                                imageWidth = Math.round(imageWidth * (y / imageHeight));
363
                                                imageHeight = y; 
364
                                        }
365
                                } else if (imageHeight > y) { 
366
                                        imageWidth = Math.round(imageWidth * (y / imageHeight));
367
                                        imageHeight = y; 
368
                                        if (imageWidth > x) {
369
                                                imageHeight = Math.round(imageHeight * (x / imageWidth));
370
                                                imageWidth = x;
371
                                        }
372
                                }
373
                        }
374
                        var lbImage = myLytebox.doc.getElementById('lbImage')
375
                        lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
376
                        lbImage.width = imageWidth;
377
                        lbImage.height = imageHeight;
378
                        myLytebox.resizeContainer(imageWidth, imageHeight);
379
                        imgPreloader.onload = function() {};
380
                }
381
                imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
382
        }
383
};
384
LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {
385
        this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;
386
        this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;
387
        this.xScale = ((imgWidth  + (this.borderSize * 2)) / this.wCur) * 100;
388
        this.yScale = ((imgHeight  + (this.borderSize * 2)) / this.hCur) * 100;
389
        var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;
390
        var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;
391
        if (!(hDiff == 0)) {
392
                this.hDone = false;
393
                this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));
394
        } else {
395
                this.hDone = true;
396
        }
397
        if (!(wDiff == 0)) {
398
                this.wDone = false;
399
                this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));
400
        } else {
401
                this.wDone = true;
402
        }
403
        if ((hDiff == 0) && (wDiff == 0)) {
404
                if (this.ie){ this.pause(250); } else { this.pause(100); } 
405
        }
406
        this.doc.getElementById('lbPrev').style.height = imgHeight + "px";
407
        this.doc.getElementById('lbNext').style.height = imgHeight + "px";
408
        this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";
409
        this.showContent();
410
};
411
LyteBox.prototype.showContent = function() {
412
        if (this.wDone && this.hDone) {
413
                for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
414
                if (this.outerBorder) {
415
                        this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none';
416
                }
417
                this.doc.getElementById('lbLoading').style.display = 'none';
418
                if (this.isLyteframe) {
419
                        this.doc.getElementById('lbIframe').style.display = '';
420
                        this.appear('lbIframe', (this.doAnimations ? 0 : 100));
421
                } else {
422
                        this.doc.getElementById('lbImage').style.display = '';
423
                        this.appear('lbImage', (this.doAnimations ? 0 : 100));
424
                        this.preloadNeighborImages();
425
                }
426
                if (this.isSlideshow) {
427
                        if(this.activeSlide == (this.slideArray.length - 1)) {
428
                                if (this.autoEnd) {
429
                                        this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
430
                                }
431
                        } else {
432
                                if (!this.isPaused) {
433
                                        this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
434
                                }
435
                        }
436
                        this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none');
437
                        this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');
438
                        this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none');
439
                        this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none');
440
                        this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : '');
441
                        this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none');
442
                } else {
443
                        this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none');
444
                        if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {
445
                                this.doc.getElementById('lbNavDisplay').style.display = '';
446
                        } else {
447
                                this.doc.getElementById('lbNavDisplay').style.display = 'none';
448
                        }
449
                        this.doc.getElementById('lbClose').style.display = '';
450
                        this.doc.getElementById('lbDetails').style.display = '';
451
                        this.doc.getElementById('lbPause').style.display = 'none';
452
                        this.doc.getElementById('lbPlay').style.display = 'none';
453
                }
454
                this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');
455
                this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');
456
                try {
457
                        this.doc.getElementById('lbIframe').src = this.frameArray[this.activeFrame][0];
458
                } catch(e) { }
459
        } else {
460
                this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);
461
        }
462
};
463
LyteBox.prototype.updateDetails = function() {
464
        var object = this.doc.getElementById('lbCaption');
465
        var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
466
        object.style.display = '';
467
        object.innerHTML = (sTitle == null ? '' : sTitle);
468
        this.updateNav();
469
        this.doc.getElementById('lbDetailsContainer').style.display = '';
470
        object = this.doc.getElementById('lbNumberDisplay');
471
        if (this.isSlideshow && this.slideArray.length > 1) {
472
                object.style.display = '';
473
                object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;
474
                this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');
475
        } else if (this.imageArray.length > 1 && !this.isLyteframe) {
476
                object.style.display = '';
477
                object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;
478
                this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none');
479
        } else if (this.frameArray.length > 1 && this.isLyteframe) {
480
                object.style.display = '';
481
                object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;
482
                this.doc.getElementById('lbNavDisplay').style.display = '';
483
        } else {
484
                this.doc.getElementById('lbNavDisplay').style.display = 'none';
485
        }
486
        this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100));
487
};
488
LyteBox.prototype.updateNav = function() {
489
        if (this.isSlideshow) {
490
                if (this.activeSlide != 0) {
491
                        var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
492
                                object.style.display = '';
493
                                object.onclick = function() {
494
                                        if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
495
                                        myLytebox.changeContent(myLytebox.activeSlide - 1); return false;
496
                                }
497
                } else {
498
                        if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
499
                }
500
                if (this.activeSlide != (this.slideArray.length - 1)) {
501
                        var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
502
                                object.style.display = '';
503
                                object.onclick = function() {
504
                                        if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
505
                                        myLytebox.changeContent(myLytebox.activeSlide + 1); return false;
506
                                }
507
                } else {
508
                        if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
509
                }
510
        } else if (this.isLyteframe) {
511
                if(this.activeFrame != 0) {
512
                        var object = this.doc.getElementById('lbPrev2');
513
                                object.style.display = '';
514
                                object.onclick = function() {
515
                                        myLytebox.changeContent(myLytebox.activeFrame - 1); return false;
516
                                }
517
                } else {
518
                        this.doc.getElementById('lbPrev2_Off').style.display = '';
519
                }
520
                if(this.activeFrame != (this.frameArray.length - 1)) {
521
                        var object = this.doc.getElementById('lbNext2');
522
                                object.style.display = '';
523
                                object.onclick = function() {
524
                                        myLytebox.changeContent(myLytebox.activeFrame + 1); return false;
525
                                }
526
                } else {
527
                        this.doc.getElementById('lbNext2_Off').style.display = '';
528
                }                
529
        } else {
530
                if(this.activeImage != 0) {
531
                        var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
532
                                object.style.display = '';
533
                                object.onclick = function() {
534
                                        myLytebox.changeContent(myLytebox.activeImage - 1); return false;
535
                                }
536
                } else {
537
                        if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
538
                }
539
                if(this.activeImage != (this.imageArray.length - 1)) {
540
                        var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
541
                                object.style.display = '';
542
                                object.onclick = function() {
543
                                        myLytebox.changeContent(myLytebox.activeImage + 1); return false;
544
                                }
545
                } else {
546
                        if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
547
                }
548
        }
549
        this.enableKeyboardNav();
550
};
551
LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
552
LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };
553
LyteBox.prototype.keyboardAction = function(e) {
554
        var keycode = key = escape = null;
555
        keycode        = (e == null) ? event.keyCode : e.which;
556
        key                = String.fromCharCode(keycode).toLowerCase();
557
        escape  = (e == null) ? 27 : e.DOM_VK_ESCAPE;
558
        if ((key == 'x') || (key == 'c') || (keycode == escape)) {
559
                myLytebox.end();
560
        } else if ((key == 'p') || (keycode == 37)) {
561
                if (myLytebox.isSlideshow) {
562
                        if(myLytebox.activeSlide != 0) {
563
                                myLytebox.disableKeyboardNav();
564
                                myLytebox.changeContent(myLytebox.activeSlide - 1);
565
                        }
566
                } else if (myLytebox.isLyteframe) {
567
                        if(myLytebox.activeFrame != 0) {
568
                                myLytebox.disableKeyboardNav();
569
                                myLytebox.changeContent(myLytebox.activeFrame - 1);
570
                        }
571
                } else {
572
                        if(myLytebox.activeImage != 0) {
573
                                myLytebox.disableKeyboardNav();
574
                                myLytebox.changeContent(myLytebox.activeImage - 1);
575
                        }
576
                }
577
        } else if ((key == 'n') || (keycode == 39)) {
578
                if (myLytebox.isSlideshow) {
579
                        if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {
580
                                myLytebox.disableKeyboardNav();
581
                                myLytebox.changeContent(myLytebox.activeSlide + 1);
582
                        }
583
                } else if (myLytebox.isLyteframe) {
584
                        if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {
585
                                myLytebox.disableKeyboardNav();
586
                                myLytebox.changeContent(myLytebox.activeFrame + 1);
587
                        }
588
                } else {
589
                        if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {
590
                                myLytebox.disableKeyboardNav();
591
                                myLytebox.changeContent(myLytebox.activeImage + 1);
592
                        }
593
                }
594
        }
595
};
596
LyteBox.prototype.preloadNeighborImages = function() {
597
        if (this.isSlideshow) {
598
                if ((this.slideArray.length - 1) > this.activeSlide) {
599
                        preloadNextImage = new Image();
600
                        preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
601
                }
602
                if(this.activeSlide > 0) {
603
                        preloadPrevImage = new Image();
604
                        preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
605
                }
606
        } else {
607
                if ((this.imageArray.length - 1) > this.activeImage) {
608
                        preloadNextImage = new Image();
609
                        preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
610
                }
611
                if(this.activeImage > 0) {
612
                        preloadPrevImage = new Image();
613
                        preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
614
                }
615
        }
616
};
617
LyteBox.prototype.togglePlayPause = function(hideID, showID) {
618
        if (this.isSlideshow && hideID == "lbPause") {
619
                for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
620
        }
621
        this.doc.getElementById(hideID).style.display = 'none';
622
        this.doc.getElementById(showID).style.display = '';
623
        if (hideID == "lbPlay") {
624
                this.isPaused = false;
625
                if (this.activeSlide == (this.slideArray.length - 1)) {
626
                        this.end();
627
                } else {
628
                        this.changeContent(this.activeSlide + 1);
629
                }
630
        } else {
631
                this.isPaused = true;
632
        }
633
};
634
LyteBox.prototype.end = function(caller) {
635
        var closeClick = (caller == 'slideshow' ? false : true);
636
        if (this.isSlideshow && this.isPaused && !closeClick) { return; }
637
        this.disableKeyboardNav();
638
        this.doc.getElementById('lbMain').style.display = 'none';
639
        this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));
640
        this.toggleSelects('visible');
641
        if (this.hideFlash) { this.toggleFlash('visible'); }
642
        if (this.isSlideshow) {
643
                for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
644
        }
645
        if (this.isLyteframe) {
646
                 this.initialize();
647
        }
648
};
649
LyteBox.prototype.checkFrame = function() {
650
        if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
651
                this.isFrame = true;
652
                this.lytebox = "window.parent." + window.name + ".myLytebox";
653
                this.doc = parent.document;
654
        } else {
655
                this.isFrame = false;
656
                this.lytebox = "myLytebox";
657
                this.doc = document;
658
        }
659
};
660
LyteBox.prototype.getPixelRate = function(cur, img) {
661
        var diff = (img > cur) ? img - cur : cur - img;
662
        if (diff >= 0 && diff <= 100) { return 10; }
663
        if (diff > 100 && diff <= 200) { return 15; }
664
        if (diff > 200 && diff <= 300) { return 20; }
665
        if (diff > 300 && diff <= 400) { return 25; }
666
        if (diff > 400 && diff <= 500) { return 30; }
667
        if (diff > 500 && diff <= 600) { return 35; }
668
        if (diff > 600 && diff <= 700) { return 40; }
669
        if (diff > 700) { return 45; }
670
};
671
LyteBox.prototype.appear = function(id, opacity) {
672
        var object = this.doc.getElementById(id).style;
673
        object.opacity = (opacity / 100);
674
        object.MozOpacity = (opacity / 100);
675
        object.KhtmlOpacity = (opacity / 100);
676
        object.filter = "alpha(opacity=" + (opacity + 10) + ")";
677
        if (opacity == 100 && (id == 'lbImage' || id == 'lbIframe')) {
678
                try { object.removeAttribute("filter"); } catch(e) {}        /* Fix added for IE Alpha Opacity Filter bug. */
679
                this.updateDetails();
680
        } else if (opacity >= this.maxOpacity && id == 'lbOverlay') {
681
                for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
682
                return;
683
        } else if (opacity >= 100 && id == 'lbDetailsContainer') {
684
                try { object.removeAttribute("filter"); } catch(e) {}        /* Fix added for IE Alpha Opacity Filter bug. */
685
                for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
686
                this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";
687
        } else {
688
                if (id == 'lbOverlay') {
689
                        this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);
690
                } else {
691
                        this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);
692
                }
693
        }
694
};
695
LyteBox.prototype.fade = function(id, opacity) {
696
        var object = this.doc.getElementById(id).style;
697
        object.opacity = (opacity / 100);
698
        object.MozOpacity = (opacity / 100);
699
        object.KhtmlOpacity = (opacity / 100);
700
        object.filter = "alpha(opacity=" + opacity + ")";
701
        if (opacity <= 0) {
702
                try {
703
                        object.display = 'none';
704
                } catch(err) { }
705
        } else if (id == 'lbOverlay') {
706
                this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);
707
        } else {
708
                this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);
709
        }
710
};
711
LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {
712
        if (!this.hDone) {
713
                this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
714
                return;
715
        }
716
        var object = this.doc.getElementById(id);
717
        var timer = speed ? speed : (this.resizeDuration/2);
718
        var newW = (this.doAnimations ? curW : maxW);
719
        object.style.width = (newW) + "px";
720
        if (newW < maxW) {
721
                newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;
722
        } else if (newW > maxW) {
723
                newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;
724
        }
725
        this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);
726
        if (parseInt(object.style.width) == maxW) {
727
                this.wDone = true;
728
                for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
729
        }
730
};
731
LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {
732
        var timer = speed ? speed : (this.resizeDuration/2);
733
        var object = this.doc.getElementById(id);
734
        var newH = (this.doAnimations ? curH : maxH);
735
        object.style.height = (newH) + "px";
736
        if (newH < maxH) {
737
                newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;
738
        } else if (newH > maxH) {
739
                newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;
740
        }
741
        this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);
742
        if (parseInt(object.style.height) == maxH) {
743
                this.hDone = true;
744
                for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
745
        }
746
};
747
LyteBox.prototype.getPageScroll = function() {
748
        if (self.pageYOffset) {
749
                return this.isFrame ? parent.pageYOffset : self.pageYOffset;
750
        } else if (this.doc.documentElement && this.doc.documentElement.scrollTop){
751
                return this.doc.documentElement.scrollTop;
752
        } else if (document.body) {
753
                return this.doc.body.scrollTop;
754
        }
755
};
756
LyteBox.prototype.getPageSize = function() {        
757
        var xScroll, yScroll, windowWidth, windowHeight;
758
        if (window.innerHeight && window.scrollMaxY) {
759
                xScroll = this.doc.scrollWidth;
760
                yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
761
        } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){
762
                xScroll = this.doc.body.scrollWidth;
763
                yScroll = this.doc.body.scrollHeight;
764
        } else {
765
                xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
766
                yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
767
                xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
768
                yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
769
        }
770
        if (self.innerHeight) {
771
                windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
772
                windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
773
        } else if (document.documentElement && document.documentElement.clientHeight) {
774
                windowWidth = this.doc.documentElement.clientWidth;
775
                windowHeight = this.doc.documentElement.clientHeight;
776
        } else if (document.body) {
777
                windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
778
                windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
779
                windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
780
                windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
781
        }
782
        var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
783
        var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
784
        return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
785
};
786
LyteBox.prototype.toggleFlash = function(state) {
787
        var objects = this.doc.getElementsByTagName("object");
788
        for (var i = 0; i < objects.length; i++) {
789
                objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
790
        }
791
        var embeds = this.doc.getElementsByTagName("embed");
792
        for (var i = 0; i < embeds.length; i++) {
793
                embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
794
        }
795
        if (this.isFrame) {
796
                for (var i = 0; i < parent.frames.length; i++) {
797
                        try {
798
                                objects = parent.frames[i].window.document.getElementsByTagName("object");
799
                                for (var j = 0; j < objects.length; j++) {
800
                                        objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
801
                                }
802
                        } catch(e) { }
803
                        try {
804
                                embeds = parent.frames[i].window.document.getElementsByTagName("embed");
805
                                for (var j = 0; j < embeds.length; j++) {
806
                                        embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
807
                                }
808
                        } catch(e) { }
809
                }
810
        }
811
};
812
LyteBox.prototype.toggleSelects = function(state) {
813
        var selects = this.doc.getElementsByTagName("select");
814
        for (var i = 0; i < selects.length; i++ ) {
815
                selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
816
        }
817
        if (this.isFrame) {
818
                for (var i = 0; i < parent.frames.length; i++) {
819
                        try {
820
                                selects = parent.frames[i].window.document.getElementsByTagName("select");
821
                                for (var j = 0; j < selects.length; j++) {
822
                                        selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
823
                                }
824
                        } catch(e) { }
825
                }
826
        }
827
};
828
LyteBox.prototype.pause = function(numberMillis) {
829
        var now = new Date();
830
        var exitTime = now.getTime() + numberMillis;
831
        while (true) {
832
                now = new Date();
833
                if (now.getTime() > exitTime) { return; }
834
        }
835
};
836
if (window.addEventListener) {
837
        window.addEventListener("load",initLytebox,false);
838
} else if (window.attachEvent) {
839
        window.attachEvent("onload",initLytebox);
840
} else {
841
        window.onload = function() {initLytebox();}
842
}
843
function initLytebox() { myLytebox = new LyteBox(); }