function setDesktopImage(thumbnailDiv)
{
	document.body.style.backgroundImage = 'url(\'' 
		+ thumbnailDiv.getAttribute('title') + '\')';
}

function showDesktopImagePane()
{
	new Effect.Appear('desktopimagePane', {duration: 0.5, queue: 'end'});
}

function hideDesktopImagePane()
{
	new Effect.Fade('desktopimagePane', {duration: 0.5, queue: 'end'});
}

function showDesktopImageControl(control)
{
	new Effect.Appear(control, {duration: 0.5, queue: 'end'});
}

function hideDesktopImageControl(control)
{
	new Effect.Fade(control, {duration: 0.5, queue: 'end'});
}

function attachControlEvents()
{
	($A(document.getElementsByClassName('thumbnail'))).each(function (n)
	{
		var control = (document.getElementsByClassName('controls', n))[0];
		Event.observe(n, 'mousedown', function ()
			{
				showDesktopImageControl(control);
				window.setTimeout(hideDesktopImageControl, 1800, control);
			}, 
			false);
		/*
		Event.observe(control, 'mouseout', function ()
			{
				hideDesktopImageControl(control);
			}, 
			true);
		*/
		Event.observe(control, 'click', function ()
			{
				setDesktopImage(n);
				hideDesktopImageControl(control);
			},
			false);
	});
}

function initializeDesktopImageControls()
{
	var styling = function (e, mode)
	{
		switch (mode)
		{
			case 'mouseover':
				e.style.backgroundColor = 'white';
				e.style.color = 'black';
				e.style.borderColor = 'black';
				e.style.textDecoration = 'underline';
				break;
				
			case 'mousedown':
				e.style.borderColor = '#FC0';
				e.style.color = '#FC0';
				break;
				
			case 'mouseup':
				e.style.borderColor = 'white';
				e.style.color = 'white';
				break;
				
			case 'mouseout':
				e.style.color = 'white';
				e.style.borderColor = 'white';
				e.style.textDecoration = 'none';
				e.style.backgroundColor = '';
				break;
		}
	};
	
	var getEventHook = function (mode, styleFunc)
	{
		return function (e)
		{
			styleFunc(findAncestorWithClass(Event.element(e || window.event), 
				'controls'), mode);
		};
	};
		
	($A(document.getElementsByClassName('controls'))).each(function (n)
	{
		Event.observe(n, 'mouseover', getEventHook('mouseover', styling), false);
		Event.observe(n, 'mousedown', getEventHook('mousedown', styling), false);
		Event.observe(n, 'mouseup', getEventHook('mouseup', styling), false);
		Event.observe(n, 'mouseout', getEventHook('mouseout', styling), false);
	});
}