function gallery(data){

  var thisfunction = this;
  var photo = $('#gallery_image');
  var photoBox = $('#gallery_box');
  var photoDescription = $('#gallery_description');
  var loadingImg = $('#loading');


  // click sur les diapo
  var diapo = $('#gallery_menu a');  
  for (var i=0; i<diapo.length; i++) {
    diapo[i].onclick = function(){
      var photoId = this.id.replace('diapo_','');
      thisfunction.displayImage(photoId);
      return false;
    }
  }

  this.displayImage = function(numIm){

    // display loading
    photo.style.display = 'none';
    loadingImg.style.display = 'inline';
  
    // recuper la bonne photo
    var xmlPhoto = data.getElementsByTagName('photo_'+numIm)[0];
    var srcPhoto = xmlPhoto.getElementsByTagName('src')[0].firstChild.nodeValue;
    var descPhoto = xmlPhoto.getElementsByTagName('description')[0];
    var widthPhoto = xmlPhoto.getElementsByTagName('width')[0].firstChild.nodeValue;
    var heightPhoto = xmlPhoto.getElementsByTagName('height')[0].firstChild.nodeValue;

    // charge l'image
    var imagesLoader=new Image();
    imagesLoader.onload = function() {         
      setTimeout(function(){
        loadingImg.style.display = 'none';      
        photoDescription.innerHTML = (descPhoto)?descPhoto.firstChild.nodeValue:'';// description
        photo.style.width = widthPhoto+'px'; // width  
        photo.style.height = heightPhoto+'px';// height 
        photo.id = 'gallery_image';
        photo.src = srcPhoto;
        photo.style.display = 'inline';
      }, 100);                
    };
    imagesLoader.src=srcPhoto;
  }
}

function slideDiapo(){

  var galleryMenu = $('#gallery_menu');
  var gallerySlide = $('#gallery_slide');
  var leftArrow = $('#left_arrow');
  var rightArrow = $('#right_arrow');
  var timer;

  if((gallerySlide.offsetWidth)>galleryMenu.offsetWidth){
  
    gallerySlide.style.left = '15px';
    // fait aparaitre les boutons
    leftArrow.style.display = 'block';
    rightArrow.style.display = 'block';

    // initialise
    var slideX = gallerySlide.offsetLeft;
    slideLimit = (galleryMenu.offsetWidth)-(gallerySlide.offsetWidth+20);
    
    galleryMenuPos = findPos(galleryMenu);
    
    gallerySlide.onmousemove = function(e){ 

      var cursor = getCursor(e);
      cursorToDiv = (cursor.x - (galleryMenuPos.x+(galleryMenu.offsetWidth/2)));
      cursorRatio = cursorToDiv/50;
      
      gallerySlide.onmouseover = function(){
        timer = setInterval(function() {
          if (gallerySlide.offsetLeft-cursorRatio > 20){
            clearInterval(timer);
            gallerySlide.style.left = '20px';
          }else if(gallerySlide.offsetLeft-cursorRatio < slideLimit){
            clearInterval(timer);
            gallerySlide.style.left = slideLimit+'px';
          }else{
            slideX -= cursorRatio;
            gallerySlide.style.left = slideX+'px';
          }
        }, 50);
      }
    }
    
    leftArrow.onmouseover = function(){   
      timer = setInterval(function() {
        if (gallerySlide.offsetLeft+7 > 20){
          clearInterval(timer);
          gallerySlide.style.left = '20px';
        }else{
          slideX += 7;
          gallerySlide.style.left = slideX+'px';
        }
      }, 50);
    }
    
    rightArrow.onmouseover = function(){ 
      timer = setInterval(function() {
        if ((gallerySlide.offsetLeft-7) < slideLimit){
          clearInterval(timer);
          gallerySlide.style.left = slideLimit+'px';
        }
        else{
          slideX -= 7;
          gallerySlide.style.left = slideX+'px';
        }
      }, 50);
    }    
    
    leftArrow.onmouseout = function() {clearInterval(timer)}
    rightArrow.onmouseout = function() {clearInterval(timer)}
    galleryMenu.onmouseout = function() {clearInterval(timer)}
    
  }else{
  
    leftArrow.style.display = 'none';
    rightArrow.style.display = 'none';
    
  }
  
}

function findPos(el) {
	var x = y = 0;
	if(el.offsetParent) {
		x = el.offsetLeft;
		y = el.offsetTop;
		while(el = el.offsetParent) {
			x += el.offsetLeft;
			y += el.offsetTop;
		}
	}
	return {'x':x, 'y':y};
}