function loadImageViews() {

	for (i in ImageViews) {

		var view = document.getElementById(i);

		if (!view) continue;

		view.style.width = ImageViews[i].width + "px";

		view.style.height = ImageViews[i].height + "px";

		

		var img1 = document.createElement("img");

		var img2 = document.createElement("img");

		img1.id = i + "1";

		img2.id = i + "2";

		img1.src = ImageViews[i].images[(ImageViews[i].index) % ImageViews[i].images.length].src;

		img2.src = ImageViews[i].images[(ImageViews[i].index + 1) % ImageViews[i].images.length].src;

		img1.style.left = 0 + "px";

		img2.style.left = ImageViews[i].width + "px";

		view.appendChild(img1);

		view.appendChild(img2);

		

		var img3 = new Image();  // preload img previous to first image

		img3.src = ImageViews[i].images[(ImageViews[i].index - 1 + ImageViews[i].images.length) % ImageViews[i].images.length].src;



		var status = document.getElementById(i + "_status");

		if (status) status.innerHTML = (ImageViews[i].index + 1) + " of " + ImageViews[i].images.length;

	}

}





function changeImageView(i) {

	if (window.event.offsetX) {

		if (window.event.offsetX < ImageViews[i].width / 2) {

			prevInImageView(i);

		}

		else {

			nextInImageView(i);

		}

	}

	else {

		nextInImageView(i);

	}

}







function nextInImageView(i) {

	var interval = 15;

	var view = ImageViews[i];

	if (view.anim) return;  // an animation is already in progress



	var img1 = document.getElementById(i+"1");

	var img2 = document.getElementById(i+"2");

	img1.style.left = 0 + "px";

	img2.style.left = view.width + "px";



	view.index = (view.index + 1) % view.images.length;

	img2.src = view.images[view.index].src;



	view.anim = window.setInterval(function() {

		var v1 = parseInt(img1.style.left);

		var v2 = parseInt(img2.style.left);

		if (v2 < interval) {

			

			img1.src = img2.src;

			img2.src = view.images[(view.index + 1) % view.images.length].src;  // preload next image

			img1.style.left = 0 + "px";

			img2.style.left = view.width + "px";

			window.clearInterval(view.anim);

			view.anim = null;

			var status = document.getElementById(i + "_status");

			if (status) status.innerHTML = (view.index + 1) + " of " + view.images.length;

		}

		else {

			img1.style.left = (v1 - interval) + "px";

			img2.style.left = (v2 - interval) + "px";

		}

	}, 5);

}







function prevInImageView(i) {

	var interval = 15;

	var view = ImageViews[i];

	if (view.anim) return;  // an animation is already in progress



	var img1 = document.getElementById(i+"1");

	var img2 = document.getElementById(i+"2");

	img1.style.left = 0 + "px";

	img2.style.left = -view.width + "px";



	view.index = (view.index - 1 + view.images.length) % view.images.length;

	img2.src = view.images[view.index].src;



	view.anim = window.setInterval(function() {

		var v1 = parseInt(img1.style.left);

		var v2 = parseInt(img2.style.left);

		if (-v2 < interval) {

			img1.src = img2.src;

			img2.src = view.images[(view.index - 1 + view.images.length) % view.images.length].src;  // preload next image

			img1.style.left = 0 + "px";

			img2.style.left = -view.width + "px";

			window.clearInterval(view.anim);

			view.anim = null;

			var status = document.getElementById(i + "_status");

			if (status) status.innerHTML = (view.index + 1) + " of " + view.images.length;

		}

		else {

			img1.style.left = (v1 + interval) + "px";

			img2.style.left = (v2 + interval) + "px";

		}

	}, 5);

}







var getElementsByClassName = function (className, tag, elm){

	if (document.getElementsByClassName) {

		getElementsByClassName = function (className, tag, elm) {

			elm = elm || document;

			var elements = elm.getElementsByClassName(className),

				nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,

				returnElements = [],

				current;

			for(var i=0, il=elements.length; i<il; i+=1){

				current = elements[i];

				if(!nodeName || nodeName.test(current.nodeName)) {

					returnElements.push(current);

				}

			}

			return returnElements;

		};

	}

	else if (document.evaluate) {

		getElementsByClassName = function (className, tag, elm) {

			tag = tag || "*";

			elm = elm || document;

			var classes = className.split(" "),

				classesToCheck = "",

				xhtmlNamespace = "http://www.w3.org/1999/xhtml",

				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,

				returnElements = [],

				elements,

				node;

			for(var j=0, jl=classes.length; j<jl; j+=1){

				classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";

			}

			try	{

				elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);

			}

			catch (e) {

				elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);

			}

			while ((node = elements.iterateNext())) {

				returnElements.push(node);

			}

			return returnElements;

		};

	}

	else {

		getElementsByClassName = function (className, tag, elm) {

			tag = tag || "*";

			elm = elm || document;

			var classes = className.split(" "),

				classesToCheck = [],

				elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),

				current,

				returnElements = [],

				match;

			for(var k=0, kl=classes.length; k<kl; k+=1){

				classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));

			}

			for(var l=0, ll=elements.length; l<ll; l+=1){

				current = elements[l];

				match = false;

				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){

					match = classesToCheck[m].test(current.className);

					if (!match) {

						break;

					}

				}

				if (match) {

					returnElements.push(current);

				}

			}

			return returnElements;

		};

	}

	return getElementsByClassName(className, tag, elm);

};