/**
 * iGallery
 * 
 * 
 */

function iGallery(imgArr, descArr){
	
	this.iA		=	imgArr;
	this.dA		=	descArr;
	this.iO		=	[];
	this.processed= 0;
	this.loaded	=	0;
	this.error	=	0;
//	window.alert(this.iA);
	this.preload();
	this.slider = null;
}

iGallery.prototype={
	
	preload:		function(){
		
		$('tab').className = 'busy';
		
		for (a = 0;a < this.iA.length;a++){
			this.iO[a] = new Image();
			this.iO[a].onload	=	bind(this, this.iLoad);
			this.iO[a].onerror	=	bind(this, this.iError);
			this.iO[a].src = this.iA[a];		
		}
				
	}
	
	,
	
	iLoad:			function(){
		this.processed++;
		this.loaded++;
		this.iProcessed();

	}
	
	,
	
	iError:			function(){
		this.processed++;
		this.error++;
		this.iProcessed();
	}
	
	,
	
	iProcessed:		function(){
		//$('tab').innerHTML += this.processed + ' van de ' + this.iA.length + ' geladen<br />';
		if (this.processed == this.iA.length){
			this.createGallery();
		}
	}
		
	,
	
	createGallery:	function(){
		// create new div on the place of the tabulator
		$('tab').innerHTML = '';
		$('tab').style.height = '456px'; // must be dynamic!!!
		var islide = document.createElement('div');
		islide.id = 'imageGallery';
		islide.style.width = parseInt(this.iA.length) * 598 + 'px';
		var pos = findPos($('tab'));
		islide.style.left = pos[0] + 1 + 'px';
		islide.style.top = pos[1] + 1 + 'px';
		islide.innerHTML = '';
		for (var b = 0;b < this.iO.length;b++){
			d = document.createElement('div');
			d.className = 'node';
			this.iO[b].className = 'reflect rheight20 ropacity40'
			d.appendChild(this.iO[b]);
			islide.appendChild(d);
			var _p = document.createElement('p');
			_p.innerHTML = this.dA[b];
			d.appendChild(_p);
		}
		document.body.appendChild(islide);
		addReflections();
		this.slider = new Slider('imageGallery', '598', '472');
		
		// add the image navigation
		var imageNav = document.createElement('div');
		imageNav.id = 'imageNav';
		imageNav.style.position = 'absolute';
		imageNav.style.left = pos[0] + 1 + 'px';
		imageNav.style.top = pos[1] + 1 + 'px';		
		imageNav.innerHTML = '<div id="previous" onmouseover="pF.fadeIn();" onmouseout="pF.fadeOut();" onclick="imageGallery.slider.moveToPreviousNode();">&nbsp;</div>';
		imageNav.innerHTML +='<div id="next" onmouseover="nF.fadeIn();" onmouseout="nF.fadeOut();" onclick="imageGallery.slider.moveToNextNode();">&nbsp;</div>';

		document.body.appendChild(imageNav);

		pF = new Fader('previous', 0, 80, 10);
		nF = new Fader('next', 0, 80, 10);		

		window.alert('created');
		
	}
}