# HG changeset patch
# User robcast
# Date 1296492260 -3600
# Node ID 936d88972cd0bf8b44d5c312abcb729f21d67121
# Parent  c6878e9575feecbbbac6e39382e2cdedb9ea3d15
put styles in stylesheet.
use relative positioning in embedded mode.

diff -r c6878e9575fe -r 936d88972cd0 client/digitallibrary/jquery/jquery-test-embedded.html
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Mon Jan 31 16:31:40 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Mon Jan 31 17:44:20 2011 +0100
@@ -9,51 +9,12 @@
             }
 
             div.digilib {
-                padding: 10px;
-                width: 220px;
-            }
-
-            div.buttons {
-                position: absolute;
-                margin-left: 184px;
-                top: 0px;
-                padding: 2px;
-                background-color: grey;
-                opacity: 0.4;
-            }
-
-            div.button {
-            }
-
-            div.button:hover {
-                background-color: darkred;
+                /* padding for buttons and bird-div */
+                padding-right: 18px;
+                padding-bottom: 100px;
+                /* width: 220px; */
             }
 
-            div.birdview {
-                border: 1px solid white;
-                z-index: 1;
-                }
-
-            div.scaler {
-                background-color: grey;
-                z-index: 0;
-                }
-
-            div.about {
-                position: absolute;
-                width: 200px;
-                top: 100px;
-                left: 350px;
-                height: 200px;
-                padding: 0px 2px;
-                font-family: Verdana, Arial, Helvetica, sans-serif;
-                border: 2px solid lightcyan;
-                background-color: lightgrey;
-                text-align: center;
-                display: none;
-                z-index: 1000;
-                }
-
             td {
                 vertical-align: top;
                 }
@@ -89,6 +50,7 @@
         <script type="text/javascript" src="dlGeometry.js"></script>
         <script type="text/javascript" src="jquery.cookie.js"></script>
         <script type="text/javascript" src="jquery.digilib.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
 
 
         <script type="text/javascript">
diff -r c6878e9575fe -r 936d88972cd0 client/digitallibrary/jquery/jquery-test-full-rc.html
--- a/client/digitallibrary/jquery/jquery-test-full-rc.html	Mon Jan 31 16:31:40 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full-rc.html	Mon Jan 31 17:44:20 2011 +0100
@@ -9,77 +9,13 @@
                  background: silver;
             }
 
-            div.digilib {
-            }
-
-            div.buttons {
-                position: fixed;
-                right: 5px;
-                top: 5px;
-                padding: 3px;
-                background-color: transparent;
-                z-index: 20;
-            }
-
-            img.button:hover {
-                background-image: url('../greyskin/corona.png');
-            }
-
-            div.digilib div.mark {
-              position: absolute;
-              color: white;
-              background: url('../greyskin/mark-bg-16.png');
-              font-family: Verdana, Arial, Helvetica, sans-serif;
-              font-weight: bold;
-              font-size:11px;
-              height: 15px;
-              width: 16px;
-              padding-top: 1px;
-              text-align: center;
-              z-index: 10;
-            }
-
-            div.digilib div.zoomrect {
-              position: absolute;
-              /* border: 2px solid #ffa060; */
-              border: 2px solid #ff0000;
-              z-index: 100;
-              }
-
-            div.birdview {
-                border: 1px solid white;
-                position: fixed;
-                bottom: 8px;
-                right:  48px;
-                z-index: 1;
-                }
-
-            div.about {
-                position: absolute;
-                width: 200px;
-                top: 100px;
-                left: 350px;
-                height: 200px;
-                padding: 0px 2px;
-                font-family: Verdana, Arial, Helvetica, sans-serif;
-                border: 2px solid lightcyan;
-                background-color: lightgrey;
-                text-align: center;
-                display: none;
-                z-index: 1000;
-                }
-
-            div.scaler {
-                background-color: grey;
-                z-index: 0;
-                }
-
         </style>
 
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
         <script type="text/javascript" src="dlGeometry.js"></script>
         <script type="text/javascript" src="jquery.cookie.js"></script>
         <script type="text/javascript" src="jquery.digilib.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
 
 
         <script type="text/javascript">
