// Gestion du cluetip
$('#titre').hide();
// Affichage de la légende
function afficheLegende(texte, position){
	$('#titre').show();
	// TEMP
	
	if( !$.browser.safari ){
		//texte2 = position +' px';
		$('#titre').html(texte);
		$('#titre').css("margin-top", position + "px");
	}else{
		$('#titre').html(texte);
		positionSF = $('#cluetip').position().top - 80;
		$('#titre').css("margin-top", positionSF + "px");
	}
		
	
	
}

$(document).ready(
	function()
	{
			
		// POUR CHAQUE DIV ayant comme classe 'zoom'
		$('div.zoom').each(
			function (i) {
				var _this = $(this);
				var _attr = $(this).text();
				
				if( _attr.length <= 0){
					// Récupération de  l'url de l'image
					var _currentLink = $(this).parents('div').children('a');
					$(_currentLink).mouseover(
						function(){
							// On récupère la légende
							//afficheLegende('rrrrrrrrrrrr', 100);
							var legende =  _this.parent('div').children('p.titre');
							_legendeTexte = legende.html();
							// Réglage de la position de la légende
							var decalageHaut = 80;
							_legendePosition = _this.parent('div').offset().top - decalageHaut;
							$('#titre').show();
							$('#titre').html(_legendeTexte);
							$('#titre').css("margin-top", _legendePosition + "px");
						}
					);
					$(_currentLink).mouseout(
						function(){
							$('#titre').html('');
							$('#titre').hide();
						}
					);
					
					
				}else{
					
					// ===========================
					// Preload des images
					// ===========================
					// Récupération de  l'url de l'image
					var _currentLink = $(this).parents('div').children('a');
					var _this = $(this);
					var _imageLink = _currentLink.attr('href');
					
					var _previewImageObject = _currentLink.children('img');
					// ======================================
					// Récupération de la taille des images
					// ======================================
					var _imageWidth;
					var _imageHeight;
					
					var _legendeTexte ="";
					var _legendePosition = "";
					
					//if(i == 2 || i == 10 || i == 20){
						var loader = new ImageLoader(_imageLink);
						loader.loadEvent = function(url, image){
						   //actions to perform when the image is loaded
						   //alert(url + ' is loaded');
						   //document.body.appendChild(image);
							//_this.html('<img src="'+ _imageLink +'" '+ attr +' />');
							_this.html('<img src="'+ _imageLink +'" '+ _attr +' />');
							 // On récupère sa largeur
							_imageWidth = _this.width();
							// On récupère sa hauteur
							_imageHeight = _this.height();
							//hide loading indicator if applicable
							
							//alert(url + ' is loaded ' + imageWidth + " " + imageHeight);
							//var currentPicture = _currentLink.children('img');	
							
							// On récupère la légende
							var legende =  _this.parent('div').children('p.titre');
							_legendeTexte = legende.html();
							// Réglage de la position de la légende
							var decalageHaut = 80;
							_legendePosition = _this.parent('div').offset().top - decalageHaut;
							
							/*
							$('body').mouseover(
								function(){
									$('#titre').html('');
									$('#titre').hide();
								}	
							);*/
							
							_previewImageObject.mouseout(
								function(){
									$('#titre').html('');
									$('#titre').hide();
								}	
							);
	
							// On active le zoom 
							// en donnant comme largeur la largeur calculée, et comme hauteur la hauteur calculée
							$(_currentLink).cluetip(
								{
									local:true,
									hideLocal: true,
									cursor: 'pointer',
									positionBy: 'mouse',
									topOffset: 15,
									leftOffset: 15,
									sticky: false,
									width: _imageWidth,
									height: _imageHeight,
									showTitle: false,
									dropShadow: false,
									dropShadowSteps: 6,
									tracking: true,
									onShow: function(){
										afficheLegende(_legendeTexte, _legendePosition);
									}
								}
							);
	
						}
						loader.load();
					//}// end if
				
				
				// ==================================

				} //else


			} //function (i) {
		);
	}
);