window.onload = function (){

	var zoomContent = new Element ('div', {

		'id' : 'zoomContent'

	});



	var div = new Element ('div').setStyle ({

		clear : 'left'

	});

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomTopLeft'

	}));

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomTop'

	}));

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomTopRight'

	}));

	

	zoomContent.insert (div);

	

	div.insert (new Element ('div', {

		'id' : 'zoomLeft'

	}));

	

	div.insert (new Element ('img', {

		'id' : 'zoomImage'

	}));

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomRight',

	}));

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomBottomLeft'

	}));

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomBottom'

	}));

	

	zoomContent.insert (new Element ('div', {

		'id' : 'zoomBottomRight'

	}));

	

	

	

	//~ legende = 'Le premier secrétaire du PS, François Hollande';

	

	//~ var div_legende = new Element ('div', {

		//~ 'id' : 'legende',

		//~ 'style' : 'clear: left; background: #000000; margin-left:15px; padding: 5px; font-size: 14px; color: white; font-family: arial; font-weight: bold'

	//~ }).update(legende);

	

	//~ zoomContent.insert (div_legende);

	

	

	

	var zoomLoading = new Element ('div', {

		'id' : 'zoomLoading'

	}).update (new Element ('img', {

		'id' : 'zoomLoading',

		'src' : 'http://www.calamouth.fr/image/layout/zoomLoading.gif'

	}));

	

	zoomContent.hide ();

	zoomLoading.hide ();

	

	Element.insert (document.body, {

		top : zoomContent

	});

	

	Element.insert (document.body, {

		top : zoomLoading

	});

	
	var a_list = $$('a.zoom');

	

	for (var i = 0; i < a_list.length; i ++){

		a_list[i].observe ('click', zoom);

	}
}



var zoomLink;

var timeout;


var dw;

var dh;

var startPosition;

var endPosition;



var count;

function zoom (){
	zoom_delete ();

	

	$('zoomContent').show ();

	

	Element.observe (window, 'resize', zoomAdjustY);
	
	zoomLink = this;
	
	var link = zoomLink.readAttribute ('href');
	this.writeAttribute ('href', 'javascript:resetHREF("' + link + '");');
	
	startPosition = this.firstDescendant ().cumulativeOffset ();
	

	var newZoomImage = new Element ('img', {

		'id' : 'zoomImage'

	});

	

	newZoomImage.observe ('click', zoom_delete);

	newZoomImage.hide ();

	
	newZoomImage.writeAttribute ('src', link);

	

	$('zoomLoading').setStyle ({

		top : startPosition[1] + 'px',

		left : startPosition[0] + 'px',

		visibility : 'visible'

	});

	

	Element.replace($('zoomImage'), newZoomImage);
	
	zoomWait ();
}

function zoomWait () {
	if (!$('zoomImage').complete || (typeof $('zoomImage').naturalWidth != 'undefined' && $('zoomImage').naturalWidth == 0)){
		$('zoomLoading').show ();
		timeout = setTimeout ('zoomWait()', 20);
		return false;
	}
	
	setTimeout ('zoomSetup()', 20);
}


function zoomSetup (){
	$('zoomLoading').hide ();
	

	sw = zoomLink.firstDescendant ().getWidth ();
	sh = zoomLink.firstDescendant ().getHeight ();
	
	dw = $('zoomImage').getWidth ();
	dh = $('zoomImage').getHeight ();

	
	var windowPositionTop = document.viewport.getScrollOffsets().top;
	var windowWidth = document.viewport.getWidth ();
	var windowHeight = document.viewport.getHeight ();
	

	if (dw > windowWidth){

		dh /= dw / (windowWidth - 30)

		dw = windowWidth - 30;

	}

	

	if (dh > windowHeight){

		dw /= dh / (windowHeight - 30)

		dh = windowHeight - 30;

	}

	
	startPosition[0] = startPosition[0] + (sw / 2);
	startPosition[1] = startPosition[1] + (sh / 2);
	
	windowPositionTop *= 1.008;
	

	endPosition = new Array (

		((windowWidth - dw) / 2) + (dw / 2),

		((windowHeight - dh) / 2) + (dh / 2) + windowPositionTop

	);

	

	$('zoomImage').setStyle ({

		width : sw + 'px',

		height : sh + 'px',

		top : (startPosition[1] - (sh - 13)) + 'px',

		left : (startPosition[0] + (0)) + 'px'

	});

	

	count = 1;
	

	window.setTimeout ('zoomUP ();', 60);

}





