// Keep track of which image we're current looking at
var curImage = null;

// Reposition the gallery to be at the center of the page even when the page has been scrolled
function adjust(){

   // Set the adjusted dimensions of the element
   //var layer = ID("overlay");
   //setWidth(layer, getActualWidth(ID('body')));
   //setHeight(layer, getActualHeight(ID('body')));

   // Locate the gallery
   var obj = ID("gallery");

   // Make sure that the gallery exists
   if ( !obj ) return;

   // Find its current height and width
   var w = getActualWidth( obj );
   var h = getActualHeight( obj );

   // Position the box, vertically, in the middle of the window
   var t = getScrollY() + ( getViewHeight() / 2 ) - ( h / 2 );

   // But no heigher than the top of the page
   if ( t < 0 ) t = 0;

   // Position the box, horizontally, in the middle of the window
   var l = getScrollX() + ( getViewWidth() / 2 ) - ( w / 2 );

   // But no less than the left of the page
   if ( l < 0 ) l = 0;

   // Set the adjusted position of the element
   setY( obj, t );
   setX( obj, l );

};

// Readjust the position of the gallery every time the user scrolls the page or resizes the browser
// zatial vypnute posuvanie obrazkov 080620
//window.onresize = document.onscroll = adjust;

// Start a slideshow of all the images within a particular gallery
function startShow(obj) {
   // Locate all the individual images of the gallery
   var elem = T( "li", obj );

   // Locate the overall display gallery
   var gallery = ID("gallery");

   // Go through each of the matched gallery images
   for ( var i = 0; i < elem.length; i++ )  new function() {
      // Remember which current element is being referenced
      var cur = elem[i];

      // We're going to show a new image every 5 seconds
      setTimeout(function(){
         // Show the specific image
         showImage(cur);
         // And start fading it out after 3.5 seconds (for a 1 second fade)
         setTimeout(function(){
            fadeOut( gallery, 0, 10 );
         }, 3500 );
      }, i * 5000 );
   };

   // And then hide the overlay when it's all over
   setTimeout( hideOverlay, 5000 * elem.length );

   // But show the overlay, as the slideshow is just starting
   showOverlay();
}

// Show the current gallery image
function showImage(cur) {

   // Remember which image we're currently dealing with
   curImage = cur;

   // Find the gallery image
   var img = ID("gallery_image");

   // Remove the image, if there's one already there
   if ( img.firstChild )
      img.removeChild( img.firstChild );

   // And add our new image in, instead
   img.appendChild( cur.firstChild.cloneNode( true ) );
   /*
   var small_img = cur.firstChild.innerHTML;
   var re1 = /&amp;size=(\d{0,9})/g;
   var big_img   = small_img.replace(re1,'');
   alert(big_img);
   */

   var img_cache = T('img',ID('gallery_image'));
   //var re = /&amp;size=(\d{0,9})/g;
   var re = /&size=(\d{0,9})/g;
   img_cache[0].src = img_cache[0].src.replace(re,'');
   // click on image
   //img_cache[0].onclick = hideOverlay;
   img_cache[0].onclick = function() {
      hideOverlay();
   }

   // Replace source location of image file
   //var img_href = ID("gallery_image").innerHTML;
   //var re = /&amp;size=(\d{0,9})/g;
   //img.innerHTML = img_href.replace(re,'');

   // We're setting the caption of the gallery image to the 'alt' contents of the regular image
   //ID("gallery_title").innerHTML = cur.firstChild.firstChild.alt;
   ID("gallery_title").innerHTML = cur.firstChild.alt;

   // Hide the next link if we're at the end of the slideshow
   if ( !setNext(cur) )
      hide( ID("gallery_next") );

   // Otherwise, make sure that it's visible
   else
      show( ID("gallery_next") );

   // Hide the previous link if we're at the start of the slideshow
   if ( !setPrev(cur) )
      hide( ID("gallery_prev") );

   // Otherwise, we need to be sure that it's visible
   else
      show( ID("gallery_prev") );

   // Locate the main gallery
   var gallery = ID("gallery");

   // Set the correct class (so that it's the correct size)
   gallery.className = cur.className;

   // Then fade it in smoothly
   fadeIn( gallery, 100, 10 );

   // Make sure that the gallery is positioned in the right place
   // on the screen
   adjust();
}

// Find the previous image and show it
function prevImage() {
   // Locate the previous gallery image and show it
   showImage( setPrev( curImage ) );

   // Prevent the link from operating as normal
   return false;
}

