$(function()
			{
				// this initialises the demo scollpanes on the page.
				$('#pane1').jScrollPane({scrollbarWidth:5, scrollbarMargin:5, animateTo:true});
				$('#pane2').jScrollPane({showArrows:true});
				$('#pane3').jScrollPane({scrollbarWidth:5, scrollbarMargin:5, animateTo:true});
                
                // this initialises the scrollBy and scrollTo links.
                $('.scroll-to-demo').bind(
                    'click',
                    function()
                    {
                        $('#pane1')[0].scrollTo(200);
                        return false;
                    }
                );
                
                $('.scroll-by-demo').bind(
                    'click',
                    function()
                    {
                        $('#pane2')[0].scrollBy(parseInt($(this).attr('rel')));
                        return false;
                    }
                );
                
                var $targets = $('#pane3-scroll-targets');
                var $pane3 = $('#pane3');
                var pane3top = parseInt($pane3.offset().top);
                $('#pane3 p').each(
                    function(index)
                    {
                        $targets.append(
                            $('<li></li>').append(
                                $('<a></a>')
                                    .attr({'href':'javascript:;', 'rel':$(this).offset().top})
                                    .text('Scroll to paragraph ' + (index+1))
                                    .bind(
                                        'click',
                                        function()
                                        {
                                            $pane3[0].scrollTo(parseInt($(this).attr('rel')) - pane3top);
                                        }
                                    )
                                )
                        );
                    }
                );
				
				
                
			});