// New image display stuff

//MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006 Valerio Proietti, <http://mad4milk.net>, MIT Style License.


if (typeof $chk == "undefined") {
	var script = document.createElement('script');
	script.src = '/_scripts/mootools.js';
	script.type = 'text/javascript';
	document.getElementsByTagName("head")[0].appendChild(script);
}
var i;
var neww;
var alttext;

function addBackElement() {
	backdiv = new Element("div", {
			"styles": {
				'display': 'block',
				'opacity': 0.65,
				'height': window.getHeight() + "px"
			},
			"id": "backdiv"
		});
	backdiv.injectInside(document.body);
	window.addEvent('resize',resizeBack);
}

function displayImage(source, iWidth , iHeight) {
	//width and height are disregarded- only there for compatibility purposes
		if (source.href != null) { //is this being called using the new method or not?
			image = source.href;
			if (source.getElementsByTagName("img").length > 0) {
				alttext = source.getElementsByTagName("img")[0].alt;
			}
			returnit = true
		} else {
			image = source;
			returnit = false
		}
		addBackElement();
		

		imagebox = new Element("div", {
			"id": "imagebox",
			"styles": {
				"display": "block"
			}
			
		}).setHTML("<img src=\"/_images/wait.gif\" class=\"loading\"/><p>Loading image...</p><a href=\"javascript:closeImageView();\" id=\"cancel\">cancel</a>").injectInside($E('body'));
		
		loadimg = document.createElement("img");
		loadimg.onload = function(){
			imageLoaded(loadimg)
		};
		loadimg.onerror = imageloadfailed;
		loadimg.src = image;
		if (returnit == true) {
			return false;
		}
}
function imageLoaded(img) {
	//Window width/height - 3px border - 15px padding - 50px either side
	var needHorizScroll = false;
	var needVertScroll = false;
	var windowWidth = window.getSize()['size']['x'] - 6 - 30 - 100;
	//plus 30 for window closing box
	var windowHeight = window.getSize()['size']['y'] - 6 - 30 - 100 + 30;
	if (img.height > windowHeight) {
		needVertScroll = true;
	} else {
		windowHeight = img.height + 30;
	}
	if (img.width > windowWidth) {
		needHorizScroll = true;
	} else {
		windowWidth = img.width;
	}
	if (needVertScroll == true) {
		windowWidth += 15;
	}
	if (needHorizScroll == true) {
		windowHeight += 15;
	}
	$('imagebox').innerHTML = "";
	if (needHorizScroll == true) {
			imgheight = windowHeight -45;
		} else {
			imgheight = windowHeight - 30;
		}
	var scrollBox = new Element("div", {'styles': {
		'overflow': 'hidden',
		'height': imgheight
	}});
	$(scrollBox).id = "mainimg"
	
	scrollBox.injectInside($('imagebox'));
	$(img).injectInside(scrollBox);
	$(img).setStyle('display', 'none');
	if (needHorizScroll == true) {
		var extrawidth = Math.round((windowWidth / img.width) * windowWidth);
		var horizScrollBase = new Element("div", {
			'id': "horizscroll"
		});
		var horizScrollBar = new Element("div", {
			'id': "mainbit",
			'styles': {
				'width': extrawidth
			}
		}).setHTML("<div id=\"rightbit\"></div><div id=\"leftbit\"></div>");
	}
	if (needVertScroll == true) {
		var extraheight = Math.round(((windowHeight - 30) / img.height) * (windowHeight - 30));
		var imgheight;
		
		var vertScrollBase = new Element("div", {
			'id': 'vertscroll', 'styles': {
				'height': windowHeight - 30,
				'top': 15,
				'right': 15
			}
		});
		
		var vertScrollBar = new Element("div", {
			'id': 'mainbit',
			'styles': {
				'height': extraheight
			}
		}).setHTML("<div id=\"topbit\"></div><div id=\"bottombit\" style=\"height: " + (extraheight - 15) + "px;\"></div>");
	
	}
	var grow = new Fx.Styles('imagebox', {duration: 300, onComplete: function() {
		$(img).setStyle('display','block');
		if (needHorizScroll == true) {
			horizScrollBase.injectInside($('imagebox'));
			horizScrollBar.injectInside(horizScrollBase);
			var mySlide = new Slider(horizScrollBase, horizScrollBar, {
				steps: $(horizScrollBase).getSize()['size']['x'],
				onChange: function(step){
					$('mainimg').scrollTo(Math.round(parseInt(step) * ((img.width - windowWidth) / windowWidth)), 0);
				}
			});
		}
		if (needVertScroll == true) {
			vertScrollBase.injectInside($('imagebox'));
			vertScrollBar.injectInside(vertScrollBase);
			var mySlide = new Slider(vertScrollBase, vertScrollBar, {
				steps: $(vertScrollBase).getSize()['size']['y'],
				mode: 'vertical',
				onChange: function(step){
				
					$('mainimg').scrollTo(0, Math.round(parseInt(step) * ((img.height - windowHeight - 30) / (windowHeight - 30))));
				}
			});
		}
		if (alttext != null ){
		new Element("div", {'class': 'imagecaption'}).setHTML(alttext).injectInside($('imagebox'));
		}
		link = new Element("a", {
			id: "close",
			href: "javascript:closeImageView();"
		}).setHTML("close").injectInside($('imagebox'))
		}});
		
		grow.start({
    'height': [$('imagebox').getStyle('height').toInt() , windowHeight],
    'width': [$('imagebox').getStyle('width').toInt() , windowWidth],
	'margin-top': [$('imagebox').getStyle('margin-top').toInt() , 0 - (windowHeight / 2)],
	'margin-left': [$('imagebox').getStyle('margin-left').toInt() , 0 - (windowWidth / 2)]
    });
}
function resizeBack() {
	$('backdiv').setStyle('height',window.getHeight())
}

