$(document).ready(function() {
	
	$('.sized').click(function(e){
        var url = $(this).attr('href');
        popitup(url);
        alert("hey");
        e.preventDefault();
    })
    function popitup(url) {
        newwindow=window.open(url,'name','height=600, width=600, scrollbars=1');
        if (window.focus) {newwindow.focus()}
        newwindow.moveTo(screen.width/2-600/2, screen.height/2-710/2);
        alert("hey sucka");
        return false;
    
    }
    
    getProjectsXML();
});

var projectsDoc

function getProjectsXML() {
	$.ajax({
	   type: "GET",
	   url: "work.xml",
	   dataType: "xml",
	   success: function(doc){
		projectsDoc = doc;
		setUpProjects();
	  }
	 });
	 
}

var projectsObejct = {};
function setUpProjects(){
	$("#content").empty();
	$("project", projectsDoc).each(function(index, item) {
		var project = $(item);
		var projectId = "proj_" +  project.attr("id");
		
		projectsObejct[projectId] = {
			isHoveringArrow: false,
			isHoveringBackArrow: false,
			currentImageIndex: 0,
			numberOfImages:	$("image", project).size() - 1
		};
		
		$("#content")
			.append(
				$("<div></div>")
					.addClass("projectContainer")
					.append(
						$("<div></div>")
							.addClass("imageContainer")
							.append(
								$("<a href=\"javascript:;\"></a>")
									.attr("id", projectId + "_arrowImage")
									.append(
										$("<img />")
											.addClass("arrowImage")
									)
									.css("display", "none")
									.hover(function() {
										projectsObejct[projectId].isHoveringArrow = true;
										$(this).show();
									},function(){
										projectsObejct[projectId].isHoveringArrow = false;
									})
									.click(function() {
										if(projectsObejct[projectId].currentImageIndex == projectsObejct[projectId].numberOfImages) {
											projectsObejct[projectId].currentImageIndex = 0;
										}else {
											projectsObejct[projectId].currentImageIndex++;
										}
										$("#" + projectId + "_mainWorkImage").attr("src",$($("image", project).get(projectsObejct[projectId].currentImageIndex)).attr("path"));
									})
							)
							.append(
								$("<a href=\"javascript:;\"></a>")
									.attr("id", projectId + "_arrowBackImage")
									.append(
										$("<img />")
											.addClass("arrowImage")
									)
									.css("display", "none")
									.hover(function() {
										projectsObejct[projectId].isHoveringBackArrow = true;
										projectsObejct[projectId].isHoveringArrow = true;
										if(projectsObejct[projectId].currentImageIndex > 0) {
											$(this).show();	
										}
									},function(){
										projectsObejct[projectId].isHoveringBackArrow = false;
										projectsObejct[projectId].isHoveringArrow = false;
									})
									.click(function() {
										if(projectsObejct[projectId].currentImageIndex == 0) {
											projectsObejct[projectId].currentImageIndex = projectsObejct[projectId].numberOfImages;
										}else {
											projectsObejct[projectId].currentImageIndex--;
										}
										$("#" + projectId + "_mainWorkImage").attr("src",$($("image", project).get(projectsObejct[projectId].currentImageIndex)).attr("path"));
									})
							)
							.append(
								$("<img />")
									.addClass("workImage")
									.attr("id", projectId + "_mainWorkImage")
									.attr("width", "798")
									.hover(function() {
										$("#" + projectId + "_arrowImage").fadeIn(400);
										$("#" + projectId + "_arrowBackImage").fadeIn(400);
									},function(){
										setTimeout(function() {
											if(projectsObejct[projectId].isHoveringArrow === false && projectsObejct[projectId].isHoveringBackArrow === false) {
												$("#" + projectId + "_arrowImage").fadeOut(500)	
											}
										}, 15);
										setTimeout(function() {
											if(projectsObejct[projectId].isHoveringArrow === false && projectsObejct[projectId].isHoveringBackArrow === false) {
												$("#" + projectId + "_arrowBackImage").fadeOut(500)	
											}
										}, 15);
									})
							)
					)
					.append(
						$("<div></div>")
							.addClass("projectContent clearfix")
							.append(
								$("<div></div>")
									.addClass("projectTitle")
									.append(
										$("<h2></h2>")
											.append(
												$("<img />")
													.attr("id", projectId + "_titleImage")
													.attr("alt", project.attr("name"))
											)
									)
							)	
							.append(
								$("<div></div>")
									.addClass("projectCopy")
									.append(
										$("<p></p>")
											.html($("description", project).text())
									)
							)	
					)
			);
			$("#" + projectId + "_titleImage").attr("src", project.attr("projectTitleImageUrl"));
			
			var firstImage = $("image", project).get(0);
			
			$("#" + projectId + "_mainWorkImage").attr("src", $(firstImage).attr("path"));
			$("#" + projectId + "_mainWorkImage").attr("height", project.attr("imageHeight"));
			
			var arrowImg = $("#" + projectId + "_arrowImage").find("img");
			arrowImg.attr("src", project.attr("arrowImage"));
			arrowImg.css("top", project.attr("arrowTop") + "px");
			arrowImg.css("left", project.attr("arrowLeft") + "px");
			
			var arrowBackImg = $("#" + projectId + "_arrowBackImage").find("img");
			arrowBackImg.attr("src", project.attr("arrowBackImage"));
			arrowBackImg.css("top", project.attr("arrowBackTop") + "px");
			arrowBackImg.css("left", project.attr("arrowBackLeft") + "px");
			
			//
	});
}