//initialization code
$(document).ready(function() {
	$.debug = false;
	$.imgEls = [ $("#img1"), $("#img2"), $("#img3")];
	$.path = "App_Themes/default/images/welcome/";
	//multi-dimensional array containing one inner array for each image in $.imgEls
	//if the element in an array is -1 then we do not want to swap the image
	//if the element in the array is 1 then we want to hide the image
	$.imgAry = [ 
		[ $.path + "1_1.jpg", 	$.path + "1_2.jpg", 	-1,	 					$.path + "1_4.jpg",	$.path + "1_5.jpg", 
		 -1, 					$.path + "1_7.jpg", 	-1, 					$.path + "1_9.jpg", $.path + "1_10.jpg"	],
		
		[ $.path + "2_1.jpg", 	-1, 					$.path + "2_3.jpg", 	$.path + "2_4.jpg",	$.path + "2_5.jpg",  
		 $.path + "2_6.jpg", 	$.path + "2_7.jpg",		$.path + "2_8.jpg", 	-1,					-1					],
		
		[ $.path + "3_1.jpg", 	$.path + "3_2.jpg", 	$.path + "3_3.jpg",		$.path + "3_4.jpg", 1, 	
		 1, 					$.path + "3_7.jpg",		$.path + "3_8.jpg", 	$.path + "3_9.jpg",	$.path + "3_10.jpg"	],
		
	];	
	if ($.debug) {
		console.log("initial values: ");
		console.log("Image Element Array: ");
		console.log($.imgEls);
		console.log("Image Element Array Length: ");
		console.log($.imgEls.length);
		console.log("Image Src Array: ");
		console.log($.imgAry);
		console.log("Image Src Array Location [0][1]: ");
		console.log($.imgAry[0][1]);
		console.log("Total Number of Images To Rotate: " );
		console.log($.imgAry[0].length);
	}
	$.idx = 0;
	RotateWrapper()
});

function RotateWrapper() {
	var i = $.idx;
	if ($.idx==0) {
		$.idx++;
		RotateImages(i, 1000, 3000, 1000, 500, RotateWrapper);
	}	
	else if ( i == ($.imgAry[0].length-1) ) {
		$.idx=0;
		RotateImages(i, 0, 750, 2000, 1000, RotateWrapper);
	}
	else {
		$.idx++;
		RotateImages(i, 0, 750, 2000, 1000, RotateWrapper);	
	}
}

function RotateImages(imageIndex, IndelaySpeed, fadeInSpeed, stayInDelay, fadeOutSpeed, callback ) {
	for (var i=0; i< $.imgEls.length; i++) {
		if ($.debug) 
			console.log("imgAry[" + i + "][" + imageIndex + "] = " + $.imgAry[i][imageIndex]);
		
		//if the current item is a -1 we don't want to change it or apply any effects to it
		if ($.imgAry[i][imageIndex] != -1 && $.imgAry[i][imageIndex] != 1) {
			//swap out the image url for the current index url
			$.imgEls[i].attr('src', $.imgAry[i][imageIndex]);						
			if 	(
					// if the next element in the imgsAry for this imgEl is not -1 we want to fade out
				 	(imageIndex + 1) < $.imgAry[i].length && $.imgAry[i][imageIndex + 1] != -1 || 
				 	// if the next element in the imgsAry is out of bounds and the first element is not a -1 we want to fade out
					(imageIndex + 1) >= $.imgAry[i].length && $.imgAry[i][0] != -1
				) {
				//if ($.debug) console.log("next element or first is not a -1");
				$.imgEls[i].fadeOut(0).delay(IndelaySpeed).fadeIn(fadeInSpeed).delay(stayInDelay).fadeOut(fadeOutSpeed);
			}
			//else if the next element is -1 we do not want to fade this item out
			else if (imageIndex + 1 < $.imgAry[i].length && $.imgAry[i][imageIndex + 1] == -1) {
				//if ($.debug) console.log("next element or first element is a -1");
				$.imgEls[i].fadeOut(0).delay(IndelaySpeed).fadeIn(fadeInSpeed);
			}
		}
		else if ($.imgAry[i][imageIndex] == -1) {
			//if the next element in the imgAry array is not the same as this one, then we want to fade this image out
			//after the speed of IndelaySpeed+fadeInSpeed+stayInDelay for the interval fadeOutSpeed
			if(	imageIndex + 1 < $.imgAry[i].length  && $.imgAry[i][imageIndex+1] != -1 ||
				imageIndex + 1 >= $.imgAry[i].length &&	$.imgAry[i][0] != -1)
				$.imgEls[i].delay(IndelaySpeed+fadeInSpeed+stayInDelay).fadeOut(fadeOutSpeed);
		}
		else if ($.imgAry[i][imageIndex] == 1) {
			$.imgEls[i].css("display", "none");	
		}

		if ($.debug) 
			console.log($.imgEls[i].attr('id') + ".src = " + $.imgEls[i].attr("src"));
	}
	
	if (callback != undefined || callback != -1) {
		setTimeout(callback, (IndelaySpeed + fadeInSpeed + stayInDelay + fadeOutSpeed) );
	}
}