lightbox/js/lightbox.js

   1 // -----------------------------------------------------------------------------------
   2 //
   3 //      Lightbox v2.03.3
   4 //      by Lokesh Dhakar - http://www.huddletogether.com
   5 //      5/21/06
   6 //
   7 //      For more information on this script, visit:
   8 //      http://huddletogether.com/projects/lightbox2/
   9 //
  10 //      Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  11 //
  12 //      Credit also due to those who have helped, inspired, and made their code available to the public.
  13 //      Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), Thomas Fuchs(mir.aculo.us), and others.
  14 //
  15 //
  16 // -----------------------------------------------------------------------------------
  17 /*
  18
  19         Table of Contents
  20         -----------------
  21         Configuration
  22         Global Variables
  23
  24         Extending Built-in Objects
  25         - Object.extend(Element)
  26         - Array.prototype.removeDuplicates()
  27         - Array.prototype.empty()
  28
  29         Lightbox Class Declaration
  30         - initialize()
  31         - updateImageList()
  32         - start()
  33         - changeImage()
  34         - resizeImageContainer()
  35         - showImage()
  36         - updateDetails()
  37         - updateNav()
  38         - enableKeyboardNav()
  39         - disableKeyboardNav()
  40         - keyboardAction()
  41         - preloadNeighborImages()
  42         - end()
  43
  44         Miscellaneous Functions
  45         - getPageScroll()
  46         - getPageSize()
  47         - getKey()
  48         - listenKey()
  49         - showSelectBoxes()
  50         - hideSelectBoxes()
  51         - showFlash()
  52         - hideFlash()
  53         - pause()
  54         - initLightbox()
  55
  56         Function Calls
  57         - addLoadEvent(initLightbox)
  58
  59 */
  60 // -----------------------------------------------------------------------------------
  61
  62 //
  63 //      Configuration
  64 //
  65 var fileLoadingImage = "lightbox/images/loading.gif";
  66 var fileBottomNavCloseImage = "lightbox/images/closelabel.gif";
  67
  68 var overlayOpacity = 0.8;       // controls transparency of shadow overlay
  69
  70 var animate = true;                     // toggles resizing animations
  71 var resizeSpeed = 8;            // controls the speed of the image resizing animations (1=slowest and 10=fastest)
  72
  73 var borderSize = 10;            //if you adjust the padding in the CSS, you will need to update this variable
  74
  75 // -----------------------------------------------------------------------------------
  76
  77 //
  78 //      Global Variables
  79 //
  80 var imageArray = new Array;
  81 var activeImage;
  82
  83 if(animate == true){
  84         overlayDuration = 0.2;  // shadow fade in/out duration
  85         if(resizeSpeed > 10){ resizeSpeed = 10;}
  86         if(resizeSpeed < 1){ resizeSpeed = 1;}
  87         resizeDuration = (11 - resizeSpeed) * 0.15;
  88 } else {
  89         overlayDuration = 0;
  90         resizeDuration = 0;
  91 }
  92
  93 // -----------------------------------------------------------------------------------
  94
  95 //
  96 //      Additional methods for Element added by SU, Couloir
  97 //      - further additions by Lokesh Dhakar (huddletogether.com)
  98 //
  99 Object.extend(Element, {
 100         getWidth: function(element) {
 101                 element = $(element);
 102                 return element.offsetWidth;
 103         },
 104         setWidth: function(element,w) {
 105                 element = $(element);
 106         element.style.width = w +"px";
 107         },
 108         setHeight: function(element,h) {
 109                 element = $(element);
 110         element.style.height = h +"px";
 111         },
 112         setTop: function(element,t) {
 113                 element = $(element);
 114         element.style.top = t +"px";
 115         },
 116         setLeft: function(element,l) {
 117                 element = $(element);
 118         element.style.left = l +"px";
 119         },
 120         setSrc: function(element,src) {
 121         element = $(element);
 122         element.src = src;
 123         },
 124         setHref: function(element,href) {
 125         element = $(element);
 126         element.href = href;
 127         },
 128         setInnerHTML: function(element,content) {
 129                 element = $(element);
 130                 element.innerHTML = content;
 131         }
 132 });
 133
 134 // -----------------------------------------------------------------------------------
 135
 136 //
 137 //      Extending built-in Array object
 138 //      - array.removeDuplicates()
 139 //      - array.empty()
 140 //
 141 Array.prototype.removeDuplicates = function () {
 142     for(i = 0; i < this.length; i++){
 143         for(j = this.length-1; j>i; j--){
 144             if(this[i][0] == this[j][0]){
 145                 this.splice(j,1);
 146             }
 147         }
 148     }
 149 }
 150
 151 // -----------------------------------------------------------------------------------
 152
 153 Array.prototype.empty = function () {
 154         for(i = 0; i <= this.length; i++){
 155                 this.shift();
 156         }
 157 }
 158
 159 // -----------------------------------------------------------------------------------
 160
 161 //
 162 //      Lightbox Class Declaration
 163 //      - initialize()
 164 //      - start()
 165 //      - changeImage()
 166 //      - resizeImageContainer()
 167 //      - showImage()
 168 //      - updateDetails()
 169 //      - updateNav()
 170 //      - enableKeyboardNav()
 171 //      - disableKeyboardNav()
 172 //      - keyboardNavAction()
 173 //      - preloadNeighborImages()
 174 //      - end()
 175 //
 176 //      Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
 177 //
 178 var Lightbox = Class.create();
 179
 180 Lightbox.prototype = {
 181
 182         // initialize()
 183         // Constructor runs on completion of the DOM loading. Calls updateImageList and then
 184         // the function inserts html at the bottom of the page which is used to display the shadow
 185         // overlay and the image container.
 186         //
 187         initialize: function() {
 188
 189                 this.updateImageList();
 190
 191                 // Code inserts html at the bottom of the page that looks similar to this:
 192                 //
 193                 //      <div id="overlay"></div>
 194                 //      <div id="lightbox">
 195                 //              <div id="outerImageContainer">
 196                 //                      <div id="imageContainer">
 197                 //                              <img id="lightboxImage">
 198                 //                              <div style="" id="hoverNav">
 199                 //                                      <a href="#" id="prevLink"></a>
 200                 //                                      <a href="#" id="nextLink"></a>
 201                 //                              </div>
 202                 //                              <div id="loading">
 203                 //                                      <a href="#" id="loadingLink">
 204                 //                                              <img src="images/loading.gif">
 205                 //                                      </a>
 206                 //                              </div>
 207                 //                      </div>
 208                 //              </div>
 209                 //              <div id="imageDataContainer">
 210                 //                      <div id="imageData">
 211                 //                              <div id="imageDetails">
 212                 //                                      <span id="caption"></span>
 213                 //                                      <span id="numberDisplay"></span>
 214                 //                              </div>
 215                 //                              <div id="bottomNav">
 216                 //                                      <a href="#" id="bottomNavClose">
 217                 //                                              <img src="images/close.gif">
 218                 //                                      </a>
 219                 //                              </div>
 220                 //                      </div>
 221                 //              </div>
 222                 //      </div>
 223
 224
 225                 var objBody = document.getElementsByTagName("body").item(0);
 226
 227                 var objOverlay = document.createElement("div");
 228                 objOverlay.setAttribute('id','overlay');
 229                 objOverlay.style.display = 'none';
 230                 objOverlay.onclick = function() { myLightbox.end(); }
 231                 objBody.appendChild(objOverlay);
 232
 233                 var objLightbox = document.createElement("div");
 234                 objLightbox.setAttribute('id','lightbox');
 235                 objLightbox.style.display = 'none';
 236                 objLightbox.onclick = function(e) {     // close Lightbox is user clicks shadow overlay
 237                         if (!e) var e = window.event;
 238                         var clickObj = Event.element(e).id;
 239                         if ( clickObj == 'lightbox') {
 240                                 myLightbox.end();
 241                         }
 242                 };
 243                 objBody.appendChild(objLightbox);
 244
 245                 var objOuterImageContainer = document.createElement("div");
 246                 objOuterImageContainer.setAttribute('id','outerImageContainer');
 247                 objLightbox.appendChild(objOuterImageContainer);
 248
 249                 // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
 250                 // If animations are turned off, it will be hidden as to prevent a flicker of a
 251                 // white 250 by 250 box.
 252                 if(animate){
 253                         Element.setWidth('outerImageContainer', 250);
 254                         Element.setHeight('outerImageContainer', 250);
 255                 } else {
 256                         Element.setWidth('outerImageContainer', 1);
 257                         Element.setHeight('outerImageContainer', 1);
 258                 }
 259
 260                 var objImageContainer = document.createElement("div");
 261                 objImageContainer.setAttribute('id','imageContainer');
 262                 objOuterImageContainer.appendChild(objImageContainer);
 263
 264                 var objLightboxImage = document.createElement("img");
 265                 objLightboxImage.setAttribute('id','lightboxImage');
 266                 objImageContainer.appendChild(objLightboxImage);
 267
 268                 var objHoverNav = document.createElement("div");
 269                 objHoverNav.setAttribute('id','hoverNav');
 270                 objImageContainer.appendChild(objHoverNav);
 271
 272                 var objPrevLink = document.createElement("a");
 273                 objPrevLink.setAttribute('id','prevLink');
 274                 objPrevLink.setAttribute('href','#');
 275                 objHoverNav.appendChild(objPrevLink);
 276
 277                 var objNextLink = document.createElement("a");
 278                 objNextLink.setAttribute('id','nextLink');
 279                 objNextLink.setAttribute('href','#');
 280                 objHoverNav.appendChild(objNextLink);
 281
 282                 var objLoading = document.createElement("div");
 283                 objLoading.setAttribute('id','loading');
 284                 objImageContainer.appendChild(objLoading);
 285
 286                 var objLoadingLink = document.createElement("a");
 287                 objLoadingLink.setAttribute('id','loadingLink');
 288                 objLoadingLink.setAttribute('href','#');
 289                 objLoadingLink.onclick = function() { myLightbox.end(); return false; }
 290                 objLoading.appendChild(objLoadingLink);
 291
 292                 var objLoadingImage = document.createElement("img");
 293                 objLoadingImage.setAttribute('src', fileLoadingImage);
 294                 objLoadingLink.appendChild(objLoadingImage);
 295
 296                 var objImageDataContainer = document.createElement("div");
 297                 objImageDataContainer.setAttribute('id','imageDataContainer');
 298                 objLightbox.appendChild(objImageDataContainer);
 299
 300                 var objImageData = document.createElement("div");
 301                 objImageData.setAttribute('id','imageData');
 302                 objImageDataContainer.appendChild(objImageData);
 303
 304                 var objImageDetails = document.createElement("div");
 305                 objImageDetails.setAttribute('id','imageDetails');
 306                 objImageData.appendChild(objImageDetails);
 307
 308                 var objCaption = document.createElement("span");
 309                 objCaption.setAttribute('id','caption');
 310                 objImageDetails.appendChild(objCaption);
 311
 312                 var objNumberDisplay = document.createElement("span");
 313                 objNumberDisplay.setAttribute('id','numberDisplay');
 314                 objImageDetails.appendChild(objNumberDisplay);
 315
 316                 var objBottomNav = document.createElement("div");
 317                 objBottomNav.setAttribute('id','bottomNav');
 318                 objImageData.appendChild(objBottomNav);
 319
 320                 var objBottomNavCloseLink = document.createElement("a");
 321                 objBottomNavCloseLink.setAttribute('id','bottomNavClose');
 322                 objBottomNavCloseLink.setAttribute('href','#');
 323                 objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
 324                 objBottomNav.appendChild(objBottomNavCloseLink);
 325
 326                 var objBottomNavCloseImage = document.createElement("img");
 327                 objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
 328                 objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
 329         },
 330
 331
 332         //
 333         // updateImageList()
 334         // Loops through anchor tags looking for 'lightbox' references and applies onclick
 335         // events to appropriate links. You can rerun after dynamically adding images w/ajax.
 336         //
 337         updateImageList: function() {
 338                 if (!document.getElementsByTagName){ return; }
 339                 var anchors = document.getElementsByTagName('a');
 340                 var areas = document.getElementsByTagName('area');
 341
 342                 // loop through all anchor tags
 343                 for (var i=0; i<anchors.length; i++){
 344                         var anchor = anchors[i];
 345
 346                         var relAttribute = String(anchor.getAttribute('rel'));
 347
 348                         // use the string.match() method to catch 'lightbox' references in the rel attribute
 349                         if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
 350                                 anchor.onclick = function () {myLightbox.start(this); return false;}
 351                         }
 352                 }
 353
 354                 // loop through all area tags
 355                 // todo: combine anchor & area tag loops
 356                 for (var i=0; i< areas.length; i++){
 357                         var area = areas[i];
 358
 359                         var relAttribute = String(area.getAttribute('rel'));
 360
 361                         // use the string.match() method to catch 'lightbox' references in the rel attribute
 362                         if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
 363                                 area.onclick = function () {myLightbox.start(this); return false;}
 364                         }
 365                 }
 366         },
 367
 368
 369         //
 370         //      start()
 371         //      Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
 372         //
 373         start: function(imageLink) {
 374
 375                 hideSelectBoxes();
 376                 hideFlash();
 377
 378                 // stretch overlay to fill page and fade in
 379                 var arrayPageSize = getPageSize();
 380                 Element.setWidth('overlay', arrayPageSize[0]);
 381                 Element.setHeight('overlay', arrayPageSize[1]);
 382
 383                 new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
 384
 385                 imageArray = [];
 386                 imageNum = 0;
 387
 388                 if (!document.getElementsByTagName){ return; }
 389                 var anchors = document.getElementsByTagName( imageLink.tagName);
 390
 391                 // if image is NOT part of a set..
 392                 if((imageLink.getAttribute('rel') == 'lightbox')){
 393                         // add single image to imageArray
 394                         imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
 395                 } else {
 396                 // if image is part of a set..
 397
 398                         // loop through anchors, find other images in set, and add them to imageArray
 399                         for (var i=0; i<anchors.length; i++){
 400                                 var anchor = anchors[i];
 401                                 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
 402                                         imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
 403                                 }
 404                         }
 405                         imageArray.removeDuplicates();
 406                         while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
 407                 }
 408
 409                 // calculate top and left offset for the lightbox
 410                 var arrayPageScroll = getPageScroll();
 411                 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
 412                 var lightboxLeft = arrayPageScroll[0];
 413                 Element.setTop('lightbox', lightboxTop);
 414                 Element.setLeft('lightbox', lightboxLeft);
 415
 416                 Element.show('lightbox');
 417
 418                 this.changeImage(imageNum);
 419         },
 420
 421         //
 422         //      changeImage()
 423         //      Hide most elements and preload image in preparation for resizing image container.
 424         //
 425         changeImage: function(imageNum) {
 426
 427                 activeImage = imageNum; // update global var
 428
 429                 // hide elements during transition
 430                 if(animate){ Element.show('loading');}
 431                 Element.hide('lightboxImage');
 432                 Element.hide('hoverNav');
 433                 Element.hide('prevLink');
 434                 Element.hide('nextLink');
 435                 Element.hide('imageDataContainer');
 436                 Element.hide('numberDisplay');
 437
 438                 imgPreloader = new Image();
 439
 440                 // once image is preloaded, resize image container
 441                 imgPreloader.onload=function(){
 442                         Element.setSrc('lightboxImage', imageArray[activeImage][0]);
 443                         myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
 444
 445                         imgPreloader.onload=function(){};       //      clear onLoad, IE behaves irratically with animated gifs otherwise
 446                 }
 447                 imgPreloader.src = imageArray[activeImage][0];
 448         },
 449
 450         //
 451         //      resizeImageContainer()
 452         //
 453         resizeImageContainer: function( imgWidth, imgHeight) {
 454
 455                 // get curren width and height
 456                 this.widthCurrent = Element.getWidth('outerImageContainer');
 457                 this.heightCurrent = Element.getHeight('outerImageContainer');
 458
 459                 // get new width and height
 460                 var widthNew = (imgWidth  + (borderSize * 2));
 461                 var heightNew = (imgHeight  + (borderSize * 2));
 462
 463                 // scalars based on change from old to new
 464                 this.xScale = ( widthNew / this.widthCurrent) * 100;
 465                 this.yScale = ( heightNew / this.heightCurrent) * 100;
 466
 467                 // calculate size difference between new and old image, and resize if necessary
 468                 wDiff = this.widthCurrent - widthNew;
 469                 hDiff = this.heightCurrent - heightNew;
 470
 471                 if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
 472                 if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
 473
 474                 // if new and old image are same size and no scaling transition is necessary,
 475                 // do a quick pause to prevent image flicker.
 476                 if((hDiff == 0) && (wDiff == 0)){
 477                         if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
 478                 }
 479
 480                 Element.setHeight('prevLink', imgHeight);
 481                 Element.setHeight('nextLink', imgHeight);
 482                 Element.setWidth( 'imageDataContainer', widthNew);
 483
 484                 this.showImage();
 485         },
 486
 487         //
 488         //      showImage()
 489         //      Display image and begin preloading neighbors.
 490         //
 491         showImage: function(){
 492                 Element.hide('loading');
 493                 new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){   myLightbox.updateDetails(); } });
 494                 this.preloadNeighborImages();
 495         },
 496
 497         //
 498         //      updateDetails()
 499         //      Display caption, image number, and bottom nav.
 500         //
 501         updateDetails: function() {
 502
 503                 // if caption is not null
 504                 if(imageArray[activeImage][1]){
 505                         Element.show('caption');
 506                         Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
 507                 }
 508
 509                 // if image is part of set display 'Image x of x'
 510                 if(imageArray.length > 1){
 511                         Element.show('numberDisplay');
 512                         Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
 513                 }
 514
 515                 new Effect.Parallel(
 516                         [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
 517                           new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ],
 518                         { duration: resizeDuration, afterFinish: function() {
 519                                 // update overlay size and update nav
 520                                 var arrayPageSize = getPageSize();
 521                                 Element.setHeight('overlay', arrayPageSize[1]);
 522                                 myLightbox.updateNav();
 523                                 }
 524                         }
 525                 );
 526         },
 527
 528         //
 529         //      updateNav()
 530         //      Display appropriate previous and next hover navigation.
 531         //
 532         updateNav: function() {
 533
 534                 Element.show('hoverNav');
 535
 536                 // if not first image in set, display prev image button
 537                 if(activeImage != 0){
 538                         Element.show('prevLink');
 539                         document.getElementById('prevLink').onclick = function() {
 540                                 myLightbox.changeImage(activeImage - 1); return false;
 541                         }
 542                 }
 543
 544                 // if not last image in set, display next image button
 545                 if(activeImage != (imageArray.length - 1)){
 546                         Element.show('nextLink');
 547                         document.getElementById('nextLink').onclick = function() {
 548                                 myLightbox.changeImage(activeImage + 1); return false;
 549                         }
 550                 }
 551
 552                 this.enableKeyboardNav();
 553         },
 554
 555         //
 556         //      enableKeyboardNav()
 557         //
 558         enableKeyboardNav: function() {
 559                 document.onkeydown = this.keyboardAction;
 560         },
 561
 562         //
 563         //      disableKeyboardNav()
 564         //
 565         disableKeyboardNav: function() {
 566                 document.onkeydown = '';
 567         },
 568
 569         //
 570         //      keyboardAction()
 571         //
 572         keyboardAction: function(e) {
 573                 if (e == null) { // ie
 574                         keycode = event.keyCode;
 575                         escapeKey = 27;
 576                 } else { // mozilla
 577                         keycode = e.keyCode;
 578                         escapeKey = e.DOM_VK_ESCAPE;
 579                 }
 580
 581                 key = String.fromCharCode(keycode).toLowerCase();
 582
 583                 if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){     // close lightbox
 584                         myLightbox.end();
 585                 } else if((key == 'p') || (keycode == 37)){     // display previous image
 586                         if(activeImage != 0){
 587                                 myLightbox.disableKeyboardNav();
 588                                 myLightbox.changeImage(activeImage - 1);
 589                         }
 590                 } else if((key == 'n') || (keycode == 39)){     // display next image
 591                         if(activeImage != (imageArray.length - 1)){
 592                                 myLightbox.disableKeyboardNav();
 593                                 myLightbox.changeImage(activeImage + 1);
 594                         }
 595                 }
 596
 597         },
 598
 599         //
 600         //      preloadNeighborImages()
 601         //      Preload previous and next images.
 602         //
 603         preloadNeighborImages: function(){
 604
 605                 if((imageArray.length - 1) > activeImage){
 606                         preloadNextImage = new Image();
 607                         preloadNextImage.src = imageArray[activeImage + 1][0];
 608                 }
 609                 if(activeImage > 0){
 610                         preloadPrevImage = new Image();
 611                         preloadPrevImage.src = imageArray[activeImage - 1][0];
 612                 }
 613
 614         },
 615
 616         //
 617         //      end()
 618         //
 619         end: function() {
 620                 this.disableKeyboardNav();
 621                 Element.hide('lightbox');
 622                 new Effect.Fade('overlay', { duration: overlayDuration});
 623                 showSelectBoxes();
 624                 showFlash();
 625         }
 626 }
 627
 628 // -----------------------------------------------------------------------------------
 629
 630 //
 631 // getPageScroll()
 632 // Returns array with x,y page scroll values.
 633 // Core code from - quirksmode.com
 634 //
 635 function getPageScroll(){
 636
 637         var xScroll, yScroll;
 638
 639         if (self.pageYOffset) {
 640                 yScroll = self.pageYOffset;
 641                 xScroll = self.pageXOffset;
 642         } else if (document.documentElement && document.documentElement.scrollTop){      // Explorer 6 Strict
 643                 yScroll = document.documentElement.scrollTop;
 644                 xScroll = document.documentElement.scrollLeft;
 645         } else if (document.body) {// all other Explorers
 646                 yScroll = document.body.scrollTop;
 647                 xScroll = document.body.scrollLeft;
 648         }
 649
 650         arrayPageScroll = new Array(xScroll,yScroll)
 651         return arrayPageScroll;
 652 }
 653
 654 // -----------------------------------------------------------------------------------
 655
 656 //
 657 // getPageSize()
 658 // Returns array with page width, height and window width, height
 659 // Core code from - quirksmode.com
 660 // Edit for Firefox by pHaez
 661 //
 662 function getPageSize(){
 663
 664         var xScroll, yScroll;
 665
 666         if (window.innerHeight && window.scrollMaxY) {
 667                 xScroll = window.innerWidth + window.scrollMaxX;
 668                 yScroll = window.innerHeight + window.scrollMaxY;
 669         } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
 670                 xScroll = document.body.scrollWidth;
 671                 yScroll = document.body.scrollHeight;
 672         } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 673                 xScroll = document.body.offsetWidth;
 674                 yScroll = document.body.offsetHeight;
 675         }
 676
 677         var windowWidth, windowHeight;
 678
 679 //      console.log(self.innerWidth);
 680 //      console.log(document.documentElement.clientWidth);
 681
 682         if (self.innerHeight) { // all except Explorer
 683                 if(document.documentElement.clientWidth){
 684                         windowWidth = document.documentElement.clientWidth;
 685                 } else {
 686                         windowWidth = self.innerWidth;
 687                 }
 688                 windowHeight = self.innerHeight;
 689         } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
 690                 windowWidth = document.documentElement.clientWidth;
 691                 windowHeight = document.documentElement.clientHeight;
 692         } else if (document.body) { // other Explorers
 693                 windowWidth = document.body.clientWidth;
 694                 windowHeight = document.body.clientHeight;
 695         }
 696
 697         // for small pages with total height less then height of the viewport
 698         if(yScroll < windowHeight){
 699                 pageHeight = windowHeight;
 700         } else {
 701                 pageHeight = yScroll;
 702         }
 703
 704 //      console.log("xScroll " + xScroll)
 705 //      console.log("windowWidth " + windowWidth)
 706
 707         // for small pages with total width less then width of the viewport
 708         if(xScroll < windowWidth){
 709                 pageWidth = xScroll;
 710         } else {
 711                 pageWidth = windowWidth;
 712         }
 713 //      console.log("pageWidth " + pageWidth)
 714
 715         arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
 716         return arrayPageSize;
 717 }
 718
 719 // -----------------------------------------------------------------------------------
 720
 721 //
 722 // getKey(key)
 723 // Gets keycode. If 'x' is pressed then it hides the lightbox.
 724 //
 725 function getKey(e){
 726         if (e == null) { // ie
 727                 keycode = event.keyCode;
 728         } else { // mozilla
 729                 keycode = e.which;
 730         }
 731         key = String.fromCharCode(keycode).toLowerCase();
 732
 733         if(key == 'x'){
 734         }
 735 }
 736
 737 // -----------------------------------------------------------------------------------
 738
 739 //
 740 // listenKey()
 741 //
 742 function listenKey () { document.onkeypress = getKey; }
 743
 744 // ---------------------------------------------------
 745
 746 function showSelectBoxes(){
 747         var selects = document.getElementsByTagName("select");
 748         for (i = 0; i != selects.length; i++) {
 749                 selects[i].style.visibility = "visible";
 750         }
 751 }
 752
 753 // ---------------------------------------------------
 754
 755 function hideSelectBoxes(){
 756         var selects = document.getElementsByTagName("select");
 757         for (i = 0; i != selects.length; i++) {
 758                 selects[i].style.visibility = "hidden";
 759         }
 760 }
 761
 762 // ---------------------------------------------------
 763
 764 function showFlash(){
 765         var flashObjects = document.getElementsByTagName("object");
 766         for (i = 0; i < flashObjects.length; i++) {
 767                 flashObjects[i].style.visibility = "visible";
 768         }
 769
 770         var flashEmbeds = document.getElementsByTagName("embed");
 771         for (i = 0; i < flashEmbeds.length; i++) {
 772                 flashEmbeds[i].style.visibility = "visible";
 773         }
 774 }
 775
 776 // ---------------------------------------------------
 777
 778 function hideFlash(){
 779         var flashObjects = document.getElementsByTagName("object");
 780         for (i = 0; i < flashObjects.length; i++) {
 781                 flashObjects[i].style.visibility = "hidden";
 782         }
 783
 784         var flashEmbeds = document.getElementsByTagName("embed");
 785         for (i = 0; i < flashEmbeds.length; i++) {
 786                 flashEmbeds[i].style.visibility = "hidden";
 787         }
 788
 789 }
 790
 791
 792 // ---------------------------------------------------
 793
 794 //
 795 // pause(numberMillis)
 796 // Pauses code execution for specified time. Uses busy code, not good.
 797 // Help from Ran Bar-On [ran2103@gmail.com]
 798 //
 799
 800 function pause(ms){
 801         var date = new Date();
 802         curDate = null;
 803         do{var curDate = new Date();}
 804         while( curDate - date < ms);
 805 }
 806 /*
 807 function pause(numberMillis) {
 808         var curently = new Date().getTime() + sender;
 809         while (new Date().getTime();
 810 }
 811 */
 812 // ---------------------------------------------------
 813 var myLightbox = null
 814 function initLightbox() { myLightbox = new Lightbox(); }
 815 Event.observe(window, 'load', initLightbox, false);