var timer;	
	var animWidth = 0;
	var maxMargin = 0;
	var margin = 0;
	
	function initAnimation() {
		// Get the actual width of the animLayer table
		animWidth = Math.abs(($('animLayer').offsetWidth / 2) - 5);
		// Calculate the max negative margin (i.e. how much will the layer scroll until it shows the last logo)
		if (animWidth > 530) {
			maxMargin = 0 - animWidth; // We need a negative value here
			// Start the timer that animates the bottom logos
			timer = setTimeout("anim()",2000);
			// Assign the necessary stop and restart functions to all links
			// inside the "animLayer" table
			var x = $("animLayer").getElementsByTagName("a");
			for (var i=0;i<x.length;i++) { 
				x[i].onmouseover = stopTimer;
				x[i].onmouseout = restartTimer;
			}
		} else {
			// No need to scroll, all logos are showing	
		}

	}
	
	function anim() {
		margin = margin - 1;
		if (margin < maxMargin) {
			// Reset the margin
			margin = 0;
			$('animLayer').style.marginLeft = "0px";
			//clearTimeout(timer);
			timer = setTimeout("anim()",30);
		} else {
			$('animLayer').style.marginLeft = margin+"px";
			//$('mainContent').innerHTML = margin+"px";
			timer = setTimeout("anim()",30);
		}
	}
	
	function stopTimer() {
		if (timer) {
			clearTimeout(timer);
			timer = null;
		} 
	}
	
	function restartTimer() {
		if (!timer) {
			timer = setTimeout("anim()",40);
		}
	}
	
	function $(obj) {
		return document.getElementById(obj);
	}
	
	window.onload = initAnimation;