function imageloadfailed() {
	var grow = new Fx.Styles('imagebox', {duration: 300});
	grow.start({
    'height': [$('imagebox').getStyle('height').toInt() , 80],
    'margin-top': [$('imagebox').getStyle('margin-top').toInt() , 0 - 40]
	  });
	$('imagebox').innerHTML = "<img src=\"/_images/wait.gif\" class=\"loading\"/><p>Sorry, the attempt to load the image failed.</p><a href=\"javascript:closeImageView();\" id=\"close\">close</a>";
		
}
function closeImageView() {
	window.removeEvent('resize',resizeBack);
	document.body.removeChild($('imagebox'));
	if ($('popuppage')) {
		document.body.removeChild($('popuppage'));
	}
	document.body.removeChild($('backdiv'));
	i= null;
	neww = null;
}

function displayPanorama(source) {
	addBackElement();

		imagebox = new Element("div", {
			"id": "imagebox",
			"styles": {
				"display": "block"
			}
			
		});
		imagebox.injectInside(document.body);
		var grow = new Fx.Styles('imagebox', {
			duration: 300,
			onComplete: function(){
				jApplet = new Element("div", {
					'styles': {
						'padding': "15px"
					}
				});
				jApplet.innerHTML = "<APPLET archive=\"/_scripts/ptviewer.jar\" code=ptviewer.class width=500 height=400><PARAM name=file   value=\"" + source.href + "\"><PARAM name=\"cursor\"   value=\"MOVE\"><param name=\"showToolbar\" value=\"true\"><param name=\"auto\" value=1><param name=\"antialias\" value=\"true\"><param name=\"mousePanTime\" value=5><param name=\"wait\" value=\"http://172.16.0.234/images/crdlogo.gif\"><param name=\"imgLoadFeedback\" value=\"false\"></APPLET>";
				jApplet.injectInside($('imagebox'));
				new Element("div", {'class': 'imagecaption'}).setHTML("Hold down the left mouse button and drag to move around the 3D view.").injectInside($('imagebox'));
	
				link = new Element("a", {
					id: "close",
					href: "javascript:closeImageView();"
				}).setHTML("close").injectInside($('imagebox'));
				
			}
		}
			);
		grow.start({
    'height': [$('imagebox').getStyle('height').toInt() , 460],
    'width': [$('imagebox').getStyle('width').toInt() , 530],
	'margin-top': [$('imagebox').getStyle('margin-top').toInt() , 0 - 215],
	'margin-left': [$('imagebox').getStyle('margin-left').toInt() , 0 - 280]
    });
	return false;
}

