var projects = new Array ();

var projectDescriptions = new Array();
projectDescriptions['pillowmachine'] = "<br><br><b> Project Description:</b> The Pillow Machine Project was a project at the<a href='http://www.etc.cmu.edu'> Entertainment Technology Center</a> at Carnegie Mellon University to create an interactive experience for guests at the <a href='http://www.gktw.org/'>Give Kids the World Village</a> that will provide a memorable encounter through a combination of a themed installation, virtual characters, game play, and a physical souvenir.   We created the next version of the Pillow Machine, a popular attraction at GKTW that allows Wish Children and their families to create a dream pillow infused with good wishes and magic through an exciting and fun series of games and interactions.<p>Give Kids the World and the Entertainment Technology Center have partnered with <a href='http://www.bobsspaceracers.com/'>Bob&#39;s Space Racers</a> to create a sturdy and reliable product for installation in the park. <p>The design phase of the project ended in December 2007. The full design package was then handed over to Bob&#39;s who, along with <a href='http://www.sallycorp.com/'>Sally Corporation</a>, are currently in construction of the final installation.<p>As one of the artists on the team, I created the initial and final concept art work as well as the 2D character art for the final animation. I also wrote the story of magical origins of the Pillow Tree and collaborated on writing the treatment and narrative for the experience.<p>The overall design was a collaborative effort between the six team members.  We initially began with five different ways of treating the space and took those rough concept packages to our client in September, 2007.  After the initial meeting, the client chose two concepts which we polished and brought back to them in October, 2007.   The client then decided on the concept of a Pillow Tree where the children will use the goodness in their hearts to grow a pillow. <p><b>Team members:</b> Evan Tahler, Rich Marmura, Rob Russo, Brendan MacDonald, Anuja Parikh ";
projectDescriptions['arx']= '<br> <img src="images/IndieCade.gif"/> <br/><b> 2009 IndieCade Finalist and Runner up for both Audience Choice Award and Finalists Choice Award <br><br>  Project Description:</b> ARx: The Deep Sleep Initiative is an experimental casual ARG created by a project team at the <a href="http://www.etc.cmu.edu"> Entertainment Technology Center</a>.  The project goal was to create an experimental casual alternate reality game (ARG) that will lead players on a journey through a cross-media landscape.  We used a hand made print publication as the main vehicle for the story, comprised of fiction, art, poetry, and photography.  The journal then branched out to multiple websites and beyond to paint a unique universe in which our ARG is located.  Each area the player uncovers brings him one step closer to uncovering the story, solving clues, and unlocking the final mystery!<br><br>To play The Deep Sleep Initiative, please visit <a href="http://www.dreamersoftenlie.com/"> DreamersOftenLie.com </a><br><br><b>What is an ARG?</b> An alternate reality game (ARG) is an interactive fusion of creative writing, puzzle-solving, and team-building, with a dose of role playing thrown in. It utilizes several forms of media in order to pass clues to the players, who solve puzzles in order to win pieces of the story being played out.<br><br>Clues can be passed through web pages, email, voicemail, snail mail, television advertisements, movie posters, campus billboards, newspaper classifieds... really, in any way that information can be passed.<br><br>Many times, the puzzles that must be solved cannot be solved alone. This genre of game almost requires participation in a group or community that works together to win past the more difficult hurdles. <p><b>Team members:<b/> Tracy Kobeda Brown, Nicole Epps, Allison Theus, Brad Michael, and Hee Jun Kim.';
projectDescriptions['purifighters'] = '<br><br> <b>Project Description:</b> PuriFIGHTERS is a educational casual game created by a project team at the <a href="http://www.etc.cmu.edu"> Entertainment Technology Center</a>.  The team worked closely with Walt Disney Parks and Resorts Online (WDPRO) and the Siemens Corporation to develop the game for the new Spaceship Earth website.  The Siemens Corporation sponsors Spaceship Earth and the Innoventions complex at Walt Disney World&#39;s Epcot Center in Orlando, Florida as well as the online suite of games, Model City, which tie ride experience to the bigger picture of environmental efficiency, living green, and  Siemens "Mega-City/Mega Trends" corporate mission.  The entire suite of games targets children between the ages of 9 and 12 and aims to get kids  excited about math and science through games balancing education and fun.<p>As the art lead for PuriFIGHTERS, I worked closely with the creative director from WDPRO to design overall art style for the game.  These images represent various stages of the art production.<br><br>To play PuriFIGHTERS, please visit <a href="http://disneyworld.disney.go.com/wdw/special/spaceshipEarth/">Model City Online </a><p><b>Team members:</b> M.E. Chung, Carlos Pineda, Jake Rheinfrank, Dae Hong Kim, Robert Russo, and Phillip Bloom.';
projectDescriptions['draw'] = '';

