function swapRealisationImages(rea)
{
	Effect.Appear('realisations-thumb-loader-img', {
		duration: 0.8,
		transition: Effect.Transitions.linear,
		afterFinish: function()
		{
			if (rea.image != '')
			{
				var picLarge = document.getElementById('realisations-pic-large');
				picLarge.src = '/public/references/images' + rea.image;
				picLarge.onload = function()
				{
					Effect.Fade('realisations-thumb-loader-img', {duration: 0.8, transition: Effect.Transitions.linear});
					Effect.BlindDown('realisations-thumb-container', {duration: 0.8, transition: Effect.Transitions.linear});
				}
			}
			else
			{
				Effect.Fade('realisations-thumb-loader-img', {duration: 0.8, transition: Effect.Transitions.linear});
			}
		}
	});
}

function updateRealisationInfos(infos)
{
	document.getElementById('realisations-top-type').innerHTML = '<span style="font-size:13px;line-height:15px">r&eacute;f&eacute;rences</span><br />' + infos['type'];
	document.getElementById('realisations-title').innerHTML = document.getElementById('realisations-nom-photo').innerHTML = infos['nom'];
	document.getElementById('realisations-zone').innerHTML = infos['lieu'];
	document.getElementById('realisations-zone').innerHTML = infos['lieu'];
	document.getElementById('realisations-body-right').innerHTML = infos['travaux'];
	document.getElementById('realisations-travaux').innerHTML = infos['desc'];
	document.getElementById('realisations-maitre-ouvrage').innerHTML = infos['infos'];
	document.getElementById('realisations-nom-photo').innerHTML = infos['legende'];
}

function updateRealisationNav(rea)
{
	var numTotalFiche = document.getElementById('rea-total-fiche');
	var numThisFiche = document.getElementById('rea-num-fiche');

	numTotalFiche.innerHTML = reaArr.length;
	numThisFiche.innerHTML = rea.num;

	var prevLink = document.getElementById('realisations-btn-prev');
	var nextLink = document.getElementById('realisations-btn-next');
	var closePicture = document.getElementById('realisations-close-picture');
	var prevPicture = document.getElementById('realisations-picture-prev');
	var nextPicture = document.getElementById('realisations-picture-next');

	closePicture.onmouseover = function()
	{
		document.getElementById('realisations-close-picture').src = '/mig-images/mig-reference/btn-fermer-012.gif';
	}

	closePicture.onmouseout = function()
	{
		document.getElementById('realisations-close-picture').src = '/mig-images/mig-reference/btn-fermer-01.gif';
	}

	prevLink.onmouseover = function()
	{
		prevPicture.src = '/mig-images/mig-reference/btn-previous-012.gif';
	}

	prevLink.onmouseout = function()
	{
		prevPicture.src = '/mig-images/mig-reference/btn-previous-01.gif';
	}

	nextLink.onmouseover = function()
	{
		nextPicture.src = '/mig-images/mig-reference/btn-next-012.gif';
	}

	nextLink.onmouseout = function()
	{
		nextPicture.src = '/mig-images/mig-reference/btn-next-01.gif';
	}

	prevLink.onclick = function()
	{
		return false;
	}

	nextLink.onclick = function()
	{
		return false;
	}

	if (lastRefIdx - 1 >= 0)
	{
		prevPicture.src = '/mig-images/mig-reference/btn-previous-01.gif';
		prevLink.style.cursor = 'pointer';

		prevLink.onclick = function()
		{
			showRealisation(reaArr[lastRefIdx - 1]['id']);
			return false;
		}
	}
	else
	{
		prevPicture.src = '/mig-images/mig-reference/btn-previous-013.gif';
		prevLink.onmouseover = function(){};
		prevLink.onmouseout = function(){};
		prevLink.style.cursor = 'default';
	}

	if (lastRefIdx + 1 < reaArr.length)
	{
		nextPicture.src = '/mig-images/mig-reference/btn-next-01.gif';
		nextLink.style.cursor = 'pointer';

		nextLink.onclick = function()
		{
			showRealisation(reaArr[lastRefIdx + 1]['id']);
			return false;
		}
	}
	else
	{
		nextPicture.src = '/mig-images/mig-reference/btn-next-013.gif';
		nextLink.onmouseover = function(){};
		nextLink.onmouseout = function(){};
		nextLink.style.cursor = 'default';
	}

}

function showRealisation(reaID)
{
	window.scroll(0,0);
	
	var overlayDIV = document.getElementById('overlay');
	var reaDIV = document.getElementById('realisations-slide');

	if (reaDIV)
	{
		var rea;

		// Recherche de la realisation par son ID
		for(i = 0; i < reaArr.length; i++)
		{

			if (reaArr[i]['id'] == reaID)
			{
				rea = reaArr[i];
				lastRefIdx = i;
				break;
			}
		}

		if (rea != undefined)
		{
			// On prend la taille de bottom-div qui est à la taille reelle du contenu
			// alors que body ne l'est pas
			//overlayDIV.style.height = document.getElementById('bottom-div').clientHeight + 'px';
			//alert(document.documentElement.clientHeight);
			overlayDIV.style.height = document.documentElement.clientHeight + 'px';


			reaDIV.style.height = reaDIV.clientHeight;

			if (overlayDIV.style.display == 'none')
			{
				document.getElementById('realisations-thumb-container').style.display ='none';
				document.getElementById('realisations-body-right').innerHTML = '';

				new Effect.Appear(overlayDIV, {
					duration: 0.3,
					from: 0.0,
					to: 0.8,
					afterFinish: function()
					{
						overlayDIV = document.getElementById('overlay');
						reaDIV = document.getElementById('realisations-slide');

						reaDIV.style.position='absolute';
						reaDIV.style.visibility='hidden';
						reaDIV.style.display='block';
						reaDIV.style.left = ((document.body.clientWidth - reaDIV.clientWidth) / 2) + 2 + 'px';
						reaDIV.style.visibility='';

						updateRealisationInfos(rea);

						new Effect.Appear(reaDIV, {
							duration: 0.5,
							afterFinish: function()
							{
								swapRealisationImages(rea);
								updateRealisationNav(rea);
							}
						});
					}
				});
			}
			else
			{

				new Effect.BlindUp('realisations-thumb-container', {
					duration: 0.5,
					afterFinish: function()
					{
						new Effect.Fade(reaDIV, {
							duration: 0.5,
							afterFinish: function()
							{
								updateRealisationInfos(rea);
								swapRealisationImages(rea);
								Effect.Appear(reaDIV, {
									duration: 0.5,
									afterFinish: function()
									{
										updateRealisationNav(rea);
									}
								});
							}
						});
					}
				});
			}
		}
	}
}

function hideRealisation()
{
	var overlayDIV = document.getElementById('overlay');
	var reaDIV = document.getElementById('realisations-slide');

	new Effect.Fade(reaDIV, {
		duration: 0.2,
		afterFinish: function()
		{
			Effect.Fade(overlayDIV, {duration: 0.2});
		}
	});
}