# HG changeset patch
# User hertzhaft
# Date 1353873673 -3600
# Node ID 09691152636e442530a16c0ee30fc6df0866f190
# Parent  f3e7b847d44b5973e41c7b22e54fbe6522400bf1
steps towards a svg measuring tool

diff -r f3e7b847d44b -r 09691152636e webapp/src/main/webapp/jquery/jquery.digilib.svg.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.svg.js	Fri Nov 23 18:02:52 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.svg.js	Sun Nov 25 21:01:13 2012 +0100
@@ -26,42 +26,106 @@
 
 (function($) {
 
-    // plugin object with digilib data
+    // the digilib object
     var digilib = null;
+    // the normal zoom area
+    var FULL_AREA = null;
     // the functions made available by digilib
-    var fn = null;
+    var fn = {
+        // dummy function to avoid errors, gets overwritten by buttons plugin
+        highlightButtons : function () {
+            console.debug('svg: dummy function - highlightButtons');
+            }
+        };
     // affine geometry plugin
     var geom = null;
+    // convenience variable, set in init()
+    var CSS = '';
 
-    var defaults = {};
+    var buttons = {
+        toolbar : {
+            onclick : "toolbar",
+            tooltip : "show toolbar",
+            icon : "showregions.png"
+            },
+        line : {
+            onclick : "line",
+            tooltip : "draw measuring line",
+            icon : "addregion.png"
+            }
+        };
+
+    var defaults = {
+        // buttonset of this plugin
+        svgSet : ['toolbar', 'line'],
+        // choice of colors offered by toolbar
+        lineColors : ['white', 'red', 'yellow', 'green', 'blue', 'black'],
+        // default color
+        lineColor : 'white',
+        // color while the line is drawn
+        drawColor : 'green',
+        // color of selected objects
+        selectColor : 'red',
+        // drawing shapes
+        shapes : ['line', 'polyline', 'rectangle', 'square', 'circle', 'arch',
+            'ratio', 'intercolumnium', 'line grid'],
+        // default shape
+        shape : 'line',
+        // measuring unit (index into list)
+        unit : 1,
+        // converted unit (index into list)
+        converted : 2,
+        // last measured distance 
+        lastDistance : 0,
+        // last measured angle 
+        lastAngle : 0,
+        // maximal denominator for mixed fractions
+        maxDenominator : 20,
+        // number of decimal places for convert results
+        maxDecimals : 3,
+        // show convert result as mixed fraction?
+        showMixedFraction : false,
+        // show angle relative to last line?
+        showRelativeAngle : false,
+        // show distance numbers?
+        showDistanceNumbers : true,
+        // show ratio of rectangle sides?
+        showRectangleRatios : false,
+        // draw line ends as small crosses
+        drawEndPoints : true,
+        // draw mid points of lines
+        drawMidPoints : false,
+        // draw circle centers
+        drawCenters : false,
+        // draw rectangles from the diagonal and one point
+        drawFromDiagonal : false,
+        // draw circles from center
+        drawFromCenter : false,
+        // snap to endpoints
+        snapEndPoints : false,
+        // snap to mid points of lines
+        snapMidPoints : false,
+        // snap to circle centers
+        snapCenters : false,
+        // snap distance (in screen pixels)
+        snapDistance : 5,
+        // keep original object when moving/scaling/rotating
+        keepOriginal : false,
+        // number of copies when drawing grids
+        gridCopies : 10
+        };
 
     var actions = {
-        "test" : function(options) {
-            var onLoadXML = function (xml) {
-                settings.xml = xml;
-                settings.$toolBar = setupToolBar(settings);
-                $digilib.each(function() {
-                    var $elem = $(this);
-                    $elem.data(pluginName, settings);
-                    });
+        toolbar : function(data) {
+            var $toolbar = data.settings.$toolbar;
+            if ($toolbar) {
+                return $toolbar.toggle();
                 };
-            var onLoadScalerImg = function () {
-                var $svgDiv = $('<div id="svg" />');
-                $('body').append($svgDiv);
-                // size SVG div like scaler img
-                var $scalerImg = $digilib.find('img.pic');
-                var scalerImgRect = geom.rectangle($scalerImg);
-                scalerImgRect.adjustDiv($svgDiv);
-                console.debug('$svgDiv', scalerImgRect);
-                var $svg = $svgDiv.svg({
-                        'onLoad' : drawInitial
-                    });
-                settings.$elem = $digilib;
-                settings.$svgDiv = $svgDiv;
-                settings.$svg = $svg;
-                // set SVG data 
-                $svg.data('digilib', data);
-                $svg.data(pluginName, settings);
+            $toolbar = setupToolbar(data);
+            var onLoadXML = function (xml) {
+                $xml = $(xml);
+                data.settings.$xml = $xml;
+                loadToolbarData(data, $toolbar, $xml);
                 };
             // fetch the XML measuring unit list
             $.ajax({
@@ -70,11 +134,108 @@
                 dataType : "xml",
                 success : onLoadXML
                 });
-            data.$img.load(onLoadScalerImg);
+            // data.$img.load(onLoadScalerImg);
             return this;
+            },
+        line : function(data) {
+            //
             }
         };
 
+    // setup a div for accessing the main SVG functionality
+    var setupToolbar = function(data) {
+        var html = '\
+            <div id="svg-toolbar">\
+                <select id="svg-shapes"/>\
+                <span class="svg-label">pixel</span>\
+                <span id="svg-pixel" class="svg-number">0.0</span>\
+                <span class="svg-label">factor</span>\
+                <span id="svg-factor" class="svg-number">0.0</span>\
+                <input id="svg-value1" class="svg-input" value="0.0"/>\
+                <span class="svg-label">=</span>\
+                <select id="svg-unit1"/>\
+                <input id="svg-value2" class="svg-input" value="0.0"/>\
+                <span class="svg-label">=</span>\
+                <select id="svg-unit2"/>\
+                <span id="svg-angle" class="svg-number">0.0</span>\
+            </div>';
+        var $toolbar = $(html);
+        data.$elem.append($toolbar);
+        data.settings.$toolbar = $toolbar;
+        $toolbar.show();
+        return $toolbar;
+        };
+
+    // load shapes into select element
+    var loadShapes = function(data, $toolbar) {
+        var $shape = $toolbar.find('#svg-shapes');
+        $.each(data.settings.shapes, function(index, name) {
+            var $opt = $('<option value="'+index+'">'+name+'</option>');
+            $shape.append($opt);
+            });
+    };
+
+    // load units into select elements
+    var loadSections = function(data, $toolbar, $xml) {
+        var $unit1 = $toolbar.find('#svg-unit1');
+        var $unit2 = $toolbar.find('#svg-unit2');
+        $xml.find("section").each(function(index, section) {
+            var $section = $(section);
+            var name = $section.attr("name");
+            var $opt = $('<option class="section" disabled="disabled">'+name+'</option>');
+            $unit1.append($opt);
+            $unit2.append($opt.clone());
+            $section.find("unit").each(function(index, unit) {
+                var $unit = $(unit);
+                var name = $unit.attr("name");
+                var factor = $unit.attr("factor"); 
+                var $opt = $('<option class="unit" value="'+factor+'">'+ name+'</option>');
+                $opt.data('unit', {
+                    'name' : name,
+                    'factor' : factor, 
+                    'add' : $unit.attr("add"), 
+                    'subunits' : $unit.attr("subunits")
+                    });
+                $unit1.append($opt);
+                $unit2.append($opt.clone());
+                });
+            });
+    };
+
+    // setup a div for accessing the main SVG functionality
+    var loadToolbarData = function(data, $toolbar, $xml) {
+        loadShapes(data, $toolbar);
+        loadSections(data, $toolbar, $xml);
+    };
+
+    var drawInitial = function ($svg) {
+        console.debug('SVG is ready');
+        var $svgDiv = $(this);
+        var rect = geom.rectangle($svgDiv);
+        $svg.line(0, 0, rect.width, rect.height,
+            {stroke: 'white', strokeWidth: 2});
+        $svg.line(0, rect.height, rect.width, 0,
+            {stroke: 'red', strokeWidth: 2});
+        };
+
+    var handleSetup = function (evt) {
+        console.debug("svg: handleSetup");
+        var data = this;
+        var settings = data.settings;
+    };
+
+    // additional buttons
+    var installButtons = function (data) {
+        var settings = data.settings;
+        var mode = settings.interactionMode;
+        var buttonSettings = settings.buttonSettings[mode];
+        var buttonSet = settings.svgSet;
+        if (buttonSet.length && buttonSet.length > 0) {
+            buttonSettings.svgSet = buttonSet;
+            buttonSettings.buttonSets.push('svgSet');
+            }
+    };
+
     // plugin installation called by digilib on plugin object.
     var install = function (plugin) {
         digilib = plugin;
@@ -83,28 +244,32 @@
         // import geometry classes
         geom = fn.geometry;
         // add defaults, actions, buttons
-        $.extend(true, digilib.defaults, defaults); // make deep copy
+        $.extend(true, digilib.defaults, defaults);
         $.extend(digilib.actions, actions);
+        $.extend(true, digilib.buttons, buttons);
         // export functions
         // fn.test = test;
     };
 
     // plugin initialization
     var init = function (data) {
-        console.debug('initialising digilibSVG plugin. data:', data);
+        console.debug('initialising svg plugin. data:', data);
+        var settings = data.settings;
+        CSS = settings.cssPrefix;
+        FULL_AREA  = geom.rectangle(0, 0, 1, 1);
+        // install event handlers
         var $data = $(data);
-        $data.bind('setup', handleSetup);
-    };
-
-    var handleSetup = function (evt) {
-        console.debug("svg: handleSetup");
-        var data = this;
-        var settings = data.settings;
+        $data.on('setup', handleSetup);
+        // $data.on('update', handleUpdate);
+        // install region buttons if user defined regions are allowed
+        if (digilib.plugins.buttons != null) {
+            installButtons(data);
+        }
     };
 
     // plugin object with name and init
     // shared objects filled by digilib on registration
-    var plugin = {
+    var pluginProperties = {
             name : 'svg',
             install : install,
             init : init,
@@ -117,6 +282,6 @@
     if ($.fn.digilib == null) {
         $.error("jquery.digilib.svg must be loaded after jquery.digilib!");
     } else {
-        $.fn.digilib('plugin', plugin);
+        $.fn.digilib('plugin', pluginProperties);
     }
 })(jQuery);
diff -r f3e7b847d44b -r 09691152636e webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.css
--- a/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.css	Fri Nov 23 18:02:52 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,112 +0,0 @@
-/* 
- * CSS style file for digilib SVG measuring tool
- *
- * Martin Raspe, Robert Casties, 11.1.2011
- */
-body {
-    background: silver;
-    font-family: Tahoma, Helvetica, Arial;
-    }
- 
-div#svg-toolbar {
-    color: grey;
-    background-color: grey;
-    position: fixed;
-    left: 8px;
-    bottom: 8px;
-    border: 1px solid black;
-    z-index: 1000;
-    }
-
-span.svg-label {
-    font-size: 12px;
-    padding: 0px 3px;
-    color: silver;
-    background-color: grey;
-    }
-
-span.svg-number {
-    font-size: 12px;
-    padding: 0px 3px;
-    display: inline-block;
-    width: 50px;
-    background-color: grey;
-    color: white;
-    text-align: right;
-    }
-
-select {
-    font-size: 12px;
-    padding: 0px 3px;
-    margin: 0px;
-    display: inline-block;
-    background-color: grey;
-    color: lightgreen;
-    border: none;
-    }
-
-option.section {
-    border-bottom: 1px dotted grey;
-    padding-left: 10px;
-}
-
-input.svg-input {
-    width: 50px;
-    font-size: 12px;
-    padding: 0px 3px;
-    margin: 0px;
-    display: inline-block;
-    background-color: grey;
-    color: lightgreen;
-    border: none;
-    text-align: right;
-    }
-
-select:hover, select:active, select:focus,
-input.svg-input:hover, input.svg-input:active, input.svg-input:focus {
-    background-color: white;
-    color: black;
-    }
-
-div.digilib {
-    margin: 0px;
-}
-
-div.svg {
-    position: absolute;
-    background: transparent;
-}
-
-td {
-    vertical-align: top;
-    }
-
-div#test:hover {
-    background-color: cornsilk;
-    }
-
-#debug {
-    background-color: beige;
-    position: absolute;
-    opacity: 50%;
-    top: 4px;
-    left: 300px;
-    width: 500px;
-    padding: 0px 5px;
-    font-family: Arial;
-    font-size: 9px;
-    display: none;
-    }
-
-div._log {
-    color: grey;
-    }
-
-div._debug {
-    color: darkgreen;
-    }
-
-div._error {
-    color: red;
-    }
-
diff -r f3e7b847d44b -r 09691152636e webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js
--- a/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js	Fri Nov 23 18:02:52 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,254 +0,0 @@
-/* Copyright (c) 2011 Martin Raspe, Robert Casties
- 
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Lesser General Public License as published by
-the Free Software Foundation, either version 2 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Lesser General Public License for more details.
-
-You should have received a copy of the GNU Lesser General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
- 
-Authors:
-  Martin Raspe, Robert Casties, 9.2.2011 - 26.3.2012
-
-*/
-
-/**
- * digilib SVG plugin (measuring tool for use within the digilib jQuery plugin)
-**/ 
-
-/* jslint browser: true, debug: true, forin: true
-*/
-
-(function($) {
-
-    // plugin object with digilib data
-    var digilib = null;
-    // the functions made available by digilib
-    var fn = null;
-    // affine geometry plugin
-    var geom = null;
-
-    var defaults = {
-        // choice of colors offered by toolbar
-        lineColors : ['white', 'red', 'yellow', 'green', 'blue', 'black'],
-        // default color
-        lineColor : 'white',
-        // color while the line is drawn
-        drawColor : 'green',
-        // color of selected objects
-        selectColor : 'red',
-        // drawing shapes
-        shapes : ['line', 'polyline', 'rectangle', 'square', 'circle', 'arch',
-            'ratio', 'intercolumn', 'line grid'],
-        // default shape
-        shape : 'line',
-        // measuring unit (index into list)
-        unit : 1,
-        // converted unit (index into list)
-        converted : 2,
-        // last measured distance 
-        lastDistance : 0,
-        // last measured angle 
-        lastAngle : 0,
-        // maximal denominator for mixed fractions
-        maxDenominator : 20,
-        // number of decimal places for convert results
-        maxDecimals : 3,
-        // show convert result as mixed fraction?
-        showMixedFraction : false,
-        // show angle relative to last line?
-        showRelativeAngle : false,
-        // show distance numbers?
-        showDistanceNumbers : true,
-        // show ratio of rectangle sides?
-        showRectangleRatios : false,
-        // draw line ends as small crosses
-        drawEndPoints : true,
-        // draw mid points of lines
-        drawMidPoints : false,
-        // draw circle centers
-        drawCenters : false,
-        // draw rectangles from the diagonal and one point
-        drawFromDiagonal : false,
-        // draw circles from center
-        drawFromCenter : false,
-        // snap to endpoints
-        snapEndPoints : false,
-        // snap to mid points of lines
-        snapMidPoints : false,
-        // snap to circle centers
-        snapCenters : false,
-        // snap distance (in screen pixels)
-        snapDistance : 5,
-        // keep original object when moving/scaling/rotating
-        keepOriginal : false,
-        // number of copies when drawing grids
-        gridCopies : 10
-        };
-
-    var actions = {
-        "test" : function(options) {
-            var onLoadXML = function (xml) {
-                settings.xml = xml;
-                settings.$toolBar = setupToolBar(settings);
-                $digilib.each(function() {
-                    var $elem = $(this);
-                    $elem.data(pluginName, settings);
-                    });
-                };
-            var onLoadScalerImg = function () {
-                var $svgDiv = $('<div id="svg" />');
-                $('body').append($svgDiv);
-                // size SVG div like scaler img
-                var $scalerImg = $digilib.find('img.pic');
-                var scalerImgRect = geom.rectangle($scalerImg);
-                scalerImgRect.adjustDiv($svgDiv);
-                console.debug('$svgDiv', scalerImgRect);
-                var $svg = $svgDiv.svg({
-                        'onLoad' : drawInitial
-                    });
-                settings.$elem = $digilib;
-                settings.$svgDiv = $svgDiv;
-                settings.$svg = $svg;
-                // set SVG data 
-                $svg.data('digilib', data);
-                $svg.data(pluginName, settings);
-                };
-            // fetch the XML measuring unit list
-            $.ajax({
-                type : "GET",
-                url : "svg/archimedes.xml",
-                dataType : "xml",
-                success : onLoadXML
-                });
-            data.$img.load(onLoadScalerImg);
-            return this;
-            }
-        };
-
-    // setup a div for accessing the main SVG functionality
-    var setupToolBar = function(settings) {
-        var $toolBar = $('<div id="svg-toolbar"/>');
-        // shapes select
-        var $shape = $('<select id="svg-shapes"/>');
-        for (var i = 0; i < settings.shapes.length; i++) {
-            var name = settings.shapes[i];
-            var $opt = $('<option value="' + i + '">' + name + '</option>');
-            $shape.append($opt);
-            }
-        // console.debug($xml);
-        var $xml = $(settings.xml);
-        // unit selects
-        var $unit1 = $('<select id="svg-convert1"/>');
-        var $unit2 = $('<select id="svg-convert2"/>');
-
-        $xml.find("section").each(function() {
-            var $section = $(this);
-            var name = $section.attr("name");
-            // append section name as option
-            var $opt = $('<option class="section" disabled="disabled">' + name + '</option>');
-            $unit1.append($opt);
-            $unit2.append($opt.clone());
-            $section.find("unit").each(function() {
-                var $unit = $(this);
-                var name = $unit.attr("name");
-                var factor = $unit.attr("factor"); 
-                var $opt = $('<option class="unit" value="' + factor + '">' + name + '</option>');
-                $opt.data(pluginName, {
-                    'name' : name,
-                    'factor' : factor, 
-                    'add' : $unit.attr("add"), 
-                    'subunits' : $unit.attr("subunits")
-                    });
-                $unit1.append($opt);
-                $unit2.append($opt.clone());
-                });
-            });
-        // settings.units = units;
-        // other elements
-        var $la1 = $('<span class="svg-label">pixel</span>');
-        var $la2 = $('<span class="svg-label">factor</span>');
-        var $la3 = $('<span class="svg-label">=</span>');
-        var $la4 = $('<span class="svg-label">=</span>');
-        var $px = $('<span id="svg-pixel" class="svg-number">0.0</span>');
-        var $factor = $('<span id="svg-factor" class="svg-number">0.0</span>');
-        var $result1 = $('<input id="svg-unit1" class="svg-input" value="0.0"/>');
-        var $result2 = $('<input id="svg-unit2" class="svg-input" value="0.0"/>');
-        var $angle = $('<span id="svg-angle" class="svg-number">0.0</span>');
-        $('body').append($toolBar);
-        $toolBar.append($shape);
-        $toolBar.append($la1);
-        $toolBar.append($px);
-        $toolBar.append($la2);
-        $toolBar.append($factor);
-        $toolBar.append($la3);
-        $toolBar.append($result1);
-        $toolBar.append($unit1);
-        $toolBar.append($la4);
-        $toolBar.append($result2);
-        $toolBar.append($unit2);
-        $toolBar.append($angle);
-        return $toolBar;
-        };
-
-    var drawInitial = function ($svg) {
-        console.debug('SVG is ready');
-        var $svgDiv = $(this);
-        var rect = geom.rectangle($svgDiv);
-        $svg.line(0, 0, rect.width, rect.height,
-            {stroke: 'white', strokeWidth: 2});
-        $svg.line(0, rect.height, rect.width, 0,
-            {stroke: 'red', strokeWidth: 2});
-        };
-
-    // plugin installation called by digilib on plugin object.
-    var install = function (plugin) {
-        digilib = plugin;
-        console.debug('installing digilibSVG plugin. digilib:', digilib);
-        fn = digilib.fn;
-        // import geometry classes
-        geom = fn.geometry;
-        // add defaults, actions, buttons
-        $.extend(true, digilib.defaults, defaults); // make deep copy
-        $.extend(digilib.actions, actions);
-        // export functions
-        // fn.test = test;
-    };
-
-    // plugin initialization
-    var init = function (data) {
-        console.debug('initialising digilibSVG plugin. data:', data);
-        var $data = $(data);
-        $data.bind('setup', handleSetup);
-    };
-
-    var handleSetup = function (evt) {
-        console.debug("digilibSVG: handleSetup");
-        var data = this;
-        var settings = data.settings;
-    };
-
-    // plugin object with name and init
-    // shared objects filled by digilib on registration
-    var plugin = {
-            name : 'digilibSVG',
-            install : install,
-            init : init,
-            buttons : {},
-            actions : {},
-            fn : {},
-            plugins : {}
-    };
-
-    if ($.fn.digilib == null) {
-        $.error("jquery.digilibSVG must be loaded after jquery.digilib!");
-    } else {
-        $.fn.digilib('plugin', plugin);
-    }
-})(jQuery);
diff -r f3e7b847d44b -r 09691152636e webapp/src/main/webapp/jquery/test-svg.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/test-svg.html	Sun Nov 25 21:01:13 2012 +0100
@@ -0,0 +1,77 @@
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
+        <meta name="viewport" content="initial-scale=1.0"/>
+        <title>Digilib local: svg</title>
+        <!-- <base href="http://localhost:8080" target="_blank" /> -->
+
+        <script type="text/javascript" src="jquery.js"></script>
+        <script type="text/javascript" src="jquery.cookie.js"></script>
+        <script type="text/javascript" src="jquery.digilib.js"></script>
+        <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
+        <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
+        <script type="text/javascript" src="jquery.range.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.range.css" />
+        <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
+        <script type="text/javascript" src="jquery.digilib.sliders.js"></script>
+        <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+        <script type="text/javascript" src="jquery.digilib.marks.js"></script>
+        <script type="text/javascript" src="jquery.digilib.svg.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+
+        <style type="text/css">
+            body {
+                 background: silver;
+            }
+            #digilib .nofm {
+                 background-color: navy;
+
+            }
+            #dl_svgdiv {
+                width: 700px;
+                height: 200px;
+                position: absolute;
+                top: 10px;
+            }
+            #svg-toolbar {
+                position: absolute;
+                bottom: 10px;
+                background: silver;
+                border: 1px solid aqua;
+                padding: 2px 10px;
+                font-size: 80%;
+            }
+
+            #svg-toolbar input,
+            #svg-toolbar select {
+                border: 1px solid grey;
+                font-size: 90%;
+            }
+        </style>
+
+        <script type="text/javascript">
+            $(document).ready(function(){
+                var opts = {
+                    interactionMode : 'fullscreen',
+                    previewImgWidth : 1200,
+                    previewImgHeight : 800,
+                    maxBgSize : 30000,
+                    fn : 'Test01',
+                    };
+                var $div = $('div#digilib');
+                $div.digilib(opts);
+            });
+
+        </script>
+    </head>
+
+    <body>
+        <div id="digilib">
+            <p>If you see this, Digilib doesn't work. The reason could be: Javascript is not activated; there is a bug in the Javascript code; the image server does not respond.</p>
+            <img src="http://digilib.berlios.de/images/digilib-logo-big.png" />
+        </div>
+    </body>
+</html>
+