better slides

examples/presentation/js/Presentation.deploy.js

@@ -1,201 +1,83 @@
 smalltalk.addPackage('Presentation', {});
-smalltalk.addClass('PresentationNavigator', smalltalk.Widget, ['presentationBrush', 'currentPresentation', 'slideSelect'], 'Presentation');
-smalltalk.addMethod(
-unescape('_currentPresentation_'),
-smalltalk.method({
-selector: unescape('currentPresentation%3A'),
-fn: function (aPresentation){
-var self=this;
-(self['@currentPresentation']=aPresentation);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_currentPresentation'),
-smalltalk.method({
-selector: unescape('currentPresentation'),
-fn: function (){
-var self=this;
-return (($receiver = self['@currentPresentation']) == nil || $receiver == undefined) ? (function(){return (self['@currentPresentation']=smalltalk.send(smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_first", []), "_new", []));})() : $receiver;
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_style'),
-smalltalk.method({
-selector: unescape('style'),
-fn: function (){
-var self=this;
-return unescape("%0A%23navigator%20%7B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20margin-left%3A%20-150px%3B%0A%20%20%20%20padding%3A%205px%3B%0A%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20-moz-border-radius%3A%205px%3B%0A%20%20%20%20-webkit-border-radius%3A%205px%3B%0A%20%20%20%20background%3A%20%23333%3B%0A%20%20%20%20opacity%3A%200.3%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%7D%0A%0A%23navigator%20a%20%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20padding%3A%200%202px%3B%0A%20%20%20%20font-size%3A%2014px%3B%0A%7D%0A%0A%23navigator%3Ahover%20%7B%0A%20%20%20%20opacity%3A%200.8%3B%0A%7D%0A");
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_selectPresentation_'),
-smalltalk.method({
-selector: unescape('selectPresentation%3A'),
-fn: function (aPresentationClass){
-var self=this;
-smalltalk.send(self, "_currentPresentation_", [smalltalk.send(aPresentationClass, "_new", [])]);
-smalltalk.send(self, "_renderCurrentPresentation", []);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_selectPresentationNamed_'),
-smalltalk.method({
-selector: unescape('selectPresentationNamed%3A'),
-fn: function (aString){
-var self=this;
-var presentationClass=nil;
-(presentationClass=smalltalk.send(smalltalk.send((smalltalk.Smalltalk || Smalltalk), "_current", []), "_at_", [aString]));
-(($receiver = presentationClass) != nil && $receiver != undefined) ? (function(){return smalltalk.send(self, "_selectPresentation_", [presentationClass]);})() : nil;
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
+smalltalk.addClass('Slide', smalltalk.Widget, ['presentation'], 'Presentation');
 smalltalk.addMethod(
-unescape('_previousSlide'),
+unescape('_presentation'),
 smalltalk.method({
-selector: unescape('previousSlide'),
+selector: unescape('presentation'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_previousSlide", []);
-smalltalk.send(self, "_updateHash", []);
+return self['@presentation'];
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_nextSlide'),
+unescape('_presentation_'),
 smalltalk.method({
-selector: unescape('nextSlide'),
-fn: function (){
+selector: unescape('presentation%3A'),
+fn: function (aPresentation){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_nextSlide", []);
-smalltalk.send(self, "_updateHash", []);
+(self['@presentation']=aPresentation);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_reload'),
+unescape('_id'),
 smalltalk.method({
-selector: unescape('reload'),
+selector: unescape('id'),
 fn: function (){
 var self=this;
-var slideIndex=nil;
-(slideIndex=smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", []));
-smalltalk.send(self, "_currentPresentation_", [smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_new", [])]);
-smalltalk.send(self, "_renderCurrentPresentation", []);
-smalltalk.send(self, "_selectSlideAt_", [slideIndex]);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_selectSlideAt_'),
-smalltalk.method({
-selector: unescape('selectSlideAt%3A'),
-fn: function (anInteger){
-var self=this;
-smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_moveAt_", [anInteger]);
-smalltalk.send(self, "_updateHash", []);
+return smalltalk.send(smalltalk.send(self, "_class", []), "_name", []);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_updateHash'),
+unescape('_cssClass'),
 smalltalk.method({
-selector: unescape('updateHash'),
+selector: unescape('cssClass'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash_", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_name", []), "__comma", [unescape("-")]), "__comma", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", [])])]);
+return "slide";
 return self;}
 }),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_checkHash'),
-smalltalk.method({
-selector: unescape('checkHash'),
-fn: function (){
-var self=this;
-try{var hash=nil;
-var presentation=nil;
-(hash=smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash", []), "_replace_with_", [unescape("%5E%23"), ""]), "_tokenize_", [unescape("-")]));
-(presentation=smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_detect_ifNone_", [(function(aPresentationClass){return smalltalk.send(smalltalk.send(aPresentationClass, "_name", []), "__eq_eq", [smalltalk.send(hash, "_first", [])]);}), (function(){return (function(){throw({name: 'stReturn', selector: '_checkHash', fn: function(){return self}})})();})]));
-((($receiver = smalltalk.send(presentation, "__eq_eq", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", [])])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})]));
-return self;
-} catch(e) {if(e.name === 'stReturn' && e.selector === '_checkHash'){return e.fn()} throw(e)}}
-}),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_checkHashChange'),
+unescape('_backgroundColor'),
 smalltalk.method({
-selector: unescape('checkHashChange'),
+selector: unescape('backgroundColor'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof window == 'undefined' ? nil : window)]), "_bind_do_", ["hashchange", (function(){return smalltalk.send(self, "_checkHash", []);})]);
+return unescape("%23555");
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_setKeybindings'),
+unescape('_title'),
 smalltalk.method({
-selector: unescape('setKeybindings'),
+selector: unescape('title'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_keyup_", [(function(e){var node=nil;
-(node=smalltalk.send(smalltalk.send(smalltalk.send(e, "_target", []), "_nodeName", []), "_asLowercase", []));return ((($receiver = smalltalk.send(smalltalk.send(node, "__eq", ["textarea"]), "_or_", [(function(){return smalltalk.send(node, "__eq", ["input"]);})])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})]));})]);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_renderToolsOn_'),
-smalltalk.method({
-selector: unescape('renderToolsOn%3A'),
-fn: function (html){
-var self=this;
-(function($rec){smalltalk.send($rec, "_with_", ["IDE"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send((smalltalk.TabManager || TabManager), "_current", []), "_open", []);})]);})(smalltalk.send(html, "_a", []));
-(function($rec){smalltalk.send($rec, "_with_", ["Reload"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_reload", []);})]);})(smalltalk.send(html, "_a", []));
-(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2190")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]);})(smalltalk.send(html, "_a", []));
-(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2192")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]);})(smalltalk.send(html, "_a", []));
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_renderPresentationSelectOn_'),
-smalltalk.method({
-selector: unescape('renderPresentationSelectOn%3A'),
-fn: function (html){
-var self=this;
-var presentationSelect=nil;
-(presentationSelect=smalltalk.send(html, "_select", []));
-(function($rec){smalltalk.send($rec, "_onChange_", [(function(){return smalltalk.send(self, "_selectPresentationNamed_", [smalltalk.send(smalltalk.send(presentationSelect, "_asJQuery", []), "_val", [])]);})]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentationsDo_", [(function(aPresentationClass){return (function($rec){smalltalk.send($rec, "_value_", [smalltalk.send(aPresentationClass, "_name", [])]);return smalltalk.send($rec, "_with_", [smalltalk.send(aPresentationClass, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);})(presentationSelect);
+return smalltalk.send(self, "_id", []);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_open'),
+unescape('_show'),
 smalltalk.method({
-selector: unescape('open'),
+selector: unescape('show'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_ready_", [(function(){return (function($rec){smalltalk.send($rec, "_appendToJQuery_", [smalltalk.send("body", "_asJQuery", [])]);smalltalk.send($rec, "_setKeybindings", []);return smalltalk.send($rec, "_checkHashChange", []);})(self);})]);
+(($receiver = smalltalk.send(self, "_backgroundColor", [])) != nil && $receiver != undefined) ? (function(){return smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [unescape("%23slides")]), "_css_color_", ["background", smalltalk.send(self, "_backgroundColor", [])]);})() : nil;
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [".slide"]), "_hide_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [smalltalk.send(unescape("%23"), "__comma", [smalltalk.send(self, "_id", [])])]), "_show_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
 unescape('_renderOn_'),
@@ -203,74 +85,44 @@ smalltalk.method({
 selector: unescape('renderOn%3A'),
 fn: function (html){
 var self=this;
-(function($rec){smalltalk.send($rec, "_type_", [unescape("text/css")]);return smalltalk.send($rec, "_with_", [smalltalk.send(self, "_style", [])]);})(smalltalk.send(html, "_style", []));
-(function($rec){smalltalk.send($rec, "_id_", ["navigator"]);return smalltalk.send($rec, "_with_", [(function(){return (function($rec){smalltalk.send($rec, "_renderToolsOn_", [html]);smalltalk.send($rec, "_renderPresentationSelectOn_", [html]);return smalltalk.send($rec, "_renderSlideSelectOn_", [html]);})(self);})]);})(smalltalk.send(html, "_div", []));
-(self['@presentationBrush']=(function($rec){smalltalk.send($rec, "_id_", ["presentation"]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(html, "_div", [])));
-smalltalk.send(self, "_checkHash", []);
-smalltalk.send(self, "_renderCurrentPresentation", []);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_renderCurrentPresentation'),
-smalltalk.method({
-selector: unescape('renderCurrentPresentation'),
-fn: function (){
-var self=this;
-smalltalk.send(self['@presentationBrush'], "_contents_", [(function(html){return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_renderOn_", [html]);})]);
-smalltalk.send(self, "_updateSlideSelect", []);
+(function($rec){smalltalk.send($rec, "_class_", [smalltalk.send(self, "_cssClass", [])]);smalltalk.send($rec, "_id_", [smalltalk.send(self, "_id", [])]);return smalltalk.send($rec, "_with_", [(function(){smalltalk.send(self, "_renderSlideOn_", [html]);return smalltalk.send(self, "_renderMetaOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_renderSlideSelectOn_'),
+unescape('_renderSlideOn_'),
 smalltalk.method({
-selector: unescape('renderSlideSelectOn%3A'),
+selector: unescape('renderSlideOn%3A'),
 fn: function (html){
 var self=this;
-(self['@slideSelect']=smalltalk.send(html, "_select", []));
-smalltalk.send(self['@slideSelect'], "_onChange_", [(function(){return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(smalltalk.send(self['@slideSelect'], "_asJQuery", []), "_val", [])]);})]);
-smalltalk.send(self, "_updateSlideSelect", []);
-return self;}
-}),
-smalltalk.PresentationNavigator);
 
-smalltalk.addMethod(
-unescape('_updateSlideSelect'),
-smalltalk.method({
-selector: unescape('updateSlideSelect'),
-fn: function (){
-var self=this;
-smalltalk.send(self['@slideSelect'], "_contents_", [(function(html){var index=nil;
-(index=(0));return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_slidesDo_", [(function(aSlide){(index=((($receiver = index).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));return (function($rec){smalltalk.send($rec, "_value_", [index]);return smalltalk.send($rec, "_with_", [smalltalk.send(aSlide, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);
 return self;}
 }),
-smalltalk.PresentationNavigator);
-
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_initialize'),
+unescape('_renderMetaOn_'),
 smalltalk.method({
-selector: unescape('initialize'),
-fn: function (){
+selector: unescape('renderMetaOn%3A'),
+fn: function (html){
 var self=this;
-return smalltalk.send(self, "_open", []);
+(function($rec){smalltalk.send($rec, "_id_", ["meta"]);return smalltalk.send($rec, "_with_", [(function(){(function($rec){smalltalk.send($rec, "_class_", ["title"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_title", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["description"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_description", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["author"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_author", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send("mailto:", "__comma", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_email", [])])]);})(smalltalk.send(html, "_a", []));return (function($rec){smalltalk.send($rec, "_class_", ["url"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);})(smalltalk.send(html, "_a", []));})]);})(smalltalk.send(html, "_div", []));
 return self;}
 }),
-smalltalk.PresentationNavigator.klass);
+smalltalk.Slide);
+
 
 smalltalk.addMethod(
-unescape('_open'),
+unescape('_on_'),
 smalltalk.method({
-selector: unescape('open'),
-fn: function (){
+selector: unescape('on%3A'),
+fn: function (aPresentation){
 var self=this;
-return smalltalk.send(smalltalk.send(self, "_new", []), "_open", []);
+return (function($rec){smalltalk.send($rec, "_presentation_", [aPresentation]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(self, "_new", []));
 return self;}
 }),
-smalltalk.PresentationNavigator.klass);
+smalltalk.Slide.klass);
 
 
 smalltalk.addClass('Presentation', smalltalk.Widget, ['currentSlide', 'slides'], 'Presentation');
@@ -445,234 +297,382 @@ return self;}
 smalltalk.Presentation);
 
 smalltalk.addMethod(
-unescape('_currentSlideIndex'),
+unescape('_currentSlideIndex'),
+smalltalk.method({
+selector: unescape('currentSlideIndex'),
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_slides", []), "_indexOf_ifAbsent_", [smalltalk.send(self, "_currentSlide", []), (function(){return (1);})]);
+return self;}
+}),
+smalltalk.Presentation);
+
+smalltalk.addMethod(
+unescape('_slidesDo_'),
+smalltalk.method({
+selector: unescape('slidesDo%3A'),
+fn: function (aBlockWithArg){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_slides", []), "_do_", [(function(aSlide){return smalltalk.send(aBlockWithArg, "_value_", [aSlide]);})]);
+return self;}
+}),
+smalltalk.Presentation);
+
+smalltalk.addMethod(
+unescape('_initSlides'),
+smalltalk.method({
+selector: unescape('initSlides'),
+fn: function (){
+var self=this;
+(self['@slides']=smalltalk.send(smalltalk.send(self, "_slideClasses", []), "_collect_", [(function(each){return smalltalk.send(each, "_on_", [self]);})]));
+return self;}
+}),
+smalltalk.Presentation);
+
+smalltalk.addMethod(
+unescape('_renderOn_'),
+smalltalk.method({
+selector: unescape('renderOn%3A'),
+fn: function (html){
+var self=this;
+(function($rec){smalltalk.send($rec, "_type_", [unescape("text/css")]);return smalltalk.send($rec, "_with_", [smalltalk.send(self, "_style", [])]);})(smalltalk.send(html, "_style", []));
+(function($rec){smalltalk.send($rec, "_id_", ["slides"]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(self, "_renderSlidesOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
+return self;}
+}),
+smalltalk.Presentation);
+
+smalltalk.addMethod(
+unescape('_renderSlidesOn_'),
+smalltalk.method({
+selector: unescape('renderSlidesOn%3A'),
+fn: function (html){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_slides", []), "_do_", [(function(each){return smalltalk.send(each, "_renderOn_", [html]);})]);
+(($receiver = self['@currentSlide']) == nil || $receiver == undefined) ? (function(){return (self['@currentSlide']=smalltalk.send(smalltalk.send(self, "_slides", []), "_first", []));})() : $receiver;
+smalltalk.send(self, "_showCurrentSlide", []);
+return self;}
+}),
+smalltalk.Presentation);
+
+
+smalltalk.Presentation.klass.iVarNames = ['current'];
+smalltalk.addMethod(
+unescape('_concretePresentations'),
+smalltalk.method({
+selector: unescape('concretePresentations'),
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_allSubclasses", []), "_select_", [(function(aPresentationClass){return smalltalk.send(aPresentationClass, "_isConcrete", []);})]);
+return self;}
+}),
+smalltalk.Presentation.klass);
+
+smalltalk.addMethod(
+unescape('_title'),
+smalltalk.method({
+selector: unescape('title'),
+fn: function (){
+var self=this;
+return "Slides";
+return self;}
+}),
+smalltalk.Presentation.klass);
+
+smalltalk.addMethod(
+unescape('_concretePresentationsDo_'),
+smalltalk.method({
+selector: unescape('concretePresentationsDo%3A'),
+fn: function (aBlockWithArg){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_concretePresentations", []), "_do_", [aBlockWithArg]);
+return self;}
+}),
+smalltalk.Presentation.klass);
+
+smalltalk.addMethod(
+unescape('_isConcrete'),
+smalltalk.method({
+selector: unescape('isConcrete'),
+fn: function (){
+var self=this;
+return false;
+return self;}
+}),
+smalltalk.Presentation.klass);
+
+
+smalltalk.addClass('PresentationNavigator', smalltalk.Widget, ['presentationBrush', 'currentPresentation', 'slideSelect'], 'Presentation');
+smalltalk.addMethod(
+unescape('_currentPresentation_'),
+smalltalk.method({
+selector: unescape('currentPresentation%3A'),
+fn: function (aPresentation){
+var self=this;
+(self['@currentPresentation']=aPresentation);
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_currentPresentation'),
+smalltalk.method({
+selector: unescape('currentPresentation'),
+fn: function (){
+var self=this;
+return (($receiver = self['@currentPresentation']) == nil || $receiver == undefined) ? (function(){return (self['@currentPresentation']=smalltalk.send(smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_first", []), "_new", []));})() : $receiver;
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_style'),
 smalltalk.method({
-selector: unescape('currentSlideIndex'),
+selector: unescape('style'),
 fn: function (){
 var self=this;
-return smalltalk.send(smalltalk.send(self, "_slides", []), "_indexOf_ifAbsent_", [smalltalk.send(self, "_currentSlide", []), (function(){return (1);})]);
+return unescape("%0A%23navigator%20%7B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20margin-left%3A%20-150px%3B%0A%20%20%20%20padding%3A%205px%3B%0A%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20-moz-border-radius%3A%205px%3B%0A%20%20%20%20-webkit-border-radius%3A%205px%3B%0A%20%20%20%20background%3A%20%23333%3B%0A%20%20%20%20opacity%3A%200.3%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%7D%0A%0A%23navigator%20a%20%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20padding%3A%200%202px%3B%0A%20%20%20%20font-size%3A%2014px%3B%0A%7D%0A%0A%23navigator%3Ahover%20%7B%0A%20%20%20%20opacity%3A%200.8%3B%0A%7D%0A");
 return self;}
 }),
-smalltalk.Presentation);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_slidesDo_'),
+unescape('_selectPresentation_'),
 smalltalk.method({
-selector: unescape('slidesDo%3A'),
-fn: function (aBlockWithArg){
+selector: unescape('selectPresentation%3A'),
+fn: function (aPresentationClass){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_slides", []), "_do_", [(function(aSlide){return smalltalk.send(aBlockWithArg, "_value_", [aSlide]);})]);
+smalltalk.send(self, "_currentPresentation_", [smalltalk.send(aPresentationClass, "_new", [])]);
+smalltalk.send(self, "_renderCurrentPresentation", []);
 return self;}
 }),
-smalltalk.Presentation);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_initSlides'),
+unescape('_selectPresentationNamed_'),
 smalltalk.method({
-selector: unescape('initSlides'),
-fn: function (){
+selector: unescape('selectPresentationNamed%3A'),
+fn: function (aString){
 var self=this;
-(self['@slides']=smalltalk.send(smalltalk.send(self, "_slideClasses", []), "_collect_", [(function(each){return smalltalk.send(each, "_on_", [self]);})]));
+var presentationClass=nil;
+(presentationClass=smalltalk.send(smalltalk.send((smalltalk.Smalltalk || Smalltalk), "_current", []), "_at_", [aString]));
+(($receiver = presentationClass) != nil && $receiver != undefined) ? (function(){return smalltalk.send(self, "_selectPresentation_", [presentationClass]);})() : nil;
 return self;}
 }),
-smalltalk.Presentation);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderOn_'),
+unescape('_previousSlide'),
 smalltalk.method({
-selector: unescape('renderOn%3A'),
-fn: function (html){
+selector: unescape('previousSlide'),
+fn: function (){
 var self=this;
-(function($rec){smalltalk.send($rec, "_type_", [unescape("text/css")]);return smalltalk.send($rec, "_with_", [smalltalk.send(self, "_style", [])]);})(smalltalk.send(html, "_style", []));
-(function($rec){smalltalk.send($rec, "_id_", ["slides"]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(self, "_renderSlidesOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
+smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_previousSlide", []);
+smalltalk.send(self, "_updateHash", []);
 return self;}
 }),
-smalltalk.Presentation);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderSlidesOn_'),
+unescape('_nextSlide'),
 smalltalk.method({
-selector: unescape('renderSlidesOn%3A'),
-fn: function (html){
+selector: unescape('nextSlide'),
+fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_slides", []), "_do_", [(function(each){return smalltalk.send(each, "_renderOn_", [html]);})]);
-(($receiver = self['@currentSlide']) == nil || $receiver == undefined) ? (function(){return (self['@currentSlide']=smalltalk.send(smalltalk.send(self, "_slides", []), "_first", []));})() : $receiver;
-smalltalk.send(self, "_showCurrentSlide", []);
+smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_nextSlide", []);
+smalltalk.send(self, "_updateHash", []);
 return self;}
 }),
-smalltalk.Presentation);
-
+smalltalk.PresentationNavigator);
 
-smalltalk.Presentation.klass.iVarNames = ['current'];
 smalltalk.addMethod(
-unescape('_concretePresentations'),
+unescape('_reload'),
 smalltalk.method({
-selector: unescape('concretePresentations'),
+selector: unescape('reload'),
 fn: function (){
 var self=this;
-return smalltalk.send(smalltalk.send(self, "_allSubclasses", []), "_select_", [(function(aPresentationClass){return smalltalk.send(aPresentationClass, "_isConcrete", []);})]);
+var slideIndex=nil;
+(slideIndex=smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", []));
+smalltalk.send(self, "_currentPresentation_", [smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_new", [])]);
+smalltalk.send(self, "_renderCurrentPresentation", []);
+smalltalk.send(self, "_selectSlideAt_", [slideIndex]);
 return self;}
 }),
-smalltalk.Presentation.klass);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_title'),
+unescape('_selectSlideAt_'),
 smalltalk.method({
-selector: unescape('title'),
-fn: function (){
+selector: unescape('selectSlideAt%3A'),
+fn: function (anInteger){
 var self=this;
-return "Slides";
+smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_moveAt_", [anInteger]);
+smalltalk.send(self, "_updateHash", []);
 return self;}
 }),
-smalltalk.Presentation.klass);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_concretePresentationsDo_'),
+unescape('_updateHash'),
 smalltalk.method({
-selector: unescape('concretePresentationsDo%3A'),
-fn: function (aBlockWithArg){
+selector: unescape('updateHash'),
+fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_concretePresentations", []), "_do_", [aBlockWithArg]);
+smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash_", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_name", []), "__comma", [unescape("-")]), "__comma", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", [])])]);
 return self;}
 }),
-smalltalk.Presentation.klass);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_isConcrete'),
+unescape('_checkHash'),
 smalltalk.method({
-selector: unescape('isConcrete'),
+selector: unescape('checkHash'),
 fn: function (){
 var self=this;
-return false;
-return self;}
+try{var hash=nil;
+var presentation=nil;
+(hash=smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash", []), "_replace_with_", [unescape("%5E%23"), ""]), "_tokenize_", [unescape("-")]));
+(presentation=smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_detect_ifNone_", [(function(aPresentationClass){return smalltalk.send(smalltalk.send(aPresentationClass, "_name", []), "__eq_eq", [smalltalk.send(hash, "_first", [])]);}), (function(){return (function(){throw({name: 'stReturn', selector: '_checkHash', fn: function(){return self}})})();})]));
+((($receiver = smalltalk.send(presentation, "__eq_eq", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", [])])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})]));
+return self;
+} catch(e) {if(e.name === 'stReturn' && e.selector === '_checkHash'){return e.fn()} throw(e)}}
 }),
-smalltalk.Presentation.klass);
-
+smalltalk.PresentationNavigator);
 
-smalltalk.addClass('Slide', smalltalk.Widget, ['presentation'], 'Presentation');
 smalltalk.addMethod(
-unescape('_presentation'),
+unescape('_checkHashChange'),
 smalltalk.method({
-selector: unescape('presentation'),
+selector: unescape('checkHashChange'),
 fn: function (){
 var self=this;
-return self['@presentation'];
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof window == 'undefined' ? nil : window)]), "_bind_do_", ["hashchange", (function(){return smalltalk.send(self, "_checkHash", []);})]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_presentation_'),
+unescape('_setKeybindings'),
 smalltalk.method({
-selector: unescape('presentation%3A'),
-fn: function (aPresentation){
+selector: unescape('setKeybindings'),
+fn: function (){
 var self=this;
-(self['@presentation']=aPresentation);
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_keyup_", [(function(e){var node=nil;
+(node=smalltalk.send(smalltalk.send(smalltalk.send(e, "_target", []), "_nodeName", []), "_asLowercase", []));return ((($receiver = smalltalk.send(smalltalk.send(node, "__eq", ["textarea"]), "_or_", [(function(){return smalltalk.send(node, "__eq", ["input"]);})])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})]));})]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_id'),
+unescape('_renderToolsOn_'),
 smalltalk.method({
-selector: unescape('id'),
-fn: function (){
+selector: unescape('renderToolsOn%3A'),
+fn: function (html){
 var self=this;
-return smalltalk.send(smalltalk.send(self, "_class", []), "_name", []);
+(function($rec){smalltalk.send($rec, "_with_", ["IDE"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send((smalltalk.TabManager || TabManager), "_current", []), "_open", []);})]);})(smalltalk.send(html, "_a", []));
+(function($rec){smalltalk.send($rec, "_with_", ["Reload"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_reload", []);})]);})(smalltalk.send(html, "_a", []));
+(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2190")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]);})(smalltalk.send(html, "_a", []));
+(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2192")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]);})(smalltalk.send(html, "_a", []));
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_cssClass'),
+unescape('_renderPresentationSelectOn_'),
 smalltalk.method({
-selector: unescape('cssClass'),
-fn: function (){
+selector: unescape('renderPresentationSelectOn%3A'),
+fn: function (html){
 var self=this;
-return "slide";
+var presentationSelect=nil;
+(presentationSelect=smalltalk.send(html, "_select", []));
+(function($rec){smalltalk.send($rec, "_onChange_", [(function(){return smalltalk.send(self, "_selectPresentationNamed_", [smalltalk.send(smalltalk.send(presentationSelect, "_asJQuery", []), "_val", [])]);})]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentationsDo_", [(function(aPresentationClass){return (function($rec){smalltalk.send($rec, "_value_", [smalltalk.send(aPresentationClass, "_name", [])]);return smalltalk.send($rec, "_with_", [smalltalk.send(aPresentationClass, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);})(presentationSelect);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_backgroundColor'),
+unescape('_open'),
 smalltalk.method({
-selector: unescape('backgroundColor'),
+selector: unescape('open'),
 fn: function (){
 var self=this;
-return unescape("%23555");
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_ready_", [(function(){return (function($rec){smalltalk.send($rec, "_appendToJQuery_", [smalltalk.send("body", "_asJQuery", [])]);smalltalk.send($rec, "_setKeybindings", []);return smalltalk.send($rec, "_checkHashChange", []);})(self);})]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_title'),
+unescape('_renderOn_'),
 smalltalk.method({
-selector: unescape('title'),
-fn: function (){
+selector: unescape('renderOn%3A'),
+fn: function (html){
 var self=this;
-return smalltalk.send(self, "_id", []);
+(function($rec){smalltalk.send($rec, "_type_", [unescape("text/css")]);return smalltalk.send($rec, "_with_", [smalltalk.send(self, "_style", [])]);})(smalltalk.send(html, "_style", []));
+(function($rec){smalltalk.send($rec, "_id_", ["navigator"]);return smalltalk.send($rec, "_with_", [(function(){return (function($rec){smalltalk.send($rec, "_renderToolsOn_", [html]);smalltalk.send($rec, "_renderPresentationSelectOn_", [html]);return smalltalk.send($rec, "_renderSlideSelectOn_", [html]);})(self);})]);})(smalltalk.send(html, "_div", []));
+(self['@presentationBrush']=(function($rec){smalltalk.send($rec, "_id_", ["presentation"]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(html, "_div", [])));
+smalltalk.send(self, "_checkHash", []);
+smalltalk.send(self, "_renderCurrentPresentation", []);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_show'),
+unescape('_renderCurrentPresentation'),
 smalltalk.method({
-selector: unescape('show'),
+selector: unescape('renderCurrentPresentation'),
 fn: function (){
 var self=this;
-(($receiver = smalltalk.send(self, "_backgroundColor", [])) != nil && $receiver != undefined) ? (function(){return smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [unescape("%23slides")]), "_css_color_", ["background", smalltalk.send(self, "_backgroundColor", [])]);})() : nil;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [".slide"]), "_hide_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [smalltalk.send(unescape("%23"), "__comma", [smalltalk.send(self, "_id", [])])]), "_show_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
+smalltalk.send(self['@presentationBrush'], "_contents_", [(function(html){return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_renderOn_", [html]);})]);
+smalltalk.send(self, "_updateSlideSelect", []);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderOn_'),
+unescape('_renderSlideSelectOn_'),
 smalltalk.method({
-selector: unescape('renderOn%3A'),
+selector: unescape('renderSlideSelectOn%3A'),
 fn: function (html){
 var self=this;
-(function($rec){smalltalk.send($rec, "_class_", [smalltalk.send(self, "_cssClass", [])]);smalltalk.send($rec, "_id_", [smalltalk.send(self, "_id", [])]);return smalltalk.send($rec, "_with_", [(function(){smalltalk.send(self, "_renderSlideOn_", [html]);return smalltalk.send(self, "_renderMetaOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
+(self['@slideSelect']=smalltalk.send(html, "_select", []));
+smalltalk.send(self['@slideSelect'], "_onChange_", [(function(){return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(smalltalk.send(self['@slideSelect'], "_asJQuery", []), "_val", [])]);})]);
+smalltalk.send(self, "_updateSlideSelect", []);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderSlideOn_'),
+unescape('_updateSlideSelect'),
 smalltalk.method({
-selector: unescape('renderSlideOn%3A'),
-fn: function (html){
+selector: unescape('updateSlideSelect'),
+fn: function (){
 var self=this;
-
+smalltalk.send(self['@slideSelect'], "_contents_", [(function(html){var index=nil;
+(index=(0));return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_slidesDo_", [(function(aSlide){(index=((($receiver = index).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));return (function($rec){smalltalk.send($rec, "_value_", [index]);return smalltalk.send($rec, "_with_", [smalltalk.send(aSlide, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
+
 
 smalltalk.addMethod(
-unescape('_renderMetaOn_'),
+unescape('_initialize'),
 smalltalk.method({
-selector: unescape('renderMetaOn%3A'),
-fn: function (html){
+selector: unescape('initialize'),
+fn: function (){
 var self=this;
-(function($rec){smalltalk.send($rec, "_id_", ["meta"]);return smalltalk.send($rec, "_with_", [(function(){(function($rec){smalltalk.send($rec, "_class_", ["title"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_title", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["description"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_description", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["author"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_author", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send("mailto:", "__comma", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_email", [])])]);})(smalltalk.send(html, "_a", []));return (function($rec){smalltalk.send($rec, "_class_", ["url"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);})(smalltalk.send(html, "_a", []));})]);})(smalltalk.send(html, "_div", []));
+return smalltalk.send(self, "_open", []);
 return self;}
 }),
-smalltalk.Slide);
-
+smalltalk.PresentationNavigator.klass);
 
 smalltalk.addMethod(
-unescape('_on_'),
+unescape('_open'),
 smalltalk.method({
-selector: unescape('on%3A'),
-fn: function (aPresentation){
+selector: unescape('open'),
+fn: function (){
 var self=this;
-return (function($rec){smalltalk.send($rec, "_presentation_", [aPresentation]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(self, "_new", []));
+return smalltalk.send(smalltalk.send(self, "_new", []), "_open", []);
 return self;}
 }),
-smalltalk.Slide.klass);
+smalltalk.PresentationNavigator.klass);
 
 
 smalltalk.addClass('ESUG2011Presentation', smalltalk.Presentation, [], 'Presentation');
@@ -1498,7 +1498,7 @@ smalltalk.method({
 selector: unescape('slideClasses'),
 fn: function (){
 var self=this;
-return [(smalltalk.FOSDEMIntroSlide || FOSDEMIntroSlide),(smalltalk.CountersSlide || CountersSlide),(smalltalk.JtalkAndJavascriptSlide || JtalkAndJavascriptSlide),(smalltalk.FOSDEMBookletSlide || FOSDEMBookletSlide),(smalltalk.FOSDEMJSPlayGroundSlide || FOSDEMJSPlayGroundSlide),(smalltalk.FOSDEMCanvasSlide || FOSDEMCanvasSlide),(smalltalk.FOSDEMAmberBackend || FOSDEMAmberBackend)];
+return [(smalltalk.FOSDEMIntroSlide || FOSDEMIntroSlide),(smalltalk.CountersSlide || CountersSlide),(smalltalk.JtalkAndJavascriptSlide || JtalkAndJavascriptSlide),(smalltalk.FOSDEMJSPlayGroundSlide || FOSDEMJSPlayGroundSlide),(smalltalk.FOSDEMBookletSlide || FOSDEMBookletSlide),(smalltalk.FOSDEMCanvasSlide || FOSDEMCanvasSlide),(smalltalk.FOSDEMAmberBackend || FOSDEMAmberBackend)];
 return self;}
 }),
 smalltalk.FOSDEM2012Presentation);
@@ -1550,6 +1550,7 @@ fn: function (html){
 var self=this;
 smalltalk.send(self, "_renderBookOn_", [html]);
 (function($rec){smalltalk.send($rec, "_rel_", ["stylesheet"]);return smalltalk.send($rec, "_href_", [unescape("fosdem2012/lib/booklet/jquery.booklet.1.2.0.css")]);})(smalltalk.send(html, "_link", []));
+smalltalk.send(html, "_style_", [smalltalk.send(self, "_style", [])]);
 smalltalk.send((typeof jQuery == 'undefined' ? nil : jQuery), "_getScript_do_", [unescape("fosdem2012/lib/booklet/jquery.booklet.1.2.0.min.js"), (function(){return smalltalk.send(smalltalk.send(unescape("%23book"), "_asJQuery", []), "_booklet_", [smalltalk.send(self, "_bookletOptions", [])]);})]);
 return self;}
 }),
@@ -1588,6 +1589,17 @@ return self;}
 }),
 smalltalk.FOSDEMBookletSlide);
 
+smalltalk.addMethod(
+unescape('_style'),
+smalltalk.method({
+selector: unescape('style'),
+fn: function (){
+var self=this;
+return unescape("%0A%23book%20%7B%20font-size%3A%201.4em%3B%20%7D%0A%23book%20.b-load%20.b-wrap%20%7B%20background-color%3A%20%23DEC3A9%3B%7D%0A%23book%20.b-load%20.b-wrap-left%20%7B%20background-color%3A%20%23DDD%3B%7D%20%7D%20%0A");
+return self;}
+}),
+smalltalk.FOSDEMBookletSlide);
+
 
 
 smalltalk.addClass('FOSDEMAmberBackend', smalltalk.Slide, [], 'Presentation');
@@ -1633,7 +1645,7 @@ smalltalk.method({
 selector: unescape('codeSnippet'),
 fn: function (){
 var self=this;
-return unescape("%7Clogo%7C%0Alogo%3A%3D%27img%23amberlogo%27%20asJQuery.%0Alogo%0A%20%20css%3A%20%27-webkit-transition%27%20%0A%20%20apply%3A%20%27all%2010s%20ease-in-out%27.%0A%0Alogo%0A%20%20css%3A%20%27-webkit-transform%27%20%0A%20%20apply%3A%20%27rotateZ%28360deg%29%27.%0A%0Alogo%20click%3A%20%5B%0A%20%20%20%20window%20alert%3A%20%27This%20is%20cool%20%21%27%5D.%0A%0Alogo%20inspect");
+return unescape("%7Clogo%7C%0Alogo%3A%3D%27img%23amberlogo%27%20asJQuery.%0Alogo%0A%20%20css%3A%20%27-webkit-transition%27%20%0A%20%20apply%3A%20%27all%2010s%20ease-in-out%27.%0A%0A%3Clogo.css%28%0A%09%27-webkit-transform%27%2C%20%0A%09%27rotateZ%28360deg%29%27%29%3B%3E.%0A%0Alogo%20click%3A%20%5B%0A%20%20%20%20window%20alert%3A%20%27This%20is%20cool%20%21%27%5D.%0A%0Alogo%20inspect");
 return self;}
 }),
 smalltalk.FOSDEMJSPlayGroundSlide);
@@ -1658,8 +1670,9 @@ smalltalk.method({
 selector: unescape('renderSlideOn%3A'),
 fn: function (html){
 var self=this;
-smalltalk.send(html, "_h1_", ["Canvas made easy"]);
-(self['@canvas']=(function($rec){smalltalk.send($rec, "_width_", [(700)]);smalltalk.send($rec, "_height_", [(400)]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_drawOnCanvas", []);})]);})(smalltalk.send(html, "_canvas", [])));
+smalltalk.send(html, "_h1_", ["Playing with canvas"]);
+(self['@canvas']=(function($rec){smalltalk.send($rec, "_width_", [(700)]);return smalltalk.send($rec, "_height_", [(400)]);})(smalltalk.send(html, "_canvas", [])));
+smalltalk.send(self, "_updateCanvas", []);
 return self;}
 }),
 smalltalk.FOSDEMCanvasSlide);
@@ -1673,7 +1686,31 @@ var self=this;
 var c2d=nil;
 (self['@c2d']=smalltalk.send(smalltalk.send(self['@canvas'], "_element", []), "_getContext_", ["2d"]));
 smalltalk.send(self['@c2d'], "_clearRect_y_width_height_", [(0), (0), smalltalk.send(smalltalk.send(self['@canvas'], "_element", []), "_width", []), smalltalk.send(smalltalk.send(self['@canvas'], "_element", []), "_height", [])]);
-smalltalk.send((20), "_timesRepeat_", [(function(){return (function($rec){smalltalk.send($rec, "_at_put_", ["fillStyle", smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(unescape("rgba%28"), "__comma", [smalltalk.send(smalltalk.send((255), "_atRandom", []), "_asString", [])]), "__comma", [unescape("%2C")]), "__comma", [smalltalk.send(smalltalk.send((255), "_atRandom", []), "_asString", [])]), "__comma", [unescape("%2C")]), "__comma", [smalltalk.send(smalltalk.send((255), "_atRandom", []), "_asString", [])]), "__comma", [unescape("%2C%200.4%29")])]);return smalltalk.send($rec, "_fillRect_y_width_height_", [smalltalk.send((600), "_atRandom", []), smalltalk.send((300), "_atRandom", []), smalltalk.send((200), "_atRandom", []), smalltalk.send((200), "_atRandom", [])]);})(self['@c2d']);})]);
+smalltalk.send(smalltalk.send((40), "_atRandom", []), "_timesRepeat_", [(function(){var rgba=nil;
+(rgba=smalltalk.send(unescape("%2C"), "_join_", [[smalltalk.send((255), "_atRandom", []),smalltalk.send((255), "_atRandom", []),smalltalk.send((255), "_atRandom", []),((($receiver = smalltalk.send((10), "_atRandom", [])).klass === smalltalk.Number) ? $receiver /(10) : smalltalk.send($receiver, "__slash", [(10)]))]]));smalltalk.send(self['@c2d'], "_at_put_", ["fillStyle", smalltalk.send(smalltalk.send(unescape("rgba%28"), "__comma", [rgba]), "__comma", [unescape("%29")])]);return smalltalk.send(self['@c2d'], "_fillRect_y_width_height_", [smalltalk.send((600), "_atRandom", []), smalltalk.send((300), "_atRandom", []), smalltalk.send((200), "_atRandom", []), smalltalk.send((200), "_atRandom", [])]);})]);
+return self;}
+}),
+smalltalk.FOSDEMCanvasSlide);
+
+smalltalk.addMethod(
+unescape('_cssClass'),
+smalltalk.method({
+selector: unescape('cssClass'),
+fn: function (){
+var self=this;
+return "slide red3d";
+return self;}
+}),
+smalltalk.FOSDEMCanvasSlide);
+
+smalltalk.addMethod(
+unescape('_updateCanvas'),
+smalltalk.method({
+selector: unescape('updateCanvas'),
+fn: function (){
+var self=this;
+smalltalk.send(self, "_drawOnCanvas", []);
+smalltalk.send((typeof window == 'undefined' ? nil : window), "_setTimeout_delay_", [(function(){return smalltalk.send(self, "_updateCanvas", []);}), (500)]);
 return self;}
 }),
 smalltalk.FOSDEMCanvasSlide);

examples/presentation/st/Presentation.st

@@ -1,205 +1,70 @@
 Smalltalk current createPackage: 'Presentation' properties: #{}!
-Widget subclass: #PresentationNavigator
-	instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
+Widget subclass: #Slide
+	instanceVariableNames: 'presentation'
 	category: 'Presentation'!
 
-!PresentationNavigator methodsFor: 'accessing'!
-
-currentPresentation: aPresentation
-	currentPresentation := aPresentation.
-!
-
-currentPresentation
-	^  currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
-!
-
-style
-	^ '
-#navigator {
-    z-index: 1;
-    position: fixed;
-    top: 0;
-    left: 50%;
-    margin-left: -150px;
-    padding: 5px;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    background: #333;
-    opacity: 0.3;
-    color: #eee;
-}
-
-#navigator a {
-    font-weight: bold;
-    color: #eee;
-    text-decoration: none;
-    cursor: pointer;
-    padding: 0 2px;
-    font-size: 14px;
-}
-
-#navigator:hover {
-    opacity: 0.8;
-}
-'
-! !
-
-!PresentationNavigator methodsFor: 'callbacks'!
-
-selectPresentation: aPresentationClass
-	self currentPresentation: aPresentationClass new.
-	self renderCurrentPresentation.
-!
-
-selectPresentationNamed: aString
-	|presentationClass|
-	presentationClass :=  (Smalltalk current at: aString).
-	presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
-!
+!Slide methodsFor: 'accessing'!
 
-previousSlide
-	self currentPresentation previousSlide.
-	self updateHash.
+presentation
+	^presentation
 !
 
-nextSlide
-	self currentPresentation nextSlide.
-	self updateHash.
+presentation: aPresentation
+	presentation := aPresentation
 !
 
-reload
-	|slideIndex|
-	slideIndex := self currentPresentation currentSlideIndex.
-	self currentPresentation: self currentPresentation class new.
-	self renderCurrentPresentation.
-	self selectSlideAt: slideIndex.
+id
+	^ self class name
 !
 
-selectSlideAt: anInteger
-	self currentPresentation moveAt: anInteger.
-	self updateHash.
+cssClass
+	^'slide'
 !
 
-updateHash
-	document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex.
-! !
-
-!PresentationNavigator methodsFor: 'hash'!
-
-checkHash
-	| hash presentation |
-	hash := (document location hash  replace: '^#' with: '') tokenize: '-'. 
-	presentation := Presentation concretePresentations 
-				detect: [:aPresentationClass | aPresentationClass name == hash first]
-				ifNone: [^ self].
-	presentation == self currentPresentation class ifFalse: [
-          	self selectPresentationNamed: presentation.
-          	self selectSlideAt: hash last
-        ].
+backgroundColor
+	^'#555'
 !
 
-checkHashChange
-	(window jQuery: window) bind: 'hashchange' do: [self checkHash]
+title
+	^ self id
 ! !
 
-!PresentationNavigator methodsFor: 'keybindings'!
+!Slide methodsFor: 'actions'!
 
-setKeybindings
-	(window jQuery: document) keyup: [:e || node |
-		node := e target nodeName asLowercase.
-		(node = 'textarea' or: [node = 'input']) ifFalse: [
-			e keyCode = 39 ifTrue: [self nextSlide].
-			e keyCode = 37 ifTrue: [self previousSlide]]]
+show
+	self backgroundColor ifNotNil: [
+		(window jQuery: '#slides') css: 'background' color: self backgroundColor].
+	(window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
+	(window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
 ! !
 
-!PresentationNavigator methodsFor: 'rendering'!
-
-renderToolsOn: html
-	html a 
-		with: 'IDE';
-		onClick: [TabManager current open].
-	html a
-		with: 'Reload';
-		onClick: [self reload].
-	html a
-		with: '←';
-		onClick: [self previousSlide].
-	html a
-		with: '→';
-		onClick: [self nextSlide].
-!
-
-renderPresentationSelectOn: html
-	|presentationSelect|
-	presentationSelect := html select.
-	presentationSelect
-		onChange: [self  selectPresentationNamed:  presentationSelect asJQuery val];
-		with: [	Presentation concretePresentationsDo: [:aPresentationClass |   
-                                                              							html option
-                                                              								value: aPresentationClass name;
-                                                              								with: aPresentationClass title ] ].
-!
-
-open
-	(window jQuery: document)  ready: [
-          	self 
-          		appendToJQuery: 'body' asJQuery;
-          		setKeybindings;
-          		checkHashChange.
-        ].
-!
+!Slide methodsFor: 'rendering'!
 
 renderOn: html
-	html style
-		type: 'text/css';
-		with: self style.
-	html div
-		id: 'navigator';
-		with: [	self
-					renderToolsOn: html;
-					renderPresentationSelectOn: html;
-                      			renderSlideSelectOn: html].
-
-	presentationBrush := html div 
-							id: 'presentation';
-							yourself.
-
-	self checkHash.
-	self renderCurrentPresentation.
-!
-
-renderCurrentPresentation
-	presentationBrush contents: [:html |
-        	self currentPresentation renderOn: html.
-        ].
-	self updateSlideSelect.
+	html div class: self cssClass; id: self id; with: [
+		self renderSlideOn: html.
+		self renderMetaOn: html]
 !
 
-renderSlideSelectOn: html
-	slideSelect := html select.
-	slideSelect onChange: [ self  selectSlideAt:  slideSelect asJQuery val ].
-	self updateSlideSelect.
+renderSlideOn: html
 !
 
-updateSlideSelect
-	slideSelect contents: [:html| |index|
-		                       		index := 0.
-                		       		self currentPresentation slidesDo: [ :aSlide|  
-                                		                                    				index := index + 1.
-                                                		                    				html option
-                                                                		    					value: index;
-                                                            								with: aSlide title ] ].
+renderMetaOn: html
+	html div 
+		id: 'meta';
+		with: [
+			html p class: 'title'; with: self presentation title.
+			html p class: 'description'; with: self presentation description.
+			html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
+			html a class: 'url'; with: self presentation url; href: self presentation url]
 ! !
 
-!PresentationNavigator class methodsFor: 'initialize'!
-
-initialize
-	^ self open
-!
+!Slide class methodsFor: 'instance creation'!
 
-open
-	^ self new open
+on: aPresentation
+	^self new
+		presentation: aPresentation;
+		yourself
 ! !
 
 Widget subclass: #Presentation
@@ -348,72 +213,207 @@ isConcrete
 	^false
 ! !
 
-Widget subclass: #Slide
-	instanceVariableNames: 'presentation'
+Widget subclass: #PresentationNavigator
+	instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
 	category: 'Presentation'!
 
-!Slide methodsFor: 'accessing'!
+!PresentationNavigator methodsFor: 'accessing'!
 
-presentation
-	^presentation
+currentPresentation: aPresentation
+	currentPresentation := aPresentation.
 !
 
-presentation: aPresentation
-	presentation := aPresentation
+currentPresentation
+	^  currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
 !
 
-id
-	^ self class name
+style
+	^ '
+#navigator {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    margin-left: -150px;
+    padding: 5px;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    background: #333;
+    opacity: 0.3;
+    color: #eee;
+}
+
+#navigator a {
+    font-weight: bold;
+    color: #eee;
+    text-decoration: none;
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 14px;
+}
+
+#navigator:hover {
+    opacity: 0.8;
+}
+'
+! !
+
+!PresentationNavigator methodsFor: 'callbacks'!
+
+selectPresentation: aPresentationClass
+	self currentPresentation: aPresentationClass new.
+	self renderCurrentPresentation.
 !
 
-cssClass
-	^'slide'
+selectPresentationNamed: aString
+	|presentationClass|
+	presentationClass :=  (Smalltalk current at: aString).
+	presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
 !
 
-backgroundColor
-	^'#555'
+previousSlide
+	self currentPresentation previousSlide.
+	self updateHash.
 !
 
-title
-	^ self id
+nextSlide
+	self currentPresentation nextSlide.
+	self updateHash.
+!
+
+reload
+	|slideIndex|
+	slideIndex := self currentPresentation currentSlideIndex.
+	self currentPresentation: self currentPresentation class new.
+	self renderCurrentPresentation.
+	self selectSlideAt: slideIndex.
+!
+
+selectSlideAt: anInteger
+	self currentPresentation moveAt: anInteger.
+	self updateHash.
+!
+
+updateHash
+	document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex.
 ! !
 
-!Slide methodsFor: 'actions'!
+!PresentationNavigator methodsFor: 'hash'!
 
-show
-	self backgroundColor ifNotNil: [
-		(window jQuery: '#slides') css: 'background' color: self backgroundColor].
-	(window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
-	(window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
+checkHash
+	| hash presentation |
+	hash := (document location hash  replace: '^#' with: '') tokenize: '-'. 
+	presentation := Presentation concretePresentations 
+				detect: [:aPresentationClass | aPresentationClass name == hash first]
+				ifNone: [^ self].
+	presentation == self currentPresentation class ifFalse: [
+          	self selectPresentationNamed: presentation.
+          	self selectSlideAt: hash last
+        ].
+!
+
+checkHashChange
+	(window jQuery: window) bind: 'hashchange' do: [self checkHash]
 ! !
 
-!Slide methodsFor: 'rendering'!
+!PresentationNavigator methodsFor: 'keybindings'!
+
+setKeybindings
+	(window jQuery: document) keyup: [:e || node |
+		node := e target nodeName asLowercase.
+		(node = 'textarea' or: [node = 'input']) ifFalse: [
+			e keyCode = 39 ifTrue: [self nextSlide].
+			e keyCode = 37 ifTrue: [self previousSlide]]]
+! !
+
+!PresentationNavigator methodsFor: 'rendering'!
+
+renderToolsOn: html
+	html a 
+		with: 'IDE';
+		onClick: [TabManager current open].
+	html a
+		with: 'Reload';
+		onClick: [self reload].
+	html a
+		with: '←';
+		onClick: [self previousSlide].
+	html a
+		with: '→';
+		onClick: [self nextSlide].
+!
+
+renderPresentationSelectOn: html
+	|presentationSelect|
+	presentationSelect := html select.
+	presentationSelect
+		onChange: [self  selectPresentationNamed:  presentationSelect asJQuery val];
+		with: [	Presentation concretePresentationsDo: [:aPresentationClass |   
+                                                              							html option
+                                                              								value: aPresentationClass name;
+                                                              								with: aPresentationClass title ] ].
+!
+
+open
+	(window jQuery: document)  ready: [
+          	self 
+          		appendToJQuery: 'body' asJQuery;
+          		setKeybindings;
+          		checkHashChange.
+        ].
+!
 
 renderOn: html
-	html div class: self cssClass; id: self id; with: [
-		self renderSlideOn: html.
-		self renderMetaOn: html]
+	html style
+		type: 'text/css';
+		with: self style.
+	html div
+		id: 'navigator';
+		with: [	self
+					renderToolsOn: html;
+					renderPresentationSelectOn: html;
+                      			renderSlideSelectOn: html].
+
+	presentationBrush := html div 
+							id: 'presentation';
+							yourself.
+
+	self checkHash.
+	self renderCurrentPresentation.
 !
 
-renderSlideOn: html
+renderCurrentPresentation
+	presentationBrush contents: [:html |
+        	self currentPresentation renderOn: html.
+        ].
+	self updateSlideSelect.
 !
 
-renderMetaOn: html
-	html div 
-		id: 'meta';
-		with: [
-			html p class: 'title'; with: self presentation title.
-			html p class: 'description'; with: self presentation description.
-			html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
-			html a class: 'url'; with: self presentation url; href: self presentation url]
+renderSlideSelectOn: html
+	slideSelect := html select.
+	slideSelect onChange: [ self  selectSlideAt:  slideSelect asJQuery val ].
+	self updateSlideSelect.
+!
+
+updateSlideSelect
+	slideSelect contents: [:html| |index|
+		                       		index := 0.
+                		       		self currentPresentation slidesDo: [ :aSlide|  
+                                		                                    				index := index + 1.
+                                                		                    				html option
+                                                                		    					value: index;
+                                                            								with: aSlide title ] ].
 ! !
 
-!Slide class methodsFor: 'instance creation'!
+!PresentationNavigator class methodsFor: 'initialize'!
 
-on: aPresentation
-	^self new
-		presentation: aPresentation;
-		yourself
+initialize
+	^ self open
+!
+
+open
+	^ self new open
 ! !
 
 Presentation subclass: #ESUG2011Presentation
@@ -1584,8 +1584,8 @@ slideClasses
 	FOSDEMIntroSlide.
 	CountersSlide.
 	JtalkAndJavascriptSlide.
-	FOSDEMBookletSlide.
 	FOSDEMJSPlayGroundSlide.
+	FOSDEMBookletSlide.
 	FOSDEMCanvasSlide.
 	FOSDEMAmberBackend
 }
@@ -1626,6 +1626,16 @@ cssClass
 	^ 'slide blue3d'
 ! !
 
+!FOSDEMBookletSlide methodsFor: 'css'!
+
+style
+	^ '
+#book { font-size: 1.4em; }
+#book .b-load .b-wrap { background-color: #DEC3A9;}
+#book .b-load .b-wrap-left { background-color: #DDD;} } 
+'
+! !
+
 !FOSDEMBookletSlide methodsFor: 'rendering'!
 
 renderSlideOn: html
@@ -1633,6 +1643,9 @@ renderSlideOn: html
 	html link 
 		rel:'stylesheet';
 		href: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.css'.
+	
+	html style: self style.
+	
 	jQuery 
 		getScript: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.min.js' 	
 		do: ['#book' asJQuery booklet: self bookletOptions].
@@ -1699,9 +1712,9 @@ logo
   css: ''-webkit-transition'' 
   apply: ''all 10s ease-in-out''.
 
-logo
-  css: ''-webkit-transform'' 
-  apply: ''rotateZ(360deg)''.
+<logo.css(
+	''-webkit-transform'', 
+	''rotateZ(360deg)'');>.
 
 logo click: [
     window alert: ''This is cool !!''].
@@ -1731,15 +1744,13 @@ Slide subclass: #FOSDEMCanvasSlide
 	instanceVariableNames: 'c2d canvas'
 	category: 'Presentation'!
 
-!FOSDEMCanvasSlide methodsFor: 'rendering'!
+!FOSDEMCanvasSlide methodsFor: 'accessing'!
 
-renderSlideOn: html
-	html h1: 'Canvas made easy'.
-	canvas := html  canvas 
-				width: 700;
-				height: 400;
-				onClick: [self drawOnCanvas]
-!
+cssClass
+	^ 'slide red3d'
+! !
+
+!FOSDEMCanvasSlide methodsFor: 'drawing'!
 
 drawOnCanvas
 	|c2d|
@@ -1750,9 +1761,31 @@ drawOnCanvas
 		width: canvas element width 
 		height: canvas element height.
 	
-	20 timesRepeat: [
+	40 atRandom timesRepeat: [ |rgba|
+			rgba := ',' join: {255 atRandom. 255 atRandom. 255 atRandom. 10 atRandom / 10}.
+			c2d	at: 'fillStyle' put: 'rgba(', rgba, ')'.
 			c2d
-				at: 'fillStyle' put: 'rgba(', 255 atRandom asString, ',' , 255 atRandom asString, ',', 255 atRandom asString, ', 0.4)';
-				fillRect: 600 atRandom y: 300 atRandom width: 200 atRandom height: 200 atRandom ]
+				fillRect: 600 atRandom 
+				y: 300 atRandom 
+				width: 200 atRandom 
+				height: 200 atRandom ]
+! !
+
+!FOSDEMCanvasSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1: 'Playing with canvas'.
+	canvas := html  canvas 
+				width: 700;
+				height: 400.
+
+	self updateCanvas.
+! !
+
+!FOSDEMCanvasSlide methodsFor: 'updating'!
+
+updateCanvas
+	self drawOnCanvas.
+	window setTimeout: [self updateCanvas] delay: 500.
 ! !