document.observe("dom:loaded", function() {
// $("output2").hide();
$("maximizelink").href = "#";
$("maximizelink").style.position = "absolute";
$("maximizelink").style.right = "8px";
$("maximizelink").style.top = "8px";
$("maximizelink").observe("click", function() {
this.siblings().each(function(el) {
el.toggle();
});
});
$("compareform").observe("submit", stopEvent);
$("compare").observe("click", compareClick);
$("page1").observe("change", compareClick);
$("page1suggest").observe("change", page1SuggestChange);
$("page2").observe("change", compareClick);
$("show1").observe("click", updateOpacity);
$("show2").observe("click", updateOpacity);
$("mix12").observe("click", updateOpacity);
$("output2").observe("load", updateSize);
if ($("page1").scrollWidth != $("page1suggest").scrollWidth) {
$("page1suggest").style.width = $("page1").scrollWidth + "px";
}
Cookies.makeTextBoxStateful("page1");
Cookies.makeSelectStateful("page1suggest");
Cookies.makeTextBoxStateful("page2");
Cookies.makeTextBoxStateful("uwnetid");
Cookies.makeRadioButtonStateful("show1");
Cookies.makeRadioButtonStateful("show2");
Cookies.makeRadioButtonStateful("mix12");
doEnabling();
// show message for Chrome users
if (navigator.userAgent.match(/Chrome/)) {
browserSecurityError();
}
});
// if the browser is not able to do cross-domain iframes
function browserSecurityError() {
$("browsermessagearea").className = "error";
$("browsermessagearea").innerHTML = "NOTE: This tool does not work in your particular web browser, because it considers its code to be unsafe. Please try a different browser. Sorry.";
$("compareform").style.top = "40px";
}
function page1SuggestChange(event) {
stopEvent(event);
$("page1").value = this.value;
Cookies.statefulSelectChange("page1");
var opt = $("page1suggest").options[$("page1suggest").selectedIndex];
if (!opt || !opt.title) {
return;
}
var page2url = "https://info343.ischool.uw.edu/USERNAME/" + opt.title;
var uwnetid = $("uwnetid").value.strip();
if (uwnetid && uwnetid.match(/[a-zA-Z0-9_]{1,8}/)) {
page2url = page2url.replace(/USERNAME/, uwnetid);
}
$("page2").value = page2url;
Cookies.statefulSelectChange("page2");
compareClick(event);
return stopEvent(event);
}
function updateOpacity(event) {
// stopEvent(event);
if ($("show1").checked) {
$("output1").show();
$("output1").setOpacity(1.0);
$("output2").hide();
$("output2").setOpacity(0.0);
} else if ($("show2").checked) {
$("output1").hide();
$("output1").setOpacity(0.0);
$("output2").show();
$("output2").setOpacity(1.0);
updateSize();
} else {
// blend
$("output1").show();
$("output1").setOpacity(1.0);
$("output2").show();
$("output2").setOpacity(0.5);
updateSize();
}
// return stopEvent(event);
}
function doEnabling() {
var disable = !!(!$("page1").value || !$("page2").value);
$("show1").disabled = disable;
$("show2").disabled = disable;
$("mix12").disabled = disable;
return !disable;
}
function updateImgWidth() {
$("output1").width = $("output1").naturalWidth;
}
function compareClick(event) {
stopEvent(event);
if (!doEnabling()) {
return false;
}
try {
$("output1").src = $("page1").value;
$("output1").observe('load', updateImgWidth)
$("output1").alt = "Image file not found: " + $("page1").value;
} catch (e) {
browserSecurityError();
}
// target the iframe at their page.
// hack: append a query parameter to it so that it will not cache the
// page and will instead re-fetch it fresh every time they click Compare
var page2url = $("page2").value;
if (page2url.indexOf("?") >= 0) {
page2url += "&";
} else {
page2url += "?";
}
page2url += "dontcacheme1=" + new Date().getTime() + "&dontcacheme2=" + Math.random();
try {
$("output2").src = page2url;
} catch (e) {
browserSecurityError();
}
updateOpacity();
updateSize();
return stopEvent(event);
}
// make iframe height match document's actual height
function updateSize(event) {
stopEvent(event);
// update width
if ($("output1") && $("output1").naturalWidth) {
$("output2").style.width = $("output1").naturalWidth + "px";
console.log("Updating output2 width: " + $("output1").naturalWidth + "px");
}
// update height
try {
if (!$("output2")
|| !$("output2").contentWindow
|| !$("output2").contentWindow.document
|| !$("output2").contentWindow.document.body) {
return;
}
var height = $("output2").contentWindow.document.body.scrollHeight;
$("output2").style.height = (height + 0) + "px";
if ($("output1").height) {
// if page taller than image, put padding under image so bottoms match
// var heightDiff = ((height + 0) - $("output1").height);
// if (heightDiff >= 0) {
// $("output1").style.paddingBottom = heightDiff + "px";
// }
}
} catch (e) {
$("output2").style.height = "2200px";
$("errors").update("Unable to display page at " + $("page2").value + "<br />\n" + e);
$("errors").show();
if ($("output1").height && $("output1").height >= 200) {
$("output2").style.height = $("output1").height + 0 + "px";
}
}
return stopEvent(event);
}
function stopEvent(event) {
if (event) {
event.stop();
}
return false;
}