// change this image name to the location of the image that indicates that a particular project is selected (an arrow?)
var selectedImg = new Array ();
selectedImg['pillowmachine'] = 'images/pillowArrow.gif';
selectedImg['arx'] = 'images/starArrow.gif';
selectedImg['purifighters'] = 'images/puriArrow.gif'; //'images/starArrow.png';
selectedImg['draw'] = 'images/starArrow.gif';

// change this image name to the location of the image that indicates that a particular project is not selected (clear is good, no?)
var clearImg = 'images/transparent.gif'



// Do this for each project:
// These follow the form: "image file, thumbnail file, caption" -- be careful that they all have commas after them EXCEPT the last one, which mustn't!!!
projects['pillowmachine'] = [
	['images/pillowmachine/machine.png', 'images/pillowmachine/thumbnails/thumb_machine.jpg', 'Suessian-Wonka Machine: an early ideation in our first pass of initial concepts.  <br><br>The child would play a series of mini-games (like collecting cloud fluff) in order to gather the ingredients needed to create a magic pillow.  This idea was abandoned due to the nature of the space as well as the limited mobility of some of the guests.'],
	['images/pillowmachine/kip.jpg', 'images/pillowmachine/thumbnails/thumb_kip.jpg', 'Kip the Wizard: character design for one of the early concepts.  <br><br>We toyed with the idea of creating a new character, Kip, and turning the location of the machine into his wizarding workshop.  Kip would appear in various little mouse holes around the space guiding the guest through the experience of gathering magical ingredients to make a magic pillow.'],
	['images/pillowmachine/splitBox.jpg', 'images/pillowmachine/thumbnails/thumb_splitBox.jpg', 'Enchanted Pillow Box: early ideation sketch of two possible designs.  <br><br>As the guest gathered the magical ingredients the pillow would grow inside the Enchanted Pillow Box.'],
	['images/pillowmachine/legOrnament.jpg', 'images/pillowmachine/thumbnails/thumb_legOrnament.jpg', 'Color sketch of leg for Enchanted Pillow Box.'],
	['images/pillowmachine/topOrnament.jpg', 'images/pillowmachine/thumbnails/thumb_topOrnament.jpg', 'Color sketch of crowning ornament for Enchanted Pillow Box.'],
	['images/pillowmachine/pillowFlower.jpg', 'images/pillowmachine/thumbnails/thumb_pillowFlower.jpg', 'Color sketch of Pillow Flower.'],
	['images/pillowmachine/pillowTree01.jpg', 'images/pillowmachine/thumbnails/thumb_pillowTree01.jpg', 'Pillow Tree: an early ideation in our first pass of initial concepts.<br><br>  A tree made of fabric, yarn, and thread from which pillows would bloom from the buds of the tree. The guest would perform a series of actions to tend the tree and grow a pillow from one of the tree’s flowers.'],
	['images/pillowmachine/simonOwl.jpg', 'images/pillowmachine/thumbnails/thumb_simonOwl.jpg', 'Simon Owl: Initial concept for Tree Care Taker. <br><br> The animated owl lives in the opening of the tree trunk.  He guides the guests through the experience.'],
	['images/pillowmachine/hermesOwl.jpg', 'images/pillowmachine/thumbnails/thumb_hermesOwl.jpg', 'Hermes: Final design for Care Taker.<br><br>  After user testing several owl concepts, I combined the characteristics of different owls to create Hermes.  The play testers judged the owls through three questions: which owl looks the nicest? which owl looks the wisest? and which owl is your favorite?'],
	['images/pillowmachine/sketch_Trunk.jpg', 'images/pillowmachine/thumbnails/thumb_sketch_Trunk.jpg', 'Pillow Tree: Early sketch of pillow tree. <br><br> After visiting and measuring the space, I made adjustments to the shape of the tree to better fit the location.'],
	['images/pillowmachine/pillowTree02.jpg', 'images/pillowmachine/thumbnails/thumb_pillowTree02.jpg', 'Pillow Tree: Final concept art.'],
	['images/pillowmachine/PillowTreeModel_Far.jpg', 'images/pillowmachine/thumbnails/thumb_PillowTreeModel_Far.jpg', 'Plasticine Clay Model.'],
	['images/pillowmachine/TreeWithLeaves.jpg', 'images/pillowmachine/thumbnails/thumb_TreeWithLeaves.jpg', 'Plasticine Clay Model with Paper Leaves.'],
	['images/pillowmachine/EnteringCanopy.jpg', 'images/pillowmachine/thumbnails/thumb_EnteringCanopy.jpg', 'Entering the canopy. <br><br> It was important for us to make the experience intimate for the guest.  We incorporated a canopy into the design to help define and somewhat enclose the space. '],
	['images/pillowmachine/ApproachingScreen.jpg', 'images/pillowmachine/thumbnails/thumb_ApproachingScreen.jpg', 'Close up of Clay Model.'],
	['images/pillowmachine/GenderButtons_Detail.jpg', 'images/pillowmachine/thumbnails/thumb_GenderButtons_Detail.jpg', 'Details of the buttons that the guest will use in the experience.'],
	['images/pillowmachine/ButtonPath_Detail.jpg', 'images/pillowmachine/thumbnails/thumb_ButtonPath_Detail.jpg', 'Detail of button path leading up to the tree.'],
	['images/pillowmachine/SC_foamFront.jpg', 'images/pillowmachine/thumbnails/thumb_SC_foamFront.jpg', 'Sally Corp. foam sculpture of full sized tree.'],
	['images/pillowmachine/SC_foamFar.jpg', 'images/pillowmachine/thumbnails/thumb_SC_foamFar.jpg', 'Sally Corp. foam sculpture of full sized tree.'],
	['images/pillowmachine/SC_foamSide.jpg', 'images/pillowmachine/thumbnails/thumb_SC_foamSide.jpg', 'Sally Corp. foam sculpture of full sized tree.']


	
];

