// JavaScript Document

$(function () {
			
			$largePhoto= $("#photolarge");   //large photo variable
			$caption= $("#caption");          //caption variable
			$thumbnails= $("#slidearea ul");   //slideare ul, li the images go in there
			
$thumbnails.bind("load", function()           //the function to load the thumbnails
			{
$.get("data/photoScript.xml", function(xmlData)  //get the data from xml
			{
$(xmlData).find("picture").each(function ()		//filter the xml data							
			{
			if ($(this).attr('id')== "001")  //find the first photo
			{
			$largePhoto.append("<img src='" + $(this).find("largePhoto").text() + "' />");  //load the first photo
			$caption.append("<h3>" + $(this).find("headline").text() + "</h3>" + "<p>" + $(this).find("description").text() + "</p>");   //load the first photo caption information
					
			}
								 
             $thumbnails.append("<li>" + "<img src =	'" + $(this).find("thumbnail").text() + "' id='"+$(this).attr('id')+ "'/>" + "</li>");  // make the thumbnail list dynamically							
			
			});
													
			});
			});

$thumbnails.trigger("load");   //trigger the thumbnail load
			
$thumbnails.find("img").live("click", function()    //make the thumbnail click function
			{
			$largePhoto.empty();    //empty the big photo
			$caption.empty();       //empty the caption info
			var newThumb = $(this).attr("id");  //variable for the new thumbnail that was clicked
						
			$.get("data/photoScript.xml", function(xmlData)   //get xml data
			{
			var info= $(xmlData).find("picture[id= '"+ newThumb + "']").find("largePhoto").text();   //new large photo variable
			var head= $(xmlData).find("picture[id= '"+ newThumb + "']").find("headline").text();     //new headline variable
			var cutline=$(xmlData).find("picture[id= '"+ newThumb + "']").find("description").text();  //new text variable
			$largePhoto.append("<img src='" + info + "' />");    //insert new large photo
			$caption.append("<h3>" + head + "</h3>" + "<p>" + cutline + "</p>"); //insert new headline and caption info
																   
		    });
																		   
			});

$("#rightscroll").click(function()
	       {
		   //take the first list item and move it to the end
		   $("#slidearea ul li:first-child").insertAfter($("#slidearea ul li:last-child"));
	        });
$("#leftscroll").click(function()
	        {
		    //take the last list item and move it to the beginning
		    $("#slidearea ul li:last-child").insertBefore($("#slidearea ul li:first-child"));
	       });
			$("#slidearea li").live("mouseover", function ()   //mouseover on li
		{
			$(this).css("opacity", ".3");   //change opacity

		});
$("#slidearea li").live("mouseout", function ()    // mouseout on li
		{
			$(this).css("opacity", "1");  //change opacity

		});
           });