// interface.js
// -------------------------------------------------------------------------------------------------
// Javascript for Paul Richardson's interface
// -------------------------------------------------------------------------------------------------

var menu = new Object; // Contains all menu related functions

menu.init = function()
{
	var menu_a = $ES('a', 'menu'); // Get all the anchor tags within 'menu'
	var i = 0;
	menu_a.each(
		function(a)
		{
			$E('img', a).setOpacity(0.5);
			a.set({
					id: 'm' + i,
					events: {
						click: function() { menu.menuclick(this); },
						mouseover: function() { menu.menuover(this); },
						mouseout: function() { menu.menuout(this);   }
					}
				 });
			i++;
		}
	);
}

menu.menuover = function(el)
{
	// Fade in image
	if (el.hasClass('selected')) return;
	if ($defined(menu[el.id]))
	{
		menu[el.id].fx.stop();
	}
	else
	{	
		menu[el.id] = $E('img', el);
	}
	menu[el.id].fx = new Fx.Style( menu[el.id], 'opacity', { duration: 500 } ).start(0.5, 1);
}

menu.menuout = function(el)
{
 	// Fade image out
	if (el.hasClass('selected')) return;
	menu[el.id].fx.stop();
	menu[el.id].fx = new Fx.Style( menu[el.id], 'opacity', { duration: 500 } ).start(0.5);
}

menu.menuclick = function(el)
{
	var mi = $(el.id);
	mi.blur();

	// Mark clicked item as selected and unmark siblings
	var siblings = $ES('a', mi.parentNode.parentNode);
	siblings.each(
		function(a)
		{
			if (a.hasClass('selected'))
			{
				a.removeClass('selected');
				menu.menuout(a);
			}
		}
	)
	mi.addClass('selected');
	
	// Now show the next submenu, and hide others on the same level
	var siblings = $ES('ul', mi.parentNode.parentNode);
	siblings.each( function(ul)
		{
			ul.removeClass('activesub');
		}
	)
	var submenu = $E('ul', mi.parentNode);
	if (submenu) 
	{
		submenu.setOpacity(0);
		submenu.addClass('activesub');
		submenu.fx = new Fx.Style( submenu, 'opacity', { duration: 250 } ).start(1);
	}
}

// -------------------------------------------------------------------------------------------------

var home = new Object;

home.init = function()
{
	home.img = new Asset.image('/images/portfolio/home/' + hp_pic_filename, {id: hp_pic_id, title: ''});
	home.img.onload = home.showimg;
}

home.showimg = function()
{
	home.img.setOpacity(0);
	$('viewport').adopt(home.img);
	var fade = new Fx.Style( home.img, 'opacity', { duration: 1500 } ).start(0, 1);
}

// -------------------------------------------------------------------------------------------------

var portfolio = new Object; // Contains all portfolio related functions

portfolio.init = function()
{
	portfolio.imgdiv = $('p_image');

	portfolio.intro = intro;
	if (portfolio.intro) portfolio.showintro();

	portfolio.imgindex = -1;
	portfolio.firstfade = false;

	portfolio.img = new Object; // Holds homepage images

	for (var i=0; i<picdata.length; i++) 
	{
		portfolio.img[i] 			= new Object; // Holds homepage images
		portfolio.img[i].img 		= new Asset.image(path + picdata[i].filename, {id: picdata[i].id, title: ''});
		portfolio.img[i].caption 	= $defined(picdata[i].caption) ? picdata[i].caption : '';
		portfolio.img[i].loaded		= false;
		if (i == 0) portfolio.img[i].img.onload = function()
			{
				portfolio.img[0].img.setOpacity(0);
				if (!portfolio.intro) portfolio.showimg(0);
			};
	}
}

portfolio.showintro = function(i)
{
	var html = '<p class="intro">' + portfolio.intro + '<br \/><br \/><br \/><br \/><a href="#" onclick="portfolio.showimg(0); return false;">Show Project<\/a><\/p>';
	portfolio.imgdiv.innerHTML = html;
	$('fwd_back').setStyle('display', 'none');
}

portfolio.showimg = function(i)
{
	portfolio.imgdiv.innerHTML = '';
	portfolio.img[i].img.injectInside(portfolio.imgdiv);
	portfolio.imgindex = i;
		
	if (!portfolio.firstfade)
	{
		var fade = new Fx.Style( $E('img', portfolio.imgdiv), 'opacity', { duration: 1500 } ).start(1); // Fade in first image in set
		$('fwd_back').setStyle('display', 'block');
		portfolio.firstfade = true;
	}

	
	// Display caption if present
	if (portfolio.img[i].caption)
	{
		var capt = new Element('p');
		capt.setText(portfolio.img[i].caption);
		capt.injectInside(portfolio.imgdiv);
	}
	
	$('count').innerHTML = (i + 1) + ' of ' + picdata.length;
}

portfolio.flip = function(offset)
{
	var i = portfolio.imgindex + offset;
	if (i < 0 || i > picdata.length - 1) return;
	portfolio.showimg(i);
}

// -------------------------------------------------------------------------------------------------

var emailglow = new Object;

emailglow.init = function()
{
	$E('img', $('email')).setOpacity(0.5);
	$('email').set({
			events: {
				mouseover: function() { emailglow.emailglowover(this); },
				mouseout: function()  { emailglow.emailglowout(this);  }
			}
		});
}

emailglow.emailglowover = function(el)
{
	// Fade in image
	if ($defined(emailglow[el.id]))
	{
		emailglow[el.id].fx.stop();
	}
	else
	{	
		emailglow[el.id] = $E('img', el);
	}
	emailglow[el.id].fx = new Fx.Style( emailglow[el.id], 'opacity',	{ duration: 500	} ).start(0.5, 1);
}

emailglow.emailglowout = function(el)
{
 	// Fade image out
	emailglow[el.id].fx.stop();
	emailglow[el.id].fx = new Fx.Style(
		emailglow[el.id],
		'opacity',
		{
			duration: 500
		}
	).start(0.5);
}

// -------------------------------------------------------------------------------------------------

// Run page specific functions
switch (page)
{
	case 'home':
		window.addEvent('domready', menu.init);
		window.addEvent('domready', home.init);
		break;

	case 'people':
	case 'places':
	case 'projects_north':
	case 'projects_eastern_block':
	case 'projects_hurry':
		
		window.addEvent('domready', portfolio.init);
		break;
		
	case 'phone':
		window.addEvent('domready', emailglow.init);
		break;
}