function ProductHero_preload_slide(hero_json, slide_num) {
	var image_asset = hero_json.image_assets[slide_num];
	if (image_asset.preloaded == undefined) {
		// Create a div to place preloaded images into so the browser caches them
		if (hero_json.preload_container_built == undefined) {
			$('body').append("<div id='image_preload_container'></div>");
			hero_json.preload_container_built = true;
		}
		// create a new dom element
		$('<img />').attr('src', image_asset.url).load(function(){ $('div#image_preload_container').append( $(this) );
			image_asset.preloaded = true;
		});
	}
}


function ProductHero_show_slide(slide_num) {
	var hero_json = document.ProductHero_hero_json;
	var image_asset = hero_json.image_assets[slide_num];
	var fade_ms = hero_json.fade_ms;
	ProductHero_preload_slide(hero_json, slide_num);
	// This assumes that the bottom canvas is the same image as the top canvas

	// hide the top canvas, change its image, fade it up, then copy the new image to the background
	// ready for the next iteration:
	$("div.product_hero div.bg_topcanvas").css('opacity', '0')
	                                      .css('background', 'url(' + image_asset.url + ')')
										  .animate({opacity: 1}, fade_ms ,function() {
													// Animation complete, so set the background
													// canvas ready for the next iteration:
													$("div.product_hero div.bg_botcanvas").css('background', 'url(' + image_asset.url + ')');
													// Finally, set the timer going for the next slide
													if (hero_json.run_slideshow) {
														setTimeout(ProductHero_next_slide, hero_json.slideshow_interval_ms - fade_ms);
													}
		
										}); 
}

function ProductHero_next_slide() {
	var hero_json = document.ProductHero_hero_json;
	var next_slide = hero_json.next_slide;
	
	ProductHero_show_slide(next_slide);
	hero_json.next_slide = (next_slide + 1) % hero_json.image_assets.length;
}


function ProductHero_init(hero_json) {
	document.ProductHero_hero_json = hero_json;
	
	var num_pics = hero_json['image_assets'].length;
	var pic1_info = hero_json['image_assets'][0];
	var pic2_info = hero_json['image_assets'][1];
	var icon_move_time = 1500;
	if (num_pics > 0) {
		// init the bottom canvas to the first picture
		$("div.product_hero div.bg_botcanvas").css('background', 'url(' + pic1_info['url'] + ')');
		// make the top canvas displayed but zero opacity:
		$("div.product_hero div.bg_topcanvas").css('opacity', '0').css('display', 'block');

		// If there are multiple pictures, initiate slideshow
	hero_json.run_slideshow = (num_pics > 1);
	if (hero_json.run_slideshow) {
			hero_json.next_slide = 1;
			if (hero_json.slideshow_interval_ms == undefined)
				hero_json.slideshow_interval_ms = 6000;
			if (hero_json.fade_ms == undefined)
				hero_json.fade_ms = 2000;

			setTimeout(ProductHero_next_slide, hero_json.slideshow_interval_ms);
		}
	}
	
	$("div.hero_logo_bg").css('opacity', '0.5');
	$("div.main_product_logo").css('opacity', '0');
	$("div.main_product_logo").css('margin-left', '40px');
	$("div.hero_img_info_bg").css('opacity', '0.4');
	
	$("div.main_product_logo").animate({ opacity: 1, marginLeft: "23px"}, icon_move_time );

	
}





/*
"image_assets": [
									 	{
											"asset_type": "img",
											"url":	"/pics/products/nuke/nuke_775_354_hairymonster.jpg",
											"attribution":	"© 2009 Fox. All Rights Reserved"
										},
										{
											"asset_type": "img",
											"url":	"/pics/products/nuke/nuke_775_354_spaceships.jpg",
											"attribution":	"© 2009 Fox. All Rights Reserved"
										} 
									]
*/