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

// If the images are named in the order of the sequence (ie: 001.jpg, 002.jpg ...)
// then all a user needs to do in enter the NumberOfImages variables to the number of 
// images used.

var NumberOfImages = 0;
var img = new Array(NumberOfImages);
var imgNumber = 0;

function setup_flipper(number_of_images, circle_style, the_path){
    
    NumberOfImages = number_of_images; // sets global variable
    
    for(var i=0; i<=NumberOfImages - 1; i++) {  
    
        var prefix = "";
        for (var j=0; j < 3 - (i + "").length; j++){prefix += "0";} // adds preceeding zeros (there is a string function that can do this - just can't remember it!)
        
        img[i] = the_path + prefix + i + ".jpg"
    } 
    
    // load buttons
    if (document.images) {

        doton = new Image();
        doton.src = "images/circle" + circle_style + "_on.jpg"; 

        prevon = new Image();
        prevon.src = "images/prev_on.jpg";

        nexton = new Image();
        nexton.src = "images/next_on.jpg";

        dotoff = new Image();
        dotoff.src = "images/circle_off.jpg"; 

        prevoff = new Image();
        prevoff.src = "images/prev_off.jpg";

        nextoff = new Image();
        nextoff.src = "images/next_off.jpg";  
    }    
}    

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/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/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/placeholder.gif';
    img[imgNumber].onload = setmainimage();
}

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

	
// Function to activate rollovers.
         
    function rolloverOn(imgName) {
        if (document.images) {
        
            if (imgName.indexOf("image") == 0) document.images[imgName].src = eval("doton.src");
            else document.images[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) {
            
            if (imgName.indexOf("image") == 0) document.images[imgName].src = eval("dotoff.src");
            else document.images[imgName].src = eval(imgName + "off.src");
        
            var clicked = document.getElementById("image" + imgNumber);
            
            clicked.src = 'images/circle_selected.jpg'; 
        }
    }