// please keep here
document.inuse = '';

// duration of the movement between the time the user selected the image, and it goes into position
var move = 0.5;
// fade out time of the image fading away and coming back
var opacity1 = 0.5;
// fade in time of the preview image
var opacity2 = 0.5;


function loadpage( page ) {


	if( document.inuse != '' ) {
		removeElement( document.inuse );
		document.inuse = '';
	}

	var c = document.createElement('div');
	
	c.style.border = 'solid 1px #000';

	c.style.position = 'absolute';
	c.style.top = '260px';
	c.style.left = '450px';
	c.style.padding = '10px';
	c.style.backgroundColor = '#FFFFFF';
	
	c.innerHTML = 'Loading the page';
	
	c.id = 'loading';
	
	
	document.body.appendChild(c);
	new Ajax.Updater( 'gallery', '?page=' + page, {onSuccess:function() {
		document.body.removeChild( document.getElementById('loading') );
	} });
}


function aload( id, image ) {

	if( document.inuse != '' ) {
		removeElement( document.inuse );
		document.inuse = '';
	}

	document.getElementById(id).startt = Number(document.getElementById(id).style.top.replace("px", ""));
	document.getElementById(id).startl = Number(document.getElementById(id).style.left.replace("px", ""));
	document.inuse = id;	
	
	new Effect.Move(id, {mode:'absolute',x:650,y:200, duration:move, afterFinish: function() {
		new Effect.Opacity( id , {from:1.0,to:0.0, duration:opacity1, afterFinish: function() {
			
			var aalbum = document.createElement('div');
			
			// position
			aalbum.style.position = 'absolute';
			aalbum.style.top = '100px';
			aalbum.style.left = '500px';
			
			aalbum.style.background = '#000000';
			aalbum.id = 'aalbum';
			aalbum.style.opacity = '0.0';

			document.body.appendChild(aalbum);
			
			new Effect.Opacity( 'aalbum' , {from:0.0,to:1.0, duration:opacity2} );

			document.getElementById('aalbum').style.width = '320px';
			document.getElementById('aalbum').style.height = '320px';	
			document.getElementById('aalbum').style.padding = '15px';
			
			document.getElementById('aalbum').innerHTML = '<div id="image"><a href="gallery/full/'+image+'" target="_blank"><img style="border:none" src="gallery/preview/'+image+'" /></a></div>';
			//document.getElementById('aalbum').innerHTML = document.getElementById('aalbum').innerHTML + '<div style="position:absolute;top:0px;right:0px;color:#FFFFFF;padding:10px;background-color:#000000;z-index:1000;" id="close"><a href="javascript:removeElement(\''+id+'\')">Close [X]</a></div';
			//document.getElementById('aalbum').innerHTML = document.getElementById('aalbum').innerHTML + '<div style="position:absolute;top:310px;right:0px;color:#FFFFFF;padding:10px;background-color:#000000;z-index:1000;" id="info"><a href="javascript:infoElement(\''+id+'\')">Info [ ]</a></div>';
			document.getElementById('aalbum').innerHTML = document.getElementById('aalbum').innerHTML + '<div style="background-color:#000000;color:#FFFFFF;padding:10px;height:20px;margin-top:10px;margin-left:-15px;margin-right:-15px;border-left:solid 5px #000000;"><div style="float:right;" id="close"><a href="javascript:removeElement(\''+id+'\')">Close [X]</a></div><div style="float:left;" id="info"><a href="javascript:infoElement(\''+id+'\')">Info [ ]</a></div></div>';
			//new Effect.Opacity( 'close', {from:1.0,to:0.5} );
			//new Effect.Opacity( 'info', {from:1.0,to:0.5} );
		} });
	} });
}

function removeElement( id ) {
	new Effect.Opacity('aalbum', {from:1.0,to:0.0,duration:opacity2,afterFinish:function() {
		document.body.removeChild( document.getElementById('aalbum') );

		new Effect.Opacity( id, {from:0.0,to:1.0,duration:opacity1,afterFinish:function() {
			new Effect.Move(id, {mode:'absolute',x:document.getElementById(id).startl,y:document.getElementById(id).startt, duration:move } );
		} });
	} });
	
	document.inuse = '';
}

function infoElement( id ) {
	var id = id.replace('img', '');
	
	new Effect.Opacity('image', {from:1.0, to:0.0,duration:opacity2, afterFinish: function() {
		new Effect.Opacity('info', {from:1.0, to:0.0,duration:opacity2, afterFinish: function() {
			document.getElementById('info').innerHTML = '<a href="javascript:imageElement(\''+id+'\')">Image ][</a>';
			document.getElementById('image').style.width = '300px';
			document.getElementById('image').style.height = '300px';
			document.getElementById('image').style.padding = '10px';
			document.getElementById('image').style.backgroundColor = '#FFFFFF';
	
			new Ajax.Updater( 'image',  'ajax.php?action=info&id=' + id , {onSuccess: function() {
				new Effect.Opacity('image', {from:0.0, to:1.0});
				new Effect.Opacity('info', {from:0.0, to:1.0});
		   } });
		} });
	} });
}

function imageElement( id ) {
	var id = id.replace('img', '');
	
	new Effect.Opacity('image', {from:1.0, to:0.0, duration:opacity2, afterFinish: function() {
		new Effect.Opacity('info', {from:1.0, to:0.0,duration:opacity2, afterFinish: function() {
			document.getElementById('info').innerHTML = '<a href="javascript:infoElement(\''+id+'\')">Info [ ]</a>';
			document.getElementById('image').style.width = '320px';
			document.getElementById('image').style.height = '320px';
			document.getElementById('image').style.padding = '0px';
			document.getElementById('image').style.backgroundColor = '#FFFFFF';
	
			new Ajax.Updater( 'image',  'ajax.php?action=image&id=' + id , {onSuccess: function() {
				new Effect.Opacity('image', {from:0.0, to:1.0});
				new Effect.Opacity('info', {from:0.0, to:1.0});
		   } });
		} });
	} });
}