[jQuery] News ticker with categories

[jbeginner]

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.



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