// JavaScript Document

$(function() {
	$.ajax({
		type: "GET",
		url: "/portfolio.xml",
		dataType: "xml",
		success: function(xml) {
			$(xml).find('project').each(function(){
				var name = $(this).find('name').text();
				var city = $(this).find('city').text();
				var state = $(this).find('state').text();
				var top = $(this).find('top').text();
				var left = $(this).find('left').text();
				var region = $(this).find('region').text();
				
				var html = '<div class="project" style="top: 300px; left: 450px;">' +
					'<a href="#" class="dot"><img src="/images/map/dot.png" /></a>' +
					'<div class="popup '+region+'">' +
					'<p>'+name+'<br />' +
					'<span>'+city+', '+state+'</span></p>' +
					'</div>' +
					'</div>';
				
				$("#projects").append(html);
				$("#projects .project:last").animate({
					left: left+'px',
					top: top+'px'
				}, 1000);
			});
			
			$(".project .dot").hover(
				function() {
					$(this).siblings('.popup').show();
				}, function() {
					$(this).siblings('.popup').hide();
				}
			).click(function() { return false; });

		}
	});
});