// JavaScript Document
function ClippedImage(tileID, w, h, cw, ch)
{
	if (!document.getElementById) {return;}
	this.tile = document.getElementById(tileID);
	var self = this;
	this.tile.onmouseover = function (e) { self.isOver = true; self.over(e); }
	this.tile.onmouseout = function (e) { self.isOver = false; self.out(e); }
	this.step = 0;
	this.steps = 6;
	this.delay = 43;
	this.outDelay = 20;
	this.width = w;
	this.height = h;
	this.clipWidth = cw;
	this.clipHeight = ch;
	this.tile.style.position = 'absolute';
	this.tile.style.width = w+'px';
	this.tile.style.height = h+'px';
	this.tile.style.zIndex = 1;
	this.setClip(true);
}

ClippedImage.prototype = {
	setClip: function(reposition)
	{
		var deltaX = this.clipWidth + ((this.step/this.steps) * (this.width - this.clipWidth));
		var deltaY = this.clipHeight + ((this.step/this.steps) * (this.height - this.clipHeight));
		var top = (this.height - deltaY)/2;
		var right = (this.width - deltaX)/2 + deltaX;
		var bottom = (this.height - deltaY)/2 + deltaY;
		var left = (this.width - deltaX)/2;
		if (reposition)
		{
			this.tile.style.left = (left*-1)+"px";
			this.tile.style.top =  (top*-1)+"px";
		}
		this.tile.style.clip = 'rect('+top+'px '+right+'px '+bottom+'px '+left+'px)';
	},
	over: function(e) {
		this.step++;
		if ((this.step <= this.steps) && (this.isOver))
		{
			this.setClip(false);
			this.tile.style.zIndex = 1000;
			var self = this;
			setTimeout(function(){self.over()}, self.delay);
		}
	},
	out: function(e) {
		if ((this.step > 0) && (!this.isOver))
		{
			this.step--;
			this.setClip(false);
			var self = this;
			setTimeout(function(){self.out()}, self.outDelay);
		}
		else
		{
			this.tile.style.zIndex = 1;
		}
	} 
}