// each module is a div. clicking next & back changes this value by 1 or -1
var moduleposx = 0;
// the width of each module
var direction = 141;
// the id of the setInterval thread used for animation between module positions
var movingId = -1;
// the actual (possibly moving) position of the group of modules
var actualposx = 0;
// the maximum module position of clicking next
var max = -3;

// sets the size of the "box" according to how wide or tall the browser window.
function setSizeOfBox() {
	var frameWidth = -1;
	var frameHeight = -1;
	if (self.innerWidth) {
		frameWidth = self.innerWidth;
		frameHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientWidth) {
		frameWidth = document.documentElement.clientWidth;
		frameHeight = document.documentElement.clientHeight;
	} else if (document.body)	{
		frameWidth = document.body.clientWidth;
		frameHeight = document.body.clientHeight;
	}
	if (frameHeight==-1 || frameWidth==-1) {
		return;
	}

	var x = (frameWidth - 180);
	var r = x % direction;
	var t = (x-r) / direction;
	var w = (t * direction) - 13;
	
	max = -resultCount + t;
	totalOnscreen = t;

	$('clip').style.width = w+"px";
	$('nextButton').style.left = w+35+"px";

	display();
	window.onresize = setSizeOfBox;
}


// called from html ie <div id="module" onclick="next()">...</div>
function next(){
	moduleposx = moduleposx -1;
	display();
}

// called from html ie <div id="module" onclick="back()">...</div>
function back(){
	moduleposx = moduleposx +1;
	display();
}

// each time next or back is called, display handles
// 1. the visibility of the interface
// 2. starting the animation thread (if its not already started)
function display() {
	if (moduleposx == 0) {
		$('backButton').style.visibility = "hidden";
	} else {
		$('backButton').style.visibility = "visible";
	}
	
	if (moduleposx == max || totalOnscreen >= resultCount) {
		$('nextButton').style.visibility = "hidden";
	} else {
		$('nextButton').style.visibility = "visible";
	}
	
	if (movingId == -1) {
		movingId = setInterval("animate();", 50);
	}
}

// called every frame that the actual position is not at the desired position
function animate(){
	var desiredposx = (moduleposx * direction);
	actualposx += (desiredposx - actualposx)/3.8;
	if (Math.abs(actualposx - desiredposx)<1){
		actualposx = desiredposx;
		clearInterval(movingId);
		movingId = -1;
	}
	$('results').style.left = Math.floor(actualposx)+ "px";
}

// helper
function $(divid) {
	return document.getElementById(divid);
}


// delete me later
function printfire() {
		if (document.createEvent)
		{
				printfire.args = arguments;
				var ev = document.createEvent("Events");
				ev.initEvent("printfire", false, true);
				dispatchEvent(ev);
		}
}