Sliding Panels: On last panel - go to another html?

Question

Hey everyone!
My first website is coming along nicely. Though my Creative Director has asked for a nice tweak to the site and I've hit a brick wall.
I've got a few product pages that's split into different categories - 8 html pages.
On each page I have the following 'back' and 'next' buttons to scroll through each product.
<div id="back"><a href="#" onclick="sp1.showPreviousPanel(); return false;"><img src="images/back.gif" width="107" height="42" alt="back" /></a></div>
<div id="next"><a href="#" onclick="sp1.showNextPanel(); return false;"><img src="images/next.gif" width="107" height="42" alt="next" /></a></div>
Is it possible, on the last panel/product, if you click 'next' again it loads up a new html page?
Maybe even the same for the 'back' button. So in theory you could scroll through every single product that's across 8 html pages.
I could easily specify which back and next page to load for each html page.
My site. (the first product page)
At the moment, theres a drop menu to navigate throughout.
Any help or ideas would be greatly appreciated!
Cheers,
Cam.

Answer 1

Do this:
<script>
var showNextPanel = function()
     var index = sp1.getContentPanelIndex(sp1.currentPanel) + 1;
     if( index >= sp1.getContentPanels().length ){
          window.location = 'newurl.html';
     return sp1.showPanel( index );
</script>
<a href="#" onclick="showNextPanel(); return false;">