$(document).ready(function(){
	if($("#home")[0]){
		// grab gallery pictures from flickr
		$.getJSON("http://api.flickr.com/services/rest/?format=json&jsoncallback=?&api_key=ca786aa80e742e25c123e621b3be2c1e&method=flickr.photosets.getPhotos&photoset_id=72157623826482688&per_page=20&page=1", function(r){
			var $ul = $("<ul></ul>");
			for(var i in r.photoset.photo){
				var photo = r.photoset.photo[i];
				//console.log(photo);
				$ul.append("<li><img src=\"http://farm"+photo["farm"]+".static.flickr.com/"+photo["server"]+"/"+photo["id"]+"_"+photo["secret"]+"_m.jpg\"/></li>");
			}
			$("#slider").append($ul);
			// determine the width for sliding
			var w = 0;
			$("#slider img").each(function(){
				w += $(this).width() || 240;
			});
			$("#slider ul").css("width", w+"px");
			// scroll
			$('#slider').serialScroll({
				items: "li",
				axis: "x",
				start: 1,
				force: true,
				cycle: true,
				duration: 1000000,
				easing: "linear",
				interval: 1000,
				step: 100
			});
			$('#slider').stop().trigger('start');
		});
	}

	// project detail actions
	if($("#projects")[0]){
		// get the dialog element
		var $dlog = function(){
			if($("#dlog")[0]) return $("#dlog");
			return $("<div id=\"dlog\"></div>").appendTo("body");
		}
		// handle action clicks
		$("a.action").click(function(){
			var $a = $(this);
			var go = function(){
				document.location.href = $a.attr('href');
				return false;
			}
			var title = null;
			var msg = null;
			var buttons = {};
			switch(true){
				case $a.is(".lead"):
					title = "Thank you!";
					msg = ["<p>Team Leaders have several responsibilities:</p>",
						"<ol>",
						"<li>Planning how to accomplish the project.</li>",
						"<li>Building a team.</li>",
						"<li>Coordinating the team leading up to the project and throughout the project itself.</li>",
						"</ol>",
						"<p>If you are certain you want to lead this project, select <em>Yes, I’ll Lead</em> below.</p>",
						"<p>ACTION will verify that this is a good project for you. Once we do, you will be listed as the leader of this project.</p>"
					];
					buttons = {
						"Yes, I’ll Lead": function(){
							return go();
						},
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
					break;
				case $a.is(".join"):
					title = "Thank you!";
					msg = ["<p>Volunteers have several responsibilities:</p>",
						"<ol>",
						"<li>Coordinating with the Team Leader (listed on this page).</li>",
						"<li>Following through on your commitment.</li>",
						"</ol>",
						"<p>If you are certain you want to join this project, select <em>Yes, I’ll Join</em> below.</p>"
					];
					buttons = {
						"Yes, I’ll Join": function(){
							return go();
						},
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
					break;
				case $a.is(".unvolunteer"):
					title = "Awwww...";
					msg = ["<p>Sorry to see you go.</p>",
						"<p>If you’re certain you want to leave this project, select <em>Yes, I’ll Leave</em> below.</p>"
					];
					buttons = {
						"Yes, I’ll Leave": function(){
							return go();
						},
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
					break;
				case $a.is(".done"):
					title = "Thank you!";
					msg = ["<p>We’re all grateful for your time and effort.</p>",
						"<p>When you select <em>Yes, it’s done</em>, this project will be marked Done and you’ll be taken to a screen where you can tell about your experience.</p>",
						"<p>It’s a simple screen where you type just as you would in a word processor. When you’re finished writing, hit the blue Publish button on the right.</p>",
						"<p>Again, thank you!</p>"
					];
					buttons = {
						"Yes, it’s done": function(){
							return go();
						},
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
					break;
				default:
					title = "Oops!";
					msg = ["<p>Something went wrong.</p>"];
					buttons = {
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
			}

			$elm = $dlog();
			$elm.html( msg.join("") );
			$elm.dialog({
				width: 500,
				title: title,
				modal: true,
				buttons: buttons,
				autoOpen: true
			});
			return false;
		});
	}

	// network detail actions
	if($("#network")[0]){
		// get the dialog element
		var $dlog = function(){
			if($("#dlog")[0]) return $("#dlog");
			return $("<div id=\"dlog\"></div>").appendTo("body");
		}
		// handle action clicks
		$("a.action").click(function(){
			var $a = $(this);
			var go = function(){
				document.location.href = $a.attr('href');
				return false;
			}
			var title = null;
			var msg = null;
			var buttons = {};
			switch(true){
				case $a.is(".point"):
					title = "Thank you!";
					msg = ["<p>As an Organization Point Person, you will have several responsibilities:</p>",
						"<ol>",
						"<li>Entering and editing the information about each project your organization is sponsoring.</li>",
						"<li>Vetting potential Team Leaders after they volunteer to lead a project.</li>",
						"<li>Confirming or denying their applications.</li>",
						"<li>Ensuring your Team Leaders have what they need to accomplish their projects.</li>",
						"</ol>",
						"<p>ACTION is available to assist you, but all the above actions will be taken using this site.</p>",
						"<p>If you are certain you want to represent this organization, select <em>Yes, I’ll Represent</em> below.</p>",
						"<p>ACTION will verify that everything is in order. Once we do, you will be listed as this organization's contact.</p>"
					];
					buttons = {
						"Yes, I’ll Represent": function(){
							return go();
						},
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
					break;
				default:
					title = "Oops!";
					msg = ["<p>Something went wrong.</p>"];
					buttons = {
						"Cancel": function(){
							$(this).dialog("close");
							return false;
						}
					};
			}

			$elm = $dlog();
			$elm.html( msg.join("") );
			$elm.dialog({
				width: 500,
				title: title,
				modal: true,
				buttons: buttons,
				autoOpen: true
			});
			return false;
		});
	}
});