function displayIFrame(source) {
	var iframeheight = 0;
				var iframewidth= 0;
	addBackElement();

		imagebox = new Element("div", {
			"id": "imagebox",
			"styles": {
				"display": "block"
			}
			
		});
		if (String(source.href).indexOf("overview.htm") > -1) {
					iframeheight = 655;
					iframewidth = 560;
				}
		imagebox.injectInside(document.body);
		var grow = new Fx.Styles('imagebox', {
			duration: 300,
			onComplete: function(){
				jApplet = new Element("div", {
					'styles': {
						'padding': "15px"
					}
				});
				
				
				
				
				jApplet.innerHTML = "<iframe scrolling=\"no\" frameborder=\"0\" src=\"" + source.href + "\" style=\"width: "+iframewidth+"px; height:"+iframeheight+"px; border: 0px\" id=\"popupiframe\"/>";
				jApplet.injectInside($('imagebox'));
				new Element("div", {'class': 'imagecaption', 'id': 'popuptext'}).setHTML("Click on an area to view a detailed map.").injectInside($('imagebox'));
	
				link = new Element("a", {
					id: "close",
					href: "javascript:closeImageView();"
				}).setHTML("close").injectInside($('imagebox'));
				
			}
		}
			);
			grow.start({
    'height': [$('imagebox').getStyle('height').toInt() , iframeheight + 60],
    'width': [$('imagebox').getStyle('width').toInt() , iframewidth + 30],
	'margin-top': [$('imagebox').getStyle('margin-top').toInt() , 0 - Math.round((iframeheight + 50) /2)],
	'margin-left': [$('imagebox').getStyle('margin-left').toInt() , 0 - Math.round((iframewidth + 50) /2)]
    });
	return false;
}

function changeIFrame(source) {
	document.getElementById("popupiframe").src = source.href;
	var iframeheight;
	var iframewidth;
	
	if (source.href.indexOf("overview.htm") > -1) {
		iframeheight = 652;
		iframewidth = 556;
		document.getElementById("popuptext").innerHTML = "Click on an area to view a detailed map.";
	} else {
		var iframeheight = 575;
		var iframewidth= 790;
		document.getElementById("popuptext").innerHTML = "<a href=\"map/overview.htm\" onClick=\"return changeIFrame(this)\">Back to overview map</a>";
	}
	
	document.getElementById("popupiframe").style.width = iframewidth + "px";
	document.getElementById("popupiframe").style.height = iframeheight + "px";
	
	
	
	var grow = new Fx.Styles('imagebox', {
			duration: 300});
	grow.start({
    'height': [$('imagebox').getStyle('height').toInt() , iframeheight + 60],
    'width': [$('imagebox').getStyle('width').toInt() , iframewidth + 30],
	'margin-top': [$('imagebox').getStyle('margin-top').toInt() , 0 - Math.round((iframeheight + 50) /2)],
	'margin-left': [$('imagebox').getStyle('margin-left').toInt() , 0 - Math.round((iframewidth + 50) /2)]
    });
	return false;
}
function closeViewer() {
//here for legacy reasons only- some pages call it on close.
/*	if (winViewer && winViewer.open && !winViewer.closed) {
		winViewer.close();
	}*/
}

