var image_uri = new Array(
 '/images/banner/IMG_5964_snapshot_4x6.jpg',
 '/images/banner/IMG_5222_snapshot_4x6.jpg',
 '/images/banner/IMG_5701_snapshot_4x6.jpg',
 '/images/banner/IMG_5251_snapshot_4x6.jpg',
 '/images/banner/IMG_5526_snapshot_4x6.jpg',
 '/images/banner/IMG_6122_snapshot_4x6.jpg',
 '/images/banner/IMG_5574_snapshot_4x6.jpg'
);

var img;

function theRotator() {

 // Define the image <li>'s and set their opacity to 0
 for (var i=1; i<image_uri.length ; i++) {
    $('div#rotator ul').append("<li id='" + i + "'><img></li>");
 }

 $('div#rotator ul li').css({opacity: 0.0}).css({display:'none'}).css({margin: '0'})
 .each( function (i) { $('img', this).attr('src', image_uri[i]); } );

 //Get the first image and display it (gets set to full opacity)
 $('div#rotator ul li:first').addClass('show').css({display: 'block'}).css({opacity: 1.0});

 // Pre-load the next image
 img = new Image();
 img.src = image_uri[1];

 //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
 setInterval('rotate()',10000);

}

function rotate() {

 //Get the first image
 var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

 //Get next image, when it reaches the end, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
    //Set the fade in effect for the next image, the show class has higher z-index
 next.css({opacity: 0.0})
 .css({display: 'block'})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);

 //Hide the current image
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');

 // Pre-load the next image
 // Get the id of the next li
 id = next.next().attr('id');
 if (id) {
//   alert('getting for id '+id);
   img = new Image();
   img.src = image_uri[id];
 }
}


$(document).ready(function() {
 //Load the slideshow
 theRotator();
});