diff --git a/amber/afi/js/AFI-Tests.deploy.js b/amber/afi/js/AFI-Tests.deploy.js
index 3ca91d0c6f089a13f6382d9898c9ecfb55529915..eabf726bea9895ae825ec4f3d1542fcfc7ece524 100644
--- a/amber/afi/js/AFI-Tests.deploy.js
+++ b/amber/afi/js/AFI-Tests.deploy.js
@@ -319,6 +319,17 @@ return self}
 }),
 smalltalk.BibNumAlbumTintinMonopageTest);
 
+smalltalk.addMethod(
+"_testFirstPageImageShouldLinkToOneDotJpg",
+smalltalk.method({
+selector: "testFirstPageImageShouldLinkToOneDotJpg",
+fn: function (){
+var self=this;
+smalltalk.send(self,"_assert_",[smalltalk.send((0),"__lt",[smalltalk.send(smalltalk.send(self["@container"],"_find_",["img[src*=\x22userfiles/album/2/thumbs/media/1.jpg\x22]"]),"_length",[])])]);
+return self}
+}),
+smalltalk.BibNumAlbumTintinMonopageTest);
+
 smalltalk.addMethod(
 "_tintinJSON",
 smalltalk.method({
diff --git a/amber/afi/js/AFI-Tests.js b/amber/afi/js/AFI-Tests.js
index 3de4ae693db63c7a12fe1beba483811470be2c5b..bfa5dca2800c91996de6c80b567fe5f4f9c2a761 100644
--- a/amber/afi/js/AFI-Tests.js
+++ b/amber/afi/js/AFI-Tests.js
@@ -444,6 +444,22 @@ referencedClasses: []
 }),
 smalltalk.BibNumAlbumTintinMonopageTest);
 
