$(document).ready(function()
{
	$('#banner').hover(function(e) {  // in jQuery 1.4 hover can accept a single fn ]
		$('#banner').cycle('toggle'); 
        var status = (e.type === "mouseenter") ? 'paused' : 'resumed'; 
        $('#status').text('slideshow ' + status);
    });
/*	$('#pauseButton').click(function() { 
   		$('#banner').cycle('pause');
	});
	$('#resumeButton').click(function() { 
   		$('#banner').cycle('resume');
	});*/
	$('#banner').after('<ul id="nav">')
		.cycle({ 
			pager:  '#nav',
			fx: 'scrollLeft',
			speed: 500,
			timeout: 7000,
			pagerAnchorBuilder: function(idx, slide)
			{
				return '<li><a href="#"><img src="images/nav.png" width="14" height="14" border="0" /></a></li>'; 
  		  	},
			updateActivePagerLink: function(pager, activeIndex)
			{
				$(pager).find('li:eq('+activeIndex+')').html('<a href="#"><img src="images/nav_active.png" width="14" height="14" border="0" /></a>').siblings().html('<a href="#"><img src="images/nav.png" width="14" height="14" border="0" /></a>');
			}
		});
	
	$.fn.preload = function()
	{
  	this.each(function()
		{
    	$('<img/>')[0].src = this;
    });
	}

	$(['/images/nav_active.png']).preload();
});