function startGalleryCycle(){
	$ss = $("#slideshow");
	$ss.cycle(
	{
		fx: "fade",
		timeout: 6000,
		speed: 500,
		next: $(".photo-controls .next a"),
		prev: $(".photo-controls .back a"),
		before: function(currSlideElement, nextSlideElement, options, forwardFlag){
			//if(options)
			$("div.gallery-thumbs a").eq(options.currSlide).children('canvas').fadeTo("fast","1");
		},
		after: function(currSlideElement, nextSlideElement, options, forwardFlag){
			$("div.gallery-thumbs a").eq(options.currSlide).children('canvas').fadeTo("fast",".5");
			$("div.gallery-thumbs a.active").removeClass("active");
			$("div.gallery-thumbs a").eq(options.currSlide).addClass("active");
			$("div.photo-count span").html( ($("#slideshow img,canvas").index(this)+1) );
		},
		// This next line is necessary because someplace else in the javascript
		// code for this page, an IE compatability layer is dynamically
		// replacing <img> tags with <canvas>es and leaving empty text nodes
		// where it shouldn't be. Pressed for time, I didn't look for the
		// original bug (which I suspect is actually in a library), so
		// this line is just a workaround. -- danc
		slideExpr: 'img,canvas'
	});
	
	$("div.photo-count").html("photo <span>1</span> of "+$("#slideshow img,canvas").get().length);
	
	$(".photo-controls .pause a").click(function()
	{
		$("#slideshow").cycle("pause");
		$(this).hide();
		$(".photo-controls .play a").show();
		return false;
	});
	
	$(".photo-controls .play a").click(function(){
		$("#slideshow").cycle("resume");
		$(this).hide();
		$(".photo-controls .pause a").show();
		return false;
	});
	
	$("div.gallery-thumbs a").mouseover(function()
	{	
		$("#slideshow").cycle("pause");
		imNo = $("div.gallery-thumbs a").index(this);
//alert (imNo);
		$("#slideshow").cycle(imNo);
		return false;
	});

	$('.gallery-thumbs .image a').hover(function()
	{	
		$(this).children('canvas').fadeTo("fast",".5");
	}, function()
	{
		if(!$(this).hasClass("active"))
			$(this).children('canvas').fadeTo("fast","1");
	});
}