/*==================================================
* Initialize Timeline and Map
*==================================================
*/
var tl = null;
var map = null;
var geocoder = null;
function createMarker(point, html, place) {
var iconRed = new GIcon();
iconRed.image = 'Images/red.png';
iconRed.shadow = 'Images/red_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var options = { icon: iconRed, title: place };
var marker = new GMarker(point, options);
GEvent.addListener(marker, "click", function() {
var myHtml = html;
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
function onLoad() {
// Initialize google map
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,30));
map.addControl(new GSmallMapControl(), topRight );
map.addControl(new GMapTypeControl());
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.setCenter(new GLatLng(50.2, -.5), 6);
map.addMapType(G_PHYSICAL_MAP);
map.removeMapType(G_SATELLITE_MAP);
map.removeMapType(G_HYBRID_MAP);
map.setMapType(G_PHYSICAL_MAP);
}
// Initialize Timeline
var eventSource = new Timeline.DefaultEventSource();
var eventSourceNarrative = new Timeline.DefaultEventSource();
var johnTheme = Timeline.ClassicTheme.create();
johnTheme.ether.backgroundColors[1] = "#88AA99";
johnTheme.event.duration.color = "#FFEECC";
johnTheme.event.instant.icon = " Images/oxblood-square.png";
johnTheme.event.bubble.width = 400;
var theme = Timeline.ClassicTheme.create();
theme.event.instant.icon = "Images/blue-diamond.png";
theme.event.highlightColors = ["#FFFF00", "#FFC000", "#FF0000"];
theme.event.duration.color = "#449";
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSourceNarrative,
date: "May 10 1199 00:00:00 GMT",
width: "40%",
align: "Bottom",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 52,
theme: johnTheme
}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
date: "May 10 1199 00:00:00 GMT",
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 52,
theme: johnTheme
}),
Timeline.createBandInfo({
eventSource: eventSource,
date: "May 10 1199 00:00:00 GMT",
width: "50%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 80,
theme: theme
})
];
bandInfos[0].syncWith = 2;
bandInfos[0].highlight = true;
bandInfos[1].etherPainter = new Timeline.KingJohnsReignEtherPainter({ theme: johnTheme }); // dfhuynh
bandInfos[1].highlight = true;
bandInfos[1].syncWith = 2;
// note that I'm not using a loop to set these decorators because I want them to be different (ie. no label in band[1]
bandInfos[0].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "Mar 24 1208",
endDate: "1214",
color: "#FFC000",
opacity: 20,
startLabel: "Interdict⇒",
endLabel: "⇐Interdict",
theme: theme
}),
new Timeline.PointHighlightDecorator({
date: "May 27 1199 00:00:00 GMT",
color: "#FF9500",
opacity: 70,
theme: theme
})
];
bandInfos[1].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "Mar 24 1208",
endDate: "1214",
color: "#FFC000",
opacity: 20,
startLabel: "",
endLabel: "",
theme: theme
}),
new Timeline.PointHighlightDecorator({
date: "May 27 1199 00:00:00 GMT",
color: "#FF9500",
opacity: 70,
theme: theme
})
];
bandInfos[2].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "Mar 24 1208",
endDate: "1214",
color: "#FFC000",
opacity: 20,
startLabel: "Interdict⇒",
endLabel: "⇐Interdict",
theme: theme
}),
new Timeline.PointHighlightDecorator({
date: "May 27 1199 00:00:00 GMT",
color: "#FF9500",
opacity: 70,
theme: theme
})
];
bandInfos[2].decorators.push(new Timeline.KingJohnsReignDecorator({
color: "#FF9500",
theme: theme
}));
tl = Timeline.create(document.getElementById("JohnItinerary"), bandInfos);
tl.loadJSON("data/Itinerary.js", function(json, url) { eventSource.loadJSON(json, url); });
tl.loadXML("data/narrative.xml", function(xml, url) { eventSourceNarrative.loadXML(xml, url); updateMap()});
setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1,2], theme);
tl.getBand(2).scrollToCenter(Timeline.DateTime.parseGregorianDateTime("May 27 1199 00:00:00 GMT"));
// Create map markers for places in places_json (the object in the file gazetteer.js)
for (x in places_json){
var lat = places_json[x].latLong[0];
var lng = places_json[x].latLong[1];
var point = new GLatLng(lat,lng);
var place = x.toString();
var html = "Hardy placename: " + place + " " + "Google's placename: " + places_json[x].gplace + " " + "Latitude: " + lat + " " + "Longitude: " + lng;
places_json[x].placemark = createMarker(point, html, place)
map.addOverlay(places_json[x].placemark);
places_json[x].placemark.hide();
}
// Hide/Show map markers in response to onScroll events
var b2 = tl.getBand(2);
b2.addOnScrollListener(updateMap);
}// end of onLoad
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
/*==================================================
* Update Map: Hide/Show map markers. pan Map.
*==================================================
*/
function updateMap() {
var b2 = tl.getBand(2);
var dmax = b2.getMaxVisibleDate();
var dmin = b2.getMinVisibleDate();
var visiblePlaces = {};
var iterator = b2.getEventSource().getEventIterator(dmin,dmax);
while (iterator.hasNext()) {
visiblePlaces[iterator.next().getText()] = true;
}
for (var x in places_json) {
var placemark = places_json[x].placemark;
if(x in visiblePlaces) {
placemark.show();
if (!map.getBounds().containsLatLng(placemark.getLatLng())) map.panTo(placemark.getLatLng());
} else {
placemark.hide();
}
}
}
/*==================================================
* centerTimeline navigation links
*==================================================
*/
function centerTimeline(date) {
tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date));
}
// use select element in the controls tab to center timeline on a particular year
function pickDate() {
var jdate = $('#johnyears');
jdate.blur();
tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(jdate.val()));
jdate.find('option:first').attr('selected', 'selected');
}
// called by onLoad to jumpstart map markers.
function scrollCenterTimeline(date) {
tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime(date));
}
/*==================================================
* Hijack some more Timeline API stuff
*==================================================
*/
// This fixes FF3 which wraps event labels to some small number.
// I don't know the source of the problem, but this remedies the symptom.
SimileAjax.Graphics._FontRenderingContext.prototype.computeSize = function(text) {
this._elmt.innerHTML = text;
return {
width: this._elmt.offsetWidth + 5,
height: this._elmt.offsetHeight
};
};
// is this still needed if I'm hosting 2.2?
//
// /*==================================================
// * JohnSpanHighlightDecorator (courtesy of David Huynh)
// *==================================================
// */ This is pitiful, I can't remember why this is here or what it does!
//
// Timeline.JohnSpanHighlightDecorator = function(params) {
// this._startDate = Timeline.DateTime.parseGregorianDateTime(params.startDate);
// this._endDate = Timeline.DateTime.parseGregorianDateTime(params.endDate);
// this._startLabel = params.startLabel;
// this._endLabel = params.endLabel;
// this._spanText = params.spanText;
// this._color = params.color;
// this._opacity = ("opacity" in params) ? params.opacity : 100;
// };
//
// Timeline.JohnSpanHighlightDecorator.prototype.initialize = function(band, timeline) {
// this._band = band;
// this._timeline = timeline;
//
// this._layerDiv = null;
// };
//
// Timeline.JohnSpanHighlightDecorator.prototype.paint = function() {
// if (this._layerDiv != null) {
// this._band.removeLayerDiv(this._layerDiv);
// }
// this._layerDiv = this._band.createLayerDiv(10);
// this._layerDiv.setAttribute("name", "span-highlight-decorator"); // for debugging
// this._layerDiv.style.display = "none";
//
// var minDate = this._band.getMinDate();
// var maxDate = this._band.getMaxDate();
//
// if (this._startDate.getTime() < maxDate.getTime() &&
// this._endDate.getTime() > minDate.getTime()) {
//
// minDate = new Date(Math.max(minDate.getTime(), this._startDate.getTime()));
// maxDate = new Date(Math.min(maxDate.getTime(), this._endDate.getTime()));
//
// var minPixel = this._band.dateToPixelOffset(minDate);
// var maxPixel = this._band.dateToPixelOffset(maxDate);
//
// var doc = this._timeline.getDocument();
//
// var createTable = function() {
// var table = doc.createElement("table");
// table.insertRow(0).insertCell(0);
// return table;
// };
//
// var div = doc.createElement("div");
// div.style.position = "absolute";
// div.style.overflow = "hidden";
// /* div.style.textAlign = "center"; */
// div.style.color = "#000";/* */
// /* div.style.fontWeight = "bold"; */
// /* div.style.fontSize = "160%"; */
// div.innerHTML = this._spanText;
// div.style.background = this._color;
// if (this._opacity < 100) {
// Timeline.Graphics.setOpacity(div, this._opacity);
// }
// this._layerDiv.appendChild(div);
//
// var tableStartLabel = createTable();
// tableStartLabel.style.position = "absolute";
// tableStartLabel.style.overflow = "hidden";
// tableStartLabel.style.fontSize = "300%";
// tableStartLabel.style.fontWeight = "bold";
// tableStartLabel.style.color = this._color;
// tableStartLabel.rows[0].cells[0].innerHTML = this._startLabel;
// this._layerDiv.appendChild(tableStartLabel);
//
// var tableEndLabel = createTable();
// tableEndLabel.style.position = "absolute";
// tableEndLabel.style.overflow = "hidden";
// tableEndLabel.style.fontSize = "300%";
// tableEndLabel.style.fontWeight = "bold";
// tableEndLabel.style.color = this._color;
// tableEndLabel.rows[0].cells[0].innerHTML = this._endLabel;
// this._layerDiv.appendChild(tableEndLabel);
//
// if (this._timeline.isHorizontal()) {
// div.style.left = minPixel + "px";
// div.style.width = (maxPixel - minPixel) + "px";
// div.style.top = "0px";
// div.style.height = "100%";
//
// tableStartLabel.style.right = (this._band.getTotalViewLength() - minPixel) + "px";
// tableStartLabel.style.width = (this._startLabel.length) + "em";
// tableStartLabel.style.top = "0px";
// tableStartLabel.style.height = "100%";
// tableStartLabel.style.textAlign = "right";
//
// tableEndLabel.style.left = maxPixel + "px";
// tableEndLabel.style.width = (this._endLabel.length) + "em";
// tableEndLabel.style.top = "0px";
// tableEndLabel.style.height = "100%";
// } else {
// div.style.top = minPixel + "px";
// div.style.height = (maxPixel - minPixel) + "px";
// div.style.left = "0px";
// div.style.width = "100%";
//
// tableStartLabel.style.bottom = minPixel + "px";
// tableStartLabel.style.height = "1.5px";
// tableStartLabel.style.left = "0px";
// tableStartLabel.style.width = "100%";
//
// tableEndLabel.style.top = maxPixel + "px";
// tableEndLabel.style.height = "1.5px";
// tableEndLabel.style.left = "0px";
// tableEndLabel.style.width = "100%";
// }
// }
// this._layerDiv.style.display = "block";
// }
//
// Timeline.JohnSpanHighlightDecorator.prototype.softPaint = function() {
// };
/*==================================================
* setupFilterHighlightControls
* This has been altered to generate a table of one column instead of four
*==================================================
*/
function setupFilterHighlightControls(div, timeline, bandIndices, theme) {
var table = document.createElement("table");
var tr = table.insertRow(0);
var td = tr.insertCell(0);
td.innerHTML = "Filter:";
var handler = function(elmt, evt, target) {
onKeyPress(timeline, bandIndices, table);
};
tr = table.insertRow(1);
tr.style.verticalAlign = "top";
td = tr.insertCell(0);
var input = document.createElement("input");
input.type = "text";
SimileAjax.DOM.registerEvent(input, "keypress", handler);
td.appendChild(input);
tr = table.insertRow(2)
td = tr.insertCell(0);
td.innerHTML = "Highlight:";
for (var i = 0; i < theme.event.highlightColors.length; i++) {
tr = table.insertRow(i + 3);
td = tr.insertCell(0);
input = document.createElement("input");
input.type = "text";
SimileAjax.DOM.registerEvent(input, "keypress", handler);
td.appendChild(input);
var divColor = document.createElement("div");
divColor.style.height = "0.5em";
divColor.style.background = theme.event.highlightColors[i];
td.appendChild(divColor);
}
tr = table.insertRow(6);
td = tr.insertCell(0);
var button = document.createElement("button");
button.innerHTML = "Clear All";
SimileAjax.DOM.registerEvent(button, "click", function() {
clearAll(timeline, bandIndices, table);
});
td.appendChild(button);
div.appendChild(table);
}
var timerID = null;
function onKeyPress(timeline, bandIndices, table) {
if (timerID != null) {
window.clearTimeout(timerID);
}
timerID = window.setTimeout(function() {
performFiltering(timeline, bandIndices, table);
}, 300);
}
function cleanString(s) {
return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
function performFiltering(timeline, bandIndices, table) {
timerID = null;
var tr = table.rows[1];
var text = cleanString(tr.cells[0].firstChild.value);
var filterMatcher = null;
if (text.length > 0) {
var regex = new RegExp(text, "i");
filterMatcher = function(evt) {
return regex.test(evt.getText()) || regex.test(evt.getDescription());
};
}
var regexes = [];
var hasHighlights = false;
for (var x = 3; x < 6; x++) {
var input = table.rows[x].cells[0].firstChild;
var text2 = cleanString(input.value);
if (text2.length > 0) {
hasHighlights = true;
regexes.push(new RegExp(text2, "i"));
} else {
regexes.push(null);
}
}
var highlightMatcher = hasHighlights ? function(evt) {
var text = evt.getText();
var description = evt.getDescription();
for (var x = 0; x < regexes.length; x++) {
var regex = regexes[x];
if (regex != null && (regex.test(text) || regex.test(description))) {
return x;
}
}
return -1;
} : null;
for (var i = 0; i < bandIndices.length; i++) {
var bandIndex = bandIndices[i];
timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(filterMatcher);
timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(highlightMatcher);
}
timeline.paint();
}
function clearAll(timeline, bandIndices, table) {
var inputs = [1,3,4,5]
for (var x = 0; x < inputs.length; x++) {
table.rows[inputs[x]].cells[0].firstChild.value = "";
}
for (var i = 0; i < bandIndices.length; i++) {
var bandIndex = bandIndices[i];
timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(null);
timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(null);
}
timeline.paint();
}
/*==================================================
* Toggle Div
* ===================================================
*/
function toggleDiv( whichLayer ){
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
/*==================================================
* Tab Navigation
* Tab navigation scripts and css from Author : Ali Roman, Published : June 05, 2006, at
* http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html
*==================================================
*/
var last_tab = 'tab1';
function show(layerName) {
document.getElementById(layerName).style.display = '';
}
function hide(layerName) {
document.getElementById(layerName).style.display = 'none';
}
function show_next(tab_name) {
document.getElementById(last_tab).className = 'tab';
var curr = document.getElementById(tab_name);
curr.className='tab_showing';
hide(last_tab+'_content');
show(tab_name+'_content');
last_tab=tab_name;
}
/*==================================================
* Pager
*==================================================
*/
// Summary:
// loadPage([optional pg. no. param]) calls shadowbox.open() and once #page_images
// has loaded in the shadowbox the onFinish callback is called: pager(pgno)
// pager evaluates the incoming parameters if any and calls loadScan() to set the img src.
// Call shadowbox for page images and page image navigation.
// Note to self: loadPage was inside the $(document).ready function
// so invisible stuff like event info bubbles couldn't find it since they are created
// AFTER document.ready, right? So the call from the event info bubble looks like this:
// onclick=\"SimileAjax.WindowManager.cancelPopups(); loadPage('009');\"
// Is there any way to reach into such elements
// (which, I suppose are being created on the fly by simile ajax yes?)
// using jQuery selectors?
function PadDigits(n, totalDigits){ // from: http://classicasp.aspfaq.com/general/how-do-i-pad-digits-with-leading-zeros.html
n = n.toString();
var pd = '';
if (totalDigits > n.length){
for (var i=0; i < (totalDigits-n.length); i++){
pd += '0';
}
}
return pd + n.toString();
};
function deromanize( roman ) {
var input = roman.toUpperCase().split('');
var lookup = {I:1,V:5,X:10,L:50,C:100,D:500,M:1000};
var num = 0;
var val = 0;
while (input.length) {
val = lookup[input.shift()];
num += val * (val < lookup[input[0]] ? -1:1);
}
return num;
};
function loadScan(pgToLoad){
$('#shadowbox_title_inner').find('.loadgif').show();
$('#shadowbox_content').find('#scan').attr('src', 'pageImages\/' + pgToLoad + '.jpg').load(function(){$('#shadowbox_title_inner').find('.loadgif').hide()});
}
function pager(pgreq){
var fld = $('#shadowbox_title_inner').find('#pagefield');
var imageElement = $('#shadowbox_content').find('#scan');
var pgNoRegex = new RegExp(/(^.*pageImages\/)(.*)(\.jpg)$/);
var pgstr = pgNoRegex.exec(imageElement.attr('src'))[2];
var pgNo = parseInt(pgstr, 10);
if (/\d{3}/.test(pgreq)){
loadScan(PadDigits(parseInt(parseInt(pgreq, 10))+77, 3));
}
else if (pgreq == "next"){
if (pgNo < 351){
loadScan(PadDigits(pgNo + 1, 3));
} else {
alert("no more pages");
}
}
else if (pgreq == "prev"){
if (pgNo - 1){
loadScan(PadDigits(pgNo - 1, 3));
} else {
alert("no more pages");
}
}
else if (pgreq == "indexNom"){
var lst = $('#shadowbox_title_inner').find('#indexNom');
lst.blur();
loadScan(lst.val());
$('#shadowbox_title_inner').find('#indexNom option:first').attr('selected', 'selected');
}
else if (pgreq == "indexLoc"){
var lst = $('#shadowbox_title_inner').find('#indexLoc');
lst.blur();
loadScan(lst.val());
$('#shadowbox_title_inner').find('#indexLoc option:first').attr('selected', 'selected');
}
else if (pgreq == "pagefield"){
if (fld.val().replace(/\s/g, "") >= 1 && fld.val().replace(/\s/g, "") <= 200){
loadScan(PadDigits(parseInt(fld.val().replace(/\s/g, ""))+77, 3));
} else if (fld.val().match(/[ivxlIVXL]/) && deromanize(fld.val().replace(/\s/g, "")) < 49){
loadScan(PadDigits(deromanize(fld.val().replace(/\s/g, ""))+2, 3)); // this works!!!
} else {alert("Invalid page request");}
}
fld.attr("value","");
}
function loadPage(pgno){
Shadowbox.open({
options: {
onFinish: function(){pager(pgno);},
enableKeys: false,
overlayColor: "#110",
onClose: function(){$('#shadowbox_title_inner select').hide();}
},
player: 'html',
title: '
back
Index Nominum: Index Locorum:
Go to page number: Introduction: i — xlviii Body text: 1 — 200
forth
',
height: 1000,
width: 1000,
content: $('#page_images').html()
});
};
/*==================================================
* UI tweaks with jQuery
*==================================================
*/
// Initialize jQuery
$(document).ready(function($){
// initialize shadowbox and set options here.
Shadowbox.init();
// Utility Wait function
$.fn.wait = function(time, type) {
time = time || 1000;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};
// Make an accordion from dl content. Opens w/1st dd showing.
$('#about_list dd:not(:first)').hide();
$('#about_list dt').click(function(){
$thisdt = $(this);
$thisdd = $(this).next();
$("#about_list dd:visible").slideUp(function(){
$thisdd.slideDown("slow");
$thisdt.css({"background": "#FF9500", "color": "#221"});
}).prev().css({"background": "#221", "color": "#FF9500"});
});
// Set tab 4 to call loadPage
$('#tab4').click(loadPage);
// How to use the SimileAjax code to create an info bubble on any element w/class .ttip:
// This one just reports the text in the span, but it could be anything.
// 4th parameter, contentWidth is optional: defaults to 300px.
$('.ttip').click(function(ev){
mouseX = ev.pageX;
mouseY = ev.pageY;
bubl = document.createElement('div');
bubl.innerHTML = ""+$(this).text()+"";
SimileAjax.Graphics.createBubbleForContentAndPoint(bubl, mouseX, mouseY, 100, 'bottom');
});
}); // end $(document).ready()
back