@@ -96,7 +32,7 @@
 
     <body>
 
-        <div id="digilib-1" class="digilib single">
+        <div id="digilib-1" class="digilib">
             <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" />
         </div>
     </body>
diff -r c6878e9575fe -r 936d88972cd0 client/digitallibrary/jquery/jquery.digilib.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Mon Jan 31 17:44:20 2011 +0100
@@ -0,0 +1,95 @@
+/* 
+ * CSS style file for jQuery digilib
+ *
+ * Martin Raspe, Robert Casties, 11.1.2011
+ */
+div.digilib div.scaler {
+	background-color: grey;
+	z-index: 0;
+}
+
+div.digilib div.birdview {
+	border: 1px solid white;
+	z-index: 10;
+}
+
+
+div.digilib div.zoomrect {
+	position: absolute;
+	border: 2px solid #ff0000;
+	z-index: 100;
+}
+
+div.digilib div.mark {
+	position: absolute;
+	color: white;
+	background: url('../greyskin/mark-bg-16.png');
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	font-size: 11px;
+	height: 15px;
+	width: 16px;
+	padding-top: 1px;
+	text-align: center;
+	z-index: 10;
+}
+
+div.digilib div.about {
+	position: absolute;
+	width: 200px;
+	top: 100px;
+	left: 350px;
+	height: 200px;
+	padding: 0px 2px;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	border: 2px solid lightcyan;
+	background-color: lightgrey;
+	text-align: center;
+	display: none;
+	z-index: 1000;
+}
+
+/* special definitions for fullscreen */
+div.digilib.dl_fullscreen div.buttons {
+	position: fixed;
+	right: 0px;
+	top: 0px;
+	padding: 2px;
+	background-color: transparent;
+	z-index: 100;
+}
+
+div.digilib.dl_fullscreen div.button:hover {
+	background-image: url('../greyskin/corona.png');
+}
+
+div.digilib.dl_fullscreen div.birdview {
+	position: fixed;
+	bottom: 8px;
+	right: 48px;
+}
+
+/* special definitions for embedded */
+div.digilib.dl_embedded {
+	position: relative;
+}
+
+div.digilib.dl_embedded div.buttons {
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	padding: 1px;
+	background-color: grey;
+	opacity: 0.4;
+	z-index: 100;
+}
+
+div.digilib.dl_embedded div.button:hover {
+	background-color: darkred;
+}
+
+div.digilib.dl_embedded div.birdview {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+}
\ No newline at end of file
diff -r c6878e9575fe -r 936d88972cd0 client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Mon Jan 31 16:31:40 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Mon Jan 31 17:44:20 2011 +0100
@@ -806,9 +806,11 @@
     var setupScalerDiv = function (data) {
         var settings = data.settings;
         var $elem = data.$elem;
+        $elem.addClass('digilib');
         var $img, scalerUrl;
         // fullscreen
         if (settings.interactionMode === 'fullscreen') {
+            $elem.addClass('dl_fullscreen');
             var imgSize = getFullscreenImgSize($elem);
             // fitwidth/height omits destination height/width
             // if (data.dlOpts['fitheight'] !== '1') {
@@ -823,6 +825,7 @@
             scalerUrl = getScalerUrl(data);
         // embedded mode -- try to keep img tag
         } else {
+            $elem.addClass('dl_embedded');
             $img = $elem.find('img');
             if ($img.length > 0) {
                 console.debug("img detach:", $img);
@@ -1151,7 +1154,7 @@
             $birdZoom.offset(coords);
         } else {
             // nice animation for embedded mode :-)
-            $birdZoom.animate(coords, opts);
+            $birdZoom.animate(coords);
         }
     };