var homeImages = new Array();
homeImages[0] = {id:'113', width:300, height:60};
homeImages[1] = {id:'88', width:300, height:66};
homeImages[2] = {id:'90', width:300, height:43};
homeImages[3] = {id:'94', width:300, height:70};
homeImages[4] = {id:'91', width:300, height:72};
homeImages[5] = {id:'135', width:300, height:64};
homeImages[6] = {id:'136', width:300, height:76};
homeImages[7] = {id:'93', width:300, height:46};
homeImages[8] = {id:'97', width:300, height:52};
homeImages[9] = {id:'114', width:300, height:38};
homeImages[10] = {id:'89', width:300, height:96};
homeImages[11] = {id:'95', width:300, height:115};
homeImages[12] = {id:'96', width:300, height:63};
homeImages[13] = {id:'112', width:300, height:60};
homeImages[14] = {id:'111', width:100, height:106};
homeImages[15] = {id:'92', width:300, height:30};

	var	maxImageHeight = 115;
	var imageDivWidth = 350;
	var homeImageIndex = 2;
	var currentSideIndex; //0 is left, 1 is right; side to animate
	var nextSideIndex = 1; //0 is left, 1 is right; side to load new image into
	var firstLeftImageLoaded = false;
	var firstRightImageLoaded = false;
	var secondLeftImageLoaded = false;
	var nextImageLoaded = false;
	var fadeOutDone = true;
	var fadeInDone = true;
	var homeImgDivWidth;
	var homeImgDivHeight;
	var innerTags = "<div class='homeImage'><img class='homeImage' src=''><img class='homeImage' src=''></div><div class='homeImage'><img class='homeImage' src=''><img class='homeImage' src=''></div>";
	
	$(document).ready
	(
		function()
		{
			$('div.homeImages').append(innerTags);
			$('div.homeImage').height(maxImageHeight);
			$('img.homeImage:eq(0)') //back image on left side
			.fadeIn(0)
			.css({left: (imageDivWidth - homeImages[0]['width'])/2, top: (maxImageHeight - homeImages[0]['height'])/2})
			.attr('src', 'images/items/image' + homeImages[0]['id'] + '.jpg')
			;
			$('img.homeImage:eq(2)') //back image on right side
			.fadeIn(0)
			.css({left: (imageDivWidth - homeImages[1]['width'])/2, top: (maxImageHeight - homeImages[1]['height'])/2})
			.attr('src', 'images/items/image' + homeImages[1]['id'] + '.jpg')
			;
			$('img.homeImage').load
			(
				function()
				{
					if ($(this).get(0) == $('img.homeImage:eq(0)').get(0) &&  firstLeftImageLoaded == false) firstLeftImageLoaded = true;
					else if ($(this).get(0) == $('img.homeImage:eq(2)').get(0) &&  firstRightImageLoaded == false) firstRightImageLoaded = true;
					else if ($(this).get(0) == $('img.homeImage:eq(1)').get(0) &&  secondLeftImageLoaded == false)
					{
						secondLeftImageLoaded = true;
						nextImageLoaded = true;
					}
					else nextImageLoaded = true;
				}
			);
		}
	);
	
	$(window).load //used $(window).load rather than $(document).ready so page fully loaded before animation starts
	(
		function()
		{
			homeImageTimerId = setInterval('testImage()',100);
/*
			$('button.homeImg')
			.html('Stop')
			.toggle
			(
				function()
				{
					$(this).html('Restart');
					clearInterval(homeImageTimerId);
				}
				,
				function()
				{
					$(this).html('Stop');
					homeImageTimerId = setInterval('testImage()',100);
				}
			);
*/
		}
	);
	
	function testImage()
	{
		if (firstLeftImageLoaded == true && firstRightImageLoaded == true && secondLeftImageLoaded == false)
		{
			$('img.homeImage:eq(1)') //front image on left side
			.css({left: (imageDivWidth - homeImages[2]['width'])/2, top: (maxImageHeight - homeImages[2]['height'])/2})
			.attr('src', 'images/items/image' + homeImages[2]['id'] + '.jpg')
			;
		}
		else if (nextImageLoaded == true && fadeOutDone == true && fadeInDone == true)
		{
			changeImage();
		}
	}

	function changeImage()
	{
		nextImageLoaded = false;
		fadeOutDone = false;
		fadeInDone = false;
		homeImageIndex++;
		if (homeImageIndex == homeImages.length) homeImageIndex = 0; //time to start over
		currentSideIndex = nextSideIndex;
		nextSideIndex = Math.abs(currentSideIndex - 1); //zero is changed to 1 and 1 is changed to 0
		$('img.homeImage:eq(' + (nextSideIndex*2 + 1) + ')').insertBefore($('img.homeImage:eq(' + (nextSideIndex*2) + ')'));
		$('img.homeImage:eq(' + (nextSideIndex*2) + ')')
		.css({left: (imageDivWidth - homeImages[homeImageIndex]['width'])/2, top: (maxImageHeight - homeImages[homeImageIndex]['height'])/2})
		.attr('src', 'images/items/image' + homeImages[homeImageIndex]['id'] + '.jpg')
		;
		$('img.homeImage:eq(' + (currentSideIndex*2 + 1) + ')')
		.fadeOut
		(
			3000
			,function()
			{
				fadeOutDone = true;
			}
		);
		$('img.homeImage:eq(' + (currentSideIndex*2) + ')')
		.fadeIn
		(
			3000
			,function()
			{
				fadeInDone = true;
			}
		);
	}