/* 
 Javascript Generic Gallery --- Jamie Lentin (01 43706)
 USAGE:-
   Include into page with:-
   <script language="JavaScript" src="js/efmch_addOnLoad.js" type="text/javascript"></script>
   <script language="JavaScript" src="js/efmch_imageGallery.js" type="text/javascript"></script>
   
   Make an image gallery with:-
   <div id="imageGallery" interval="(# of milliseconds before switch. Default 1000)"
                          controls="(yes|no, whether to add forward/back/start/stop controls.  Default yes)" 
                          autostart="(yes|no, whether to start gallery rotation on load.  Default yes)">
     <div class="galleryItem firstItem">....</div>
     <div class="galleryItem">....</div>
     <img class="galleryItem"/>
     <p class="galleryItem">....</p>
       ... (any other nodes of class galleryItem to rotate between)
   </div>
   
   NB: class="firstItem" isn't strictly necessary, but avoids the image gallery doing a little skip in IE.   
*/


function changeImage(gallery, imgIndex) {
// Rotate displayed gallery item forward of back by (imgIndex)
  if(gallery) if(gallery.galleryItems) {
    for(var i = 0; i<gallery.galleryItems.length; i++) {
      if(gallery.galleryItems[i].style.display == 'block') {
        gallery.galleryItems[i].style.display = 'none';
        gallery.galleryItems[(gallery.galleryItems.length+i+imgIndex) % gallery.galleryItems.length].style.display = 'block';              
        return;
      }
    }
    gallery.galleryItems[0].style.display = 'block';
  }
  return;
}

function slideShowGo(gallery) {
// Start gallery going
  if(gallery) if(!gallery.timerRunning) {
    gallery.timer = window.setInterval("changeImage(document.getElementById('"+gallery.id+"'),1)", gallery.getAttribute('interval') ? gallery.getAttribute('interval') : 1000 );
    gallery.timerRunning = true;
  }
}
function slideShowStop(gallery) {
// Stop the gallery
  if(gallery) if(gallery.timerRunning) {
    window.clearInterval(gallery.timer);
    gallery.timerRunning = false;
  }
}

function makeGallery(gallery) {        
// Initalise division into a gallery
  
  // Add controls at bottom
  var galleryRef = "document.getElementById('"+gallery.id+"')";  
  if(gallery.getAttribute('controls')!='no') gallery.innerHTML += '<span class="controls"><img src="/newtalent/images/gallery_prev.gif" onclick="javascript:changeImage('+galleryRef+',-1)" alt="Previous" />'
                                                               +  '<img src="/newtalent/images/gallery_play.gif" onclick="javascript:slideShowGo('+galleryRef+')" alt="Start" />'
                                                               +  '<img src="/newtalent/images/gallery_pause.gif" onclick="javascript:slideShowStop('+galleryRef+')" alt="Stop" />'
                                                               +  '<img src="/newtalent/images/gallery_next.gif" onclick="javascript:changeImage('+galleryRef+',1)" alt="Next" /></span>';
  
  // Work out the array of gallery items
  gallery.galleryItems = new Array(); var nodes = gallery.childNodes;
  for(var i = 0; i < nodes.length; i++) {
    if(nodes[i].className) if(nodes[i].className.indexOf('galleryItem') > 0) gallery.galleryItems.push(nodes[i]);
  }

  // Hide everything bar the first item --- necessary anymore?  Only vaugely useful when used with IE & no firstItem.
  var isFirst = true;
  for(var i = 0; i<gallery.galleryItems.length; i++) {
    if(gallery.galleryItems[i].className.indexOf('galleryItem')>=0) {
      gallery.galleryItems[i].style.display = isFirst ? 'block' : 'none';
      isFirst = false;
    }
  }
  
  // Start it unless autostart is explicitly disabled
  if(gallery.getAttribute('autostart')!='no') slideShowGo(gallery);
}

function makeGalleries() {
// Find divisions that should be galleries, and magic them
  var gallery = document.getElementById('imageGallery'); // Should look for a class or at least allow more than one.
  if(gallery) makeGallery(gallery);
}

// Style to hide gallery items bar the first.  Dodgy hack?  Not exactly DOM, but will prolly work more universially.
document.write('<style>div#imageGallery .galleryItem { display: none; }\ndiv#imageGallery .firstItem, div#imageGallery .galleryItem:first-child { display: block; }</style>');

addOnLoad(makeGalleries);