jsGallery = function(idContainer){this.init(idContainer);return this;}

jsGallery.prototype.init = function(idContainer)
{
	// Config
	this.cols = 2;
	this.rows = 4;
	this.transitionDelay = 20;
	this.deltaOpacity = 0.15;
	this.thumbOpacityOff = 0.5;
	
	// Données à calculer
	this.thumbWidth = 72;
	this.thumbHeight = 62;
	
	this.imgArrowWidth = 43;
	this.imgArrowHeight = 42;
	
	this.imgWidth = 500;
	this.imgHeight = 237;
	
	
	this.rootImages = 'large';
	this.rootThumbs = 'small';
	
	this.imgSuivantImage = '/images/reportage/suivant.png';
	this.imgPrecedentImage = '/images/reportage/precedent.png';
	
	this.isIE = document.all;
	this.currentOpacity = 1;
	this.currentImg = 0;
	this.transition = false;
	
	this.container = document.getElementById(idContainer);
	this.elts = this.container.getElementsByTagName("li");

	document.getElementById('galleryNavigation').style.width = this.thumbWidth * this.cols + 'px'; 
	document.getElementById('galleryNavigation').style.height = this.thumbHeight * this.rows + 'px'; 
	document.getElementById('galleryNavigation').style.overflow = 'hidden';
	
	currentCol = currentRow = origLeft = 0;
	for (i = 0; i < this.elts.length; i++)
	{
		if (currentRow == this.rows)
		{
			currentRow = 0;
			origLeft += parseInt(this.cols * this.thumbWidth);
		}
		
		this.elts[i].style.position = 'absolute';
		
		this.elts[i].style.left = parseInt(origLeft + currentCol * this.thumbWidth) + 'px';
		this.elts[i].style.top = parseInt(currentRow * this.thumbHeight) + 'px';

		if (++currentCol == this.cols)
		{
			currentCol = 0;
			currentRow++;
		}
		
		this.imgOnmouseout(this.elts[i], i);
		this.elts[i].onmouseover = this.bindArgs(this, this.imgOnmouseover, [this.elts[i], i]);
		this.elts[i].onmouseout = this.bindArgs(this, this.imgOnmouseout, [this.elts[i], i]);
		this.elts[i].onclick = this.bindArgs(this, this.imgClick, [this.elts[i], i]);
	}
	document.getElementById('galleryImage').innerHTML = '<img src="'+this.elts[0].firstChild.src.replace(this.rootThumbs, this.rootImages)+'" id="img" />';
	document.getElementById('galleryImage').style.height='240px';
	this.elts[0].style.borderColor = '#666';
	this.displayRight();
};

jsGallery.prototype.bindArgs = function(objet, methode, myArgs) {
  return function() {
    return methode.apply(objet, myArgs);
  }
};

jsGallery.prototype.imgClick = function(obj, num)
{
	if (this.transition === true) return(false);
	old = this.currentImg;
	this.currentImg = num;
	if (this.elts[old])
	{
		this.elts[old].style.borderColor = '#ccc';
		this.imgOnmouseout(this.elts[old], old);
	}
	obj.style.borderColor = '#666';
	this.setOpacity(obj, 1);
	src = obj.firstChild.src.replace(this.rootThumbs, this.rootImages);
	this.transition = true;
	this.transitionImage(src);
}

jsGallery.prototype.transitionImage = function(src)
{
	if (typeof(src) == 'undefined' && this.currentOpacity < 1)
	{
		this.currentOpacity = Math.min(this.currentOpacity + this.deltaOpacity, 1);
		this.setOpacity(document.getElementById('img'), this.currentOpacity);
		setTimeout(this.bindArgs(this, this.transitionImage, []), this.transitionDelay);
	}
	else if (typeof(src) != 'undefined' && this.currentOpacity > 0)
	{
		this.currentOpacity = Math.max(this.currentOpacity - this.deltaOpacity, 0);
		this.setOpacity(document.getElementById('img'), this.currentOpacity);
		setTimeout(this.bindArgs(this, this.transitionImage, [src]), this.transitionDelay);
	}
	else if (typeof(src) != 'undefined')
	{
		document.getElementById('galleryImage').innerHTML = '<img src="'+src+'" id="img" />';
		document.getElementById('galleryImage').style.height='240px';
		this.setOpacity(document.getElementById('img'), 0);
		setTimeout(this.bindArgs(this, this.transitionImage, []), this.transitionDelay);
	}
	else
	{
		this.transition = false;
		this.displayImageNavigation();
	}
}

