﻿
YAHOO.util.Event.onDOMReady( function() {
  StevenGnamGallery.init();
});

var StevenGnamGallery = function() {

  var $ = YAHOO.util.Dom.get;
  var yu = YAHOO.util;
  var yud = YAHOO.util.Dom;
  var yue = YAHOO.util.Event;
  var yuc = YAHOO.util.Connect;
  var currentImages;
  var currentShowcaseImageUrl;
  var cycleImages = true;
  var IMAGEDISPLAYLENGTH = 5000;

  return {
    init : function() {
      //find the gallery links, and wire up event handlers
      var galleryLinks = yud.getElementsBy(function(e) {
          return ('LI' == e.parentNode.tagName) ? true:false
        },'a', $('galleries')
      );    
      yue.addListener(galleryLinks, 'click', loadGallery);

      //wire up the arrow key events
      if ( YAHOO.env.ua.ie !== 0 ) 
        {yue.on('wrapper','keyup',onkeyup);}
		  else 
		    {yue.on(window,'keyup',onkeyup);}
		    
		  //randomly cycle images
		  setTimeout(loadRandomImage, IMAGEDISPLAYLENGTH);
    }, //init()

    getShowcaseImage :  function() {
      return yud.getElementsBy(function(el) {return true;},'img', $('showcaseImage'))[0];
    }
  };

  function loadRandomImage() {
    if (cycleImages) {
      var transaction = yuc.asyncRequest('GET', 'RandomImageUrl.ashx?' + Math.random(), {
        success: function(o) {
          loadShowcaseImage(o.responseText);
          setTimeout(loadRandomImage, IMAGEDISPLAYLENGTH);
        },
        failure: function(o) {
          //do nothing
        }
      }, null);
    }
  }

  function loadGallery(e) {
    yue.stopEvent(e);
    //quit cycling images
    cycleImages = false;

    //clear out the previous gallery
    $('thumbnails').innerHTML = '';

    var transaction = yuc.asyncRequest('GET', 'Gallery.ashx?gallery=' + this.title, {
      success: function(o) {
        var h2 = document.createElement('h2');

        currentImages = eval('(' + o.responseText + ')');

        h2.innerHTML = currentImages.gallery;
        $('thumbnails').appendChild(h2);
        
        //todo: load the first thumbnail into the showcase image
        loadShowcaseImage(currentImages.fullsizeImages[0]);
        
        //load the thumbnails
        loadThumbnails(currentImages)
        
      },
      
      failure: function(o) {
        alert('Sorry, the gallery couldn\'t be loaded.  There was a problem contacting the server.');
      }
    }, null);
  } //loadGallery()

  function loadShowcaseImage(newImageUrl) {
    currentShowcaseImageUrl = newImageUrl;

    var img = StevenGnamGallery.getShowcaseImage();
    var fadingOut = true;
    var newImageLoaded = false;
    
    var fadein = function() {
      //fade in the image
      img.src = imgPreload.src;
      fadeinAnim = new yu.Anim(img, {opacity: {from: 0, to: 1}}, 1, yu.Easing.easeBoth);
      fadeinAnim.animate();
      
      if (typeof(StatCounterLogVisit) != 'undefined') {
        StatCounterLogVisit(img.src)
      }
    };

    var imgPreload = new Image();
    imgPreload.onload = function() {
      newImageLoaded = true;

      if (fadingOut) {
        return;
      }
      else {
        fadein();
      }
    }
      
    imgPreload.src = newImageUrl;

    //fade out the image
    var fadeout = new yu.Anim(img, {opacity: {to: 0}}, 1, yu.Easing.easeBoth);
    
    fadeout.onComplete.subscribe(function() {
      fadingOut = false;
      
      if (newImageLoaded) {
        fadein();
      }
      
    }); //fadeout.onComplete
    
    fadeout.animate();  
  }

  function loadThumbnails(images) {
    //build the ul elements from the images object
    var ul = document.createElement('ul'),
      ul2 = document.createElement('ul'),
      ul3 = document.createElement('ul');
    var li,a,img;

    $('thumbnails').appendChild(ul);
    $('thumbnails').appendChild(ul2);
    $('thumbnails').appendChild(ul3);
    
    for (var i = 0; i < images.imageThumbnails.length; i++) {
      li = document.createElement('li');
      a = document.createElement('a');
      img = document.createElement('img');

      img.src = images.imageThumbnails[i];
      a.href = images.fullsizeImages[i];
      
      li.appendChild(a);
      a.appendChild(img);
      
      //wire up the click event
      yue.addListener(a, 'click', function(e) {
        yue.stopEvent(e);
        loadShowcaseImage(this.href);
      });
      
      switch (i % 3) {
        case 0:
          ul.appendChild(li);
          break;
        case 1:
          ul2.appendChild(li);
          break;
        case 2:
          ul3.appendChild(li);
          break;
      }
    } //for
  } //loadThumbnails

  function onkeyup(e) {
      switch (e.keyCode) {
        //left arrow
        case 37:
          previousImage();
          break;
        //right arrow
        case 39:
          nextImage();
          break;
      }
  } //onkeyup()

  function previousImage() {
    var currentImageIndex = getCurrentImageIndex();
    if (currentImageIndex > 0) {
      loadShowcaseImage(currentImages.fullsizeImages[currentImageIndex - 1]);
    }
  } //previousImage
  
  function nextImage() {
    var currentImageIndex = getCurrentImageIndex();
    if (currentImageIndex < currentImages.imageThumbnails.length - 1) {
      loadShowcaseImage(currentImages.fullsizeImages[currentImageIndex + 1]);
    }
  }  //nextImage

  function getCurrentImageIndex() {
    for (var i = 0; i < currentImages.imageThumbnails.length; i++) {
      if (currentImages.fullsizeImages[i] === currentShowcaseImageUrl) {
        return i;
      }
    }
    return -1;
  }


}(); //StevenGnamGallery
