// Function to preload images.

function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}

// Function to change main image with prev and next.

var NumberOfImages = 24

var img = new Array(NumberOfImages)
	img[0] = "images/animation_cells/animationcells0.jpg"
	img[1] = "images/animation_cells/animationcells1.jpg"
	img[2] = "images/animation_cells/animationcells2.jpg"
	img[3] = "images/animation_cells/animationcells3.jpg"
	img[4] = "images/animation_cells/animationcells4.jpg"
	img[5] = "images/animation_cells/animationcells5.jpg"
	img[6] = "images/animation_cells/animationcells6.jpg"
	img[7] = "images/animation_cells/animationcells7.jpg"
	img[8] = "images/animation_cells/animationcells8.jpg"
	img[9] = "images/animation_cells/animationcells9.jpg"
	img[10] = "images/animation_cells/animationcells10.jpg"
	img[11] = "images/animation_cells/animationcells11.jpg"
	img[12] = "images/animation_cells/animationcells12.jpg"
	img[13] = "images/animation_cells/animationcells13.jpg"
	img[14] = "images/animation_cells/animationcells14.jpg"
	img[15] = "images/animation_cells/animationcells15.jpg"
	img[16] = "images/animation_cells/animationcells16.jpg"
	img[17] = "images/animation_cells/animationcells17.jpg"
	img[18] = "images/animation_cells/animationcells18.jpg"
	img[19] = "images/animation_cells/animationcells19.jpg"
	img[20] = "images/animation_cells/animationcells20.jpg"
	img[21] = "images/animation_cells/animationcells21.jpg"
	img[22] = "images/animation_cells/animationcells22.jpg"
	img[23] = "images/animation_cells/animationcells23.jpg"

var imgNumber = 0

function setmainimage()
{
    document.images["mainimage"].src = img[imgNumber]
}

function nextimage()
{
    imgNumber++
    if (imgNumber == NumberOfImages)
        imgNumber = 0
    var current = document.getElementById("image" + imgNumber);
    clearcircles();
    current.src = 'images/circle_selected.jpg'; 
   	document.getElementById('mainimage').src = 'images/animation_cells/animationcells_placeholder.gif';
   	img[imgNumber].onload = setmainimage();
}

function previousimage()
{
    imgNumber--
    if (imgNumber < 0)
        imgNumber = NumberOfImages - 1
    var current = document.getElementById("image" + imgNumber);
    clearcircles();
    current.src = 'images/circle_selected.jpg'; 
    document.getElementById('mainimage').src = 'images/animation_cells/animationcells_placeholder.gif';
   	img[imgNumber].onload = setmainimage();
}

// Function to change main image with circle buttons.

function flipper(thing) { 
	 imgNumber = thing;
     var clicked = document.getElementById("image" + thing); 
 
 		clearcircles();         
           
   	 clicked.src = 'images/circle_selected.jpg';
     document.getElementById('mainimage').src = 'images/animation_cells/animationcells_placeholder.gif';
   	 img[imgNumber].onload = setmainimage();
}

function clearcircles() {
	for(var i=0; i<=23; i++) {  
       var circleoff = document.getElementById("image" + i); 
			 circleoff.src = 'images/circle_off.jpg'; 
  } 
}

// Function for rollovers. 