jsGallery.prototype.displayImageNavigation = function()
{
  this.displayLeft();
	this.displayRight();
	
	document.getElementById('img').onmouseover = this.bindArgs(this, this.setOpacityNavigation, [0.2]);
	document.getElementById('img').onmouseout = this.bindArgs(this, this.setOpacityNavigation, [0]);
}

jsGallery.prototype.setOpacityNavigation = function(opacity)
{
  if (document.getElementById('gallerySuivant'))
    this.setOpacity(document.getElementById('gallerySuivant'), opacity);
    
  if (document.getElementById('galleryPrecedent'))
    this.setOpacity(document.getElementById('galleryPrecedent'), opacity);
}

jsGallery.prototype.displayLeft = function()
{
	if (this.currentImg > 0)
	{
		d = document.createElement("DIV");
		d.id = "galleryPrecedent";
		d.style.width = this.imgArrowWidth + 'px';
		d.style.height = this.imgArrowHeight + 'px';
		d.style.cursor = 'pointer';
		d.style.position = 'absolute';
		d.style.left = '0px';
		d.style.top = parseInt((this.imgHeight - this.imgArrowHeight) / 2) + 'px';
		d.style.backgroundImage = "url('"+this.imgPrecedentImage+"')";
		d.onclick = this.bindArgs(this, this.navImg, [parseInt(this.currentImg) - 1]);
		d.onmouseover = this.bindArgs(this, this.setOpacity, [d, 0.6]);
		d.onmouseout = this.bindArgs(this, this.setOpacity, [d, 0.2]);
		document.getElementById('galleryImage').appendChild(d);
		this.setOpacity(d, 0);
	}
}

jsGallery.prototype.displayRight = function()
{
	if (this.currentImg < (this.elts.length - 1))
	{
		d = document.createElement("DIV");
		d.id = "gallerySuivant";
		d.style.width = this.imgArrowWidth + 'px';
		d.style.height = this.imgArrowHeight + 'px';
		d.style.cursor = 'pointer';
		d.style.position = 'absolute';
		d.style.left =  parseInt(this.imgWidth - this.imgArrowWidth) + 'px';
		d.style.top = parseInt((this.imgHeight - this.imgArrowHeight) / 2) + 'px';
		d.style.backgroundImage = "url('"+this.imgSuivantImage+"')";
		d.onclick = this.bindArgs(this, this.navImg, [parseInt(this.currentImg) + 1]);
		d.onmouseover = this.bindArgs(this, this.setOpacity, [d, 0.6]);
		d.onmouseout = this.bindArgs(this, this.setOpacity, [d, 0.2]);
		document.getElementById('galleryImage').appendChild(d);
		this.setOpacity(d, 0);
	}
}

jsGallery.prototype.imgOnmouseout = function(obj, num)
{
	if (num != this.currentImg)
	{
		this.setOpacity(obj, this.thumbOpacityOff);
	}
}

jsGallery.prototype.imgOnmouseover = function(obj, num)
{
  this.setOpacity(obj, 1);
}

jsGallery.prototype.navImg = function(newImg)
{
  this.setOpacityNavigation(0);
	this.imgClick(this.elts[newImg], newImg);
}

jsGallery.prototype.debug = function(msg)
{
	document.getElementById('debug').innerHTML += msg + '<br />';
}

jsGallery.prototype.setOpacity = function(obj, opacity)
{
  
	if (this.isIE)
	{
    ieOpacity = opacity * 100;
    obj.style.filter = "Alpha(Opacity=" + ieOpacity + ")";
	}
	else
		obj.style.opacity = opacity;
}