var slidingOpen = false;
var openWidth = null;
var closedWidth = null;

document.observe('dom:loaded', function() {
	var interactive = $('multipanel');
	interactive.addClassName('js');
	
	$('panel-jumplinks').remove();
	
	openWidth = '690';
	if (interactive.hasClassName('safety')) {
		closedWidth = '141';
	} else if (interactive.hasClassName('hotspots')) {
		closedWidth = '158';
	}
	
	interactive.select('div.panel-holder h2').each(function(elm) {
		var h3 = new Element('h3');
		h3.innerHTML = elm.innerHTML;
		elm.next('div.panel-content').insert({ 'top': h3 });
		
		var a = new Element('a', {
			'href': '#',
			'class': 'closed',
			'sliding': 'false'
		});
		a.innerHTML = elm.innerHTML + '<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>';
		a.observe('click', handleClick);
		elm.update(a);
	});
	
	interactive.select('div.panel-holder div.panel-content').each(function(elm) {
		var div = new Element('div', {
			'style': 'overflow:hidden; zoom:1;'
		});
		elm.childElements().each(function(el) {
			div.insert(el);
		});
		elm.update(div);
		elm.hide();
	});
	
	interactive.select('div.panel-holder div.panel-content a.back').each(function(elm) {
		elm.observe('click', handleClick);
	});
});

function handleClick(e)
{
	e.stop();
	var link = e.element();
	
	var openPanelLinks = $$('div.panel-holder h2 a.open');
	if (openPanelLinks.length > 0) {
		openPanelLinks.each(function(elm) {
			// if a different panel link has been clicked
			if (link.up('h2') && link != elm) {
				togglePanel(elm, true);
			} else {
				togglePanel(elm);
			}
		});
		setTimeout(function() {
			togglePanel(link);
		}, 500);
	}
	else {
		togglePanel(link);	
	}
}

function togglePanel(link, noMainImage)
{	
	var h2, panel;
	if (link.hasClassName('back')) {
		panel = link.up('div.panel-content');
		h2 = panel.previous('h2');
		link = h2.down('a');
	} else {
		h2 = link.up('h2');
		panel = h2.next('div.panel-content');
	}
	
	if (panel.visible()) {
		if (link.getAttribute('sliding') == 'false') {
			link.setAttribute('sliding', 'true');
			panel.slideUp({
				duration: 0.5,
				afterFinish: function() {
					if (!noMainImage) {
						$('mainimage').appear();
					}
					new Effect.Morph(link, {
						style: 'width:' + closedWidth + 'px; background-color:#c55191;',
						duration: 0.5,
						afterFinish: function() {
							link.setAttribute('sliding', 'false');
							link.removeClassName('open');
							link.addClassName('closed');
						}
					});
				}
			});
		}
	} else {
		if (!slidingOpen && link.getAttribute('sliding') == 'false') {
			slidingOpen = true;
			link.setAttribute('sliding', 'true');
			link.removeClassName('closed');
			link.addClassName('open');
			$('mainimage').fade();
			new Effect.Morph(link, {
				style: 'width:' + openWidth + 'px; background-color:#ad98c0;',
				duration: 0.5,
				afterFinish: function() {
					panel.slideDown({
						duration: 0.5,
						afterFinish: function() {
							slidingOpen = false;
							link.setAttribute('sliding', 'false');
						}
					});	
				}
			});
		}
	}
}