show=-1;
divs=[];
fading = false;
timer = null;

function transition_in()
{                  
	if (fading)
		$('change').fade({ duration: 0.5, from: 0.01, to: 1 });
	timer = setTimeout(transition_out,6500);
	fading=true;
}
                       
function transition_out()
{                  
  $('change').fade({ duration: 0.5, from: 1, to: 0.01 });
  timer = setTimeout(change_page,500);
}
                    
function change_page(direction)
{
	if (typeof(direction)=="string")
	{
		if (direction=="+")
			show++;
		else
			show--;
	}
	else
		show++;
	
	if (show>=divs.length)
		show=0;
	if (show<0)
		show=divs.length-1;

	divs=$('change').childElements();
	divs.each(function (d,i) {
		if (i==show)
			d.show();
		else
			d.hide();
	});

	if (typeof(direction)=="string")
	  fading=false;
	transition_in();
}

function getcordsInDiv(e)
{
	var change = $('change');

	containerLeft = Position.page(change).left;
	containerTop = Position.page(change).top;

	mouseX = Event.pointerX(e);
	mouseY = Event.pointerY(e);

	scrollLeft = document.viewport.getScrollOffsets().left;
	scrollTop = document.viewport.getScrollOffsets().top;

	horizontalPosition = mouseX - containerLeft - scrollLeft;
	verticalPosition = mouseY - containerTop - scrollTop;

	height = change.getDimensions().height;
	width = change.getDimensions().width;

	if(horizontalPosition < 0 || verticalPosition < 0 || mouseX > (width + containerLeft + scrollLeft) || mouseY > (height + containerTop + scrollTop) )
	{
		$('img_gauche').hide();
		$('img_droite').hide();
	}
	else
	{
		if (horizontalPosition<200)
		{
			$('img_gauche').show();
			$('img_droite').hide();
		}
		else
		{
			if (horizontalPosition>428)
			{
				$('img_gauche').hide();
				$('img_droite').show();
			}
			else
			{
				$('img_gauche').show();
				$('img_droite').show();
			}
		}
	}
}
function previous()
{
	clearTimeout(timer);
	change_page("-");
}
function next()
{
	clearTimeout(timer);
	change_page("+");
}

document.observe("dom:loaded", function() {
	$('img_gauche').observe('click',previous);
	$('img_droite').observe('click',next);

	$('change').setStyle({
		'z-index':-1
	});
	$('moo').setStyle({
		'position': 'absolute'
		
	});
	$('img_gauche').setStyle({
		'cursor': 'pointer',
		'opacity':0.6,
		'z-index':10
	});
	$('img_droite').setStyle({
		'cursor': 'pointer',
		'opacity':0.6,
		'z-index':10
	});
	
change_page();
Event.observe(document, 'mousemove', getcordsInDiv);
});