// Find the next image and show it
function nextImage() {
   // Locate the next gallery image and show it
   showImage( setNext( curImage ) );

   // Prevent the link from operating as normal
   return false;
}

// Show the overlay
function showOverlay() {
   // Find the overlay
   var over = ID("overlay");

   // Make it as tall and wide as the entire page (this helps with scrolling)
   over.style.height = getPageHeight() + "px";
   over.style.width  = getPageWidth() + "px";

   // And fade it in
   fadeIn( over, 10, 10 );

   // disable scrolling
   var bodybox = ID("bodybox");
   //bodybox.style.overflow = "hidden";
   //bodybox.scroll         = "no";
   //document.body.scroll   = "no";

}

// Hide the overlay and the current gallery
function hideOverlay() {
   // Make sure that we reset the current image
   curImage = null;

   // and hide the overlay and gallery
   hide( ID("overlay") );
   hide( ID("gallery") );

   // enable scrolling
   var bodybox = ID("bodybox");
   //bodybox.style.overflow = "scroll";
   //bodybox.scroll         = "auto";
   //document.body.scroll   = "auto";

}

// Wait for the document to finish loading before modifying or traversing the DOM
window.onload = function() {
   /*
    * Create the following DOM structure:
    * <div id="overlay"></div>
    * <div id="gallery">
    *     <div id="gallery_image"></div>
    *     <div id="gallery_prev"><a href="">&laquo; Prev</a></div>
    *     <div id="gallery_next"><a href="">Next &raquo;</a></div>
    *     <div id="gallery_title"></div>
    * </div>
    */

   // Create the transparent, gray, overlay
   var overlay = document.createElement("div");
   overlay.id = "overlay";

   // Make it so that when the grey background is clicked, the gallery and background are hidden
   //overlay.onclick = hideOverlay;

   // Add the overlay into the DOM
   document.body.appendChild( overlay );

   // Create the overall gallery holder
   var gallery = document.createElement("div");
   gallery.id = "gallery";

   // And add in all the organization divs
   gallery.innerHTML = '<div id="gallery_image"></div>\n' +
                       '<div id="gallery_prev"><a href="">&laquo; späť</a></div>\n' +
                       '<div id="gallery_next"><a href="">ďalej &raquo;</a></div>\n' +
                       '<div id="gallery_title"></div>\n';

   // Add the gallery into the DOM
   document.body.appendChild( gallery );

   // Handle support for which the next and previous links are clicked within the gallery
   ID("gallery_next").onclick = nextImage;
   ID("gallery_prev").onclick = prevImage;

   // Locate all the galleries on the site
   var g = C( "gallery", "ul" );

   // Go through all of them
   for ( var i = 0; i < g.length; i++ ) {

      // And locate all the links to the slideshow images
      var images = T( "img", g[i] );

      // Go through each of the image links
      for ( var k = 0; k < images.length; k++ ) {
         //alert(images[k].src)
         //return false;
         images[k].onclick = function(){
            // Show the background layer
            showOverlay();

            // Show the image, in the gallery
            showImage( this.parentNode );
            //alert(this.parentNode); // posielame mu LI Element
            //alert(this.parentNode.firstChild.src); // link na obrazok maly
            // Make sure that the browser doesn't go the image, like it normally would
            return false;
         }
      }

      // And locate all the links to the slideshow images
      var link = T( "a", g[i] );

      // Go through each of the image links
      for ( var j = 0; j < link.length; j++ ) {
      /*
         // Make it such that, when clicked, they display the image gallery instead of going to the image
         link[j].onclick = function(){
            // Show the background layer
            showOverlay();
            // Show the image, in the gallery
            showImage( this.parentNode );
            // Make sure that the browser doesn't go the image, like it normally would
            return false;
         };
      */
      }

   /*
   // We're going to create some extra contextual information surrounding the slideshow

   // Create the slideshow header, wrapper
   var div = document.createElement("div");
   div.className = "slideshow";

   // Show the name of the slideshow, based upon the title of the gallery
   var span = document.createElement("span");
   span.innerHTML = g[i].title;
   div.appendChild( span );

   // Create a link so that we can view all the gallery images as a slideshow
   var a = document.createElement("a");
   a.href = "";
   a.innerHTML = "&raquo; prezentácia";

   // Make it so that it starts the slideshow whenever it's clicked
   a.onclick = function(){
      startShow( this.parentNode.nextSibling );
      return false;
   };

   // Add the new navigation and header to the page
   div.appendChild( a );
   g[i].parentNode.insertBefore( div, g[i] );
   */
   }
};