var images, currentImage, direction, units, speed, wait;

function drawTransitionImages() {
    var e1 = document.getElementById("transitionimage1");
    var e2 = document.getElementById("transitionimage2");

    if (wait > 0) {
	wait++;
	if (wait > 100) {
	    wait = 0;
	    e2.style.visibility = "visible";
	} else {
	    return;
	}
    }

    units += speed;
    speed *= 2;
    
    var limit;
    if (direction == 0) {
	limit = 360;
    } else {
	limit = 270;
    }
    if (units > limit) {
	direction = (direction + 1) % 2;
	units = 0;
	speed = 8;
	wait = 1;
	currentImage++;
	if (currentImage >= images.length) {
	    currentImage = 0;
	}
	e1.style.backgroundImage = "url(\"" + images[currentImage] + "\")";
	e2.style.backgroundImage = "url(\"" + images[(currentImage + 1) % images.length] + "\")";

	if (direction == 0) {
	    e2.style.width = limit + "px";
	} else {
	    e2.style.height = limit + "px";
	}
	e2.style.visibility = "hidden";
    }
    if (direction == 0) {
	e2.style.height = units + "px";
    } else {
	e2.style.width = units + "px";
    }
}

function initializeTransitionImages() {
	var nImages = 20;
	images = new Array(nImages);
	images[0] = "img/vesuri1.jpg";
	images[1] = "img/vesuri2.jpg";
	images[2] = "img/vesuri3.jpg";
	images[3] = "img/vesuri4.jpg";
	images[4] = "img/vesuri5.jpg";
	images[5] = "img/vesuri6.jpg";
	images[6] = "img/vesuri7.jpg";
	images[7] = "img/vesuri8.jpg";
	images[8] = "img/vesuri9.jpg";
	images[9] = "img/vesuri10.jpg";
	images[10] = "img/vesuri11.jpg";
	images[11] = "img/vesuri12.jpg";
	images[12] = "img/vesuri13.jpg";
	images[13] = "img/vesuri14.jpg";
	images[14] = "img/vesuri15.jpg";
	images[15] = "img/vesuri16.jpg";
	images[16] = "img/vesuri17.jpg";
	images[17] = "img/vesuri18.jpg";
	images[18] = "img/vesuri19.jpg";
	images[19] = "img/vesuri20.jpg";
	document.write("<div id=\"transitionimage2\" class=\"transitionimage\"></div>");
	document.write("<style type=\"text/css\">#transitionimage2 { background-image: url(\"" + images[1] + "\"); z-index: 4; visibility: hidden; }</style>");

 	var e = document.getElementById("transitionimage2");
 	e.style.height = "0px";

 	currentImage = 0;
 	direction = 0;
 	units = 0;
 	speed = 8;
	wait = 1;

 	drawFunctions.push(drawTransitionImages);
}