//animation OBJECT
animation = {

	animations: new Array(),
	speed: 20,
	frame: 1,
	run: function( a, t, o, p ) {

		animations = 0;
		
		for( var id in this.animations ) ++animations;
		
		animationExists = this.animations[a+o] ? true : false;
		
		this.animations[a+o] = [a, t, o, p];
		
		if( !animations ) this.animate();
	
	},
	animate: function() {
	
		var animations = 0;
		
		for( var id in this.animations ) {
		
			if( !((this.frame*this.speed)%(this.animations[id][1]*this.speed)) ) this[this.animations[id][0]](id, this.animations[id][2], this.animations[id][3]);
			
			++animations;
			
		}
		
		if( animations ) {
			
			++this.frame;
			
			setTimeout('animation.animate()', this.speed);
			
		}
	
	},
	quit: function( id ) {
	
		delete this.animations[id];
		
	}

}

//animation: FADE
animation['Fade'] = function( id, o, p ) {

	var fadeTo = p[0];
	var explorer = navigator.appName == 'Microsoft Internet Explorer' ? true : false;

	object = document.getElementById(o);

	if( typeof this.fader == 'undefined' ) this.fader = new Object();

	if( !this.fader[o] ) {

		if( object.style.display == 'none' ) {

			explorer ? object.style.filter = 'alpha(opacity=0)' : object.style.opacity = 0;

			this.fader[o] = 0;

			object.style.display = '';

		}

		else {

			explorer ? object.style.filter = 'alpha(opacity=100)' : object.style.opacity = 1;

			this.fader[o] = 100;

		}

	}

	var fadingRatio = 0.5;

	this.fader[o] = this.fader[o] + (fadeTo - this.fader[o]) * fadingRatio;

	explorer ? object.style.filter = 'alpha(opacity='+this.fader[o]+')' : object.style.opacity = this.fader[o]/100;

	if( Math.round(this.fader[o]) == fadeTo ) {

		explorer ? object.style.filter = 'alpha(opacity='+fadeTo+')' : object.style.opacity = fadeTo/100;

		if( !fadeTo ) object.style.display = 'none';
		
		if( p[1] ) p[1]();

		delete this.fader[o];

		animation.quit(id);

	}

}

ImageViewer = {
	
	open: function( ID, Data ) {
		
		--ID;
		
		document.getElementById('ImageViewer').style.display = '';
		
		animation.run('Fade', 1, 'Canvas', [80, function() { ImageViewer.show( ID, Data ) }]);
		
	},
	show: function( ID, Data ) {
		
		document.body.style.cursor = 'progress';
		
		document.getElementById('Frame').style.display = '';
		document.getElementById('Frame').style.left = Math.round((document.body.offsetWidth-document.getElementById('Frame').offsetWidth)/2)+'px';
		document.getElementById('Frame').style.display = 'none';
		
		document.getElementById('ImageDescription').innerHTML = Data[ID][3];
		
		document.getElementById('Image').src = Data[ID][0];
		document.getElementById('Image').width = Data[ID][1];
		document.getElementById('Image').height = Data[ID][2];
		document.getElementById('Image').onload = function() {
		
			animation.run('Fade', 1, 'Frame', [100]);
			
			document.body.style.cursor = 'default';
			
		}
		
	},
	change: function( ID, Data ) {
		
		animation.run('Fade', 1, 'Frame', [0,function() { ImageViewer.show( ID, Data ) }]);
		
	},
	close: function() {
		
		animation.run('Fade', 1, 'Frame', [0,function() {
			
			animation.run('Fade', 1, 'Canvas', [0,function() {
				
				document.getElementById('ImageViewer').style.display = 'none';
				
			
			}])
			
		}]);
		
	}
	
}