//--------------------------------------------------
// Author: Andrew Krilovs
// Project: Rodney Melville
// Copyright 2010
//
// Description:
// This is a simple plugin for jQuery, that allows
// you to easily display galleries of images with
// a smooth fading trasition and image pre-loading.
// 
// Usage:
// Select an element containing <img> tags with a
// jQuery, and the rest will be done for you, when you
// call gallery() on selected elements.
//
// Example:
//
// <div id="myGalleryDiv">
// 	<img src='www.someserver.com/pictures/pic01.jpg'/>
//  <img src='www.someserver.com/pictures/pic02.jpg'/>
// </div>
// <script>
// 	$('myGalleryDiv').gallery( );
// </script>
//--------------------------------------------------
function SmoothGallery ( )
{
	var width = 0;
	var height = 0;
	var images = [];
	var sel = "";
	var imageWaiting = -1;
	var currentImage = -1;
	
	this.addImage = function( src ) {
		var image = new Image( );
		$(image).attr('idx', images.length);
		$(this.sel).append( image );
		var gallery = this;
		
		var loadHandler = function(e) 
		{
			if (image.complete || (image.readyState == 'complete' && e.type == 'readystatechange')) 
			{
				$(image).attr('loaded', 1);
				var idx = parseInt( $(image).attr('idx') );
				if( gallery.imageWaiting == idx )
				{
					gallery.showImage( $(image).attr('idx') );
				}
			}
		}
		
		$(image).css( {display: 'none'} ).bind('load readystatechange', function(e) { loadHandler(e); });

		// This is a nasty nasty workaround required 
		// to catch onload event from cached images
		image.src = src;
		var _src = image.src;
		image.src = "#";
		image.src = _src;
		images.push( image );
	}
	
	this.set = function ( sel ) {
        $('.sgFrame, .sgPages').remove();
		images = [];
		this.sel = sel;
		var gallery = this;
		$(sel).children("div").each( function() {
			gallery.addImage( $(this).attr("src") );
		});

		if( !$(sel).children("div").length )
		  return false;

		$(sel).each( function() {
			var html  = "<div class='sgFrame'>";
			var pages = "<div class='sgPages'>";

			for( i = 0; i < images.length; i++ ) {
				pages += "<a href='#' idx='" + i + "'>" + (i + 1) + "</a>";
			}
			pages += "</div>";


            $(this).parent().prepend(pages);
            
            if( images.length < 2 )
                $('.sgPages').hide();

			$(this).append( html +  '<img class="sgImage" src="" style="display : none" /></div>');
			
			var gal = gallery;

			$(".sgPages a").click( function( event ) {
				event.preventDefault();
				$(this).siblings("a").css( { fontWeight: "normal" } );
				$(this).css( { fontWeight: "bold" } );
				gal.showImage( parseInt( $(this).attr('idx') ) );
			} );
		});
		
		// Show the first image by default
		// We do this by triggering a click event on the first link
		$(".sgPages a").eq(0).trigger("click");
	}
	
	this.showImage = function( index )
	{
		if( index == this.currentImage || index >= images.length )
			return;
		
		if( $(images[index]).attr('loaded') == 1 )
		{
			this.currentImage = index;
			this.imageWaiting = -1;
			var gallery = this;

			$('#project-text').fadeOut();
			$(".sgImage").fadeOut(function() {
				$(".sgImage").attr( "src", images[index].src );
				
				if( images[index].src.indexOf('hardwick_02.jpg') > -1 ) $(".sgImage").css({ marginTop : '-60px', position : 'absolute' });
				else  $(".sgImage").css({ marginTop : '0px', position : '' });

				$(".sgImage").fadeIn();
				
				if( index < 1 )
				    $('#project-text').fadeIn();

			});
		}
		else
		{
			this.imageWaiting = index;
		}
	}
};


var SG = undefined;
$.fn.gallery = function(opts) 
{
  return this.each(function()
  {
	SG = new SmoothGallery( );
	SG.set( $(this) );
  });
};