var slideNumber = 0;
var selectedThumbnail;

var animation = {opacity: 1.0, dir: 1, lasttime: 0, dest: "", element: null, timer: null, loaded: false, done: true};

function preloaded() {
	animation.loaded = true;
}

function selectThumbnail(n) {
	if (animation.done) {
		
		if (selectedThumbnail) {
			selectedThumbnail.style.borderStyle = "none";
			selectedThumbnail.style.margin = "0px";
		}
		selectedThumbnail = document.getElementById("thumb" + n);
		selectedThumbnail.style.borderStyle = "solid";
		selectedThumbnail.style.margin = "-1px";
		
		if (slideNumber == 0)
			slideNumber = n;
			
		if (slideNumber != n) {
			animation.done = false;
			slideNumber = n;
			
			if (!animation.element)
				animation.element = document.getElementById("slide");;
			animation.loaded = false;
			animation.dir = -1;
			animation.dest = base + "images/screenshots/ProVoc" + n + ".jpg";
			
			preloader = new Image();
			preloader.onload = preloaded;
			preloader.src = animation.dest;
			
			if (!animation.timer) {
				animation.lasttime = (new Date).getTime();
				animation.timer = setInterval("animate()", 13);
			}
		}
	}
		
	return false;
}

function animate() {
	var t = (new Date).getTime();
	var dt = t - animation.lasttime;
	dt /= 200;
	animation.lasttime = t;
	
	var stop = false;
	if (animation.dir < 0) {
		animation.opacity -= dt;
		if (animation.opacity <= 0.0) {
			animation.opacity = 0.0;
			animation.dir = 1;
			animation.element.style.opacity = 0.0;
		}
	} else if (animation.loaded) {
		if (animation.opacity == 0.0)
			animation.element.src = animation.dest;
		animation.opacity += dt;
		if (animation.opacity >= 1.0) {
			animation.opacity = 1.0;
			stop = true;
		}
	}
		
	animation.element.style.opacity = animation.opacity;
	if (stop)
		setTimeout("stopAnimation()", 1);		
}

function stopAnimation() {
	clearInterval(animation.timer);
	animation.timer = null;
	animation.done = true;
}