$("<link>").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "http://hopkinscreative.com/styles/scripts.css").appendTo("head");

$(function(){
	
	var current_img = 0;
	var images_array = "";
	
	$(".project-images-inner").each(function(i){
		var c = $(this).children("a").length * 336;
		$(this).css("width", c + "px");
	});
	$(".project-nav-next").click(function(event){
		event.preventDefault();
		var p = $(this).closest(".project-images");
		var s = p.children(".project-images-container").scrollLeft() + 336;
		p.children(".project-images-container").scrollLeft(s);
	});
	$(".project-nav-prev").click(function(event){
		event.preventDefault();
		var p = $(this).closest(".project-images");
		var s = p.children(".project-images-container").scrollLeft() - 336;
		p.children(".project-images-container").scrollLeft(s);
	});
	function loadImage(p) {
		var i = p.children(".project-images-container").scrollLeft() / 336;
		var imgs = p.children(".project-images-container").children(".project-images-inner").children("a");
		current_img = i;
		images_array = imgs;
		$("#image-viewer-project").text(p.siblings().children("h4").text());
		showImage();
		/*
		$("#image-viewer-image").attr("src", img);
		$("#image-viewer").show();
		*/
	}
	function nextImage() {
		current_img++;
		if (current_img >= images_array.length) {
			current_img = 0;
		}
		showImage();
	}
	function showImage() {
		$("#image-viewer-image").attr("src", "");
		var img = images_array.eq(current_img).attr("href");
		$("#image-viewer-image").attr("src", img);
		$("#image-viewer-numbers").text(current_img + 1 + " of " + images_array.length);
		$("#image-viewer-container").show();
	}
	$("<span>").addClass("project-images-zoom").appendTo($(".project-images")).click(function(event){
		event.preventDefault();
		var p = $(this).parent();
		loadImage(p);
		/*
		var i = p.children(".project-images-container").scrollLeft() / 336;
		var img = p.children(".project-images-container").children(".project-images-inner").children("a").eq(i).attr("href");
		loadImage(img);
		*/
	});
	$("<div>").attr("id", "image-viewer-container").appendTo("body").hide();
	$("<div>").attr("id", "image-viewer-container-close").appendTo("#image-viewer-container").click(function(event){
		$("#image-viewer-container").hide();
	});
	$("<div>").attr("id", "image-viewer").appendTo("#image-viewer-container");
	$("<a>").attr("id", "image-viewer-close").text("Close").appendTo("#image-viewer").click(function(event){
		$("#image-viewer-container").hide();
	});
	$("<span>").attr("id", "image-viewer-project").appendTo("#image-viewer");
	$("<span>").attr("id", "image-viewer-numbers").appendTo("#image-viewer");
	$("<a>").attr("id", "image-viewer-next").text("Next").appendTo("#image-viewer").click(function(event){
		nextImage();
	});
	$("<img>").attr("id", "image-viewer-image").appendTo("#image-viewer");
	
	$("#nav-about").click(function(event){
		event.preventDefault();
		$.scrollTo($("#section-about"), 1000);
	});
	$("#nav-contact").click(function(event){
		event.preventDefault();
		$.scrollTo($("#section-contact"), 1000);
	});
});