$(document).ready(function() {
	$(document).pngFix();
	$('#leftPaneScroll').jScrollPane();
});

$(function()
{
	//$('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
	//$('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
	//$('#pane3').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
	var $pane1 = $('#pane1');
	$pane1.jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16, animateTo:true});
	$('a.scroll-to-element-demo').bind(
		'click',
		function()
		{
			var targetElementSelectorString = $(this).attr('rel');
			$pane1[0].scrollTo(targetElementSelectorString);
			return false;
		}
	);
	var $pane2 = $('#pane2');
	$pane2.jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16, animateTo:true});
	$('a.scroll-to-element-demo').bind(
		'click',
		function()
		{
			var targetElementSelectorString = $(this).attr('rel');
			$pane2[0].scrollTo(targetElementSelectorString);
			return false;
		}
	);
	var $pane3 = $('#pane3');
	$pane3.jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16, animateTo:true});
	$('a.scroll-to-element-demo').bind(
		'click',
		function()
		{
			var targetElementSelectorString = $(this).attr('rel');
			$pane3[0].scrollTo(targetElementSelectorString);
			return false;
		}
	);

});