// Copyright 2011 to Jenny Weightman (C) All Rights Reserved

// constants (these mostly correspond to our html/image file naming conventions)
var _menuItemExt = '.png';
var _menuItemPrefix = 'menu_';
var _menuItemHighlight = '_over';
var _menuItemSelector = '.menuItem';
var _menuItemDefault = 'index';
var _pageExt = '.html';
var _prettyPhotoTheme = "dark_rounded"; // other options: "dark_square","light_square","dark_rounded","light_rounded"

// portfolio gallery categories & pictures 
var _portfolio_baseFolder = "images/portfolio/";
var _portfolio_thumbPrefix = "thumb_";
var _portfolio_galleries = 
{
	"char_gallery" : 
		[
			["des1.png", "Girl at the bus stop", ""],
			["des3.png", "Devil guy", ""], 
			["des5.png", "Moose", ""], 
			["des16.png", "Lester the Pig", ""], 
			["des17.png", "Lester the Pig", ""], 
			["des18.png", "Lester the Pig", ""], 
			["des8.png", "Lion and the Hunter", ""], 
			["des6.png", "Egyptian Queen", ""], 
			["des9.png", "Frog Prince", ""],
			["des2.png", "Grannie", ""], 
			["des4.png", "Cupid", ""],
			["des21.png", "Hippie Dude", ""],
			["des7.png", "The Boss", ""],
			["des19.png", "Green Monster", ""],
			["des20.png", "The Fat Lady Sings", ""],
			["des10.png", "Alley Cat", "Character designs for 'Edgar and Ellen' TV Series"], 
			["des11.png", "Mexican Bandits", "Character designs for 'Edgar and Ellen' TV Series"],
			["des12.png", "Banana Alien and Paperclip Robot", "Based on script. Character designs for 'Edgar and Ellen' TV Series"],
			["des13.png", "Ballerina Bear", "Character designs for 'Edgar and Ellen' TV Series"],
			["des14.png", "Carnivorous Plants", "Character designs for 'Edgar and Ellen' TV Series"],
			["des15.png", "Circus Ringmaster", "Character designs for 'Edgar and Ellen' TV Series"],
			["des22.png", "Big Bad Wolf", "Concept design for Little Red Riding Hood animation"],
			["des23.png", "Little Red Riding Hood", "Concept design for Little Red Riding Hood animation"], 
		],
		
	"story_gallery" : 
		[
			["board1a.png", "Dog vs Fire hydrant", "Part 1. Animation can be seen in demo reel"], 
			["board1b.png", "Dog vs Fire hydrant", "Part 2. Animation can be seen in demo reel"], 
			["board1c.png", "Dog vs Fire hydrant", "Part 3. Animation can be seen in demo reel"], 
			["board2a.png", "Ninja vs Ninja", "Part 1"], 
			["board2b.png", "Ninja vs Ninja", "Part 2"], 
			["board2c.png", "Ninja vs Ninja", "Part 3"], 
			["board3a.png", "Woman vs Pants", "Parts 1"], 
			["board3b.png", "Woman vs Pants", "Parts 2"],		
			["board3c.png", "Woman vs Pants", "Parts 3"],	

		],
	
	"bgs_gallery" : 
		[
			["layout1.png", "Mad Scientist Lab", ""],
			["layout3.png", "Naples", ""], 
			["layout4.png", "Tokyo", ""]
		],
		
	"life_gallery" :
		[
			["life1.png", "Life Drawing", ""], 
			["life2.png", "Life Drawing", ""], 
			["life3.png", "Life Drawing", ""], 
			["life4.png", "Life Drawing", ""], 
			["life5.png", "Life Drawing", ""], 
			["life6.png", "Life Drawing", ""],
			["life7.png", "Life Drawing", ""], 
			["life8.png", "Life Drawing", ""], 
			["life9.png", "Life Drawing", ""], 
			["life10.png", "Life Drawing", ""], 
		],
		
};


