// JavaScript Document

$(document).ready(function(){ 
	var photoNum = $("#rotator > div").size();
	
	var slidehtml = jQuery("#slidenav").html();
	var newhtml = "";
	for (i=photoNum;i>0;i--) {
		newhtml += '<div class="photo" id="photo_'+i+'">&nbsp;</div>';
	}
	
	jQuery("#slidenav").html(slidehtml + newhtml);

	$('#slideshow #rotator').cycle({
		fx:  'fade',
		autostop: 1,
		autostopCount: photoNum,
		after: onAfter
	});

	$("#slidenav div.photo").click(function(){
		$('#slideshow #rotator').cycle('destroy');
		$("#slidenav").children('div.photo').each(function() { 
			$(this).removeClass('active'); 
			
			// All 4 below do the same thing, but different browsers read different ones.
			$(this).removeAttr('style');
			$(this+'[style]').removeAttr('style')
			$(this).css('margin-top', '0');
			$(this).attr('style', '');
		});
		$("#slideshow #rotator div").css('margin-top','0');
		var photoid = $(this).attr('id');
		var photoindex = parseFloat(photoid.replace('photo_','')) - 1;
		$('#slideshow #rotator').children('div').each(function(){ $(this).css('display','none'); });
		var target = $('#slideshow #rotator > div:eq('+photoindex+')');
		target.css('display','block');
		
		target.attr('style','');  // Just for IE
		target.css('marginTop','0px'); // Just for FF
		$(this).addClass('active');
	});
});

function onAfter(curr, next, opts) {
    var index = opts.currSlide;
	var index = index + 1;
	$("#slidenav").children('div.photo').each(function() { $(this).removeClass('active'); });
	$("#slidenav #photo_" + index).addClass('active');
}