//blue circles
var blueCircle = new Image(16,14);
blueCircle.src = "images/sites/blueCircle.gif";

var blueCircleOutlined = new Image(16,14);
blueCircleOutlined.src = "images/sites/blueCircleOutlined.gif";

function swapIt(x,y)
{
    x.src = y.src;
    return true;
}

//the first circle on page load is always the first circle outlined
//boy, that comment is redundant.
var currentSelection = "img0";

function mainImageSwap(imgLink, x)
{
    //swap out the big image
    //reload the onmouseout event for the old square that was clicked
    //turn off the border on the old square that was clicked
    //set the current selection to the new square that is currently clicked
    
    document["mainImage"].src = imgLink;
    document[currentSelection].onmouseout = function(){swapIt(this, blueCircle);};
    document[currentSelection].src = blueCircle.src;
    currentSelection = x.name;

    return true;
}


function turnOnBorder(x)
//this turns on the border for the 'clicked' circle
{
    x.onmouseout = x.onmouseover;
    x.src = blueCircleOutlined.src;
}