# HG changeset patch
# User casties
# Date 1372089904 -7200
# Node ID 7515f7e51b0fe64591845442e0f0c4e750d66b8f
# Parent  b0ed3974efbd8374de7646b3fd1d8c7158724555
styles for flyout divs (for websites).

diff -r b0ed3974efbd -r 7515f7e51b0f css/mpiwg.css
--- a/css/mpiwg.css	Mon Jun 24 12:13:46 2013 +0200
+++ b/css/mpiwg.css	Mon Jun 24 18:05:04 2013 +0200
@@ -919,6 +919,10 @@
     margin-top: 0.5em;
 }
 
+div.mini.website div.title {
+    color: #3b4186;
+}
+
 div.mini div.author {
     color: #3b4186;
     margin-top: 0.5em;
@@ -935,23 +939,6 @@
     border-bottom: 0;
 }
 
-div.mini.website div.description {
-    /* initially hidden */
-    display: none;
-}
-
-div.box.foldable div.fold {
-    /* initially hidden */
-    display: none;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    /* TODO: this should be an image */
-    background-color: #ee7f2d;
-    color: white;
-    font-size: 14px;
-}
-
 /* 
  * slider buttons 
  */
@@ -1327,9 +1314,22 @@
 	position: relative;
 	z-index: 0;
 }
+.flyout .folded {
+    /* folded initially hidden */
+    display: none;
+}
+
 .flyout.flying {
     background-color: white;
     z-index: 10;
+    /* padding: 10px; */
+    box-shadow: 2px 2px 3px 1px #d0d0d0;
+}
+.flyout.flying .folded {
+    display: block;
+}
+.flyout.flying div {
+    padding: 0 10px;
 }
 
 .flyout .flyout_open,
@@ -1343,6 +1343,16 @@
 	display: none;
 }
 
+div.row.triple > div.col > div.mini.flying div.thumb {
+    padding: 0;
+}
+div.row.triple > div.col > div.mini.flying div.thumb img {
+    /* extended flyout image */
+    width: 300px;
+    height: 187px;
+}
+
+
 /* 
  * sidebar 
  */
diff -r b0ed3974efbd -r 7515f7e51b0f js/mpiwg.js
--- a/js/mpiwg.js	Mon Jun 24 12:13:46 2013 +0200
+++ b/js/mpiwg.js	Mon Jun 24 18:05:04 2013 +0200
@@ -183,25 +183,50 @@
     
     /*
      * flyout divs
+     * 
+     * currently only for div.flyout in col in row.triple.
+     * 
+     * div.flyout contains img.flyout_open and img.flyout_close.
+     * 
+     * div.flyout gets additional class .flying when open.
+     * 
+     * div.folded will be shown when open.
+     * 
      */
     $('.flyout').each(function () {
+    	// flyout target size
+    	var tw = 300;
+    	var th = 400;
         var $flyout = $(this);
-        var parent = $flyout.parent();
-        var ph = parent.height();
-        var pw = parent.width();
+        var $buttons = $flyout.find('.flyout_open, .flyout_close');
         // size up to parent in folded state
-        var dh = ph - $flyout.outerHeight();
+        var dh = $flyout.parent().height() - $flyout.outerHeight();
         if (dh > 0) {
             $flyout.height($flyout.height()+dh);
         }
+        // save original size
+        var ow = $flyout.width();
+        var oh = $flyout.height();
+        // handle click on open button
         $flyout.find('.flyout_open').on('click', function () {
-            console.debug('flyout click on ', this);
             $flyout.addClass('flying');
             $flyout.css('position','absolute');
-            $flyout.width(2*pw);
-            $flyout.height(2*ph);
+            $flyout.animate({'width': tw, 'height': th}, 'fast');
+            // change open to close button
+            $buttons.toggle();
         }).css('cursor', 'pointer');
-        
+        // handle click on close button
+        $flyout.find('.flyout_close').on('click', function () {
+            $flyout.animate({'width': ow, 'height': oh}, {
+        		'duration': 'fast',
+        		'complete': function () {
+                    $flyout.removeClass('flying');
+                    $flyout.css('position','relative');
+                    // change close to open button
+                    $buttons.toggle();
+        		}
+            });
+        }).css('cursor', 'pointer');        
     });     
 
 }); 
\ No newline at end of file