I'm really new to JavaScript and would appreciate it if someone could point me in the right direction here.

If you're unfamiliar with Frog.js, it can be found on Dynamic Drive (sorry - can't yet post URLs).

Does anyone know how I can modify the script so that, by default, a thumbnail image is created and placed to the left of the main image (just like the right image is)? In other words, I'm looking for a symmetrical design. I'm hoping to get the "final" image in the slideshow to be loaded and a thumbnail created to the left of the image when you first open the slideshow - creating a sort of circular, never-ending slideshow.

Code JavaScript:
//-------------------------------------------------------------
// FrogJS v.1.1
// Created by Eric Puidokas
// Licensed under the Creative Commons Attribution 2.5 License
//-------------------------------------------------------------
 
// CONFIGURATION VARIABLES
var thumbTop = '60px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = 'images/loading.gif'; // image displayed when preloading images
var scalePercent = '300'; // percent thumbnails expand when fading into main image
 
// GLOBALS
var imageArray = new Array;
 
// Extensions to the Element class from prototype.js
Object.extend(Element, {
removeDimensions: function(element){
element = $(element);
element.style.width = '';
element.style.height = '';
},
removeOnclick: function(element){
element = $(element);
element.onclick = function(){}
},
setCursor: function(element, cursor){
element = $(element);
element.style.cursor = cursor;
}
});
 
// Frog Class
var Frog = Class.create();
Frog.prototype = {
 
// initialize()
// Constructor runs once the page has been loaded. It extracts any linked images within an element with id 'FrogJS' and builds the array for the FrogJS Gallery
// It then empties the 'FrogJS' element and inserts the neccessary DOM elements to run a FrogJS gallery. Lastly, it calls the functions to load the first image and thumbnail.
initialize: function(){
 
if(!document.getElementsByTagName){ return; }
 
// Builds imageArray of all images, thumbnails, credits, and captions
var anchors = $('FrogJS').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
imageArray[i] = new Array();
imageArray[i]['full'] = anchors[i].getAttribute('href');
imageArray[i]['credit'] = anchors[i].getAttribute('title');
imageArray[i]['thumb'] = anchors[i].getElementsByTagName('img')[0].getAttribute('src');
imageArray[i]['caption'] = anchors[i].getElementsByTagName('img')[0].getAttribute('alt');
imageArray[i]['link'] = anchors[i].getAttribute('rel');
}
 
//-----------------------------------------
// Inserting new HTML elements into 'FrogJS' Element
//-----------------------------------------
var ribbit = $('FrogJS');
ribbit.innerHTML = '';
ribbit.style.position = 'relative';
ribbit.style.display = 'block';
ribbit.style.textAlign = 'center';
 
var mainContainer = document.createElement("div");
mainContainer.setAttribute('id','FrogJSMainContainer');
mainContainer.style.margin = '0 auto';
ribbit.appendChild(mainContainer);
 
var mainImage = document.createElement("img");
mainImage.setAttribute('id','FrogJSImage');
mainImage.style.display = 'none';
mainContainer.appendChild(mainImage);
 
var credit = document.createElement("div");
credit.setAttribute('id','FrogJSCredit');
mainContainer.appendChild(credit);
 
var caption = document.createElement("div");
caption.setAttribute('id','FrogJSCaption');
mainContainer.appendChild(caption);
 
var loadingImg = document.createElement("img");
loadingImg.setAttribute('id','FrogJSLoadingAni');
loadingImg.src = loadingAni;
loadingImg.style.display = 'none';
loadingImg.style.position = 'absolute';
loadingImg.style.top = thumbTop;
ribbit.appendChild(loadingImg);
 
var rThumb1 = document.createElement("img");
rThumb1.setAttribute('id','FrogJSrightThumb1');
rThumb1.style.display = 'none';
rThumb1.style.position = 'absolute';
rThumb1.style.top = thumbTop;
rThumb1.style.right = '0';
rThumb1.style.cursor = 'pointer';
ribbit.appendChild(rThumb1);
 
var lThumb1 = document.createElement("img");
lThumb1.setAttribute('id','FrogJSleftThumb1');
lThumb1.style.display = 'none';
lThumb1.style.position = 'absolute';
lThumb1.style.top = thumbTop;
lThumb1.style.left = '0';
lThumb1.style.cursor = 'pointer';
ribbit.appendChild(lThumb1);
 
var rThumb2 = document.createElement("img");
rThumb2.setAttribute('id','FrogJSrightThumb2');
rThumb2.style.display = 'none';
rThumb2.style.position = 'absolute';
rThumb2.style.top = thumbTop;
rThumb2.style.right = '0';
ribbit.appendChild(rThumb2);
 
var lThumb2 = document.createElement("img");
lThumb2.setAttribute('id','FrogJSleftThumb2');
lThumb2.style.display = 'none';
lThumb2.style.position = 'absolute';
lThumb2.style.top = thumbTop;
lThumb2.style.left = '0';
ribbit.appendChild(lThumb2);
//-----------------------------------------
// End Inserting new elements
//-----------------------------------------
 
// Preloads first image and displays image along with next thumbnail
var myFrog = this; // IE can't use the global `myFrog` until it's been initialized
var imgPreloader = new Image();
imgPreloader.onload=function(){
myFrog.loadMainImage(0, imgPreloader.width);
myFrog.thumbIn(1, 'right');
}
imgPreloader.src = imageArray[0]['full'];
},
 
