var xml;

$(document).ready(function() {	
	
	$.ajax({
			type: "GET",
			url: "./scripts/photos.xml",
			dataType: "xml",
			success: init // Initialize upon success.
	});
	
	function init(xmlData, status){
		$(xmlData).find("pic").each(function(){ // Create and append html list items.
			$(".image_thumb ul").append('<li><div class="thumb-container"><img src="'+ $(this).find("l").text() + '" alt="Image Name" /></div><div class="block" style="display: none;"><h2>'+ $(this).find("title").text() +'</h2><p>'+ $(this).find("desc").text() +'</p></div></li>')
		});
		
		getToTheChoppa(); // GET TO THE CHOPPA!
		
	}
		
	function getToTheChoppa() {	
		//Show Banner
		$(".main_image .desc").show(); //Show block
		//$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
	
		var firstLoc = $(".image_thumb ul li:first").find('img').attr("src") // Location of first image
		var firstAlt = $(".image_thumb ul li:first").find('img').attr("alt"); // Alt tag of first image
		var firstDesc = $(".image_thumb ul li:first").find('.block').html(); // Desc of first image
		
		$(".image_thumb ul li:first").addClass('active'); // Set the first image as active
		$(".main_image .block").html(firstDesc); // Set the Desc block
		$(".main_image img").attr({ src: firstLoc , alt: firstAlt}); // Set the first image
		
		$(".image_thumb ul li").click(function(){ // Add click function to each thumb

			var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
			var imgTitle = $(this).find('img').attr("src"); //Get Image src
			var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
			var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
			
			if ($(this).is(".active")) {  // Check if active
			
				return false; // Don't change image
				
			} else { // Change image
							
	
					$(".main_image .block").html(imgDesc)
					$(".main_image img").attr({ src: imgTitle , alt: imgAlt}); // Change image.

				
			} // End of is active conditional.
			
			$(".image_thumb ul li").removeClass('active'); // Remove active class.
			$(this).addClass('active');  // Add active class to target.
			
		}).hover(function(){ // Add hover function to each thumb
			$(this).addClass('hover'); // Add hover class
			}, function() {
			$(this).removeClass('hover'); // Remove hover class
		});
				
		//Toggle Collapse button.
		$("a.collapse").click(function(){
			$(".main_image .block").slideToggle(); // slideToggle block
			$("a.collapse").toggleClass("show"); // Toggles show class.
		});
	}
	
});//End of onLoad function