//JQuery functionality on ready
$(document).ready(function(){
	
	//initial set-up
	$(".content > div").not($("#videos")).hide();
	$(".vid-content > div").not($("#makingof")).hide();
	$("ul.menu > li").eq(1).css("background-color", "#FFF");
	$("ul.sub-menu > li").eq(0).css("background-color", "#FFF");
	
	//take out bottom border on last project listed 
	$("#websites .project:last").css("border-bottom", "none");
	$("#makingof .project:last").css("border-bottom", "none");
	$("#narrative .project:last").css("border-bottom", "none");
	
	//dim img in display on hover
	$("#display").hover(function(){
		$("#display img").css("opacity", "0.6");
	}, function() {
		$("#display img").css("opacity", "1");
	});
	
	//MENU FUNCTIONALITY
	$("ul.menu > li").each(function(index) { //function for each list item in .menu
  		$(this).click(function() { //when click
  		
  			$("#display").fadeOut();
  			
  			//determine what to show and hide
  			var toToggle = $(".content > div").eq(index); //div to be shown
			var visible = $(toToggle).siblings(":visible");	 //divs to hide
			visible = visible[0]; //only need to use first element in array to determine if undefined
			
			//UPDATE MENU CSS
			$(this).siblings().css("background-color", "#606060");

			if ($(toToggle).is(":visible")) {
				$(this).css("background-color", "#606060"); //turn off this button
			}
			else {
				$(this).css("background-color", "#FFFFFF"); //turn on 
			}
			//SLIDE CONTENT
			if (visible === undefined) { //nothing was showing, only need to toggle
				$(toToggle).slideToggle(500);  
			}
			
			else { //a sibling's display was on
				$(visible).slideUp(400, function() {   
					$(toToggle).slideToggle(600);  
				});
			}
			//SPECIAL CASE
			//for info: show little man logo.  need to work on this
			if (index === 2) {
				txt = "<img src=\"../img/logo/toma-white.png\" alt=\"toma logo.png\" />";
				
				$("#mediaspace").html(txt);
				$("#display h3, #display p").html("");
				$("#display").hide();
				$("#display").fadeIn(1800);
				}
		
        });
	});
	
	//SUBMENU FUNCTIONALTY, similar to menu but only switches from one to other 
	$("ul.sub-menu > li").each(function(index) { //set function for each list item in .menu
  		$(this).click(function() { //when click
  	
			//SET MENU BUTTONS
			$(this).css("background-color", "#FFFFFF");
			$(this).siblings().css("background-color", "#606060");
			
			//SHOW CORRESPONDING CONTENT
			$(".vid-content > div").eq(index).fadeIn();
			$(".vid-content > div").eq(index).siblings(":visible").hide();	

	   });
	});

	//show project img on hover
	$("#videos .project").hover(function() {
		var proj = $(this).children("h3:first").html(); //determine what we landed on
		var loc; //store file location of image
		//bit too specific here; quick customization
		if (proj === "Audition") {
			loc ="url(\"../img/posters/audition-tb.png \")";
		}
		else if (proj === "The Parting") {
			loc ="url(\"../img/posters/theParting-tb.png \")";
		}
		else if (proj === "NYFA" || proj === "Barcelona '99" || proj === "La Bomba") {
			loc ="url(\"../img/logo/toma-black-tb.png \")";
		}
		else { //best part of method just look for matching file in folder (for company logos)
			proj = proj.toLowerCase().split(" "); //edit text to match file name
			proj = proj[0]; //take only first word
			loc ="url(\"../img/logo/" + proj + ".png\")"; //locate file for background	
		}
		$(this).css("background-image", loc);}, function() { 
		$(this).css("background-image", "none"); //on mouse out	
	});	
	
});