projects['arx'] = [
	['images/arx/journal.jpg', 'images/arx/thumbnails/thumb_journal.jpg', "I created this unique journal by hand.  It includes various story elements told through words and images as well as many clues!  Inside you will find pasted photographs, paintings, and handwritten notes as well as drawings and notes written directly in the journal.  After the creation of the original journal, our faculty, requested we mass produce them by hand for distribution.  The team assembled a total of 53 journals by the semester's end."],
	['images/arx/journal CU.jpg', 'images/arx/thumbnails/thumb_journal CU.jpg', "It begins with a mysterious card, a secret website, and a plea for help inside a tattered old journal. These seemingly innocent mediums lead the viewer down the rabbit hole into a world of liars, dreamers, and a very important missing child. Through the plans of one evil doctor, Christian Santiago has gone missing into a forever world of slumber. His continued presence there soon begins distorting the line which separates the waking from the dreaming. If he remains in this perpetual sleep state, his dreams and the dreams of the world will soon turn to nightmares as the waking world collides with the unconscious. The player is invited to unlock clues, uncover the mystery, and ultimately defend the sanctity of the worlds' dreams."],
	['images/arx/disclaimer.jpg', 'images/arx/thumbnails/thumb_disclaimer.jpg', 'Each member of the team championed and wrote content for a character in the story in order to remain consistent in voice and tone.  I wrote all the written content for the heroine of the game, Cassandra Morgan.  Cassandra, founder of the Deep Sleep Initiative, is the creator and owner of the journal.  Fearing her quest for the truth may be in danger, she writes this letter and passes off her work to Peter and, in turn, to the player.'],
	['images/arx/DOLcard.jpg', 'images/arx/thumbnails/thumb_DOLcard.jpg', 'In order to reach a larger audience, we created multiple rabbit holes into the game.  I designed this card to function as one of our three rabbit holes.  The other two are the journal, which one would find, and the website www.dreamconfessional.com'],
	['images/arx/authorPuzzle.jpg', 'images/arx/thumbnails/thumb_authorPuzzle.jpg', 'There are multiple clues and puzzles inside the journal to help the player through the game.  I designed and drew this puzzle which spans two pages.  It requires the player to fold the pages in order to read the clue hidden inside the image.  The clue which reads, it begins with the author, gives the player a starting point to unveiling the story.'],
	['images/arx/machine.jpg', 'images/arx/thumbnails/thumb_machine.jpg', "The journal not only provides clues to the mystery but also relates narrative elements that describe the setting and introduce the characters and events of Cassandra's life."],
	['images/arx/eye.jpg', 'images/arx/thumbnails/thumb_eye.jpg', 'Dreams and dream imagery make up a large part of our story.  Inside the journal, the player can read dreams of the characters and see art that the characters created of their dreams.'],
	['images/arx/carlos.jpg', 'images/arx/thumbnails/thumb_carlos.jpg', "This is an example of some of the narrative elements in the game.  Much of the journal is supplemented by Cassandra's blog: www.DeepSleepInitiative.com"],
	['images/arx/5836.jpg', 'images/arx/thumbnails/thumb_5836.jpg', 'The journal also conveys the mood of the author.  Through her constant scribblings the player is allowed insight into her state of mind.'],
	['images/arx/crows.jpg', 'images/arx/thumbnails/thumb_crows.jpg', 'The journal also features notes written by Peter to help guide the player through the experience.'],
	['images/arx/documents.jpg', 'images/arx/thumbnails/thumb_documents.jpg', 'I created fake documents in the form of patient forms and newspaper clippings that helped to enrich the experience'],
	['images/arx/drawing.jpg', 'images/arx/thumbnails/thumb_drawing.jpg', "A child's drawing from Christian, the missing boy in the story."],
	['images/arx/killDrip.jpg', 'images/arx/thumbnails/thumb_killDrip.jpg', "Christian's Missing Child flyer with clues in the form of notes."],
	['images/arx/dsi.jpg', 'images/arx/thumbnails/thumb_dsi.jpg', "I wrote the entries in Cassandra Morgan's blog.  The blog follows the journal chronologically and reveals the first part of the narrative."],
	['images/arx/osid.jpg', 'images/arx/thumbnails/thumb_osid.jpg', "This is the website to Cassandra's workplace, The Oakland Institute of Sleep Disorders.  The players must use clues from the journal to gain access into Cassandra's work files in order to continue the game."]

];

