
function gallery(data){

  var thisfunction;
  var photo;
  var photoBox;
  var photoDescription;
  var loadingImg;
  var galleryMenu;

  this.setSlide = function(galleryMenuId){

    galleryMenu = $(galleryMenuId);
    galleryMenu.style.overflow = 'hidden';
    var gallerySlide = $(galleryMenuId+' .gallery_slide')[0];
    var leftArrow = $(galleryMenuId+' .left_arrow')[0];
    var rightArrow = $(galleryMenuId+' .right_arrow')[0];
    var timer;

    if((gallerySlide.offsetWidth)>(galleryMenu.offsetWidth-20)){
  
      // 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';
    
    }
  
  }    

  this.setGallery = function(galleryBox){
    thisfunction = this;
    photoBox = $(galleryBox);
    photoBox.style.height = '500px';
    photo = $(galleryBox+' .gallery_image')[0];
    photoDescription = $(galleryBox+' .gallery_description')[0];
    loadingImg = $(galleryBox+' .loading')[0];
  

    // click sur les diapo
    var diapo = $('#'+galleryMenu.id+' 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 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};
}


