/*
	Class to scroll a number of items horizontally. or vertically.
	Parameters:
		id = id of outer tag, the "view port". Has overflow: hidden and fixed width/height.
		triggerid = id of element that triggers a mouse-event. Can be null -> view port triggers.
		dir = orientation of the carrousel. 'v' or 'V' is vertically, else horizontally.

<!-- example -->
<script src="rx_carrousel.js" type="text/javascript"></script>
<style type="text/css" title="text/css">
#carrousel_id_h, #carrousel_id_v { position: relative; overflow: hidden; width: 100px; height: 50px; }
.content { position: absolute; }
.elements { white-space: nowrap; }
</style>
<!-- horizontal -->
<div id="carrousel_id_h">
	<table class="content">
		<tr>
			<td class="elements">element 1...</td>
			<td class="elements">element 2...</td>
		</tr>
	</table>
</div>
<!-- vertical -->
<div id="carrousel_id_v">
	<div class="content">
		<div class="elements">element 1...</div>
		<div class="elements">element 2...</div>
		<div class="elements">element 3...</div>
		<div class="elements">element 4...</div>
	</div>
</div>
<script>
<!--
	new rx_carrousel('carrousel_id_h',null,'h');
	new rx_carrousel('carrousel_id_v',null,'v');
//-->
</script>

*/

function rx_carrousel( id, triggerid, dir ) {
	this.instanceId = rx_carrousel.instances.length;
	rx_carrousel.instances[ this.instanceId ] = this;
	if ( id ) this.init(id, triggerid, dir);
}
rx_carrousel.instances = [];
rx_carrousel.prototype.MAX_SPEED = 4;
rx_carrousel.prototype.SLIDE_THRESHOLD = 2;
rx_carrousel.prototype.ELEM_CLASS = 'element';
rx_carrousel.prototype.init = function(id, triggerid, dir) {
	this.container = document.getElementById(id);
	if (triggerid == null ) this.trigger = this.container;
	else this.trigger = document.getElementById(triggerid);
	this.hor = (dir != 'v' && dir != 'V');
	for (
		this.content = this.container.firstChild; 
		this.content && this.content.nodeType != 1; 
		this.content = this.content.nextSibling
	);
	this.elements = [];
	for ( var n = this.content.firstChild; n; n=n.nextSibling) {
		if ( n.className==this.ELEM_CLASS ) this.elements.push(n);
	}
	this.left = 0;
	this.top = 0;
	var timer = null;
	var ref = this;
	this.trigger.onmouseover = function () { ref.starttrack.call(ref); };
	this.trigger.onmouseout = function () { ref.stoptrack.call(ref);};
}
rx_carrousel.prototype.starttrack = function() {
	if ( this.hor ) {
		if (this.container.offsetWidth > this.content.offsetWidth) return;
	} else {
		if (this.container.offsetHeight > this.content.offsetHeight) return;
	}
	var ref = this;
	document.onmousemove  = function (e) { ref.handleMove.call(ref,e); };
	this.timer = setInterval("rx_carrousel.instances["+this.instanceId+"].slide"+(this.hor ? 'X' : 'Y')+".call(rx_carrousel.instances["+this.instanceId+"]);", 10);
}
rx_carrousel.prototype.stoptrack = function() {
	document.onmousemove = null;
	clearInterval(this.timer);
}

rx_carrousel.prototype.handleMove = function(e) {
	if (document.all) {
		tempX = event.clientX + document.documentElement.scrollLeft;
		tempY = event.clientY + document.documentElement.scrollTop;
	} else {
		tempX = e.pageX;
		tempY = e.pageY;
	}
	if (tempX < 0) tempX = 0;
	if (tempY < 0) tempY = 0;
	this.mouseX = tempX;
	this.mouseY = tempY;
}
rx_carrousel.prototype.findAbsX = function(obj) {
	var x = obj.offsetLeft;
	while (obj = obj.offsetParent) x += obj.offsetLeft
	return x;
}
rx_carrousel.prototype.findAbsY = function(obj) {
	var y = obj.offsetTop;
	while (obj = obj.offsetParent) y += obj.offsetTop
	return y;
}
rx_carrousel.prototype.slideX = function() {
	if(!this.mouseX) return;
	var x = this.mouseX - this.findAbsX(this.container) - this.container.offsetWidth * 0.5;
	var speed = 2 * x * this.MAX_SPEED / this.container.offsetWidth;
	if (speed > this.SLIDE_THRESHOLD ) {
		speed = this.MAX_SPEED * (speed - this.SLIDE_THRESHOLD) / ( this.MAX_SPEED - this.SLIDE_THRESHOLD );
		if(this.left > this.container.offsetWidth - this.content.offsetWidth) {
			this.left -= speed;
		} else {
			this.left = this.container.offsetWidth - this.content.offsetWidth;
		}
		this.content.style.left = Math.round(this.left)+'px';
	} else if ( speed < -this.SLIDE_THRESHOLD ) {
		speed = this.MAX_SPEED * (speed + this.SLIDE_THRESHOLD) / ( this.MAX_SPEED - this.SLIDE_THRESHOLD );
		if(this.left < 0) {
			this.left -= speed;
		} else {
			this.left = 0;
		}
		this.content.style.left = Math.round(this.left)+'px';
	}
}
rx_carrousel.prototype.slideY = function() {
	if(!this.mouseY) return;
	var y = this.mouseY - this.findAbsY(this.container) - this.container.offsetTop * 0.5;
	var speed = 2 * y * this.MAX_SPEED / this.container.offsetTop;
	if (speed > this.SLIDE_THRESHOLD ) {
		speed = this.MAX_SPEED * (speed - this.SLIDE_THRESHOLD) / ( this.MAX_SPEED - this.SLIDE_THRESHOLD );
		if(this.top > this.container.offsetHeight - this.content.offsetHeight) {
			this.top -= speed;
		} else {
			this.top = this.container.offsetHeight - this.content.offsetHeight;
		}
		this.content.style.top = Math.round(this.top)+'px';
	} else if ( speed < -this.SLIDE_THRESHOLD ) {
		speed = this.MAX_SPEED * (speed + this.SLIDE_THRESHOLD) / ( this.MAX_SPEED - this.SLIDE_THRESHOLD );
		if(this.top < 0) {
			this.top -= speed;
		} else {
			this.top = 0;
		}
		this.content.style.top = Math.round(this.top)+'px';
	}
}