/****************************************************
 * Property Gallery
 * Sunil Karve 10/31/2007
 * Contracted to Popular Forces, Inc.
 *
 * Requires the Yahoo! User Interface Library: Animation - 
 * http://developer.yahoo.com/yui/animation/
 ****************************************************/

var photoArray; // Array of all photos URLs on page
var galleryArea; // Container for dynamic gallery elements
var thumbArea;
var rotateTimer; // Variable for automatic image rotation function
var counter = -1; // Index of currently-displayed photo, initialized to immediately display first photo
var imagePath="/images/"; // Global image path
var isYahooAnimLoaded; // Boolean to check if Yahoo! UI animation library loaded
var rotateTimer;
var galleryArea;
var mainPhoto;
var allPhotos;


isYahooAnimLoaded = ( typeof YAHOO == "undefined" ) ? false : true;

function initGallery() {
// Hide all photos on page when JavaScript is supported
	document.getElementById("propertyPhotos").style.display = "none";
	
// Create div and insert "loading" image
	galleryArea = document.getElementById("galleryArea");
	galleryArea.style.height = "240px"; // Set area height only for JavaScript browsers
	
	var largePhotoArea = document.createElement("div");
	largePhotoArea.setAttribute("id", "largePhotoArea");
	galleryArea.appendChild(largePhotoArea);

	mainPhoto = document.createElement("img");
	mainPhoto.setAttribute("src", imagePath + "loadingtemp.gif");
	mainPhoto.setAttribute("id", "mainPhoto");
	largePhotoArea.appendChild(mainPhoto);

}

function writeThumbnails() {
	// Write out thumbnails
	var photoTemp;
	var photoContainer;
	var photoElement;
	
	photoContainer = document.createElement("div");
	photoContainer.setAttribute("id", "photoContainer");	
	
	for( j=0; j < allPhotos.length; j++ ) {
		photoElement = document.createElement("p");
		photoElement.className = "thumbnail";
		photoTemp = document.createElement("img");
		photoTemp.setAttribute("src", photoArray[j]);
		photoTemp.setAttribute("id", "photo" + j );
		photoElement.appendChild( photoTemp );
		
	// Add mouseover event to swap image
		addEvent( photoTemp, "mouseover", swapPhoto );	
		photoContainer.appendChild( photoElement );	
		photoTemp = null;
	}
	thumbArea.appendChild( photoContainer );
}

function doAnimation() {
	counter++;
	if( counter == allPhotos.length ) { counter = 0 };
	document.getElementById("mainPhoto").setAttribute("src", photoArray[counter]);
}

function swapPhoto(e) {
// Cancel automatic rotation
	clearInterval( rotateTimer );
// Swap current image with mouseover image
	var myImageNumber = getEventElement(e).getAttribute("id").charAt(5);
	//window.alert("Function swapPhoto invoked by index " + myImageNumber );	
	
	document.getElementById("mainPhoto").setAttribute("src", photoArray[myImageNumber]);
}

function changeOpacity( elemRef, dir ) {
// Changes opacity of passed-in element reference
	var iFrom; // "From" value
	var iTo; // "To" value
	var ease; // Easing direction
	var duration; // Animation duration
	var elem = elemRef;
	
	iFrom = ( dir == "out" ) ? 100 : 0;
	iTo = ( dir == "out" ) ? 0 : 100;	
	ease = ( dir == "out" ) ? "YAHOO.util.Easing.easeOut" : "YAHOO.util.Easing.easeIn";
	duration = ( dir == "out" ) ? 5.0 : 10.0;
	
	if( isYahooAnimLoaded ) { // Fade in effect
	var yahooAnim = new YAHOO.util.Anim( elem, {
				opacity: { from: eval(iFrom), to: eval(iTo) }
			}, 0, YAHOO.util.Easing.easeBoth);
			yahooAnim.duration = duration;
			yahooAnim.animate();
	
	delete yahooAnim; // Cleanup	
	}
}
window.onload = function() {
	
	setExtLinks(); // Run external link script again to prevent overwrite of global window.onload

// Load all image sources into array
	allPhotos = document.getElementById("propertyPhotos").getElementsByTagName("img");
	photoArray = new Array(allPhotos.length);
	for( var i=0; i < allPhotos.length; i++ ) {
		photoArray[i] = allPhotos[i].getAttribute("src");
	}

// Create containers inside the gallery container
	thumbArea = document.createElement("div");
	thumbArea.setAttribute("id", "thumbArea");
	galleryArea.appendChild(thumbArea);
	var instrText = document.createElement("p");
	instrText.appendChild( document.createTextNode("Rollover to view image"));
	instrText.setAttribute("id", "thumbInstructions");
	thumbArea.appendChild(instrText);

	writeThumbnails();

// Display first image in largePhotoArea
	mainPhoto.setAttribute("src", photoArray[0]);			

	if( isYahooAnimLoaded ) { // Fade in effect
		mainPhoto.className = "mainPhotoHide";
		changeOpacity( mainPhoto, "in" );
	}

	rotateTimer = setInterval(doAnimation, 3000);

}