// set to the absolute URL to go to when the banner is clicked
var XrayURL = 'http://www.fentonnelson.com/articles/xray-adv.htm';
// set the absolute or relative path to the xray image
var BannerURL = 'img/xray.jpg';

$(document).ready(function(){

	// hide the banner ... this should happen before the whole page has had time to load
	var $foo = $('#change_image').hide().click(function(){
		document.location.href = XrayURL;
		return false;
	}).css('cursor', 'pointer');

	// set the container's css to allow animation of the img
	$foo.css({
		'position': 'relative',
		'overflow': 'hidden'
	});

	// show the xray banner, called from the loaded event below
	var xstart = function(){
		// animate the banner down, then continue animating the contained img
		$foo.show().animate({
			'height': '216px'
		}, xdown);	
	}

	// pan down to the top, stop for 10 seconds, then do the whole thing again
	var xdown = function(){
		$('img', $foo).animate({
			'top': '0'
		}, 6000, function(){
			// Harry doesn't want it to repeat the animation
			//setTimeout(xup, 10000);
		});
	}

	// pan up to the bottom of the image
	var xup = function(){
		$('img', $foo).animate({
			'top': '-969px'
		}, 6000, xdown);
	}

	// replace the existing banner with our xray image
	$('img', $foo).attr('src', BannerURL).css({
		'position': 'absolute',
		'left': '0',
		'top': '-969px'
	}).load(xstart);
	
});