jQuery(function( $ ){
	$('#brands li a').click(function() {
		$('#brands li a').removeClass('active');
		$('#models li a').removeClass('active');
		$(this).addClass('active');
		reset_o();
	});
	
	$('#models li a').click(function() {
		$('#models li a').removeClass('active');
		$(this).addClass('active');
	});
	
	function reset_o(){//before each animation, reset to (0,0), skip this.
		var $paneOptions = $('#products');
		$paneOptions.stop().stop();
		$paneOptions[0].scrollLeft = $paneOptions[0].scrollTop = 0;
	};

	$('h1 a').click(function() {
		$('#brands li a').removeClass('active');
		$('#brands li:first a').addClass('active');
	});

	$('#brands a').localScroll(
		{
			target:'#models',
			axis:'x',
			queue:true,
			speed:400,
			easing:'swing',
			onBefore:function( e, el, $target ){
				$target.queue('fx',[]).stop();//to avoid queueing animations
				$('#models ul').removeClass('active'); //to avoid firefox scramble bug
			},
			onAfter:function( e, el, $target ){
				$('#models ul').addClass('active');
			},
			persistent:true,
			cancel:true
		}
	);

	$('#models a').localScroll(
		{
			target:'#products',
			axis:'x',
			queue:true,
			speed:400,
			easing:'swing',
			onBefore:function( e, el, $target ){
				$target.queue('fx',[]).stop();//to avoid queueing animations
			},
			persistent:true,
			cancel:true
		}
	);
});