News ticker with categories

News ticker with categories

Hi, I'm a php developer and new to jquery. I've been pulling my hair for a good day in creating a news ticker with categories. There are two boxes, one scrolls up categories, and the other showing headlines in the categories. Sth similar to the ticker found here (it's a java applet though) http://appletlib.tripod.com/headline.html . The categories & headlines should freeze on mouse over, and user can click the up & down arrows to manually scroll thru categories.

Image

So far this is the code I come up with, using jquery:

<script src='jquery.js'></script>
<style>
#box1 {
   width:200px;
   height:25px;
   overflow:hidden;
   position:relative;
   border: 1px solid #000;
   float: left;
}
#box2 {
   margin-left: 20px;
   width:200px;
   height:25px;
   overflow:hidden;
   position:relative;
   border: 1px solid #000;
   float: left;
}
.cat {
   position:absolute;
   top:30px;
}
.headline {
    display: none;
}
.control {
   float: left;
}
.control span {
   cursor: pointer;
}
</style>

<script>
var currentCatId = 0;
var currentHeadlineId = 0;
var freeze = false;
var catCount = 0;

$('document').ready(function() {
   catCount = $('#cats span').size();
   
   $('#box1').hover(
      function() {
         freeze = true;
      }
      , function() {
         freeze = false;
         showHeadline();
      }
   );
   $('#box2').hover(
      function() {
         freeze = true;
      }
      , function() {
         freeze = false;
         showHeadline();
      }
   );   
   
   catDown();
});

function catDown() {
   currentHeadlineId = 0;
   var cat = $('<span class="cat">').html( $( '#cats span:eq(' + currentCatId + ')' ).html() );
   
   $('#box1 span').animate( {top: -20}, "slow", function() {
       $(this).remove();
        $(cat).appendTo('#box1').animate( {top: 2}, "slow", function() {
           showHeadline();
        });
    });
}

function showHeadline() {
   if( ! freeze ) {
      var headline = $('#headline_' + currentCatId + ' span:eq(' + currentHeadlineId + ')').html();
      if( headline ) {
         $('#box2 span').fadeOut( "slow", function() {
            $(this).remove();
            $('<span class="headline">').html( headline ).appendTo('#box2').fadeIn("slow", function() {
               currentHeadlineId++;
               showHeadline();
            });
            
         });
      } else {
         shiftCat();
         catDown();
      }
   }
}

function shiftCat() {
   currentCatId++;
   currentCatId = currentCatId % catCount;
}
</script>

<div class='control'>
   <span id='up'>up</span><br>
   <span id='down'>down</span>
</div>
<div id='box1'><span></span></div>
<div id='box2'><span></span></div>
<br clear='all'>

<div style='display:none'>
   <div id="cats">
      <span>News</span>
      <span>Pictures</span>
      <span>Blog</span>
   </div>
   
   <div id="headline_0">
      <span>News 1</span>
      <span>News 2</span>
      <span>News 3</span>
   </div>
   
   <div id="headline_1">
      <span>Pic 1</span>
      <span>Pic 2</span>
      <span>Pic 3</span>
   </div>
   
   <div id="headline_2">
      <span>Blog 1</span>
      <span>Blog 2</span>
   </div>
</div>


The "freeze on mouse over" is still very buggy, and I don't know how to implement the up/down button.

I would really appreciate if sb point out how I could improve the code and add the up/down control. Or if you know a news ticker script with similar features (whether using jquery or not), an url would be very helpful. I'm really stuck