$(document).ready(function() {
	var feature = $('#hp-feature');
	feature.append(
		'<div id="slideshow-controls"><img id="slideshow-prev" id="left_off" name = "left_off" src="js1/left_off.gif" width="20" height="20" alt="Previous Image" title="Previous Image" border="0"/><img id="slideshow-play" id="play_off" name = "play_off" src="js1/play_off.gif" width="20" height="20" alt="Play" title="Play"  border="0"/><img id="slideshow-pause" id="pause_off" name = "pause_off" src="js1/pause_off.gif" width="20" height="20" alt="Pause" title="Pause"  border="0"/><img id="slideshow-next" id="right_off" name = "right_off" src="js1/right_off.gif" width="20" height="20" alt="Next Image" title="Next Image"  border="0"/></div>'
	);
	$('#slideshow-play').hide();
	$('#hp-feature-items').cycle({
		fx: 'fade',
		timeout: 6000,
		next: '#slideshow-next',
		prev: '#slideshow-prev',
		pager:   '#nav',
		pagerAnchorBuilder: pagerFactory,
		cleartype: '1'
	});
	
	$('#slideshow-pause').click(function() {
		$('#hp-feature-items').cycle('pause');
		$('#slideshow-play').toggle();
		$('#slideshow-pause').toggle();
	});	
	
	$('#slideshow-play').click(function() {
		$('#hp-feature-items').cycle('resume');
		$('#slideshow-pause').toggle();
		$('#slideshow-play').toggle();
	});
	
    function pagerFactory(idx, slide) {
        var s = idx > 35 ? ' style="display:none"' : '';
        return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
    };
});