document.write('<div id="slideshow" style="position : absolute; width : 300px; height : 300px; margin-left : 25px;" align="center"></div>');

maxHeight = 300;
maxWidth = 300;

start_slideshow(3000);
	
   function start_slideshow(delay) {
       setTimeout(switch_slides(0, '', delay), 0);
    }
    
          
    function switch_slides(i, lastID, delay) {
       return (function() {

			// grab a random image name and then call the preload
			var myAjax = new Ajax.Request(
			'/cgi-bin/random_image.cgi?rand=' + Math.random(), 
			{
				method: 'get', 
				onComplete: preload
			});
				
			function preload(theResponse) {
				// preload the image so we can get height and width
			
				imgName = theResponse.responseText;

				imgPreloader = new Image();
				imgPreloader.src = 'http://www.carolinagalleries.com/img/art/' + imgName;
				
				// work around safari onload bug
				if (navigator.userAgent.toLowerCase().indexOf('safari')!=-1) {
					 myTimeout = setTimeout(function(){showSlide(imgName)},4000);
				}
				
				imgPreloader.onload = function() {
					// once the image is loaded we can proceed with the show
					
					// work around safari onload bug
					if (navigator.userAgent.toLowerCase().indexOf('safari')!=-1) {
						clearTimeout(myTimeout);
					}
					
					showSlide(imgName);
				}			
			}

			
			function showSlide(imgName) {
				var myImg = document.createElement('img');
				myImg.setAttribute('id','slideshow' + i);
				myImg.setAttribute('src','http://www.carolinagalleries.com/img/art/' + imgName);
				myImg.style.display = 'none';
				myImg.style.position = 'absolute';
				
				
				// make the height fit within set height
				if (imgPreloader.height > maxHeight) {
					var ratio = maxHeight / imgPreloader.height
					var newWidth = imgPreloader.width *  ratio;
			
					imgPreloader.height = maxHeight;
					imgPreloader.width = newWidth;
					
					myImg.height = maxHeight;
					myImg.width = newWidth;
					
					centerPic(myImg.height, myImg.width );
					
				} else {
					centerPic(imgPreloader.height, imgPreloader.width );
				}
				
			
					function centerPic(h,w) {
						// center id horiz and vert
						myImg.style.top = (maxHeight/2) - (h /2);
						myImg.style.left = (maxWidth/2) - (w /2);
					}
				

				document.getElementById('slideshow').appendChild(myImg);

				if (i > 0 ) {
					// fade out the last one if is not the first one		
					// remove the node when done
					Effect.Fade(lastID, {afterFinish: hideLast} );
				}
				
	
					function hideLast() {
						if (lastID != '') {
							document.getElementById('slideshow').removeChild(lastID);
						}
					}		
				
				// show the new image
				Effect.Appear('slideshow' + i);		
				
				// make the current id the last id so we know which node to remove
				var thisLastID = document.getElementById('slideshow' + i);
				
				i++;
	
				// stop it after 100
				if (i > 100) {return }
				
				// call itself again
			   	setTimeout(switch_slides(i, thisLastID, delay), delay + 850);
			  }
        })
    }