$(function() { 
    // retrieve list of slides from server 

	$.getJSON('slidelist.php', startSlideshow);
	
	function startSlideshow(stuff) { 
	
        /* server returns an array of slides which looks like this: 
        [ 
            'images/beach2.jpg', 
            'images/beach3.jpg', 
            'images/beach4.jpg', 
        ] 
        */ 

        var totalSlideCount = 1 + stuff.length; 
         
        var $slideshow = $('#slideshow2'); 
		
		
		Array.prototype.shuffle = function (){
  		  var i = this.length, j, temp;
    		if ( i == 0 ) return;
    		while ( --i ) {
        		j = Math.floor( Math.random() * ( i + 1 ) );
        		temp = this[i];
        		this[i] = this[j];
        		this[j] = temp;
    		}
		};


		stuff.shuffle();	
			
		 	var slides = new Array();
			var alts = new Array();
			var urls = new Array();
			k = 0;
			for (i = 0; i < 33; i++) {
				var turtle;
				frog = stuff[i][0];
				toad = stuff[i][1];
				turtle = stuff[i][2];
				slides.push(frog);
				alts.push(toad);
				urls.push(turtle);
				}

		i = 0;	
		for (i = 0; i < 33; i++)	
        	$slideshow.append('<a href="highlights/'+urls[i]+'"><img src="images/slides/slide'+slides[i]+'.jpg" width="290" height="240" alt="'+alts[i]+'" /></a>'); 
 
        // start slideshow 
        $('#slideshow2').cycle({
            fx: 'scrollLeft', 
			speed:  2000,
			timeout:  4000
        }); 
		    
   };
});