<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="[$BASE_PATH]"/>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  
<style>
    
	body 
	{
		margin: 0;
		padding: [$TOP_OFFSET]px 0 0 0;
		height: 480px;
		width: 320px;
	}

	img 
	{
		-webkit-transition-property: opacity;
		-webkit-transition-duration: [$TRANSITION_DURATION]s;
		-webkit-transition-timing-function: ease;
		position: absolute;
		width: 320px;
		height: 480px;
	}
 
	img.faded 
	{
		left: -320px;
		opacity: 0;
	}

	img.notFaded 
	{
		left: 0px;
		opacity: 1;
	}
   
</style>

</head><body style="color: white">

<img id="one"/>

<script>

	var images = [$IMAGE_LIST];

	var SlideshowInterval 	= [$DISPLAY_DURATION] / 2;
	var SlideshowIntervalID	= 0;
	var SlideshowPulse		= 0;

	var img1 	= one;
	var index 	= 0;

	img1.src 		= images[0];
	img1.className	= 'faded';

	var fade = function () 
	{
		if (SlideshowPulse == 0)
		{
			img1.src 		= images[index];
			img1.className 		= 'notFaded';

			SlideshowPulse = 1;
		}
		else
		{	
			document.body.style.backgroundImage = "url(" + images[index] + ")";

			index = (index + 1) % images.length;
				
			img1.src 		= images[index];
			img1.className 		= 'faded';

			SlideshowPulse = 0;
		}

		if (SlideshowIntervalID)
		{
			clearInterval( SlideshowIntervalID );
			SlideshowIntervalID = 0;
		}
		
		if (SlideshowInterval)
			SlideshowIntervalID = setInterval(fade, SlideshowInterval);
	}

	fade();	

</script>
</body>
</html>
