Magento - Embed Jquery Image Rotator

A client wants to have a javascript Image Rotator in her site that will dynamically fetch and display all the images inside the specified folder ( so that she can add and remove them any time she wants).. So I opted to use Jquery Framework to do the job...

here's the code I placed in catalog/navigation/getImage.phtml

<link rel="stylesheet" href="<?php echo $this->getBaseUrl().'jshowoff.css' ?>" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getBaseUrl().'jquery.jshowoff.min.js' ?>"></script>

<?php
/* This code will dynamically fetch all the images inside the specified folder
 * and display it using jquery
 * youngstownph@gmail.com
 * Incramind 2010
 */
       

    $currentCategory = '';

    $currentCategory = Mage::registry('current_category');
    if(!empty($currentCategory))
    $currentCategory = Mage::registry('current_category')->getName();


switch ($currentCategory)
{

    case "Sjaals":

        $imagePath = "media/banner/Sjaals";
        break;

    case "Riemen":

        $imagePath = "media/banner/Riemen";
        break;

    default:
      
        $imagePath = "media/banner/default";
        break;

}

if ($dir = opendir($imagePath))

{
    $images = array();
    while (($file = readdir($dir))!== false)
            {

        if ($file != "." && $file != ".." && $file != "Thumbs.db")
                    {
                      
                            $images[] = $file;
                     
                    }
            }
    closedir($dir);
}

echo '<div id="slidingFeatures">';
foreach($images as $image) {
    echo '<div><img src="';
    echo $this->getBaseUrl().$imagePath."/".$image;
    echo '" alt="'.$image.'" /></div>';
}
echo '</div>';

?>

<script type="text/javascript">
        $(document).ready(function(){ $('#slidingFeatures').jshowoff({
                effect: 'slideLeft',
                controlText:{play:'Play',pause:'Pause',previous:'<',next:'>'},
                hoverPause: false
        }); });
</script>

If you want to display the rotator in the homepage...

{{block type="catalog/navigation" name="homepage.slider" template="catalog/navigation/getImage.phtml"}}

Add this code in the catalog.xml if you want the rotator to appear in the catalog page..

<block type="catalog/category_view" name="catalog.slider1" as="slider1" template="catalog/navigation/getImage.phtml" />

Don't forget to create the appropriate folders in the media/banner...
Hope this helps! Godbless!