// Event.observe(window,'load',preloadImages);

/*
function preloadImages(){
	//get all images from db
	var url = "ajax/ajax.images.php";
	var params = "";
	newAjax = sendRequest(url,params,imageResponse)
	
	var myAjax = new Ajax.Request(
		url,
		{
			method: 'post',
			parameters: params,
			onSuccess: hf,
			onFailure: ef
			});
	}
	
}

function imageResponse(t){
		if(t.responseText == 1){
			//error
		} else {
	var imgarray = t.responseText.split(',');
	preloader = new ImagePreloader(imgArray,allLoaded);
	}
}
*/


var ImagePreloader = Class.create();

ImagePreloader.prototype = {

initialize : function(images, callback){
		this.imgarray = images.split(',');
		this.nLoaded = 0;
		this.nProcessed = 0;
		this.aImages = new Array;
		// record the number of images.
		this.nImages = this.imgarray.length;
		this.callback = callback;
	
		for ( var i = 0; i < this.imgarray.length; i++ ) {
			path = "images/detail/"+this.imgarray[i];
				this.preload(path);
		}
},

preload : function(image){
	//alert(image);
		// create new Image object and add to array
		var oImage = new Image;
		this.aImages.push(oImage);
		// set up event handlers for the Image object
		oImage.onload = this.onload;
		oImage.onerror = this.onerror;
		oImage.onabort = this.onabort;
		// assign pointer back to this.
		oImage.oImagePreloader = this;
		oImage.bLoaded = false;		    
		// assign the .src property of the Image object
		oImage.src = image;
},

onComplete : function(){
		this.nProcessed++;
		if ( this.nProcessed == this.nImages ){
			this.callback(this.aImages, this.imgarray, this.nLoaded);
			}
},

onload : function(){
	this.bLoaded = true;
	this.oImagePreloader.nLoaded++;
	this.oImagePreloader.onComplete();
},

onerror : function(){
	this.bError = true;		    
	this.oImagePreloader.onComplete();
},

onabort : function(){
	this.bAbort = true;
	this.oImagePreloader.onComplete();
}
}



function allLoaded(aImages, imgArr, nLoaded){
	//all images loaded - do something
	
	$("detail").src = aImages[0].src;
	thumbs = "";
	for(i=0;i< aImages.length;i++){
		src = aImages[i].src;
	thumbs += '<p><span class="tn"><a href="#" onMouseOver="swapImage(\'' + src + '\');" title=""><img src="images/tn/'+imgArr[i]+'"  alt="" /></a></span></p>';
	}
	
	$("tn").innerHTML = thumbs;
	


	
}

function swapImage(source){
$('detail').src = source;

}