var thumbTop = '20px';
var loadingAni = '../loading.gif';
var scalePercent = '300';

var imageArray = new Array;

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;
}
});

var Frog = Class.create();
Frog.prototype = {

initialize: function(){

if(!document.getElementsByTagName){ return; }

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');
}

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);
var myFrog = this;
var imgPreloader = new Image();
imgPreloader.onload=function(){
myFrog.loadMainImage(0, imgPreloader.width);
myFrog.thumbIn(1, 'right');
}
imgPreloader.src = imageArray[0]['full'];
},

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: 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: 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: 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: 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: 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'];
}
}
}

function initFrog(){ myFrog = new Frog(); }
Event.observe(window, 'load', initFrog, false);