# HG changeset patch
# User casties
# Date 1369689127 -7200
# Node ID 7824777309166953858d312a8c2c74fca98825a9
# Parent  246d87d33f25e8cbc0fc7104fbea9bdb60a927da
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
https://it-dev.mpiwg-berlin.mpg.de/tracs/webpage/ticket/57

diff -r 246d87d33f25 -r 782477730916 MPIWGProjects.py
--- a/MPIWGProjects.py	Mon May 27 14:59:56 2013 +0200
+++ b/MPIWGProjects.py	Mon May 27 23:12:07 2013 +0200
@@ -1128,7 +1128,7 @@
  
     def isArchivedProject(self):
         """check if the project is archived"""
-        completed = self.getCompletedAt()
+        completed = getattr(self, 'completedAt', '')
         # completed leer 
         if completed == "" :
             return False;
diff -r 246d87d33f25 -r 782477730916 css/mpiwg.css
--- a/css/mpiwg.css	Mon May 27 14:59:56 2013 +0200
+++ b/css/mpiwg.css	Mon May 27 23:12:07 2013 +0200
@@ -430,10 +430,15 @@
     background-color: gray;
     /* background-color: rgba(80,80,80,0.6); */
 }
+div.teaser_image div.caption a {
+    /* links in caption inside image */
+    color: white;
+}
 
 div.teaser_text {
     padding-right: 21px;
 }
+
 /* feature number */
 div.teaser_text div.feature_number {
     position: absolute;
@@ -463,21 +468,35 @@
 }
 
 /* teaser slider */
