function protect(zIdx, divId, closeBtn) {
  // on essaye de recuperer la div de protection
  var closeBtn = $(closeBtn);
  var protectDiv = $(protectDiv);
  var divId = $(divId);
  divId.setOpacity('0.0');
  
  var speed = 0.5;
  var opacity = 0.75;
   
  if(! protectDiv ) {
    // si on ne la trouve pas on la créé
    protectDiv  = new Element("div", {id:"protectDiv", style:"background-color:#000000;position:absolute;top:0;left:0;display:none;z-index:1;"});
    $(document.body).insert(protectDiv);
    protectDiv.setOpacity(0.0);
  }
   
  // on recupere les dimensions du viewport
  var vpDim = document.viewport.getDimensions();
  // ... les dimensions du body
  var bodyDim = $(document.body).getDimensions();
  // On garde le max 
  var protectDim = {
    width: Math.max(vpDim.width, bodyDim.width), 
    height: Math.max(vpDim.height, bodyDim.height)
  };
  // qui definissent la taile de notre div de protection
  protectDiv.setStyle({
    width:protectDim.width + "px",
    height: protectDim.height + "px",
    zIndex:zIdx
  });
  
  divId.setStyle({
    position: "absolute",
    zIndex:zIdx+1
  }); 
  
  center(divId);
  
  // on l'affiche
  protectDiv.show();
  divId.show();
  Effect.Appear(protectDiv, { duration: speed, from: 0, to: opacity });
  Effect.Appear(divId, { duration: speed, from: 0, to: 1 });
  
  protectDiv.observe('click', function() { 
    Effect.Fade(protectDiv, { duration: speed, from: opacity, to: 0 });
	Effect.Fade(divId, { duration: speed, from: 1, to: 0 });
});
  
  closeBtn.observe('click', function() { 
    Effect.Fade(protectDiv, { duration: speed, from: opacity, to: 0 });
	Effect.Fade(divId, { duration: speed, from: 1, to: 0 });
});
}

function getBigImage(divID) {
	var divID = $(divID);
	divID.setOpacity(0.0);
	
	divID.setStyle({
		zIndex: "999",
		position: "absolute",
		top: "0px",
		left: "0px",
		'z-index': "9999"
	});
	
	divID.show();
  	Effect.Appear(divID, { duration: 0.5, from: 0, to: 1 });
	divID.observe('mouseout', function() { 
		Effect.Fade(divID, { duration: 0.5, from: 1, to: 0 });
	});	
}

function center(divId) {
var elt = $(divId);

var eltDims = elt.getDimensions()
var protectDim = document.viewport.getDimensions();
var eltx = eltDims.width;
var elty = eltDims.height;

// calculate the center of the page using the browser and element dimensions
var posy  = parseInt(protectDim.height/2) - (elty/2);
var posx = parseInt(protectDim.width/2) - (eltx/2);

var scrolly = getScrollPosition();
// set the style of the element so it is centered
var styles = { 
	position : 'absolute',
	top      : (scrolly[1]+posy) + 'px',
	left     : posx + 'px'
};

elt.setStyle(styles);
}

function getScrollPosition(){	
return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);}