projects['purifighters'] = [
	['images/purifighters/giardia.jpg', 'images/purifighters/thumbnails/thumb_giardia.jpg', 'Research and concept sketches for Giardia, a type of contaminant found in un-treated water.'],
	['images/purifighters/crypto.jpg', 'images/purifighters/thumbnails/thumb_crypto.jpg', 'Research and concept sketches for Cryptosporidium, a type of contaminant found in un-treated water.'],
	['images/purifighters/algaeFungi.jpg', 'images/purifighters/thumbnails/thumb_algaeFungi.jpg', 'Research and concept sketches for Algae and Fungi, two types of contaminants found in un-treated water.'],
	['images/purifighters/bacteriaViruses.jpg', 'images/purifighters/thumbnails/thumb_bacteriaViruses.jpg', 'Research and concept sketches for Bacteria and Viruses, two types of contaminants found in un-treated water.'],
	['images/purifighters/contaminants1.png', 'images/purifighters/thumbnails/thumb_contaminants.jpg', 'Refined ideations for contaminants.'],
	['images/purifighters/contaminantsFinal.png', 'images/purifighters/thumbnails/thumb_contaminantsFinal.jpg', 'Final design for contaminants and corresponding chemicals that eliminate them.'],
	['images/purifighters/guy.png', 'images/purifighters/thumbnails/thumb_guy.jpg', 'Ideation for a possible character guide. '],
	['images/purifighters/tankElements.png', 'images/purifighters/thumbnails/thumb_tankElements.jpg', 'Research sketches for elements that one might find inside a water treatment plant.'],
	['images/purifighters/techSketch.png', 'images/purifighters/thumbnails/thumb_techSketch.jpg', 'Sketch for game board.'],
	['images/purifighters/layout_v5FlatAll.png', 'images/purifighters/thumbnails/thumb_layout_v5FlatAll.jpg', 'Finalize game board.'],
	['images/purifighters/screenshot.png', 'images/purifighters/thumbnails/thumb_screenshot.jpg', 'Screen shot of final game in play.']
];

