// JavaScript Document

function slideSwitch(){
	var $active=$(".homePageSlideshow IMG.active");
	if($active.length==0){$active=$(".homePageSlideshow IMG:last");}
	var $next=$active.next().length?$active.next():$(".homePageSlideshow IMG:first");
	$active.addClass("last-active");
	$next.css({opacity:0}).addClass("active").animate({opacity:1},1000,function(){$active.removeClass("active last-active");});
}

$(function(){
	setInterval("slideSwitch()",5000);
});

// create our transition as a plugin
$.fn.crossfade = function () {
    // get the target from the backgroundImage
	var original = $(this).css('backgroundImage');
    var target = $(this).css('backgroundImage').split("-0").join("-1");
        
    // similar effect as single image technique, except using .animate 
    // which will handle the fading up from the right opacity for us
    $(this).hover(function () {
      $(this).stop().animate({
          background: "url($target)"
      }, 250);
    }, function () {
      $(this).stop().animate({
          background: "url($original)"
      }, 3000);
    });
};

// Not only when the DOM is ready, but when the images have finished loading,
// important, but subtle difference to $(document).ready();
$(function(){
  $('.fade').crossfade();
});