function openPage(link) {
	addBackElement();
	imagebox = new Element("div", {
			"id": "imagebox",
			"styles": {
				"display": "block",
				"padding": "0px",
				"height": "87px"
			}
			
		}).injectInside($E('body'));
	
	var titleBar = new Element("div", {
		"class": "calendarpopupbar",
		"id": "dragbar"
	});
	titleBar.setHTML("<img src=\"/_images/popup-cross.gif\" onClick=\"closeImageView()\" style=\"float: right; cursor: default; padding-right: 5px;\"/>");
	var titleText = new Element("span", {
		"id":"titleText"
	}).setHTML("Loading...").injectInside(titleBar);
	
	titleBar.injectInside(imagebox);
	
	var loadingBox = new Element("div", {
		"id": "loadingbox",
		"styles": {
		"width": $('imagebox').getSize()["size"]["x"],
		"height":$('imagebox').getSize()["size"]["y"],
		"background-color": "#FFFFFF",
		"position": "absolute",
		"padding": "10px"
		}
	}).setHTML("<img src=\"/_images/wait.gif\" class=\"loading\"/><p>Loading page...</p>");
	loadingBox.injectInside(imagebox);
	
	/*var iFrame = new Element("iframe", {
		
		"src": link.href,
		"id": "'popuppage'",
		"name": "popuppage",
		"frameborder": 0,
		
		"onload": "popupPageLoaded();",
		"onreadystatechange": "popupPageLoaded();",
		"styles" : {
			"visibility": "hidden"
		}
	})
		imagebox.makeDraggable({
		handle: $('dragbar')
	});*/
	imagebox.setHTML(imagebox.innerHTML + "<iframe frameborder=\"0\" src=\"" + link.href + "\" id=\"popuppage\" name=\"popuppage\" onload=\"popupPageLoaded();\" onreadystatechange=\"popupPageLoaded();\" style=\"visibility: hidden;\"/>")
	return false;
	
}

function popupPageLoaded(){
	if ((window.frames['popuppage'].document.readyState == "complete") || (typeof(window.frames['popuppage'].document.readyState) == "undefined")) {
	var targetHeight = window.frames['popuppage'].document.body.scrollHeight + 77;
	if (window.getHeight() * 0.8 < targetHeight) {
		targetHeight = Math.round(window.getHeight() * 0.8);
	}
	$("loadingbox").setStyles({
		"visibility": "hidden",
		"width": "600px",
		"height": targetHeight
	});
	var linksList = window.frames['popuppage'].document.getElementsByTagName("a");
	var buttonList = window.frames['popuppage'].document.getElementsByTagName("input");
	$('titleText').setHTML(window.frames['popuppage'].document.title);
	
	var grow = new Fx.Styles('imagebox', {
		duration: 300,
		onComplete: function(){
			$("popuppage").setStyles({
				"visibility": "visible",
				"width": "600px",
				"height": targetHeight - 27
			})
		}
	});
	if ($('popuppage').src.indexOf("survey") > -1) {
	grow.start({
		'height': [$('imagebox').getStyle('height').toInt(), targetHeight],
		'width': [$('imagebox').getStyle('width').toInt(), 600],
		'margin-top': [$('imagebox').getStyle('margin-top').toInt(), 0 - targetHeight / 2],
		'margin-left': [$('imagebox').getStyle('margin-left').toInt(), 0 - 300]
	});
	} else {
		grow.start({
				'height': [$('imagebox').getStyle('height').toInt(), targetHeight],
				'width': [$('imagebox').getStyle('width').toInt(), window.frames['popuppage'].document.body.scrollWidth],
				'margin-top': [$('imagebox').getStyle('margin-top').toInt(), 0 - targetHeight / 2],
				'margin-left': [$('imagebox').getStyle('margin-left').toInt(), 0 - window.frames['popuppage'].document.body.scrollWidth / 2]
	});
	}
//	$("popuppage").removeEvents();
}
}

function showloadbox() {
	return false;
}