$(document).ready(function(){

//jQuery.easing.def = "easeInOutQuart";

$("#loading").show();
$("#whenLoaded").hide(); //these are set here rather than css in case the user doesn't have js

$("#controls").draggable();


//*******LOAD IMAGES
//var photoArray=["photos/Jamaica.jpg", "photos/Jill.jpg", "photos/Miami.jpg", "photos/Rome.jpg"];

var photoArray= $(".thumbLink"); //does this really work? it seems too easy

$.preloadImages(photoArray); //lets load the images and get rid of the loading screen


//Hover over controls event
$('#controls').hoverIntent(
		function (){
			
			$('#activeControls').slideDown(300); 
			$('#controls').fadeTo('fast', 1);
			},
		function(){
			$('#activeControls').slideUp(300);
			$('#controls').fadeTo('fast',.5);	 	
		}
	);


//*************************
//Begin thumb click event     
$('a.thumbLink').click(function(){

	var activePicUrl= $(".activePic").attr("src");
	var caption = $(this).children().attr("alt");
	var clickedPicUrl= $(this).attr("href");	
	
	if(activePicUrl==clickedPicUrl)
		return false;
	
	$(".inactivePic").attr({ src: clickedPicUrl, alt: caption}).show().load(function()
	{
	
	// wooooooooooooorking on this TODO
		$(".activePic").hide(800, function()  
	//	$(".activePic").animate({marginBottom: 500}, 1000, function() 
		{
			$(".inactivePic").removeClass("inactivePic").addClass("activePic");
			$(this).removeClass("activePic").addClass("inactivePic");
		});
			//!TODO safari and chrome don't let you go right back to the previous image
	}); 
		return false; //disable standard link behavior
	
});

//Begin maximize window click event
$('#activeControls #maximize').click(function(){
	window.moveTo(0, 0);
	window.resizeTo(screen.width, screen.height);	
	$(this).hide(500);
});

// Adjust on resize	
$(window).resize(function(){
		adjust();
	});
	
//EZ way to get more thumbs, still need to deal with preloading
$("#more").click(function(){
 
	$("#thumbSection1").toggle(400);
	$("#thumbSection2").toggle(400);
	return false;
	
});
	
	
	
//LETS LOAD MORE PICS***********************	
// for the loaded pics to be clickable, either i need to explicity set that up, or i need jquery live
 // $("#more").click(function()
 //   {
 // 
 //    $(this).text("LOADING");
 //     $("#activeControls").append("<div id='moreThumbs></div>").load("more.html", function()
 //                     {
 //                      	$("#activeControls").show();
 // 						$("#moreThumbs").fadeIn(3000); //TODO! make all this work better and prettier
 //                     });
 //   return false;
 //   });
	

//end of doc ready ******************************************************************

});


function adjust()
{

	var picWidth= $('.activePic').width();
		
	if (!(picWidth)) //if browser doesn't know width, forget adjusting it
 		{
			return false;
		}
		
	var horizontalMargin = ($('body').width() - picWidth) /2;


//	alert($('.activePic').width());
	//safari doesn't get the width of .activePic until reload. fix!

	if(horizontalMargin>0)
	{
		$(".mainPics").css('margin-left', horizontalMargin); //.mainPics so it changes both active and inactive
	}
};

jQuery.preloadImages = function(photoArray)
{

	var nPhotosLoaded =0; //how many photos we've loaded

	$.each(photoArray,function(e) {
		$(new Image()).load(function() {
			
			//preview of what's coming, for the load screen
			$("#previewPic").attr('src', $(this).attr('src'));
			
			nPhotosLoaded++;
			
			
			if (nPhotosLoaded>=photoArray.length) //if it's done
				{
					$("#loading").hide();
				 	$("#whenLoaded").show();
					adjust();
					
					setTimeout( function(){ //show user the controls. good time for this, if not a good place

					
							$('#activeControls').slideUp(400); //or hide
							$('#controls').fadeTo(400,.5);

						}, 500);
				}
		}).attr('src',this);
	});
}