var fast_timeout   = 10; // 10 ms
var global_timeout = 50; // 250 ms

var myWidth = -1;
var myHeight = -1;
window.onresize = getWindowSize;

var myX = -1;
var myY = -1;

window.onscroll = getScrollPos;

function getWindowSize() {
	if(typeof(window.innerWidth) == 'number') { 
		//Non-IE
	  myWidth = window.innerWidth;
	  myHeight = window.innerHeight;
	} else if( document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
	  //IE 6+ in 'standards compliant mode'
	  myWidth = document.documentElement.clientWidth;
	  myHeight = document.documentElement.clientHeight;
	} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
	  //IE 4 compatible
	  myWidth = document.body.clientWidth;
	  myHeight = document.body.clientHeight;
	}
}

function getScrollPos() {
  myX = (document.all) ? document.documentElement.scrollLeft : window.pageXOffset;
  myY = (document.all) ? document.documentElement.scrollTop : window.pageYOffset;
} 

function findPosX(obj) {
  var curleft = 0;
  if(obj.offsetParent) {
    while(1) {
      curleft += obj.offsetLeft;
      if(!obj.offsetParent) {
        break;
      }
      obj = obj.offsetParent;
    }
  } else if(obj.x) {
    curleft += obj.x;
  }
  return curleft;
}

function findPosY(obj) {
  var curtop = 0;
  if(obj.offsetParent) {
    while(1) {
      curtop += obj.offsetTop;
      if(!obj.offsetParent) {
        break;
      }
      obj = obj.offsetParent;
    }
  } else if(obj.y) {
    curtop += obj.y;
  }
  return curtop;
}


function ixID(id, sImgSrc) {
	if (document.getElementById) {
		var img = document.getElementById(id);
		if (img) {
			ix(img, sImgSrc);
		}
	}
}

function i(oThumb) {
	if (oThumb.parentNode) {
		var parentImg = oThumb.parentNode.getAttribute("href");
		if (parentImg) {
			ix(oThumb, parentImg); 
		}
	}
}

function ix(oThumb, sImgSrc) {
	new ImageExpander(oThumb, sImgSrc); 
}
function ImageExpander(oThumb, sImgSrc) {
	if (myWidth == -1) { getWindowSize(); }
	
	// store thumbnail image and overwrite its onclick handler.
	this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }
	
	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	

	// record original offset 
	this.ox = findPosX(this.oThumb); //.offsetLeft;
	this.oy = findPosY(this.oThumb); // .offsetTop;
	
	this.bExpand = true;
	this.bTicks = false;

	this.nHit = 0;
	this.nLastHit = 0;
	
	// self organized list
	if (!window.aImageExpanders) {
		window.aImageExpanders = new Array();
	}
	window.aImageExpanders.push(this);

	// create the full sized image.
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function() { this.expander.onload(); }
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function() {
	this.oDiv = document.createElement("div");
	document.body.appendChild(this.oDiv);

/*	var oTextSpan = document.createElement('div');
	oTextSpan.style.position = "absolute";
	oTextSpan.style.backgroundColor = "white"; // title qui apparait
	oTextSpan.innerHTML = this.oThumb.title;

	this.oDiv.appendChild(oTextSpan); */

	this.oDiv.appendChild(this.oImg);
	this.oDiv.style.position = "absolute";
	this.oDiv.expander = this;
	this.oDiv.onclick = function() { this.expander.toggle(); };
	
	this.oImg.title = "cliquer pour réduire l'image"// "Click to reduce."; this.oThumb.title; 
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;
	
	if (this.bExpand)	{
		this.expand();
	}	else {
		this.oDiv.style.visibility = "hidden";
		this.oImg.style.visibility = "hidden";
	}
}

ImageExpander.prototype.toggle = function() {
	this.bExpand = !this.bExpand;
	if (this.bExpand)	{
		for (var i in window.aImageExpanders) {
			if (window.aImageExpanders[i] !== this) {
				window.aImageExpanders[i].reduce();
			}
		}
	}
}

