// variables for rotating image
var randomImages = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
var randomImageCaption = new Array(
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image",
"Learn more about this image"
);
var randomDetail = new Array(
"Figure 1:  Competition between mixing and segregation in a 75% full quasi-2d square tumbler.  The unstable manifolds after 10 three period cycles are overlaid on an experimental picture.  The mixture contains 30% by weight small black painted glass particles and 70% by weight large clear glass particles.  From S. W. Meier, S. E. Cisar, R. M. Lueptow, and J. M. Ottino, Physical Review E 74, 031310, 2006.",
"Figure 2:  Comparison of a simulation using a 3d continuum model (left) with an experiment (right).  By tuning the shear rate in the model to match the experiment, the continuum model simulation captures the patterns observed experimentally after 3 periods of a two-axis protocol.  From S. W. Meier, R. M. Lueptow, and J. M. Ottino, Advances in Physics, 56:5, 757-827, 2007.",
"Figure 3:  Radial streak coarsening in a bidisperse size-varying mixture.  The mixture is 50/50 by volume small painted black glass particles and large clear glass particles. The initially homogeneous mixture segregates into radial streaks in 10 revolutions. These streaks coarsen into one over several hundred revolutions.  From S. W. Meier, D. A. Melani Barreiro, J. M. Ottino, and R. M. Lueptow, Nature Physics, Advance Online Publication, February 10, 2008, doi:10.1038/nphys881, to appear in print.",
"Traveling, coarsening waves in an axially segregated cylindrical tumbler. ",
"Lobe formation in periodically forced circular tumblers.",
"Particle Tracking Velocimetry at the surface of a flowing layer.",
"Agglomeration of adhesive particles in a rotating tumbler.",
"Force network for a simulated 2-D granular packing.",
"Radial segregation in a rotated square tumbler, and a corresponding Poincare section.",
"Differing size-segregation patterns in a spherical tumbler with fill levels 30% (top) and 60% (bottom). "
);
var randomImageFileName = new Array(
"fig_1.jpg",
"fig_2.jpg",
"fig_3.jpg",
"image1.jpg",
"image2.jpg",
"image4.jpg",
"image5.jpg",
"image6.jpg",
"image7.jpg",
"image8.jpg"
);

// rotating random image
var prefix = "images/random/";
var thisImg = 0;
var t;

function rotate() {
	imgCount = randomImages.length - 1;

	if (document.images) {
		thisImg++;
		thisImg = thisImg % imgCount;
		document.RandomImage1.src = prefix + randomImageFileName[thisImg];
		document.getElementById("RandomImageCaption1").innerHTML = randomImageCaption[thisImg];
		document.getElementById("detail1").innerHTML = randomDetail[thisImg];		

		secondImg = (++thisImg) % imgCount;
		document.RandomImage2.src = prefix + randomImageFileName[secondImg];
		document.getElementById("RandomImageCaption2").innerHTML = randomImageCaption[secondImg];
		document.getElementById("detail2").innerHTML = randomDetail[secondImg];		

		thirdImg = (++thisImg) % imgCount;
		document.RandomImage3.src = prefix + randomImageFileName[thirdImg];
		document.getElementById("RandomImageCaption3").innerHTML = randomImageCaption[thirdImg];
		document.getElementById("detail3").innerHTML = randomDetail[thirdImg];		

		t = setTimeout("rotate()", 10000);
	}
}


// generate mouser over popup

var IE = document.all?true:false;
if (!IE)
	document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;

function getMouseXY(e) {
	e = e || window.event;
	if (e.pageX || e.pageY)	{	
		tempX = e.pageX;
		tempY = e.pageY;
	}
	else {
		var de = document.documentElement;
        var b = document.body;
		tempX = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
		tempY = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
	}
	return true;
}


function showDetail(ID){
	var index = '';
	switch(ID){
		case (1): index = 'detail1'; break;
		case (2): index = 'detail2'; break;
		case (3): index = 'detail3'; break;
	}
	// alert('in here' + tempX);
	document.getElementById(index).style.top=tempY;
	document.getElementById(index).style.left=tempX;
	document.getElementById(index).style.display="block";
	window.clearTimeout(t);
}


function hideDetail(ID){
	var index = '';
	switch(ID){
		case (1): index = 'detail1'; break;
		case (2): index = 'detail2'; break;
		case (3): index = 'detail3'; break;
	}

	document.getElementById(index).style.display="none";
	t = setTimeout("rotate()", 3000);
}