How do I incorporate jScrollPane into a Wordpress PHP header file?

Can anyone give me a hand? This is for a charity event and coding clearly isn't my day job. The site is www.gingertown.org/wp

I don't understand where to put this line:

$(function() {
$('.scroll-pane').jScrollPane();
});

I also have a feeling I'm not calling the js correctly. From digging into wordpress

I modified my file to look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&#124;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
</code></pre>

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_enqueue_script( 'sfhover', get_template_directory_uri() . '/js/sfhover.js' ); ?>
    <?php wp_head(); ?>

    <!-- the mousewheel plugin - optional to provide mousewheel support -->
    <script type="text/javascript" 
 src="script/jquery.mousewheel.js"></script>

    <!-- the jScrollPane script -->
    <script type="text/javascript" 
 src="script/jquery.jscrollpane.min.js"></script>



    </head>

Solution

You should put it after the jscrollpane plugin is included, here:

<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
  jQuery(function($) {         //since your site is calling jQuery.noConflict()
    $('.scroll-pane').jScrollPane();
  });
</script>
</head>