window.onload = function (){
	var zoomContent = new Element ('div', {
		'id' : 'zoomContent'
	});
	
	var image = new Element ('img', {
		'id' : 'zoomImage'
	})
	
	var div_top_corner_left = new Element ('div', {
		'id' : 'topCornerLeft',
		'style' : 'float: left; height: 15px; width: 15px;'
	})
	
	var div_top = new Element ('div', {
		'id' : 'top',
		'style' : 'float: left; height: 15px'
	})
	
	var div_top_corner_right = new Element ('div', {
		'id' : 'topCornerRight',
		'style' : 'float: left; height: 15px; width: 15px'
	})
	
	var div_2 = new Element ('div', {
		'style' : 'clear: left;'
	})
	
	var div_left = new Element ('div', {
		'id' : 'left',
		'style' : 'float: left; width: 15px'
	})
	
	var div_right = new Element ('div', {
		'id' : 'right',
		'style' : 'float: left; width: 15px'
	})
	
	var div_bottom = new Element ('div', {
		'id' : 'bottom',
		'style' : 'float: left; height: 15px'
	})
	
	var div_bottom_corner_left = new Element ('div', {
		'id' : 'bottomCornerLeft',
		'style' : 'float: left; height: 15px; width: 15px;'
	})
	
	var div_bottom_corner_right = new Element ('div', {
		'id' : 'bottomCornerRight',
		'style' : 'float: right; height: 15px; width: 15px;'
	})
	
	//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_top_corner_left);
	zoomContent.insert(div_top);
	zoomContent.insert(div_top_corner_right);
	zoomContent.insert(div_2);
	div_2.insert(div_left);
	div_2.insert(image);
	zoomContent.insert(div_right);
	zoomContent.insert(div_bottom_corner_left);
	zoomContent.insert(div_bottom);
	zoomContent.insert(div_bottom_corner_right);
	//zoomContent.insert(div_legende);

	var zoomLoading = new Element ('div', {
		'id' : 'zoomLoading'
	}).update (new Element ('img', {
		'src' : IMG_ROOT_PATH+'zoom/ajax-loader.gif'
	}));
	
	zoomLoading.observe ('click', zoom_delete);
	
	Element.insert (document.body, {
		top : zoomContent
	});
	
	Element.insert (document.body, {
		top : zoomLoading
	});
	
	zoomContent.hide();
	$('zoomLoading').hide();
	
	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 decalage = 15;
var sizeLoader = 35;
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 ();
	
	$('zoomImage').writeAttribute ('src', link);
		
	$('zoomLoading').setStyle ({
		top : (startPosition[1] + ($(this).getHeight () / 2)) - sizeLoader + 'px',
		left : (startPosition[0] + ($(this).getWidth () / 2)) - sizeLoader + 'px'
	});
	
	zoomWait ();
}

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

