var delayBetweenImages = 5000;

var nbImages = 1;
var lastLoadedImageId = 1;
var currentImageId = 1;
var nextImage;
var previousImageId;
$(document).ready(function() {
	$("#supportsDiv img").load(function() {
		resizeImages(this);
	});
	$("#supportsDiv img").each(function() {
		if (this.complete) {
			resizeImages(this);
		}
	});

	$("#bestSupportsTop1Div img").load(function() {
		resizeImages(this);
	});
	$("#bestSupportsTop1Div img").each(function() {
		if (this.complete) {
			resizeImages(this);
		}
	});

	$("#bestSupportsTop2Div img").load(function() {
		resizeImages(this);
	});
	$("#bestSupportsTop2Div img").each(function() {
		if (this.complete) {
			resizeImages(this);
		}
	});

	if ($("#imageSrc2").length>0) {
		preloadImage();
		setTimeout(changeImage,delayBetweenImages);
	}
	$("#bannerDiv").css("height",($("#image1").height())+'px');
	
	$("#image1").load(function() {
		$("#bannerDiv").css("height",($("#image1").height())+'px');
	});
	$("#image1").css("position","absolute");
	$("#image1").css("left","10px");
});

function changeImage() {
	previousImageId = currentImageId;
	if (currentImageId==nbImages) {
		currentImageId=1;
	} else {
		currentImageId++;
	}
	if (currentImageId>lastLoadedImageId) {
		nextImage.load(function() {
			$("#image"+previousImageId).css("z-index",2);
			$(this).css("z-index",1);
			$(this).show();		
			$("#image"+previousImageId).fadeOut(400);
			setTimeout(changeImage,delayBetweenImages);
		});
	} else {
		$("#image"+previousImageId).css("z-index",2);
		$("#image"+currentImageId).css("z-index",1);
		$("#image"+currentImageId).show();
		$("#image"+previousImageId).fadeOut(400);
		setTimeout(changeImage,delayBetweenImages);
	}
}

function preloadImage() {
	if ($("#imageSrc"+(lastLoadedImageId+1)).length>0) {
		nbImages++;
		nextImage = $("<img>");
		nextImage.load(function() {
			$("#bannerDiv").append(this);
			$(this).hide();
			lastLoadedImageId++;
			preloadImage();
		});
		nextImage.attr("id", "image"+(lastLoadedImageId+1));
		nextImage.hide();
		nextImage.attr("src", $("#imageSrc"+(lastLoadedImageId+1)).val());
	}
}

function resizeImages(image) {
	var height = $(image).height();
	var width = $(image).width();
	var ratio = Math.min(50/height,50/width);
	if (ratio<1) {
		$(image).css("height",""+(height*ratio)+"px");
		$(image).css("width",""+(width*ratio)+"px");
	}
	$(image).show();
}