// loadImage()
// Loads main image and updates thumbnails accordingly. Uses all other functions of the Frog class.
loadImage: function(imageNum, side, width){
 
myFrog.loadMainImage(imageNum, width);
 
if(side=='right'){
myFrog.mainIn(imageNum, 'right');
myFrog.thumbIn(imageNum+1, 'right');
myFrog.mainOut(imageNum-1, 'left');
myFrog.thumbOut(imageNum-2, 'left');
}else{
myFrog.mainIn(imageNum, 'left');
myFrog.thumbIn(imageNum-1, 'left');
myFrog.mainOut(imageNum+1, 'right');
myFrog.thumbOut(imageNum+2, 'right');
}
},
 
// loadMainImage()
// Fades out old main image and fades in new one. Also updates credit and caption
loadMainImage: function(imageNum, width){
Element.setCursor('FrogJSImage','');
$('FrogJSImage').onclick = function(){};
new Effect.Fade('FrogJSMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
function showMainImage(){
$('FrogJSImage').style.display = 'block';
$('FrogJSImage').src = imageArray[imageNum]['full'];
$('FrogJSMainContainer').style.width = width+'px';
$('FrogJSCredit').innerHTML = imageArray[imageNum]['credit'];
$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
if(imageArray[imageNum]['link']){
Element.setCursor('FrogJSImage','pointer');
$('FrogJSImage').onclick = function(){
location.href = imageArray[imageNum]['link'];
}
}
}
}
},
 
// thumbIn()
// Loads in new thumbnail and preloads image if neccessary
thumbIn: function(imageNum, side){
Element.hide('FrogJS'+side+'Thumb1');
if(imageArray[imageNum]){
Element.setCursor('FrogJS'+side+'Thumb1','');
$('FrogJSLoadingAni').style.left = (side=='left') ? '0' : '';
$('FrogJSLoadingAni').style.right = (side=='right') ? '0' : '';
Element.show('FrogJSLoadingAni');
var imgPreloader = new Image();
imgPreloader.onload=function(){
Element.hide('FrogJSLoadingAni');
Element.removeDimensions('FrogJS'+side+'Thumb1');
Element.setCursor('FrogJS'+side+'Thumb1','');
$('FrogJS'+side+'Thumb1').onclick = function(){};
$('FrogJS'+side+'Thumb1').src = imageArray[imageNum]['thumb'];
new Effect.Appear('FrogJS'+side+'Thumb1',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: 0.1, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
Element.setCursor('FrogJS'+side+'Thumb1','pointer');
$('FrogJS'+side+'Thumb1').onclick = function(){
myFrog.loadImage(imageNum, side, imgPreloader.width);
Element.removeOnclick('FrogJSleftThumb1');
Element.removeOnclick('FrogJSrightThumb1');
}
}
}
imgPreloader.src = imageArray[imageNum]['full'];
}
},
 
// thumbOut()
// Removes old thumbnail
thumbOut: function(imageNum, side){
if(imageArray[imageNum]){
$('FrogJS'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
Element.show('FrogJS'+side+'Thumb2');
Element.removeDimensions('FrogJS'+side+'Thumb2');
 
new Effect.Fade('FrogJS'+side+'Thumb2',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb2', 0, { duration: 1.0, scaleFrom: 100 });
}
},
 
// mainIn()
// Fades thumbnail into main image
mainIn: function(imageNum, side){
$('FrogJS'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
Element.removeDimensions('FrogJS'+side+'Thumb2');
Element.show('FrogJS'+side+'Thumb2');
new Effect.Fade('FrogJS'+side+'Thumb2',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb2', scalePercent, { duration: 1.0 });
},
 
// mainOut()
// Fades old main image into thumbnail
mainOut: function(imageNum, side){
Element.hide('FrogJS'+side+'Thumb1');
if(imageArray[imageNum]){
Element.setCursor('FrogJS'+side+'Thumb1','');
var imgPreloader = new Image();
imgPreloader.onload=function(){
Element.removeDimensions('FrogJS'+side+'Thumb1');
$('FrogJS'+side+'Thumb1').src = imageArray[imageNum]['thumb'];
new Effect.Appear('FrogJS'+side+'Thumb1',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: scalePercent, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
Element.setCursor('FrogJS'+side+'Thumb1','pointer');
$('FrogJS'+side+'Thumb1').onclick = function(){
myFrog.loadImage(imageNum, side, imgPreloader.width);
Element.removeOnclick('FrogJSleftThumb1');
Element.removeOnclick('FrogJSrightThumb1');
}
}
}
imgPreloader.src = imageArray[imageNum]['full'];
}
}
}
 
// It's time for this frog to hop
function initFrog(){ myFrog = new Frog(); }
Event.observe(window, 'load', initFrog, false);