function $(id) { return document.getElementById(id) };


var thumbs = YAHOO.util.Dom.getElementsByClassName('thumb-container', 'div'); 
var largeImage = $("large-image");
var largeImageCaption = $("large-image-caption");
var selectedThumb;
var selectedThumbId = 0;
var images = new Array();
var scrollAnim = new YAHOO.util.Scroll($('scroll')); 	
var fadeAnim = new YAHOO.util.Anim('large-image-container'); 


for (var i=0;i<thumbs.length;i++) {
	YAHOO.util.Event.addListener(thumbs[i], "click", mClick);
	YAHOO.util.Event.addListener(thumbs[i], "mouseover", mOver);
	YAHOO.util.Event.addListener(thumbs[i], "mouseout", mOut);
	var thumbIdSplit = thumbs[i].attributes.id.value.split("-");
	var thumbId = thumbIdSplit[thumbIdSplit.length-1];
	var thumbDiv = $('t-'+thumbId);
	var bgImage = YAHOO.util.Dom.getStyle(thumbDiv, 'background-image');
	var rx=/url\(["']?([^'")]+)['"]?\)/;
	bgImageUrl = bgImage.replace(rx,'$1');
	var bgImageUrlSplit = bgImageUrl.split("/");
	var imageFile = bgImageUrlSplit[bgImageUrlSplit.length-1];
	images.push({img:imageFile,thumbid:thumbs[i].attributes.id});
}

function mClick() {
	var thumbIdSplit = this.attributes.id.value.split("-");
	var thumbId = thumbIdSplit[thumbIdSplit.length-1]-1;
	loadImage(thumbId);
}

function loadImage(id) {
	previousThumb = $('tc-'+(selectedThumbId+1));
	selectedThumb = $('tc-'+(id+1));
	
	YAHOO.util.Dom.removeClass(previousThumb, 'thumb-selected');
	YAHOO.util.Dom.addClass(previousThumb, 'thumb-viewed');
	YAHOO.util.Dom.removeClass(selectedThumb, 'thumb-over');
	YAHOO.util.Dom.removeClass(selectedThumb, 'thumb-viewed');
	YAHOO.util.Dom.addClass(selectedThumb, 'thumb-selected');
	
	YAHOO.util.Dom.setStyle(['large-image-container'], 'display', 'none');
	YAHOO.util.Dom.setStyle(['loading'], 'display', 'block');
	
	var imageFile = images[id].img;
	largeImage.src = "photos/"+imageFile;
	largeImage.onload = showImage;
	largeImageCaption.innerHTML = '<span class="hilite">' + (id+1) + '</span>&nbsp;&nbsp;(' + imageFile + ')';
	
	selectedThumbId = id;
}

function mOver() {
	if (this != selectedThumb) {
		YAHOO.util.Dom.addClass(this, 'thumb-over');
	}
}
function mOut() {
	if (this != selectedThumb) {
		YAHOO.util.Dom.removeClass(this, 'thumb-over');
	}
}

function showImage() {
	YAHOO.util.Dom.setStyle('loading', 'display', 'none');
	YAHOO.util.Dom.setStyle('large-image-container', 'opacity', 0); 
	YAHOO.util.Dom.setStyle('large-image-container', 'display', 'block');	
	fadeAnim.stop();
	fadeAnim.attributes.opacity = { to: 1 }; 
	fadeAnim.duration = 0.3; 
	fadeAnim.method = YAHOO.util.Easing.easeOut; 
	fadeAnim.animate(); 
}

function navigate(direction) {
	var imageId = selectedThumbId+direction;
	if (imageId >= 0 && imageId < images.length) {
		loadImage(imageId);
		scrollToImage(imageId);			
	}
	return false;
}

function scrollToImage(id) {
	var thumb = $('tc-'+(id+1));
	var scrollDestination = thumb.offsetTop - 15;
	scrollAnim.stop();
	scrollAnim.attributes.scroll = {to: [$('scroll').scrollLeft, scrollDestination] };
	scrollAnim.duration = 0.3; 
	scrollAnim.method = YAHOO.util.Easing.easeOut; 
	scrollAnim.animate(); 
}

YAHOO.util.Dom.setStyle(['loading'], 'display', 'none');
YAHOO.util.Dom.addClass($('tc-1'), 'thumb-selected');
YAHOO.util.Dom.setStyle(['scroll'], 'visibility', 'visible');
YAHOO.util.Dom.setStyle(['large-image-container'], 'visibility', 'visible');

selectedThumb = $('tc-1');