$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
		
	var img = 'circle' + currSlideIndex;
	selected(img);
}; 

$(function() {

	$('#slideshow').after('<div id="nav" align="center">').cycle({

		fx:     'scrollLeft',
		speed:  '1000',
		timeout: 8000,
		pager:  '#nav',
		before: function() { if (window.console) console.log(this.src); },
		pagerAnchorBuilder: function(index, el) {
			return '<a href="#" onclick="selected(\'circle'+index+'\')" onmouseover="hover(\'circle'+index+'\')" onmouseout="unselected(\'circle'+index+'\')"><img src="images/unselected_circle.png" alt="marquee navi" name="circle'+index+'"/></a>';
		}

	});

});

function selected(img)
{
	
	document[img].src = "images/selected_circle.png";
	
	var i = 0;
	for (i=0; i<=4; i++)
	{
		var name = 'circle' + i;

		if ( img != name )
			document[name].src = "images/unselected_circle.png";	
	}
}

function hover(img)
{
	source = document[img].src;
	is_selected = source.match("/images/selected_circle");
	
	if ( is_selected == null)
		document[img].src = "images/hover_circle.png";
}

function unselected(img)
{
	source = document[img].src;
	is_selected = source.match("/images/selected_circle");
	
	if ( is_selected == null)
		document[img].src = "images/unselected_circle.png";
}