// --------------------------------------------------------------------------------------------------------
// Layer_Show v 2.1
// Display useful additional information on a map by CSS and DIV overlays.
// Content comes dynamically loaded from external files with AJAX.
//
// copyright alta4 Geoinformatik GmbH Trier 2005 - Christoph Knote - knot6b02 [at] uni-trier.de
//
// --------------------------------------------------------------------------------------------------------
// Function list: test
//
// add_to_featurecache: called by AJAX function, creates new feature object for use
// draw_divlayer: main popup drawing function. Runs through caches and displays contents
// z_indexer: gives the feature(id) a good z Index to smooth layering
// visibler: makes features css visible
// isFirefox
// isSafari
// show_layer(id): set position of layer named id to mouse position and make visible
// hide_layer(id): delete shown features -> hide it...
// make_permanent(id): add layer to permanent features, which are not hidden
// xmlhttprequest: actual AJAX function to get content from Attributehtmls
// position_layer: move layer by css to specified position
// get_xml(doc,href,action): switch function what to do with data request (parse to div, to dashboard..)
// reposition_layer: update coords for feature saved in feature object by actual mouse position
// create_divlayerobject fill the featurecache with another nice feature. (also build PopUp frame & position)
// parse_to_photoboard add photo to the board
// position_photoboard move the photoboard according to map extent
// close_photoboard hide the photoboard
// position_dashboard(): looks for id=map_dashboard_hook and positions dashboard beneath actual map position
// parse_to_dashboard(text)
// clear_dashboard()
// clear_one_dashboard(id): delete one feature from the dashboard, identified by index in dashboard_contents array
// draw_dashboard(): finally parse contents with nice "Pope" border
// is_xml(href):
// excerpt_att_string(att): take passed string att (usually html/xml file) and return only
inside string
// init_mousemove: start capturing of mousemovement for x,y coordinates of recent position (to be fired on body load)
// dpl_mouse_pos2(): get mouse position and write coords in global array MausPos(X,Y)
// findPosY(object): get Y coordinate of object
// findPosX(object): get X coordinate of object
// --------------------------------------------------------------------------------------------------------
// declare some globals:
// MausPos are coordinates of the mouse
// zindexcounter counts up when showing layers to put new ones on top of the others
// delaytime is the time in milliseconds between mouseover and popup show
// featurecache: All features coming by AJAX are cached in here and used in the rest of the functions
// shownfeatures: Actually only one feature: the mousemovedover one...
// permanentfeatures: All made_permanent features
// dashedfeatures: All features currently in dashboard
MausPos = new Array(0,0);
zindexcounter = 10;
delaytime = 500;
thepermfeature = "";
featurecache = new Object();
shownfeatures = new Object();
permanentfeatures = false;
dashedfeatures = new Object();
// preloading all the nice images...
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img5 = new Image();
img6 = new Image();
img7 = new Image();
img8 = new Image();
img9 = new Image();
img10 = new Image();
img11 = new Image();
img12 = new Image();
img13 = new Image();
img14 = new Image();
img15 = new Image();
img16 = new Image();
img17 = new Image();
img18 = new Image();
img19 = new Image();
img20 = new Image();
img21 = new Image();
img22 = new Image();
img23 = new Image();
img24 = new Image();
img25 = new Image();
img26 = new Image();
img27 = new Image();
img28 = new Image();
img29 = new Image();
img30 = new Image();
img31 = new Image();
img32 = new Image();
img33 = new Image();
img34 = new Image();
img35 = new Image();
img36 = new Image();
img37 = new Image();
img38 = new Image();
img39 = new Image();
img1.src = "popup_graphics/l.gif"
img2.src = "popup_graphics/lo.gif"
img3.src = "popup_graphics/lo2.gif"
img4.src = "popup_graphics/lu.gif"
img5.src = "popup_graphics/lu2.gif"
img6.src = "popup_graphics/new_pfeil_o.gif"
img7.src = "popup_graphics/new_pfeil_u.gif"
img8.src = "popup_graphics/om.gif"
img9.src = "popup_graphics/r.gif"
img10.src = "popup_graphics/ro.gif"
img11.src = "popup_graphics/ro_01.gif"
img12.src = "popup_graphics/ro_02.gif"
img13.src = "popup_graphics/ru.gif"
img14.src = "popup_graphics/s_l.gif"
img15.src = "popup_graphics/s_lo.gif"
img16.src = "popup_graphics/s_lo_2.gif"
img17.src = "popup_graphics/s_lo_5.gif"
img18.src = "popup_graphics/s_lo_dash.gif"
img19.src = "popup_graphics/s_lo2.gif"
img20.src = "popup_graphics/s_lu.gif"
img21.src = "popup_graphics/s_lu_3.gif"
img22.src = "popup_graphics/s_lu_4.gif"
img23.src = "popup_graphics/s_lu2.gif"
img24.src = "popup_graphics/s_om.gif"
img25.src = "popup_graphics/s_om_5.gif"
img26.src = "popup_graphics/s_pfeil_o.gif"
img27.src = "popup_graphics/s_pfeil_o_2.gif"
img28.src = "popup_graphics/s_r.gif"
img29.src = "popup_graphics/kreuz_1.gif"
img30.src = "popup_graphics/s_ro.gif"
img31.src = "popup_graphics/s_ro_2.gif"
img32.src = "popup_graphics/pfeil_uw.gif"
img33.src = "popup_graphics/s_ru.gif"
img34.src = "popup_graphics/s_ru_2.gif"
img35.src = "popup_graphics/s_ru_3.gif"
img36.src = "popup_graphics/s_u2.gif"
img37.src = "popup_graphics/s_um.gif"
img38.src = "popup_graphics/s_um_2.gif"
img39.src = "popup_graphics/spacer.gif"
function add_to_featurecache(id,href,content,text) {
// laufzeitanalyse("add_to_featurecache");
featurecache[id] = new Object();
featurecache[id]["content"] = content;
featurecache[id]["href"] = href;
featurecache[id]["rawtext"] = text;
featurecache[id]["X"] = 0;
featurecache[id]["Y"] = 0;
featurecache[id]["oben"] = 0;
featurecache[id]["schattenoben"] = 0;
featurecache[id]["links"] = 0;
featurecache[id]["schattenlinks"] = 0;
featurecache[id]["dashed"] = false;
featurecache[id]["permanent"] = false;
}
function draw_divlayer() {
// laufzeitanalyse("draw_divlayer");
zindexcounter = 10;
document.getElementById("divlayer_container").innerHTML = "";
if ((thepermfeature != "")&&(featurecache[thepermfeature])) {
document.getElementById("divlayer_container").innerHTML += featurecache[thepermfeature]["content"];
z_indexer(thepermfeature);
visibler(thepermfeature);
}
for (var Etim in shownfeatures) {
document.getElementById("divlayer_container").innerHTML += shownfeatures[Etim]["content"];
z_indexer(Etim);
visibler(Etim);
}
}
function z_indexer(id) {
// laufzeitanalyse("z_indexer");
var attributelayer = document.getElementById(id+"_attributelayer");
var schattenlayer = document.getElementById(id+"_schattenlayer");
zindexcounter = zindexcounter+2;
attributelayer.style.zIndex = zindexcounter;
schattenlayer.style.zIndex = zindexcounter-1;
}
function visibler(id) {
// laufzeitanalyse("visibler");
var attributelayer = document.getElementById(id+"_attributelayer");
var schattenlayer = document.getElementById(id+"_schattenlayer");
attributelayer.style.visibility = "visible";
schattenlayer.style.visibility = "visible";
}
function isFirefox() {
// laufzeitanalyse("isFirefox");
var ua = navigator.userAgent.toLowerCase();
if((ua.indexOf("mozilla") != -1) && (ua.indexOf("firefox") != -1)) return true;
else return false;
}
function isSafari() {
// laufzeitanalyse("isSafari");
var ua = navigator.userAgent.toLowerCase();
if((ua.indexOf("mozilla") != -1) && (ua.indexOf("safari") != -1)) return true;
else return false;
}
function isPoint(id) {
// laufzeitanalyse("isPoint");
var feature = document.getElementById(id+"_area");
if (feature.shape == "circle") {
return true;
}
else {
return false;
}
}
function show_layer(id) {
// laufzeitanalyse("show_layer");
shownfeatures = new Object();
if (isMouseOverFeature(id)) {
shownfeatures[id] = featurecache[id];
draw_divlayer();
position_layer(id);
visibler(id);
}
else draw_divlayer();
}
function hide_layer(id) {
// laufzeitanalyse("hide_layer");
shownfeatures = new Object();
draw_divlayer();
}
function isMouseOverFeature(id) {
// laufzeitanalyse("isMouseOverFeature");
var deltax = abs(MausPos[0]-featurecache[id]["X"]);
var deltay = abs(MausPos[1]-featurecache[id]["Y"]);
if ((deltay < 10) && (deltax < 10)) {
return true;
}
else return false;
}
// Saves hotspots that are permanent
function make_permanent(id) {
if (thepermfeature == id) {
thepermfeature = "";
}
else {
thepermfeature = id;
if(featurecache[id]) setatt(featurecache[id]["rawtext"]);
}
draw_divlayer();
}
// AJAX - get content from other files without reloading the whole page
function xmlhttprequest(doc,href,action) {
// laufzeitanalyse("xmlhttprequest");
try {
var requester = new XMLHttpRequest();
}
catch (error) {
try {
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
}
}
requester.open("GET", href);
checked = "";
requester.onreadystatechange=function() {
if (requester.readyState == 4) {
// Die Daten sind jetzt alle da, wir machen was mit ihnen.
// tocheck enthaelt jetzt einen String mit dem Inhalt der Seite "href"
var tocheck = requester.responseText;
// mit dieser Tabelle tun wir nun das, was in der action verlangt wird:
if (action == "parse_to_div") {
// jetzt ziehen wir mit normalen Stringfunktionen die Attributtabelle aus dem HTML Dokument und verwerfen den Rest
checked = excerpt_att_string(tocheck);
create_divlayerobject(doc,href,checked);
var aufruf = "show_layer('"+doc+"')";
window.setTimeout(aufruf,delaytime);
// die Variable att enthaelt das, was als Attributtabelle zum Drucken verwendet wird und kann hier gleich mit gesetzt werden.
att = checked;
}
if (action == "parse_to_att") {
// jetzt ziehen wir mit normalen Stringfunktionen die Attributtabelle aus dem HTML Dokument und verwerfen den Rest
checked = excerpt_att_string(tocheck);
att = checked;
}
if (action == "parse_to_map") {
checked = excerpt_map(tocheck);
parse_to_map(checked);
}
}
}
// nun noch das Objekt zuruecksetzen
requester.send(null);
}
// fertig
function position_layer(id) {
// laufzeitanalyse("position_layer");
var attributelayer = document.getElementById(id+"_attributelayer");
var schattenlayer = document.getElementById(id+"_schattenlayer");
attributelayer.style.top = featurecache[id]["oben"]+"px";
schattenlayer.style.top = featurecache[id]["schattenoben"]+"px";
attributelayer.style.left = featurecache[id]["links"]+"px";
schattenlayer.style.left = featurecache[id]["schattenlinks"]+"px";
}
function get_xml(doc, href, action) {
// laufzeitanalyse("get_xml");
switch(action) {
case "parse_to_div":
if (featurecache[doc]) {
if (((abs(featurecache[doc]["oben"] - MausPos[1])) > 15) && (featurecache[doc]["dashed"] == false)) {
if(doc != thepermfeature) {
reposition_layer(doc);
}
}
var aufruf = "show_layer('"+doc+"')";
window.setTimeout(aufruf,delaytime);
}
else {
xmlhttprequest(doc,href,"parse_to_div");
}
break;
case "parse_to_dashboard":
parse_to_dashboard(doc);
break;
case "parse_to_att":
xmlhttprequest(doc,href,"parse_to_att");
break;
case "parse_to_map":
xmlhttprequest(doc,href,"parse_to_map");
break;
}
}
function reposition_layer(id) {
// laufzeitanalyse("reposition_layer");
var attributelayer = "";
var schattenlayer = "";
var oben = 0;
var schattenoben = 0;
var links = 0;
var schattenlinks = 0;
var tableoffset = 209;
var href = featurecache[id]["href"];
var text = featurecache[id]["rawtext"];
var DieMaus = new Array();
var maptag_oben = "";
var maptag_unten = "";
if (isPoint(id)) {
DieMaus = extract_point_coords(id);
}
else {
DieMaus[0] = MausPos[0];
DieMaus[1] = MausPos[1];
}
// if DIV would be out of screen, change Popup "direction"
if((DieMaus[1]-5-tableoffset) <= 2) {
oben = DieMaus[1]-7;
schattenoben = DieMaus[1]-2;
// maptag_oben = '';
attributelayer = '';
schattenlayer = '';
}
else {
oben = DieMaus[1]-15-tableoffset;
schattenoben = DieMaus[1]-10-tableoffset;
// maptag_unten = '';
attributelayer = '';
schattenlayer = '';
}
links = DieMaus[0]-10;
schattenlinks = DieMaus[0]-5;
var content = ''+attributelayer+'
'+schattenlayer+'
';
featurecache[id]["X"] = DieMaus[0];
featurecache[id]["Y"] = DieMaus[1];
featurecache[id]["oben"] = oben;
featurecache[id]["schattenoben"] = schattenoben;
featurecache[id]["links"] = links;
featurecache[id]["schattenlinks"] = schattenlinks;
featurecache[id]["content"] = content;
}
function extract_point_coords(id) {
// laufzeitanalyse("extract_point_coords");
var feature = document.getElementById(id+"_area");
var coords_raw = feature.coords;
var coords = coords_raw.split(",");
var TheMap = document.getElementById("TheMap");
coords[0] = Number(coords[0])+Number(findPosX(TheMap));
coords[1] = Number(coords[1])+Number(findPosY(TheMap));
return coords;
}
// write content in PopUp (two times, also written in the shadow layer)
function create_divlayerobject(id,href,text) {
// laufzeitanalyse("create_divlayerobject");
var content = "";
add_to_featurecache(id,href,content,text);
reposition_layer(id);
}
function parse_to_photoboard(id,href) {
// laufzeitanalyse("parse_to_photoboard");
var mesaje = '
';
document.getElementById("photoboard_anchor").innerHTML = mesaje;
document.getElementById("photoboard_shadowanchor").innerHTML = mesaje;
document.getElementById("photoboard").style.visibility = "visible";
document.getElementById("photoboard_attributelayer").style.visibility = "visible";
document.getElementById("photoboard_schattenlayer").style.visibility = "visible";
}
function parse_to_map(content) {
// laufzeitanalyse("parse_to_map");
document.getElementById("map_container").innerHTML = content;
}
function position_photoboard() {
// laufzeitanalyse("position_photoboard");
var manualWidth = "460px";
var itemID = "photoboard";
var hookID = "map_photoboard_hook";
var PosY = findPosY(document.getElementById(hookID)) + 20;
var PosX = findPosX(document.getElementById(hookID)) + 40;
document.getElementById(itemID).style.top = PosY + "px";
document.getElementById(itemID).style.left = PosX + "px";
// Firefox won't expand the DIV depending on content width -> manual (Safari too)
if (isFirefox()) {
document.getElementById(itemID).style.width = manualWidth;
document.getElementById(itemID+'_anchor').style.width = manualWidth;
document.getElementById(itemID+'_shadowanchor').style.width = manualWidth;
}
if(isSafari()) {
document.getElementById(itemID).style.width = manualWidth;
document.getElementById(itemID+'_anchor').style.width = manualWidth;
document.getElementById(itemID+'_shadowanchor').style.width = manualWidth;
}
close_photoboard();
}
function close_photoboard() {
// laufzeitanalyse("close_photoboard");
document.getElementById("photoboard").style.visibility = "hidden";
document.getElementById("photoboard_attributelayer").style.visibility = "hidden";
document.getElementById("photoboard_schattenlayer").style.visibility = "hidden";
}
// dashboard functions
// position dashboard (dependent on map)
function position_dashboard() {
// laufzeitanalyse("position_dashboard");
var PosY = findPosY(document.getElementById("map_dashboard_hook")) - 20;
var PosX = findPosX(document.getElementById("map_dashboard_hook")) + 35;
document.getElementById("dashboard").style.top = PosY + "px";
document.getElementById("dashboard").style.left = PosX + "px";
// Firefox won't expand the DIV depending on content width -> manual (Safari too)
if (isFirefox()) {
document.getElementById('dashboard').style.width = "250px";
document.getElementById('dashboard_anchor').style.width = "250px";
document.getElementById('dashboard_shadowanchor').style.width = "250px";
}
if(isSafari()) {
document.getElementById('dashboard').style.width = "250px";
document.getElementById('dashboard_anchor').style.width = "250px";
document.getElementById('dashboard_shadowanchor').style.width = "250px";
}
document.getElementById("dashboard").style.visibility = "hidden";
document.getElementById("dashboard_attributelayer").style.visibility = "hidden";
document.getElementById("dashboard_schattenlayer").style.visibility = "hidden";
}
function parse_to_dashboard(id) {
// laufzeitanalyse("parse_to_dashboard");
var backlink_text = '
<=
';
var mesaje = featurecache[id]["rawtext"]+""+backlink_text;
dashedfeatures[id] = new Object();
featurecache[id]['dashed'] = true;
dashedfeatures[id]['content'] = mesaje;
draw_dashboard();
}
function clear_dashboard() {
// laufzeitanalyse("clear_dashboard");
document.getElementById("dashboard_anchor").innerHTML = "";
document.getElementById("dashboard_shadowanchor").innerHTML = "";
document.getElementById("dashboard").style.visibility = "hidden";
document.getElementById("dashboard_attributelayer").style.visibility = "hidden";
document.getElementById("dashboard_schattenlayer").style.visibility = "hidden";
dashedfeatures = new Object();
}
function clear_one_dashboard(id) {
// laufzeitanalyse("clear_one_dashboard");
provisional_cache = new Object();
var count = 0;
for (var Item in dashedfeatures) {
if(Item != id) { provisional_cache[Item] = dashedfeatures[Item]; }
else { featurecache[Item]['dashed'] = false; }
count ++;
}
dashedfeatures = new Object();
dashedfeatures = provisional_cache;
if (count<=1) clear_dashboard();
else draw_dashboard();
}
function draw_dashboard() {
// laufzeitanalyse("draw_dashboard");
var content = "";
// get contents from global array
for (var Item in dashedfeatures) {
content += '
'+dashedfeatures[Item]['content'];
}
// parse em, Manni!
document.getElementById("dashboard_anchor").innerHTML = content;
document.getElementById("dashboard_shadowanchor").innerHTML = content;
document.getElementById("dashboard").style.visibility = "visible";
document.getElementById("dashboard_attributelayer").style.visibility = "visible";
document.getElementById("dashboard_schattenlayer").style.visibility = "visible";
}
// just get the necessary portion out of "att".html
function excerpt_att_string (att) {
// laufzeitanalyse("excerpt_att_string");
var Beginning = att.indexOf("');
var Ending = map.indexOf("");
return map.slice(Beginning,Ending);
}
// get mouse position
// find out if ie runs in quirks mode
var docEl = ( typeof document.compatMode != "undefined" && document.compatMode != "BackCompat")? "documentElement" : "body";
// capture it for nc 4x
function init_mousemove() {
// laufzeitanalyse("init_mousemove");
if(document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = dpl_mouse_pos2;
}
// really get coordinates and write into global mouse array
function dpl_mouse_pos2(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
MausPos[0] = posx;
MausPos[1] = posy;
}
// get object position
function findPosX(obj){
// laufzeitanalyse("findPosX");
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj) {
// laufzeitanalyse("findPosY");
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function abs(number) {
if (number < 0) number = -number;
return number;
}
// have a nice day!
// following code is only for debugging
// debugging = true;
// LaufZeitCounter = 0;
// Countings = new Array();
// LaufZeit = window.open("leer.html","LaufZeit","width=200,height=450");
// LaufReihe = window.open("leer.html","LaufReihe","width=200,height=450");
//
// function laufzeitanalyse(funktion) {
// var tester = false;
// for (var Eigenschaft in Countings) {
// if (Eigenschaft == funktion) {
// tester = true;
// }
// }
// if(tester) {
// Countings[funktion]++;
// }
// else {
// Countings[funktion] = 1;
// }
// var mesaje = "";
// for (var Item in Countings) {
// mesaje += Item+" : "+Countings[Item]+"\n
";
// }
// LaufZeitCounter++;
// mesaje += "featcache: "+count_divlayer()+"\n
";
// mesaje += "shownfeat: "+count_divlayer_vis()+"\n
";
// mesaje += "permfeat: "+count_divlayer_perm()+"\n
";
// mesaje += "zIndexCounter: "+zindexcounter+"\n
";
// update_LaufZeit(mesaje);
// update_LaufReihe(funktion);
// }
//
// function update_LaufReihe(funktion) {
// LaufReihe.document.getElementById("textblock").innerHTML += funktion+"
\n";
// }
//
// function update_LaufZeit(mesaje) {
// LaufZeit.document.getElementById("textblock").innerHTML = mesaje;
// }
//
// function count_divlayer() {
// var counti = 0;
// var tekst = "";
// for (var Item in featurecache) {
// counti ++;
// tekst += Item+", ";
// }
// return tekst+" TOTAL: "+counti;
// }
//
// function count_divlayer_vis() {
// var counti = 0;
// var tekst = "";
// for (var Item in shownfeatures) {
// counti ++;
// tekst += Item+", ";
// }
// return tekst+" TOTAL: "+counti;
// }
//
// function count_divlayer_perm() {
// var tekst = "";
// for (var Item = 0; permanentfeatures.length; Item++) {
// tekst += Item+", ";
// }
// return tekst+" TOTAL: "+permanentfeatures.length;
// }