// JQUERY IMAGE GALLERY
// 
// jquery.gallery.js V2.0
// http://www.jamie-connolly.co.uk/index.php/blog/javascript/jquery-gallery/
//
// ORIGINAL AUTHOR WEBSITE
// http://enhance.qd-creative.co.uk/2008/07/12/an-image-gallery/
// 

var hypes = [];

jQuery.fn.getHyper = function() {	
    var hypers = this;
    
    $(hypers).each(function(i){
        hypes[i] = [this.href];
    })
}

jQuery.fn.gallery = function(sSpeed, tSpeed, showList, autoStart, tLocation, styling) {	
		var gallery = this;
		var img = [];
		var currentImage = 0;
		var speed = 5000; if(sSpeed) speed = (parseInt(sSpeed,10)); // GET SPEED
		var transitionSpeed = 400; if(tSpeed) transitionSpeed = (parseInt(tSpeed,10)); // GET SPEED
		var take = 0;
		var slideShowActive = false; // DETERMINES WHEN THE SLIDE SHOW IS ACTIVELY RUNNING
		var firstTime = true; // MAKE SURE FIRST FADEOUT DOESNT OCCUR
		var target = 'body'; if(tLocation) target = tLocation; // GET THE TARGET LOCATION
		
		if(autoStart == true){slideShowActive = true;}
		
		// THIS IS THE OUTPUT OF THE GALLERY | ITEMS WILL BE LATER PLACED IN BETWEEN THE <ul></ul> SECTION
		var galleryStructure = '<div id="img-gallery"><a class="img-hyp" href=""><img style="display:none;border:none;"/></a><ul style="margin-top:360px; width:680px;"></ul><div id="img-description"></div></div>';
		
		var started = false;
		$(gallery).each(function(i){
			$(this).hide();
			img[i] = [this.src,this.alt,$(this).attr('longdesc')]; // GET IMAGE
			
			// ONCE IMAGE LOADED IN REMOVE IT FROM PAGE
			this.onload = function(){
				$(this).remove();
			}
			
			// ON LAST IMAGE START
			gallery[gallery.length-1].onload = function(){
				$(this).remove();
				start();
				started = true;
			}
			
			//setTimeout(function(){if(!started) start();},2000)
			
		})
		
		// ###################################################
		// START FUNCTION
		// ###################################################
		function start(){
			$('.gallery').remove();// REMOVE ORIGINAL GALLERY
			$(target).prepend(galleryStructure); // DESTINATION OF GALLERY (YOU CAN CHANGE THIS)
			
			// THIS WILL OUTPUT THE PLAY/STOP BUTTON AND THE IMAGE LIST (PROVIDED THAT THERE IS MORE THAN ONE IMAGE)
			if(showList == true){
				if(gallery.length > 1){
					// ADD THE PLAY/STOP BUTTON
					$('#img-gallery ul').append('<li style="padding-right:550px;list-style:inside;"><a href="#" id="playstop" title="Play/Stop SlideShow">&nbsp;</a></li>');
				
					// ADD IN LINKS
					$(img).each(function(i){
						$('#img-gallery ul').append('<li style="list-style:outside;"><a href="#img' + (i + 1) + '">' + (i + 1) + '</a></li>');
					})
				}
			}
			
			$('#img-gallery #img-description').css({opacity:0}); // HIDE DESCRIPTION
			$('#img-gallery ul').hide(); // HIDE LIST
			
			// ###################################################
			// IF LINK IS CLICKED (NOT PLAY/STOP)
			// ###################################################
			$('#img-gallery ul a:not(#playstop)').click(function(){
																 
				var imgToLoad = $(this).attr('href'); // GET LINK HREF
				imgToLoad = imgToLoad.split('#'); // SPLIT HREF TO GET IMAGE NUMBER
				imgToLoad = parseInt(imgToLoad[1].substr(3)) - 1; // RETRIEVE IMAGE NUMBER
				changeImage(imgToLoad); // CHANGE THE IMAGE TO THE SPECIFIED NUMBER
				currentImage = imgToLoad + 1; // SETUP SLIDESHOW FOR NEXT IMAGE
				
				if(slideShowActive == true) $('#img-gallery ul a#playstop').click(); // TRIES TO STOP SLIDESHOW WHEN PRESSED
				return false;
			})
			
			// ###################################################
			// CALLED WHEN PLAY/STOP LINK IS CLICKED # TOGGLE(STOP, PLAY)
			// ###################################################
			$('#img-gallery ul a#playstop').toggle(
			   	function(){
					$(this).removeClass('stop');
					$(this).addClass('play'); // CHANGE PLAY/STOP CLASS
					stopSlideShow();
					return false;
			   	},
				function(){
					$(this).removeClass('play');
					$(this).addClass('stop'); // CHANGE PLAY/STOP CLASS
					startSlideShow();
					return false;
				}
			);
			
			// ###################################################
			// START SLIDE SHOW IF AUTO START ENABLED
			// ###################################################
			if(slideShowActive == true){
				if(gallery.length > 1){
				   $('#img-gallery ul a#playstop').addClass('stop');
				   startSlideShow();
				}
			}else{
				$('#img-gallery ul a#playstop').addClass('play'); 
				changeImage(0); // LOAD FIRST IMAGE IF AUTO START OFF
				currentImage = 1; // OFFSET CURRENT IMAGE IN ORDER TO SHOW NEXT IMAGE ON PLAY
				$('#img-gallery ul a#playstop').click(); // OFFSET TOGGLE SO NEXT CLICK TURNS GALLERY ON
			}
			
			// ###################################################
			// CHNAGE IMAGE FUNCTION
			// ###################################################
			function changeImage(n, callback){
				currentImage = n;
				
				// IF FIRST START, DO NOT FADE OUT FIRST, JUST START FROM SWITCH OVER
				if(firstTime == true){
					firstTime = false;
					switchOver();
				}else{
					fadeOutAll();
				}
				
				// FADE OUT ALL ITEMS
				function fadeOutAll(){
					$('#img-gallery #img-description').fadeOut(transitionSpeed); // FADE OUT DESCRIPTION
					$('#img-gallery ul').show(); // FADE OUT LIST
					$('#img-gallery img').fadeOut(transitionSpeed, switchOver); // GOT TO SWITCH OVER AFTER IMAGE HAS FADED OUT
				}
				
				// CHNAGE THE IMAGE ATTRIBUTES
				function switchOver(){
					
					$('#img-gallery ul a').removeClass('active');
					
					var originalWidth = $('#img-gallery img').width(); // GET WIDTH OF CURRENT IMAGE TO DETERMINE IF LIST LINK FADES IN OR OUT
					var originalHeight = $('#img-gallery img').height(); // GET WIDTH OF CURRENT IMAGE TO DETERMINE IF LIST LINK FADES IN OR OUT
					
					$('#img-gallery img').attr('src', img[n][0]).attr('alt', img[n][1]).attr('title', img[n][1]); // REPLACE IMAGE
					$('#img-gallery a.img-hyp').attr('href', hypes[n]); // REPLACE IMAGE LINK
					$('#img-gallery #img-description').html('<p>' + img[n][2] + '</p>'); // REPLACE DESCRIPTION
					
					var width = $('#img-gallery img').width(); // GET WIDTH OF NEW IMAGE
					var height = $('#img-gallery img').height(); // GET WIDTH OF OLD IMAGE
					
					if(originalWidth == width && originalHeight == height){
						fadeInAll();
					}else{
						$('#img-gallery').animate({width: width,height: height}, transitionSpeed, fadeInAll);
					}
						
				}
				
				// FADE IN ALL ITEMS
				function fadeInAll(){
					$('#img-gallery #img-description').fadeIn(transitionSpeed); // FADE IN DESCRIPTION
					$('#img-gallery img').fadeIn(transitionSpeed); // FADE IN IMAGE
					//$('#img-gallery ul').fadeIn(transitionSpeed); // FADE IN GALLERY LIST
					$('#img-gallery ul').show(); // FADE IN GALLERY LIST
					
					$('#img-gallery ul a:eq(' + (n + 1 - take) + ')').addClass('active');
					if (callback) callback();
					if (styling) styling();
				}
				
				// IF NO DESCRIPTION THEN HIDE DESCRIPTION SECTION
				if (img[n][2] == undefined) {
					$('#img-gallery #img-description').hide();
				}else {
					$('#img-gallery #img-description').show();
				}
			}
			
			// ###################################################
			// START SLIDE SHOW USING currentImage
			// ###################################################
			function startSlideShow(){
				if (currentImage == gallery.length) {currentImage = 0;}
				window['galleryTimeout'] = setTimeout(function(){startSlideShow()}, speed)
				changeImage(currentImage, function(){eval(galleryTimeout);});
				currentImage++;
				slideShowActive = true;
			}
			
			// ###################################################
			// STOP SLIDE SHOW
			// ###################################################
			function stopSlideShow(){
				slideShowActive = false;
				clearTimeout(eval(galleryTimeout));
			}
		}
}