/* overlay PNG image on right bottle */

function ovl_rbottle_setup() {
	var obj = document.createElement("div");
	if (!obj) return false;

	var stretch = 0;
	var contents = document.getElementById("page_contents");
	if (contents) {
		if (typeof(contents.offsetHeight) != 'undefined') {
			if (contents.offsetHeight >= 301) {
				stretch += contents.offsetHeight - 301;
			}
		}
	}
	stretch++;

	if (document.body.filters) {
		/* what the hell MSIE can't you apply your filters to an image object directly? */
		obj.innerHTML = "<div style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ovl_rbottle1.png'); width: 268px; height: 713px;\"></div>" +
			"<div style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ovl_rbottle2.png',sizingMethod='scale'); width: 268px; height: " + stretch.toString() + "px;\"></div>" +
			"<div style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ovl_rbottle3.png'); width: 268px; height: 753px;\"></div>";
	}
	else {
		/* this is how NORMAL web browser that aren't insane do PNG files! */
		obj.innerHTML = "<img id=\"ovl_rbottle_img\" src=\"ovl_rbottle1.png\" width=\"268\" height=\"713\"><br>" +
			"<img id=\"ovl_rbottle_img\" src=\"ovl_rbottle2.png\" width=\"268\" height=\"" + stretch.toString() + "\"><br>" +
			"<img id=\"ovl_rbottle_img\" src=\"ovl_rbottle3.png\" width=\"268\" height=\"53\">";
	}

	obj.style.position = "absolute";

	/* we also want notification on resize from code in epilogue.js */
	obj.centerMe = function() {
		/* match to main content */
		var targ = document.onresizenotifythis;
		if (!targ) return;

		var nx = parseInt(targ.style.left) + 873 - 308;
		var ny = parseInt(targ.style.top);
		this.style.left = nx.toString() + "px";
		this.style.top = ny.toString() + "px";
	}
	document.onresizealsonotifythese.push(obj);

	document.body.appendChild(obj);
	obj.centerMe();

	return true;
}

ovl_rbottle_setup();