var $j = jQuery.noConflict(); 
$j(document).ready(function(){
	
	var arr_slides = $j('#slideshow').find('img');
	var num_loaded = 0;

	// activate the slideshow loading box
	$j("#slideshow-container").append('<div id="slideshow-loading">Loading slideshow: 0/'+arr_slides.length+'</div>');
		
	// preload each slide
	$j.each(arr_slides, function(key, img){
		var _img = new Image();

		$j(_img)
		.load(function () {
			num_loaded++;

			// update progress
			$j("#slideshow-loading").text("Loading slideshow: "+num_loaded+'/'+arr_slides.length);

			// if complete then insert slideshow
			if (num_loaded==arr_slides.length) insert_slideshow();
		})
		.attr('src', img.src);
	});

	function insert_slideshow() {
		
		$j("#slideshow-loading").remove();

		// enable slideshow and nav
		$j('#slideshow') 
		.before('<div id="slideshow-nav">') 
		.cycle({ 
			fx: 'scrollHorz',
			height:220,
			pause: true,
			speed:  500, 
			timeout: 7000,
			pager:  '#slideshow-nav'

		});

		$j("#slideshow").fadeIn(1000);
	}


});