<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Image Gallery: Dissolve</title>
		
		<style type="text/css">
			#trigger {position:absolute; left: 440px; top: 624px; width: 144px;}
		
			#photo-container > * {
				position: absolute;
				height: 480px;
				width: 640px;
				margin: 72 0 0 192;
			}
			#photo-container.initial .incoming
			{
				opacity: 0;
				-webkit-transform: translate3d(0, 0, 0);
			}
			#photo-container.initial .outgoing
			{
				opacity: 1;
				-webkit-transform: translate3d(0, 0, 0);
			}
			#photo-container.final .incoming
			{
				opacity: 1;
				-webkit-transform: translate3d(0, 0, 0);
			}
			#photo-container.final .outgoing
			{
				opacity: 0;
				-webkit-transform: translate3d(0, 0, 0);
			}
			#photo-container > img
			{
				-webkit-transition: -webkit-transform 1.0s;
				-webkit-transition-property: -webkit-transform, opacity;
			}
		</style>
		
		<script type="text/javascript">
			var imageCount = 8;
			var imageIndex = 1;
			
			function changeImage() {
			
				document.getElementById('trigger').disabled = true;
			
				// get the photo container
				var photoContainer = document.getElementById('photo-container');
				
				// assign the class of the photo container
				photoContainer.setAttribute('class','initial');
				
				// set the attributes of the current image
				var outgoingImage =  photoContainer.getElementsByTagName('img')[0];
				outgoingImage.setAttribute('class','outgoing');
				outgoingImage.setAttribute('id','outgoing');
				
				// create and append a new image to the photo container
				// the incoming image
				if ( imageIndex == imageCount ) { 
					imageIndex = 1; 
				} else {
					imageIndex = imageIndex + 1;
				}
				var nextImageFilename = String(imageIndex) + ".jpg";
				var incomingImage  = new Image();
				incomingImage.src = nextImageFilename;
				// assign attributes
				incomingImage.setAttribute('class','incoming');
				incomingImage.setAttribute('id','incoming');
				// attach event listener to new image so when the transition is done the cleanup handler is called
				incomingImage.addEventListener('webkitTransitionEnd', transitionDone, false);
				// insert the incoming image into the photo container
				photoContainer.appendChild(incomingImage);

				// kick off the transition by changing the class of the photo container
				window.setTimeout(function() {
					photoContainer.setAttribute('class','final');
				}, 0);
			}
			
			function transitionDone(event) {				
				// remove the outgoing content container
				var outgoingImage = document.getElementById('outgoing');
				try {
					outgoingImage.parentNode.removeChild(outgoingImage);
				}catch(err){}

				// set the class of the photo container back to default
				var photoContainer = document.getElementById('photo-container');
				photoContainer.removeAttribute('class');
				
				// remove the class and id attributes from the child container
				setTimeout( function() {
					var incomingImage =  photoContainer.getElementsByTagName('img')[0];
					incomingImage.removeAttribute('class');
					incomingImage.removeAttribute('id');
				},0);
				
				document.getElementById('trigger').disabled = false;
			}
		</script>
		
		<script type="text/javascript">
			var loadList = new Array();
			var imageCount = 8;
			
			function addToLoadList() {
				loadList[loadList.length] = 1;
				var currentCount = loadList.length;
				if ( currentCount == imageCount ) {
					document.getElementById('trigger').value = 'NEXT IMAGE';
					document.getElementById('trigger').disabled = false;
					loadList.length = 0;
				} else {
					document.getElementById('trigger').value = 'Loading ' + String(currentCount) + '/' + String(imageCount);
				}
			}
			
			function loadImages() {
			// preload images. Add these three lines for every image in your slideshow
			var image1 = new Image();
			image1.onLoad = addToLoadList();
			image1.src = "1.jpg";	
			var image2 = new Image();
			image2.onLoad = addToLoadList();
			image2.src = "2.jpg";
			var image3 = new Image();
			image3.onLoad = addToLoadList();
			image3.src = "3.jpg";	
			var image4 = new Image();
			image4.onLoad = addToLoadList();
			image4.src = "4.jpg";		
			var image5 = new Image();
			image5.onLoad = addToLoadList();
			image5.src = "5.jpg";		
			var image6 = new Image();
			image6.onLoad = addToLoadList();
			image6.src = "6.jpg";	
			var image7 = new Image();
			image7.onLoad = addToLoadList();
			image7.src = "7.jpg";		
			var image8 = new Image();
			image8.onLoad = addToLoadList();
			image8.src = "8.jpg";
			}
		</script>
	</head>
	<body onLoad="loadImages();">
		<div id="photo-container"><img src="1.jpg"></div>
		<input type="button" value="Loading..." id="trigger" onclick="changeImage();" style="-webkit-user-select:none;">
<!-- 
		<!~~ ALERTNATE METHOD: pre-load the images by adding them without showing ~~>
		<img src="1.jpg" width="640" height="480" style="display:none;">
		<img src="2.jpg" width="640" height="480" style="display:none;">
		<img src="3.jpg" width="640" height="480" style="display:none;">
		<img src="4.jpg" width="640" height="480" style="display:none;">
		<img src="5.jpg" width="640" height="480" style="display:none;">
		<img src="6.jpg" width="640" height="480" style="display:none;">
		<img src="7.jpg" width="640" height="480" style="display:none;">
		<img src="8.jpg" width="640" height="480" style="display:none;">
 -->
	</body>
</html>