/*
 - Description
	jQuery Dynamic Slideshow Plugin
 - Author
	Yusuf Najmuddin (ynzi.com)
 - Licence
	GNU Lesser General Public License
 - Usage
	$("#slideshow").dynamicSlideshow();

	OR

	$("#slideshow").dynamicSlideshow({duration: 5000});

 - Date 6/30/2009
 - Version 1.0

 - Extended 12/13/2010 to add a transparent overlay of the image alt text
   Julia Collins
   National Snow and Ice Data Center, University of Colorado
*/


jQuery.fn.dynamicSlideshow = function(attr) {
	attr = attr || {};
	attr.duration = attr.duration || 3000;

        // The textDuration and fadeTextDuration values were use when the
        // caption was animated to slide in and out of the photo area.
        // This must be true:
        //   textDuration + ( 2 * fadeTextDuration ) <= attr.duration
        // Show the text about 75% of the time the image is displayed.
        var textDuration = (attr.duration/4 * 3) - 100;

        // Fade the text in and out over a shorter period
        var fadeTextDuration = attr.duration/8;

        // Photo fade time.
        var fadeDuration = 1000;

	function initSlider(container, img, altText) {
		var curr = 1;
		setInterval( function(){

			if (curr == img.length) {
				curr = 0;
			}

			var i = new Image();
			$(i).load(function(){
				$(container).append(this);
				$(container).find('img:first').css({'z-index': 1});
				$(this).css({opacity: 0.0, 'z-index': 2}).animate({opacity: 1.0}, fadeDuration, function() {
						$(container).find('img:first').remove();
					})
			}).attr({
                            src: img[curr],
                            alt: altText[curr]
                        }).css({position:'absolute',top:0,left:0,'z-index':8});

                        // Show the text overlay. Hard-code to use the same fade duration as
                        // the photo (rather than the fadeTextDuration and
                        // textDuration for the previous implementation).
                        showAltText(altText[curr], fadeDuration*2, fadeDuration*2);
                        curr++;

		}, attr.duration );
	};

        function showAltText(altText, fadeTextDuration, showTextDuration) {
            $("#altTextOverlay").hide()
            $("#altTextOverlay").text(altText);
            $("#altTextOverlay").css({'z-index':10});

            // Previously used this slide effect:
            //$("#altTextOverlay").show('slide', { direction: "down" }, fadeTextDuration);
            $("#altTextOverlay").fadeIn(fadeTextDuration)

            // Slide caption back out of the photo area.
            //setTimeout( function() {
            //        $("#altTextOverlay").hide('slide', { direction: "down" }, 500 );
            //}, showTextDuration ) ;

        }

	$(this).each(function(){
		var img = [];
                var altText = [];
		$(this).find("a").each(function(){
			img.push($(this).attr("href"));		
                        
                        // gather up the alt text values
                        altText.push($(this).attr("alt"));
		});

		var j = new Image();
		var container = this;
		$(this).empty();
		$(j).attr({
                        src: img[0],
                        alt: altText[0]
                    }).css({position:'absolute',top:0,left:0,'z-index':0}).load(function(){
			$(container).append(this);

                        $("#altTextBackground").css("opacity", 0.6);

                        // show the text overlay for the first image
                        showAltText(altText[0], fadeDuration*2, fadeDuration*2);

                        // now loop on the images
			initSlider(container, img, altText);
		});
	});
}