var thumbTop='1px'
var loadingAni='azie/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='absolute'
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(){
window.open(imageArray[imageNum]['link'],"","channelmode=0,directories=0,fullscreen=1,location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0")}}}}
},
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)