// called to stuff <li> & <img> objects into the appropriate gallery (using the tables above)
function loadPortfolio()
{
	for (var galleryID in _portfolio_galleries)
	{
		var gallery = _portfolio_galleries[galleryID];
				
		$.each(gallery,  function( intIndex, portfolioPic )
			{
				if (portfolioPic == null || typeof(portfolioPic) == 'undefined')
				{
					return;
				}
				
				$("#" + galleryID).append('<li><a onClick="javascript:_gaq.push([\'_trackEvent\', \'Portfolio\', \'View\', \'' + portfolioPic[0] + '\']);" href="' + _portfolio_baseFolder + portfolioPic[0] + '" rel="prettyPhoto[' + galleryID + ']" title="' + portfolioPic[2] + '"><img border="0" src="' + _portfolio_baseFolder +  _portfolio_thumbPrefix + portfolioPic[0] + '" alt="' + portfolioPic[1] + '" /></a></li>');
			});
	}
}


// this is called by each page after it loads
function loadPage()
{
	// figure out what page we are on (& therefore which menu button is considered 'active')
	var activeMenuIcon = findActiveMenuItem();

	// highlight the active menu icon
	doHighlight(activeMenuIcon, true);
	
	// make it so that mouse hovering & clicking actually do stuff (for all the other menu icons)
	$(_menuItemSelector).each( function() {  
			if (this != activeMenuIcon)
			{
				$(this).mouseover( function() { doHighlight(this, true); } );	
				$(this).mouseout( function() { doHighlight(this, false); } );
				$(this).click( function() { document.location.href = getMenuName(this) + _pageExt; } );
			}
		});
	
	// special stuff for portfolio pages
	if ($(".gallery").length > 0)
	{
		// we have a gallery present! 
		
		// load up all the portfolio images from the tables above into the page itself
		loadPortfolio();
		
		// make it pretty :)
		$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:_prettyPhotoTheme});
	}
}

// takes care of highlighting / un-highlighting menu items (imageElement is assumed to be an <img>)
function doHighlight(imageElement, bHighlight)
{
	if (imageElement == null || imageElement.src == null) 
		return;
		
	if (bHighlight)
	{
		// this check makes sure it is not already highlighted...
		if (imageElement.src.indexOf(_menuItemHighlight + _menuItemExt) < 0)	
		{
			imageElement.src = imageElement.src.replace(_menuItemExt, _menuItemHighlight + _menuItemExt);
		}
	}
	else
	{
		imageElement.src = imageElement.src.replace(_menuItemHighlight, "");
	}
}

// takes a url and returns the filename, without the preceding path (i.e. no folders)
function trimFolders(path)
{
	if (path == null)
		return "";
		
	var nPrefix = path.lastIndexOf("/");
	if (nPrefix >= 0)
	{
		path = path.substr(nPrefix+1);
	}
	
	nPrefix = path.lastIndexOf("\\");
	if (nPrefix >= 0)
	{
		path = path.substr(nPrefix+1);
	}
	
	return path;	
}

// looks at the current URL, and returns the menu item (assumed to be an <img>) which corresponds to it
function findActiveMenuItem()
{
	// figure out the logical name of the page we are on
	var activeMenuName = trimFolders(document.location.pathname).replace(_pageExt,"");
	var activeMenuItem = null;
	var defaultMenuItem = null;
	
	// find the menu item corresponding to the current page
	$(_menuItemSelector).each( function() { 
				var thisMenuName = getMenuName(this);
				
				if (thisMenuName.indexOf(activeMenuName) >= 0) 
					activeMenuItem = this; 
					
				if (thisMenuName.indexOf(_menuItemDefault) >= 0)
					defaultMenuItem = this;
			});
	
	if (activeMenuItem == null)
	{
		// we are on an unexpected page (e.g. "/") - use the default (home)
		return defaultMenuItem;
	}
	
	return activeMenuItem;
}

// takes a look at an <img> and returns the 'friendly' menu name it corresponds to 
// (e.g. image with src '/images/layout/menu_contact.gif' becomes 'contact')
function getMenuName(img)
{
	// take out the image's extension, prefix, suffice
	var menuName = img.src.replace(_menuItemExt,"").replace(_menuItemPrefix,"").replace(_menuItemHighlight, "");
	
	// finally, trim out any folders
	return trimFolders(menuName);
}