ImageExpander.prototype.expand = function() {
	// set direction of expansion.
	this.bExpand = true;

	// set all other images to reduce
	for (var i in window.aImageExpanders) {
		if (window.aImageExpanders[i] !== this) {
			window.aImageExpanders[i].reduce();
		}
	}

	// if not loaded, don't continue just yet
	if (!this.oDiv) return;
	
	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";
	
	// calculate initial dimensions
	this.x = this.ox;
	this.y = this.oy;
	this.w = this.oThumb.clientWidth;
	this.h = this.oThumb.clientHeight;
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	this.oDiv.style.visibility = "visible";
	this.oImg.style.visibility = "visible";
	
	// start the animation engine.
	if (!this.bTicks) {
		this.bTicks = true;
		var pThis = this;
		window.setTimeout( function() { pThis.tick(); }, fast_timeout);	
	}
}

ImageExpander.prototype.reduce = function() {
	// set direction of expansion.
	this.bExpand = false;
}

ImageExpander.prototype.tick = function() {
	// calculate screen dimensions
	var cw = myWidth;  // window.screen.availWidth  ou document.body.clientWidth
	var ch = myHeight; // window.screen.availHeight ou document.body.clientHeight

	if (myX > 0) { ch -= 20; }
	if (myY > 0) { cw -= 20; }
	
	var cx = myX + cw / 2;
	var cy = myY + ch / 2;

	// calculate target
	var tw,th,tx,ty;
	if (this.bExpand) {
		tw = this.bigWidth;
		th = this.bigHeight;
		if (tw > cw) {
			th *= cw / tw;
			tw = cw;
		}	
		if (th > ch) {
			tw *= ch / th;
			th = ch;
		}
		tx = cx - tw / 2;
		ty = cy - th / 2; 
	} else {
		tw = this.smallWidth;
		th = this.smallHeight;
		tx = this.ox;
		ty = this.oy;
	}
	// move 5% closer to target
	this.nHit = 0;
	this.x = this.fMove(this.x, tx);
	this.y = this.fMove(this.y, ty);
	this.w = this.fMove(this.w, tw);
	this.h = this.fMove(this.h, th);
	
	if (this.nHit < 4) {
		this.oDiv.style.left = this.x + "px";
		this.oDiv.style.top = this.y + "px";
		this.oImg.style.width = this.w + "px";
		this.oImg.style.height = this.h + "px";
	}
	
	// if reducing and size/position is a match, stop the tick	
	if (!this.bExpand && (this.nHit == 4)) {
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oThumb.style.visibility = "visible";

		this.bTicks = false;
	}
	
	if (this.bTicks) {
		var pThis = this;
		window.setTimeout( function() { pThis.tick(); }, (this.nHit < 4) ? fast_timeout : global_timeout);
	}

	// lastHit compare
	var bChanged = (this.nLastHit != this.nHit);
	this.nLastHit = this.nHit;
	
	// expanded or reduced event :
	if (this.nHit == 4 && bChanged) {
		var pThis = this;
		window.setTimeout( function() { pThis.onFinished(); }, global_timeout);
	}
}

ImageExpander.prototype.fMove = function(n,tn) {
	var dn = tn - n;
	if (Math.abs(dn) < 3) {
		this.nHit++;
		return tn;
	} else {
		return n + dn / 10;
	}
}

ImageExpander.prototype.onFinished = function() {
	var del = top.window.delay;
	if (typeof(del) == "undefined") {
		return;
	}
	start();
}

/* code html 
<a href="GROSSE_IMAGE" onclick="return false"><img src="VIGNETTE" alt="texte de remplacement" "title="cliquer pour agrandir" onclick="new ImageExpander(this, 'GROSSE_IMAGE')"></a>
*/