var $curr_panel = null;

var pan_small = [162, 143, 143, 166];
var pan_large = [448, 429, 429, 452];


function slide_panel($pan, instant) {
	var left, id;
	
	if ($curr_panel != null && $curr_panel.data('idx') == $pan.data('idx')) return;
	
	// Stop everything!
	$('#fancy-bar *').stop(true, true);
	
	if ($curr_panel != null) {
		$('#fancy-bar div.fancy-bar-panel').each(function() {
			$(this).css('width', pan_small[$(this).data('idx')]);
		});
		$curr_panel.css('width', pan_large[$curr_panel.data('idx')]);
	}
	
	// Fade out links, image
	$('#fancy-bar div.fancy-bar-panel ul').fadeOut(instant ? 0 : 100);
	$('#fancy-bar div.fancy-bar-panel div.fancy-img').animate({width: 0}, instant ? 0 : 250);
	
	// Once that is done...
	$pan.find('div.fancy-img').queue(function() {
		
		var anim = { width: pan_large[$pan.data('idx')] };
		var props = { 'duration' : instant ? 0 : 300, 'easing' : 'linear' };
		
		// Logic to resize the old panel in sync with the new panel
		if ($curr_panel != null) {
			var new_dist = pan_large[$pan.data('idx')] - pan_small[$pan.data('idx')];
			var old_dist = pan_large[$curr_panel.data('idx')] - pan_small[$curr_panel.data('idx')];
			var old_width = $curr_panel.width();
			
			props.step = function(now) {
				var this_dist = now - pan_small[$pan.data('idx')];
				var new_old_width = old_width - (old_dist / new_dist * this_dist);
				
				$curr_panel.css('width', new_old_width);
			};
		}
		
		// Grow new
		$pan.animate(anim, props);
		
		// When that is done, fade in the image and the list
		$pan.queue(function() {
			$curr_panel = $pan;
			$pan.find('div.fancy-img').animate({width: 250}, instant ? 0 : 250);
			$pan.find('ul').fadeIn(instant ? 0 : 250);
		});
		
		$(this).dequeue();
	});
}

$(document).ready(function() {
	// Set up panels
	$('#fancy-bar div.fancy-bar-panel ul').hide();
	$('#fancy-bar div.fancy-bar-panel div.fancy-img').css('width', 0);
	
	// Set up hover events
	$('#fancy-bar div.fancy-bar-panel').hover(function() {
		slide_panel($(this), 0);
	});
	
	var idx = 0;
	$('#fancy-bar div.fancy-bar-panel').each(function() {
		$(this).data('idx', idx);
		$(this).css('width', pan_small[idx]);
		idx++;
	});
	
	
	// Visit LTM/Log in LLL@Home hovers
	$('#visit img, #login img').hover(function() {
		$(this).attr('src', $(this).attr('src').replace('.png', '_over.png'));
	}, function() {
		$(this).attr('src', $(this).attr('src').replace('_over.png', '.png'));
	});
});