+smalltalk.addMethod(
+"_testFirstPageImageShouldLinkToOneDotJpg",
+smalltalk.method({
+selector: "testFirstPageImageShouldLinkToOneDotJpg",
+category: 'tests',
+fn: function (){
+var self=this;
+smalltalk.send(self,"_assert_",[smalltalk.send((0),"__lt",[smalltalk.send(smalltalk.send(self["@container"],"_find_",["img[src*=\x22userfiles/album/2/thumbs/media/1.jpg\x22]"]),"_length",[])])]);
+return self},
+args: [],
+source: "testFirstPageImageShouldLinkToOneDotJpg\x0a\x09self assert: 0 < (container find: 'img[src*=\x22userfiles/album/2/thumbs/media/1.jpg\x22]')  length",
+messageSends: ["assert:", "<", "length", "find:"],
+referencedClasses: []
+}),
+smalltalk.BibNumAlbumTintinMonopageTest);
+
 smalltalk.addMethod(
 "_tintinJSON",
 smalltalk.method({
diff --git a/amber/afi/js/AFI.deploy.js b/amber/afi/js/AFI.deploy.js
index eefcea1a05ba0483ab7bbdf51acbc8b79d72e8bc..4e9f8861299076c93ecba53f84661b97e59d8aad 100644
--- a/amber/afi/js/AFI.deploy.js
+++ b/amber/afi/js/AFI.deploy.js
@@ -211,7 +211,7 @@ smalltalk.BookThumbnailNavigatorWidget);
 
 
 
-smalltalk.addClass('AbstractBookWidget', smalltalk.Widget, ['book', 'scriptsRoot', 'rootBrush'], 'AFI');
+smalltalk.addClass('AbstractBookWidget', smalltalk.Widget, ['book', 'scriptsRoot', 'rootBrush', 'isFullscreen', 'downloadBrush', 'menuJQuery', 'pageZoomWidget', 'pageZoomBrush', 'zoomLeftPageAnchor', 'zoomRightPageAnchor', 'pageDescriptionsBrush'], 'AFI');
 smalltalk.addMethod(
 "_book",
 smalltalk.method({
@@ -267,6 +267,32 @@ return $1;
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_renderBookMenuOn_",
+smalltalk.method({
+selector: "renderBookMenuOn:",
+fn: function (html){
+var self=this;
+var $1,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["book-menu"]);
+$2=smalltalk.send($1,"_asJQuery",[]);
+self["@menuJQuery"]=$2;
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderBookOn_",
+smalltalk.method({
+selector: "renderBookOn:",
+fn: function (html){
+var self=this;
+smalltalk.send(self,"_subclassResponsibility",[]);
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
 smalltalk.addMethod(
 "_renderDevToolsOn_",
 smalltalk.method({
@@ -293,6 +319,35 @@ return self}
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_renderDownloadBookOn_",
+smalltalk.method({
+selector: "renderDownloadBookOn:",
+fn: function (html){
+var self=this;
+self["@downloadBrush"]=smalltalk.send(smalltalk.send(html,"_div",[]),"_class_",["b-download-book"]);
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderFullscreenControlsOn_",
+smalltalk.method({
+selector: "renderFullscreenControlsOn:",
+fn: function (html){
+var self=this;
+var $1,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["b-zoom-fullscreen"]);
+$2=smalltalk.send($1,"_with_",[(function(){
+return smalltalk.send(smalltalk.send(html,"_a",[]),"_onClick_",[(function(){
+return smalltalk.send(self,"_toggleFullscreen",[]);
+})]);
+})]);
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
 smalltalk.addMethod(
 "_renderOn_",
 smalltalk.method({
@@ -306,6 +361,78 @@ return self}
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_renderPageDescriptionOn_",
+smalltalk.method({
+selector: "renderPageDescriptionOn:",
+fn: function (html){
+var self=this;
+var $1,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["page-desc"]);
+$2=smalltalk.send($1,"_yourself",[]);
+self["@pageDescriptionsBrush"]=$2;
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderWidgetOn_",
+smalltalk.method({
+selector: "renderWidgetOn:",
+fn: function (html){
+var self=this;
+var $1,$3,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",[smalltalk.send(self,"_widgetClass",[])]);
+$2=smalltalk.send($1,"_with_",[(function(){
+smalltalk.send(self,"_renderFullscreenControlsOn_",[html]);
+smalltalk.send(self,"_renderDownloadBookOn_",[html]);
+smalltalk.send(self,"_renderBookMenuOn_",[html]);
+smalltalk.send(self,"_renderZoomControlsOn_",[html]);
+smalltalk.send(self,"_renderPageDescriptionOn_",[html]);
+$3=smalltalk.send(self,"_renderBookOn_",[html]);
+return $3;
+})]);
+if(smalltalk.assert(self["@isFullscreen"])){
+smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_addClass_",["fullscreen"]);
+} else {
+smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_removeClass_",["fullscreen"]);
+};
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderZoomControlsOn_",
+smalltalk.method({
+selector: "renderZoomControlsOn:",
+fn: function (html){
+var self=this;
+var $1,$3,$4,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["b-zoom-magnify"]);
+$2=smalltalk.send($1,"_with_",[(function(){
+self["@zoomLeftPageAnchor"]=smalltalk.send(smalltalk.send(smalltalk.send(html,"_a",[]),"_onClick_",[(function(){
+return smalltalk.send(self,"_zoomLeftPage",[]);
+})]),"_asJQuery",[]);
+self["@zoomLeftPageAnchor"];
+smalltalk.send(self["@zoomLeftPageAnchor"],"_hide",[]);
+self["@zoomRightPageAnchor"]=smalltalk.send(smalltalk.send(smalltalk.send(html,"_a",[]),"_onClick_",[(function(){
+return smalltalk.send(self,"_zoomRightPage",[]);
+})]),"_asJQuery",[]);
+self["@zoomRightPageAnchor"];
+smalltalk.send(self["@zoomRightPageAnchor"],"_hide",[]);
+$3=smalltalk.send(html,"_div",[]);
+smalltalk.send($3,"_class_",["b-zoom"]);
+$4=smalltalk.send($3,"_yourself",[]);
+self["@pageZoomBrush"]=$4;
+return self["@pageZoomBrush"];
+})]);
+return self}
+}),
+smalltalk.AbstractBookWidget);
+
 smalltalk.addMethod(
 "_scriptsRoot",
 smalltalk.method({
@@ -335,13 +462,30 @@ return self}
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_widgetClass",
+smalltalk.method({
+selector: "widgetClass",
+fn: function (){
+var self=this;
+var $1;
+if(smalltalk.assert(self["@isFullscreen"])){
+$1="fullscreen bk-widget";
+} else {
+$1="bk-widget";
+};
+return $1;
+}
+}),
+smalltalk.AbstractBookWidget);
+
 
 
 smalltalk.addClass('BookMonoWidget', smalltalk.AbstractBookWidget, [], 'AFI');
 smalltalk.addMethod(
-"_renderWidgetOn_",
+"_renderBookOn_",
 smalltalk.method({
-selector: "renderWidgetOn:",
+selector: "renderBookOn:",
 fn: function (html){
 var self=this;
 return self}
@@ -350,7 +494,7 @@ smalltalk.BookMonoWidget);
 
 
 
-smalltalk.addClass('BookWidget', smalltalk.AbstractBookWidget, ['currentPageNo', 'pageZoomBrush', 'pageZoomWidget', 'zoomLeftPageAnchor', 'zoomRightPageAnchor', 'pageDescriptionsBrush', 'loader', 'bookContainer', 'width', 'menuJQuery', 'isFullscreen', 'downloadBrush', 'leftFolioBrush', 'rightFolioBrush', 'announcer'], 'AFI');
+smalltalk.addClass('BookWidget', smalltalk.AbstractBookWidget, ['currentPageNo', 'loader', 'bookContainer', 'width', 'downloadBrush', 'leftFolioBrush', 'rightFolioBrush', 'announcer'], 'AFI');
 smalltalk.addMethod(
 "_afterPageChange_",
 smalltalk.method({
@@ -759,17 +903,6 @@ return self}
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderBookMenuOn_",
-smalltalk.method({
-selector: "renderBookMenuOn:",
-fn: function (html){
-var self=this;
-(self['@menuJQuery']=(function($rec){smalltalk.send($rec, "_class_", [unescape("book-menu")]);return smalltalk.send($rec, "_asJQuery", []);})(smalltalk.send(html, "_div", [])));
-return self;}
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_renderBookNavigator",
 smalltalk.method({
@@ -832,28 +965,6 @@ return self;}
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderDownloadBookOn_",
-smalltalk.method({
-selector: "renderDownloadBookOn:",
-fn: function (html){
-var self=this;
-(self['@downloadBrush']=smalltalk.send(smalltalk.send(html, "_div", []), "_class_", [unescape("b-download-book")]));
-return self;}
-}),
-smalltalk.BookWidget);
-
-smalltalk.addMethod(
-"_renderFullscreenControlsOn_",
-smalltalk.method({
-selector: "renderFullscreenControlsOn:",
-fn: function (html){
-var self=this;
-(function($rec){smalltalk.send($rec, "_class_", [unescape("b-zoom-fullscreen")]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(smalltalk.send(html, "_a", []), "_onClick_", [(function(){return smalltalk.send(self, "_toggleFullscreen", []);})]);})]);})(smalltalk.send(html, "_div", []));
-return self;}
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_renderPage_class_on_",
 smalltalk.method({
@@ -865,21 +976,6 @@ return self;}
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderPageDescriptionOn_",
-smalltalk.method({
-selector: "renderPageDescriptionOn:",
-fn: function (html){
-var self=this;
-var $1,$2;
-$1=smalltalk.send(html,"_div",[]);
-smalltalk.send($1,"_class_",["page-desc"]);
-$2=smalltalk.send($1,"_yourself",[]);
-self["@pageDescriptionsBrush"]=$2;
-return self}
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_renderScriptsOn_Then_",
 smalltalk.method({
@@ -914,44 +1010,6 @@ return self}
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderWidgetOn_",
-smalltalk.method({
-selector: "renderWidgetOn:",
-fn: function (html){
-var self=this;
-var $1,$3,$2;
-$1=smalltalk.send(html,"_div",[]);
-smalltalk.send($1,"_class_",[smalltalk.send(self,"_widgetClass",[])]);
-$2=smalltalk.send($1,"_with_",[(function(){
-smalltalk.send(self,"_renderFullscreenControlsOn_",[html]);
-smalltalk.send(self,"_renderDownloadBookOn_",[html]);
-smalltalk.send(self,"_renderBookMenuOn_",[html]);
-smalltalk.send(self,"_renderZoomControlsOn_",[html]);
-smalltalk.send(self,"_renderPageDescriptionOn_",[html]);
-$3=smalltalk.send(self,"_renderBookOn_",[html]);
-return $3;
-})]);
-if(smalltalk.assert(self["@isFullscreen"])){
-smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_addClass_",["fullscreen"]);
-} else {
-smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_removeClass_",["fullscreen"]);
-};
-return self}
-}),
-smalltalk.BookWidget);
-
-smalltalk.addMethod(
-"_renderZoomControlsOn_",
-smalltalk.method({
-selector: "renderZoomControlsOn:",
-fn: function (html){
-var self=this;
-(function($rec){smalltalk.send($rec, "_class_", [unescape("b-zoom-magnify")]);return smalltalk.send($rec, "_with_", [(function(){(self['@zoomLeftPageAnchor']=smalltalk.send(smalltalk.send(smalltalk.send(html, "_a", []), "_onClick_", [(function(){return smalltalk.send(self, "_zoomLeftPage", []);})]), "_asJQuery", []));smalltalk.send(self['@zoomLeftPageAnchor'], "_hide", []);(self['@zoomRightPageAnchor']=smalltalk.send(smalltalk.send(smalltalk.send(html, "_a", []), "_onClick_", [(function(){return smalltalk.send(self, "_zoomRightPage", []);})]), "_asJQuery", []));smalltalk.send(self['@zoomRightPageAnchor'], "_hide", []);return (self['@pageZoomBrush']=(function($rec){smalltalk.send($rec, "_class_", [unescape("b-zoom")]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(html, "_div", [])));})]);})(smalltalk.send(html, "_div", []));
-return self;}
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_reset",
 smalltalk.method({
@@ -1021,17 +1079,6 @@ return self;}
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_widgetClass",
-smalltalk.method({
-selector: "widgetClass",
-fn: function (){
-var self=this;
-return ((($receiver = self['@isFullscreen']).klass === smalltalk.Boolean) ? ($receiver ? (function(){return unescape("fullscreen%20bk-widget");})() : (function(){return unescape("bk-widget");})()) : smalltalk.send($receiver, "_ifTrue_ifFalse_", [(function(){return unescape("fullscreen%20bk-widget");}), (function(){return unescape("bk-widget");})]));
-return self;}
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_width",
 smalltalk.method({
diff --git a/amber/afi/js/AFI.js b/amber/afi/js/AFI.js
index e7923347224c7204db715a4510c0b57ec23f6d0f..7ecb3740374765cbeab717619db2c16d75d81dca 100644
--- a/amber/afi/js/AFI.js
+++ b/amber/afi/js/AFI.js
@@ -296,7 +296,7 @@ smalltalk.BookThumbnailNavigatorWidget);
 
 
 
-smalltalk.addClass('AbstractBookWidget', smalltalk.Widget, ['book', 'scriptsRoot', 'rootBrush'], 'AFI');
+smalltalk.addClass('AbstractBookWidget', smalltalk.Widget, ['book', 'scriptsRoot', 'rootBrush', 'isFullscreen', 'downloadBrush', 'menuJQuery', 'pageZoomWidget', 'pageZoomBrush', 'zoomLeftPageAnchor', 'zoomRightPageAnchor', 'pageDescriptionsBrush'], 'AFI');
 smalltalk.addMethod(
 "_book",
 smalltalk.method({
@@ -372,6 +372,42 @@ referencedClasses: ["TestCase"]
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_renderBookMenuOn_",
+smalltalk.method({
+selector: "renderBookMenuOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+var $1,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["book-menu"]);
+$2=smalltalk.send($1,"_asJQuery",[]);
+self["@menuJQuery"]=$2;
+return self},
+args: ["html"],
+source: "renderBookMenuOn: html\x0a\x09menuJQuery := html div\x0a\x09\x09class: 'book-menu';\x0a\x09\x09asJQuery.",
+messageSends: ["class:", "div", "asJQuery"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderBookOn_",
+smalltalk.method({
+selector: "renderBookOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+smalltalk.send(self,"_subclassResponsibility",[]);
+return self},
+args: ["html"],
+source: "renderBookOn: html\x0a\x09self subclassResponsibility",
+messageSends: ["subclassResponsibility"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
 smalltalk.addMethod(
 "_renderDevToolsOn_",
 smalltalk.method({
@@ -403,6 +439,45 @@ referencedClasses: ["AFIIDETools", "Smalltalk"]
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_renderDownloadBookOn_",
+smalltalk.method({
+selector: "renderDownloadBookOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+self["@downloadBrush"]=smalltalk.send(smalltalk.send(html,"_div",[]),"_class_",["b-download-book"]);
+return self},
+args: ["html"],
+source: "renderDownloadBookOn: html\x0a\x09downloadBrush := html div class: 'b-download-book'",
+messageSends: ["class:", "div"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderFullscreenControlsOn_",
+smalltalk.method({
+selector: "renderFullscreenControlsOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+var $1,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["b-zoom-fullscreen"]);
+$2=smalltalk.send($1,"_with_",[(function(){
+return smalltalk.send(smalltalk.send(html,"_a",[]),"_onClick_",[(function(){
+return smalltalk.send(self,"_toggleFullscreen",[]);
+})]);
+})]);
+return self},
+args: ["html"],
+source: "renderFullscreenControlsOn: html\x0a\x09html div \x0a\x09\x09class: 'b-zoom-fullscreen';\x0a\x09\x09with: [ html a onClick: [self toggleFullscreen] ].",
+messageSends: ["class:", "div", "with:", "onClick:", "toggleFullscreen", "a"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
 smalltalk.addMethod(
 "_renderOn_",
 smalltalk.method({
@@ -421,6 +496,93 @@ referencedClasses: []
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_renderPageDescriptionOn_",
+smalltalk.method({
+selector: "renderPageDescriptionOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+var $1,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["page-desc"]);
+$2=smalltalk.send($1,"_yourself",[]);
+self["@pageDescriptionsBrush"]=$2;
+return self},
+args: ["html"],
+source: "renderPageDescriptionOn: html \x09\x0a\x09pageDescriptionsBrush := html div \x0a                                                               class: 'page-desc';\x0a                       \x09\x09\x09\x09\x09\x09\x09\x09\x09\x09\x09yourself.\x0a                      ",
+messageSends: ["class:", "div", "yourself"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderWidgetOn_",
+smalltalk.method({
+selector: "renderWidgetOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+var $1,$3,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",[smalltalk.send(self,"_widgetClass",[])]);
+$2=smalltalk.send($1,"_with_",[(function(){
+smalltalk.send(self,"_renderFullscreenControlsOn_",[html]);
+smalltalk.send(self,"_renderDownloadBookOn_",[html]);
+smalltalk.send(self,"_renderBookMenuOn_",[html]);
+smalltalk.send(self,"_renderZoomControlsOn_",[html]);
+smalltalk.send(self,"_renderPageDescriptionOn_",[html]);
+$3=smalltalk.send(self,"_renderBookOn_",[html]);
+return $3;
+})]);
+if(smalltalk.assert(self["@isFullscreen"])){
+smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_addClass_",["fullscreen"]);
+} else {
+smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_removeClass_",["fullscreen"]);
+};
+return self},
+args: ["html"],
+source: "renderWidgetOn: html\x0a\x09html div\x0a\x09\x09class: self widgetClass; \x0a\x09\x09with: [\x09self \x0a                    renderFullscreenControlsOn: html;\x0a\x09\x09\x09\x09\x09renderDownloadBookOn: html;\x0a                  \x09renderBookMenuOn: html;\x0a                    renderZoomControlsOn: html;\x0a\x09\x09\x09\x09\x09renderPageDescriptionOn: html;\x0a                  \x09renderBookOn: html \x09].\x0a    \x0a\x09isFullscreen \x0a\x09\x09ifTrue: ['body' asJQuery addClass: 'fullscreen'] \x0a\x09\x09ifFalse: ['body' asJQuery removeClass: 'fullscreen'].",
+messageSends: ["class:", "widgetClass", "div", "with:", "renderFullscreenControlsOn:", "renderDownloadBookOn:", "renderBookMenuOn:", "renderZoomControlsOn:", "renderPageDescriptionOn:", "renderBookOn:", "ifTrue:ifFalse:", "addClass:", "asJQuery", "removeClass:"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
+smalltalk.addMethod(
+"_renderZoomControlsOn_",
+smalltalk.method({
+selector: "renderZoomControlsOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+var $1,$3,$4,$2;
+$1=smalltalk.send(html,"_div",[]);
+smalltalk.send($1,"_class_",["b-zoom-magnify"]);
+$2=smalltalk.send($1,"_with_",[(function(){
+self["@zoomLeftPageAnchor"]=smalltalk.send(smalltalk.send(smalltalk.send(html,"_a",[]),"_onClick_",[(function(){
+return smalltalk.send(self,"_zoomLeftPage",[]);
+})]),"_asJQuery",[]);
+self["@zoomLeftPageAnchor"];
+smalltalk.send(self["@zoomLeftPageAnchor"],"_hide",[]);
+self["@zoomRightPageAnchor"]=smalltalk.send(smalltalk.send(smalltalk.send(html,"_a",[]),"_onClick_",[(function(){
+return smalltalk.send(self,"_zoomRightPage",[]);
+})]),"_asJQuery",[]);
+self["@zoomRightPageAnchor"];
+smalltalk.send(self["@zoomRightPageAnchor"],"_hide",[]);
+$3=smalltalk.send(html,"_div",[]);
+smalltalk.send($3,"_class_",["b-zoom"]);
+$4=smalltalk.send($3,"_yourself",[]);
+self["@pageZoomBrush"]=$4;
+return self["@pageZoomBrush"];
+})]);
+return self},
+args: ["html"],
+source: "renderZoomControlsOn: html\x0a\x09html div\x0a\x09\x09class: 'b-zoom-magnify';\x0a\x09\x09with: [ \x09zoomLeftPageAnchor := (html a onClick: [self zoomLeftPage]) asJQuery.\x0a                       \x09\x09zoomLeftPageAnchor hide.\x0a                       \x0a                         \x09zoomRightPageAnchor := (html a onClick: [self zoomRightPage]) asJQuery.\x0a                       \x09\x09zoomRightPageAnchor hide.\x0a                                pageZoomBrush := html div \x0a\x09\x09\x09\x09\x09\x09class: 'b-zoom';\x0a\x09\x09\x09\x09\x09\x09yourself.\x0a                ].",
+messageSends: ["class:", "div", "with:", "asJQuery", "onClick:", "zoomLeftPage", "a", "hide", "zoomRightPage", "yourself"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
 smalltalk.addMethod(
 "_scriptsRoot",
 smalltalk.method({
@@ -460,19 +622,41 @@ referencedClasses: []
 }),
 smalltalk.AbstractBookWidget);
 
+smalltalk.addMethod(
+"_widgetClass",
+smalltalk.method({
+selector: "widgetClass",
+category: 'accessor',
+fn: function (){
+var self=this;
+var $1;
+if(smalltalk.assert(self["@isFullscreen"])){
+$1="fullscreen bk-widget";
+} else {
+$1="bk-widget";
+};
+return $1;
+},
+args: [],
+source: "widgetClass\x0a\x09^ isFullscreen \x0a\x09\x09ifTrue: ['fullscreen bk-widget'] \x0a\x09\x09ifFalse: ['bk-widget']",
+messageSends: ["ifTrue:ifFalse:"],
+referencedClasses: []
+}),
+smalltalk.AbstractBookWidget);
+
 
 
 smalltalk.addClass('BookMonoWidget', smalltalk.AbstractBookWidget, [], 'AFI');
 smalltalk.addMethod(
-"_renderWidgetOn_",
+"_renderBookOn_",
 smalltalk.method({
-selector: "renderWidgetOn:",
-category: 'rendering',
+selector: "renderBookOn:",
+category: 'not yet classified',
 fn: function (html){
 var self=this;
 return self},
 args: ["html"],
-source: "renderWidgetOn: html\x0a",
+source: "renderBookOn: html",
 messageSends: [],
 referencedClasses: []
 }),
@@ -480,7 +664,7 @@ smalltalk.BookMonoWidget);
 
 
 
-smalltalk.addClass('BookWidget', smalltalk.AbstractBookWidget, ['currentPageNo', 'pageZoomBrush', 'pageZoomWidget', 'zoomLeftPageAnchor', 'zoomRightPageAnchor', 'pageDescriptionsBrush', 'loader', 'bookContainer', 'width', 'menuJQuery', 'isFullscreen', 'downloadBrush', 'leftFolioBrush', 'rightFolioBrush', 'announcer'], 'AFI');
+smalltalk.addClass('BookWidget', smalltalk.AbstractBookWidget, ['currentPageNo', 'loader', 'bookContainer', 'width', 'downloadBrush', 'leftFolioBrush', 'rightFolioBrush', 'announcer'], 'AFI');
 smalltalk.addMethod(
 "_afterPageChange_",
 smalltalk.method({
@@ -1049,22 +1233,6 @@ referencedClasses: []
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderBookMenuOn_",
-smalltalk.method({
-selector: "renderBookMenuOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-(self['@menuJQuery']=(function($rec){smalltalk.send($rec, "_class_", [unescape("book-menu")]);return smalltalk.send($rec, "_asJQuery", []);})(smalltalk.send(html, "_div", [])));
-return self;},
-args: ["html"],
-source: "renderBookMenuOn: html\x0a\x09menuJQuery := html div\x0a\x09\x09class: 'book-menu';\x0a\x09\x09asJQuery.",
-messageSends: ["class:", "asJQuery", "div"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_renderBookNavigator",
 smalltalk.method({
@@ -1142,38 +1310,6 @@ referencedClasses: []
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderDownloadBookOn_",
-smalltalk.method({
-selector: "renderDownloadBookOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-(self['@downloadBrush']=smalltalk.send(smalltalk.send(html, "_div", []), "_class_", [unescape("b-download-book")]));
-return self;},
-args: ["html"],
-source: "renderDownloadBookOn: html\x0a\x09downloadBrush := html div class: 'b-download-book'",
-messageSends: ["class:", "div"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
-smalltalk.addMethod(
-"_renderFullscreenControlsOn_",
-smalltalk.method({
-selector: "renderFullscreenControlsOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-(function($rec){smalltalk.send($rec, "_class_", [unescape("b-zoom-fullscreen")]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(smalltalk.send(html, "_a", []), "_onClick_", [(function(){return smalltalk.send(self, "_toggleFullscreen", []);})]);})]);})(smalltalk.send(html, "_div", []));
-return self;},
-args: ["html"],
-source: "renderFullscreenControlsOn: html\x0a\x09html div \x0a\x09\x09class: 'b-zoom-fullscreen';\x0a\x09\x09with: [ html a onClick: [self toggleFullscreen] ].",
-messageSends: ["class:", "with:", "onClick:", "a", "toggleFullscreen", "div"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_renderPage_class_on_",
 smalltalk.method({
@@ -1190,26 +1326,6 @@ referencedClasses: ["PageWidget"]
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderPageDescriptionOn_",
-smalltalk.method({
-selector: "renderPageDescriptionOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-var $1,$2;
-$1=smalltalk.send(html,"_div",[]);
-smalltalk.send($1,"_class_",["page-desc"]);
-$2=smalltalk.send($1,"_yourself",[]);
-self["@pageDescriptionsBrush"]=$2;
-return self},
-args: ["html"],
-source: "renderPageDescriptionOn: html \x09\x0a\x09pageDescriptionsBrush := html div \x0a                                                               class: 'page-desc';\x0a                       \x09\x09\x09\x09\x09\x09\x09\x09\x09\x09\x09yourself.\x0a                      ",
-messageSends: ["class:", "div", "yourself"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_renderScriptsOn_Then_",
 smalltalk.method({
@@ -1249,54 +1365,6 @@ referencedClasses: []
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_renderWidgetOn_",
-smalltalk.method({
-selector: "renderWidgetOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-var $1,$3,$2;
-$1=smalltalk.send(html,"_div",[]);
-smalltalk.send($1,"_class_",[smalltalk.send(self,"_widgetClass",[])]);
-$2=smalltalk.send($1,"_with_",[(function(){
-smalltalk.send(self,"_renderFullscreenControlsOn_",[html]);
-smalltalk.send(self,"_renderDownloadBookOn_",[html]);
-smalltalk.send(self,"_renderBookMenuOn_",[html]);
-smalltalk.send(self,"_renderZoomControlsOn_",[html]);
-smalltalk.send(self,"_renderPageDescriptionOn_",[html]);
-$3=smalltalk.send(self,"_renderBookOn_",[html]);
-return $3;
-})]);
-if(smalltalk.assert(self["@isFullscreen"])){
-smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_addClass_",["fullscreen"]);
-} else {
-smalltalk.send(smalltalk.send("body","_asJQuery",[]),"_removeClass_",["fullscreen"]);
-};
-return self},
-args: ["html"],
-source: "renderWidgetOn: html\x0a\x09html div\x0a\x09\x09class: self widgetClass; \x0a\x09\x09with: [\x09self \x0a                    renderFullscreenControlsOn: html;\x0a\x09\x09\x09\x09\x09renderDownloadBookOn: html;\x0a                  \x09renderBookMenuOn: html;\x0a                    renderZoomControlsOn: html;\x0a\x09\x09\x09\x09\x09renderPageDescriptionOn: html;\x0a                  \x09renderBookOn: html \x09].\x0a    \x0a\x09isFullscreen \x0a\x09\x09ifTrue: ['body' asJQuery addClass: 'fullscreen'] \x0a\x09\x09ifFalse: ['body' asJQuery removeClass: 'fullscreen'].",
-messageSends: ["class:", "widgetClass", "div", "with:", "renderFullscreenControlsOn:", "renderDownloadBookOn:", "renderBookMenuOn:", "renderZoomControlsOn:", "renderPageDescriptionOn:", "renderBookOn:", "ifTrue:ifFalse:", "addClass:", "asJQuery", "removeClass:"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
-smalltalk.addMethod(
-"_renderZoomControlsOn_",
-smalltalk.method({
-selector: "renderZoomControlsOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-(function($rec){smalltalk.send($rec, "_class_", [unescape("b-zoom-magnify")]);return smalltalk.send($rec, "_with_", [(function(){(self['@zoomLeftPageAnchor']=smalltalk.send(smalltalk.send(smalltalk.send(html, "_a", []), "_onClick_", [(function(){return smalltalk.send(self, "_zoomLeftPage", []);})]), "_asJQuery", []));smalltalk.send(self['@zoomLeftPageAnchor'], "_hide", []);(self['@zoomRightPageAnchor']=smalltalk.send(smalltalk.send(smalltalk.send(html, "_a", []), "_onClick_", [(function(){return smalltalk.send(self, "_zoomRightPage", []);})]), "_asJQuery", []));smalltalk.send(self['@zoomRightPageAnchor'], "_hide", []);return (self['@pageZoomBrush']=(function($rec){smalltalk.send($rec, "_class_", [unescape("b-zoom")]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(html, "_div", [])));})]);})(smalltalk.send(html, "_div", []));
-return self;},
-args: ["html"],
-source: "renderZoomControlsOn: html\x0a\x09html div\x0a\x09\x09class: 'b-zoom-magnify';\x0a\x09\x09with: [ \x09zoomLeftPageAnchor := (html a onClick: [self zoomLeftPage]) asJQuery.\x0a                       \x09\x09zoomLeftPageAnchor hide.\x0a                       \x0a                         \x09zoomRightPageAnchor := (html a onClick: [self zoomRightPage]) asJQuery.\x0a                       \x09\x09zoomRightPageAnchor hide.\x0a                                pageZoomBrush := html div \x0a\x09\x09\x09\x09\x09\x09class: 'b-zoom';\x0a\x09\x09\x09\x09\x09\x09yourself.\x0a                ].",
-messageSends: ["class:", "with:", "asJQuery", "onClick:", "a", "zoomLeftPage", "hide", "zoomRightPage", "yourself", "div"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_reset",
 smalltalk.method({
@@ -1396,22 +1464,6 @@ referencedClasses: []
 }),
 smalltalk.BookWidget);
 
-smalltalk.addMethod(
-"_widgetClass",
-smalltalk.method({
-selector: "widgetClass",
-category: 'accessing',
-fn: function (){
-var self=this;
-return ((($receiver = self['@isFullscreen']).klass === smalltalk.Boolean) ? ($receiver ? (function(){return unescape("fullscreen%20bk-widget");})() : (function(){return unescape("bk-widget");})()) : smalltalk.send($receiver, "_ifTrue_ifFalse_", [(function(){return unescape("fullscreen%20bk-widget");}), (function(){return unescape("bk-widget");})]));
-return self;},
-args: [],
-source: "widgetClass\x0a\x09^ isFullscreen \x0a\x09\x09ifTrue: ['fullscreen bk-widget'] \x0a\x09\x09ifFalse: ['bk-widget']",
-messageSends: ["ifTrue:ifFalse:"],
-referencedClasses: []
-}),
-smalltalk.BookWidget);
-
 smalltalk.addMethod(
 "_width",
 smalltalk.method({
diff --git a/amber/afi/st/AFI-Tests.st b/amber/afi/st/AFI-Tests.st
index 5ff62ef453d01455a35c0a1a95f9028eb2616ba6..e235387ca602c1ac37f55ac986dbb475295b2652 100644
--- a/amber/afi/st/AFI-Tests.st
+++ b/amber/afi/st/AFI-Tests.st
@@ -237,6 +237,10 @@ tintinJSON
 
 testBookletShouldNotBeLoaded
 	self assert: 0 equals: ( container find: '.bk-widget') length
+!
+
+testFirstPageImageShouldLinkToOneDotJpg
+	self assert: 0 < (container find: 'img[src*="userfiles/album/2/thumbs/media/1.jpg"]')  length
 ! !
 
 TestCase subclass: #CycleTest
diff --git a/amber/afi/st/AFI.st b/amber/afi/st/AFI.st
index ccdab36aeb0539b158ff7fd6c14fa72c8e7a5f8f..86ede1543e424e6c8ce5f95aede886f0a1bcf834 100644
--- a/amber/afi/st/AFI.st
+++ b/amber/afi/st/AFI.st
@@ -308,7 +308,7 @@ renderPagesOn: html
 ! !
 
 Widget subclass: #AbstractBookWidget
-	instanceVariableNames: 'book scriptsRoot rootBrush'
+	instanceVariableNames: 'book scriptsRoot rootBrush isFullscreen downloadBrush menuJQuery pageZoomWidget pageZoomBrush zoomLeftPageAnchor zoomRightPageAnchor pageDescriptionsBrush'
 	package: 'AFI'!
 
 !AbstractBookWidget methodsFor: 'accessor'!
@@ -327,10 +327,26 @@ scriptsRoot
 
 scriptsRoot: anUrl
 	scriptsRoot := anUrl
+!
+
+widgetClass
+	^ isFullscreen 
+		ifTrue: ['fullscreen bk-widget'] 
+		ifFalse: ['bk-widget']
 ! !
 
 !AbstractBookWidget methodsFor: 'rendering'!
 
+renderBookMenuOn: html
+	menuJQuery := html div
+		class: 'book-menu';
+		asJQuery.
+!
+
+renderBookOn: html
+	self subclassResponsibility
+!
+
 renderDevToolsOn: html
 	((Smalltalk current at: 'Browser') notNil and: [self isRunInTestCase not]) ifTrue:
 		 [   AFIIDETools 
@@ -339,10 +355,56 @@ renderDevToolsOn: html
 					addButton: 'Toggle fullscreen' action: [ self toggleFullscreen ]	]
 !
 
+renderDownloadBookOn: html
+	downloadBrush := html div class: 'b-download-book'
+!
+
+renderFullscreenControlsOn: html
+	html div 
+		class: 'b-zoom-fullscreen';
+		with: [ html a onClick: [self toggleFullscreen] ].
+!
+
 renderOn: html
      self renderDevToolsOn: html.
 	rootBrush := html root.
 	self renderWidgetOn: html.
+!
+
+renderPageDescriptionOn: html 	
+	pageDescriptionsBrush := html div 
+                                                               class: 'page-desc';
+                       											yourself.
+!
+
+renderWidgetOn: html
+	html div
+		class: self widgetClass; 
+		with: [	self 
+                    renderFullscreenControlsOn: html;
+					renderDownloadBookOn: html;
+                  	renderBookMenuOn: html;
+                    renderZoomControlsOn: html;
+					renderPageDescriptionOn: html;
+                  	renderBookOn: html 	].
+    
+	isFullscreen 
+		ifTrue: ['body' asJQuery addClass: 'fullscreen'] 
+		ifFalse: ['body' asJQuery removeClass: 'fullscreen'].
+!
+
+renderZoomControlsOn: html
+	html div
+		class: 'b-zoom-magnify';
+		with: [ 	zoomLeftPageAnchor := (html a onClick: [self zoomLeftPage]) asJQuery.
+                       		zoomLeftPageAnchor hide.
+                       
+                         	zoomRightPageAnchor := (html a onClick: [self zoomRightPage]) asJQuery.
+                       		zoomRightPageAnchor hide.
+                                pageZoomBrush := html div 
+						class: 'b-zoom';
+						yourself.
+                ].
 ! !
 
 !AbstractBookWidget methodsFor: 'testing'!
@@ -361,13 +423,13 @@ AbstractBookWidget subclass: #BookMonoWidget
 	instanceVariableNames: ''
 	package: 'AFI'!
 
-!BookMonoWidget methodsFor: 'rendering'!
+!BookMonoWidget methodsFor: 'not yet classified'!
 
-renderWidgetOn: html
+renderBookOn: html
 ! !
 
 AbstractBookWidget subclass: #BookWidget
-	instanceVariableNames: 'currentPageNo pageZoomBrush pageZoomWidget zoomLeftPageAnchor zoomRightPageAnchor pageDescriptionsBrush loader bookContainer width menuJQuery isFullscreen downloadBrush leftFolioBrush rightFolioBrush announcer'
+	instanceVariableNames: 'currentPageNo loader bookContainer width downloadBrush leftFolioBrush rightFolioBrush announcer'
 	package: 'AFI'!
 
 !BookWidget methodsFor: 'accessing'!
@@ -436,12 +498,6 @@ rightPage
 	^ book pageAt: currentPageNo ifAbsent: [Page new].
 !
 
-widgetClass
-	^ isFullscreen 
-		ifTrue: ['fullscreen bk-widget'] 
-		ifFalse: ['bk-widget']
-!
-
 width
 	^ (isFullscreen 
 			ifTrue: [('body' asJQuery width - (2 * self navigatorWidth)) min: 900] 
@@ -951,12 +1007,6 @@ renderBook: aBook on: aBrush
 	isFullscreen ifTrue: [self renderBookNavigator; renderBookTitle]
 !
 
-renderBookMenuOn: html
-	menuJQuery := html div
-		class: 'book-menu';
-		asJQuery.
-!
-
 renderBookNavigator
 	|navigatorDiv|
 	navigatorDiv := ('<div></div>') asJQuery.
@@ -995,52 +1045,6 @@ renderBookTitle
 	|titleDiv|
 	titleDiv := ('<h1 class="title">', book title, ' ( ', book size ,' pages ) </h1>') asJQuery.
 	titleDiv insertBefore: menuJQuery.
-!
-
-renderDownloadBookOn: html
-	downloadBrush := html div class: 'b-download-book'
-!
-
-renderFullscreenControlsOn: html
-	html div 
-		class: 'b-zoom-fullscreen';
-		with: [ html a onClick: [self toggleFullscreen] ].
-!
-
-renderPageDescriptionOn: html 	
-	pageDescriptionsBrush := html div 
-                                                               class: 'page-desc';
-                       											yourself.
-!
-
-renderWidgetOn: html
-	html div
-		class: self widgetClass; 
-		with: [	self 
-                    renderFullscreenControlsOn: html;
-					renderDownloadBookOn: html;
-                  	renderBookMenuOn: html;
-                    renderZoomControlsOn: html;
-					renderPageDescriptionOn: html;
-                  	renderBookOn: html 	].
-    
-	isFullscreen 
-		ifTrue: ['body' asJQuery addClass: 'fullscreen'] 
-		ifFalse: ['body' asJQuery removeClass: 'fullscreen'].
-!
-
-renderZoomControlsOn: html
-	html div
-		class: 'b-zoom-magnify';
-		with: [ 	zoomLeftPageAnchor := (html a onClick: [self zoomLeftPage]) asJQuery.
-                       		zoomLeftPageAnchor hide.
-                       
-                         	zoomRightPageAnchor := (html a onClick: [self zoomRightPage]) asJQuery.
-                       		zoomRightPageAnchor hide.
-                                pageZoomBrush := html div 
-						class: 'b-zoom';
-						yourself.
-                ].
 ! !
 
 !BookWidget methodsFor: 'show'!