//-------------------------------------------------------------
//  FrogJS v.1.1
//  Created by Eric Puidokas (www.puidokas.com)
//
//  Licensed under the Creative Commons Attribution 2.5 License
//  (http://creativecommons.org/licenses/by/2.5/)
//-------------------------------------------------------------

/* Ported to jQuery 1.3  ©2009 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - These Notices Must Remain for Legal Use
   */

// 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 = [];

// Frog Object
var Frog = {

 preinit: function(){

  var frogs = $('#FrogJS a'), c = frogs.length;
  frogs.css('visibility', 'hidden').each(function(i){
   var im = new Image();
   im.onload = function(){
    if(!--c) Frog.initialize();
   }
   im.src = frogs[i].href;
  });

 },

 // initialize()
 // 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).find){ return; }
  
  var ribbit = $('#FrogJS'),
  // Builds imageArray of all images, thumbnails, credits, and captions
  anchors = ribbit.find('a'), i = 0;
  for (i; i < anchors.length; ++i){
   imageArray[i] = [];
   imageArray[i]['full'] = anchors[i].href;
   imageArray[i]['credit'] = anchors[i].title;
   imageArray[i]['thumb'] = $(anchors[i]).find('img')[0].src;
   imageArray[i]['caption'] = $(anchors[i]).find('img')[0].alt;
   imageArray[i]['link'] = anchors[i].rel;
  }

  //-----------------------------------------
  // Inserting new HTML elements into 'FrogJS' Element
  //-----------------------------------------
  ribbit.empty().css({position : 'relative', display : 'block', textAlign : 'center'});
  
  var mainContainer = document.createElement("div");
  mainContainer.id = 'FrogJSMainContainer';
  mainContainer.style.margin = '0 auto';
  
  var mainImage = document.createElement("img");
  mainImage.id = 'FrogJSImage';
  mainImage.style.display = 'none';
  
  var credit = document.createElement("div");
  credit.id = 'FrogJSCredit';
  
  var caption = document.createElement("div");
  caption.id = 'FrogJSCaption';
  
  var loadingImg = document.createElement("img");
  $(loadingImg).attr({id: 'FrogJSLoadingAni', src: loadingAni}).css({display: 'none', position: 'absolute', top: thumbTop});
  
  var rThumb1 = document.createElement("img");
  $(rThumb1).attr('id', 'FrogJSrightThumb1').css({display: 'none', position: 'absolute', top: thumbTop, right: 0, cursor: 'pointer'});
  
  var lThumb1 = document.createElement("img");
  $(lThumb1).attr('id', 'FrogJSleftThumb1').css({display: 'none', position: 'absolute', top: thumbTop, left: 0, cursor: 'pointer'});
  
  var rThumb2 = document.createElement("img");
  $(rThumb2).attr('id', 'FrogJSrightThumb2').css({display: 'none', position: 'absolute', top: thumbTop, right: 0});
  
  var lThumb2 = document.createElement("img");
  $(lThumb2).attr('id', 'FrogJSleftThumb2').css({display: 'none', position: 'absolute', top: thumbTop, left: 0});

  $(mainContainer).append(mainImage).append(credit).append(caption);
  ribbit.append(mainContainer).append(loadingImg).append(rThumb1).append(lThumb1).append(rThumb2).append(lThumb2);
 
  //-----------------------------------------
  // End Inserting new elements
  //-----------------------------------------
  
  // Preloads first image and displays image along with next thumbnail
  var imgPreloader = new Image();
  imgPreloader.onload=function(){
   Frog.loadMainImage(0, imgPreloader.width);
   Frog.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){
  
  Frog.loadMainImage(imageNum, width);

  if(side=='right'){
   Frog.mainIn(imageNum, 'right');
   Frog.thumbIn(imageNum+1, 'right');
   Frog.mainOut(imageNum-1, 'left');
   Frog.thumbOut(imageNum-2, 'left');
  }else{
   Frog.mainIn(imageNum, 'left');
   Frog.thumbIn(imageNum-1, 'left');
   Frog.mainOut(imageNum+1, 'right');
   Frog.thumbOut(imageNum+2, 'right');
  }
 },
 
 // loadMainImage()
 // Fades out old main image and fades in new one.  Also updates credit and caption
 loadMainImage: function(imageNum, width){
  $('#FrogJSImage').css('cursor','').unbind('click');
  $('#FrogJSMainContainer').fadeOut(500, showMainImage);
  function showMainImage(){
   $('#FrogJSImage').css('display', 'block').attr('src', imageArray[imageNum]['full']);
   $('#FrogJSCredit').html(imageArray[imageNum]['credit']);
   $('#FrogJSCaption').html(imageArray[imageNum]['caption']);
   $('#FrogJSMainContainer').css('width', width).fadeIn(500, addOnclick);
   function addOnclick(){
    if(imageArray[imageNum]['link']){
     $('#FrogJSImage').css('cursor','pointer').click(function(){
      location.href = imageArray[imageNum]['link'];
     });
    }
   }
  }
 },
 
 // thumbIn()
 // Loads in new thumbnail and preloads image if neccessary
 thumbIn: function(imageNum, side){
  $('#FrogJS'+side+'Thumb1').hide();
  if(imageArray[imageNum]){
   $('#FrogJS'+side+'Thumb1').css('cursor','');
   $('#FrogJSLoadingAni').css({left : (side=='left'? '0' : ''), right : (side=='right'? '0' : '')}).show();
   var imgPreloader = new Image();
   imgPreloader.onload=function(){
    $('#FrogJSLoadingAni').hide();
    $('#FrogJS'+side+'Thumb1').css({width: '0', height: '', cursor: ''}).unbind('click');
    var i = new Image();
    i.onload = function(){
    $('#FrogJS'+side+'Thumb1').attr('src', i.src).animate({width: i.width, opacity: 1}, {duration: 1000, queue: false, complete: addOnclick});
    }; i.src = imageArray[imageNum]['thumb'];
    function addOnclick(){
     $('#FrogJS'+side+'Thumb1').css('cursor','pointer').click(function(){
      Frog.loadImage(imageNum, side, imgPreloader.width);
      $('#FrogJSleftThumb1').unbind('click');
      $('#FrogJSrightThumb1').unbind('click');
     });
    };
   };
   imgPreloader.src = imageArray[imageNum]['full'];
  }
 },
 
 // thumbOut()
 // Removes old thumbnail
 thumbOut: function(imageNum, side){
  if(imageArray[imageNum])
   $('#FrogJS'+side+'Thumb2').attr('src', imageArray[imageNum]['thumb']).show().css({width: '', height:''}).animate({width: 0, height:0, opacity: 0}, {duration: 1000, queue: false});
 },
 
 // mainIn()
 // Fades thumbnail into main image
 mainIn: function(imageNum, side){
  var i = new Image();
  i.onload = function(){
  $('#FrogJS'+side+'Thumb2').attr('src', i.src).css({width: i.width, height:'', opacity: 1}).animate({width: i.width*scalePercent/100, opacity: 0}, {duration: 1000, queue: false, complete: function(){$('#FrogJS'+side+'Thumb2').hide();}});
  }; i.src = imageArray[imageNum]['thumb'];
 },
 
 // mainOut()
 // Fades old main image into thumbnail
 mainOut: function(imageNum, side){
  $('#FrogJS'+side+'Thumb1').hide();
  if(imageArray[imageNum]){
   $('#FrogJS'+side+'Thumb1').css('cursor','');
   var imgPreloader = new Image();
   imgPreloader.onload=function(){
    var i = new Image();
    i.onload = function(){
    $('#FrogJS'+side+'Thumb1').css({width: i.width*scalePercent/100, height: '', opacity: 0}).attr('src', i.src).animate({width: i.width, opacity: 1}, { duration: 1000, queue: false, complete: addOnclick});
    }; i.src = imageArray[imageNum]['thumb'];
    function addOnclick(){
     $('#FrogJS'+side+'Thumb1').css('cursor','pointer').click(function(){
      Frog.loadImage(imageNum, side, imgPreloader.width);
      $('#FrogJSleftThumb1').unbind('click');
      $('#FrogJSrightThumb1').unbind('click');
     });
    };
   };
   imgPreloader.src = imageArray[imageNum]['full']; 
  }
 }
};

// It's time for this frog to hop
$(Frog.preinit);