// JavaScript Document
// Ultra Simple Slideshow Usage
// 1. Attach Jquery 1.2.6 (or higher) to your page, and this script file.
//	2. Create a div with id 'slideshow' and then set its heigth via style and then put images in it.
//	3. Attach the Slideshow css to the page
//
//  Examople:
//		<div id="slideshow1" class="slideshow" style="height:300px>
//   	 	<img src="images/angela.jpg" alt="" class="activeSlide"/>
//			<img src="images/becky.jpg" alt=""  />
//			<img src="images/christy.jpg" alt="" />
//		</div>
//  PARAMETERS
var slideshowFadeSpeed = 1000;  // in ms 
var slideshowImageTransition = 5000; //in ms 


// Functions
function slideSwitch(myId) {
    //alert("starting with" + myId);
	 var $active = $('#'+ myId +' IMG.activeSlide');

    if ( $active.length == 0 ) $active = $('#'+ myId +'  IMG:last');
		
    var $next =  $active.next().length ? $active.next()
        : $('#'+ myId +'  IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('activeSlide')
        .animate({opacity: 1.0}, slideshowFadeSpeed, function() {
          
			  $active.removeClass('activeSlide last-active');
				
        });
}

$(function() {		
   // $(".slideShow").
	 $(".slideshow").each(
		function() {
      	//alert(this.id);
			var targetId = this.id;
			setInterval( "slideSwitch('"+targetId+"')", slideshowImageTransition );
		}
	)
//	}
//	// 
})