// JavaScript Document
function thumbOpacity() {
	// globals: opacity
	// fades last thumb and brightens current thumb on mouseover
	//var opacity = 0.5;
	//alert("changing opacity!" +$("lastThumbnail").attr("src"));
	if(jQuery.support.opacity==true) $("#lastThumbnail").css("opacity",opacity);
	else $("#lastThumbnail").css('filter', 'alpha(opacity=' +(opacity*100)+ ')');
	$("#lastThumbnail").attr("id",""); // clear lastthumbs ID
	
	$('#activeThumbnail').css("opacity","1");
	//$('#activeThumbnail').css("filter", "alpha(opacity=100)");
}

function activatePic(thumb) { // display pic in main pic area with fade in/out effect - remove current pic from DIV
	
	$("#activePic").attr("id","lastPic");
	
	url = thumb.attr("src");
	var mainPic = $(new Image()).attr('src',url);
	mainPic.attr("id","activePic")
		.css("display","none"); // hide the main pic for now
	$('#mainPic').append(mainPic);

	picResize($("#activePic"));
		
	mainPic.fadeIn("slow", function() { $("#lastPic").remove(); });	

}

function slideSwitch() {
	// slideshow has to track the thumbs as well as the big pics
	// if nextThumb reached end, go to first
	if(mouseInThumbsArea==true) {
		return null; // if mouse is in thumb area, freeze slide show
	}
	var activeThumb = $("#activeThumbnail");
	var nextThumb = activeThumb.parent().next().find("img").length ? activeThumb.parent().next().find("img")
		: $("#thumbs").find("img:first");
	
	activeThumb.attr("id","lastThumbnail");
	nextThumb.attr("id","activeThumbnail");

	thumbOpacity();
	
	activatePic(nextThumb);
}

function picResize(mainPic) {
	
	var width = mainPic.width();
	var height = mainPic.height();
	var top = 0;
	var left = 0;
	var marginLeft = 0;
	var marginTop = 0;
	
	var aspect = height/width;
	width = mainW;
	height = mainW*aspect;
	
	if(height > width) {
		difference = (height - mainH)/2;
		height = height - difference; // strink height;
		width = height/aspect;
		top = -difference/2;
		marginLeft = (mainW - width)/2;
	}
	else if(height<mainH) { 
			// if pic height is less than canvas height, set height to canvas height and trim the sides
		height = mainH;
		width = height/aspect;
		left = -(width - mainW)/2;
	}
	mainPic.css("width",width);
	mainPic.css("height",height);
	mainPic.css("top", top);
	mainPic.css("left", left);
	mainPic.css("margin-left",marginLeft);
	mainPic.css("margin-top",marginTop);
}