// JavaScript Document
var moved = false;
var current_monitor = undefined;
var current_sub_content_link = undefined;

function init() {
	hideFeatures();
	switchOnAllMonitors();

	$$('a[id^=item-]')
		.invoke('observe', 'click', hideLists)
		.invoke('observe', 'click', animateHolder)
		.invoke('observe', 'click', animateMonitors)
		.invoke('observe', 'click', updateContent);
}

function hideLists(e) {
	
	var element = Event.element(e).up('a');	
	$$('.item-list p').invoke('fade', {duration:0.5});

	Event.stop(e);
	return false;
}

function animateHolder(e) {
	if(!moved) {
		new Effect.Move($('image_holder'), {x:0, y:-170, duration:0.4, queue: 'end'});
	}
	
	moved = true;
}

function animateMonitors(e) {
	
	var element = Event.element(e);

	if(element.tagName !== 'A')
		element = element.up('a');
	
	// turn on the currently turned on monitor
	if(current_monitor != undefined)
	{
		switchOffMonitor(current_monitor);
	}
	// if it's the first time, turn off all monitors but the one clicked
	else
	{
		$$('img[id^=monitor-]').each(function(elem) {
											 
			if(element.id.gsub('item-','') != elem.id.gsub('monitor-',''))
			{
				switchOffMonitor(elem);
			}
		});
	}
	
	// turn on the monitor clicked
	current_monitor = $('monitor-' + element.id.gsub('item-',''));
	switchOnMonitor(current_monitor);
}
 
function switchOnAllMonitors()
{
	$$('img[id^=monitor-]').each(function(elem) {
		switchOnMonitor(elem);
	});
}

function switchOnMonitor(elem)
{
	elem.appear({duration:0.2, queue: 'end'});
}

function switchOffMonitor(elem)
{
	elem.fade({duration:0.2, queue: 'end'});
}

function updateContent(e) {
	var element = Event.element(e);

	if(element.tagName !== 'A')
		element = element.up('a');
	
	
	new Ajax.Updater('page-content', element.href, {
		onSuccess: function() { 
			$('page-content').appear({duration:0.5, queue: 'end'}); 
		},
		onCreate: function() {
			$('page-content').hide();
		}
	});

	Event.stop(e);
	return false;
}

function updateSubContent(e) {

	var element = $(e);

	hideSubContent();
	
	// unbold current link
	$$('a#[id^=content-item-][class~=selected]').invoke('removeClassName','selected');
	// bold new link
	element.addClassName('selected');
	// show link content
	$('sub-' + element.id).show();
}

function hideSubContent() {
	$$('div[id^=sub-content-item-]').invoke('hide');
}


function hideFeatures()
{
	$$('div[id^=features-]').invoke('hide');
}

Event.observe(document, 'dom:loaded', init, false);