/* Edit Content for Prtclr.com Below */
var content= [];

content[0] = new Array(	"Matter",
						"1",
						"Matter, parent company of Particular, is a concern for strategic design and incubator for product and business innovation. For the Matter site, we turned Wordpress inside-out for the sake of simple, elegant design and content management.",
						"http://www.matterco.com",
						"matterco.com",
						"matter.jpg");
						
content[1] = new Array(	"Jane Monheit",
						"2",
						"Jane’s team needed a site to replace one that had gotten out of hand, and they needed it quickly, as her new release was imminent. We obliged, to great effect and accolades—a successful exercise in “brand rescue”. This project was featured on the WordPress showcase site.",
						"http://www.janemonheitonline.com",
						"janemonheitonline.com",
						"janemonheit.jpg");

content[2] = new Array(	"Hutchins & Rea",
						"3",
						"An established purveyor of fine sheet music and bound editions, Hutchins & Rea was ready to elevate its identity with a new mark and new website. The domain of classic art music is fertile territory for imagery; it’s also well-trodden. The field (and the world) didn’t need another sepia-toned image of a conductor’s baton, and that wouldn’t best represent H&R’s unpretentious yet precise musical intelligence. The results were clear, dynamic, sophisticated, and widely applicable.",
						"2",
						"see details »",
						"hutchrea.jpg",
						"hr4.jpg",
						"hr3.jpg",
						"hr2.jpg",
						"hr1.jpg",
						"hr0.jpg");
						
content[3] = new Array(	"The Swimming Pool Qs",
						"4",
						"“[These projects] were complicated endeavors—a lot of ideas, egos, details, and text had to be managed—and, in both cases, the instant I stepped out of the way and let Ash take charge, the projects collapsed into place. Ash wasn’t fast, he was sudden. He took all of the band’s baroque, antiquated nonsense and turned it into something so extraordinarily modern that it anticipated parallel futures.” —Jeff Calder",
						"3",
						"see details »",
						"swimmingpoolqs.jpg",
						"spq4.jpg",
						"spq3.jpg",
						"spq2.jpg",
						"spq1.jpg",
						"spq0.jpg");

content[4] = new Array(	"Paula Cole",
						"5",
						"One thing led to another and that led to a new site for Paula Cole to promote her “return” album, which led to a frozen night in Boston and Paula’s alma mater Berklee to see a hell of a good show.",
						"http://paulacole.com",
						"paulacole.com",
						"paulacole.jpg");
												
content[5] = new Array(	"Madeleine Peyroux",
						"6",
						"Madeleine’s site reflects her music: evocative, meticulous, engaging, and a little mysterious.",
						"http://www.madeleinepeyroux.com",
						"madeleinepeyroux.com",
						"madeleinepeyroux.jpg");
						
content[6] = new Array(	"The Bonaventure Quartet",
						"7",
						"The greatest gypsy-jazz five-person quartet around. Packaging, promotional posters, logos inspired by Charles Williams&rsquo; evocative songcraft and creative vision, along with <a class=\"underlined\" href=\"http://www.adamtaylorpictures.com/\" target=\"_blank\">Adam Taylor&rsquo;s</a> brilliant photograph. <a href=\"http://www.thebonaventurequartet.com/\" class=\"underlined\" target=\"_blank\">Here&rsquo;s a link</a>, so you can hear this great music for yourself. Pictures here include a previous project with Charles called Chateau Debris.",
						"6",
						"see details &raquo;",
						"bvq.jpg",
						"bvq1.jpg",
						"bvq2.jpg",
						"bvq3.jpg",
						"bvq4.jpg",
						"bvq5.jpg");
						
content[7] = new Array(	"Center for Planning Excellence",
						"8",
						"Part of a larger brand and communications strategy developed by Matter for a nascent regional planning organization. A new mark, new brand guidelines and standards manual, new website all comprise the kind of system necessary for a small, emerging organization to have credible, immediate, pervasive impact.",
						"7",
						"see details &raquo;",
						"cpex.jpg",
						"cpex3.jpg",
						"cpex2.jpg",
						"cpex1.jpg");

content[8] = new Array(	"GOAL",
						"9",
						"What began as a request to redesign the text documents that comprised this non-profit&rsquo;s curriculum resulted in a beautifully packaged, modular, portable, useful, enjoyable toolkit for experiential learning.",
						"8",
						"see details &raquo;",
						"goal.jpg",
						"goal4.jpg",
						"goal3.jpg",
						"goal2.jpg",
						"goal1.jpg");
						
content[9] = new Array(	"Task Force for the Homeless",
						"10",
						"A multi-part identity system for a community non-profit that included a new mark for the parent organization, as well as a system of marks for the businesses it would operate from its historic A. Ten Eyck Brown building. Style for the marks was inspired by Art Deco architectural elements in the classic structure.",
						"9",
						"see details &raquo;",
						"tfh.jpg",
						"tfh2.jpg",
						"tfh1.jpg");
						
content[10] = new Array(  "Matthew Sweet",
						"11",
						"&ldquo;The layout with &lsquo;Sluggo&rsquo; is perfect; we just need the original photo&mdash;Yes, a high-resolution original from the photographer&mdash; What do you mean...? The Internet? An elderly gardener?! .......... OK. How do you feel about bees?&rdquo;",
						"10",
						"see details &raquo;",
						"msweet.jpg",
						"ms2.jpg",
						"ms1.jpg",
						"ms0.jpg");
						
						