-div.teaser div.box div.slider {
+div.teaser div.box div.slidebutton {
     top: 150px;
     width: 18px;
     height: 24px;
     padding-top: 11px;
 }
 
-div.teaser div.box div.slider.prev {
+div.teaser div.box div.slidebutton.prev {
     background-image: url(../images/slider_prev_bg.png);
 }
 
-div.teaser div.box div.slider.next {
+div.teaser div.box div.slidebutton.next {
     background-image: url(../images/slider_next_bg.png);
 }
 
+/* book slider */
+div.main.home div.slider.row.double > div.col {
+    /* width is ignored in this table row, so we have to use paddding */
+    width: 100px;
+    padding-right: 23px;
+}
+div.main.home div.slider.row.double > div.col div.mini img {
+    width: 100px;
+}
+
+div.main.home div.row.triple div.ajaxSlider div.slidebutton {
+    top: 80px;
+}
+
 /* 
  * toolboxes 
  */
@@ -705,7 +724,7 @@
     /* line-height: 1; */
 }
 
-div.row.quintuple div.mini {
+div.row.quintuple > div.col > div.mini {
     max-width: 122px;
     font-size: 11px;
 }
@@ -718,27 +737,27 @@
 div.mini div.thumb:first-child {
     margin-top: 0;
 }
-div.row.quintuple div.mini div.thumb img {
+div.row.quintuple > div.col > div.mini div.thumb img {
     width: 120px;
     height: 75px;
 }
 
-div.row.triple div.mini {
+div.row.triple > div.col > div.mini {
     width: 140px;
 }
 
-div.row.triple div.mini div.thumb img {
+div.row.triple > div.col > div.mini div.thumb img {
     width: 140px;
     height: 87px;
 }
 
-div.row.triple div.mini.source div.thumb img {
+div.row.triple  > div.col > div.mini.source div.thumb img {
     /* thumb size for sources given by digilib */
     width: auto;
     height: auto;
 }
 
-div.row.double div.mini div.thumb img {
+div.row.double  > div.col > div.mini div.thumb img {
     height: 180px;
 }
 
@@ -787,22 +806,34 @@
 /* 
  * slider buttons 
  */
-div.box div.slider {
+div.box div.slidebutton {
     position: absolute;
     top: 110px;
     width: 16px;
     height: 18px;
+    z-index: 10;
 }
 
-div.box div.slider.prev {
+div.box div.slidebutton.prev {
     left: 0;
 }
 
-div.box div.slider.next {
+div.box div.slidebutton.next {
     right: 0;
     text-align: right;
 }
 
+.ajaxSlider .slidebutton.prev,
+.ajaxSlider .slidebutton.next {
+    /* AJAX slider buttons initially hidden */
+    display: none;
+}
+
+div.slider.row > div.col:first-child {
+    /* space for slidebuttons */
+    padding-left: 20px !important;
+}
+
 /* 
  * paragraph with line
  */
diff -r 246d87d33f25 -r 782477730916 js/mpiwg.js
--- a/js/mpiwg.js	Mon May 27 14:59:56 2013 +0200
+++ b/js/mpiwg.js	Mon May 27 23:12:07 2013 +0200
@@ -2,6 +2,35 @@
  * Javascript for MPIWG website
  */
 
+(function ($) {
+	$.fn.AjaxSlider = function (opts) {
+		var settings = $.extend({
+			dataUrl : null,
+			dataSel : '',
+			contentSel : '',
+			scrollBy: '100px',
+		}, opts);
+		var url = settings.dataUrl + ' ' + settings.dataSel;
+		var $slider = this;
+		var sliderW = this.width();
+		var sliderH = this.height();
+		this.load(url, function () {
+			// fix width and height and hide overflow
+			$slider.css({'width':sliderW, 'height':sliderH, 'overflow':'hidden', 'position':'relative'});
+			// content will be moved
+			var $content = $slider.find(settings.contentSel);
+			$content.css({'position':'absolute', 'left':'0'});
+			$slider.find('.slidebutton.prev').show().on('click', function () {
+				$content.animate({'left':'+='+settings.scrollBy}, 'fast');
+			});
+			$slider.find('.slidebutton.next').show().on('click', function () {
+				$content.animate({'left':'-='+settings.scrollBy}, 'fast');
+			});
+		});
+	}
+}(jQuery));
+
+
 $(document).ready(function() {
     /*
      * autosubmit forms
diff -r 246d87d33f25 -r 782477730916 zpt/www/common_template.zpt
--- a/zpt/www/common_template.zpt	Mon May 27 14:59:56 2013 +0200
+++ b/zpt/www/common_template.zpt	Mon May 27 23:12:07 2013 +0200
@@ -17,7 +17,7 @@
     <!-- feature image and intro -->
     <div class="col">
       <div class="box teaser_image">
-        <div class="slider prev" tal:condition="python:feature_num>1">
+        <div class="slidebutton prev" tal:condition="python:feature_num>1">
           <a tal:attributes="href python:'?ff=%s'%(feature_num-1)"><img tal:attributes="src string:$root/images/slider_prev.png"
             alt="previous" /></a>
         </div>
@@ -46,7 +46,7 @@
           <a class="internal" tal:attributes="href string:$root/${secmap/news}/featurearchive.html"><metal:block
               metal:define-slot="topic_archive">Research Topic Archive</metal:block></a>
         </p>
-        <div class="slider next" tal:condition="python:feature_num<len(features)">
+        <div class="slidebutton next" tal:condition="python:feature_num<len(features)">
           <a tal:attributes="href python:'?ff=%s'%(feature_num+1)"><img tal:attributes="src string:$root/images/slider_next.png"
             alt="next" /></a>
         </div>
diff -r 246d87d33f25 -r 782477730916 zpt/www/main_template.zpt
--- a/zpt/www/main_template.zpt	Mon May 27 14:59:56 2013 +0200
+++ b/zpt/www/main_template.zpt	Mon May 27 23:12:07 2013 +0200
@@ -1,7 +1,7 @@
 <!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" metal:define-macro="page"
-  tal:define="root here/MPIWGrootURL|here/en/MPIWGrootURL; 
+      tal:define="root here/MPIWGrootURL|here/en/MPIWGrootURL; 
                   crumbs template/getBreadcrumbs | nothing;
                   section here/getSection | nothing;
                   sections here/getSections | nothing;
@@ -19,7 +19,6 @@
                     'resources':'ressourcen',
                     'news':'aktuelles'}};
                   secmap python:allsecs[lang];
-                  subsection python:template.getSubSection(crumbs=crumbs);
                   ">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -66,7 +65,8 @@
 
     <div id="mainrow" metal:define-slot="mainrow">
       <div class="leftbox" metal:define-slot="leftbox">
-        <div class="subnav" metal:define-slot="subnav">
+        <div class="subnav" metal:define-slot="subnav"
+          tal:define="subsection python:template.getSubSection(crumbs=crumbs);">
           <ul tal:condition="crumbs">
             <li tal:repeat="subnav python:here.getSubsections(here)"
               tal:attributes="class python:test(subnav[0]==subsection,'sn_on','sn_off')"><a