scroller buttons duplicated

Question

Scroll plugin I am using keeps duplicating Previous and Next buttons. I dont understand why and I could not fix it. Any suggestions appreciated.

Codes

<style>
/* everything is constructed with a single background image */

/* root element for tabs */
#flowtabs {

    /* dimensions */
    width:760px;
    height:31px !important;
    margin:0 !important; 
    padding:0;  

    /* IE6 specific branch (prefixed with "_") */
    _margin-bottom:-2px;
}

/* single tab */
#flowtabs li { 
    float:left; 
    margin:0; 
    padding:0; 
    text-indent:0; 
    list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
    display:block;
    height: 31px;   
    width: 189px;   
    padding:0px;
    margin:0px;

    /* font decoration */
    color:#000;
    font-size:12px;
    line-height:33px;
    text-align:center;
    text-decoration:none;
}

/* adjust the background image position on each tab */
#flowtabs #t1           { background-position: 0 0; }
#flowtabs #t2           { background-position: -189px 0; }
#flowtabs #t3           { background-position: -378px 0; }
#flowtabs #t4           { background-position: -567px 0; width:192px;}

/* mouseover state */
#flowtabs a:hover       { color:#fff;    }
#flowtabs #t1:hover     { background-position:      0 -33px; }
#flowtabs #t2:hover     { background-position: -189px -33px; }
#flowtabs #t3:hover     { background-position: -378px -33px; }
#flowtabs #t4:hover     { background-position: -567px -33px; }

/* currently selected tabs */
#flowtabs a.current     { cursor:default; color:#fff; line-height:34px; }
#flowtabs #t1.current { background-position:      0 -66px; }
#flowtabs #t2.current { background-position: -189px -66px; }
#flowtabs #t3.current { background-position: -378px -66px; }
#flowtabs #t4.current { background-position: -567px -66px; }


/* panes */
#flowpanes {
    width:100%;
    height:350px;   
}


/* single pane */
#flowpanes div {
    display:none;   
}


#flowpanes div img {
    border: 0;      
}

/* override the root element to enable scrolling */
#flowpanes {
    position:relative;
    overflow:hidden;
    clear:both;
}

/* override single pane */
#flowpanes div {
    float:left;
    display:block;
}

/* our additional wrapper element for the items */
#flowpanes .items {
    width:20000em;
    position:absolute;
    clear:both;
    margin:0;
    padding:0;
}
.prevnext { width:100%; height:40px; top:250px; position:absolute; z-index:100; }
.prevnext .bgprev { float:left; width:80px; height:50px; background:transparent url(http://www.pangeaadvisors.org/IDC/images/trans_black_50_bg.png) repeat scroll 0 0; }
.prevnext .bgnext { float:right; width:80px; height:50px; background:transparent url(http://www.pangeaadvisors.org/IDC/images/trans_black_50_bg.png) repeat scroll 0 0; }
.prevnext a { float:left; height:26px; width:26px;display:block; }
.prevnext a.prev { float:left; width:80px; height:50px; background:url(http://www.pangeaadvisors.org/IDC/images/btn_left.png) bottom; }
.prevnext a.next { float:right; width:80px; height:50px; background:url(http://www.pangeaadvisors.org/IDC/images/btn_right.png) bottom; }
.prevnext a.prev:hover, a.next:hover { background-position:top; }

</style>


<!-- panes -->
<div id="flowpanes">


    <!-- wrapper for scrollable items -->

    <div class="items">

        <div>
            <a href="?Section=products&SubSection=products&CATEGORYID=2"><img src="/html/media/images/7C9J3LO.jpg" /></a>
        </div>

        <div>
            <a href="?Section=products&SubSection=products&CATEGORYID=2"><img src="/html/media/images/7C9J3LO.jpg" /></a>
        </div>

    </div>

</div>

<div class="prevnext">
    <div class="bgprev">
        <a href="#" alt="Previous" class="prev"/>
    </div>  
    <div class="bgnext">
        <a href="#" alt="Next" class="next"/>
    </div>
</div>

<!-- activate tabs with JavaScript -->
<script>


// wait until document is fully scriptable
$(document).ready(function() {

    // select #flowplanes and make it scrollable. use circular and navigator plugins
    $("#flowpanes").scrollable({size: 1}).circular().mousewheel(400).navigator({

        // select #flowtabs to be used as navigator
        navi: "#flowtabs",

        // select A tags inside the navigator to work as items (not direct children)
        naviItem: 'a',

        // assign "current" class name for the active A tag inside navigator
        activeClass: 'current'

    });
});
</script>