projects['draw'] = [
	['images/drawing/advmod1.jpg', 'images/drawing/thumbnails/thumb_advmod1.jpg', 'Train Station, 2006. Mixed Media.'],
	['images/drawing/bacteria.jpg', 'images/drawing/thumbnails/thumb_bacteria.jpg', 'Bacteria, 2007. Ink.'],
	['images/drawing/lines.jpg', 'images/drawing/thumbnails/thumb_lines.jpg', 'Lines, 2007. Ink.'],
	['images/drawing/columbine.jpg', 'images/drawing/thumbnails/thumb_columbine.jpg', 'I Remember Columbine, 2007. Ink.'],
	['images/drawing/weeds.jpg', 'images/drawing/thumbnails/thumb_weeds.jpg', 'Weeds, 2007. Ink.'],
	['images/drawing/yak.jpg', 'images/drawing/thumbnails/thumb_yak.jpg', 'Yak, 2006. Mixed Media.'],
	['images/drawing/monsterEatingASquid-1-23-07.jpg', 'images/drawing/thumbnails/thumb_monsterEatingASquid-1-23-07.jpg', 'Sketch for Monster Eating a Squid, 2006. Graphite/Pen'],
	['images/drawing/children.jpg', 'images/drawing/thumbnails/thumb_children.jpg', 'Children: to be eaten by Zombies, 2006. Ink.'],
	['images/drawing/fred.jpg', 'images/drawing/thumbnails/thumb_fred.jpg', 'I Still Love You, 2004. Charcoal.'],
	['images/drawing/warp3.jpg', 'images/drawing/thumbnails/thumb_warp3.jpg', 'Study of Dali, 2002. Graphite.'],
	['images/drawing/zombie_head.jpg', 'images/drawing/thumbnails/thumb_zombie_head.jpg', 'Zombie, 2006. Graphite.'],
	['images/drawing/warp1.jpg', 'images/drawing/thumbnails/thumb_warp1.jpg', 'Study of Longo, 2002. Graphite.'],
	['images/drawing/murder.jpg', 'images/drawing/thumbnails/thumb_murder.jpg', 'Murder, 2006. Photoshop.'],		
	['images/drawing/pCap-fall06.jpg', 'images/drawing/thumbnails/thumb_pCap-fall06.jpg', 'Paul, 2006. Graphite.'],
	['images/drawing/cStudyFatNude-1-22-07.jpg', 'images/drawing/thumbnails/thumb_cStudyFatNude-1-22-07.jpg', 'Nude: Color study, 2007. Colored Pencil.'],
	['images/drawing/heartBreak_shadow.jpg', 'images/drawing/thumbnails/thumb_heartBreak_shadow.jpg', 'Heart Break Valentine, 2008. Illustrator and Photoshop.'],
	['images/drawing/djTinypants.jpg', 'images/drawing/thumbnails/thumb_djTinypants.jpg', 'DJ Tinypants, 2008. Photoshop.'],
	['images/drawing/castle.jpg', 'images/drawing/thumbnails/thumb_castle.jpg', 'Palace of the Sun, 2006. Photoshop.'],
	['images/drawing/page1.jpg', 'images/drawing/thumbnails/thumb_page1.jpg', 'Summertime in the Jungle, 2006. Photoshop.'],
	['images/drawing/page2.jpg', 'images/drawing/thumbnails/thumb_page2.jpg', 'Wintertime in the Jungle, 2006. Photoshop.'],
	['images/drawing/logo13.jpg', 'images/drawing/thumbnails/thumb_logo13.jpg', 'Lucky 13 Logo, 2006. Hand drawn and then painted in Photoshop.'],
	['images/drawing/cells.jpg', 'images/drawing/thumbnails/thumb_cells.jpg', 'Bloodcells, 2007. Photoshop.']
	];	

var selected = '';

