// JavaScript Document

var carea;

var setupChange = function (a, color) {
	
	var running_width = 0;
	
	// First work out how far to move the marker
	$('information_tabs').select("li").each(function(li) {
		if (li.id == 'li_handle_'+a)
			throw $break;
			
		running_width += li.getWidth();
	});
	
	var this_width = $('li_handle_'+a).getWidth();
	
	var newpos = running_width + ((this_width/2)-($('infotab_marker').getWidth()/2));
		
	Event.observe('handle_'+a, 'click', changeArea.bind(this, a, color, newpos));
	
}

var changeArea = function(a, color, newpos) {
		
	if (a == carea) return;
	
	if ($('area_'+a) != undefined) {
		
		$('handle_'+carea).parentNode.removeClassName('on');
		$('handle_'+a).parentNode.addClassName('on');
		
		$('handle_'+carea).setStyle({ color: '#FFFFFF' });
		$('handle_'+a).setStyle({ color: color });
		
		new Effect.Morph('infotab_marker', {
			style: "left: "+newpos+"px;"								 
		});
		
		new Effect.BlindUp('area_'+carea, { duration: 0.5 });
		new Effect.Fade('area_'+carea, {
			duration: 0.5,
			afterFinish: function() {
				
				new Effect.BlindDown('area_'+a, { duration: 1 });
				new Effect.Appear('area_'+a, { duration:2 });
				
			}
		});
		
		carea = a;
	}
}