$(document).ready(function() {
	var feature = $('#hp-feature');
	feature.append(
		'<div id="slideshow-controls">'
		+ '	<img id="slideshow-prev" src="/images/button_slideshow_left.gif" width="20" height="20" alt="Previous Slide" title="Previous Slide" />'
		+ '	<img id="slideshow-play" src="/images/button_slideshow_play.gif" width="20" height="20" alt="Previous Slide" title="Previous Slide" />'
		+ '	<img id="slideshow-pause" src="/images/button_slideshow_pause.gif" width="20" height="20" alt="Previous Slide" title="Previous Slide" />'
		+ '	<img id="slideshow-next" src="/images/button_slideshow_right.gif" width="20" height="20" alt="Next Slide" title="Next Slide" />'
		+ '</div>'
	);
	$('#slideshow-play').hide();
	$('#hp-feature-items').cycle({
		fx: 'fade',
		timeout: 6000,
		next: '#slideshow-next',
		prev: '#slideshow-prev',
		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();
	});
});