// gets a valid reference to a div
function getRefToDiv(divID,oDoc) {
  if( document.getElementById ) {
    return document.getElementById(divID); }
  if( document.all ) {
    return document.all[divID]; }
  if( !oDoc ) { oDoc = document; }
  if( document.layers ) {
    if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
      //repeatedly run through all child layers
      for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
        //on success, return that layer, else return nothing
        y = getRefToDiv(divID,oDoc.layers[x].document); }
    return y; } }
  return false;
}

//  replaces the text in a named div with the specified content
function rewriteDiv(divName, contentString) {
	// get a (valid) reference to the thumbs div
	myReference = getRefToDiv(divName);
	if( !myReference ) {
		window.alert('Cannot find div: "'+divName+'"');
		return; //don't go any further
	}
	
	if( typeof( myReference.innerHTML ) != 'undefined' ) {
	  //used by all current browsers
	  myReference.innerHTML = contentString;
	} else if( myReference.document && myReference.document != window.document ) {
	  //used by layers browsers
	  myReference.document.open();
	  myReference.document.write(contentString);
	  myReference.document.close();
	}	
}

function hideDiv(divName) {
	myReference = getRefToDiv(divName);
	if( !myReference ) {
		window.alert('Cannot find div: "'+divName+'"');
		return; //don't go any further
	}
	myReference.style.visibility = 'hidden';
}

function showDiv(divName) {
	myReference = getRefToDiv(divName);
	if( !myReference ) {
		window.alert('Cannot find div: "'+divName+'"');
		return; //don't go any further
	}
	myReference.style.visibility = 'visible';
}

function aboutMe() {
	var contentString = '<table width="400" border="0" align="center"><tr><td><img src="images/aboutMe.jpg" border="1" alt="karin" width="400"/></td></tr>';
  contentString = contentString+"<tr><td>Hi, I am Karin! I am a designer and artist specializing in the creation of interactive media. In the spring of 2008 I graduated with my Masters in Entertainment Technology from Carnegie Mellon University. Over the last couple years I have been privileged to create everything from video games to themed installations to interactive virtual worlds. I am currently living and working in the Bay Area and loving every minute of it! My professional interests include interactive media design, rapid prototyping, methods of indirect control in themed enivorments and creative concept development. In my free time I enjoy writing fiction, trying out new recipes, and attending hockey games.</td></tr></table>";
	rewriteDiv('thumbs', contentString);
	hideDiv('projectNames');
}

function selectedWork() {
	showDiv('projectNames');
	var selected_force = selected;
	selected = "";
	selectProject(selected_force);
}


function selectProject(name) {
	// if we've already got that project selected, we're done
	if (selected == name) { return; }

	// if there's a project selected, unselect it (clear out the "selected" image)
	if (selected) {
		rewriteDiv(selected+'_selected', '<img src="'+clearImg+'" class="selectorImg"/>')
	}
	
	// turn on the "selected" image next to the selected project
	selected = name;
	selectionDivRef = getRefToDiv(selected+'_selected');
	rewriteDiv(selected+'_selected', '<img src="'+selectedImg[name]+'" class="selectorImg"/>')

	// add the appropriate number of thumbnails/images for the project. This references the "projects" array that is filled out at the top of the file
	var contentString = '';
	imageArray = projects[name]; // get the data for the appropriate project
	var nImages = imageArray.length;
	for( var i = 0; i < nImages; i++ ) // for each image info, extract the image name, thumbnail image name, and caption, and generate html to add the thumbnail
	{
		var imageInfo = imageArray[i];
		var imgName = imageInfo[0];
		var thumbName = imageInfo[1];
		var caption = imageInfo[2];
		contentString = contentString + '<a href="'+imgName+'" rel="lightbox['+name+']" title="'+caption+' "><img src="'+thumbName+'" class="thumbnail" alt="Click to enlarge" title="Click to enlarge" /></a>'
		
	}
	contentString = '<table><tr><td>'+contentString +'</td></tr><tr><td>' + projectDescriptions[name] + '</td></tr></table>';
	// write the thumbnails into the thumbs div
	rewriteDiv('thumbs', contentString)
}


Event.observe(window, 'load', function() { selectProject('pillowmachine',6); });