// holder object for one image
function RandomizedImage(src, alt) {
	this.src = src;		   
	this.alt = alt;
}

// controller for a random image
function RandomizedImageController(parNum) {

	// img tag template
	this.imgTagTemplate = new Template('<img src="#{src}" alt="#{alt}" />');

	// get corresponding div element where the random image shall be displayed
	this.imgContainer = $("randomimageContainer_"+parNum);

	// list of all images
	this.imageList = new Array();

	// add one image to the list
	this.addImage = function(src, alt) {
		var image = new RandomizedImage(src, alt);
		this.imageList.push(image);
	}
	
	// choose a random image and update the corresponding img tag
	this.randomize = function() {

		// get a random image number
		var randomImageNumber = this.getRandomImageNumber();

		// create the real image tag using the template and
		// one randomly chosen image from the imageList
		var imgTag = this.imgTagTemplate.evaluate(this.imageList[randomImageNumber]);

		// IE re-render fix: keep old container height
		if (Prototype.Browser.IE) {
			this.oldHeight = $("outer_container").getHeight();
		}

		// display the image
		this.imgContainer.update(imgTag);

		// IE re-render fix: register image load event
		if (Prototype.Browser.IE) {
			Event.observe(this.imgContainer.firstDescendant(), "load", this.showImage.bindAsEventListener(this));
		}
	}
	
	// returns the index of the image to be displayed
	// (a number between 0 and imageList.length-1)
	this.getRandomImageNumber = function() {
		return Math.floor(Math.random()*this.imageList.size());
	}
	
	// IE re-render fix: event handle
	this.showImage = function() {

		var newHeight = $("outer_container").getHeight();
		if (newHeight != this.oldHeight) {
			// TODO: fix the 1px issue
			// add 1 px because IE6 is 1 px off (but this causes small jitter in IE7)
			$("outer_container").style.height = (newHeight+1) + "px";
		}

	}
}