// JavaScript Document

	$(document).ready(function(){
	
		
		$("#reelTitle, .reel").live('click',function(){
			
			
					//var ctColor = '#3F3F3F';
				var reelColor = {'color':'#808285'};
				var reelBgColor = {'background-color':'#808285'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(reelColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(reelBgColor);
				$('body').css('background-color','#000000');
				$('#menuNavigationContainer, #prevNextContainer').css(reelColor);
				$('#factContainer, #factTip').css(reelBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#ffffff');
				
				
				$('#descriptionTitle').html('REEL 2010/11');
	$('#descriptionDetails').html('');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
			$('#projectDisplay').fadeIn('slow');
								$('#projectDisplay').append("<div id='slide1'class='slide' style='margin-left:450px; margin-top:270px;'><iframe src='http://player.vimeo.com/video/17470530?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=0' width='900' height='540' frameborder='0'></iframe></div>");


				
				
			//	$('#projectDisplay').fadeIn('slow');

				$('#subMenu').empty();
	
			
			
	$('#prev').removeClass();
	$('#prev').addClass('wla');
	
	$('#next').removeClass();
	$('#next').addClass('itmfl');
	});
		
		
		});
		
			$("#itmflTitle, .itmfl").live('click',function(){
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css('color','#ffffff');
				$('#menu, #titleContainer').css('opacity','.4');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css('background-color','#ffffff');
				$('body').css('background-color','#363535');
				$('#menuNavigationContainer, #prevNextContainer').css('color','#7C7C7C');
				$('#factContainer, #factTip').css('background-color','#3F3F3F');
				$('#funFactsContainer').css('opacity','.7');
				
				$('#descriptionTitle').html('In The Mood For Love');
	$('#descriptionDetails').html('An opening title for the film In The Mood For Love by<br> Wong Kar Wai. The sequence is inspired by the idea that <br>the main characters are two people who long to be with <br>each other but are separated by circumstances, which <br>make their interactions with each other like a dance.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				

				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/itmfl/itmflboard.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/itmfl/itmfl_still1b.jpg' /></div>");
$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/itmfl/itmfl_still3b.jpg' /></div>");
				
$('#projectDisplay').append("<div id='slide4' class='slide'><img src='projects/itmfl/itmfl_still4b.jpg' /></div>");

$('#projectDisplay').append("<div id='slide5' class='slide'><img src='projects/itmfl/itmfl_still5b.jpg' /></div>");

				
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>storyboard</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>styleframe</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide3'>production plate</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide4'>actor plate</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide5'>title plate</a></li>&nbsp;/  ");

			$('#subMenu li a, #subMenu').css('color','#ffffff');
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
	
	
	
	$('#prev').removeClass();
	$('#prev').addClass('reel');
	
	$('#next').removeClass();
	$('#next').addClass('ct');
			
			
			
			});	
			
		});	
		
			$("#ctTitle, .ct").live('click',function(){
				
				//var ctColor = '#3F3F3F';
				var ctColor = {'color':'#000000'};
				var ctBgColor = {'background-color':'#000000'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(ctColor);
				$('#menu, #titleContainer').css('opacity','.6');
				$('.title').css('border-bottom',' 1px solid #000000');
				$('#underline, #underline2, #underline3').css(ctBgColor);
				$('body').css('background-color','#ffffff');
				$('#menuNavigationContainer, #prevNextContainer').css(ctColor);
				$('#factContainer, #factTip').css(ctBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#ffffff');
				
				
				$('#descriptionTitle').html('Faux History of Chipotle Tabasco');
	$('#descriptionDetails').html('A short spoof on the history of how Chipotle Tabasco came to be.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/tabasco/tabascoboard.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/tabasco/tabasco_still1.jpg' /></div>");
$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/tabasco/tabasco_still2.jpg' /></div>");
				
$('#projectDisplay').append("<div id='slide4' class='slide'><img src='projects/tabasco/tabasco_still3.jpg' /></div>");
		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>storyboard</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>styleframe</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide3'>styleframe</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide4'>styleframe</a></li>&nbsp;/  ");
	

			$('#subMenu li a, #subMenu').css(ctColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
			
			
			$('#prev').removeClass();
	$('#prev').addClass('itmfl');
	
	$('#next').removeClass();
	$('#next').addClass('tgw');
			
			
			
			});	
		
		
		});	
		
		$("#tgwTitle, .tgw").live('click',function(){
				
				
				var tgwColor = {'color':'#E5E5E5'};
				var tgwBgColor = {'background-color':'#E5E5E5'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(tgwColor);
				$('#menu, #titleContainer').css('opacity','.6');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(tgwBgColor);
				$('body').css('background-color','#3d3d3d');
				$('#menuNavigationContainer, #prevNextContainer').css(tgwColor);
				$('#factContainer, #factTip').css('background-color','#6B6A6A');
				$('#factContainer').css('color','#ffffff');
				$('#funFactsContainer').css('opacity','.5');
				
				
				
				$('#descriptionTitle').html('The Good Woodie');
	$('#descriptionDetails').html('When thinking about what would make a change in the world, <br>the first thing that comes to mind are the polar ice caps. <br>What would happen if we could reverse the melting?');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/woodie/woodie_still1.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');

		
				$('#subMenu').empty();
	
		$('#prev').removeClass();
	$('#prev').addClass('ct');
	
	$('#next').removeClass();
	$('#next').addClass('ti');
			
			
			});	
		
		
		});	
		
		
			
		$("#tiTitle, .ti").live('click',function(){
			
			
					//var ctColor = '#3F3F3F';
				var reelColor = {'color':'#ffffff'};
				var reelBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(reelColor);
				$('#menu, #titleContainer').css('opacity','.6');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(reelBgColor);
				$('body').css('background-color','#3d3d3d');
				$('#menuNavigationContainer, #prevNextContainer').css(reelColor);
				$('#factContainer, #factTip').css(reelBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#3F3F3F');
				
				
				$('#descriptionTitle').html('The Illustionist');
	$('#descriptionDetails').html('');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
			
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/illusionist/illusionist.jpg' /></div>");
				$('#projectDisplay').fadeIn('slow');

				$('#subMenu').empty();
	
			$('#subMenu li a, #subMenu').css(reelColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
			
			
	$('#prev').removeClass();
	$('#prev').addClass('tgw');
	
	$('#next').removeClass();
	$('#next').addClass('logos');
	});
		
		
		});
		
		
		
		
		
	
	$("#logosTitle, .logos").live('click',function(){
				
				
				//var ctColor = '#3F3F3F';
				var logosColor = {'color':'#000000'};
				var logosBgColor = {'background-color':'#000000'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(logosColor);
				$('#menu, #titleContainer').css('opacity','1');
				$('.title').css('border-bottom',' 1px solid #000000');
				$('#underline, #underline2, #underline3').css(logosBgColor);
				$('body').css('background-color','#ffffff');
				$('#menuNavigationContainer, #prevNextContainer').css(logosColor);
				$('#factContainer, #factTip').css(logosBgColor);
				$('#funFactsContainer').css('opacity','1');
				$('#factContainer').css('color','#ffffff');
				
				
				$('#descriptionTitle').html('logos');
	$('#descriptionDetails').html('');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/logos/sjmalogo.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/logos/tslogo.jpg' /></div>");
$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/logos/eelogo.jpg' /></div>");
				
$('#projectDisplay').append("<div id='slide4' class='slide'><img src='projects/logos/pmcalogo.jpg' /></div>");
$('#projectDisplay').append("<div id='slide5' class='slide'><img src='projects/logos/rslogo.jpg' /></div>");

		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>San Jose Museum of Art</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>Translating Syntax</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide3'>Everthing Else</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide4'>Pasadena Museum of California Art</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide5'>resupply</a></li>&nbsp;/  ");

			$('#subMenu li a, #subMenu').css(logosColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
			
	$('#prev').removeClass();
	$('#prev').addClass('ti');
	
	$('#next').removeClass();
	$('#next').addClass('ts');
			
			});	
		
		
		});	
		
		
	$("#tsTitle, .ts").live('click',function(){
				
				
				//var ctColor = '#3F3F3F';
				var tsColor = {'color':'#A7A9AC'};
				var tsBgColor = {'background-color':'#A7A9AC'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(tsColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #565555');
				$('#underline, #underline2, #underline3').css(tsBgColor);
				$('body').css('background-color','#000000');
				$('#menuNavigationContainer, #prevNextContainer').css(tsColor);
				$('#factContainer, #factTip').css(tsBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#000000');
				
				
				$('#descriptionTitle').html('translating syntax');
	$('#descriptionDetails').html('It has been a little over a decade since my first experience with <br>the 14.4kbbp modem and the beginning of many hours in the virtual. <br>The more I immerse myself in the virtual the more the physical and <br>virtual begin to merge together. That meeting place is language <br>and the translation is in code.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/translatingsyntax/ts01.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/translatingsyntax/tscontents.jpg' /></div>");
$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/translatingsyntax/tsmap.jpg' /></div>");
				
$('#projectDisplay').append("<div id='slide4' class='slide'><img src='projects/translatingsyntax/tswords.jpg' /></div>");
$('#projectDisplay').append("<div id='slide5' class='slide'><img src='projects/translatingsyntax/ts02.jpg' /></div>");

		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>intro</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>table of contents</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide3'>map</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide4'>words</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide5'>exhibit</a></li>&nbsp;/  ");

			$('#subMenu li a, #subMenu').css(tsColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
	
	
	$('#prev').removeClass();
	$('#prev').addClass('logos');
	
	$('#next').removeClass();
	$('#next').addClass('tai');
			
			
			
			});	
		
		
		});	
		
		
	
		$("#taiTitle, .tai").live('click',function(){
				
				
				//var ctColor = '#3F3F3F';
				var taiColor = {'color':'#ffffff'};
				var taiBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(taiColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(taiBgColor);
				$('body').css('background-color','#777777');
				$('#menuNavigationContainer, #prevNextContainer').css(taiColor);
				$('#factContainer, #factTip').css(taiBgColor);
				$('#funFactsContainer').css('opacity','.4');
				$('#factContainer').css('color','#000000');
				
				
				$('#descriptionTitle').html('type as image');
	$('#descriptionDetails').html('Hypothesis: I assume that the use of impermanent materials to <br>create typography will increase the way a word is looked at as <br>an object/form rather than for its linguistic meaning. I assume <br>that there is a point when the word is looked at as a word and <br>also as an image simultaneously.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/typeasimage/movelight.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/typeasimage/moveword.jpg' /></div>");
$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/typeasimage/water.jpg' /></div>");
				
$('#projectDisplay').append("<div id='slide4' class='slide'><img src='projects/typeasimage/windcheesefire.jpg' /></div>");


		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>moving light</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>moving word</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide3'>water</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide4'>wind, cheese, fire</a></li>&nbsp;/  ");

			$('#subMenu li a, #subMenu').css(taiColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
	
	
	$('#prev').removeClass();
	$('#prev').addClass('ts');
	
	$('#next').removeClass();
	$('#next').addClass('pmca');
			
			
			
			});	
		
		
		});	
		
		
		
			$("#pmcaTitle, .pmca").live('click',function(){
			
			
					//var ctColor = '#3F3F3F';
				var reelColor = {'color':'#ffffff'};
				var reelBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(reelColor);
				$('#menu, #titleContainer').css('opacity','.6');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(reelBgColor);
				$('body').css('background-color','#3d3d3d');
				$('#menuNavigationContainer, #prevNextContainer').css(reelColor);
				$('#factContainer, #factTip').css(reelBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#3F3F3F');
				
				
				$('#descriptionTitle').html('PMCA');
	$('#descriptionDetails').html('identity for the Pasadena Museum of California Art');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
			
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/pmca/pmca34.jpg' /></div>");

				
				$('#projectDisplay').fadeIn('slow');
				
				$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/pmca/pmcainside.jpg' /></div>");

				$('#subMenu').empty();
				
				$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>3/4 view of exhibit</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>inside view</a></li>&nbsp;/  ");
				
				
	
			$('#subMenu li a, #subMenu').css(reelColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
			
			
	$('#prev').removeClass();
	$('#prev').addClass('tai');
	
	$('#next').removeClass();
	$('#next').addClass('lp');
	});
		
		
		});
		
		
		
		
		
		$("#lpTitle, .lp").live('click',function(){
				
				
				//var ctColor = '#3F3F3F';
				var lpColor = {'color':'#565555'};
				var lpBgColor = {'background-color':'#565555'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(lpColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #565555');
				$('#underline, #underline2, #underline3').css(lpBgColor);
				$('body').css('background-color','#565555');
				$('#menuNavigationContainer, #prevNextContainer').css(lpColor);
				$('#factContainer, #factTip').css(lpBgColor);
				$('#funFactsContainer').css('opacity','.4');
				$('#factContainer').css('color','#ffffff');
				
				
				$('#descriptionTitle').html('selected letterpress works');
	$('#descriptionDetails').html('');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/letterpress/votedetail.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/letterpress/2posters.jpg' /></div>");



		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>vote '08</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>2 posters</a></li>&nbsp;/  ");
	

			$('#subMenu li a, #subMenu').css(lpColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
			
			
	$('#prev').removeClass();
	$('#prev').addClass('pmca');
	
	$('#next').removeClass();
	$('#next').addClass('se');
			
			
			
			
			});	
		
		
		});	
		
		
		
			
		});