if (document.images) {
            image0on = new Image();      
            image0on.src = "images/circle1_on.jpg"; 
            image1on = new Image();      
            image1on.src = "images/circle1_on.jpg"; 
            image2on = new Image(); 
            image2on.src = "images/circle1_on.jpg";  
            image3on = new Image();
            image3on.src = "images/circle1_on.jpg";
            image4on = new Image();
            image4on.src = "images/circle1_on.jpg";
            image5on = new Image();
            image5on.src = "images/circle1_on.jpg";
            image6on = new Image();
            image6on.src = "images/circle1_on.jpg";
            image7on = new Image();
            image7on.src = "images/circle1_on.jpg";
            image8on = new Image();
            image8on.src = "images/circle1_on.jpg";
            image9on = new Image();
            image9on.src = "images/circle1_on.jpg";
            image10on = new Image();
            image10on.src = "images/circle1_on.jpg";
            image11on = new Image();
            image11on.src = "images/circle1_on.jpg";
            image12on = new Image();
            image12on.src = "images/circle1_on.jpg";
            image13on = new Image();
            image13on.src = "images/circle1_on.jpg";
            image14on = new Image();
            image14on.src = "images/circle1_on.jpg";
            image15on = new Image();
            image15on.src = "images/circle1_on.jpg";
            image16on = new Image();
            image16on.src = "images/circle1_on.jpg";
            image17on = new Image();
            image17on.src = "images/circle1_on.jpg";
            image18on = new Image();
            image18on.src = "images/circle1_on.jpg";
            image19on = new Image();
            image19on.src = "images/circle1_on.jpg";
            image20on = new Image();
            image20on.src = "images/circle1_on.jpg";
            image21on = new Image();
            image21on.src = "images/circle1_on.jpg";
            image22on = new Image();
            image22on.src = "images/circle1_on.jpg";
            image23on = new Image();
            image23on.src = "images/circle1_on.jpg";
            prevon = new Image();
            prevon.src = "images/prev_on.jpg";
            nexton = new Image();
            nexton.src = "images/next_on.jpg";
            
            image0off = new Image();      
            image0off.src = "images/circle_off.jpg"; 
            image1off = new Image();      
            image1off.src = "images/circle_off.jpg"; 
            image2off = new Image(); 
            image2off.src = "images/circle_off.jpg";  
            image3off = new Image();
            image3off.src = "images/circle_off.jpg";
            image4off = new Image();
            image4off.src = "images/circle_off.jpg";
            image5off = new Image();
            image5off.src = "images/circle_off.jpg";
            image6off = new Image();
            image6off.src = "images/circle_off.jpg";
            image7off = new Image();
            image7off.src = "images/circle_off.jpg";
            image8off = new Image();
            image8off.src = "images/circle_off.jpg";
            image9off = new Image();
            image9off.src = "images/circle_off.jpg";
            image10off = new Image();
            image10off.src = "images/circle_off.jpg";
            image11off = new Image();
            image11off.src = "images/circle_off.jpg";
            image12off = new Image();
            image12off.src = "images/circle_off.jpg";
            image13off = new Image();
            image13off.src = "images/circle_off.jpg";
            image14off = new Image();
            image14off.src = "images/circle_off.jpg";
            image15off = new Image();
            image15off.src = "images/circle_off.jpg";
            image16off = new Image();
            image16off.src = "images/circle_off.jpg";
            image17off = new Image();
            image17off.src = "images/circle_off.jpg";
            image18off = new Image();
            image18off.src = "images/circle_off.jpg";
            image19off = new Image();
            image19off.src = "images/circle_off.jpg";
            image20off = new Image();
            image20off.src = "images/circle_off.jpg";
            image21off = new Image();
            image21off.src = "images/circle_off.jpg";
            image22off = new Image();
            image22off.src = "images/circle_off.jpg";
            image23off = new Image();
            image23off.src = "images/circle_off.jpg";
            prevoff = new Image();
            prevoff.src = "images/prev_off.jpg";
            nextoff = new Image();
            nextoff.src = "images/next_off.jpg";            
		}
		
// Function to activate rollovers.
         
function rolloverOn(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "on.src");
            var clicked = document.getElementById("image" + imgNumber);
            clicked.src = 'images/circle_selected.jpg'; 
            
        }
}
         
// Function to deactivate rollovers.
         
function rolloverOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");
            var clicked = document.getElementById("image" + imgNumber);
            clicked.src = 'images/circle_selected.jpg'; 
        }
}