/* content[11] = new Array(  "Marriott",
						"12",
					  "WeÕve done nearly 30 projects with Marriott under the Matter flag, most of them strategic in purpose and large in scope. Within and among those is work focused on aesthetics, style, and systematic surface design.",
						"11",
						"see details &raquo;",
						"marriott.jpg",
						"marriott3.jpg",
						"marriott2.jpg",
						"marriott1.jpg"); */ 

$(document).ready(function() {
  //Page Load
	var menu = "";
	for(i=0;i<content.length;i++){
		menu += "<span>"+content[i][0]+"</span> / ";
	}
  var where = menu.lastIndexOf('/');
  menu = menu.substr(0,where);
  
	$("#navigation").html(menu);
	$("#description").html("<div id=\"covertext\">Particular is the<br />applied aesthetics<br />studio at Matter,<br />a strategic<br />design concern.</div><div id=\"covertextsm\">Use the controls above to navigate and change text color.</div>");
	$("#image").html('<div id="supersize"><a class="activeslide" href="javascript:void(0);" style="cursor:default;"><img  src="images/home2.jpg"/></a></div>');
	
	$("#navigation").fadeIn("slow");
	$("#number").fadeIn("slow");
	$("#description").fadeIn("slow");
	$("#image").fadeIn("slow");
	
	//Change Content
	$("#navigation span").each(
		function(active){
			$(this).bind(
				"click",
				function(){
					$("#stateofmatter").remove();
					$("#infopage").removeClass("iactive");
					$("#navigation span").removeClass("active");
					$(this).addClass("active");
					$("#number").html(content[active][1]);
					var description = content[active][2];
					if(content[active][3].match("http://")){
						description += "<a id=\"weblink\" class=\""+content[active][3]+"\" title=\"visit website\" target=\"_blank\" href=\""+content[active][3]+"\">"+content[active][4]+"</a>";
					}else{
						description += "<a id=\"morelink\" class=\""+content[active][3]+"\" title=\"see details\" href=\""+content[active][3]+"\">"+content[active][4]+"</a>";
					}
					$("#description").html(description);
					$("#image").html('<div id="supersize"><a class="activeslide" href="javascript:void(0);" style="cursor:default;"><img  src="images/'+content[active][5]+'"/></a></div>');
	
					$(".frame").remove();
					$("#navigation").fadeIn("slow");
					$("#number").fadeIn("slow");
					$("#description").fadeIn("slow");
					$("#image").fadeIn("slow");
				}
			);
		}
	);
	
	//details
	$("#morelink").live("click", function(link){
     		if($(this).attr("title")=="see details"){
				var which = $(this).attr("class");
				$(this).attr({href: "javascript:void(0)",title: "hide details" });
				$(this).html("hide details &raquo;");
				var width 	= 126;
				var height 	= 26;
				for(i=6;i<content[which].length;i++){
					width 	+= 40;
					height 	+= 40;
					$("body").append("<div class=\"frame\" id=\"pic"+i+"\" style=\"top:"+width+"px;right:"+height+"px;background:#fff url(http://i.prtclr.com/images/"+content[which][i]+") center center no-repeat;\"><div alt=\"pic"+i+"\" class=\"close\">hide details</div></div>");
				}
				$(".frame").fadeIn("slow");
				$(".frame").draggable({ cursor: "move", stack: { group: ".frame", min: 50 } });
			}else{
				$(this).attr({title: "see details"});
				$(this).html("see details &raquo;");
				$(".frame").fadeOut("slow");
				$(".frame").remove();
			}
    });
	
	//Close Link
	$(".close").live("click", function(){
		      	var pic = "#"+$(this).attr("alt");
				$(pic).fadeOut("slow", function () {
        			$(pic).remove();
      			});
				
				if($(".frame").length==1){
					$("#morelink").attr({title: "see details"});
					$("#morelink").html("see details &raquo;");
				}
	});
	
	//Info
	$("#infopage").each(
		function(active){
			$(this).bind(
				"click",
				function(){
					$("#navigation span").removeClass("active");
					$(this).addClass("iactive");
					$("#number").html("");
					var description = "<span id=\"infotext\">Particular is the applied aesthetics studio at Matter, a strategic design concern.<br />&nbsp;<br />We make visible design for special situations & every type of interaction.</span><br />&nbsp;<br />To discuss your project, please email <a class=\"underlined\" href=\"mailto:info@prtclr.com\">info@prtclr.com</a>";
					$("#image").html('<div id="supersize"><a class="activeslide" href="javascript:void(0);" style="cursor:default;"><img  src="images/info2.jpg"/></a></div>');
					$(".frame").remove();
					$("body").append("<a href=\"http://www.matterco.com\" target=\"_blank\" id=\"stateofmatter\"><img src=\"/images/stateofmatter.png\" width=\"141\" height=\"60\" alt=\"Matter.\" /></a>");
					$("#description").html(description);
					$("#navigation").fadeIn("slow");
					$("#description").fadeIn("slow");
					$("#image").fadeIn("slow");
				}
			);
		}
	);
});