function zoomUP (){
	count = (count>100)?100:count;
	

	var w = (((dw - sw) / 100) * count) + sw;
	var h = (((dh - sh) / 100) * count) + sh;
	
	var x = (endPosition[0] * (count / 100)) + (startPosition[0] * ((100 - count) / 100));
	var y = (endPosition[1] * (count / 100)) + (startPosition[1] * ((100 - count) / 100));
	

	$('zoomImage').setStyle ({

		width : w + 'px',

		height :  h + 'px'
	});
	
	$('zoomContent').setStyle ({
		left: (x - (w / 2)) + 'px',
		top: (y - (h / 2)) + 'px',
		opacity : .25 + (count / 133)
	});

	

	if (count == 100){

		clearTimeout (timeout);

		

		$('zoomTop').setStyle ({'width' : w + 'px'});

		$('zoomBottom').setStyle ({'width' : w + 'px'});

		$('zoomLeft').setStyle ({'height' : h + 'px'});

		$('zoomRight').setStyle ({'height' : h + 'px'});

		

		$('zoomTop').show ();

		$('zoomBottom').show ();

		$('zoomLeft').show ();

		$('zoomRight').show ();

		

		$('zoomTopLeft').show ();

		$('zoomBottomLeft').show ();

		$('zoomTopRight').show ();

		$('zoomBottomRight').show ();

		

		$('zoomContent').setStyle ({

			'width' : (w + 30) + 'px',

			left: ((x - (w / 2)) - 15) + 'px',

			top: ((y - (h / 2)) - 15) + 'px',

		});

		

		$('zoomImage').setStyle ({

			float : 'left'

		});

	}else{	

		timeout = window.setTimeout ('zoomUP ();', 60);

	}
	
	$('zoomImage').show ();

	

	//~ count += (110 - count) / 6;
	//~ count += count / 1.5;

	//~ count += (Math.cos (count / (100 / (Math.PI * 2))) + 1.1) * 10;

	count += (Math.cos ((count / (100 / (Math.PI * 2))) + Math.PI) + 1.1) * 20;

}



function zoom_delete (){
	clearTimeout (timeout);

	

	Element.stopObserving (window, 'resize', zoomAdjustY);

	

	$('zoomContent').hide ();

	

	$('zoomContent').setStyle ({

		width : '0'

	});

	

	$('zoomTop').hide ();

	$('zoomBottom').hide ();

	$('zoomLeft').hide ();

	$('zoomRight').hide ();

	

	$('zoomTopLeft').hide ();

	$('zoomBottomLeft').hide ();

	$('zoomTopRight').hide ();

	$('zoomBottomRight').hide ();
	
	$('zoomLoading').hide ();
}



function resetHREF (link){

	zoomLink.writeAttribute ('href', link);

}



function zoomAdjustY (){

	var posx = $('zoomContent').cumulativeOffset ()[0];

	var centerX = (document.viewport.getWidth () / 2) - (dw / 2) - 15;

	

	if (posx < centerX - 5 || posx > centerX + 5){

		$('zoomContent').setStyle ({

			left: (((posx * 9) + centerX) / 10) + 'px'

		});

		

		timeout = window.setTimeout ('zoomAdjustY ();', 60);

	}else{

		clearTimeout (timeout);

	}

}