FADE_TIMEOUT = 20;
FADE_OPACITY_STEP = 2;
TIMEOUT_BETWEEN_FADES = 3000;
IMAGE_PATH = "../bank/bannerpics/";

var header_image_fade = {
	image_list: [],
	switch_count: 0,
	request: null,
	left_img_loaded: false,
	right_img_loaded: false,
	done_initial_fade: false,
	page_ready: false,
	xml_loading_error: false,
	
	set_page_ready: function() {
		var was_ready = this.page_ready;
		this.page_ready = true;
		if (!was_ready) {
			this.on_page_ready_and_loading_done();
		}
	},
	
	on_page_ready_and_loading_done: function() {
		if (this.page_ready && this.image_list.length > 0) {
			this.init_banner_image('banner-img-left', this.get_next_image());
			this.init_banner_image('banner-img-right', this.get_next_image());
		}
		else if (this.page_ready && this.xml_loading_error) {
			// in case we cannot get the file names, show the no-js-* images
			var img = document.getElementById('banner-img-left');
			img.style.display = 'none';
			img = document.getElementById('banner-img-right');
			img.style.display = 'none';
			
			img = document.getElementById('no-js-banner-img-left');
			img.style.display = 'inline';
			img = document.getElementById('no-js-banner-img-right');
			img.style.display = 'inline';
		}
	},
	
	init: function() {
		this.request = createXmlHttpObject();
		if (!this.request) {
			return;
		}
		this.request.open("GET", "/tallpinesschool/xml_banner.php", true);
		var this_obj = this;
		this.request.onreadystatechange = function(){this_obj.on_ready_state_change();};
		this.request.send(null);
	},
	
	on_ready_state_change: function() {
		if (this.request.readyState != 4) {
			return;
		}
		if (this.request.status == 0) {
			// 0 status means timeout; lets try again in a few milliseconds
			var this_obj = this;
			setTimeout(function(){ this_obj.init(); }, 100);
		} else if (this.request.status != 200) {
			// cannot get XML, so show images and quit
			this.xml_loading_error = true;
			this.on_page_ready_and_loading_done();
			return;
		}
		
		try {
			children = this.request.responseXML.documentElement.childNodes;
			for (i=0; i < children.length; i++) {
				child = children[i];
				img_src = child.attributes.getNamedItem('url').value;
				this.image_list.push(IMAGE_PATH + img_src);
			}
		} catch (e) {
			// cannot get XML, so show images and quit
			this.xml_loading_error = true;
			this.on_page_ready_and_loading_done();
			return;
		}
		
		if (this.page_ready) {
			this.init_banner_image('banner-img-left', this.get_next_image());
			this.init_banner_image('banner-img-right', this.get_next_image());
		}
	},
	
	init_banner_image: function(img_id, img_src) {
		var img = document.getElementById(img_id);
		setOpacity(img, 0);
		img.style.visibility = 'visible';
		var this_obj = this;
		img.onload = function() { this_obj.on_img_load(img_id); };
		img.src = img_src;
	},
	
	on_img_load: function(img_id) {
		if (this.done_initial_fade) {
			var this_obj = this;
			do_fade_in(img_id, function(){this_obj.on_done_fade();});
		} else {
			if (img_id == 'banner-img-left') {
				this.left_img_loaded = true;
			} else if (img_id == 'banner-img-right') {
				this.right_img_loaded = true;
			}

			if (this.left_img_loaded && this.right_img_loaded) {
				// preload all the other images
				for (i=0; i < this.image_list.length; i++) {
					var image = new Image();
					image.src = this.image_list[i];
				}
			
				// make both images fade in together
				img_left = document.getElementById('banner-img-left');
				img_right = document.getElementById('banner-img-right');
				var this_obj = this;
				var done_callback = function() {
					this_obj.done_initial_fade = true;
					this_obj.on_done_fade();
				};
				var set_opacity_callback = function(opacity) {
					setOpacity(img_left, opacity);
					setOpacity(img_right, opacity);
				};
				do_fade_in_generic(done_callback, set_opacity_callback);
			}
		}
		
	},
	
	on_done_fade: function() {
		var this_obj = this;
		setTimeout(function(){this_obj.do_fade_switch();}, TIMEOUT_BETWEEN_FADES);
	},
	
	get_next_image: function() {
		img_src = this.image_list[this.switch_count];
		this.switch_count += 1;
		this.switch_count = this.switch_count % this.image_list.length;
		return img_src;
	},
	
	do_fade_switch: function() {
		img_id = (this.switch_count % 2 == 0) ? 'banner-img-left' : 'banner-img-right';
		div_id = (this.switch_count % 2 == 0) ? 'banner-div-left' : 'banner-div-right';
		
		img = document.getElementById(img_id);
		bg = document.getElementById(div_id);
	
		img_src = this.get_next_image();
		bg.style.backgroundImage = 'url(' + img.src + ')';
		bg.style.backgroundRepeat = 'no-repeat';

		setOpacity(img, 0);
		img.src = img_src;
	}
};

function setOpacity(obj, opacity) {
	opacity = (opacity >= 100) ? 100 : opacity;
  
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

function do_fade_in(img_id, done_callback) {
	var obj = document.getElementById(img_id);
	do_fade_in_generic(done_callback, 
		function(opacity) { setOpacity(obj, opacity); });
}

function do_fade_in_generic(done_callback, set_opacity_callback) {
	var opacity = 0;
	
	var f = function() {
		if (opacity <= 100) {
			set_opacity_callback(opacity);
			opacity += FADE_OPACITY_STEP;
			setTimeout(f, FADE_TIMEOUT);
		} else {
			done_callback();
		}
	};
	f();
}


var XMLHttpFactories = [
	function () {return new XMLHttpRequest()},
	function () {return new ActiveXObject("Msxml2.XMLHTTP")},
	function () {return new ActiveXObject("Msxml3.XMLHTTP")},
	function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXmlHttpObject() {
	var xmlhttp = false;
	for (var i=0;i<XMLHttpFactories.length;i++) {
		try {
			xmlhttp = XMLHttpFactories[i]();
		}
		catch (e) {
			continue;
		}
		break;
	}
	return xmlhttp;
}