// JavaScript Document

$(document).ready(function(){
	
	
	$("#ogpTitle, .ogp").live('click',function(){
				
			
				var ogpColor = {'color':'#ffffff'};
				var ogpBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(ogpColor);
				$('#menu, #titleContainer').css('opacity','.6');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(ogpBgColor);
				$('body').css('background-color','#ffffff');
				$('#menuNavigationContainer, #prevNextContainer').css(ogpColor);
				$('#factContainer, #factTip').css(ogpBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#000000');
				
				
				$('#descriptionTitle').html('o.g. plastic');
	$('#descriptionDetails').html('An experiment using plastic.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/ogplastic/process1.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/ogplastic/process2.jpg' /></div>");


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

			$('#subMenu li a, #subMenu').css(ogpColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
	
	$('#prev').removeClass();
	$('#prev').addClass('experiments');
	
	$('#next').removeClass();
	$('#next').addClass('poof');
			
			
			
			
			});	
	
	});
	
	
	$("#poofTitle, .poof").live('click',function(){
				
			
				var poofColor = {'color':'#ffffff'};
				var poofBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(poofColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(poofBgColor);
				$('body').css('background-color','#ffffff');
				$('#menuNavigationContainer, #prevNextContainer').css(poofColor);
				$('#factContainer, #factTip').css(poofBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#000000');
				
				
				$('#descriptionTitle').html('poof');
	$('#descriptionDetails').html('An exploration of the reusability of packaging that comes with <br>food products (boxed food, frozen food, etc.), and the ability <br>to change the packaging into a usable product without it having <br>to be put through the recycling process again.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/poof/poof1.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
				
				$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/poof/poofboard.jpg' /></div>");
				$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/poof/poofeverything.jpg' /></div>");
				
	
		
		//$('#projectDisplay').append("<div id='slide3' class='slide'><img src='projects/pagesizer.png' /></div>");
		

		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>poof</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>material experiments</a></li>&nbsp;/  ");
	$('#subMenu').append("<li class='slideNumber'><a href='#slide3'>poof process</a></li>&nbsp;/  ");
	//$('#subMenu').append("<li class='slideNumber'><a href='#slide4'>styleframe</a></li>&nbsp;/  ");
	

			$('#subMenu li a, #subMenu').css(poofColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
	
		$('#prev').removeClass();
	$('#prev').addClass('ogp');
	
	$('#next').removeClass();
	$('#next').addClass('wl');
			
			
			
			
			});	
	
	});
	
	
	$("#wlTitle, .wl").live('click',function(){
				
			
				var wlColor = {'color':'#ffffff'};
				var wlBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(wlColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(wlBgColor);
				$('body').css('background-color','#ffffff');
				$('#menuNavigationContainer, #prevNextContainer').css(wlColor);
				$('#factContainer, #factTip').css(wlBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#000000');
				
				
				$('#descriptionTitle').html('walnut lamp');
	$('#descriptionDetails').html('');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/walnutlamp/lamp.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');

		
				$('#subMenu').empty();
	
	
	
	

			$('#subMenu li a, #subMenu').css(wlColor);
			$('#subMenu').css('opacity','0');
	$('#subMenu').stop().animate({'opacity':'1'},300);
	
		$('#prev').removeClass();
	$('#prev').addClass('poof');
	
	$('#next').removeClass();
	$('#next').addClass('oc');
			
			
			
			
			});	
	
	});
	
	
	$("#ocTitle, .oc").live('click',function(){
				
			
				var ocColor = {'color':'#ffffff'};
				var ocBgColor = {'background-color':'#ffffff'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(ocColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #ffffff');
				$('#underline, #underline2, #underline3').css(ocBgColor);
				$('body').css('background-color','#000000');
				$('#menuNavigationContainer, #prevNextContainer').css(ocColor);
				$('#factContainer, #factTip').css(ocBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#000000');
				
				
				$('#descriptionTitle').html('origami chess');
	$('#descriptionDetails').html('An exploration of the reusability of packaging that comes with <br>food products (boxed food, frozen food, etc.), and the ability <br>to change the packaging into a usable product without it having <br>to be put through the recycling process again.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/origamichess/chess2.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
				
								


		
				$('#subMenu').empty();
	
	
	$('#prev').removeClass();
	$('#prev').addClass('wl');
	
	$('#next').removeClass();
	$('#next').addClass('wla');
			
			
			
			
			});	
	
	});
	
	
	
	$("#wlaTitle, .wla").live('click',function(){
				
			
				var wlaColor = {'color':'#000000'};
				var wlaBgColor = {'background-color':'#000000'};
				
				
				$('#mainContainer, #infoPanel a, .title, .information').css(wlaColor);
				$('#menu, #titleContainer').css('opacity','.5');
				$('.title').css('border-bottom',' 1px solid #000000');
				$('#underline, #underline2, #underline3').css(wlaBgColor);
				$('body').css('background-color','#e1dad3');
				$('#menuNavigationContainer, #prevNextContainer').css(wlaColor);
				$('#factContainer, #factTip').css(wlaBgColor);
				$('#funFactsContainer').css('opacity','.5');
				$('#factContainer').css('color','#ffffff');
				
				
				$('#descriptionTitle').html('welcome to l.a.');
	$('#descriptionDetails').html('An exploration of the reusability of packaging that comes with <br>food products (boxed food, frozen food, etc.), and the ability <br>to change the packaging into a usable product without it having <br>to be put through the recycling process again.');
	$('#projectDescriptionContainer').hide();
	$('#projectDescriptionContainer').slideDown();
				
				
				$('#projectDisplay').fadeOut(250, function(){
				$('#projectDisplay').empty();
				
				$('#projectDisplay').append("<div id='slide1' class='slide'><img src='projects/welcometola/front.jpg' /></div>");
				
				$('#projectDisplay').fadeIn('slow');
				
								$('#projectDisplay').append("<div id='slide2' class='slide'><img src='projects/welcometola/inside.jpg' /></div>");


		
				$('#subMenu').empty();
	$('#subMenu').append("<li class='slideNumber'><a href='#slide1'>card front</a></li>&nbsp;/  ");
	
	$('#subMenu').append("<li class='slideNumber'><a href='#slide2'>inside card</a></li>&nbsp;/  ");

	

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