//-------------------------------------------------------------
//  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/)
//-------------------------------------------------------------

// CONFIGURATION VARIABLES
var thumbTop = '60px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = "/WebsiteBuilderV2/images/loading.gif"; // image displayed when preloading images
var scalePercent = '300'; // percent thumbnails expand when fading into main image

// GLOBALS
var imageArray = new Array;
var j;
var anchors=new Array;
var anchors1=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(){
		initLightbox();
		if(!document.getElementsByTagName){ return; }
		
		// Builds imageArray of all images, thumbnails, credits, and captions
		 anchors = $('FrogJS').getElementsByTagName('a');
		
		for ( j=0; j<anchors.length; j++){
		
			imageArray[j] = new Array();
			var anchor = anchors[j];
			imageArray[j]['full'] = anchors[j].getAttribute('name');
			imageArray[j]['credit'] = anchors[j].getAttribute('title');
			imageArray[j]['thumb'] = anchors[j].getElementsByTagName('img')[0].getAttribute('src');
			imageArray[j]['caption'] = anchors[j].getElementsByTagName('img')[0].getAttribute('alt');
			imageArray[j]['link'] = anchors[j].getAttribute('rel');
			anchors1[j]=anchors[j];
		}
		
		if (anchors.length>0)
		{
		
		
		//******************light
		
				var objBody = document.getElementsByTagName("body").item(0);

		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myLightbox.end(); }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'lightbox') {
				myLightbox.end();
			}
		};
		objBody.appendChild(objLightbox);
			
			var objImageDataContainer1 = document.createElement("div");
		objImageDataContainer1.setAttribute('id','imageDataContainer1');
		objImageDataContainer1.className = 'clearfix';
		objLightbox.appendChild(objImageDataContainer1);

		var objImageData1 = document.createElement("div");
		objImageData1.setAttribute('id','imageData1');
		objImageDataContainer1.appendChild(objImageData1);
	
	    var objBottomNav1 = document.createElement("div");
		objBottomNav1.setAttribute('id','bottomNav1');
		objImageData1.appendChild(objBottomNav1);
	
		var objBottomNavCloseLink1 = document.createElement("a");
		objBottomNavCloseLink1.setAttribute('id','bottomNavClose1');
		objBottomNavCloseLink1.setAttribute('href','#');
		objBottomNavCloseLink1.onclick = function() { myLightbox.end(); return false; }
		objBottomNav1.appendChild(objBottomNavCloseLink1);
	
		var objBottomNavCloseImage1 = document.createElement("img");
		objBottomNavCloseImage1.setAttribute('src',fileBottomNavCloseImage);
		objBottomNavCloseLink1.appendChild(objBottomNavCloseImage1);
			
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
		// If animations are turned off, it will be hidden as to prevent a flicker of a
		// white 250 by 250 box.
		if(animate){
			Element.setWidth('outerImageContainer', 250);
			Element.setHeight('outerImageContainer', 250);			
		} else {
			Element.setWidth('outerImageContainer', 1);
			Element.setHeight('outerImageContainer', 1);			
		}

		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);
		
		
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objImageContainer.appendChild(objLightboxImage);
	
		var objHoverNav = document.createElement("div");
		objHoverNav.setAttribute('id','hoverNav');
		objImageContainer.appendChild(objHoverNav);
	
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prevLink');
		objPrevLink.setAttribute('href','#');
		objHoverNav.appendChild(objPrevLink);
		
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objHoverNav.appendChild(objNextLink);
	
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', fileLoadingImage);
		objLoadingLink.appendChild(objLoadingImage);

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objImageDataContainer.className = 'clearfix';
		objLightbox.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
	
	
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
	
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
		
		//End light
		
		//-----------------------------------------
		// 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 mainDiv=document.createElement("div");
		mainDiv.align='center';
		mainContainer.appendChild(mainDiv);
		
		var mainImage = document.createElement("img");
		mainImage.setAttribute('id','FrogJSImage');
		mainImage.style.display = 'none';
		mainImage.className='MainPicBorder';
		
		mainDiv.appendChild(mainImage);
		
		var credit = document.createElement("div");
		credit.setAttribute('id','PicHeading');
		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.className='MainPicBorder';
		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.className='MainPicBorder';
		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
		//-----------------------------------------
	
		if (imageArray[0])
		{
		// 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, 300);
			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){
	//alert(imageNum);
	if(imageArray[imageNum]){
			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';
			$('PicHeading').innerHTML = imageArray[imageNum]['credit'];
			//$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
			new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
			
			function addOnclick(){
			//alert(imageArray[imageNum]['link']);
			
				if(imageArray[imageNum]['link']){
					Element.setCursor('FrogJSImage','pointer');
					$('FrogJSImage').onclick = function(){
					initLightbox();
					var Myanchors=new Array;
                    //Myanchors = document.getElementsByName('123');
					//Myanchors = $('FrogJS').getElementsByTagName('a');
					
					
					//alert(imageNum);
					myLightbox.start(anchors1[imageNum]);
					//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, 300);
						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){
	//alert("Fades thumbnail into main Image");
	if(imageArray[imageNum]){
		$('FrogJS'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
		//alert($('FrogJS'+side+'Thumb2').src );
		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, 250);
						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);

var x=0;
var mode;
var t;

function Play()
{
 myFrog.loadImage(x,'right',300);
 
    t=setTimeout("Play()",3000);
    
if ( x<j-1)
    x++;
else
    x=0;
    
 return false;
  

}


function Stop()
{
if(t)
{
clearTimeout(t);
     t=0;
 }
 return false;
}
  
function Show(num)
{
StopHideControls();
Stop();
myFrog.loadMainImage(num,300);
myFrog.thumbIn(num+1,'right');
myFrog.thumbIn(num-1,'left');
x=num+1;

}