function zoomSetup (){
	Effect.Appear($('zoomLoading'), {duration:1, fps:25, from:1.0, to:0.0});
	
	var s_width = zoomLink.firstDescendant ().getWidth ();
	var s_height = zoomLink.firstDescendant ().getHeight ();
	
	var b_width = $('zoomImage').getWidth ();
	var b_height = $('zoomImage').getHeight ();
	
	var windowPositionTop = document.viewport.getScrollOffsets().top;
	var windowWidth = document.viewport.getWidth ();
	var windowHeight = document.viewport.getHeight ();
	
	startPosition[0] = (startPosition[0] + (s_width / 2)) - decalage;
	startPosition[1] = (startPosition[1] + (s_height / 2)) - decalage;
	
	endPosition = new Array (
		((windowWidth - b_width) / 2) + (b_width / 2) - 15,
		((windowHeight - b_height) / 2) + (b_height / 2) + windowPositionTop - 15
	);
	
	$('zoomImage').setStyle ({
		float : 'left',
		width : s_width + 'px',
		height : s_height + 'px',
		top : (startPosition[1] - (s_height - 13)) + 'px',
		left : (startPosition[0] + (0)) + 'px'
	});
	
	dw = b_width;
	dh = b_height;
	
	sw = s_width;
	sh = s_height;
	
	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',
		float : 'left'
	});
	
	$('zoomContent').setStyle ({
		left: (x - (w / 2)) + 'px',
		top: (y - (h / 2)) + 'px',
		opacity : .25 + (count / 133),
		height : (h +30) + 'px',
		width : (w +30) + 'px'
	});
	
	$('topCornerLeft').setStyle ({
		background : 'url('+IMG_ROOT_PATH+'zoom/top_corner_left.png)'
	});
	
	$('top').setStyle ({
		width : w + 'px',
		background : 'url('+IMG_ROOT_PATH+'zoom/top.png)'
	});
	
	$('topCornerRight').setStyle ({
		background : 'url('+IMG_ROOT_PATH+'zoom/top_corner_right.png)'
	});
	
	$('left').setStyle ({
		height : h + 'px',
		background : 'url('+IMG_ROOT_PATH+'zoom/left.png)'
	});
	
	$('right').setStyle ({
		height : h + 'px',
		background : 'url('+IMG_ROOT_PATH+'zoom/right.png)'
	});
	
	$('bottomCornerLeft').setStyle ({
		background : 'url('+IMG_ROOT_PATH+'zoom/bottom_corner_left.png)'
	});
	
	$('bottom').setStyle ({
		width : w + 'px',
		background : 'url('+IMG_ROOT_PATH+'zoom/bottom.png)'
	});
	
	$('bottomCornerRight').setStyle ({
		background : 'url('+IMG_ROOT_PATH+'zoom/bottom_corner_right.png)'
	});
		
	/*$('legende').setStyle ({
		width : (w - 10) + 'px',
		//position: 'relative'
		position: 'absolute'
	});*/
	
	if (count == 100){
		clearTimeout (timeout);
		//Effect.Appear($('legende'), {duration:0.4, fps:25, from:0.0, to:0.7});
		Effect.Appear($('top'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('left'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('right'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('bottom'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('topCornerRight'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('topCornerLeft'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('bottomCornerRight'), {duration:0.4, fps:25, from:0.0, to:1.0});
		Effect.Appear($('bottomCornerLeft'), {duration:0.4, fps:25, from:0.0, to:1.0});
	} else {	
		timeout = window.setTimeout ('zoomUP ();', 60);
	}
	
	$('zoomImage').show ();
	
	//~ count += (110 - count) / 2;
	//~ count += count / 10;
	//~ count += (Math.cos (count / (100 / (Math.PI * 2))) + 1.1) * 10;
	count += (Math.cos ((count / (100 / (Math.PI * 2))) + Math.PI) + 1.1) * 25;
}
function test()
{
	Effect.Appear($('zoomContent'), {duration:0.2, fps:25, from:1.0, to:0.0, afterFinish:zoom_delete});
}

function zoom_delete (){
	clearTimeout (timeout);
	
	var newZoomImage = new Element ('img', {
		'id' : 'zoomImage'
	});
	
	newZoomImage.observe ('click', test);
	Element.replace($('zoomImage'), newZoomImage);
	
	$('zoomContent').hide();
	
	$('zoomLoading').hide ();
	$('zoomImage').hide ();
	//$('legende').hide ();
	
	$('left').setStyle ({
		opacity : 0
	});
	$('topCornerLeft').setStyle ({
		opacity : 0
	});
	
	$('top').hide ();
	$('right').hide ();
	$('bottom').hide ();
	$('topCornerRight').hide ();
	$('bottomCornerRight').hide ();
	$('bottomCornerLeft').hide ();
}

function resetHREF (link){
	zoomLink.writeAttribute ('href', link);
}

function zoomAdjustY (){
	var position = $('zoomContent').cumulativeOffset ();
	var windowWidth = document.viewport.getWidth ();
	
	var posx = position[0] + (dw / 2);
	var centerX = (windowWidth / 2) - 15;
	
	if (posx < centerX - 5 || posx > centerX + 5){
		$('zoomContent').setStyle ({
			left: (((centerX + (posx * 7)) / 8) - (dw / 2)) + 'px'
		});
		
		timeout = window.setTimeout ('zoomAdjustY ();', 60);
	}else{
		clearTimeout (timeout);
	}
}