Moved amber examples

android/helloamber/.gitignore

@@ -0,0 +1,4 @@
+*.js
+!assets/jquery-1.7.2.min.js
+bin/
+gen/

android/helloamber/AndroidManifest.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+      package="org.amberlang.android.helloamber"
+      android:versionCode="1"
+      android:versionName="1.0">
+    <uses-sdk android:minSdkVersion="8" 
+        android:targetSdkVersion="15" />
+    <uses-permission android:name="android.permission.INTERNET" />
+    <application android:label="@string/app_name" >
+        <activity android:name="HelloAmber"
+                  android:label="@string/app_name"
+                  android:theme="@android:style/Theme.NoTitleBar">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+</manifest> 

android/helloamber/HelloAmber.st

@@ -0,0 +1,13 @@
+Object subclass: #HelloAmber
+    instanceVariableNames: ''
+    package: 'HelloAmber'!
+
+!HelloAmber methodsFor: 'accessing'!
+begin
+    "Makes me say hello to the user."
+
+    | msg button |
+    msg := 'Hello world.'.
+    button := window jQuery: '#sayHello'.
+    button click: [button after: '<p>' , msg , '</p>'].
+! !

android/helloamber/Makefile

@@ -0,0 +1,56 @@
+#
+# If you copy this file for an Android Amber project, just
+# modify these first three lines
+# and then add .st files as you please. This Makefile
+# should pick them all up and compile into Program.js.
+#
+
+NAME  := HelloAmber
+PACKAGE := org.amberlang.android.helloamber
+ACTIVITY := HelloAmber
+
+# debug or release
+
+VERSION  := debug
+
+# -O for Closure optimization of js code.
+FLAGS    := 
+APK      := bin/$(NAME)-$(VERSION).apk
+FILE     := Program
+SOURCES  := $(wildcard *.st)
+OBJECTS  := $(patsubst %.st,%.js,$(wildcard *.st))
+FILEJS   := assets/$(FILE).js
+
+# Find files that match a wildcard pattern recursively
+
+rwildcard=$(foreach d,$(wildcard $1*),$(call rwildcard,$d/,$2) $(filter $(subst *,%,$2),$d))
+
+JAVA_SOURCES := $(call rwildcard,src/,*.java)
+
+ASSETS := $(call rwildcard,assets/,*)
+
+all: $(APK)
+
+$(FILEJS): $(SOURCES)
+	../../../bin/amberc $(FLAGS) $(SOURCES) $(FILE)
+	mv $(FILE).js $(FILEJS)
+
+$(APK): $(FILEJS) $(ASSETS) $(JAVA_SOURCES) AndroidManifest.xml build.xml
+	ant $(VERSION)
+
+clean:
+	rm -f $(FILEJS) $(OBJECTS) $(APK)
+	rm -rf gen bin
+
+install: $(APK)
+	adb install $(APK)
+
+# If you want to run it in the emulator, start the emulator first with the
+# android command.
+run:    $(APK)
+	adb install -r $(APK)
+	adb shell am start -n $(PACKAGE)/$(PACKAGE).$(ACTIVITY)
+
+# This should fire it up in Chromium (at least under Ubuntu)
+chromium: $(FILEJS)
+	chromium-browser --allow-file-access-from-files assets/index.html

android/helloamber/README.md

@@ -0,0 +1,80 @@
+HelloAmber Android Amber Smalltalk Example
+
+Introduction
+============
+
+This example shows how to create an Android application that is partially
+written in Amber Smalltalk. The Android Java code uses a WebView to load
+and execute the JavaScript code produced by the Amber Smalltalk amberc
+compiler.
+
+You could modify this example to create your own Android Amber Smalltalk
+examples.
+
+Prerequisites
+=============
+
+Install the Android SDK from http://developer.android.com/sdk/index.html
+
+(Tested with Android SDK version 17, should work with any SDK that
+supports Android SDK 8 or above.)
+
+Make sure your PATH includes the android sdk tools and platform-tools
+directories.
+
+If you want to run on a real Android device you will need a phone running
+Android 2.2 (Froyo) or newer. (With some work this restriction could
+be relaxed to support back to Android 1.6, although JavaScript performance
+is not good on earlier Android phones.)
+
+Building
+========
+
+    cd helloamber
+    make
+
+Testing on a Desktop Browser
+============================
+
+If the build is successful, you should be able to use your desktop computer's
+web browser to run the HTML5 part of the Android application. Simply open
+assets/index.html
+
+Installing on an Android Device
+===============================
+
+Check that ADB can see your android device or emulator:
+
+    adb devices
+
+If your device is visible:
+
+    cd helloamber
+    make install
+
+Building, Installing and Running on an Android Device
+=====================================================
+
+    make run
+
+Tips
+====
+
+Javascript errors and console log messages are sent to the Android log.
+Use the adb logcat command to view the Android log.
+
+
+Known Issues
+============
+
+The amberc compiler does not stop the "make" process when a smalltalk
+error is detected. You have to manually scan the build log to see if there
+are any smalltalk errors.
+
+The makefile only supports making "debug" versions of Android applications.
+A release version would be the same, except that it is "signed", which is
+needed in order to publish on Android Market.
+
+The app would start running more quickly if a lighter-weight version of
+JQuery was used.
+

android/helloamber/ant.properties

@@ -0,0 +1,17 @@
+# This file is used to override default values used by the Ant build system.
+#
+# This file must be checked into Version Control Systems, as it is
+# integral to the build system of your project.
+
+# This file is only used by the Ant script.
+
+# You can use this to override default values such as
+#  'source.dir' for the location of your java source folder and
+#  'out.dir' for the location of your output folder.
+
+# You can also use it define how the release builds are signed by declaring
+# the following properties:
+#  'key.store' for the location of your keystore and
+#  'key.alias' for the name of the key to use.
+# The password will be asked during the build when you use the 'release' target.
+

android/helloamber/assets/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+<head>
+    <title>Android Amber HelloWorld</title>
+    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
+    <script src="Program.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){smalltalk.HelloAmber._new()._begin()});
+    </script>
+</head>
+<body>
+<h1>HelloAmber</h1>
+      <button id="sayHello">say hello</button>
+</body>
+</html>

android/helloamber/build.xml

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project name="HelloAmber" default="help">
+
+    <!-- The local.properties file is created and updated by the 'android' tool.
+         It contains the path to the SDK. It should *NOT* be checked into
+         Version Control Systems. -->
+    <property file="local.properties" />
+
+    <!-- The ant.properties file can be created by you. It is only edited by the
+         'android' tool to add properties to it.
+         This is the place to change some Ant specific build properties.
+         Here are some properties you may want to change/update:
+
+         source.dir
+             The name of the source directory. Default is 'src'.
+         out.dir
+             The name of the output directory. Default is 'bin'.
+
+         For other overridable properties, look at the beginning of the rules
+         files in the SDK, at tools/ant/build.xml
+
+         Properties related to the SDK location or the project target should
+         be updated using the 'android' tool with the 'update' action.
+
+         This file is an integral part of the build system for your
+         application and should be checked into Version Control Systems.
+
+         -->
+    <property file="ant.properties" />
+
+    <!-- The project.properties file is created and updated by the 'android'
+         tool, as well as ADT.
+
+         This contains project specific properties such as project target, and library
+         dependencies. Lower level build properties are stored in ant.properties
+         (or in .classpath for Eclipse projects).
+
+         This file is an integral part of the build system for your
+         application and should be checked into Version Control Systems. -->
+    <loadproperties srcFile="project.properties" />
+
+    <!-- quick check on sdk.dir -->
+    <fail
+            message="sdk.dir is missing. Make sure to generate local.properties using 'android update project' or to inject it through an env var"
+            unless="sdk.dir"
+    />
+
+    <!--
+        Import per project custom build rules if present at the root of the project.
+        This is the place to put custom intermediary targets such as:
+            -pre-build
+            -pre-compile
+            -post-compile (This is typically used for code obfuscation.
+                           Compiled code location: ${out.classes.absolute.dir}
+                           If this is not done in place, override ${out.dex.input.absolute.dir})
+            -post-package
+            -post-build
+            -pre-clean
+    -->
+    <import file="custom_rules.xml" optional="true" />
+
+    <!-- Import the actual build file.
+
+         To customize existing targets, there are two options:
+         - Customize only one target:
+             - copy/paste the target into this file, *before* the
+               <import> task.
+             - customize it to your needs.
+         - Customize the whole content of build.xml
+             - copy/paste the content of the rules files (minus the top node)
+               into this file, replacing the <import> task.
+             - customize to your needs.
+
+         ***********************
+         ****** IMPORTANT ******
+         ***********************
+         In all cases you must update the value of version-tag below to read 'custom' instead of an integer,
+         in order to avoid having your file be overridden by tools such as "android update project"
+    -->
+    <!-- version-tag: 1 -->
+    <import file="${sdk.dir}/tools/ant/build.xml" />
+
+</project>

android/helloamber/local.properties

@@ -0,0 +1,10 @@
+# This file is automatically generated by Android Tools.
+# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
+#
+# This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+
+# location of the SDK. This is only used by Ant
+# For customization when using a Version Control System, please read the
+# header note.
+sdk.dir=/Users/jackpal/code/android-sdk-macosx

android/helloamber/proguard-project.txt

@@ -0,0 +1,20 @@
+# To enable ProGuard in your project, edit project.properties
+# to define the proguard.config property as described in that file.
+#
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in ${sdk.dir}/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the ProGuard
+# include property in project.properties.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

android/helloamber/project.properties

@@ -0,0 +1,14 @@
+# This file is automatically generated by Android Tools.
+# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
+#
+# This file must be checked in Version Control Systems.
+#
+# To customize properties used by the Ant build system edit
+# "ant.properties", and override values to adapt the script to your
+# project structure.
+#
+# To enable ProGuard to shrink and obfuscate your code, uncomment this (available properties: sdk.dir, user.home):
+#proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt:proguard-project.txt
+
+# Project target.
+target=android-8

android/helloamber/res/layout/main.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/webview"
+    android:layout_width="fill_parent"
+    android:layout_height="fill_parent"
+/>

android/helloamber/res/values/strings.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">HelloAmber</string>
+</resources>

android/helloamber/src/org/amberlang/android/helloamber/HelloAmber.java

@@ -0,0 +1,59 @@
+package org.amberlang.android.helloamber;
+
+import android.app.Activity;
+import android.os.Bundle;
+import android.util.Log;
+import android.view.KeyEvent;
+import android.webkit.ConsoleMessage;
+import android.webkit.WebChromeClient;
+import android.webkit.WebView;
+import android.webkit.WebViewClient;
+
+
+public class HelloAmber extends Activity
+{
+    private static final String TAG = "HelloAmber";
+
+    private WebView mWebView;
+
+    private class HelloWebViewClient extends WebViewClient {
+        @Override
+        public boolean shouldOverrideUrlLoading(WebView view, String url) {
+            view.loadUrl(url);
+            return true;
+        }
+    }
+
+    private class HelloWebChromeClient extends WebChromeClient {
+        @Override
+        public boolean onConsoleMessage(ConsoleMessage cm) {
+            Log.d(TAG, cm.message()
+                    + " -- " + cm.messageLevel()
+                    + " From line " + cm.lineNumber()
+                    + " of " + cm.sourceId() );
+            return true;
+        }
+    }
+
+    @Override
+    public void onCreate(Bundle savedInstanceState)
+    {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.main);
+
+        mWebView = (WebView) findViewById(R.id.webview);
+        mWebView.getSettings().setJavaScriptEnabled(true);
+        mWebView.setWebViewClient(new HelloWebViewClient());
+        mWebView.setWebChromeClient(new HelloWebChromeClient());
+        mWebView.loadUrl("file:///android_asset/index.html");
+    } 
+
+    @Override
+    public boolean onKeyDown(int keyCode, KeyEvent event) {
+        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
+            mWebView.goBack();
+            return true;
+        }
+        return super.onKeyDown(keyCode, event);
+    }
+}

googlecharts/.gitignore

@@ -0,0 +1,2 @@
+# Ignore emacs backup files
+*~

googlecharts/README.md

@@ -0,0 +1,98 @@
+googlecharts
+============
+
+Google Charts API for Amber
+
+Author
+------
+Thomas W Rake
+
+Availability
+------------
+Fork it at https://github.com/tomrake/googlecharts
+
+How to use
+----------
+
+This project is a subproject of https://github.com/tomrake/amber
+If you clone that project you should have this subproject.
+
+
+Version 0.2
+-----------
+
+This API is likely to change in future versions.
+
+A overview of the recipe to create a Pie Chart is have a place in your html dom to place the chart. Create a subclass of ChartApp to control loading of google packages, creation of your charts and bind them to the dom. Ensure your charts have the correct data by subclassing PieChart and add the the makeData and makeOption methods.
+
+Here is the detailed Pie Chart recipe:
+
+1) Create an insertion point div in your html document in my case a my_chart_id div:
+ 
+    <div id="my_chart_div" style="width: 900px;height: 500px;">Loading Google Chart..</div>
+
+2) Create a package for your code MyCode
+
+3) In MyCode package create a subclass of PieChart, as an example MyPieChart, with two instance methods makeData and makeOptions which contain the chart data and options:
+
+     MyPieChart>>makeData
+      "DataTable of example Pie chart slices"
+      ^ self arrayToDataTable: { {'Task'.'Hours per Day'}.
+        		    {'Work' . 11}.
+                            {'Eat'.2}.
+                            {'Commute'.2}.
+                            {'Watch TV'.2}.
+                            {'Snooze'.7}}
+
+
+
+    MyPieChart>>makeOptions
+    	"Return a Dictionary of the options in this case only a title"
+    	^#{'title' -> 'My Daily Activities'}
+
+
+
+4) Determine which Google visualization packages are needed in the PieChart case only 'corechart' is needed. 
+
+5) In package MyCode create a subclass of ChartApp, as an example MyPieApp. In MyPieApp create a class method neededVisualizationPackages to return an Array for the packages needed for the App:
+
+    MyPieApp class>>neededVisualizationPackages
+    "This App only needs a corechart package."
+    	^{'corechart'}
+
+
+
+6) In MyPieApp create an instance method overiding begin, and use it to create, bind and draw MyPieChart. Besure to call super begin:
+
+    begin
+    	"Start the executiong of the MyPieChart by connecting each button/graphic pair"
+        MyPieChart new chartId:'my_chart_div';drawChart.
+        ^super begin
+
+7) Call Amber
+
+    <script src="../../js/amber.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        loadAmber({
+            files: ['GoogleCharts.js','MyCode.js'],
+            prefix: 'examples/googlecharts/js', // path for js files i think
+            ready: function() {
+                $(function() {
+                   smalltalk.MyPieApp._new(); // Start the smalltalk App
+                });
+            }}); 
+    </script>
+
+The purpose of version 0.2 is to show how smalltalk flexibility can drive google charts.
+
+
+
+To Be Done
+----------
+Coordinate information between the Chart API and App API .Each chart has a fixed and known package to be loaded by the JSAPI it would be best if this info was recorded in a fixed place.
+
+Remove the subclasses of GoogleChart in favor of an Abstract Factory.
+
+Be prepaired to split the JSAPI.js ("the loading API") for use with other Google products.
+
+Design smalltalk friendly api for generic charts.

googlecharts/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+  <head>
+    <title>Google Charts</title>
+    <script src="../../js/amber.js" type="text/javascript"></script>
+    <script type="text/javascript">
+		 loadAmber({
+			files: ['GoogleCharts.js','GoogleChartsExamples'],
+			prefix: 'examples/googlecharts/js', // path for js files i think
+			ready: function() {
+			  $(function() {
+				smalltalk.IndexChartApp._new(); // Start the smalltalk App
+			  });
+		}}); 
+	</script>
+  </head>
+
+  <body>
+    <h1>Google Charts</h1>
+    <button onclick="smalltalk.Browser._open()">class browser</button>
+    <div id="pie_chart_div" style="width: 900px;height: 500px;">Loading Google Chart..</div>
+
+
+    <a href="popcharts.html">Try the Pop Charts!</a> example.
+  </body>
+</html>

googlecharts/js/GoogleCharts.deploy.js

@@ -0,0 +1,392 @@
+smalltalk.addPackage('GoogleCharts', {});
+smalltalk.addClass('ChartApp', smalltalk.Object, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_begin",
+smalltalk.method({
+selector: "begin",
+fn: function (){
+var self=this;
+return self;
+}
+}),
+smalltalk.ChartApp);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
+return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
+return smalltalk.send(self,"_begin",[]);
+})]);
+})]);
+return self}
+}),
+smalltalk.ChartApp);
+
+
+smalltalk.addMethod(
+"_loadGoogleLoader_",
+smalltalk.method({
+selector: "loadGoogleLoader:",
+fn: function (callback){
+var self=this;
+$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
+;
+return self}
+}),
+smalltalk.ChartApp.klass);
+
+smalltalk.addMethod(
+"_loadVisualization_",
+smalltalk.method({
+selector: "loadVisualization:",
+fn: function (callback){
+var self=this;
+var packages;
+packages=smalltalk.send(self,"_neededVisualizationPackages",[]);
+google.load("visualization","1",{"callback" : callback , "packages":packages});;
+;
+return self}
+}),
+smalltalk.ChartApp.klass);
+
+smalltalk.addMethod(
+"_neededVisualizationPackages",
+smalltalk.method({
+selector: "neededVisualizationPackages",
+fn: function (){
+var self=this;
+var $1;
+$1=[];
+return $1;
+}
+}),
+smalltalk.ChartApp.klass);
+
+
+smalltalk.addClass('ChartButton', smalltalk.Object, ['element', 'clickBlock'], 'GoogleCharts');
+smalltalk.addMethod(
+"_activate",
+smalltalk.method({
+selector: "activate",
+fn: function (){
+var self=this;
+var button;
+button=smalltalk.send(smalltalk.send(self,"_element",[]),"_asJQuery",[]);
+smalltalk.send(button,"_click_",[(function(){
+return smalltalk.send(smalltalk.send(self,"_clickBlock",[]),"_value",[]);
+})]);
+return self}
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_clickBlock",
+smalltalk.method({
+selector: "clickBlock",
+fn: function (){
+var self=this;
+return self["@clickBlock"];
+}
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_clickBlock_",
+smalltalk.method({
+selector: "clickBlock:",
+fn: function (aBlock){
+var self=this;
+self["@clickBlock"]=aBlock;
+return self}
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_element",
+smalltalk.method({
+selector: "element",
+fn: function (){
+var self=this;
+return self["@element"];
+}
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_element_",
+smalltalk.method({
+selector: "element:",
+fn: function (aSymbol){
+var self=this;
+self["@element"]=aSymbol;
+return self}
+}),
+smalltalk.ChartButton);
+
+
+smalltalk.addMethod(
+"_element_clickBlock_",
+smalltalk.method({
+selector: "element:clickBlock:",
+fn: function (elementSymbol,clickBlock){
+var self=this;
+var $2,$3,$1;
+$2=smalltalk.send(self,"_new",[]);
+smalltalk.send($2,"_element_",[elementSymbol]);
+smalltalk.send($2,"_clickBlock_",[clickBlock]);
+smalltalk.send($2,"_activate",[]);
+$3=smalltalk.send($2,"_yourself",[]);
+$1=$3;
+return $1;
+}
+}),
+smalltalk.ChartButton.klass);
+
+smalltalk.addMethod(
+"_popUpChart_atDom_",
+smalltalk.method({
+selector: "popUpChart:atDom:",
+fn: function (chart,element){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_element_clickBlock_",[element,(function(){
+return smalltalk.send(chart,"_drawChart",[]);
+})]);
+return $1;
+}
+}),
+smalltalk.ChartButton.klass);
+
+
+smalltalk.addClass('GoogleChart', smalltalk.Object, ['chartId', 'chartType'], 'GoogleCharts');
+smalltalk.addMethod(
+"_arrayToDataTable_",
+smalltalk.method({
+selector: "arrayToDataTable:",
+fn: function (array){
+var self=this;
+var $1;
+$1=google.visualization.arrayToDataTable(array);
+;
+return $1;
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartId",
+smalltalk.method({
+selector: "chartId",
+fn: function (){
+var self=this;
+return self["@chartId"];
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartId_",
+smalltalk.method({
+selector: "chartId:",
+fn: function (aString){
+var self=this;
+self["@chartId"]=aString;
+return self}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartType",
+smalltalk.method({
+selector: "chartType",
+fn: function (){
+var self=this;
+return self["@chartType"];
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartType_",
+smalltalk.method({
+selector: "chartType:",
+fn: function (aString){
+var self=this;
+self["@chartType"]=aString;
+return self}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_drawChart",
+smalltalk.method({
+selector: "drawChart",
+fn: function (){
+var self=this;
+var chart;
+var data;
+var options;
+data=smalltalk.send(self,"_makeData",[]);
+chart=smalltalk.send(self,"_makeChart_",[smalltalk.send(self,"_chartId",[])]);
+options=smalltalk.send(self,"_makeOptions",[]);
+chart.draw(data,options);
+;
+return self}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_getElementById_",
+smalltalk.method({
+selector: "getElementById:",
+fn: function (id){
+var self=this;
+var $1;
+$1=document.getElementById(id);
+;
+return $1;
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+return self;
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_makeChart_",
+smalltalk.method({
+selector: "makeChart:",
+fn: function (id){
+var self=this;
+var $1;
+var e;
+var t;
+e=smalltalk.send(self,"_getElementById_",[id]);
+t=smalltalk.send(self,"_chartType",[]);
+$1=new google.visualization[t](e);
+;
+return $1;
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_subclassresponsibility",[]);
+return $1;
+}
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_subclassresponsibility",[]);
+return $1;
+}
+}),
+smalltalk.GoogleChart);
+
+
+smalltalk.addMethod(
+"_chartId_",
+smalltalk.method({
+selector: "chartId:",
+fn: function (aString){
+var self=this;
+var $2,$3,$1;
+$2=smalltalk.send(self,"_new",[]);
+smalltalk.send($2,"_chartId_",[aString]);
+$3=smalltalk.send($2,"_yourself",[]);
+$1=$3;
+return $1;
+}
+}),
+smalltalk.GoogleChart.klass);
+
+
+smalltalk.addClass('GaugeChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["Gauge"]);
+return self;
+}
+}),
+smalltalk.GaugeChart);
+
+
+
+smalltalk.addClass('GeoChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["GeoChart"]);
+return self;
+}
+}),
+smalltalk.GeoChart);
+
+
+
+smalltalk.addClass('PieChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["PieChart"]);
+return self;
+}
+}),
+smalltalk.PieChart);
+
+
+
+smalltalk.addClass('ScatterChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["ScatterChart"]);
+return self;
+}
+}),
+smalltalk.ScatterChart);
+
+
+

googlecharts/js/GoogleCharts.js

@@ -0,0 +1,533 @@
+smalltalk.addPackage('GoogleCharts', {});
+smalltalk.addClass('ChartApp', smalltalk.Object, [], 'GoogleCharts');
+smalltalk.ChartApp.comment="A chart app is an example App which loads the google JSAPI and visualization API."
+smalltalk.addMethod(
+"_begin",
+smalltalk.method({
+selector: "begin",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+return self;
+},
+args: [],
+source: "begin\x0a\x09\x22Start the executiong of the ChartApp\x22\x0a\x09^self",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartApp);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
+return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
+return smalltalk.send(self,"_begin",[]);
+})]);
+})]);
+return self},
+args: [],
+source: "initialize\x0a\x09\x22Load my external JS\x22\x0a    self class loadGoogleLoader:[self class loadVisualization:[self begin]]\x0a  ",
+messageSends: ["loadGoogleLoader:", "loadVisualization:", "begin", "class"],
+referencedClasses: []
+}),
+smalltalk.ChartApp);
+
+
+smalltalk.addMethod(
+"_loadGoogleLoader_",
+smalltalk.method({
+selector: "loadGoogleLoader:",
+category: 'not yet classified',
+fn: function (callback){
+var self=this;
+$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
+;
+return self},
+args: ["callback"],
+source: "loadGoogleLoader: callback\x0a\x09\x22Load the Google JSAPI - Use JQuery.ajax() since that is available\x22\x0a\x09<$.ajax({url:\x22https://www.google.com/jsapi\x22,dataType:\x22script\x22,success:callback});>",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartApp.klass);
+
+smalltalk.addMethod(
+"_loadVisualization_",
+smalltalk.method({
+selector: "loadVisualization:",
+category: 'not yet classified',
+fn: function (callback){
+var self=this;
+var packages;
+packages=smalltalk.send(self,"_neededVisualizationPackages",[]);
+google.load("visualization","1",{"callback" : callback , "packages":packages});;
+;
+return self},
+args: ["callback"],
+source: "loadVisualization: callback\x0a\x09\x22Use google.load() to load visualization and load the needed packages\x22\x0a    |packages|\x0a    packages := self neededVisualizationPackages.\x0a    <google.load(\x22visualization\x22,\x221\x22,{\x22callback\x22 : callback , \x22packages\x22:packages});>",
+messageSends: ["neededVisualizationPackages"],
+referencedClasses: []
+}),
+smalltalk.ChartApp.klass);
+
+smalltalk.addMethod(
+"_neededVisualizationPackages",
+smalltalk.method({
+selector: "neededVisualizationPackages",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=[];
+return $1;
+},
+args: [],
+source: "neededVisualizationPackages\x0a\x22This is a hook for subclasses to define which visualization packages to load.\x22\x0a\x09^{}",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartApp.klass);
+
+
+smalltalk.addClass('ChartButton', smalltalk.Object, ['element', 'clickBlock'], 'GoogleCharts');
+smalltalk.addMethod(
+"_activate",
+smalltalk.method({
+selector: "activate",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var button;
+button=smalltalk.send(smalltalk.send(self,"_element",[]),"_asJQuery",[]);
+smalltalk.send(button,"_click_",[(function(){
+return smalltalk.send(smalltalk.send(self,"_clickBlock",[]),"_value",[]);
+})]);
+return self},
+args: [],
+source: "activate\x0a\x09|button|\x0a\x09button := self element asJQuery.\x0a    button click:[self clickBlock value]",
+messageSends: ["asJQuery", "element", "click:", "value", "clickBlock"],
+referencedClasses: []
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_clickBlock",
+smalltalk.method({
+selector: "clickBlock",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+return self["@clickBlock"];
+},
+args: [],
+source: "clickBlock\x0a\x09^clickBlock",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_clickBlock_",
+smalltalk.method({
+selector: "clickBlock:",
+category: 'not yet classified',
+fn: function (aBlock){
+var self=this;
+self["@clickBlock"]=aBlock;
+return self},
+args: ["aBlock"],
+source: "clickBlock: aBlock\x0a\x09clickBlock := aBlock",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_element",
+smalltalk.method({
+selector: "element",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+return self["@element"];
+},
+args: [],
+source: "element\x0a\x09^element",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartButton);
+
+smalltalk.addMethod(
+"_element_",
+smalltalk.method({
+selector: "element:",
+category: 'not yet classified',
+fn: function (aSymbol){
+var self=this;
+self["@element"]=aSymbol;
+return self},
+args: ["aSymbol"],
+source: "element: aSymbol\x0a\x09element := aSymbol",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ChartButton);
+
+
+smalltalk.addMethod(
+"_element_clickBlock_",
+smalltalk.method({
+selector: "element:clickBlock:",
+category: 'not yet classified',
+fn: function (elementSymbol,clickBlock){
+var self=this;
+var $2,$3,$1;
+$2=smalltalk.send(self,"_new",[]);
+smalltalk.send($2,"_element_",[elementSymbol]);
+smalltalk.send($2,"_clickBlock_",[clickBlock]);
+smalltalk.send($2,"_activate",[]);
+$3=smalltalk.send($2,"_yourself",[]);
+$1=$3;
+return $1;
+},
+args: ["elementSymbol", "clickBlock"],
+source: "element: elementSymbol clickBlock: clickBlock\x0a\x09^self new element: elementSymbol; clickBlock: clickBlock; activate;yourself",
+messageSends: ["element:", "new", "clickBlock:", "activate", "yourself"],
+referencedClasses: []
+}),
+smalltalk.ChartButton.klass);
+
+smalltalk.addMethod(
+"_popUpChart_atDom_",
+smalltalk.method({
+selector: "popUpChart:atDom:",
+category: 'not yet classified',
+fn: function (chart,element){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_element_clickBlock_",[element,(function(){
+return smalltalk.send(chart,"_drawChart",[]);
+})]);
+return $1;
+},
+args: ["chart", "element"],
+source: "popUpChart: chart atDom: element\x0a\x09\x22Make the chart popup on click of an element\x22\x0a    ^self element: element clickBlock:[chart drawChart]\x0a\x09",
+messageSends: ["element:clickBlock:", "drawChart"],
+referencedClasses: []
+}),
+smalltalk.ChartButton.klass);
+
+
+smalltalk.addClass('GoogleChart', smalltalk.Object, ['chartId', 'chartType'], 'GoogleCharts');
+smalltalk.addMethod(
+"_arrayToDataTable_",
+smalltalk.method({
+selector: "arrayToDataTable:",
+category: 'data table',
+fn: function (array){
+var self=this;
+var $1;
+$1=google.visualization.arrayToDataTable(array);
+;
+return $1;
+},
+args: ["array"],
+source: "arrayToDataTable: array\x0a\x0a\x09^ <google.visualization.arrayToDataTable(array)>",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartId",
+smalltalk.method({
+selector: "chartId",
+category: 'accessor',
+fn: function (){
+var self=this;
+return self["@chartId"];
+},
+args: [],
+source: "chartId\x0a\x09^chartId",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartId_",
+smalltalk.method({
+selector: "chartId:",
+category: 'accessor',
+fn: function (aString){
+var self=this;
+self["@chartId"]=aString;
+return self},
+args: ["aString"],
+source: "chartId: aString\x0a\x09chartId := aString",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartType",
+smalltalk.method({
+selector: "chartType",
+category: 'accessor',
+fn: function (){
+var self=this;
+return self["@chartType"];
+},
+args: [],
+source: "chartType\x0a\x09^ chartType",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_chartType_",
+smalltalk.method({
+selector: "chartType:",
+category: 'accessor',
+fn: function (aString){
+var self=this;
+self["@chartType"]=aString;
+return self},
+args: ["aString"],
+source: "chartType: aString\x0a\x09chartType := aString",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_drawChart",
+smalltalk.method({
+selector: "drawChart",
+category: 'chart',
+fn: function (){
+var self=this;
+var chart;
+var data;
+var options;
+data=smalltalk.send(self,"_makeData",[]);
+chart=smalltalk.send(self,"_makeChart_",[smalltalk.send(self,"_chartId",[])]);
+options=smalltalk.send(self,"_makeOptions",[]);
+chart.draw(data,options);
+;
+return self},
+args: [],
+source: "drawChart\x0a    |  chart data options|\x0a     data := self makeData.\x0a     chart :=self makeChart:self chartId.\x0a     options :=self makeOptions.\x0a     <chart.draw(data,options)>\x0a",
+messageSends: ["makeData", "makeChart:", "chartId", "makeOptions"],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_getElementById_",
+smalltalk.method({
+selector: "getElementById:",
+category: 'DOM',
+fn: function (id){
+var self=this;
+var $1;
+$1=document.getElementById(id);
+;
+return $1;
+},
+args: ["id"],
+source: "getElementById: id\x0a\x09\x22Find element by the id in the DOM\x22\x0a\x09^ <document.getElementById(id)>",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'init',
+fn: function (){
+var self=this;
+return self;
+},
+args: [],
+source: "initialize\x0a\x09^self",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_makeChart_",
+smalltalk.method({
+selector: "makeChart:",
+category: 'chart',
+fn: function (id){
+var self=this;
+var $1;
+var e;
+var t;
+e=smalltalk.send(self,"_getElementById_",[id]);
+t=smalltalk.send(self,"_chartType",[]);
+$1=new google.visualization[t](e);
+;
+return $1;
+},
+args: ["id"],
+source: "makeChart: id\x0a\x22build a chart at specific element id in the DOM and return\x22\x0a\x09|e t|\x0a    e := self getElementById:id.\x0a    t := self chartType.\x0a    ^ <new google.visualization[t](e)>",
+messageSends: ["getElementById:", "chartType"],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+category: 'abstraction',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_subclassresponsibility",[]);
+return $1;
+},
+args: [],
+source: "makeData\x0a\x09\x22abstraction - return the data for a google chart\x22\x0a  \x09 ^self subclassresponsibility",
+messageSends: ["subclassresponsibility"],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+category: 'abstraction',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_subclassresponsibility",[]);
+return $1;
+},
+args: [],
+source: "makeOptions\x0a\x09\x22Abstract method - return options for a Google Chart\x22\x0a   ^\x09 self subclassresponsibility",
+messageSends: ["subclassresponsibility"],
+referencedClasses: []
+}),
+smalltalk.GoogleChart);
+
+
+smalltalk.addMethod(
+"_chartId_",
+smalltalk.method({
+selector: "chartId:",
+category: 'not yet classified',
+fn: function (aString){
+var self=this;
+var $2,$3,$1;
+$2=smalltalk.send(self,"_new",[]);
+smalltalk.send($2,"_chartId_",[aString]);
+$3=smalltalk.send($2,"_yourself",[]);
+$1=$3;
+return $1;
+},
+args: ["aString"],
+source: "chartId: aString\x0a\x09^self new chartId:aString;yourself",
+messageSends: ["chartId:", "new", "yourself"],
+referencedClasses: []
+}),
+smalltalk.GoogleChart.klass);
+
+
+smalltalk.addClass('GaugeChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["Gauge"]);
+return self;
+},
+args: [],
+source: "initialize\x0a\x09\x22 Create a Guage with the chartId that identifies the chart graphic placement and the chartType to be created at that id.\x22\x0a    super initialize.\x0a    self chartType:'Gauge'.\x0a\x09^self",
+messageSends: ["initialize", "chartType:"],
+referencedClasses: []
+}),
+smalltalk.GaugeChart);
+
+
+
+smalltalk.addClass('GeoChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["GeoChart"]);
+return self;
+},
+args: [],
+source: "initialize\x0a\x09\x22 Create a Geo Chart\x22\x0a    super initialize.\x0a    self chartType:'GeoChart'.\x0a\x09^self",
+messageSends: ["initialize", "chartType:"],
+referencedClasses: []
+}),
+smalltalk.GeoChart);
+
+
+
+smalltalk.addClass('PieChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["PieChart"]);
+return self;
+},
+args: [],
+source: "initialize\x0a\x09super initialize.\x0a    self chartType:'PieChart'.\x0a\x09^self",
+messageSends: ["initialize", "chartType:"],
+referencedClasses: []
+}),
+smalltalk.PieChart);
+
+
+
+smalltalk.addClass('ScatterChart', smalltalk.GoogleChart, [], 'GoogleCharts');
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
+smalltalk.send(self,"_chartType_",["ScatterChart"]);
+return self;
+},
+args: [],
+source: "initialize\x0a\x09super initialize.\x0a    self chartType:'ScatterChart'.\x0a\x09^self",
+messageSends: ["initialize", "chartType:"],
+referencedClasses: []
+}),
+smalltalk.ScatterChart);
+
+
+

googlecharts/js/GoogleChartsExamples.deploy.js

@@ -0,0 +1,197 @@
+smalltalk.addPackage('GoogleChartsExamples', {});
+smalltalk.addClass('GaugeChartExample', smalltalk.GaugeChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["Label","Value"],["Memory",(80)],["CPU",(55)],["Network",(68)]]]);
+return $1;
+}
+}),
+smalltalk.GaugeChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+fn: function (){
+var self=this;
+var $1;
+$1={width:400, heigth:120,
+   redFrom:90,redTo:100,
+   yellowFrom:75,yellowTo:90,
+   minorTicks:5};
+;
+return $1;
+}
+}),
+smalltalk.GaugeChartExample);
+
+
+
+smalltalk.addClass('GeoChartExample', smalltalk.GeoChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["City","Population","Area"],["Rome",(2761477),(1285.31)],["Milan",(1324110),(181.76)],["Naples",(959574),(117.27)],["Turin",(907563),(130.17)],["Palermo",(655875),(158.9)],["Genoa",(607906),(243.6)],["Bologna",(380181),(140.7)],["Florence",(371282),(102.41)],["Fiumicino",(67370),(213.44)],["Anzio",(52192),(43.43)],["Ciampino",(38262),(11)]]]);
+return $1;
+}
+}),
+smalltalk.GeoChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+fn: function (){
+var self=this;
+var $1;
+$1={
+        region: 'IT',
+        displayMode: 'markers',
+        colorAxis: {colors: ['green', 'blue']}
+      };
+;
+return $1;
+}
+}),
+smalltalk.GeoChartExample);
+
+
+
+smalltalk.addClass('IndexChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_begin",
+smalltalk.method({
+selector: "begin",
+fn: function (){
+var self=this;
+var $1,$2,$3;
+$1=smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_new",[]);
+smalltalk.send($1,"_chartId_",["pie_chart_div"]);
+$2=smalltalk.send($1,"_drawChart",[]);
+$3=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
+return $3;
+}
+}),
+smalltalk.IndexChartApp);
+
+
+smalltalk.addMethod(
+"_neededVisualizationPackages",
+smalltalk.method({
+selector: "neededVisualizationPackages",
+fn: function (){
+var self=this;
+var $1;
+$1=["corechart"];
+return $1;
+}
+}),
+smalltalk.IndexChartApp.klass);
+
+
+smalltalk.addClass('PieChartExample', smalltalk.PieChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["Task","Hours per Day"],["Work",(11)],["Eat",(2)],["Commute",(2)],["Watch TV",(2)],["Snooze",(7)]]]);
+return $1;
+}
+}),
+smalltalk.PieChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.HashedCollection._fromPairs_([smalltalk.send("title","__minus_gt",["My Daily Activities"])]);
+return $1;
+}
+}),
+smalltalk.PieChartExample);
+
+
+
+smalltalk.addClass('PopupChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_begin",
+smalltalk.method({
+selector: "begin",
+fn: function (){
+var self=this;
+var $1;
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_chartId_",["pie_chart_div"]),"#popPieChart"]);
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.ScatterChartExample || ScatterChartExample),"_chartId_",["scatter_chart_div"]),"#popScatterChart"]);
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GaugeChartExample || GaugeChartExample),"_chartId_",["gauge_chart_div"]),"#popGaugeChart"]);
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GeoChartExample || GeoChartExample),"_chartId_",["geo_markers_chart_div"]),"#popGeoMarkersChart"]);
+$1=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
+return $1;
+}
+}),
+smalltalk.PopupChartApp);
+
+
+smalltalk.addMethod(
+"_neededVisualizationPackages",
+smalltalk.method({
+selector: "neededVisualizationPackages",
+fn: function (){
+var self=this;
+var $1;
+$1=["corechart","gauge","geochart"];
+return $1;
+}
+}),
+smalltalk.PopupChartApp.klass);
+
+
+smalltalk.addClass('ScatterChartExample', smalltalk.ScatterChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["Age","Weight"],[(8),(11)],[(4),(5.5)],[(11),(14)],[(4),(5)],[(3),(3)],[(6.5),(7)]]]);
+return $1;
+}
+}),
+smalltalk.ScatterChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+fn: function (){
+var self=this;
+var $1;
+$1={
+          title: 'Age vs. Weight comparison',
+          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
+          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
+          legend: 'none'
+        };
+;
+return $1;
+}
+}),
+smalltalk.ScatterChartExample);
+
+
+

googlecharts/js/GoogleChartsExamples.js

@@ -0,0 +1,257 @@
+smalltalk.addPackage('GoogleChartsExamples', {});
+smalltalk.addClass('GaugeChartExample', smalltalk.GaugeChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["Label","Value"],["Memory",(80)],["CPU",(55)],["Network",(68)]]]);
+return $1;
+},
+args: [],
+source: "makeData\x0a\x22Example Gauge Data\x22\x0a  ^ self arrayToDataTable: { {'Label'.'Value'}.\x0a    \x09\x09\x09\x09\x09{'Memory' . 80}.\x0a                        {'CPU' . 55}.\x0a                        {'Network' . 68}}",
+messageSends: ["arrayToDataTable:"],
+referencedClasses: []
+}),
+smalltalk.GaugeChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1={width:400, heigth:120,
+   redFrom:90,redTo:100,
+   yellowFrom:75,yellowTo:90,
+   minorTicks:5};
+;
+return $1;
+},
+args: [],
+source: "makeOptions\x0a\x22Example Gauge options\x22\x0a   ^<{width:400, heigth:120,\x0a   redFrom:90,redTo:100,\x0a   yellowFrom:75,yellowTo:90,\x0a   minorTicks:5}>",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GaugeChartExample);
+
+
+
+smalltalk.addClass('GeoChartExample', smalltalk.GeoChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["City","Population","Area"],["Rome",(2761477),(1285.31)],["Milan",(1324110),(181.76)],["Naples",(959574),(117.27)],["Turin",(907563),(130.17)],["Palermo",(655875),(158.9)],["Genoa",(607906),(243.6)],["Bologna",(380181),(140.7)],["Florence",(371282),(102.41)],["Fiumicino",(67370),(213.44)],["Anzio",(52192),(43.43)],["Ciampino",(38262),(11)]]]);
+return $1;
+},
+args: [],
+source: "makeData\x0a\x22Example Geo Data\x22\x0a  ^ self arrayToDataTable: {\x0a{'City'.   'Population' . 'Area'}.\x0a        {'Rome'.      2761477 .    1285.31}.\x0a        {'Milan'.     1324110 .    181.76}.\x0a        {'Naples'.    959574 .    117.27}.\x0a        {'Turin'.     907563 .     130.17}.\x0a        {'Palermo'.   655875 .     158.9}.\x0a        {'Genoa'.     607906 .   243.60}.\x0a        {'Bologna'.   380181 .     140.7}.\x0a        {'Florence'.  371282 .    102.41}.\x0a        {'Fiumicino'. 67370 .      213.44}.\x0a        {'Anzio'.     52192 .      43.43}.\x0a        {'Ciampino'.  38262 .      11} \x0a        }",
+messageSends: ["arrayToDataTable:"],
+referencedClasses: []
+}),
+smalltalk.GeoChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1={
+        region: 'IT',
+        displayMode: 'markers',
+        colorAxis: {colors: ['green', 'blue']}
+      };
+;
+return $1;
+},
+args: [],
+source: "makeOptions\x0a\x22Example Geo Options\x22\x0a\x0a   ^<{\x0a        region: 'IT',\x0a        displayMode: 'markers',\x0a        colorAxis: {colors: ['green', 'blue']}\x0a      }>",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.GeoChartExample);
+
+
+
+smalltalk.addClass('IndexChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_begin",
+smalltalk.method({
+selector: "begin",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1,$2,$3;
+$1=smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_new",[]);
+smalltalk.send($1,"_chartId_",["pie_chart_div"]);
+$2=smalltalk.send($1,"_drawChart",[]);
+$3=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
+return $3;
+},
+args: [],
+source: "begin\x0a\x09\x22Start the executiong of the ExampleChartApp by connecting each button/graphic pair\x22\x0a    PieChartExample new chartId:'pie_chart_div';drawChart.\x0a    ^super begin",
+messageSends: ["chartId:", "new", "drawChart", "begin"],
+referencedClasses: ["PieChartExample"]
+}),
+smalltalk.IndexChartApp);
+
+
+smalltalk.addMethod(
+"_neededVisualizationPackages",
+smalltalk.method({
+selector: "neededVisualizationPackages",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=["corechart"];
+return $1;
+},
+args: [],
+source: "neededVisualizationPackages\x0a\x22This App only needs a corechart package.\x22\x0a\x09^{'corechart'}",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.IndexChartApp.klass);
+
+
+smalltalk.addClass('PieChartExample', smalltalk.PieChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["Task","Hours per Day"],["Work",(11)],["Eat",(2)],["Commute",(2)],["Watch TV",(2)],["Snooze",(7)]]]);
+return $1;
+},
+args: [],
+source: "makeData\x0a\x09\x22return a DataTable of example Pie Chart data\x22\x0a\x0a  ^ self arrayToDataTable: { {'Task'.'Hours per Day'}.\x0a    \x09\x09\x09\x09\x09{'Work' . 11}.\x0a                        {'Eat'.2}.\x0a                        {'Commute'.2}.\x0a                        {'Watch TV'.2}.\x0a                        {'Snooze'.7}}",
+messageSends: ["arrayToDataTable:"],
+referencedClasses: []
+}),
+smalltalk.PieChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.HashedCollection._fromPairs_([smalltalk.send("title","__minus_gt",["My Daily Activities"])]);
+return $1;
+},
+args: [],
+source: "makeOptions\x0a\x09\x22Return a Dictionary of the options in this case only a title\x22\x0a\x09^#{'title' -> 'My Daily Activities'}\x0a",
+messageSends: ["->"],
+referencedClasses: []
+}),
+smalltalk.PieChartExample);
+
+
+
+smalltalk.addClass('PopupChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_begin",
+smalltalk.method({
+selector: "begin",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_chartId_",["pie_chart_div"]),"#popPieChart"]);
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.ScatterChartExample || ScatterChartExample),"_chartId_",["scatter_chart_div"]),"#popScatterChart"]);
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GaugeChartExample || GaugeChartExample),"_chartId_",["gauge_chart_div"]),"#popGaugeChart"]);
+smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GeoChartExample || GeoChartExample),"_chartId_",["geo_markers_chart_div"]),"#popGeoMarkersChart"]);
+$1=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
+return $1;
+},
+args: [],
+source: "begin\x0a\x09\x22Start the executiong of the ExampleChartApp by connecting each button/graphic pair\x22\x0a    ChartButton popUpChart:(PieChartExample chartId:'pie_chart_div') atDom:'#popPieChart' .\x0a    ChartButton popUpChart:(ScatterChartExample chartId:'scatter_chart_div') atDom:'#popScatterChart'.\x0a    ChartButton popUpChart:(GaugeChartExample chartId:'gauge_chart_div') atDom:'#popGaugeChart'.\x0a    ChartButton popUpChart:(GeoChartExample chartId:'geo_markers_chart_div') atDom: '#popGeoMarkersChart'.\x0a    ^super begin",
+messageSends: ["popUpChart:atDom:", "chartId:", "begin"],
+referencedClasses: ["PieChartExample", "ChartButton", "ScatterChartExample", "GaugeChartExample", "GeoChartExample"]
+}),
+smalltalk.PopupChartApp);
+
+
+smalltalk.addMethod(
+"_neededVisualizationPackages",
+smalltalk.method({
+selector: "neededVisualizationPackages",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=["corechart","gauge","geochart"];
+return $1;
+},
+args: [],
+source: "neededVisualizationPackages\x0a\x22This is a hook for subclasses to define which visualization packages to load.\x22\x0a\x09^{'corechart'.'gauge'.'geochart'}",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.PopupChartApp.klass);
+
+
+smalltalk.addClass('ScatterChartExample', smalltalk.ScatterChart, [], 'GoogleChartsExamples');
+smalltalk.addMethod(
+"_makeData",
+smalltalk.method({
+selector: "makeData",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1=smalltalk.send(self,"_arrayToDataTable_",[[["Age","Weight"],[(8),(11)],[(4),(5.5)],[(11),(14)],[(4),(5)],[(3),(3)],[(6.5),(7)]]]);
+return $1;
+},
+args: [],
+source: "makeData\x0a  \x22Return the example dataset\x22\x0a  ^ self arrayToDataTable: { \x0a  \x09\x09\x09\x09\x09\x09\x09{'Age'.'Weight'}.\x0a                            {8 . 11} . \x0a                            { 4 . 5.5} . \x0a                            { 11 . 14 } . \x0a                            { 4 . 5}. \x0a                            {3 . 3} . \x0a                            {6.5 . 7}}\x0a     ",
+messageSends: ["arrayToDataTable:"],
+referencedClasses: []
+}),
+smalltalk.ScatterChartExample);
+
+smalltalk.addMethod(
+"_makeOptions",
+smalltalk.method({
+selector: "makeOptions",
+category: 'not yet classified',
+fn: function (){
+var self=this;
+var $1;
+$1={
+          title: 'Age vs. Weight comparison',
+          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
+          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
+          legend: 'none'
+        };
+;
+return $1;
+},
+args: [],
+source: "makeOptions\x0a\x22options for example dataset\x22\x0a   ^<{\x0a          title: 'Age vs. Weight comparison',\x0a          hAxis: {title: 'Age', minValue: 0, maxValue: 15},\x0a          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},\x0a          legend: 'none'\x0a        }>",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ScatterChartExample);
+
+
+

googlecharts/popcharts.html

@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <script src="../../js/amber.js" type="text/javascript"></script>
+    <script type="text/javascript">
+		 loadAmber({
+			files: ['GoogleCharts.js','GoogleChartsExamples'],
+			prefix: 'examples/googlecharts/js', // path for js files i think
+			ready: function() {
+			  $(function() {
+				smalltalk.PopupChartApp._new(); // Start the smalltalk App
+			  });
+		}}); 
+	</script>
+  </head>
+  <body>
+       <h1>My First Google Chart Project</h1>
+	   
+       <button onclick="smalltalk.Browser._open()">class browser</button>
+	   <button id="popPieChart">pop pie chart</button>
+	   <div id="pie_chart_div"></div>
+	   <button id="popScatterChart">pop scatter chart</button>
+	   <div id="scatter_chart_div"></div>
+           <button id="popGaugeChart">pop gauge chart</button>
+	   <div id="gauge_chart_div"></div>
+           <button id="popGeoMarkersChart">pop Geo Markers Chart</button>
+           <div id="geo_markers_chart_div"></div>
+    
+
+  </body>
+</html>

googlecharts/st/GoogleCharts.st

@@ -0,0 +1,205 @@
+Smalltalk current createPackage: 'GoogleCharts' properties: #{}!
+Object subclass: #ChartApp
+	instanceVariableNames: ''
+	package: 'GoogleCharts'!
+!ChartApp commentStamp!
+A chart app is an example App which loads the google JSAPI and visualization API.!
+
+!ChartApp methodsFor: 'not yet classified'!
+
+begin
+	"Start the executiong of the ChartApp"
+	^self
+!
+
+initialize
+	"Load my external JS"
+    self class loadGoogleLoader:[self class loadVisualization:[self begin]]
+! !
+
+!ChartApp class methodsFor: 'not yet classified'!
+
+loadGoogleLoader: callback
+	"Load the Google JSAPI - Use JQuery.ajax() since that is available"
+	<$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});>
+!
+
+loadVisualization: callback
+	"Use google.load() to load visualization and load the needed packages"
+    |packages|
+    packages := self neededVisualizationPackages.
+    <google.load("visualization","1",{"callback" : callback , "packages":packages});>
+!
+
+neededVisualizationPackages
+"This is a hook for subclasses to define which visualization packages to load."
+	^{}
+! !
+
+Object subclass: #ChartButton
+	instanceVariableNames: 'element clickBlock'
+	package: 'GoogleCharts'!
+
+!ChartButton methodsFor: 'not yet classified'!
+
+activate
+	|button|
+	button := self element asJQuery.
+    button click:[self clickBlock value]
+!
+
+clickBlock
+	^clickBlock
+!
+
+clickBlock: aBlock
+	clickBlock := aBlock
+!
+
+element
+	^element
+!
+
+element: aSymbol
+	element := aSymbol
+! !
+
+!ChartButton class methodsFor: 'not yet classified'!
+
+element: elementSymbol clickBlock: clickBlock
+	^self new element: elementSymbol; clickBlock: clickBlock; activate;yourself
+!
+
+popUpChart: chart atDom: element
+	"Make the chart popup on click of an element"
+    ^self element: element clickBlock:[chart drawChart]
+! !
+
+Object subclass: #GoogleChart
+	instanceVariableNames: 'chartId chartType'
+	package: 'GoogleCharts'!
+
+!GoogleChart methodsFor: 'DOM'!
+
+getElementById: id
+	"Find element by the id in the DOM"
+	^ <document.getElementById(id)>
+! !
+
+!GoogleChart methodsFor: 'abstraction'!
+
+makeData
+	"abstraction - return the data for a google chart"
+  	 ^self subclassresponsibility
+!
+
+makeOptions
+	"Abstract method - return options for a Google Chart"
+   ^	 self subclassresponsibility
+! !
+
+!GoogleChart methodsFor: 'accessor'!
+
+chartId
+	^chartId
+!
+
+chartId: aString
+	chartId := aString
+!
+
+chartType
+	^ chartType
+!
+
+chartType: aString
+	chartType := aString
+! !
+
+!GoogleChart methodsFor: 'chart'!
+
+drawChart
+    |  chart data options|
+     data := self makeData.
+     chart :=self makeChart:self chartId.
+     options :=self makeOptions.
+     <chart.draw(data,options)>
+!
+
+makeChart: id
+"build a chart at specific element id in the DOM and return"
+	|e t|
+    e := self getElementById:id.
+    t := self chartType.
+    ^ <new google.visualization[t](e)>
+! !
+
+!GoogleChart methodsFor: 'data table'!
+
+arrayToDataTable: array
+
+	^ <google.visualization.arrayToDataTable(array)>
+! !
+
+!GoogleChart methodsFor: 'init'!
+
+initialize
+	^self
+! !
+
+!GoogleChart class methodsFor: 'not yet classified'!
+
+chartId: aString
+	^self new chartId:aString;yourself
+! !
+
+GoogleChart subclass: #GaugeChart
+	instanceVariableNames: ''
+	package: 'GoogleCharts'!
+
+!GaugeChart methodsFor: 'not yet classified'!
+
+initialize
+	" Create a Guage with the chartId that identifies the chart graphic placement and the chartType to be created at that id."
+    super initialize.
+    self chartType:'Gauge'.
+	^self
+! !
+
+GoogleChart subclass: #GeoChart
+	instanceVariableNames: ''
+	package: 'GoogleCharts'!
+
+!GeoChart methodsFor: 'not yet classified'!
+
+initialize
+	" Create a Geo Chart"
+    super initialize.
+    self chartType:'GeoChart'.
+	^self
+! !
+
+GoogleChart subclass: #PieChart
+	instanceVariableNames: ''
+	package: 'GoogleCharts'!
+
+!PieChart methodsFor: 'not yet classified'!
+
+initialize
+	super initialize.
+    self chartType:'PieChart'.
+	^self
+! !
+
+GoogleChart subclass: #ScatterChart
+	instanceVariableNames: ''
+	package: 'GoogleCharts'!
+
+!ScatterChart methodsFor: 'not yet classified'!
+
+initialize
+	super initialize.
+    self chartType:'ScatterChart'.
+	^self
+! !
+

googlecharts/st/GoogleChartsExamples.st

@@ -0,0 +1,148 @@
+Smalltalk current createPackage: 'GoogleChartsExamples' properties: #{}!
+GaugeChart subclass: #GaugeChartExample
+	instanceVariableNames: ''
+	package: 'GoogleChartsExamples'!
+
+!GaugeChartExample methodsFor: 'not yet classified'!
+
+makeData
+"Example Gauge Data"
+  ^ self arrayToDataTable: { {'Label'.'Value'}.
+    					{'Memory' . 80}.
+                        {'CPU' . 55}.
+                        {'Network' . 68}}
+!
+
+makeOptions
+"Example Gauge options"
+   ^<{width:400, heigth:120,
+   redFrom:90,redTo:100,
+   yellowFrom:75,yellowTo:90,
+   minorTicks:5}>
+! !
+
+GeoChart subclass: #GeoChartExample
+	instanceVariableNames: ''
+	package: 'GoogleChartsExamples'!
+
+!GeoChartExample methodsFor: 'not yet classified'!
+
+makeData
+"Example Geo Data"
+  ^ self arrayToDataTable: {
+{'City'.   'Population' . 'Area'}.
+        {'Rome'.      2761477 .    1285.31}.
+        {'Milan'.     1324110 .    181.76}.
+        {'Naples'.    959574 .    117.27}.
+        {'Turin'.     907563 .     130.17}.
+        {'Palermo'.   655875 .     158.9}.
+        {'Genoa'.     607906 .   243.60}.
+        {'Bologna'.   380181 .     140.7}.
+        {'Florence'.  371282 .    102.41}.
+        {'Fiumicino'. 67370 .      213.44}.
+        {'Anzio'.     52192 .      43.43}.
+        {'Ciampino'.  38262 .      11} 
+        }
+!
+
+makeOptions
+"Example Geo Options"
+
+   ^<{
+        region: 'IT',
+        displayMode: 'markers',
+        colorAxis: {colors: ['green', 'blue']}
+      }>
+! !
+
+ChartApp subclass: #IndexChartApp
+	instanceVariableNames: ''
+	package: 'GoogleChartsExamples'!
+
+!IndexChartApp methodsFor: 'not yet classified'!
+
+begin
+	"Start the executiong of the ExampleChartApp by connecting each button/graphic pair"
+    PieChartExample new chartId:'pie_chart_div';drawChart.
+    ^super begin
+! !
+
+!IndexChartApp class methodsFor: 'not yet classified'!
+
+neededVisualizationPackages
+"This App only needs a corechart package."
+	^{'corechart'}
+! !
+
+PieChart subclass: #PieChartExample
+	instanceVariableNames: ''
+	package: 'GoogleChartsExamples'!
+
+!PieChartExample methodsFor: 'not yet classified'!
+
+makeData
+	"return a DataTable of example Pie Chart data"
+
+  ^ self arrayToDataTable: { {'Task'.'Hours per Day'}.
+    					{'Work' . 11}.
+                        {'Eat'.2}.
+                        {'Commute'.2}.
+                        {'Watch TV'.2}.
+                        {'Snooze'.7}}
+!
+
+makeOptions
+	"Return a Dictionary of the options in this case only a title"
+	^#{'title' -> 'My Daily Activities'}
+! !
+
+ChartApp subclass: #PopupChartApp
+	instanceVariableNames: ''
+	package: 'GoogleChartsExamples'!
+
+!PopupChartApp methodsFor: 'not yet classified'!
+
+begin
+	"Start the executiong of the ExampleChartApp by connecting each button/graphic pair"
+    ChartButton popUpChart:(PieChartExample chartId:'pie_chart_div') atDom:'#popPieChart' .
+    ChartButton popUpChart:(ScatterChartExample chartId:'scatter_chart_div') atDom:'#popScatterChart'.
+    ChartButton popUpChart:(GaugeChartExample chartId:'gauge_chart_div') atDom:'#popGaugeChart'.
+    ChartButton popUpChart:(GeoChartExample chartId:'geo_markers_chart_div') atDom: '#popGeoMarkersChart'.
+    ^super begin
+! !
+
+!PopupChartApp class methodsFor: 'not yet classified'!
+
+neededVisualizationPackages
+"This is a hook for subclasses to define which visualization packages to load."
+	^{'corechart'.'gauge'.'geochart'}
+! !
+
+ScatterChart subclass: #ScatterChartExample
+	instanceVariableNames: ''
+	package: 'GoogleChartsExamples'!
+
+!ScatterChartExample methodsFor: 'not yet classified'!
+
+makeData
+  "Return the example dataset"
+  ^ self arrayToDataTable: { 
+  							{'Age'.'Weight'}.
+                            {8 . 11} . 
+                            { 4 . 5.5} . 
+                            { 11 . 14 } . 
+                            { 4 . 5}. 
+                            {3 . 3} . 
+                            {6.5 . 7}}
+!
+
+makeOptions
+"options for example dataset"
+   ^<{
+          title: 'Age vs. Weight comparison',
+          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
+          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
+          legend: 'none'
+        }>
+! !
+

myproject/index.html

@@ -0,0 +1,16 @@
+<html>
+<head>
+<title>My Project</title>
+<script src="../../js/amber.js" type="text/javascript"></script>
+</head>
+<body>
+<script type="text/javascript"> 
+	loadAmber({
+		files: ['Banana.js'],
+		prefix: 'examples/myproject/js',
+		ready: function() {
+			smalltalk.Browser._open();
+		}}); 
+</script>
+</body>
+</html>

nodejs/README

@@ -0,0 +1,9 @@
+JTalk + Node.js = Awesomeness
+=============================
+These are some experiments of using JTalk together with Node.js:
+
+hello           - Hello world example with a simple Makefile.
+benchfib        - Port of tinybenchmarks from Squeak.
+trivialserver   - A slightly larger example.
+
+You will need "node" in your path to try all the above.

nodejs/benchfib/Benchfib.st

@@ -0,0 +1,124 @@
+Object subclass: #Benchfib
+	instanceVariableNames: ''
+	category: 'Benchfib'!
+
+!Benchfib class methodsFor: 'not yet classified'!
+
+main
+
+	| result |
+	result := 0 tinyBenchmarks.
+	console log: '0 tinyBenchmarks => ' , result asString.
+	result := 0 jstinyBenchmarks.
+	console log: '0 jstinyBenchmarks => ' , result asString
+! !
+
+!Number methodsFor: '*Benchfib'!
+
+benchFib
+	"Handy send-heavy benchmark"
+	"(result // seconds to run) = approx calls per second"
+	" | r t |
+	  t := Time millisecondsToRun: [r := 26 benchFib].
+	  (r * 1000) // t"
+	"138000 on a Mac 8100/100"
+	^ self < 2
+		ifTrue: [1] 
+		ifFalse: [(self-1) benchFib + (self-2) benchFib + 1]
+!
+
+benchmark  "Handy bytecode-heavy benchmark"
+	"(500000 // time to run) = approx bytecodes per second"
+	"5000000 // (Time millisecondsToRun: [10 benchmark]) * 1000"
+	"3059000 on a Mac 8100/100"
+    | size flags prime k count |
+    size := 8190.
+    1 to: self do:
+        [:iter |
+        count := 0.
+        flags := Array new.
+        size timesRepeat: [ flags add: true].
+        1 to: size do:
+            [:i | (flags at: i) ifTrue:
+                [prime := i+1.
+                k := i + prime.
+                [k <= size] whileTrue:
+                    [flags at: k put: false.
+                    k := k + prime].
+                count := count + 1]]].
+    ^ count
+!
+
+tinyBenchmarks
+	"Report the results of running the two tiny Squeak benchmarks.
+	ar 9/10/1999: Adjusted to run at least 1 sec to get more stable results"
+	"0 tinyBenchmarks"
+	"On a 292 MHz G3 Mac: 22727272 bytecodes/sec; 984169 sends/sec"
+	"On a 400 MHz PII/Win98:  18028169 bytecodes/sec; 1081272 sends/sec"
+	| t1 t2 r n1 n2 |
+	n1 := 1.
+	[t1 := Date millisecondsToRun: [n1 benchmark].
+	t1 < 1000] whileTrue:[n1 := n1 * 2]. "Note: #benchmark's runtime is about O(n)"
+
+	n2 := 28.
+	[t2 := Date millisecondsToRun: [r := n2 benchFib].
+	t2 < 1000] whileTrue:[n2 := n2 + 1]. 
+	"Note: #benchFib's runtime is about O(k^n),
+		where k is the golden number = (1 + 5 sqrt) / 2 = 1.618...."
+
+	^ ((n1 * 500000 * 1000) / t1) printString, ' bytecodes/sec; ',
+	  ((r * 1000) / t2) printString, ' sends/sec'
+!
+
+jsbenchFib
+ 
+	<if (this < 2) {
+return 1;
+} else {
+return (this-1)._jsbenchFib() + (this-2)._jsbenchFib() + 1;}>
+!
+
+jsbenchmark
+
+<
+var size = 8190;
+var count;
+for (var z=0;z<this;z++) {
+  count = 0;
+  var flags = new Array();
+  for (var p=0; p<size; p++) {
+    flags[p] = true;
+  }
+  for (var i=1;i<=size;i++) {
+    if (flags[i-1]) {
+      var prime = i+1;
+      var k = i + prime;
+      while (k <= size) {
+        flags[k-1] = false;
+        k = k + prime;
+      }
+      count = count + 1;
+    }
+  }
+}
+return count>
+!
+
+jstinyBenchmarks
+	"0 jstinyBenchmarks"
+
+	| t1 t2 r n1 n2 |
+	n1 := 1.
+	[t1 := Date millisecondsToRun: [n1 jsbenchmark].
+	t1 < 1000] whileTrue:[n1 := n1 * 2]. "Note: #benchmark's runtime is about O(n)"
+
+	n2 := 28.
+	[t2 := Date millisecondsToRun: [r := n2 jsbenchFib].
+	t2 < 1000] whileTrue:[n2 := n2 + 1]. 
+	"Note: #jsbenchFib's runtime is about O(k^n),
+		where k is the golden number = (1 + 5 sqrt) / 2 = 1.618...."
+
+	^ ((n1 * 500000 * 1000) / t1) printString, ' bytecodes/sec; ',
+	  ((r * 1000) / t2) printString, ' sends/sec'
+! !
+

nodejs/benchfib/Makefile

@@ -0,0 +1,8 @@
+Program.js: Benchfib.st
+	../../../bin/amberc -m Benchfib Benchfib.st Program
+
+run: Program.js
+	./benchfib
+
+clean:
+	rm -f Program.js* Benchfib.js

nodejs/benchfib/benchfib

@@ -0,0 +1 @@
+time node Program.js $@

nodejs/hello/Hello.st

@@ -0,0 +1,9 @@
+Object subclass: #Hello
+        instanceVariableNames: ''
+        category: 'Hello'!
+
+!Hello class methodsFor: 'main'!
+
+main
+	console log: 'Hello world from Amber in Node.js'
+! ! 

nodejs/hello/Makefile

@@ -0,0 +1,8 @@
+Program.js: Hello.st
+	../../../bin/amberc -m Hello Hello.st Program
+
+run: Program.js
+	./hello
+
+clean:
+	rm -f Program.js Hello.js

nodejs/hello/README

@@ -0,0 +1,13 @@
+Trivial Node.js example in JTalk that also uses the Google Closure compiler
+if ~/compiler.jar is present.
+
+Hello.st - source code.
+hello    - trivial bash script to run resulting program.
+Makefile - trivial makefile, read it.
+
+Hello.js - produced when you run make. Contains JTalk + Hello.st + a main call
+
+To play, do this:
+
+make
+./hello

nodejs/hello/hello

@@ -0,0 +1 @@
+node Program.js $@

nodejs/meta/Makefile

@@ -0,0 +1,8 @@
+Program.js: MyScript.st
+	../../../bin/amberc -l parser,Compiler -m MyScript MyScript.st Program
+
+run: Program.js
+	node Program.js
+
+clean:
+	rm -f Program.js MyScript.js

nodejs/meta/MyScript.st

@@ -0,0 +1,27 @@
+Object subclass: #MyScript
+	instanceVariableNames: ''
+	category: 'MyScript'!
+
+!MyScript class methodsFor: 'main'!
+main
+	"Just a trivial example showing some meta programming by
+	creating a class, compiling some methods and then exporting
+	this package in javascript format to stdout"
+
+	| klass compiler method |
+	Object subclass: #Dummy instanceVariableNames: '' package: 'Dummy'.
+	klass := Smalltalk current at: #Dummy.
+	compiler := Compiler new.
+
+	method := compiler load: 'foo ^10' forClass: klass.
+	method category: 'foo'.
+	klass addCompiledMethod: method.
+
+	method := compiler load: 'bar ^ self foo * 2' forClass: klass.
+	method category: 'foo'.
+	klass addCompiledMethod: method.
+
+	console log: (Exporter new exportPackage: 'Dummy')
+! !
+
+

nodejs/meta/meta

@@ -0,0 +1 @@
+node Program.js $@

nodejs/pystone/Makefile

@@ -0,0 +1,8 @@
+Program.js: Pystone.st
+	../../../bin/amberc -m Pystone Pystone.st Program
+
+run: Program.js
+	./pystone
+
+clean:
+	rm -f *.js

nodejs/pystone/Pystone.st

@@ -0,0 +1,306 @@
+Object subclass: #PyStoneRecord
+	instanceVariableNames: 'ptrComp discr enumComp intComp stringComp'
+	category: 'Pystone'!
+!PyStoneRecord commentStamp!
+Record class used in Pystone benchmark.!
+
+!PyStoneRecord methodsFor: 'accessing'!
+
+discr
+	^discr
+!
+
+discr: p
+	discr := p
+!
+
+enumComp
+	^enumComp
+!
+
+enumComp: p
+	enumComp := p
+!
+
+intComp
+	^intComp
+!
+
+intComp: p
+	intComp := p
+!
+
+ptrComp
+	^ptrComp
+!
+
+ptrComp: p
+	ptrComp := p
+!
+
+stringComp
+	^stringComp
+!
+
+stringComp: p
+	stringComp := p
+! !
+
+!PyStoneRecord methodsFor: 'copying'!
+
+copy
+	^PyStoneRecord ptrComp: ptrComp discr: discr enumComp: enumComp intComp: intComp stringComp: stringComp
+! !
+
+!PyStoneRecord methodsFor: 'initialize-release'!
+
+ptrComp: p discr: d enumComp: e intComp: i stringComp: s
+
+	ptrComp := p.
+	discr := d.
+	enumComp := e.
+	intComp := i.
+	stringComp := s
+! !
+
+!PyStoneRecord class methodsFor: 'instance-creation'!
+
+new
+
+	^self ptrComp: nil discr: 0 enumComp: 0 intComp: 0 stringComp: 0
+!
+
+ptrComp: p discr: d enumComp: e intComp: i stringComp: s
+
+	^super new ptrComp: p discr: d enumComp: e intComp: i stringComp: s
+! !
+
+Object subclass: #Pystone
+	instanceVariableNames: 'nulltime ptrGlbNext ptrGlb ident1 ident3 ident2 ident4 ident5 ident6 intGlob boolGlob char1Glob char2Glob array1Glob array2Glob func3 func2 func1'
+	category: 'Pystone'!
+!Pystone commentStamp!
+This is a straight translation of pystone 1.1 from Python to Squeak. Procedures have been mapped to instance side methods, functions have been mapped to blocks. Open a transcript and run:
+
+Pystone run!
+
+!Pystone methodsFor: 'as yet unclassified'!
+
+defineFunctions
+	"Functions have been mapped to blocks, since that
+	would be natural."
+	
+	func1 := [:charPar1 :charPar2 |
+		| charLoc1 charLoc2 |
+		charLoc1 := charPar1.
+		charLoc2 := charLoc1.
+		(charLoc2 = charPar2) ifTrue: [ident2] ifFalse: [ident1]].
+
+	func2 := [:strParI1 :strParI2 |
+		| intLoc charLoc |
+		intLoc := 1.
+		[intLoc <= 1] whileTrue: [
+			((func1 value: (strParI1 at: intLoc) value: (strParI1 at: intLoc + 1)) = ident1)
+				ifTrue: [
+					charLoc := 'A'.
+					intLoc := intLoc + 1]].
+		(charLoc >= 'W' and: [charLoc <= 'Z']) ifTrue: [
+			intLoc := 7].
+		(charLoc = 'X') ifTrue: [true] ifFalse: [
+			(strParI1 > strParI2) ifTrue: [
+				intLoc := intLoc + 7.
+				true]
+			ifFalse: [
+				false]]].
+	
+	func3 := [:enumParIn |
+		| enumLoc |
+		enumLoc := enumParIn.
+		enumLoc = ident3]
+!
+
+main: loops
+	"Adaption of pystone.py version 1.9 from Python."
+
+	ident1 := 1. ident2 := 2. ident3 := 3. ident4 := 4. ident5 := 5. ident6 := 6.
+	intGlob := 0.
+	boolGlob := false.
+	char1Glob := String value: 0.
+	char2Glob := String value: 0.
+	array1Glob := Array new.
+        51 timesRepeat: [ array1Glob add: 0].
+	array2Glob := ((1 to: 51) collect: [:i | array1Glob copy]) asArray.
+
+	self defineFunctions.
+
+	self pystones: loops block: [:benchtime :stones |
+		self log: 'Pystone(1.1) time for ', loops asString, ' passes = ', benchtime asString.
+		self log: 'This machine benchmarks at ',
+			((stones / 0.1) rounded * 0.1) asString, ' pystones/second']
+!
+
+log: aString
+	(smalltalk at: #Transcript)
+		ifNotNil: [
+			Transcript show: aString;cr]
+		ifNil: [
+			console log: aString]
+!		
+
+proc0: loops block: aBlock
+	| string1Loc starttime intLoc1 intLoc2 string2Loc enumLoc intLoc3 charIndex benchtime |
+
+	loops timesRepeat: [].
+
+	benchtime := Date millisecondsToRun: [
+	ptrGlbNext := PyStoneRecord new.
+	ptrGlb := PyStoneRecord new.
+	ptrGlb ptrComp: ptrGlbNext.
+	ptrGlb discr: ident1.
+	ptrGlb enumComp: ident3.
+	ptrGlb intComp: 40.
+	ptrGlb stringComp: 'DHRYSTONE PROGRAM, SOME STRING'.
+	string1Loc := 'DHRYSTONE PROGRAM, 1''ST STRING'.
+	
+	(array2Glob at: 8) at: 7 put: 10.
+	"1 to: loops - 1 do: [:i |       Changed this to use timesRepeat: since i is not used at all in the loop"
+	loops timesRepeat: [
+		self proc5; proc4.
+		intLoc1 := 2.
+		intLoc2 := 3.
+		string2Loc := 'DHRYSTONE PROGRAM, 2''ND STRING'.
+		enumLoc := ident2.
+		boolGlob := (func2 value: string1Loc value: string2Loc) not.
+		[intLoc1 < intLoc2] whileTrue: [
+			intLoc3 := 5 * intLoc1 - intLoc2.
+			intLoc3 := self proc7: intLoc1 with: intLoc2.
+			intLoc1 := intLoc1 + 1].
+	 	self proc8:array1Glob with: array2Glob with: intLoc1 with: intLoc3.
+		ptrGlb := self proc1: ptrGlb.
+		charIndex := 'A'.
+		[charIndex <= char2Glob] whileTrue: [
+			(enumLoc = (func1 value: charIndex value: 'C'))
+					ifTrue: [enumLoc := self proc6: ident1].
+			charIndex := String value: (charIndex asciiValue + 1)].
+		intLoc3 := intLoc2 * intLoc1.
+		intLoc2 := intLoc3 / intLoc1.
+		intLoc2 := 7 * (intLoc3 - intLoc2) - intLoc1.
+		intLoc1 := self proc2: intLoc1]].
+    ^ aBlock value: (benchtime / 1000) value: (loops / benchtime) * 1000
+!
+
+proc1: ptrParIn
+	| nextRecord tmp |
+	tmp := ptrParIn.
+	nextRecord := ptrGlb copy.
+	ptrParIn ptrComp: nextRecord.
+	ptrParIn intComp: 5.
+	nextRecord intComp: ptrParIn intComp.
+	nextRecord ptrComp: ptrParIn ptrComp.
+	nextRecord ptrComp: (self proc3: nextRecord ptrComp).
+	(nextRecord discr = ident1) ifTrue: [
+		nextRecord intComp: 6.
+		nextRecord enumComp: (self proc6: ptrParIn enumComp).
+		nextRecord ptrComp: ptrGlb ptrComp.
+		nextRecord intComp: (self proc7: nextRecord intComp with: 10) ]
+	ifFalse: [
+		tmp := nextRecord copy].
+	nextRecord ptrComp: nil.
+	^tmp
+!
+
+proc2: intParIO
+	| tmp intLoc enumLoc |
+	tmp := intParIO.
+	intLoc := intParIO + 10.
+	[true] whileTrue: [
+		(char1Glob = 'A') ifTrue: [
+			intLoc := intLoc - 1.
+			tmp := intLoc - intGlob.
+			enumLoc := ident1].
+		(enumLoc = ident1) ifTrue: [
+			^ tmp]]
+!
+
+proc3: ptrParOut
+	| tmp |
+	tmp := ptrParOut.
+	ptrGlb ifNotNil: [
+		tmp := ptrGlb ptrComp]
+	ifNil: [
+		intGlob := 100].
+	ptrGlb intComp: (self proc7: 10 with: intGlob).
+	^tmp
+!
+
+proc4
+	| boolLoc |
+	boolLoc := char1Glob = 'A'.
+	boolLoc := boolLoc | boolGlob.
+	char2Glob := 'B'
+!
+
+proc5
+	char1Glob := 'A'.
+	boolGlob := false
+!
+
+proc6: enumParIn
+	| enumParOut |
+	enumParOut := enumParIn.
+	(func3 value: enumParIn) ifFalse: [
+		enumParOut := ident4].
+	(enumParIn = ident1) ifTrue: [
+		enumParOut := ident1] ifFalse: [
+	(enumParIn = ident2) ifTrue: [
+			intGlob > 100 ifTrue: [
+				enumParOut := ident1]
+			ifFalse: [
+				enumParOut := ident4]] ifFalse: [
+	(enumParIn = ident3) ifTrue: [
+		enumParOut := ident2] ifFalse: [
+	(enumParIn = ident4) ifTrue: [] ifFalse: [
+	(enumParIn = ident5) ifTrue: [
+		enumParOut := ident3]]]]].
+	^enumParOut
+!
+
+proc7: intParI1 with: intParI2
+	| intLoc intParOut |
+	intLoc := intParI1 + 2.
+	intParOut := intParI2 + intLoc.
+	^ intParOut
+!
+
+proc8: array1Par with: array2Par with: intParI1 with: intParI2
+	| intLoc |
+	intLoc := intParI1 + 5.
+	array1Par at: intLoc put: intParI2.
+	array1Par at: intLoc + 1 put: (array1Par at: intLoc).
+	array1Par at: intLoc + 30 put: intLoc.
+	intLoc to: intLoc + 1 do: [:intIndex |
+		(array2Par at: intLoc) at: intIndex put: intLoc.
+		(array2Par at: intLoc) at: intLoc - 1 put: ((array2Par at: intLoc) at: intLoc - 1) + 1.
+		(array2Par at: intLoc + 20) at: intLoc put: (array1Par at: intLoc)].
+	intGlob := 5
+!
+
+pystones: loops block: aBlock
+	^self proc0: loops block: aBlock
+! !
+
+Pystone class instanceVariableNames: 'nulltime'!
+
+!Pystone class methodsFor: 'as yet unclassified'!
+
+main
+	"self main"
+	
+	self run: 50000
+!
+
+run: loops
+	"self run: 50000"
+	
+	self new main: loops
+! !
+

nodejs/pystone/pystone

@@ -0,0 +1 @@
+node Program.js $@

nodejs/trivialserver/Makefile

@@ -0,0 +1,8 @@
+Program.js: TrivialServer.st
+	../../../bin/amberc -m TrivialServer TrivialServer.st Program
+
+run: Program.js
+	./trivial
+
+clean:
+	rm -f Program.js TrivialServer.js

nodejs/trivialserver/TrivialServer.st

@@ -0,0 +1,51 @@
+Object subclass: #TrivialServer
+        instanceVariableNames: 'counter'
+        category: 'TrivialServer'!
+
+!TrivialServer methodsFor: 'initializing'!
+initialize
+        counter := 0
+! !
+
+!TrivialServer methodsFor: 'processing'!
+process: aRequest
+        | hostname httpVersion stream |
+	counter := counter + 1.
+
+        "Calling a method in a js module"
+	hostname := os hostname.
+
+        "Accessing a property of js HTTP request object"
+        httpVersion := aRequest httpVersion.
+
+        stream := String new writeStream.
+	stream
+		nextPutAll: '<html><p>Request HTTP version: ', httpVersion, '</p>';
+		nextPutAll: '<p>OS hostname: ', hostname, '</p>';
+		nextPutAll: '<p>Number of requests: ', counter asString, '</p></html>'.
+	^stream contents
+!
+
+start
+        | block obj |
+        block := [:req :res || headers |
+	    headers := Dictionary with: 'content-type' -> 'text/html'.
+	    res writeHead: (Array with: 200 with: headers).
+	    res end: (self process: req)].
+
+        (http createServer: block)
+                listen: 1337 host: '127.0.0.1'.
+        console log: 'TrivialServer running at http://127.0.0.1:1337/'
+! !
+
+
+!TrivialServer class methodsFor: 'initialization'!
+initialize
+        "We require these Node modules."
+    os := require value: 'os'.
+    http := require value: 'http'.
+!
+
+main
+	self new start
+! !

nodejs/trivialserver/trivial

@@ -0,0 +1 @@
+node Program.js $@

presentation/fosdem2012/lib/booklet/jquery.booklet.1.2.0.css

@@ -0,0 +1,100 @@
+/* @Booklet
+----------------------------------------*/
+	.booklet           {width:800px; height:600px; position:relative; /*background:#fff;*/ margin:0 auto 10px; overflow:visible !important;}
+	.booklet .b-page  {left:0; top:0; position:absolute; overflow:hidden; padding:0;}
+	
+	.booklet .b-pN  {}
+	.booklet .b-p0  {}
+	.booklet .b-p1  {}
+	.booklet .b-p2  {}    
+	.booklet .b-p3  {}
+	.booklet .b-p4  {}
+	
+	.booklet .b-load  {}
+   
+   	/* Page Wrappers */
+	.booklet .b-wrap       {top:0; position:absolute;}
+	.booklet .b-wrap-left  {background:#fff;}
+	.booklet .b-wrap-right {background:#efefef;}
+	
+	.booklet .b-pN .b-wrap,
+	.booklet .b-p1 .b-wrap,
+	.booklet .b-p2 .b-wrap,
+	.booklet .b-p3 .b-wrap,
+	.booklet .b-p4 .b-wrap  {left:0;}
+	.booklet .b-p0 .b-wrap  {right:0;}
+	
+   	/* Custom Page Types */
+	.booklet .b-page-blank  {padding:0; width:100%; height:100%;}
+	.booklet .b-page-cover  {padding:0; width:100%; height:100%; background:#925C0E;}
+	.booklet .b-page-cover h3  {color:#fff; text-shadow:0px 1px 3px #222;}
+   
+   	/* Page Numbers */
+	.booklet .b-counter {bottom:10px; position:absolute; display:block; width:25px; height:20px; background:#ccc; color:#444; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; padding:5px 0 0;}
+	.booklet .b-wrap-left  .b-counter  {left:10px;}
+	.booklet .b-wrap-right .b-counter {right:10px;}
+   
+   	/* Page Shadows */
+	.booklet .b-shadow-f  {right:0; top:0; position:absolute; opacity:0; background-image:url("images/shadow-top-forward.png"); background-repeat:repeat-y; background-position:100% 0;}
+	.booklet .b-shadow-b  {left:0;  top:0; position:absolute; opacity:0; background-image:url("images/shadow-top-back.png");    background-repeat:repeat-y; background-position:0 0;}
+	
+	.booklet .b-p0 {background-image:url("images/shadow.png"); background-repeat:repeat-y; background-position:100% 10px;}
+	.booklet .b-p3 {background-image:url("images/shadow.png"); background-repeat:repeat-y; background-position:0 10px;}
+	
+   	/* Overlay Controls */
+	.booklet .b-grab     {cursor: url(images/openhand.cur), default;}
+	.booklet .b-grabbing {cursor: url(images/closedhand.cur), default;}
+	
+   	/* Overlay Controls */
+	.booklet .b-overlay      {top:0; position:absolute; height:100%; width:50%;}
+	.booklet .b-overlay-prev {left:0;}
+	.booklet .b-overlay-next {right:0;}
+	
+   	/* Tab Controls */
+	.booklet .b-tab        {background:#000; height:40px; width:100%; padding:10px 0 0; text-align:center; color:#ccc; position:absolute; font-size:11px;}
+	.booklet .b-tab-prev   {left:0;}
+	.booklet .b-tab-next   {right:0;}
+	.booklet .b-tab:hover  {background:#aaa; color:#000;}	
+	
+   	/* Arrow Controls */
+	.booklet .b-arrow          {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:74px;}
+	.booklet .b-arrow div      {display:none; text-indent:-9999px; height:170px; width:74px; position:absolute; left:0; top:25%;}
+	.booklet .b-arrow-next     {right:-80px;}
+	.booklet .b-arrow-prev     {left:-80px;}
+	.booklet .b-arrow-next div {background:url("images/arrow-next.png") no-repeat left top;}
+	.booklet .b-arrow-prev div {background:url("images/arrow-prev.png") no-repeat left top;}
+		
+/* @z-index fix (needed for older IE browsers)
+----------------------------------------*/
+	body              {z-index:0;}
+    .b-menu           {z-index:100;}
+    .b-selector       {z-index:100;}
+	.booklet          {z-index:10;}
+    .b-pN             {z-index:10;}
+    .b-p0             {z-index:10;}
+    .b-p1             {z-index:10;}
+    .b-p2             {z-index:10;}
+    .b-p3             {z-index:10;}
+    .b-p4             {z-index:10;}
+    .b-prev           {z-index:40;}
+    .b-next           {z-index:40;}
+    .b-counter        {z-index:40;}
+	
+/* @Menu Items
+----------------------------------------*/
+	.b-menu {height:40px; padding:0 0 10px;}
+	
+	.b-selector             {height:40px; position:relative; float:right; border:none; color:#cecece; cursor:pointer;}
+	.b-selector .b-current  {padding:8px 15px 12px; line-height:20px; min-width:18px; height:20px; display:block; background:#000; text-align:center;}
+	.b-selector-page        {width:auto; margin-left:15px;}
+	.b-selector-chapter     {width:auto;}
+	
+	.b-selector:hover            {color:#fff; background-position:left 0px;}
+	.b-selector:hover .b-current {background-position:right 0px;}
+	.b-selector ul               {overflow:hidden; margin:0; list-style:none !important; position:absolute; top:40px; right:0; padding:0 0 10px; background:#000; width:240px; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
+	.b-selector li               {border:none;}
+	.b-selector a                {color:#cecece; height:14px; text-decoration:none; display:block; padding:5px 10px;}
+	.b-selector a .b-text        {float:left; clear:none;}
+	.b-selector a .b-num         {float:right; clear:none;}
+	.b-selector a:hover          {color:#fff;}
+		

presentation/fosdem2012/lib/booklet/jquery.booklet.1.2.0.js

@@ -0,0 +1,1232 @@
+/*
+ * jQuery Booklet Plugin
+ * Copyright (c) 2010 W. Grauvogel (http://builtbywill.com/)
+ *
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Version : 1.2.0
+ *
+ * Originally based on the work of:
+ *	1) Charles Mangin (http://clickheredammit.com/pageflip/)
+ */
+;(function($) {
+		   
+$.fn.booklet = function(options){
+	
+	var o = $.extend({}, $.fn.booklet.defaults, options);
+	
+	return $(this).each(function()
+	{
+		var command, config, obj, id, i, target;
+		
+		//option type string - api call
+		if(typeof options == 'string')
+		{
+			//check if booklet has been initialized
+			 if($(this).data('booklet')){
+				command = options.toLowerCase();
+				obj = $.fn.booklet.interfaces[$(this).data('id')];
+				
+				if(command == 'next'){ obj.next() }
+				else if(command == 'prev'){ obj.prev() }
+				
+			 }
+		}
+		//option type number - api call		
+		else if(typeof options == 'number')
+		{
+			//check if booklet has been initialized
+			 if($(this).data('booklet')){
+				target = options;
+				obj = $.fn.booklet.interfaces[$(this).data('id')];
+				
+				if(target % 2 != 0) {
+					target-= 1;
+				}
+				
+				obj.gotoPage(target);
+			 }
+			 
+		}
+		//else build new booklet
+		else
+		{
+			config = $.extend(true, {}, o);
+	
+			// Determine ID (Reuse array slots if possible)
+			id = $.fn.booklet.interfaces.length;
+			for(i = 0; i < id; i++)
+			{
+			   if(typeof $.fn.booklet.interfaces[i] == 'undefined'){ id = i; break; }
+			}
+	
+			// Instantiate the booklet
+			obj = new booklet($(this), config, id);
+	
+			// Add API references
+			$.fn.booklet.interfaces[id] = obj;
+		}
+	});
+}
+
+
+function booklet(target, options, id){
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//VARS + STRUCTURE
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	var self, opts, b, src,
+		hash, i, j, p, diff, busy, init, rhover, lhover, h, a, playing,
+		titles = new Array(), chapters = new Array(),
+		pN, p0, p1, p2, p3, p4, pNwrap, p0wrap, p1wrap, p2wrap, p3wrap, p4wrap, wraps, sF, sB,
+		p3drag, p0drag, temp, relativeX,
+		overlaysB, overlayN, overlayP, tabs, tabN, tabP, arrows, arrowN, arrowP, next, prev, ctrlsN, ctrlsP,
+		menu, chapter, dd, ddUL, ddH, ddLI, ddA, ddT, ddC, ddCUL, ddCH, ddCLI, ddCA, ddCT,
+		empty = '<div class="b-page-empty" title="" rel=""></div>', blank = '<div class="b-page-blank" title="" rel=""></div>'
+	;
+		
+	busy         = false;
+	playing      = false;
+	init         = false;
+	rhover = lhover = false;
+	self         = this;
+	self.options = options;
+	self.id      = id;
+	self.hash    = '';	
+	opts         = self.options;
+	b            = target.addClass('booklet');
+	src          = b.children('.b-load');
+	
+	//save page titles and chapter names, add page numbers
+	initPages();
+	
+	//store data for api calls
+	b.data('booklet',true);
+	b.data('id', id);
+	b.data('total', src.children().length);
+	
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// SETUP OPTIONS
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	//set width + height
+	if(!opts.width){
+		opts.width = b.width();
+	}else if(typeof opts.width == 'string' && opts.width.indexOf("%") != -1){
+		opts.wPercent = true;
+		opts.wOrig = opts.width;
+		opts.width  = (opts.width.replace('%','')/100) * parseFloat(b.parent().css('width'));
+	}
+	if(!opts.height){
+		opts.height = b.height();
+	}else if(typeof opts.height == 'string' && opts.height.indexOf("%") != -1){
+		opts.hPercent = true;
+		opts.hOrig = opts.height;
+		opts.height  = (opts.height.replace('%','')/100) * parseFloat(b.parent().css('height'));
+	}
+	b.width(opts.width);
+	b.height(opts.height);
+	
+	//save page sizes and other vars
+	opts.pWidth  = opts.width/2;
+	opts.pWidthN = '-'+(opts.pWidth)+'px';
+	opts.pWidthH = opts.pWidth/2;
+	opts.pHeight = opts.height;
+
+	opts.pTotal  = src.children().length;
+	opts.speedH  = opts.speed/2;
+	
+	//set startingPage
+	if(opts.direction == 'LTR'){
+		opts.curr = 0;
+	}else if(opts.direction == 'RTL'){
+		opts.curr = opts.pTotal-2;
+	}
+	if(!isNaN(opts.startingPage) && opts.startingPage <= opts.pTotal && opts.startingPage > 0){
+		if((opts.startingPage % 2) != 0){opts.startingPage--};
+		opts.curr = opts.startingPage;
+	}
+	
+	//set position
+	if(opts.closed && opts.autoCenter){
+		if(opts.curr == 0){
+			b.width(opts.pWidth);
+		}else if(opts.curr >= opts.pTotal-2){
+			b.width(opts.pWidth);
+		}
+	}
+	
+	//set booklet opts.name
+	if(opts.name){
+		document.title = opts.name;
+	}else{
+		opts.name = document.title;
+	}
+	
+	//save shadow widths for anim
+	if(opts.shadows){
+		opts.shadowTopFwdWidth  = '-'+opts.shadowTopFwdWidth+'px';
+		opts.shadowTopBackWidth = '-'+opts.shadowTopBackWidth+'px';
+	}
+	
+	//setup menu
+	if(opts.menu){
+		menu = $(opts.menu).addClass('b-menu');
+		p = opts.curr;		
+		//setup page selctor
+		if(opts.pageSelector){
+			//add selector
+			dd = $('<div class="b-selector b-selector-page"><span class="b-current">'+ (p+1) +' - '+ (p+2) +'</span></div>').appendTo(menu);
+			ddUL = $('<ul></ul>').appendTo(dd).empty().css('height','auto');
+
+			//loop through all pages
+			for(i=0; i < opts.pTotal; i+=2){
+				j = i;
+				//nums for normal view
+				nums = (j+1) +'-'+ (j+2);
+				if(opts.closed){
+					//nums for closed book
+					j--;
+					if(i==0){nums='1'}
+					else if(i==opts.pTotal-2){nums=opts.pTotal-2}
+					else {nums = (j+1) +'-'+ (j+2);}
+					//nums for closed book with covers
+					if(opts.covers){
+						j--;
+						if(i==0){nums=''}
+						else if(i==opts.pTotal-2){nums=''}
+						else {nums = (j+1) +'-'+ (j+2);}
+					}
+				}
+				//nums for RTL direction
+				if(opts.direction == 'RTL'){
+					nums = (Math.abs(j - opts.pTotal)-1) +' - '+ ((Math.abs(j - opts.pTotal)));
+					if(opts.closed){
+						if(i==opts.pTotal-2){nums='1'}
+						else if(i==0){nums=opts.pTotal-2}
+						else{nums = (Math.abs(j - opts.pTotal)-3) +' - '+ ((Math.abs(j - opts.pTotal)-2));}
+						
+						if(opts.covers){
+							if(i==opts.pTotal-2){nums=''}
+							else if(i==0){nums=''}
+							else{nums = (Math.abs(j - opts.pTotal)-5) +' - '+ ((Math.abs(j - opts.pTotal)-4));}
+						}
+					}
+					dd.find('.b-current').text(nums);
+					ddLI = $('<li><a href="#/page/'+ (i+1) +'" id="selector-page-'+i+'"><span class="b-text">'+ titles[i+1] +'</span><span class="b-num">'+ nums +'</span></a></li>').prependTo(ddUL);
+				}else{
+					if(i==0){dd.find('.b-current').text(nums);}
+					ddLI = $('<li><a href="#/page/'+ (i+1) +'" id="selector-page-'+i+'"><span class="b-text">'+ titles[i] +'</span><span class="b-num">'+ nums +'</span></a></li>').appendTo(ddUL);
+				}
+				
+				ddA = ddLI.find('a');
+				if(!opts.hash){
+					ddA.click(function(){
+						if(opts.direction == 'RTL'){dd.find('.b-current').text($(this).find('.b-num').text());}
+						ddT = parseInt($(this).attr('id').replace('selector-page-',''));
+						self.gotoPage(ddT);
+						return false;
+					});
+				}
+			}
+			
+			//set height
+			ddH = ddUL.height();
+			ddUL.css({'height':0, 'padding-bottom':0});
+			
+			//add hover effects
+			dd.unbind('hover').hover(function(){
+				ddUL.stop().animate({height:ddH, paddingBottom:10}, 500);
+			},function(){
+				ddUL.stop().animate({height:0, paddingBottom:0}, 500);
+			});
+		}
+		
+		//setup chapter selctor
+		if(opts.chapterSelector){
+			
+			chapter = chapters[opts.curr];
+			if(chapter == ""){ chapter = chapters[opts.curr+1]; }
+			
+			ddC = $('<div class="b-selector b-selector-chapter"><span class="b-current">'+chapter+'</span></div>').appendTo(menu);
+			ddCUL = $('<ul></ul>').appendTo(ddC).empty().css('height','auto');
+
+			for(i=0; i < opts.pTotal; i+=1){
+				if(chapters[i] != "" && typeof chapters[i] != "undefined"){
+					if(opts.direction == 'RTL'){
+						j = i;
+						if(j % 2 != 0){j--;}
+						ddC.find('.b-current').text(chapters[i]);
+						ddCLI = $('<li><a href="#/page/'+ (j+1) +'" id="selector-page-'+(j)+'"><span class="b-text">'+ chapters[i] +'</span></a></li>').prependTo(ddCUL);
+					}else{
+						ddCLI = $('<li><a href="#/page/'+ (i+1) +'" id="selector-page-'+i+'"><span class="b-text">'+ chapters[i] +'</span></a></li>').appendTo(ddCUL);
+					}
+					ddCA = ddCLI.find('a');
+					if(!opts.hash){
+						ddCA.click(function(){
+							if(opts.direction == 'RTL'){ddC.find('.b-current').text($(this).find('.b-text').text());}
+							ddCT = parseInt($(this).attr('id').replace('selector-page-',''));
+							self.gotoPage(ddCT);
+							return false;
+						});
+					}
+				}
+			}
+			
+			ddCH = ddCUL.height();
+			ddCUL.css({'height':0, 'padding-bottom':0});
+			
+			ddC.unbind('hover').hover(function(){
+				ddCUL.stop().animate({height:ddCH, paddingBottom:10}, 500);
+			},function(){
+				ddCUL.stop().animate({height:0, paddingBottom:0}, 500);
+			});
+		}
+	}	
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// API METHODS
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	$.extend(self,
+	{
+		next : function(){
+			if(!busy){
+				self.gotoPage(opts.curr+2);
+			}
+		},
+		prev : function(){
+			if(!busy){
+				self.gotoPage(opts.curr-2);
+			}
+		},
+		gotoPage : function(num){
+			//moving forward (increasing number)
+			if(num > opts.curr && num < opts.pTotal && num >= 0 && !busy){
+				busy = true;
+				diff = num - opts.curr;
+				opts.curr = num;
+				opts.before.call(self, opts);
+				updatePager();
+				updateCtrls();
+				updateHash(opts.curr+1, opts);
+				initAnim(diff, true, sF);
+				
+				//hide p2 as p3 moves across it
+				if(opts.closed && opts.autoCenter && num-diff == 0){
+					p2.stop().animate({width:0, left:opts.pWidth}, opts.speed, opts.easing);
+					p4.stop().animate({left:opts.pWidth}, opts.speed, opts.easing);
+				}else{
+					p2.stop().animate({width:0}, opts.speedH, opts.easeIn);
+				}
+				
+				//animate p3 from right to left (left: movement, width: reveal slide, paddingLeft: shadow underneath)
+				//call setuppages at end of animation to reset pages
+				
+				//animation if dragging forward
+				if(p3drag){
+					p3.stop().animate({left:opts.pWidth/4, width:opts.pWidth*.75, paddingLeft: opts.shadowBtmWidth}, opts.speedH, opts.easeIn)
+					         .animate({left:0, width:opts.pWidth, paddingLeft:0}, opts.speedH);
+				}else{
+					p3.stop().animate({left:opts.pWidthH, width:opts.pWidthH, paddingLeft: opts.shadowBtmWidth}, opts.speedH, opts.easeIn)
+					         .animate({left:0, width:opts.pWidth, paddingLeft:0}, opts.speedH);			
+				}
+				p3wrap.animate({left:opts.shadowBtmWidth}, opts.speedH, opts.easeIn)
+					  .animate({left:0}, opts.speedH, opts.easeOut, function(){updateAfter()});				
+			
+			//moving backward (decreasing number)
+			}else if(num < opts.curr && num < opts.pTotal && num >= 0 && !busy){
+				busy = true;
+				diff = opts.curr - num;
+				opts.curr = num;
+				opts.before.call(self, opts);
+				updatePager();
+				updateCtrls();
+				updateHash(opts.curr+1, opts);
+				initAnim(diff, false, sB);
+				
+				//animation if dragging backwards
+				if(p0drag){
+					//hide p1 as p0 moves across it
+					p1.animate({left:opts.pWidth, width:0}, opts.speed, opts.easing);
+					p1wrap.animate({left:opts.pWidthN}, opts.speed, opts.easing);
+					
+					//animate p0 from left to right (right: movement, width: reveal slide, paddingLeft: shadow underneath)
+					if(opts.closed && opts.autoCenter && opts.curr == 0){
+						p0.animate({left:opts.pWidthH, width:opts.pWidthH}, opts.speedH, opts.easeIn)
+						  .animate({left:0, width:opts.pWidth}, opts.speedH, opts.easeOut);
+						p2.stop().animate({left:0}, opts.speed, opts.easing);
+					}else{
+						p0.animate({left:opts.pWidth, width:opts.pWidth}, opts.speed, opts.easing);
+					}
+					//animate .wrapper content with p0 to keep content right aligned throughout
+					//call setuppages at end of animation to reset pages
+					p0wrap.animate({right:0}, opts.speed, opts.easing, function(){updateAfter()});						
+				}else{
+					//hide p1 as p0 moves across it
+					p1.animate({left:opts.pWidth, width:0}, opts.speed, opts.easing);
+					p1wrap.animate({left:opts.pWidthN}, opts.speed, opts.easing);
+					
+					//animate p0 from left to right (right: movement, width: reveal slide, paddingLeft: shadow underneath)
+					if(opts.closed && opts.autoCenter && opts.curr == 0){
+						p0.animate({left:opts.pWidthH, width:opts.pWidthH}, opts.speedH, opts.easeIn)
+						  .animate({left:0, width:opts.pWidth}, opts.speedH, opts.easeOut);
+						p2.stop().animate({left:0}, opts.speed, opts.easing);
+					}else{
+						p0.animate({left:opts.pWidthH, width:opts.pWidthH}, opts.speedH, opts.easeIn)
+						  .animate({left:opts.pWidth, width:opts.pWidth}, opts.speedH, opts.easeOut);
+					}
+					//animate .wrapper content with p0 to keep content right aligned throughout
+					//call setuppages at end of animation to reset pages
+					p0wrap.animate({right:opts.shadowBtmWidth}, opts.speedH,opts. easeIn)
+						  .animate({right:0}, opts.speedH, opts.easeOut, function(){updateAfter()});					
+				}
+			}
+		}
+	});
+	
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
+// SETUP CONTROLS
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+	
+	if(opts.manual && $.ui){
+		opts.overlays = false;
+	}
+	
+	//add prev next user defined controls
+	if(opts.next){
+		next = $(opts.next);	
+		next.click(function(e){e.preventDefault(); self.next();});
+	}
+	if(opts.prev){
+		prev = $(opts.prev);	
+		prev.click(function(e){e.preventDefault(); self.prev();});
+	}
+	
+	//add overlays
+	if(opts.overlays){
+		overlayP = $('<div class="b-overlay b-overlay-prev b-prev" title="Previous Page"></div>').appendTo(b);
+		overlayN = $('<div class="b-overlay b-overlay-next b-next" title="Next Page"></div>').appendTo(b);
+		overlaysB = b.find('.b-overlay');
+	
+		if ($.browser.msie) {
+			overlaysB.css({'background':'#fff','filter':'progid:DXImageTransform.Microsoft.Alpha(opacity=0) !important'});
+		}
+	}
+	
+	//add tabs
+	if(opts.tabs){
+		tabP = $('<div class="b-tab b-tab-prev b-prev" title="Previous Page">Previous</div>').appendTo(b);
+		tabN = $('<div class="b-tab b-tab-next b-next" title="Next Page">Next</div>').appendTo(b);
+		tabs = b.find('.b-tab');
+		
+		if(opts.tabWidth){
+			tabs.width(opts.tabWidth);
+		}
+		if(opts.tabHeight){
+			tabs.height(opts.tabHeight);
+		}		
+		
+		tabs.css({'top': '-'+tabN.outerHeight()+'px'});
+		b.css({'marginTop': tabN.outerHeight()});
+		
+		//update ctrls for RTL direction
+		if(opts.direction == 'RTL'){
+			tabN.html('Previous').attr('title','Previous Page');
+			tabP.html('Next').attr('title','Next Page');
+		}
+	}else{
+		b.css({'marginTop': 0});
+	}
+	
+	//add arrows
+	if(opts.arrows){
+		arrowP = $('<div class="b-arrow b-arrow-prev b-prev" title="Previous Page"><div>Previous</div></div>').appendTo(b);
+		arrowN = $('<div class="b-arrow b-arrow-next b-next" title="Next Page"><div>Next</div></div>').appendTo(b);
+		arrows = b.find('.b-arrow');
+		
+		//update ctrls for RTL direction
+		if(opts.direction == 'RTL'){
+			arrowN.html('<div>Previous</div>').attr('title','Previous Page');
+			arrowP.html('<div>Next</div>').attr('title','Next Page');
+		}
+	}
+	
+	//save all "b-prev" and "b-next" controls
+	ctrlsN = b.find('.b-next');
+	ctrlsP = b.find('.b-prev');
+	
+	//add click actions
+	ctrlsN.click(function(e){e.preventDefault(); self.next();});
+	ctrlsP.click(function(e){e.preventDefault(); self.prev();});
+	
+	//add page hover animations
+	if(opts.overlays && opts.hovers){
+		//hovers to start draggable forward
+		ctrlsN.unbind("mouseover mouseout").bind("mouseover",function(){
+			hoverAnimStart(true);
+		})
+		.bind("mouseout",function(){
+			hoverAnimEnd(true);
+		});
+		
+		//hovers to start draggable backwards
+		ctrlsP.unbind("mouseover mouseout").bind("mouseover",function(){
+			hoverAnimStart(false);
+		})
+		.bind("mouseout",function(){
+			hoverAnimEnd(false);
+		});
+	}
+			
+	//arrow animations	
+	if(opts.arrows){
+		if(opts.arrowsHide){
+			if($.support.opacity){
+				ctrlsN.hover(
+					function(){arrowN.find('div').stop().fadeTo('fast', 1);},
+					function(){arrowN.find('div').stop().fadeTo('fast', 0);					
+				});
+				ctrlsP.hover(
+					function(){arrowP.find('div').stop().fadeTo('fast', 1);},
+					function(){arrowP.find('div').stop().fadeTo('fast', 0);					
+				});
+			}else{
+				ctrlsN.hover(
+					function(){arrowN.find('div').show();},
+					function(){arrowN.find('div').hide();					
+				});
+				ctrlsP.hover(
+					function(){arrowP.find('div').show();},
+					function(){arrowP.find('div').hide();					
+				});
+			}
+		}else{
+			arrowN.find('div').show();
+			arrowP.find('div').show();
+		}
+	}
+
+	//keyboard ctrls
+	if(opts.keyboard){
+		//keyboard ctrls
+		$(document).keyup(function(event){
+			if(event.keyCode == 37){self.prev();}
+			else if(event.keyCode == 39){self.next();}
+		});
+	}
+		
+	//hash ctrls
+	if(opts.hash){
+		setupHash();
+		clearInterval(h);
+		h = setInterval(function(){pollHash()}, 250);
+	}
+	
+	//percentage resizing
+	if(opts.wPercent || opts.hPercent){
+		$(window).resize(function() {
+			resetSize();
+		});
+	}
+	
+	//auto flip book controls
+	if(opts.auto && opts.delay){
+		clearTimeout(a);
+		a = setTimeout(function(){self.next();},opts.delay);
+		playing = true;
+		
+		if(opts.pause){
+			pause = $(opts.pause);	
+			pause.click(function(e){
+				e.preventDefault(); 
+				if(playing){
+					clearTimeout(a);
+					playing = false;
+				}
+			});
+		}
+		if(opts.play){
+			play = $(opts.play);	
+			play.click(function(e){
+				e.preventDefault(); 
+				if(!playing){
+					clearTimeout(a);
+					a = setTimeout(function(){self.next();},opts.delay);
+					playing = true;
+				}
+			});
+		}
+	}
+	
+	//first time setup
+	resetPages();
+	updateCtrls();
+	updatePager();
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
+//General Functions	
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	function initPages(){		
+		//fix for odd number of pages
+		if((src.children().length % 2) != 0){
+			//if book is closed and using covers, add page before back cover, else after last page
+			if(opts.closed && opts.covers){
+				src.children().last().before(blank);
+			}else{
+				src.children().last().after(blank);
+			}
+		}
+		
+		//if closed book, add empty pages to start and end
+		if(opts.closed){
+			$(empty).attr({'title':opts.closedFrontTitle || "Beginning", 'rel':opts.closedFrontChapter || "Beginning of Book"}).prependTo(src);
+			src.children().last().attr({'title':opts.closedBackTitle || "End", 'rel':opts.closedBackChapter || "End of Book"});		
+			src.append(empty);		
+		}
+
+		if(opts.direction == 'LTR'){
+			j = 0;
+		}else{
+			j = src.children().length;
+			if(opts.closed){j-=2;}
+			if(opts.covers){j-=2;}
+			$(src.children().get().reverse()).each(function(){			
+				$(this).appendTo(src);
+			});
+		}
+			
+		//save titles and chapters
+		src.children().each(function(i){
+			//save chapter title
+			if($(this).attr('rel')){
+				chapters[i] = $(this).attr('rel');
+			}else{
+				chapters[i] = "";
+			}
+			//save page title
+			titles[i] = $(this).attr('title');
+			
+			//give content the correct wrapper and page wrapper
+			if($(this).hasClass('b-page-empty')){
+				$(this).wrap('<div class="b-page"><div class="b-wrap"></div></div>');
+			}else if(opts.closed && opts.covers && (i == 1 || i == src.children().length-2)){
+				$(this).wrap('<div class="b-page"><div class="b-wrap b-page-cover"></div></div>');
+			}else if(i % 2 != 0){
+				$(this).wrap('<div class="b-page"><div class="b-wrap b-wrap-right"></div></div>');
+			}else{
+
+				$(this).wrap('<div class="b-page"><div class="b-wrap b-wrap-left"></div></div>');
+			}
+			
+			$(this).parents('.b-page').addClass('b-page-'+i).data('page',i);
+			
+			//add page numbers
+			if(opts.pageNumbers && !$(this).hasClass('b-page-empty') && (!opts.closed || (opts.closed && !opts.covers) || (opts.closed && opts.covers && i != 1 && i != src.children().length-2))){
+				if(opts.direction == 'LTR'){j++;}
+				$(this).parent().append('<div class="b-counter">'+(j)+'</div>');
+				if(opts.direction == 'RTL'){j--;}
+			}
+		});
+	}
+
+	function resetSize(){
+		//recalculate size for percentage values
+		if(opts.wPercent){
+			opts.width  = (opts.wOrig.replace('%','')/100) * parseFloat(b.parent().css('width'));
+			b.width(opts.width);
+			opts.pWidth  = opts.width/2;
+			opts.pWidthN = '-'+(opts.pWidth)+'px';
+			opts.pWidthH = opts.pWidth/2;
+		}
+		if(opts.hPercent){
+			opts.height  = (opts.hOrig.replace('%','')/100) * parseFloat(b.parent().css('height'));
+			b.height(opts.height);
+			opts.pHeight = opts.height;
+		}
+		resetCSS();
+	}
+	
+	function resetCSS(){
+		//update css
+		b.find('.b-shadow-f, .b-shadow-b, .b-p0, .b-p3').css({'filter':'','zoom':''});
+		if(opts.manual && $.ui){
+			b.find('.b-page').draggable('destroy').removeClass('b-grab b-grabbing');		
+		}
+		wraps.attr('style','');
+		wraps.css({'left':0,'width':opts.pWidth-(opts.pagePadding*2), 'height':opts.pHeight-(opts.pagePadding*2), 'padding': opts.pagePadding});
+		p0wrap.css({'right':0,'left':'auto'});
+		p1.css({'left':0,'width':opts.pWidth, 'height':opts.pHeight});			
+		p2.css({'left':opts.pWidth, 'width':opts.pWidth, 'opacity':1, 'height':opts.pHeight});
+		pN.css({'left':0, 'width':opts.pWidth, 'height':opts.pHeight});
+		p0.css({'left':0, 'width':0, 'height':opts.pHeight});
+		p3.stop().css({'left':opts.pWidth*2, 'width':0, 'height':opts.pHeight, paddingLeft:0});
+		p4.css({'left':opts.pWidth, 'width':opts.pWidth, 'height':opts.pHeight});
+		
+		if(opts.closed && opts.autoCenter && opts.curr == 0){
+			pN.css({'left':0});
+			p1.css({'left':opts.pWidthN});
+			p2.css({'left':0});
+			p3.css({'left':opts.pWidth});
+			p4.css({'left':0});
+		}
+		
+		if(opts.closed && opts.autoCenter && (opts.curr == 0 || opts.curr >= opts.pTotal-2)){
+			if(opts.overlays){overlaysB.width('100%');}
+			b.width(opts.pWidth);
+		}else{
+			if(opts.overlays){overlaysB.width('50%');}
+			b.width(opts.width);
+		}
+		
+	}
+	
+	function resetPages(){	
+		//reset page order
+		if(init){
+			if(p1.data('page')-1 < 0){
+				src.prepend(p2.detach());
+				src.prepend(p1.detach());
+			}else{
+				b.find('.b-page-'+(p1.data('page')-1)).after(p1.detach());
+				b.find('.b-page-'+(p2.data('page')-1)).after(p2.detach());
+			}
+			if(p3.data('page')-1 <= opts.pTotal){
+				b.find('.b-page-'+(p3.data('page')-1)).after(p3.detach());
+				b.find('.b-page-'+(p4.data('page')-1)).after(p4.detach());	
+			}
+			if(pN.data('page')-1 >= 0){
+				b.find('.b-page-'+(pN.data('page')-1)).after(pN.detach());
+				b.find('.b-page-'+(p0.data('page')-1)).after(p0.detach());
+			}else{
+				src.prepend(pN.detach());
+				pN.after(p0.detach());
+			}
+		}
+		//reset all content
+		b.find('.b-page').removeClass('b-pN b-p0 b-p1 b-p2 b-p3 b-p4').hide();
+		
+		//add page classes
+		if(opts.curr-2 >= 0){
+			b.find('.b-page-'+(opts.curr-2)).addClass('b-pN').show();
+			b.find('.b-page-'+(opts.curr-1)).addClass('b-p0').show();
+		}
+		b.find('.b-page-'+(opts.curr)).addClass('b-p1').show();
+		b.find('.b-page-'+(opts.curr+1)).addClass('b-p2').show();
+		if(opts.curr+3 <= opts.pTotal){
+			b.find('.b-page-'+(opts.curr+2)).addClass('b-p3').show();
+			b.find('.b-page-'+(opts.curr+3)).addClass('b-p4').show();
+		}
+	
+		//save structure elems to vars
+		pN     = b.find('.b-pN');
+		p0     = b.find('.b-p0');
+		p1     = b.find('.b-p1');
+		p2     = b.find('.b-p2');
+		p3     = b.find('.b-p3');
+		p4     = b.find('.b-p4');
+		pNwrap = b.find('.b-pN .b-wrap');
+		p0wrap = b.find('.b-p0 .b-wrap');
+		p1wrap = b.find('.b-p1 .b-wrap');
+		p2wrap = b.find('.b-p2 .b-wrap');
+		p3wrap = b.find('.b-p3 .b-wrap');
+		p4wrap = b.find('.b-p4 .b-wrap');
+		wraps  = b.find('.b-wrap');
+		
+		resetCSS();
+				
+		//update page order for animations
+		if(opts.curr+3 <= opts.pTotal){
+			p3.after(p0.detach());
+			p1.after(p4.detach());
+		}else{
+			p0.detach().appendTo(src);
+		}
+		init = true;
+		
+		if(opts.shadows){
+			b.find('.b-shadow-f, .b-shadow-b').remove();		
+			sF = $('<div class="b-shadow-f"></div>').css({'right':0,'width':opts.pWidth, 'height':opts.pHeight}).appendTo(p3);
+			sB = $('<div class="b-shadow-b"></div>').appendTo(p0).css({'left':0,'width':opts.pWidth, 'height':opts.pHeight});		
+		}
+		
+		//reset vars
+		rhover = lhover = p3drag = p0drag = false;
+		
+		//manual page turning, check if jQuery UI is loaded
+		if(opts.manual && $.ui){
+			
+			//implement draggable forward
+			p3.draggable({
+				axis: "x",
+				containment: [p2.offset().left-opts.pWidthH,0,p2.offset().left+opts.pWidth-50,opts.pHeight],
+				drag: function(event, ui) {
+					p3drag = true;
+					temp = ui.originalPosition.left - ui.position.left;
+					p3.removeClass('b-grab').addClass('b-grabbing');
+					p3.width(40+(temp/2));
+					p3wrap.css({'left':10+(temp/8)});
+					p2.width(opts.pWidth-p3.width()+10);
+					if(opts.shadows){
+						sF.css({'right':'-'+(20+temp/4)+'px'});
+						if($.support.opacity){
+							sF.css({'opacity':0.5*(temp/opts.pWidthH)});
+						}else{
+							sF.css({'right':'auto','left':0.1*p3.width()});
+						}
+					}
+				},
+				stop: function(event, ui) {
+					hoverAnimEnd(false);
+					var temp = ui.originalPosition.left - ui.position.left;
+					if(temp>opts.pWidthH/4){
+						if(opts.shadows && !$.support.opacity){
+							sF.css({'left':'auto'});
+						}
+						self.next();
+						p3.removeClass('b-grab b-grabbing');
+					}else{
+						p3drag = false;
+						p3.removeClass('b-grabbing').addClass('b-grab');
+					}
+				}
+			});
+			
+			//implement draggable backwards
+			p0.draggable({
+				axis: "x",
+				containment: [p1.offset().left+10,0,p1.offset().left+opts.pWidth*.75,opts.pHeight],				
+				drag: function(event, ui) {
+					p0drag = true;
+					temp = ui.position.left - ui.originalPosition.left;
+					p0.removeClass('b-grab').addClass('b-grabbing');
+					p0.css({left:40+(temp)/1.5, width:40+(temp)});
+					p0wrap.css({right:10+temp/4});	
+					p1.css({left:ui.position.left+20, width:opts.pWidth-ui.position.left-10});			
+					p1wrap.css({left:-1*(temp+30)});	
+					if(opts.shadows){
+						if($.support.opacity){
+							sB.css({'opacity':0.5*(temp/opts.pWidthH)});
+						}else{
+							sB.css({'left':-0.38*opts.pWidth});
+						}
+					}
+				},
+				stop: function(event, ui) {
+					hoverAnimEnd(true);
+					temp = ui.position.left - ui.originalPosition.left;
+					if(temp>opts.pWidthH/4){
+						self.prev();
+						p0.removeClass('b-grab b-grabbing');
+					}else{
+						p0drag = false;
+						p0.removeClass('b-grabbing').addClass('b-grab');
+					}
+				}
+			});
+			
+			//mousetracking for page movement
+			$(b).unbind('mousemove mouseout').bind('mousemove',function(e){
+				relativeX = e.pageX - b.offset().left;
+				if(relativeX < 50){
+					hoverAnimStart(false);
+				}else if(relativeX > opts.pWidth-50 && opts.curr == 0 && opts.autoCenter && opts.closed){
+					hoverAnimStart(true);
+				}else if(relativeX > 50 && relativeX < opts.width-50){
+					hoverAnimEnd(false);
+					hoverAnimEnd(true);
+				}else if(relativeX > opts.width-50){
+					hoverAnimStart(true);
+				}
+			}).bind('mouseout',function(){
+				hoverAnimEnd(false);
+				hoverAnimEnd(true);
+			});
+			
+		}
+	}
+	
+	function hoverAnimStart(inc){
+		if(inc){
+			if(!busy && !rhover &&!lhover && !p3drag && opts.curr+2 <= opts.pTotal-2){
+				//animate
+				p2.stop().animate({'width':opts.pWidth-40}, 500, opts.easing);
+				p3.addClass('b-grab');
+				if(opts.closed && opts.autoCenter && opts.curr == 0){
+					p3.stop().animate({'left':opts.pWidth-50, 'width':40}, 500, opts.easing);
+				}else{
+					p3.stop().animate({'left':opts.width-50, 'width':40}, 500, opts.easing);
+				}
+				p3wrap.stop().animate({'left':10}, 500, opts.easing);
+				if(opts.shadows && !$.support.opacity){
+					sF.css({'right':'auto','left':'-40%'});
+				}
+				rhover = true;
+			}
+		}else{
+			if(!busy && !lhover && !rhover && !p0drag && opts.curr-2 >= 0){
+				//animate
+				p1.stop().animate({left:10, width:opts.pWidth-10}, 400, opts.easing);
+				p0.addClass('b-grab');
+				p1wrap.stop().animate({left:"-10px"}, 400, opts.easing);
+				p0.stop().animate({left:10, width:40}, 400, opts.easing);
+				p0wrap.stop().animate({right:10}, 400, opts.easing);
+				if(opts.shadows && !$.support.opacity){
+					sB.css({'left':-0.38*opts.pWidth});
+				}
+				lhover = true;
+			}
+		}
+	}
+
+	function hoverAnimEnd(inc){
+		if(inc){
+			if(!busy && rhover && !p3drag && opts.curr+2 <= opts.pTotal-2){
+				p2.stop().animate({'width':opts.pWidth}, 500, opts.easing);
+				if(opts.closed && opts.autoCenter && opts.curr == 0){
+					p3.stop().animate({'left':opts.pWidth, 'width':0}, 500, opts.easing);				
+				}else{
+					p3.stop().animate({'left':opts.width, 'width':0}, 500, opts.easing);	
+				}
+				p3wrap.stop().animate({'left':0}, 500, opts.easing);
+				if(opts.shadows && !$.support.opacity){
+					sF.css({'left':'auto'});
+				}
+				rhover = false;
+			}
+		}else{
+			if(!busy && lhover && !p0drag && opts.curr-2 >= 0){
+				p1.stop().animate({left:0, width:opts.pWidth}, 400, opts.easing);
+				p1wrap.stop().animate({left:0}, 400, opts.easing);
+				p0.stop().animate({left:0, width:0}, 400, opts.easing);
+				p0wrap.stop().animate({right:0}, 400, opts.easing);
+				lhover = false;
+			}
+		}
+	}
+
+	function initAnim(diff, inc, shadow){			
+		
+		//setup content
+		if(inc && diff > 2){
+			b.find('.b-page-'+(p3.data('page')-1)).after(p3.detach());	
+			b.find('.b-page-'+(p4.data('page')-1)).after(p4.detach());	
+			
+			b.find('.b-p3, .b-p4').removeClass('b-p3 b-p4').hide();
+			b.find('.b-page-'+opts.curr).addClass('b-p3').show().stop().css({'left':opts.pWidth*2, 'width':0, 'height':opts.pHeight, paddingLeft:0});
+			b.find('.b-page-'+(opts.curr+1)).addClass('b-p4').show().css({'left':opts.pWidth, 'width':opts.pWidth, 'height':opts.pHeight});
+			b.find('.b-page-'+opts.curr+' .b-wrap').show().css({'width':opts.pWidth-(opts.pagePadding*2), 'height':opts.pHeight-(opts.pagePadding*2), 'padding': opts.pagePadding});
+			b.find('.b-page-'+(opts.curr+1)+' .b-wrap').show().css({'width':opts.pWidth-(opts.pagePadding*2), 'height':opts.pHeight-(opts.pagePadding*2), 'padding': opts.pagePadding});
+			
+			p3     = b.find('.b-p3');
+			p4     = b.find('.b-p4');
+			p3wrap = b.find('.b-p3 .b-wrap');
+			p4wrap = b.find('.b-p4 .b-wrap');
+			
+			if(rhover){
+				p3.css({'left':opts.width-40, 'width':20, 'padding-left': 10});
+			}
+			
+			p1.after(p4.detach());
+			p2.after(p3.detach());
+			
+			if (opts.shadows) {
+				b.find('.b-shadow-f').remove();
+				sF = $('<div class="b-shadow-f"></div>').css({
+					'right': 0,
+					'width': opts.pWidth,
+					'height': opts.pHeight
+				}).appendTo(p3);
+				shadow = sF;
+			}	
+			
+		}else if(!inc && diff > 2){
+			
+			b.find('.b-page-'+(pN.data('page')-1)).after(pN.detach());
+			b.find('.b-page-'+(p0.data('page')-1)).after(p0.detach());
+			
+			b.find('.b-pN, .b-p0').removeClass('b-pN b-p0').hide();
+			b.find('.b-page-'+opts.curr).addClass('b-pN').show().css({'left':0, 'width':opts.pWidth, 'height':opts.pHeight});
+			b.find('.b-page-'+(opts.curr+1)).addClass('b-p0').show().css({'left':0, 'width':0, 'height':opts.pHeight});
+			b.find('.b-page-'+opts.curr+' .b-wrap').show().css({'width':opts.pWidth-(opts.pagePadding*2), 'height':opts.pHeight-(opts.pagePadding*2), 'padding': opts.pagePadding});
+			b.find('.b-page-'+(opts.curr+1)+' .b-wrap').show().css({'width':opts.pWidth-(opts.pagePadding*2), 'height':opts.pHeight-(opts.pagePadding*2), 'padding': opts.pagePadding});
+			
+			pN     = b.find('.b-pN');
+			p0     = b.find('.b-p0');
+			pNwrap = b.find('.b-pN .b-wrap');
+			p0wrap = b.find('.b-p0 .b-wrap');
+						
+			if(lhover){
+				p0.css({left:10, width:40});
+				p0wrap.css({right:10});
+			}
+			
+			p0.detach().appendTo(src);
+			
+			if (opts.shadows) {
+				b.find('.b-shadow-b, .b-shadow-f').remove();
+				sB = $('<div class="b-shadow-b"></div>').appendTo(p0).css({
+					'left': 0,
+					'width': opts.pWidth,
+					'height': opts.pHeight
+				});
+				shadow = sB;
+			}
+		}
+		
+		//update page visibility
+		//if moving to start and end of book
+		if(opts.closed){
+			if(!inc && opts.curr == 0){
+				pN.hide();
+			}else if(!inc){
+				pN.show();
+			}
+			if(inc && opts.curr >= opts.pTotal-2){
+				p4.hide();
+			}else if(inc){
+				p4.show();
+			}
+		}
+		
+		//init shadows
+		if(opts.shadows){
+			//check for opacity support -> animate shadow overlay on moving slide
+			if($.support.opacity){
+				shadow.animate({opacity:1}, opts.speedH, opts.easeIn)
+					  .animate({opacity:0}, opts.speedH, opts.easeOut);
+			}else{
+				if(inc){
+					shadow.animate({right:opts.shadowTopFwdWidth}, opts.speed, opts.easeIn);
+				}else{
+					shadow.animate({left:opts.shadowTopBackWidth}, opts.speed, opts.easeIn);
+				}
+			}
+		}
+		
+		//init position anim
+		if(opts.closed && opts.autoCenter){
+			if(opts.curr == 0){
+				p3.hide();
+				p4.hide();
+				b.animate({width:opts.pWidth}, opts.speed, opts.easing);
+			}else if(opts.curr >= opts.pTotal-2){
+				p0.hide();
+				pN.hide();
+				b.animate({width:opts.pWidth}, opts.speed, opts.easing);
+			}else{
+				b.animate({width:opts.width}, opts.speed, opts.easing);
+			}
+		}
+	}
+	
+	function updateAfter(){
+		resetPages();
+		updatePager();
+		updateCtrls();
+		opts.after.call(self, opts);
+		busy = false;
+		
+		//update auto play timer
+		if(opts.auto && opts.delay){
+			if(playing && opts.curr < opts.pTotal-2){
+				clearTimeout(a);
+				a = setTimeout(function(){self.next();},opts.delay);
+				console.log("continue...");
+			}
+			if(opts.curr >= opts.pTotal-2){
+				playing = false;
+			}
+		}
+	}
+	
+	function updateCtrls(){
+		//update ctrls, cursors and visibility
+		if(opts.overlays || opts.tabs || opts.arrows){
+			if($.support.opacity){
+				if(opts.curr < opts.pTotal-2){
+					ctrlsN.fadeIn('fast').css('cursor',opts.cursor);
+				}else{
+					ctrlsN.fadeOut('fast').css('cursor','default'); 
+				}
+				if(opts.curr >= 2 && opts.curr != 0){           
+					ctrlsP.fadeIn('fast').css('cursor',opts.cursor);
+				}else{
+					ctrlsP.fadeOut('fast').css('cursor','default'); 
+				}
+			}else{
+				if(opts.curr < opts.pTotal-2){
+					ctrlsN.show().css('cursor',opts.cursor);
+				}else{
+					ctrlsN.hide().css('cursor','default'); 
+				}
+				if(opts.curr >= 2 && opts.curr != 0){           
+					ctrlsP.show().css('cursor',opts.cursor);
+				}else{
+					ctrlsP.hide().css('cursor','default'); 
+				}
+			}
+		}
+	}
+	
+	function updatePager(){
+		if(opts.pageSelector){
+			if(opts.direction == 'RTL'){
+				nums = (Math.abs(opts.curr - opts.pTotal)-1) +' - '+ ((Math.abs(opts.curr - opts.pTotal)));
+				if(opts.closed){
+					if(opts.curr==opts.pTotal-2){nums='1'}
+					else if(opts.curr==0){nums=opts.pTotal-2}
+					else{nums = (Math.abs(opts.curr - opts.pTotal)-2) +' - '+ ((Math.abs(opts.curr - opts.pTotal)-1));}
+					
+					if(opts.covers){
+						if(opts.curr==opts.pTotal-2){nums=''}
+						else if(opts.curr==0){nums=''}
+						else{nums = (Math.abs(opts.curr - opts.pTotal)-3) +' - '+ ((Math.abs(opts.curr - opts.pTotal)-2));}
+					}
+				}
+				$(opts.menu+' .b-selector-page .b-current').text(nums);
+			}else{
+				nums = (opts.curr+1) +' - '+ (opts.curr+2);
+				if(opts.closed){
+					if(opts.curr==0){nums='1'}
+					else if(opts.curr==opts.pTotal-2){nums=opts.pTotal-2}
+					else {nums = (opts.curr) +'-'+ (opts.curr+1);}
+					
+					if(opts.covers){
+						if(opts.curr==0){nums=''}
+						else if(opts.curr==opts.pTotal-2){nums=''}
+						else {nums = (opts.curr-1) +'-'+ (opts.curr);}
+					}
+				}
+				$(opts.menu+' .b-selector-page .b-current').text(nums);
+			}
+		}
+		if(opts.chapterSelector){
+			if(chapters[opts.curr]!=""){
+				$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr]);
+			}else if(chapters[opts.curr+1]!=""){
+				$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr+1]);
+			}
+			
+			if(opts.direction == 'RTL' && chapters[opts.curr+1]!=""){
+				$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr+1]);
+			}else if(chapters[opts.curr]!=""){
+				$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr]);
+			}
+		}
+	}
+		
+	function setupHash(){
+		hash = getHashNum();
+		
+		if(!isNaN(hash) && hash <= opts.pTotal-1 && hash >= 0 && hash != ''){
+			if((hash % 2) != 0){
+				hash--;
+			}
+			opts.curr = hash;
+		}else{
+			updateHash(opts.curr+1, opts);
+		}
+		
+		self.hash = hash;
+	}
+	
+	function pollHash(){
+		hash = getHashNum();
+		//check page num
+		if(!isNaN(hash) && hash <= opts.pTotal-1 && hash >= 0){
+			if(hash != opts.curr && hash.toString()!=self.hash){
+				if((hash % 2) != 0){hash--};
+				
+				document.title = opts.name + " - Page "+ (hash+1);
+				
+				if(!busy){
+					self.gotoPage(hash);
+					self.hash = hash;
+				}
+			}
+		}
+	}
+	
+	//get page number from hash tag, last element
+	function getHashNum(){
+		var hash = window.location.hash.split('/');
+		if(hash.length > 1){
+			return parseInt(hash[2])-1;
+		}else{
+			return '';
+		}
+	}
+	
+	//set the hash
+	function updateHash(hash, opts){
+		if(opts.hash){
+			window.location.hash = "/page/" + hash;
+		}
+	}
+	
+}
+
+//define empty array to hold API references
+$.fn.booklet.interfaces = [];
+
+//define default options
+$.fn.booklet.defaults = {
+	name:               null,                            // name of the booklet to display in the document title bar
+	width:              600,                             // container width
+	height:             400,                             // container height
+	speed:              1000,                            // speed of the transition between pages
+	direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
+	startingPage:       0,                               // index of the first page to be displayed
+	easing:             'easeInOutQuad',                 // easing method for complete transition
+	easeIn:             'easeInQuad',                    // easing method for first half of transition
+	easeOut:            'easeOutQuad',                   // easing method for second half of transition
+	
+	closed:             false,                           // start with the book "closed", will add empty pages to beginning and end of book
+	closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
+	closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
+	closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
+	closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
+	covers:             false,                           // used with "closed", makes first and last pages into covers, without page numbers (if enabled)
+	autoCenter:         false,                           // used with "closed", makes book position in center of container when closed
+
+	pagePadding:        10,                              // padding for each page wrapper
+	pageNumbers:        true,                            // display page numbers on each page
+	
+	manual:             true,                            // enables manual page turning, requires jQuery UI to function
+	
+	hovers:             true,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
+	overlays:           true,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
+	tabs:               false,                           // adds tabs along the top of the pages
+	tabWidth:           60,                              // set the width of the tabs
+	tabHeight:          20,                              // set the height of the tabs
+	arrows:             false,                           // adds arrows overlayed over the book edges
+	arrowsHide:         false,                           // auto hides arrows when controls are not hovered
+	cursor:             'pointer',                       // cursor css setting for side bar areas
+	
+	hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
+	keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
+	next:               null,                            // selector for element to use as click trigger for next page
+	prev:               null,                            // selector for element to use as click trigger for previous page
+	auto:               false,                           // enables automatic navigation, requires "delay"
+	delay:              5000,                            // amount of time between automatic page flipping
+	pause:              null,                            // selector for element to use as click trigger for pausing auto page flipping
+	play:               null,                            // selector for element to use as click trigger for restarting auto page flipping
+
+	menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
+	pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
+	chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
+
+	shadows:            true,                            // display shadows on page animations
+	shadowTopFwdWidth:  166,                             // shadow width for top forward anim
+	shadowTopBackWidth: 166,                             // shadow width for top back anim
+	shadowBtmWidth:     50,                              // shadow width for bottom shadow
+	
+	before:             function(){},                    // callback invoked before each page turn animation
+	after:              function(){}                     // callback invoked after each page turn animation
+}
+	
+})(jQuery);

presentation/index.html

@@ -0,0 +1,17 @@
+<html>
+<head>
+<title>JTalk - Presentation</title>
+<script src="../../js/amber.js" type="text/javascript"></script>
+</head>
+<body>
+
+<script type="text/javascript"> 
+	loadAmber({
+		files: ['Presentation.js'],
+		prefix: 'examples/presentation/js',
+		ready: function() {smalltalk.Browser._openOn_(smalltalk.FOSDEM2012Presentation)} 
+	}); 
+</script>
+
+</body>
+</html>

presentation/st/Presentation.st

@@ -0,0 +1,2487 @@
+Smalltalk current createPackage: 'Presentation' properties: #{}!
+Widget subclass: #Presentation
+	instanceVariableNames: 'currentSlide slides'
+	package: 'Presentation'!
+
+!Presentation methodsFor: 'accessing'!
+
+author
+	^'John Smith'
+!
+
+currentSlide
+	^currentSlide
+!
+
+currentSlide: aSlide
+	currentSlide := aSlide
+!
+
+description
+	^'A presentation written in Jtalk'
+!
+
+email
+	^'john@smith.com'
+!
+
+slideClasses
+	^self subclassResponsibility
+!
+
+slideTransition
+	^'fade'
+!
+
+slides
+	slides ifNil: [self initSlides].
+	^slides
+!
+
+style
+	"Should return a CSS style"
+	^ ''
+!
+
+title
+	^ self class title.
+!
+
+url
+	^'http://jtalk-project.org'
+! !
+
+!Presentation methodsFor: 'actions'!
+
+currentSlideIndex
+	^ self slides indexOf: self currentSlide ifAbsent: [1]
+!
+
+moveAt: anInteger
+	| next |
+	next := self slides 
+			at: anInteger
+			ifAbsent: [nil].
+	next ifNotNil: [currentSlide := next. next show]
+!
+
+nextSlide
+	| next |
+	self currentSlide ifNotNil: [
+		next := self slides 
+			at: (self currentSlideIndex) + 1
+			ifAbsent: [nil].
+		next ifNotNil: [currentSlide := next. next show]]
+!
+
+previousSlide
+	| next |
+	self currentSlide ifNotNil: [
+		next := self slides 
+			at: (self currentSlideIndex) - 1
+			ifAbsent: [nil].
+		next ifNotNil: [currentSlide := next. next show]]
+!
+
+showCurrentSlide
+	self currentSlide ifNotNil: [
+		'.slide' asJQuery hide.
+		('#', self currentSlide id) asJQuery show.
+          	'title' asJQuery text: self title, ' - ', self currentSlide id.
+        ]
+! !
+
+!Presentation methodsFor: 'enumerating'!
+
+slidesDo: aBlockWithArg
+	self slides do: [:aSlide| aBlockWithArg value: aSlide].
+! !
+
+!Presentation methodsFor: 'initialization'!
+
+initSlides
+	slides := self slideClasses collect: [:each | each on: self]
+! !
+
+!Presentation methodsFor: 'rendering'!
+
+renderOn: html
+	html style
+		type: 'text/css';
+		with: self style.
+	html div 
+		id: 'slides';
+		with: [self renderSlidesOn: html]
+!
+
+renderSlidesOn: html
+	self slides do: [:each | 
+		each renderOn: html].
+	currentSlide ifNil: [currentSlide := self slides first].
+	self showCurrentSlide
+! !
+
+Presentation class instanceVariableNames: 'current'!
+
+!Presentation class methodsFor: 'accessing'!
+
+concretePresentations
+	^ self allSubclasses select: [:aPresentationClass| aPresentationClass isConcrete]
+!
+
+title
+	^ 'Slides'
+! !
+
+!Presentation class methodsFor: 'enumerating'!
+
+concretePresentationsDo: aBlockWithArg
+	self concretePresentations do: aBlockWithArg.
+! !
+
+!Presentation class methodsFor: 'testing'!
+
+isConcrete
+	^false
+! !
+
+Presentation subclass: #ESUG2011Presentation
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!ESUG2011Presentation methodsFor: 'accessing'!
+
+author
+	^'Nicolas Petton'
+!
+
+description
+	^'ESUG 2011, Edinburgh'
+!
+
+email
+	^'nico@objectfusion.fr'
+!
+
+slideClasses
+	^Array new
+		add: IntroSlide;
+		add: AboutSlide;
+		add: WhatIsJtalkSlide;
+		add: JtalkFeaturesSlide;
+		add: WorkspaceSlide;
+		add: IDESlide;
+		add: CountersSlide;
+		add: JtalkAndJavascriptSlide;
+		add: JtalkAndJavascriptSlide2;
+		add: JtalkAndJavascriptSlide3;
+		add: JtalkAndJavascriptSlide4;
+		add: JtalkAndCLI;
+		add: JtalkAndNode;
+		add: JtalkAndNode2;
+		add: JtalkAndNode3;
+		add: JtalkAndWebOS;
+		add: JtalkAndEnyo;
+		add: ContributionsSlide;
+		yourself
+!
+
+style
+	^'
+body {
+    font-family: Helvetica,Arial,sans;
+}
+
+#slides {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #555;
+}
+
+.slide {
+    background: #fff;
+    color: #444;
+    text-align: left;
+    font-size: 20px;
+    line-height: 1.8em;
+    height: 500px;
+    width: 700px;
+    padding: 60px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -420px;
+    margin-top: -320px;
+    box-shadow: 0 0 20px #111;
+    -moz-box-shadow: 0 0 20px #111;
+    -webkit-box-shadow: 0 0 20px #111;
+}
+
+.slide.transparent {
+    background: transparent;
+    box-shadow: 0 0 0 none;
+    -moz-box-shadow: 0 0 0 transparent;
+    -webkit-box-shadow: 0 0 0 transparent;
+    color: #fff !!important;
+}
+
+.slide.black {
+    background: black;
+    background-image: -webkit-gradient(
+	linear,
+	left bottom,
+	left top,
+	color-stop(0.38, rgb(79,79,79)),
+	color-stop(0.69, rgb(33,33,33)),
+	color-stop(0.86, rgb(4,4,4))
+    );
+    background-image: -moz-linear-gradient(
+	center bottom,
+	rgb(79,79,79) 38%,
+	rgb(33,33,33) 69%,
+	rgb(4,4,4) 86%
+    );
+    color: #fff !!important;
+}
+
+.slide.black h1, .slide.black h2, .slide.black h3,
+.slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
+    color: #fff;
+    text-shadow: 0 1px 4px #aaa;
+}
+
+.slide.black a, .slide.transparent a {
+    color: #ccc;
+}
+
+.slide.white {
+    color: #333 !!important;
+}
+
+.slide.white h1, .slide.white h2, .slide.white h3 {
+    color: #333;
+}
+
+.slide.white a {
+    color: #333;
+}
+
+
+.slide h1, .slide h2, .slide h3 {
+    color: #333;
+    /* text-align: center; */
+}
+
+.slide h1 {
+    font-family: "Droid Sans";
+    font-size: 36px;
+    text-shadow: 0 1px 4px #aaa;
+    margin-top: 30px;
+    margin-bottom: 50px;
+}
+
+/* .slide ul, .slide li { */
+/*     padding: 0; */
+/*     margin: 0; */
+/* } */
+
+.slide button {
+    font-size: 18px;
+}
+
+.slide a {
+    color: #555;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.slide a:hover {
+    color: #fff;
+    background: #555;
+}
+
+.slide .right {
+    text-align: right;
+}
+
+.slide .section.center {
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+    width: 700px;
+    height: 500px;
+}
+
+.slide code {
+    font-family: "Droid Sans Mono";
+    color: #444;
+    border: 1px solid #ddd;
+    background: #eee;
+    border-radius: 4px;
+    padding: 2px;
+    font-size: 16px;
+}
+
+.slide .code2 {
+    font-family: "Droid Sans Mono";
+    line-height: 1.2em;
+    color: #444;
+    padding: 2px;
+    font-size: 16px;
+}
+
+
+.slide .CodeMirror {
+    width: 500px;
+    height: 300px;
+    text-align: left;
+}
+
+.slide .CodeMirror-scroll {
+    text-align: left;
+}
+
+.slide .fancy {
+    margin-top: 30px;
+    -webkit-transform: rotate(-10deg);
+    -moz-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+    color: red;
+}
+
+.slide .comment {
+    opacity: 0.6;
+    font-weight: normal;
+}
+
+.slide .red {
+    color: red;
+}
+
+.slide .blue {
+    color: blue;
+}
+
+.slide#WhatIsJtalk {
+    background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat;
+}
+
+.slide#ide {
+    background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
+}
+
+.slide#JtalkAndCLI {
+    background: white url("esug2011/images/terminal.png") 620px 20px no-repeat;
+}
+
+.slide#JtalkAndNode {
+    background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
+}
+.slide#JtalkAndNode2 {
+    background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
+}
+
+.slide#JtalkAndNode3 {
+    background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
+}
+
+.slide#JtalkAndWebOS {
+    background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat;
+}
+
+.slide#JtalkAndEnyo {
+    background: white url("esug2011/images/enyo.png") 130px 150px no-repeat;
+}
+
+.slide#links {
+    background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
+}
+
+.slide#links .section {
+    margin-left: 250px;
+    margin-top: 200px;
+    font-family: "Droid Sans";
+    font-size: 26px;
+    font-weight: bold;
+}
+
+
+#meta {
+    position: absolute;
+    font-size: 12px;
+    opacity: 0.6;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    background: #333;
+    text-align: right;
+    padding: 0 10px;
+    line-height: 1.8em;
+    color: #eee;
+    border-top-left-radius: 5px;
+}
+
+#meta:hover {
+    opacity: 0.8;
+}
+
+#meta p {
+    display: inline;
+    padding: 0 5px;
+}
+
+#meta a {
+    //background: #ccc;
+    color: #ccc;
+    text-decoration: none;
+    padding: 0 5px;
+}
+
+.slide {
+    
+}
+'
+!
+
+url
+	^'http://jtalk-project.org'
+! !
+
+ESUG2011Presentation class instanceVariableNames: 'current'!
+
+!ESUG2011Presentation class methodsFor: 'accessing'!
+
+title
+	^'Jtalk'
+! !
+
+!ESUG2011Presentation class methodsFor: 'testing'!
+
+isConcrete
+	^true
+! !
+
+Presentation subclass: #FOSDEM2012Presentation
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEM2012Presentation methodsFor: 'accessing'!
+
+author
+	^'Laurent Laffont, Johnny Thornton'
+!
+
+description
+	^'FOSDEM 2012, Brussels'
+!
+
+email
+	^'laurent.laffont@gmail.com,  johnnyt@xan.do'
+!
+
+slideClasses
+^ {
+	FOSDEMIntroSlide.
+	FOSDEMAmberZeroNine.
+	CountersSlide.
+	IDESlide.
+	JtalkAndJavascriptSlide.
+	FOSDEMJSPlayGroundSlide.
+	FOSDEMJSToSmalltalk.
+	FOSDEMBookletSlide.
+	FOSDEMTwitter.
+	FOSDEMCanvasSlide.
+	FOSDEMAmberBackend.
+	FOSDEMREPLSlide.
+	FOSDEMCLISlide.
+	FOSDEMContributionsSlide
+}
+!
+
+style
+	^'
+body {
+    font-family: Helvetica,Arial,sans;
+}
+
+#slides {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #555;
+}
+
+.slide {
+    background: #fff;
+    color: #444;
+    text-align: left;
+    font-size: 20px;
+    line-height: 1.8em;
+    height: 500px;
+    width: 700px;
+    padding: 60px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -420px;
+    margin-top: -320px;
+    box-shadow: 0 0 20px #111;
+    -moz-box-shadow: 0 0 20px #111;
+    -webkit-box-shadow: 0 0 20px #111;
+}
+
+.slide.transparent {
+    background: transparent;
+    box-shadow: 0 0 0 none;
+    -moz-box-shadow: 0 0 0 transparent;
+    -webkit-box-shadow: 0 0 0 transparent;
+    color: #fff !!important;
+}
+
+.slide.black {
+    background: black;
+    background-image: -webkit-gradient(
+	linear,
+	left bottom,
+	left top,
+	color-stop(0.38, rgb(79,79,79)),
+	color-stop(0.69, rgb(33,33,33)),
+	color-stop(0.86, rgb(4,4,4))
+    );
+    background-image: -moz-linear-gradient(
+	center bottom,
+	rgb(79,79,79) 38%,
+	rgb(33,33,33) 69%,
+	rgb(4,4,4) 86%
+    );
+    color: #fff !!important;
+}
+
+.slide.black h1, .slide.black h2, .slide.black h3,
+.slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
+    color: #fff;
+    text-shadow: 0 1px 4px #aaa;
+}
+
+.slide.black a, .slide.transparent a {
+    color: #ccc;
+}
+
+.slide.white {
+    color: #333 !!important;
+}
+
+.slide.white h1, .slide.white h2, .slide.white h3 {
+    color: #333;
+}
+
+.slide.white a {
+    color: #333;
+}
+
+
+.slide h1, .slide h2, .slide h3 {
+    color: #333;
+    /* text-align: center; */
+}
+
+.slide h1 {
+    font-family: "Droid Sans";
+    font-size: 36px;
+    text-shadow: 0 1px 4px #aaa;
+    margin-top: 30px;
+    margin-bottom: 50px;
+}
+
+.slide button {
+    font-size: 18px;
+}
+
+.slide a {
+    color: #555;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.slide a:hover {
+    color: #fff;
+    background: #555;
+}
+
+.slide .right {
+    text-align: right;
+}
+
+.slide .section.center {
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+    width: 700px;
+    height: 500px;
+}
+
+.slide code {
+    font-family: "Droid Sans Mono";
+    color: #444;
+    border: 1px solid #ddd;
+    background: #eee;
+    border-radius: 4px;
+    padding: 2px;
+    font-size: 16px;
+}
+
+.slide .code2 {
+    font-family: "Droid Sans Mono";
+    line-height: 1.2em;
+    color: #444;
+    padding: 2px;
+    font-size: 16px;
+}
+
+
+.slide .CodeMirror {
+    width: 700px;
+    height: 300px;
+    text-align: left;
+}
+
+.slide .CodeMirror-scroll {
+    text-align: left;
+}
+
+.slide .fancy {
+    margin-top: 30px;
+    -webkit-transform: rotate(-10deg);
+    -moz-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+    color: red;
+}
+
+.slide .comment {
+    opacity: 0.6;
+    font-weight: normal;
+}
+
+.slide .red {
+    color: red;
+}
+
+.slide .blue {
+    color: blue;
+}
+
+#meta {
+    position: absolute;
+    font-size: 12px;
+    opacity: 0.6;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    background: #333;
+    text-align: right;
+    padding: 0 10px;
+    line-height: 1.8em;
+    color: #eee;
+    border-top-left-radius: 5px;
+}
+
+#meta:hover {
+    opacity: 0.8;
+}
+
+#meta p {
+    display: inline;
+    padding: 0 5px;
+}
+
+#meta a {
+    //background: #ccc;
+    color: #ccc;
+    text-decoration: none;
+    padding: 0 5px;
+}
+
+.slide {
+    
+}
+
+.slide.blue3d {
+  background: #feffff;
+  background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#d2ebf9));
+  background: -webkit-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
+  background: -o-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
+  background: -ms-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#feffff", endColorstr="#d2ebf9",GradientType=0 );
+  background: linear-gradient(top, #feffff 0%,#d2ebf9 100%);
+}
+
+
+.slide.red3d {
+  background: #febbbb;
+  background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 71%, #ff5c5c 95%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(71%,#fe9090), color-stop(95%,#ff5c5c));
+  background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
+  background: -o-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
+  background: -ms-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#febbbb", endColorstr="#ff5c5c",GradientType=0 );
+  background: linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
+}
+
+
+.slide.green3d {
+  background: #cdeb8e;
+  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
+  background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
+  background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
+  background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#cdeb8e", endColorstr="#a5c956",GradientType=0 );
+  background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
+}
+
+@-webkit-keyframes rotate-horizontal {
+	0% { -webkit-transform: perspective(1000px) rotateY(-10deg);}
+	100% { -webkit-transform: perspective(1000px) rotateY(10deg);}
+}
+
+.animate p{
+-webkit-animation: rotate-horizontal 2s infinite alternate ease-in-out;
+}
+
+#FOSDEMAmberBackend img {
+	margin: 5px;
+	-webkit-animation: rotate-horizontal 2s infinite alternate ease-in-out;
+}
+
+.slide#FOSDEMContributionsSlide {
+    background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
+}
+
+.slide#FOSDEMContributionsSlide .section {
+    margin-left: 250px;
+    margin-top: 200px;
+    font-family: "Droid Sans";
+    font-size: 26px;
+    font-weight: bold;
+}
+
+
+.slide#ide {
+    background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
+}
+
+
+.tweet {
+	background-color: #aaa;
+	color: black;
+	padding: 10px;
+	border-radius: 10px;
+	border: 5px solid #eee;
+	margin: 10px;
+}
+
+.tweet img {
+	vertical-align: top;
+	margin-right: 10px;
+}
+
+.tweet span:first-child {
+	float: right;
+}
+'
+!
+
+url
+	^'http://amber-lang.net'
+! !
+
+!FOSDEM2012Presentation class methodsFor: 'testing'!
+
+isConcrete
+	^true
+!
+
+title
+	^'Amber'
+! !
+
+Presentation subclass: #SweSUG2012Presentation
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUG2012Presentation methodsFor: 'accessing'!
+
+author
+	^'Göran Krampe'
+!
+
+description
+	^'SweSUG 2012, Stockholm'
+!
+
+email
+	^'goran@krampe.se'
+!
+
+slideClasses
+	^Array new
+		add: SweSUGIntroSlide;
+		add: SweSUGAboutSlide;
+		add: SweSUGWhatIsAmberSlide;
+		add: SweSUGAmberFeaturesSlide;
+		add: SweSUGWorkspaceSlide;
+		add: IDESlide;
+		add: CountersSlide;
+		add: JtalkAndJavascriptSlide;
+		add: JtalkAndJavascriptSlide2;
+		add: JtalkAndJavascriptSlide3;
+		add: JtalkAndJavascriptSlide4;
+		add: JtalkAndCLI;
+		add: JtalkAndNode;
+		add: JtalkAndNode2;
+		add: JtalkAndNode3;
+		add: JtalkAndWebOS;
+		add: JtalkAndEnyo;
+		add: ContributionsSlide;
+		yourself
+!
+
+style
+	^'
+body {
+    font-family: Helvetica,Arial,sans;
+}
+
+#slides {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #555;
+}
+
+.slide {
+    background: #fff;
+    color: #444;
+    text-align: left;
+    font-size: 20px;
+    line-height: 1.8em;
+    height: 500px;
+    width: 700px;
+    padding: 60px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -420px;
+    margin-top: -320px;
+    box-shadow: 0 0 20px #111;
+    -moz-box-shadow: 0 0 20px #111;
+    -webkit-box-shadow: 0 0 20px #111;
+}
+
+.slide.transparent {
+    background: transparent;
+    box-shadow: 0 0 0 none;
+    -moz-box-shadow: 0 0 0 transparent;
+    -webkit-box-shadow: 0 0 0 transparent;
+    color: #fff !!important;
+}
+
+.slide.black {
+    background: black;
+    background-image: -webkit-gradient(
+	linear,
+	left bottom,
+	left top,
+	color-stop(0.38, rgb(79,79,79)),
+	color-stop(0.69, rgb(33,33,33)),
+	color-stop(0.86, rgb(4,4,4))
+    );
+    background-image: -moz-linear-gradient(
+	center bottom,
+	rgb(79,79,79) 38%,
+	rgb(33,33,33) 69%,
+	rgb(4,4,4) 86%
+    );
+    color: #fff !!important;
+}
+
+.slide.black h1, .slide.black h2, .slide.black h3,
+.slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
+    color: #fff;
+    text-shadow: 0 1px 4px #aaa;
+}
+
+.slide.black a, .slide.transparent a {
+    color: #ccc;
+}
+
+.slide.white {
+    color: #333 !!important;
+}
+
+.slide.white h1, .slide.white h2, .slide.white h3 {
+    color: #333;
+}
+
+.slide.white a {
+    color: #333;
+}
+
+
+.slide h1, .slide h2, .slide h3 {
+    color: #333;
+    /* text-align: center; */
+}
+
+.slide h1 {
+    font-family: "Droid Sans";
+    font-size: 36px;
+    text-shadow: 0 1px 4px #aaa;
+    margin-top: 30px;
+    margin-bottom: 50px;
+}
+
+/* .slide ul, .slide li { */
+/*     padding: 0; */
+/*     margin: 0; */
+/* } */
+
+.slide button {
+    font-size: 18px;
+}
+
+.slide a {
+    color: #555;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.slide a:hover {
+    color: #fff;
+    background: #555;
+}
+
+.slide .right {
+    text-align: right;
+}
+
+.slide .section.center {
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+    width: 700px;
+    height: 500px;
+}
+
+.slide code {
+    font-family: "Droid Sans Mono";
+    color: #444;
+    border: 1px solid #ddd;
+    background: #eee;
+    border-radius: 4px;
+    padding: 2px;
+    font-size: 16px;
+}
+
+.slide .code2 {
+    font-family: "Droid Sans Mono";
+    line-height: 1.2em;
+    color: #444;
+    padding: 2px;
+    font-size: 16px;
+}
+
+
+.slide .CodeMirror {
+    width: 500px;
+    height: 300px;
+    text-align: left;
+}
+
+.slide .CodeMirror-scroll {
+    text-align: left;
+}
+
+.slide .fancy {
+    margin-top: 30px;
+    -webkit-transform: rotate(-10deg);
+    -moz-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+    color: red;
+}
+
+.slide .comment {
+    opacity: 0.6;
+    font-weight: normal;
+}
+
+.slide .red {
+    color: red;
+}
+
+.slide .blue {
+    color: blue;
+}
+
+.slide#WhatIsJtalk {
+    background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat;
+}
+
+.slide#ide {
+    background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
+}
+
+.slide#JtalkAndCLI {
+    background: white url("esug2011/images/terminal.png") 620px 20px no-repeat;
+}
+
+.slide#JtalkAndNode {
+    background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
+}
+.slide#JtalkAndNode2 {
+    background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
+}
+
+.slide#JtalkAndNode3 {
+    background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
+}
+
+.slide#JtalkAndWebOS {
+    background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat;
+}
+
+.slide#JtalkAndEnyo {
+    background: white url("esug2011/images/enyo.png") 130px 150px no-repeat;
+}
+
+.slide#links {
+    background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
+}
+
+.slide#links .section {
+    margin-left: 250px;
+    margin-top: 200px;
+    font-family: "Droid Sans";
+    font-size: 26px;
+    font-weight: bold;
+}
+
+
+#meta {
+    position: absolute;
+    font-size: 12px;
+    opacity: 0.6;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    background: #333;
+    text-align: right;
+    padding: 0 10px;
+    line-height: 1.8em;
+    color: #eee;
+    border-top-left-radius: 5px;
+}
+
+#meta:hover {
+    opacity: 0.8;
+}
+
+#meta p {
+    display: inline;
+    padding: 0 5px;
+}
+
+#meta a {
+    //background: #ccc;
+    color: #ccc;
+    text-decoration: none;
+    padding: 0 5px;
+}
+
+.slide {
+    
+}
+'
+!
+
+url
+	^'http://www.amber-lang.net'
+! !
+
+!SweSUG2012Presentation class methodsFor: 'accessing'!
+
+title
+	^'Amber rocks!!'
+! !
+
+!SweSUG2012Presentation class methodsFor: 'testing'!
+
+isConcrete
+	^true
+! !
+
+Widget subclass: #PresentationNavigator
+	instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
+	package: 'Presentation'!
+
+!PresentationNavigator methodsFor: 'accessing'!
+
+currentPresentation
+	^  currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
+!
+
+currentPresentation: aPresentation
+	currentPresentation := aPresentation.
+!
+
+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'!
+
+nextSlide
+	self currentPresentation nextSlide.
+	self updateHash.
+!
+
+previousSlide
+	self currentPresentation previousSlide.
+	self updateHash.
+!
+
+reload
+	|slideIndex|
+	slideIndex := self currentPresentation currentSlideIndex.
+	self currentPresentation: self currentPresentation class new.
+	self renderCurrentPresentation.
+	self selectSlideAt: slideIndex.
+!
+
+selectPresentation: aPresentationClass
+	self currentPresentation: aPresentationClass new.
+	self renderCurrentPresentation.
+!
+
+selectPresentationNamed: aString
+	|presentationClass|
+	presentationClass :=  (Smalltalk current at: aString).
+	presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
+!
+
+selectSlideAt: anInteger
+	self currentPresentation moveAt: anInteger.
+	self updateHash.
+!
+
+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
+        ].
+!
+
+checkHashChange
+	(window jQuery: window) bind: 'hashchange' do: [self checkHash]
+! !
+
+!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'!
+
+open
+	(window jQuery: document)  ready: [
+          	self 
+          		appendToJQuery: 'body' asJQuery;
+          		setKeybindings;
+          		checkHashChange.
+        ].
+!
+
+renderCurrentPresentation
+	presentationBrush contents: [:html |
+        	self currentPresentation renderOn: html.
+        ].
+	self updateSlideSelect.
+!
+
+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.
+!
+
+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 ] ].
+!
+
+renderSlideSelectOn: html
+	slideSelect := html select.
+	slideSelect onChange: [ self  selectSlideAt:  slideSelect asJQuery val ].
+	self updateSlideSelect.
+!
+
+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].
+!
+
+updateSlideSelect
+	slideSelect contents: [:html| |index|
+		                       		index := 0.
+                		       		self currentPresentation slidesDo: [ :aSlide|  
+                                		                                    				index := index + 1.
+                                                		                    				html option
+                                                                		    					value: index;
+                                                            								with: aSlide title ] ].
+! !
+
+!PresentationNavigator class methodsFor: 'initialize'!
+
+initialize
+	^ self open
+!
+
+open
+	^ self new open
+! !
+
+Widget subclass: #Slide
+	instanceVariableNames: 'presentation'
+	package: 'Presentation'!
+
+!Slide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#555'
+!
+
+cssClass
+	^'slide'
+!
+
+id
+	^ self class name
+!
+
+presentation
+	^presentation
+!
+
+presentation: aPresentation
+	presentation := aPresentation
+!
+
+title
+	^ self id
+! !
+
+!Slide methodsFor: 'actions'!
+
+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.
+! !
+
+!Slide methodsFor: 'rendering'!
+
+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]
+!
+
+renderOn: html
+	html div class: self cssClass; id: self id; with: [
+		self renderSlideOn: html.
+		self renderMetaOn: html]
+!
+
+renderSlideOn: html
+! !
+
+!Slide class methodsFor: 'instance creation'!
+
+on: aPresentation
+	^self new
+		presentation: aPresentation;
+		yourself
+! !
+
+Slide subclass: #AboutSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!AboutSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'white'
+!
+
+cssClass
+	^'slide transparent white'
+!
+
+id
+	^'about'
+! !
+
+!AboutSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html h1 with: 'About this presentation'.
+		html p with: 'This presentation is entirely written in Jtalk and is licensed under CC BY-SA.'.
+		html p with: [
+			html with: 'Press '.
+			html code with: '←'.
+			html with: ' to move backward and '.
+			html code with: ' →'.
+			html with: ' to move forward.'].
+		html p with: [
+			html with: 'Open a '.
+			html button 
+				with: 'browser';
+				onClick: [Browser openOn: Presentation].
+			html with: ' to edit the source code.']]
+! !
+
+Slide subclass: #ContributionsSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!ContributionsSlide methodsFor: 'accessing'!
+
+id
+	^'links'
+! !
+
+!ContributionsSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section'; with: [
+		html p with: [
+			html a href: 'http://jtalk-project.org'; with: 'jtalk-project.org'].
+		html p with: [
+			html a href: 'https://github.com/NicolasPetton/jtalk'; with: 'github.com/NicolasPetton/jtalk'].
+		html p with: [
+			html a href: 'http://http://groups.google.com/group/jtalk-project'; with: 'groups.google.com/group/jtalk-project']]
+! !
+
+Slide subclass: #CountersSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!CountersSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#18bd7d'
+!
+
+id
+	^'counters'
+! !
+
+!CountersSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html h1 with: 'The counter example'.
+		html div with: [
+			2 timesRepeat: [Counter new renderOn: html]]]
+! !
+
+Slide subclass: #FOSDEMSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMSlide methodsFor: 'accessing'!
+
+codeSnippet
+	self subclassResponsibility
+! !
+
+!FOSDEMSlide methodsFor: 'rendering'!
+
+renderCodeSnippetOn: html
+	(SourceArea new 
+			renderOn: html;
+			editor)  setValue: self codeSnippet.
+!
+
+renderSnippet: aString on: html
+	(SourceArea new 
+			renderOn: html;
+			editor)  setValue: aString.
+! !
+
+FOSDEMSlide subclass: #FOSDEMAmberBackend
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMAmberBackend methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide green3d'
+! !
+
+!FOSDEMAmberBackend methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div
+		class: 'section center';
+		with: [	html h1: 'Need a backend ?'.
+				{'nodejs.png'. 'php.gif'. 'rails.png'.   'pharo.png'. 'ambrhino.jpg'} do: [:aString |
+						html img: 'fosdem2012/images/', aString.
+				]
+		]
+! !
+
+FOSDEMSlide subclass: #FOSDEMAmberZeroNine
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMAmberZeroNine methodsFor: 'not yet classified'!
+
+renderSlideOn: html
+	html div 
+		class: 'section center';
+		with: [ 	html 
+					h1: 'Amber 0.9.1 is out !!';
+					div: [html cite with: 'Now with over 43 forks on github and more than 230 followers the project:  http://www.amber-lang.net  ...is live and kicking!!'];
+					div: [html cite with: '-- Nicolas & Göran'] ]
+! !
+
+FOSDEMSlide subclass: #FOSDEMBookletSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMBookletSlide methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide blue3d'
+! !
+
+!FOSDEMBookletSlide methodsFor: 'css'!
+
+style
+	^ '
+#book { font-size: 1.4em; }
+#book .b-load .b-wrap-right { background-color: #DEC3A9;}
+#book .b-load .b-wrap-left { background-color: #DDD;} 
+'
+! !
+
+!FOSDEMBookletSlide methodsFor: 'rendering'!
+
+bookletOptions
+	^ #{ 
+		'arrows' -> true.
+		'keyboard' -> false.
+		'pageNumbers' -> false.
+		'closed' -> true
+	}
+!
+
+renderBookOn: html
+	html div 
+		id: 'book';
+		with: [	html div
+					class: 'b-load';
+					with: [	html 
+								div: 'Amber makes it easy to plug existing javascript libraires';
+								div: 'Here is an example with the jQuery Booklet plugin';
+								div: 'Want to see how ?';
+								div: [ html button
+										onClick: [Browser openOn: FOSDEMBookletSlide ];
+										with: 'Just browse the code :)'.						] 	
+																							
+					]	
+		].
+!
+
+renderSlideOn: html
+	self renderBookOn: 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].
+! !
+
+FOSDEMSlide subclass: #FOSDEMCLISlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMCLISlide methodsFor: 'rendering'!
+
+codeSnippet
+	^ 
+'cd examples/nodejs/hello
+../../../bin/amberc -m Hello Hello.st Program
+node Program.js
+
+Hello world from Amber in Node.js'
+!
+
+renderSlideOn: html
+	html h1: 'CLI'.
+	html with:  'amberc compiles .st files into node programs !!'.
+	self renderCodeSnippetOn: html.
+! !
+
+FOSDEMSlide subclass: #FOSDEMCanvasSlide
+	instanceVariableNames: 'c2d canvas'
+	package: 'Presentation'!
+
+!FOSDEMCanvasSlide methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide red3d'
+! !
+
+!FOSDEMCanvasSlide methodsFor: 'drawing'!
+
+drawOnCanvas
+	|c2d|
+	c2d := canvas element getContext: '2d'.
+	c2d 
+		clearRect: 0 
+		y: 0 
+		width: canvas element width 
+		height: canvas element height.
+	
+	40 atRandom timesRepeat: [ |rgba|
+			rgba := ',' join: {255 atRandom. 255 atRandom. 255 atRandom. 10 atRandom / 10}.
+			c2d	at: 'fillStyle' put: 'rgba(', rgba, ')'.
+			c2d
+				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.
+! !
+
+FOSDEMSlide subclass: #FOSDEMContributionsSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMContributionsSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section'; with: [
+		html p with: [
+			html a href: '/documentation.html'; with: 'Documentation'].
+		html p with: [
+			html a href: 'http://amber-lang.net'; with: 'amber-lang.net'].
+		html p with: [
+			html a href: 'https://github.com/NicolasPetton/amber'; with: 'github.com/NicolasPetton/amber'].
+		html p with: [
+			html a href: 'http://groups.google.com/group/amber-lang'; with: 'groups.google.com/group/amber-lang']]
+! !
+
+FOSDEMSlide subclass: #FOSDEMIntroSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMIntroSlide methodsFor: 'not yet classified'!
+
+renderSlideOn: html
+	html div class: 'section center animate'; with: [
+		html img src: 'fosdem2012/images/amber.png'.
+		html p: self presentation author.
+          	html p: self presentation description.
+		html p: [
+			html with: self presentation email]].
+! !
+
+FOSDEMSlide subclass: #FOSDEMJSPlayGroundSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMJSPlayGroundSlide methodsFor: 'accessing'!
+
+codeSnippet
+^'|logo|
+logo:=''img#amberlogo'' asJQuery.
+
+logo
+  css:''-webkit-transition'' put:''all 10s ease-in-out''.
+
+<logo.css(''-webkit-transform'', ''rotateY(360deg)'');>.
+
+logo click: [window alert: ''This is cool !!''].
+
+logo inspect'.
+! !
+
+!FOSDEMJSPlayGroundSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div
+		class: 'section center'; 
+		with: [
+			self renderCodeSnippetOn: html.
+			html img
+				id: 'amberlogo'; 
+				src: 'fosdem2012/images/amber.png'	]
+! !
+
+FOSDEMSlide subclass: #FOSDEMJSToSmalltalk
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMJSToSmalltalk methodsFor: 'accessing'!
+
+codeSnippet
+	^
+'var counter = window.smalltalk.Counter._new();
+counter._appendToJQuery_($(''#jsToSmalltalk''));'.
+!
+
+cssClass
+	^ 'slide blue3d'
+! !
+
+!FOSDEMJSToSmalltalk methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1: 'Call Smalltalk from Javascript'.
+	html div
+		id: 'jsToSmalltalk';
+		style: 'float: left'.
+	self renderCodeSnippetOn: html.
+! !
+
+FOSDEMSlide subclass: #FOSDEMREPLSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!FOSDEMREPLSlide methodsFor: 'rendering'!
+
+codeSnippet
+	^ 
+'./bin/amber
+fs := require value: ''fs''.
+fs readdir: ''/tmp'' do: [:err :file| console log: file]'.
+!
+
+renderSlideOn: html
+	html h1: 'REPL'.
+	self renderCodeSnippetOn: html.
+! !
+
+FOSDEMSlide subclass: #FOSDEMTwitter
+	instanceVariableNames: 'twitterDiv'
+	package: 'Presentation'!
+
+!FOSDEMTwitter methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide black'
+! !
+
+!FOSDEMTwitter methodsFor: 'callback'!
+
+loadTweets
+	jQuery 
+		ajax: 'http://search.twitter.com/search.json?rpp=3&q=%40AmberSmalltalk'
+		options: #{
+				'type' -> 'GET'.
+				'success' -> [ :json | self renderTweets: (json results)].
+				'dataType' -> 'jsonp'
+			}.
+! !
+
+!FOSDEMTwitter methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html button
+		onClick: [self loadTweets];
+		with: 'What about @AmberSmalltalk on Twitter ?'.
+	twitterDiv := html div.
+!
+
+renderTweet: tweet on: html
+	html div 
+		class: 'tweet';
+		with: [
+			html 
+				span: (tweet at: 'created_at');
+				img: (tweet at: 'profile_image_url');
+				span: (tweet at: 'from_user');
+				div: (tweet at: 'text'). 
+		]
+!
+
+renderTweets: tweets
+	twitterDiv contents: [	:html|
+						tweets do: [	:tweet|  
+									self renderTweet: tweet on: html] ]
+! !
+
+Slide subclass: #IDESlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!IDESlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'black'
+!
+
+cssClass
+	^'slide transparent'
+!
+
+id
+	^'ide'
+! !
+
+!IDESlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+"	html div class: 'section center'; with: [
+		html h1 
+			with: 'The wonderful Jtalk ';
+			with: [
+				html a 
+					with: 'development tools';
+					onClick: [TabManager current open]];
+			with: '.']
+"
+! !
+
+Slide subclass: #IntroSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!IntroSlide methodsFor: 'accessing'!
+
+cssClass
+	^'slide black'
+!
+
+id
+	^'intro'
+! !
+
+!IntroSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html h1 with: 'Jtalk, the Smalltalk for Web developers'.
+		html p with: self presentation author, ' & Göran Krampe - ', self presentation description.
+		html p with: [
+			html a
+				with: self presentation email;
+				href: 'mailto:', self presentation email].
+		html p with: [
+			html a
+				with: 'goran@krampe.se';
+				href: 'mailto:goran@krampe.se'].
+		
+          	html p with: [
+			html a
+				with: 'objectfusion.fr';
+				href: 'http://www.objectfusion.fr']]
+! !
+
+Slide subclass: #JtalkAndCLI
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndCLI methodsFor: 'not yet classified'!
+
+backgroundColor
+	^'#0A1'
+!
+
+id
+	^'JtalkAndCLI'
+!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Jtalk and '.
+		html span class: 'blue'; with: 'the command line'].
+
+	html h2 with: 'jtalkc - a fairly elaborate bash script that:'.
+
+	html ul with: [
+		html li with: 'Uses Node.js to run the Jtalk Compiler'.
+		html li with: 'Compiles .st files to .js'.
+		html li with: 'Links .js files into a single one'.
+		html li with: 'Adds class initilization and/or call to main'.
+		html li with: 'Optionally runs Google Closure compiler']
+! !
+
+Slide subclass: #JtalkAndEnyo
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndEnyo methodsFor: 'not yet classified'!
+
+backgroundColor
+	^'#0A1'
+!
+
+id
+	^'JtalkAndEnyo'
+!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Jtalk and '.
+		html span class: 'blue'; with: 'Enyo'].
+! !
+
+Slide subclass: #JtalkAndJavascriptSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndJavascriptSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#08C'
+!
+
+cssClass
+	^'slide transparent'
+!
+
+id
+	^'jtalkAndJs'
+! !
+
+!JtalkAndJavascriptSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html h1 with: [
+			html with: 'Smalltalk '.
+			html span class: 'red'; with: '♥'.
+			html with: ' JavaScript']]
+! !
+
+Slide subclass: #JtalkAndJavascriptSlide2
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndJavascriptSlide2 methodsFor: 'accessing'!
+
+backgroundColor
+	^'#08C'
+!
+
+id
+	^'jtalkAndJs2'
+! !
+
+!JtalkAndJavascriptSlide2 methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Smalltalk '.
+		html span class: 'red'; with: '♥'.
+		html with: ' JavaScript'].
+	html h2 with: 'Jtalk maps one to one with the JavaScript equivalent:'.
+	html ul with: [
+		html li with: 'String ⇔ String'.
+		html li with: 'Number ⇔ Number'.
+		html li with: 'BlockClosure ⇔ function'.
+		html li with: 'Dictionary ⇔ Object'.
+		html li with: 'Error ⇔ Error'.
+		html li with: 'etc.']
+! !
+
+Slide subclass: #JtalkAndJavascriptSlide3
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndJavascriptSlide3 methodsFor: 'accessing'!
+
+backgroundColor
+	^'#08C'
+!
+
+id
+	^'jtalkAndJs3'
+! !
+
+!JtalkAndJavascriptSlide3 methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Smalltalk '.
+		html span class: 'red'; with: '♥'.
+		html with: ' JavaScript'].
+	html h2 with: 'Smalltalk ⇒ JavaScript'.
+	html ol with: [
+		html li 
+			with: 'Unary messages begin with an underscore: ';
+			with: [html code with: 'yourself'];
+			with: ' becomes ';
+			with: [html code with: '_yourself()'].
+		html li 
+			with: 'Binary messages are prefixed with 2 underscores: ';
+			with: [html code with: '3@4'];
+			with: ' becomes ';
+			with: [html code with: '(3).__at(4)'].
+		html li 
+			with: 'Keyword message follow the same rules as unary messages, with a final underscore: ';
+			with: [html code with: 'aDictionary at: 3 put: 4'];
+			with: ' becomes ';
+			with: [html code with: 'aDictionary._at_put_(3, 4)']]
+! !
+
+Slide subclass: #JtalkAndJavascriptSlide4
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndJavascriptSlide4 methodsFor: 'accessing'!
+
+backgroundColor
+	^'#08C'
+!
+
+id
+	^'jtalkAndJs4'
+! !
+
+!JtalkAndJavascriptSlide4 methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'JavaScript '.
+		html span class: 'red'; with: '♥'.
+		html with: ' Smalltalk too!! ';
+		with: [html span class: 'comment'; with: '(how cute)']].
+	html h2 with: 'JavaScript ⇒ Smalltalk'.
+	html ol with: [
+		html li 
+			with: [html code with: 'someUser.name'];
+			with: ' becomes ';
+			with: [html code with: 'someUser name'].
+		html li 
+			with: [html code with: 'someUser name = "John"'];
+			with: ' becomes ';
+			with: [html code with: 'someUser name: ''John'''].
+		html li 
+			with: [html code with: 'console.log(''hello world'')'];
+			with: ' becomes ';
+			with: [html code with: 'console log: ''hello world'''].
+		html li 
+			with: [html code with: 'window.jQuery(''foo'').css(''background'', ''red'')'];
+			with: ' becomes ';
+			with: [html br];
+			with: [html code with: '(window jQuery: ''foo'') css: ''background'' color: ''red''']]
+! !
+
+Slide subclass: #JtalkAndNode
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndNode methodsFor: 'not yet classified'!
+
+backgroundColor
+	^'#0A1'
+!
+
+id
+	^'JtalkAndNode'
+!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Jtalk and '.
+		html span class: 'blue'; with: 'Node.js'].
+
+	html h2 with: 'Hello.st:'.
+	html pre with: [
+		html div class: 'code2'; with:  'Object subclass: #Hello
+        instanceVariableNames: ''''
+        category: ''Hello''!!
+
+!!Hello class methodsFor: ''main''!!
+main
+	console log: ''Hello world from JTalk in Node.js''
+!! !!']
+! !
+
+Slide subclass: #JtalkAndNode2
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndNode2 methodsFor: 'not yet classified'!
+
+backgroundColor
+	^'#0A1'
+!
+
+id
+	^'JtalkAndNode2'
+!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Jtalk and '.
+		html span class: 'blue'; with: 'Node.js'].
+
+	html h2 with: 'Makefile:'.
+	html pre with: [
+		html div class: 'code2'; with:  'Program.js: Hello.st
+	../../bin/jtalkc -N -m Hello Hello.st Program
+
+run: Program.js
+	./hello
+
+clean:
+	rm -f Program.js Hello.js
+'].
+html h2 with: 'hello:'.
+	html pre with: [
+		html div class: 'code2'; with:  'node Program.js $@']
+! !
+
+Slide subclass: #JtalkAndNode3
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndNode3 methodsFor: 'not yet classified'!
+
+backgroundColor
+	^'#0A1'
+!
+
+id
+	^'JtalkAndNode3'
+!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Jtalk and '.
+		html span class: 'blue'; with: 'Node.js'].
+
+	html h2 with: 'make clean && make run:'.
+
+	html pre with: [
+		html div class: 'code2'; with:  'rm -f Program.js Hello.js
+../../bin/jtalkc -N -m Hello Hello.st Program
+Loading libraries  /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js
+/home/gokr/jtalk/js/Parser.js /home/gokr/jtalk/js/Compiler.js
+/home/gokr/jtalk/js/init.js /home/gokr/jtalk/nodejs/nodecompile.js
+and compiling ...
+Compiling in debugMode: false
+Reading file Hello.st
+Exporting category Hello as Hello.js
+Adding libraries  /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js  ...
+Adding Jtalk code Hello.js ...
+Adding initializer /home/gokr/jtalk/js/init.js ...
+Adding call to Hello class >> main ...
+Writing Program.js ...
+Done.
+./hello'.
+html span class: 'blue'; with:'Hello world from JTalk in Node.js']
+! !
+
+Slide subclass: #JtalkAndWebOS
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkAndWebOS methodsFor: 'not yet classified'!
+
+backgroundColor
+	^'#0A1'
+!
+
+id
+	^'JtalkAndWebOS'
+!
+
+renderSlideOn: html
+	html h1 with: [
+		html with: 'Jtalk and '.
+		html span class: 'blue'; with: 'webOS'].
+
+	html h2 with: 'A really cool mobile OS based on Linux:'.
+
+	html ul with: [
+		html li with: 'The primary language in webOS is Javascript'.
+		html li with: 'The new UI framework for webOS 3.0 is called Enyo'.
+		html li with: 'Regular apps run in V8 + Webkit'.
+		html li with: 'Background services run in Node.js']
+! !
+
+Slide subclass: #JtalkFeaturesSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!JtalkFeaturesSlide methodsFor: 'accessing'!
+
+id
+	^'features'
+! !
+
+!JtalkFeaturesSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1 with: 'Jtalk features'.
+	html ul with: [
+		html li with: 'Jtalk is (mostly) written in itself, including the parser & compiler'.
+		html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
+		html li with: 'Core libraries (streams, collections, RegExp, etc)'.
+		html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
+		html li with: 'Full featured IDE'.
+		html li with: [
+			html with:'Advanced Smalltalk features, including '.
+			html code with: '#doesNotUnderstand:'.
+			html with: ' support and '.
+			html code with: 'thisContext']]
+! !
+
+Slide subclass: #SweSUGSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUGSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#555'
+!
+
+codeSnippet
+	self subclassResponsibility
+! !
+
+!SweSUGSlide methodsFor: 'rendering'!
+
+cssClass
+	^ 'slide blue3d'
+!
+
+renderCodeSnippetOn: html
+	(SourceArea new 
+			renderOn: html;
+			editor)  setValue: self codeSnippet.
+!
+
+renderSnippet: aString on: html
+	(SourceArea new 
+			renderOn: html;
+			editor)  setValue: aString.
+! !
+
+SweSUGSlide subclass: #SweSUGAboutSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUGAboutSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#555'
+!
+
+cssClass
+	^ 'slide blue3d'
+!
+
+id
+	^'About'
+! !
+
+!SweSUGAboutSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html h1 with: 'About this presentation'.
+		html p with: 'This presentation is entirely written in Amber. Lots of stuff was heavily copied from the two earlier presentations from ESUG and FOSDEM.'.
+		html p with: [
+			html with: 'Press '.
+			html code with: '←'.
+			html with: ' to move backward and '.
+			html code with: ' →'.
+			html with: ' to move forward.'].
+		html p with: [
+			html with: 'Open a '.
+			html button 
+				with: 'browser';
+				onClick: [Browser openOn: Presentation].
+			html with: ' to edit the source code.']]
+! !
+
+SweSUGSlide subclass: #SweSUGAmberFeaturesSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUGAmberFeaturesSlide methodsFor: 'accessing'!
+
+id
+	^'features'
+! !
+
+!SweSUGAmberFeaturesSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1 with: 'Amber features'.
+	html ul with: [
+		html li with: 'Amber is (mostly) written in itself, including the compiler'.
+		html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
+		html li with: 'Core libraries (streams, collections, RegExp, etc)'.
+		html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
+		html li with: 'Very good javascript integration, both ways'.
+		html li with: 'Full featured IDE!!'.
+		html li with: [
+			html with:'Advanced features, including '.
+			html code with: '#doesNotUnderstand:'.
+			html with: ' support and '.
+			html code with: 'thisContext']]
+! !
+
+SweSUGSlide subclass: #SweSUGIntroSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUGIntroSlide methodsFor: 'not yet classified'!
+
+id
+	^'Intro'
+!
+
+renderSlideOn: html
+	html div class: 'section center animate'; with: [
+		html img src: 'fosdem2012/images/amber.png'.
+		html p: self presentation author.
+          	html p: self presentation description.
+		html p: [
+			html with: self presentation email]].
+! !
+
+SweSUGSlide subclass: #SweSUGWhatIsAmberSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUGWhatIsAmberSlide methodsFor: 'accessing'!
+
+id
+	^'WhatIsAmber'
+! !
+
+!SweSUGWhatIsAmberSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html img: 'esug2011/images/balloon.jpg'.
+		html h1 with: 'Amber in a nutshell'.
+		html h2 with: 'Amber is a true Smalltalk'.
+		html h2 with: 'It compiles to and runs on/in JavaScript'.
+		html h2 with: 'MIT license'.
+		html h2 class: 'fancy'; with: 'Amber is way cool!!']
+! !
+
+SweSUGSlide subclass: #SweSUGWorkspaceSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!SweSUGWorkspaceSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#18bd7d'
+!
+
+id
+	^'workspace'
+!
+
+renderSlideOn: html
+	| workspace |
+	workspace := SourceArea new.
+	html div class: 'section center'; with: [
+		html h1 with: 'Give Amber a try!!'.
+		workspace renderOn: html.
+		html div with: [
+			html button
+				with: 'DoIt';
+				onClick: [workspace doIt].
+			html button
+				with: 'PrintIt';
+				onClick: [workspace printIt].
+			html button
+				with: 'InspectIt';
+				onClick: [workspace inspectIt]]]
+! !
+
+Slide subclass: #WhatIsJtalkSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!WhatIsJtalkSlide methodsFor: 'accessing'!
+
+id
+	^'WhatIsJtalk'
+! !
+
+!WhatIsJtalkSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html div class: 'section center'; with: [
+		html h1 with: 'Jtalk in a nutshell'.
+		html h2 with: 'Jtalk is an implementation of Smalltalk'.
+		html h2 with: 'Jtalk runs on top of the JavaScript runtime'.
+		html h2 with: 'Jtalk is an opensource project (MIT)'.
+		html h2 class: 'fancy'; with: 'Jtalk is cool!!']
+! !
+
+Slide subclass: #WorkspaceSlide
+	instanceVariableNames: ''
+	package: 'Presentation'!
+
+!WorkspaceSlide methodsFor: 'accessing'!
+
+backgroundColor
+	^'#18bd7d'
+!
+
+id
+	^'workspace'
+!
+
+renderSlideOn: html
+	| workspace |
+	workspace := SourceArea new.
+	html div class: 'section center'; with: [
+		html h1 with: 'Give Jtalk a try!!'.
+		workspace renderOn: html.
+		html div with: [
+			html button
+				with: 'DoIt';
+				onClick: [workspace doIt].
+			html button
+				with: 'PrintIt';
+				onClick: [workspace printIt].
+			html button
+				with: 'InspectIt';
+				onClick: [workspace inspectIt]]]
+! !
+

processing/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html> 
+<html> 
+  <head> 
+    <title>using Processing.js with Amber Smalltalk</title> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
+    <meta name="author" content="Stefan Krecher" /> 
+    <link rel="stylesheet" type="text/css" href='css/style.css' /> 
+    <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/> 
+    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'> 
+    <script type='text/javascript' src='../../js/amber.js'></script> 
+    <script type='text/javascript' src='../../js/lib/showdown.js'></script> 
+	<script type="text/javascript" src="processing-1.4.1.js"></script>
+  </head> 
+  <body> 
+	A Clock made with <a href="http://processingjs.org">Processing.js</a> and Amber
+	<p>Examine the <button onClick="smalltalk.Browser._openOn_(smalltalk.ProcessingClock)"> ProcessingClock class</button></p> 
+	<p><canvas id="canvas1" width="200" height="200"></canvas></p>
+	<script id="script1" type="text/javascript">
+		// Simple way to attach js code to the canvas is by using a function
+		function sketchProc(processing) {
+			// Override draw function, by default it will be called 60 times per second
+			processing.draw = function() {};
+		}
+
+		var canvas = document.getElementById("canvas1");
+		// attaching the sketchProc function to the canvas
+		var p = new Processing(canvas, sketchProc);
+	</script>
+	   
+	<script type='text/javascript'> loadAmber(
+		{
+			files: ['Processing-Examples.js'],
+			prefix: 'examples/processing/js',
+			packages: [ 'Processing-Examples' ],
+			ready: function() {
+				smalltalk.ProcessingClock._init() 
+			}
+		}) 
+	</script> 
+	
+  </body> 
+</html> 

processing/js/Processing-Examples.deploy.js

@@ -0,0 +1,78 @@
+smalltalk.addPackage('Processing-Examples', {});
+smalltalk.addClass('ProcessingClock', smalltalk.Object, ['processing', 'centerX', 'centerY', 'maxArmLength'], 'Processing-Examples');
+smalltalk.addMethod(
+"_draw",
+smalltalk.method({
+selector: "draw",
+fn: function () {
+    var self = this;
+    var drawBlock;
+    drawBlock = function () {var now;var hoursPosition;var minutesPosition;var secondsPosition;smalltalk.send(self['@processing'], "_background_", [224]);now = smalltalk.send(smalltalk.Date || Date, "_new", []);hoursPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_hours", []), "_\\\\", [12]), "__plus", [smalltalk.send(now, "_minutes", [])]), "__slash", [60]), "__slash", [12]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [hoursPosition, 0.5, 5]);minutesPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_minutes", []), "__plus", [smalltalk.send(now, "_seconds", [])]), "__slash", [60]), "__slash", [60]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [minutesPosition, 0.8, 3]);secondsPosition = smalltalk.send(smalltalk.send(now, "_seconds", []), "__slash", [60]);return smalltalk.send(self, "_drawArm_lengthScale_weight_", [secondsPosition, 0.9, 1]);};
+    return drawBlock;
+}
+}),
+smalltalk.ProcessingClock);
+
+smalltalk.addMethod(
+"_drawArm_lengthScale_weight_",
+smalltalk.method({
+selector: "drawArm:lengthScale:weight:",
+fn: function (aPosition, aLengthScale, aWeight) {
+    var self = this;
+    var myDX;
+    var myDY;
+    smalltalk.send(self['@processing'], "_strokeWeight_", [aWeight]);
+    myDX = smalltalk.send(self['@centerX'], "__plus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_sin_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
+    myDY = smalltalk.send(self['@centerY'], "__minus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_cos_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
+    smalltalk.send(self['@processing'], "_line_y_dX_dy_", [self['@centerX'], self['@centerY'], myDX, myDY]);
+    return self;
+}
+}),
+smalltalk.ProcessingClock);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function () {
+    var self = this;
+    self['@processing'] = Processing.instances[0];
+    self['@centerX'] = smalltalk.send(smalltalk.send(self['@processing'], "_width", []), "__slash", [2]);
+    self['@centerY'] = smalltalk.send(smalltalk.send(self['@processing'], "_height", []), "__slash", [2]);
+    self['@maxArmLength'] = smalltalk.send(smalltalk.Math || Math, "_min_or_", [self['@centerX'], self['@centerY']]);
+    return self;
+}
+}),
+smalltalk.ProcessingClock);
+
+smalltalk.addMethod(
+"_processing",
+smalltalk.method({
+selector: "processing",
+fn: function () {
+    var self = this;
+    return self['@processing'];
+}
+}),
+smalltalk.ProcessingClock);
+
+
+smalltalk.addMethod(
+"_init",
+smalltalk.method({
+selector: "init",
+fn: function () {
+    var self = this;
+    var clock;
+    var processing;
+    var block;
+    clock = smalltalk.send(smalltalk.ProcessingClock || ProcessingClock, "_new", []);
+    processing = smalltalk.send(clock, "_processing", []);
+    block = smalltalk.send(clock, "_draw", []);
+    processing.draw = block;
+    return self;
+}
+}),
+smalltalk.ProcessingClock.klass);
+
+

processing/js/Processing-Examples.js

@@ -0,0 +1,103 @@
+smalltalk.addPackage('Processing-Examples', {});
+smalltalk.addClass('ProcessingClock', smalltalk.Object, ['processing', 'centerX', 'centerY', 'maxArmLength'], 'Processing-Examples');
+smalltalk.addMethod(
+"_draw",
+smalltalk.method({
+selector: "draw",
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    var drawBlock;
+    drawBlock = function () {var now;var hoursPosition;var minutesPosition;var secondsPosition;smalltalk.send(self['@processing'], "_background_", [224]);now = smalltalk.send(smalltalk.Date || Date, "_new", []);hoursPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_hours", []), "_\\\\", [12]), "__plus", [smalltalk.send(now, "_minutes", [])]), "__slash", [60]), "__slash", [12]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [hoursPosition, 0.5, 5]);minutesPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_minutes", []), "__plus", [smalltalk.send(now, "_seconds", [])]), "__slash", [60]), "__slash", [60]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [minutesPosition, 0.8, 3]);secondsPosition = smalltalk.send(smalltalk.send(now, "_seconds", []), "__slash", [60]);return smalltalk.send(self, "_drawArm_lengthScale_weight_", [secondsPosition, 0.9, 1]);};
+    return drawBlock;
+},
+args: [],
+source: "draw\x0a| drawBlock |\x0a\x0adrawBlock := [\x0a  | now hoursPosition minutesPosition secondsPosition |  \x0a  processing background: 224.\x0a  \x0a  now := Date new.\x0a  \x0a  \x22Moving hours arm by small increments\x22\x0a   hoursPosition := now hours \x5c\x5c 12 + now minutes / 60 / 12.\x0a   self drawArm: hoursPosition lengthScale: 0.5 weight: 5.\x0a   \x0a   \x22Moving minutes arm by small increments\x22\x0a    minutesPosition := now minutes + now seconds / 60 / 60.\x0a    self drawArm: minutesPosition lengthScale: 0.80 weight: 3.\x0a\x0a    \x22Moving hour arm by second increments\x22\x0a    secondsPosition := now seconds / 60.\x0a    self drawArm: secondsPosition lengthScale: 0.90 weight: 1.\x0a  ].\x0a\x0a^drawBlock",
+messageSends: ["background:", "new", "/", "+", "minutes", "\x5c\x5c\x5c\x5c", "hours", "drawArm:lengthScale:weight:", "seconds"],
+referencedClasses: ["Date"]
+}),
+smalltalk.ProcessingClock);
+
+smalltalk.addMethod(
+"_drawArm_lengthScale_weight_",
+smalltalk.method({
+selector: "drawArm:lengthScale:weight:",
+category: 'not yet classified',
+fn: function (aPosition, aLengthScale, aWeight) {
+    var self = this;
+    var myDX;
+    var myDY;
+    smalltalk.send(self['@processing'], "_strokeWeight_", [aWeight]);
+    myDX = smalltalk.send(self['@centerX'], "__plus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_sin_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
+    myDY = smalltalk.send(self['@centerY'], "__minus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_cos_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
+    smalltalk.send(self['@processing'], "_line_y_dX_dy_", [self['@centerX'], self['@centerY'], myDX, myDY]);
+    return self;
+},
+args: ["aPosition", "aLengthScale", "aWeight"],
+source: "drawArm: aPosition lengthScale: aLengthScale weight: aWeight\x0a| myDX myDY |\x0aprocessing strokeWeight: aWeight.\x0amyDX := centerX \x0a\x09\x09\x09+ ((Math sin: (aPosition * 2 * Math PI))\x0a\x09\x09\x09* aLengthScale * maxArmLength).\x0amyDY := centerY \x0a\x09\x09\x09- ((Math cos: (aPosition * 2 * Math PI))\x0a\x09\x09\x09* aLengthScale * maxArmLength).\x0a\x0aprocessing line: centerX y: centerY dX: myDX dy: myDY.",
+messageSends: ["strokeWeight:", "+", "*", "sin:", "PI", "-", "cos:", "line:y:dX:dy:"],
+referencedClasses: ["Math"]
+}),
+smalltalk.ProcessingClock);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    self['@processing'] = Processing.instances[0];
+    self['@centerX'] = smalltalk.send(smalltalk.send(self['@processing'], "_width", []), "__slash", [2]);
+    self['@centerY'] = smalltalk.send(smalltalk.send(self['@processing'], "_height", []), "__slash", [2]);
+    self['@maxArmLength'] = smalltalk.send(smalltalk.Math || Math, "_min_or_", [self['@centerX'], self['@centerY']]);
+    return self;
+},
+args: [],
+source: "initialize\x0aprocessing := <Processing.instances[0]>.\x0acenterX := processing width / 2.\x0acenterY := processing height / 2.\x0amaxArmLength := Math min: centerX or: centerY.",
+messageSends: ["/", "width", "height", "min:or:"],
+referencedClasses: ["Math"]
+}),
+smalltalk.ProcessingClock);
+
+smalltalk.addMethod(
+"_processing",
+smalltalk.method({
+selector: "processing",
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    return self['@processing'];
+},
+args: [],
+source: "processing\x0a^processing",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ProcessingClock);
+
+
+smalltalk.addMethod(
+"_init",
+smalltalk.method({
+selector: "init",
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    var clock;
+    var processing;
+    var block;
+    clock = smalltalk.send(smalltalk.ProcessingClock || ProcessingClock, "_new", []);
+    processing = smalltalk.send(clock, "_processing", []);
+    block = smalltalk.send(clock, "_draw", []);
+    processing.draw = block;
+    return self;
+},
+args: [],
+source: "init\x0a| clock processing block |\x0aclock := ProcessingClock new .\x0aprocessing := clock processing.\x0ablock := clock draw.\x0a<processing.draw=block>\x0a ",
+messageSends: ["new", "processing", "draw"],
+referencedClasses: ["ProcessingClock"]
+}),
+smalltalk.ProcessingClock.klass);
+
+

processing/st/Processing-Examples.st

@@ -0,0 +1,66 @@
+Smalltalk current createPackage: 'Processing-Examples' properties: #{}!
+Object subclass: #ProcessingClock
+	instanceVariableNames: 'processing centerX centerY maxArmLength'
+	package: 'Processing-Examples'!
+
+!ProcessingClock methodsFor: 'not yet classified'!
+
+draw
+| drawBlock |
+
+drawBlock := [
+  | now hoursPosition minutesPosition secondsPosition |  
+  processing background: 224.
+  
+  now := Date new.
+  
+  "Moving hours arm by small increments"
+   hoursPosition := now hours \\ 12 + now minutes / 60 / 12.
+   self drawArm: hoursPosition lengthScale: 0.5 weight: 5.
+   
+   "Moving minutes arm by small increments"
+    minutesPosition := now minutes + now seconds / 60 / 60.
+    self drawArm: minutesPosition lengthScale: 0.80 weight: 3.
+
+    "Moving hour arm by second increments"
+    secondsPosition := now seconds / 60.
+    self drawArm: secondsPosition lengthScale: 0.90 weight: 1.
+  ].
+
+^drawBlock
+!
+
+drawArm: aPosition lengthScale: aLengthScale weight: aWeight
+| myDX myDY |
+processing strokeWeight: aWeight.
+myDX := centerX 
+			+ ((Math sin: (aPosition * 2 * Math PI))
+			* aLengthScale * maxArmLength).
+myDY := centerY 
+			- ((Math cos: (aPosition * 2 * Math PI))
+			* aLengthScale * maxArmLength).
+
+processing line: centerX y: centerY dX: myDX dy: myDY.
+!
+
+initialize
+processing := <Processing.instances[0]>.
+centerX := processing width / 2.
+centerY := processing height / 2.
+maxArmLength := Math min: centerX or: centerY.
+!
+
+processing
+^processing
+! !
+
+!ProcessingClock class methodsFor: 'not yet classified'!
+
+init
+| clock processing block |
+clock := ProcessingClock new .
+processing := clock processing.
+block := clock draw.
+<processing.draw=block>
+! !
+

trysmalltalk/index.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+<title>TrySmalltalk</title>
+<script src="../../js/amber.js" type="text/javascript"></script>
+</head>
+<body>
+<script type="text/javascript"> 
+	loadAmber({
+		files: ['TrySmalltalk.js'],
+		prefix: 'examples/trysmalltalk/js',
+		ready: function() {
+			smalltalk.Browser._openOn_(smalltalk.ProfStef)
+			smalltalk.TrySmalltalkWidget._open();
+		}}); 
+</script>
+
+</body>
+</html>

trysmalltalk/js/TrySmalltalk.deploy.js

@@ -0,0 +1,838 @@
+smalltalk.addPackage('TrySmalltalk', {});
+smalltalk.addClass('AbstractTutorial', smalltalk.Object, [], 'TrySmalltalk');
+smalltalk.addMethod(
+"_indexOfLesson_",
+smalltalk.method({
+selector: "indexOfLesson:",
+fn: function (aSelector){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tableOfContents", []), "_indexOf_", [aSelector]);
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_lessonAt_",
+smalltalk.method({
+selector: "lessonAt:",
+fn: function (anInteger){
+var self=this;
+var lessonSelector=nil;
+(lessonSelector=smalltalk.send(smalltalk.send(self, "_tableOfContents", []), "_at_", [anInteger]));
+return smalltalk.send(self, "_perform_", [lessonSelector]);
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_size",
+smalltalk.method({
+selector: "size",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tableOfContents", []), "_size", []);
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_tableOfContents",
+smalltalk.method({
+selector: "tableOfContents",
+fn: function (){
+var self=this;
+return ["welcome", "testLesson", "theEnd"];
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_testLesson",
+smalltalk.method({
+selector: "testLesson",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Test Lesson", "\x22This lesson is a test\x22"]);
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_theEnd",
+smalltalk.method({
+selector: "theEnd",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["The End", "\x22And that'd be pretty much it :)\x22"]);
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_welcome",
+smalltalk.method({
+selector: "welcome",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Welcome", "\x22Hi, this is a test tutorial.\x22"]);
+return self;}
+}),
+smalltalk.AbstractTutorial);
+
+
+
+smalltalk.addClass('SmalltalkSyntaxTutorial', smalltalk.AbstractTutorial, [], 'TrySmalltalk');
+smalltalk.addMethod(
+"_basicTypesArray",
+smalltalk.method({
+selector: "basicTypesArray",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Array", "\x22Literal arrays are created at parse time:\x22\x0a\x0a#(1 2 3).\x0a\x0a#( 1 2 3 #(4 5 6)) size.\x0a\x0a#(1 2 4) isEmpty.\x0a\x0a#(1 2 3) first.\x0a\x0a#('hello' 'Javascript') at: 2 put: 'Smalltalk'; yourself.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesCharacters",
+smalltalk.method({
+selector: "basicTypesCharacters",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Characters", "\x22A Character can be instantiated using $ operator:\x22\x0a\x0a$A.\x0a\x0a$A class.\x0a\x0a$B charCode.\x0a\x0aCharacter cr.\x0a\x0aCharacter space.\x0a\x0a\x22You can print all 256 characters of the ASCII extended set:\x22\x0a\x0aCharacter allByteCharacters.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesDynamicArray",
+smalltalk.method({
+selector: "basicTypesDynamicArray",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Dynamic Array", "\x22Dynamic Arrays are created at execution time:\x22\x0a\x0a{ (2+3) . (6*6) }.\x0a\x0a{ (2+3) . (6*6) . 'hello', ' Stef'} size.\x0a\x0a\x0a{ ProfStef } first next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesNumbers",
+smalltalk.method({
+selector: "basicTypesNumbers",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Numbers", "\x22You now know how to execute Smalltalk code. \x0a\x0aNow let's talk about basic objects.\x0a\x0a1, 2, 100, 2/3 ... are Numbers, and respond to many messages evaluating mathematical expressions.\x0aEvaluate these ones:\x22\x0a\x0a2.\x0a\x0a(1/3).\x0a\x0a(1/3) + (4/5).\x0a\x0a(18/5) rounded.\x0a\x0a1 class.\x0a\x0a1 negated.\x0a\x0a1 negated negated.\x0a\x0a(1 + 3) odd.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesString",
+smalltalk.method({
+selector: "basicTypesString",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Strings", "\x22A String is a collection of characters. Use single quotes to create a String object. Print these expressions:\x22\x0a\x0a'ProfStef'.\x0a\x0a'ProfStef' size.\x0a\x0a'abc' asUppercase.\x0a\x0a'Hello World' reversed. \x0a\x0a\x22You can access each character using at: message\x22\x0a\x0a'ProfStef' at: 1.\x0a\x0a\x22String concatenation uses the comma operator:\x22\x0a\x0a'ProfStef', ' is cool'.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesSymbol",
+smalltalk.method({
+selector: "basicTypesSymbol",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Symbols", "\x22A Symbol is a String which is guaranteed to be globally unique. \x0a\x0aThere is one and only one Symbol #ProfStef. There may be several 'ProfStef' String objects.\x0a\x0a(Message == returns true if the two objects are the SAME)\x22\x0a\x0a'ProfStef' asSymbol.\x0a\x0a#ProfStef asString.\x0a\x0a(2 asString) == (2 asString).\x0a\x0a(2 asString) asSymbol == (2 asString) asSymbol.\x0a\x0a\x0a(Smalltalk at: #ProfStef) next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_blocks",
+smalltalk.method({
+selector: "blocks",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Blocks", "\x22Cascade is cool ! Let's talk about blocks.\x0a\x0aBlocks are anonymous methods that can be stored into variables and executed on demand.\x0a\x0aBlocks are delimited by square brackets: []\x22\x0a\x0a[Transcript open].\x0a\x0a\x22does not open a Transcript because the block is not executed.\x0a\x0aHere is a block that adds 2 to its argument (its argument is named x):\x22\x0a\x0a[:x | x+2].\x0a\x0a\x22We can execute a block by sending it value messages.\x22\x0a\x0a[:x | x+2] value: 5.\x0a\x0a[Transcript open] value.\x0a\x0a[:x | x+2] value: 10.\x0a\x0a[:x :y| x + y] value:3 value:5.\x0a\x0a[ProfStef next] value."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_blocksAssignation",
+smalltalk.method({
+selector: "blocksAssignation",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Block assignation", "\x22Blocks can be assigned to a variable then executed later.\x0a\x0aNote that |b| is the declaration of a variable named 'b' and that ':=' assigns a value to a variable.\x0a\x0aSelect the three lines then Print It:\x22\x0a\x0a|b|\x0ab := [:x | x+2].\x0ab value: 12.\x0a\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_conditionals",
+smalltalk.method({
+selector: "conditionals",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Conditionals", "\x22Conditionals are just messages sent to Boolean objects\x22\x0a\x0a1 < 2\x0a  ifTrue: [100]\x0a  ifFalse: [42].\x0a\x0a\x22Here the message is ifTrue:ifFalse\x0a\x0aTry this:\x22\x0a\x0aTranscript open.\x0a\x0a3 > 10 \x0a\x09ifTrue: [Transcript show: 'maybe there''s a bug ....']\x0a\x09ifFalse: [Transcript show: 'No : 3 is less than 10'].\x0a\x0a3 = 3 ifTrue: [ProfStef next]."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_debugger",
+smalltalk.method({
+selector: "debugger",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Debugger", "\x22The Debugger may be the most famous tool of Smalltalk environments. It will open as soon as an unmanaged Exception occurs. \x0a\x0aThe following code will open the debugger.\x0a\x0a***This should be rethought completely***\x22\x0a\x0a\x0a "]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_doingVSPrinting",
+smalltalk.method({
+selector: "doingVSPrinting",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Doing VS Printing: Doing", "\x22Cool ! (I like to say Cooool :) ).\x0aYou've just executed a Smalltalk expression.\x0aMore precisely, you sent the message 'next' to ProfStef class (it's me !).\x0a\x0aNote you can run this tutorial again by evaluating: 'ProfStef go'. \x0a'ProfStef previous' returns to the previous lesson.\x0a\x0aYou can also Do It using the keyboard shortcut 'CTRL d'\x0a\x0aTry to evaluate this expression:\x22\x0a\x0awindow alert: 'hello world!'.\x0a\x0a\x22Then go to the next lesson:\x22\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_instanciation",
+smalltalk.method({
+selector: "instanciation",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Instanciation", "\x22Objects are instances of their class. Usually, we send the message #new to a class for creating an instance of this class.\x0a\x0aFor example, let's create an instance of the class Array:\x22\x0a\x0aArray new\x0a\x09add: 'Some text';\x0a\x09add: 3.;\x0a\x09yourself.\x0a\x0a\x22See the array we've created? Actually, #('Some text' 3) is just a shorthand for instantiating arrays.\x22\x0a\x0a\x22If we use a variable to keep track of this object, we'll be able to do stuff with it.\x22\x0a\x0a\x22The following code must be ran all at one, as the 'anArray' variable will cease to exist once the execution finishes:\x22\x0a\x0a|anArray|\x0a\x0aanArray := Array new\x0a\x09add: 'Some text';\x0a\x09add: 3;\x0a\x09yourself.\x0a\x0aTranscript show: anArray; cr.\x0a\x0aanArray remove: 3.\x0a\x0aTranscript show: anArray; cr.\x0a\x0aanArray add: 'Some more text!'.\x0a\x0aTranscript show: anArray; cr.\x0a\x09\x0a\x22I'll put myself in an instance of a class named Dictionary and go to the next lesson:\x22\x0a\x0a((Dictionary new add: ('move on!' -> ProfStef)) at: 'move on!') next"]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_iterators",
+smalltalk.method({
+selector: "iterators",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Iterators", "\x22The message do: is sent to a collection of objects (Array, Dictionary, String, etc), evaluating the block for each element.\x0a\x0aHere we want to print all the numbers on the Transcript (a console)\x22\x0a\x0a#(11 38 3 -2 10) do: [:each |\x0a     Transcript show: each printString; cr].\x0a\x0a\x22Some other really nice iterators\x22\x0a\x0a#(11 38 3 -2 10) collect: [:each | each negated].\x0a\x0a#(11 38 3 -2 10) collect: [:each | each odd].\x0a\x0a#(11 38 3 -2 10) select: [:each | each odd].\x0a\x0a#(11 38 3 -2 10) select: [:each | each > 10].\x0a\x0a#(11 38 3 -2 10) reject: [:each | each > 10].\x0a\x0a#(11 38 3 -2 10) \x0a     do: [:each | Transcript show: each printString]\x0a     separatedBy: [Transcript show: '.'].\x0a\x0a\x0a(Smalltalk current classes select: [:eachClass | eachClass name = 'ProfStef']) do: [:eachProfstef | eachProfstef next]."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_loops",
+smalltalk.method({
+selector: "loops",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Loops", "\x22Loops are high-level collection iterators, implemented as regular methods.\x22\x0a\x0a\x22Basic loops:\x0a  to:do:\x0a  to:by:do\x22\x0a\x0a1 to: 100 do:\x0a  [:i | Transcript show: i asString; cr ].\x0a\x0a1 to: 100 by: 3 do: [:i | Transcript show: i asString; cr].\x0a\x0a100 to: 0 by: -2 do: \x0a    [:i | Transcript show: i asString; cr].\x0a\x0a1 to: 1 do: [:i | ProfStef next]."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_mathematicalPrecedence",
+smalltalk.method({
+selector: "mathematicalPrecedence",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Mathematical precedence", "\x22Traditional precedence rules from mathematics do not follow in Smalltalk.\x22\x0a\x0a2 * 10 + 2.\x0a\x0a\x22Here the message * is sent to 2, which answers 20, then 20 receive the message +\x0a\x0aRemember that all messages always follow a simple left-to-right precedence rule, * without exceptions *.\x22\x0a\x0a2 + 2 * 10.\x0a\x0a2 + (2 * 10).\x0a\x0a8 - 5 / 2.\x0a\x0a(8 - 5) / 2.\x0a\x0a8 - (5 / 2).\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxBinary",
+smalltalk.method({
+selector: "messageSyntaxBinary",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Binary messages", "\x22Binary messages have the following form:\x0a    anObject + anotherObject\x22\x0a\x0a3 * 2.\x0a\x0aDate today year = 2011.\x0a\x0afalse | false.\x0a\x0atrue & true.\x0a\x0atrue & false.\x0a\x0a10 @ 100.\x0a\x0a10 <= 12.\x0a\x0a'ab', 'cd'.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxCascade",
+smalltalk.method({
+selector: "messageSyntaxCascade",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Cascade", "\x22; is the cascade operator. It's useful to send message to the SAME receiver\x0aOpen a Transcript (console):\x22\x0a\x0aTranscript open.\x0a\x0a\x22Then:\x22\x0a\x0aTranscript show: 'hello'.\x0aTranscript show: 'Smalltalk'.\x0aTranscript cr.\x0a\x0a\x22is equivalent to:\x22\x0a\x0aTranscript \x0a\x09   show: 'hello';\x0a\x09   show: 'Smalltalk' ;\x0a\x09   cr.\x0a\x0a\x22You can close the development tools by clicking on the red circle with a cross at the bottom left of the website.\x0aTry to go to the next lesson with a cascade of two 'next' messages:\x22\x0a\x0aProfStef"]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxCascadeShouldNotBeHere",
+smalltalk.method({
+selector: "messageSyntaxCascadeShouldNotBeHere",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Lost ?", "\x22Hey, you should not be here !! \x0a\x0aGo back and use a cascade !\x22\x0a\x0aProfStef previous."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxExecutionOrder",
+smalltalk.method({
+selector: "messageSyntaxExecutionOrder",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Execution order", "\x22Unary messages are executed first, then binary messages and finally keyword messages:\x0a    Unary > Binary > Keywords\x22\x0a\x0a2.5 + 3.8 rounded.\x0a\x0a3 max: 2 + 2.\x0a  \x0a(0@0) class.\x0a\x0a0@0 x: 100.\x0a\x0a(0@0 x: 100) class.\x0a\x0a\x22Between messages of similar precedence, expressions are executed from left to right\x22\x0a\x0a-12345 negated asString reversed.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxExecutionOrderParentheses",
+smalltalk.method({
+selector: "messageSyntaxExecutionOrderParentheses",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Parentheses", "\x22Use parentheses to change order of evaluation\x22\x0a\x0a(2.5 + 3.8) rounded.\x0a\x0a(3 max: 2) + 2.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxKeyword",
+smalltalk.method({
+selector: "messageSyntaxKeyword",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Keyword messages", "\x22Keyword Messages are messages with arguments. They have the following form:\x0a    anObject akey: anotherObject akey2: anotherObject2\x22\x0a\x0a'Web development is a good deal of pain' copyFrom: 1 to: 30\x0a\x0a\x22The message is copyFrom:to: sent to the String 'Web development is a good deal of pain'\x22\x0a\x0a1 max: 3.\x0a\x0aArray with: 'hello' with: 2 with: Smalltalk.\x0a\x0a\x22The message is with:with:with: implemented on class Array. Note you can also write\x22\x0a\x0aArray\x0a\x09with: 'Hi there!'\x0a\x09with: 2\x0a\x09with: Smalltalk.\x0a\x09\x0aProfStef perform: 'next'."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxUnary",
+smalltalk.method({
+selector: "messageSyntaxUnary",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Unary messages", "\x22Messages are sent to objects. There are three types of message: Unary, Binary and Keyword.\x0a\x0aUnary messages have the following form:\x0a    anObject aMessage \x0a\x0aYou've already sent unary messages. For example:\x22\x0a\x0a1 class.\x0a\x0afalse not.\x0a\x0aDate today.\x0a\x0aNumber pi.\x0a\x0a\x22And of course: \x22\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_pharoEnvironment",
+smalltalk.method({
+selector: "pharoEnvironment",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Pharo environment", "\x22Every Smalltalk system is full of objects.\x0aThere are windows, text, numbers, dates, colors, points and much more.\x0aYou can interact with objects in a much more direct way than is possible with other programming languages.\x0a\x0aEvery object understands the message 'explore'. As a result, you get an Explorer window that shows details about the object.\x22\x0a\x0aDate today explore.\x0a\x0a\x22This shows that the date object consists of a point in time (start) and a duration (one day long).\x22\x0a\x0aProfStef explore.\x0a\x0a\x22You see, ProfStef class has a lot of objects. Let's take a look at my code:\x22\x0a\x0aProfStef browse.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_printing",
+smalltalk.method({
+selector: "printing",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Doing VS Printing: Printing", "\x22Now you're a Do It master ! Let's talk about printing.\x0aIt's a Do It which prints the result next to the expression you've selected.\x0aFor example, select the text below, and click on 'PrintIt':\x22\x0a\x0a1 + 2.\x0a\x0a\x22As with 'DoIt', there is also a shortcut to execute this command.\x0a\x0aTry CTRL-p on the following expressions:\x22\x0a\x0aDate today.\x0a\x0a\x22The result is selected, so you can erase it using the backspace key. Try it !\x22\x0a\x0aDate today asDateString.\x0a\x0aDate today asTimeString.\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_reflection",
+smalltalk.method({
+selector: "reflection",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Reflection", "\x22You can inspect and change the system at runtime.\x0a\x0aTake a look at the source code of the method #and: of the class Boolean:\x22\x0a\x0a(Boolean methodDictionary at: 'and:') source.\x0a\x0a\x22Or all the methods it sends:\x22\x0a\x0a(Boolean methodDictionary at: 'and:') messageSends.\x0a\x0a\x22Here's all the methods I implement:\x22\x0a\x0aProfStef methodDictionary.\x0a\x0a\x22Let's create a new method to go to the next lesson:\x22\x0a\x0a|newMethod|\x0anewMethod := Compiler new load: 'goToNextLesson ProfStef next.' forClass: ProfStef.\x0aProfStef class addCompiledMethod: newMethod\x0a\x0a\x22Wow! I can't wait to use my new method!\x22\x0a\x0aProfStef goToNextLesson."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_reflectionContinued",
+smalltalk.method({
+selector: "reflectionContinued",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Reflection continued", "\x22So cool, isn't it ?  Before going further, let's remove this method:\x22\x0a\x0aProfStef class methodAt: #goToNextLesson.\x0a\x0aProfStef class removeCompiledMethod: (ProfStef class methodAt: #goToNextLesson).\x0a\x0aProfStef class methodAt: #goToNextLesson.\x0a\x0a\x0a\x22Then move forward:\x22\x0a\x0aProfStef perform:#next"]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_tableOfContents",
+smalltalk.method({
+selector: "tableOfContents",
+fn: function (){
+var self=this;
+return ["welcome", "doingVSPrinting", "printing", "basicTypesNumbers", "basicTypesString", "basicTypesArray", "basicTypesDynamicArray", "messageSyntaxUnary", "messageSyntaxBinary", "messageSyntaxKeyword", "messageSyntaxExecutionOrder", "messageSyntaxExecutionOrderParentheses", "mathematicalPrecedence", "messageSyntaxCascade", "messageSyntaxCascadeShouldNotBeHere", "blocks", "blocksAssignation", "conditionals", "loops", "iterators", "instanciation", "reflection", "reflectionContinued", "theEnd"];
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_theEnd",
+smalltalk.method({
+selector: "theEnd",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Tutorial done !", "\x22This tutorial is done. Enjoy programming Smalltalk with Amber. \x0a\x0aYou can run this tutorial again by evaluating: ProfStef go.\x0a\x0aSee you soon !\x22\x0a"]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_welcome",
+smalltalk.method({
+selector: "welcome",
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Welcome", " \x22Hello! I'm Professor Stef. \x0a\x0aYou must want me to help you learn Smalltalk.\x0a\x0aSo let's go to the first lesson.  Select the text below and click on the 'DoIt' button\x22\x0a\x0aProfStef next."]);
+return self;}
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+
+
+smalltalk.addClass('Lesson', smalltalk.Object, ['title', 'contents'], 'TrySmalltalk');
+smalltalk.addMethod(
+"_contents",
+smalltalk.method({
+selector: "contents",
+fn: function (){
+var self=this;
+return (($receiver = self['@contents']) == nil || $receiver == undefined) ? (function(){return (self['@contents']="");})() : $receiver;
+return self;}
+}),
+smalltalk.Lesson);
+
+smalltalk.addMethod(
+"_contents_",
+smalltalk.method({
+selector: "contents:",
+fn: function (aString){
+var self=this;
+(self['@contents']=aString);
+return self;}
+}),
+smalltalk.Lesson);
+
+smalltalk.addMethod(
+"_title",
+smalltalk.method({
+selector: "title",
+fn: function (){
+var self=this;
+return (($receiver = self['@title']) == nil || $receiver == undefined) ? (function(){return (self['@title']="");})() : $receiver;
+return self;}
+}),
+smalltalk.Lesson);
+
+smalltalk.addMethod(
+"_title_",
+smalltalk.method({
+selector: "title:",
+fn: function (aString){
+var self=this;
+(self['@title']=aString);
+return self;}
+}),
+smalltalk.Lesson);
+
+
+smalltalk.addMethod(
+"_title_contents_",
+smalltalk.method({
+selector: "title:contents:",
+fn: function (aTitle, someContents){
+var self=this;
+return (function($rec){smalltalk.send($rec, "_title_", [aTitle]);return smalltalk.send($rec, "_contents_", [someContents]);})(smalltalk.send(self, "_new", []));
+return self;}
+}),
+smalltalk.Lesson.klass);
+
+
+smalltalk.addClass('ProfStef', smalltalk.Object, ['tutorialPlayer', 'widget'], 'TrySmalltalk');
+smalltalk.addMethod(
+"_first",
+smalltalk.method({
+selector: "first",
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_first", []);
+return smalltalk.send(self, "_showCurrentLesson", []);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_next",
+smalltalk.method({
+selector: "next",
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_next", []);
+return smalltalk.send(self, "_showCurrentLesson", []);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_previous",
+smalltalk.method({
+selector: "previous",
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_previous", []);
+return smalltalk.send(self, "_showCurrentLesson", []);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_progress",
+smalltalk.method({
+selector: "progress",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send("(", "__comma", [smalltalk.send(self, "_tutorialPositionString", [])]), "__comma", ["/"]), "__comma", [smalltalk.send(self, "_tutorialSizeString", [])]), "__comma", [")"]);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_showCurrentLesson",
+smalltalk.method({
+selector: "showCurrentLesson",
+fn: function (){
+var self=this;
+var lesson=nil;
+(lesson=smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_currentLesson", []));
+smalltalk.send(self['@widget'], "_contents_", [smalltalk.send(lesson, "_contents", [])]);
+smalltalk.send(self['@widget'], "_setTitle_", [smalltalk.send(smalltalk.send(smalltalk.send(lesson, "_title", []), "__comma", [" "]), "__comma", [smalltalk.send(self, "_progress", [])])]);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_tutorialPlayer",
+smalltalk.method({
+selector: "tutorialPlayer",
+fn: function (){
+var self=this;
+return (($receiver = self['@tutorialPlayer']) == nil || $receiver == undefined) ? (function(){return (self['@tutorialPlayer']=smalltalk.send((smalltalk.TutorialPlayer || TutorialPlayer), "_new", []));})() : $receiver;
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_tutorialPositionString",
+smalltalk.method({
+selector: "tutorialPositionString",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_tutorialPosition", []), "_asString", []);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_tutorialSizeString",
+smalltalk.method({
+selector: "tutorialSizeString",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_size", []), "_asString", []);
+return self;}
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_widget_",
+smalltalk.method({
+selector: "widget:",
+fn: function (aWidget){
+var self=this;
+(self['@widget']=aWidget);
+return self;}
+}),
+smalltalk.ProfStef);
+
+
+smalltalk.ProfStef.klass.iVarNames = ['instance'];
+smalltalk.addMethod(
+"_default",
+smalltalk.method({
+selector: "default",
+fn: function (){
+var self=this;
+return (($receiver = self['@instance']) == nil || $receiver == undefined) ? (function(){return (self['@instance']=smalltalk.send(self, "_new", []));})() : $receiver;
+return self;}
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_first",
+smalltalk.method({
+selector: "first",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_default", []), "_first", []);
+return self;}
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_go",
+smalltalk.method({
+selector: "go",
+fn: function (){
+var self=this;
+smalltalk.send(self, "_first", []);
+return self;}
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_next",
+smalltalk.method({
+selector: "next",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_default", []), "_next", []);
+return self;}
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_previous",
+smalltalk.method({
+selector: "previous",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_default", []), "_previous", []);
+return self;}
+}),
+smalltalk.ProfStef.klass);
+
+
+smalltalk.addClass('TrySmalltalkWidget', smalltalk.Widget, ['workspace', 'contents', 'header'], 'TrySmalltalk');
+smalltalk.addMethod(
+"_contents",
+smalltalk.method({
+selector: "contents",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_workspace", []), "_val", []);
+return self;}
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_contents_",
+smalltalk.method({
+selector: "contents:",
+fn: function (aString){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_workspace", []), "_val_", [aString]);
+return self;}
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_renderButtonsOn_",
+smalltalk.method({
+selector: "renderButtonsOn:",
+fn: function (html){
+var self=this;
+(function($rec){smalltalk.send($rec, "_with_", ["DoIt"]);smalltalk.send($rec, "_title_", ["ctrl+d"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_doIt", []);})]);})(smalltalk.send(html, "_button", []));
+(function($rec){smalltalk.send($rec, "_with_", ["PrintIt"]);smalltalk.send($rec, "_title_", ["ctrl+p"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_printIt", []);})]);})(smalltalk.send(html, "_button", []));
+(function($rec){smalltalk.send($rec, "_with_", ["InspectIt"]);smalltalk.send($rec, "_title_", ["ctrl+i"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_inspectIt", []);})]);})(smalltalk.send(html, "_button", []));
+return self;}
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_renderOn_",
+smalltalk.method({
+selector: "renderOn:",
+fn: function (html){
+var self=this;
+(function($rec){smalltalk.send($rec, "_class_", ["profStef"]);smalltalk.send($rec, "_with_", [(function(){return (self['@header']=smalltalk.send(html, "_h2", []));})]);smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_renderOn_", [html]);})]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(self, "_renderButtonsOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
+(function($rec){smalltalk.send($rec, "_widget_", [self]);return smalltalk.send($rec, "_showCurrentLesson", []);})(smalltalk.send((smalltalk.ProfStef || ProfStef), "_default", []));
+return self;}
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_setTitle_",
+smalltalk.method({
+selector: "setTitle:",
+fn: function (aString){
+var self=this;
+smalltalk.send(self['@header'], "_contents_", [(function(html){return smalltalk.send(html, "_with_", [aString]);})]);
+return self;}
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_workspace",
+smalltalk.method({
+selector: "workspace",
+fn: function (){
+var self=this;
+return (($receiver = self['@workspace']) == nil || $receiver == undefined) ? (function(){return (self['@workspace']=smalltalk.send((smalltalk.SourceArea || SourceArea), "_new", []));})() : $receiver;
+return self;}
+}),
+smalltalk.TrySmalltalkWidget);
+
+
+smalltalk.addMethod(
+"_open",
+smalltalk.method({
+selector: "open",
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_new", []), "_appendToJQuery_", [smalltalk.send("body", "_asJQuery", [])]);
+return self;}
+}),
+smalltalk.TrySmalltalkWidget.klass);
+
+
+smalltalk.addClass('TutorialPlayer', smalltalk.Object, ['tutorialPosition', 'tutorial'], 'TrySmalltalk');
+smalltalk.addMethod(
+"_currentLesson",
+smalltalk.method({
+selector: "currentLesson",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tutorial", []), "_lessonAt_", [smalltalk.send(self, "_tutorialPosition", [])]);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_first",
+smalltalk.method({
+selector: "first",
+fn: function (){
+var self=this;
+smalltalk.send(self, "_rewind", []);
+return smalltalk.send(self, "_currentLesson", []);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_last",
+smalltalk.method({
+selector: "last",
+fn: function (){
+var self=this;
+(self['@tutorialPosition']=smalltalk.send(self, "_size", []));
+return smalltalk.send(self, "_currentLesson", []);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_next",
+smalltalk.method({
+selector: "next",
+fn: function (){
+var self=this;
+((($receiver = ((($receiver = smalltalk.send(self, "_tutorialPosition", [])).klass === smalltalk.Number) ? $receiver <smalltalk.send(self, "_size", []) : smalltalk.send($receiver, "__lt", [smalltalk.send(self, "_size", [])]))).klass === smalltalk.Boolean) ? ($receiver ? (function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));})]));
+return smalltalk.send(self, "_currentLesson", []);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_previous",
+smalltalk.method({
+selector: "previous",
+fn: function (){
+var self=this;
+((($receiver = ((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver >(1) : smalltalk.send($receiver, "__gt", [(1)]))).klass === smalltalk.Boolean) ? ($receiver ? (function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver -(1) : smalltalk.send($receiver, "__minus", [(1)])));})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver -(1) : smalltalk.send($receiver, "__minus", [(1)])));})]));
+return smalltalk.send(self, "_currentLesson", []);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_rewind",
+smalltalk.method({
+selector: "rewind",
+fn: function (){
+var self=this;
+(self['@tutorialPosition']=(1));
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_size",
+smalltalk.method({
+selector: "size",
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tutorial", []), "_size", []);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorial",
+smalltalk.method({
+selector: "tutorial",
+fn: function (){
+var self=this;
+return (($receiver = self['@tutorial']) == nil || $receiver == undefined) ? (function(){return (self['@tutorial']=smalltalk.send((smalltalk.SmalltalkSyntaxTutorial || SmalltalkSyntaxTutorial), "_new", []));})() : $receiver;
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorial_",
+smalltalk.method({
+selector: "tutorial:",
+fn: function (aTutorial){
+var self=this;
+(self['@tutorial']=aTutorial);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorialPosition",
+smalltalk.method({
+selector: "tutorialPosition",
+fn: function (){
+var self=this;
+return (($receiver = self['@tutorialPosition']) == nil || $receiver == undefined) ? (function(){smalltalk.send(self, "_rewind", []);return self['@tutorialPosition'];})() : $receiver;
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorialPosition_",
+smalltalk.method({
+selector: "tutorialPosition:",
+fn: function (aTutorialPosition){
+var self=this;
+(self['@tutorialPosition']=aTutorialPosition);
+return self;}
+}),
+smalltalk.TutorialPlayer);
+
+
+

trysmalltalk/js/TrySmalltalk.js

@@ -0,0 +1,1207 @@
+smalltalk.addPackage('TrySmalltalk', {});
+smalltalk.addClass('AbstractTutorial', smalltalk.Object, [], 'TrySmalltalk');
+smalltalk.AbstractTutorial.comment="Parent class of all ProfStef tutorials.\x0a\x0aTo create your own tutorial:\x0a- subclass AbstractTutorial\x0a- implement a few methods which returns a Lesson instance\x0a- implement tutorial which returns a Collection of selectors to the methods you've created."
+smalltalk.addMethod(
+"_indexOfLesson_",
+smalltalk.method({
+selector: "indexOfLesson:",
+category: 'accessing',
+fn: function (aSelector){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tableOfContents", []), "_indexOf_", [aSelector]);
+return self;},
+args: ["aSelector"],
+source: "indexOfLesson: aSelector\x0a\x09^self tableOfContents indexOf: aSelector.",
+messageSends: ["indexOf:", "tableOfContents"],
+referencedClasses: []
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_lessonAt_",
+smalltalk.method({
+selector: "lessonAt:",
+category: 'accessing',
+fn: function (anInteger){
+var self=this;
+var lessonSelector=nil;
+(lessonSelector=smalltalk.send(smalltalk.send(self, "_tableOfContents", []), "_at_", [anInteger]));
+return smalltalk.send(self, "_perform_", [lessonSelector]);
+return self;},
+args: ["anInteger"],
+source: "lessonAt: anInteger\x0a\x09| lessonSelector |\x0a\x09lessonSelector := self tableOfContents at: anInteger.\x0a\x09^ self perform: lessonSelector.",
+messageSends: ["at:", "tableOfContents", "perform:"],
+referencedClasses: []
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_size",
+smalltalk.method({
+selector: "size",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tableOfContents", []), "_size", []);
+return self;},
+args: [],
+source: "size\x0a\x09^ self tableOfContents size",
+messageSends: ["size", "tableOfContents"],
+referencedClasses: []
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_tableOfContents",
+smalltalk.method({
+selector: "tableOfContents",
+category: 'accessing',
+fn: function (){
+var self=this;
+return ["welcome", "testLesson", "theEnd"];
+return self;},
+args: [],
+source: "tableOfContents\x0a^ #(\x0a  'welcome'\x0a  'testLesson'\x0a  'theEnd'\x0a)",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_testLesson",
+smalltalk.method({
+selector: "testLesson",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Test Lesson", "\x22This lesson is a test\x22"]);
+return self;},
+args: [],
+source: "testLesson\x0a\x09^ Lesson\x0a\x09\x09title: 'Test Lesson' \x0a\x09\x09contents: '\x22This lesson is a test\x22'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_theEnd",
+smalltalk.method({
+selector: "theEnd",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["The End", "\x22And that'd be pretty much it :)\x22"]);
+return self;},
+args: [],
+source: "theEnd\x0a\x09^ Lesson\x0a\x09\x09title: 'The End' \x0a\x09\x09contents: '\x22And that''d be pretty much it :)\x22'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.AbstractTutorial);
+
+smalltalk.addMethod(
+"_welcome",
+smalltalk.method({
+selector: "welcome",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Welcome", "\x22Hi, this is a test tutorial.\x22"]);
+return self;},
+args: [],
+source: "welcome\x0a\x09^ Lesson\x0a\x09\x09title: 'Welcome' \x0a\x09\x09contents: '\x22Hi, this is a test tutorial.\x22'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.AbstractTutorial);
+
+
+
+smalltalk.addClass('SmalltalkSyntaxTutorial', smalltalk.AbstractTutorial, [], 'TrySmalltalk');
+smalltalk.SmalltalkSyntaxTutorial.comment="The default ProfStef tutorial to learn Smalltalk syntax"
+smalltalk.addMethod(
+"_basicTypesArray",
+smalltalk.method({
+selector: "basicTypesArray",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Array", "\x22Literal arrays are created at parse time:\x22\x0a\x0a#(1 2 3).\x0a\x0a#( 1 2 3 #(4 5 6)) size.\x0a\x0a#(1 2 4) isEmpty.\x0a\x0a#(1 2 3) first.\x0a\x0a#('hello' 'Javascript') at: 2 put: 'Smalltalk'; yourself.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "basicTypesArray\x0a\x09^ Lesson\x0atitle: 'Basic types: Array' \x0acontents: \x0a'\x22Literal arrays are created at parse time:\x22\x0a\x0a#(1 2 3).\x0a\x0a#( 1 2 3 #(4 5 6)) size.\x0a\x0a#(1 2 4) isEmpty.\x0a\x0a#(1 2 3) first.\x0a\x0a#(''hello'' ''Javascript'') at: 2 put: ''Smalltalk''; yourself.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesCharacters",
+smalltalk.method({
+selector: "basicTypesCharacters",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Characters", "\x22A Character can be instantiated using $ operator:\x22\x0a\x0a$A.\x0a\x0a$A class.\x0a\x0a$B charCode.\x0a\x0aCharacter cr.\x0a\x0aCharacter space.\x0a\x0a\x22You can print all 256 characters of the ASCII extended set:\x22\x0a\x0aCharacter allByteCharacters.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "basicTypesCharacters\x0a\x09^ Lesson\x0atitle: 'Basic types: Characters' \x0acontents: \x0a'\x22A Character can be instantiated using $ operator:\x22\x0a\x0a$A.\x0a\x0a$A class.\x0a\x0a$B charCode.\x0a\x0aCharacter cr.\x0a\x0aCharacter space.\x0a\x0a\x22You can print all 256 characters of the ASCII extended set:\x22\x0a\x0aCharacter allByteCharacters.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesDynamicArray",
+smalltalk.method({
+selector: "basicTypesDynamicArray",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Dynamic Array", "\x22Dynamic Arrays are created at execution time:\x22\x0a\x0a{ (2+3) . (6*6) }.\x0a\x0a{ (2+3) . (6*6) . 'hello', ' Stef'} size.\x0a\x0a\x0a{ ProfStef } first next."]);
+return self;},
+args: [],
+source: "basicTypesDynamicArray\x0a\x09^ Lesson\x0atitle: 'Basic types: Dynamic Array' \x0acontents: \x0a'\x22Dynamic Arrays are created at execution time:\x22\x0a\x0a{ (2+3) . (6*6) }.\x0a\x0a{ (2+3) . (6*6) . ''hello'', '' Stef''} size.\x0a\x0a\x0a{ ProfStef } first next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesNumbers",
+smalltalk.method({
+selector: "basicTypesNumbers",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Numbers", "\x22You now know how to execute Smalltalk code. \x0a\x0aNow let's talk about basic objects.\x0a\x0a1, 2, 100, 2/3 ... are Numbers, and respond to many messages evaluating mathematical expressions.\x0aEvaluate these ones:\x22\x0a\x0a2.\x0a\x0a(1/3).\x0a\x0a(1/3) + (4/5).\x0a\x0a(18/5) rounded.\x0a\x0a1 class.\x0a\x0a1 negated.\x0a\x0a1 negated negated.\x0a\x0a(1 + 3) odd.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "basicTypesNumbers\x0a\x09^ Lesson\x0atitle: 'Basic types: Numbers' \x0acontents: \x0a'\x22You now know how to execute Smalltalk code. \x0a\x0aNow let''s talk about basic objects.\x0a\x0a1, 2, 100, 2/3 ... are Numbers, and respond to many messages evaluating mathematical expressions.\x0aEvaluate these ones:\x22\x0a\x0a2.\x0a\x0a(1/3).\x0a\x0a(1/3) + (4/5).\x0a\x0a(18/5) rounded.\x0a\x0a1 class.\x0a\x0a1 negated.\x0a\x0a1 negated negated.\x0a\x0a(1 + 3) odd.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesString",
+smalltalk.method({
+selector: "basicTypesString",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Strings", "\x22A String is a collection of characters. Use single quotes to create a String object. Print these expressions:\x22\x0a\x0a'ProfStef'.\x0a\x0a'ProfStef' size.\x0a\x0a'abc' asUppercase.\x0a\x0a'Hello World' reversed. \x0a\x0a\x22You can access each character using at: message\x22\x0a\x0a'ProfStef' at: 1.\x0a\x0a\x22String concatenation uses the comma operator:\x22\x0a\x0a'ProfStef', ' is cool'.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "basicTypesString\x0a\x09^ Lesson\x0atitle: 'Basic types: Strings' \x0acontents: \x0a'\x22A String is a collection of characters. Use single quotes to create a String object. Print these expressions:\x22\x0a\x0a''ProfStef''.\x0a\x0a''ProfStef'' size.\x0a\x0a''abc'' asUppercase.\x0a\x0a''Hello World'' reversed. \x0a\x0a\x22You can access each character using at: message\x22\x0a\x0a''ProfStef'' at: 1.\x0a\x0a\x22String concatenation uses the comma operator:\x22\x0a\x0a''ProfStef'', '' is cool''.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_basicTypesSymbol",
+smalltalk.method({
+selector: "basicTypesSymbol",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Basic types: Symbols", "\x22A Symbol is a String which is guaranteed to be globally unique. \x0a\x0aThere is one and only one Symbol #ProfStef. There may be several 'ProfStef' String objects.\x0a\x0a(Message == returns true if the two objects are the SAME)\x22\x0a\x0a'ProfStef' asSymbol.\x0a\x0a#ProfStef asString.\x0a\x0a(2 asString) == (2 asString).\x0a\x0a(2 asString) asSymbol == (2 asString) asSymbol.\x0a\x0a\x0a(Smalltalk at: #ProfStef) next."]);
+return self;},
+args: [],
+source: "basicTypesSymbol\x0a\x09^ Lesson\x0atitle: 'Basic types: Symbols' \x0acontents: \x0a'\x22A Symbol is a String which is guaranteed to be globally unique. \x0a\x0aThere is one and only one Symbol #ProfStef. There may be several ''ProfStef'' String objects.\x0a\x0a(Message == returns true if the two objects are the SAME)\x22\x0a\x0a''ProfStef'' asSymbol.\x0a\x0a#ProfStef asString.\x0a\x0a(2 asString) == (2 asString).\x0a\x0a(2 asString) asSymbol == (2 asString) asSymbol.\x0a\x0a\x0a(Smalltalk at: #ProfStef) next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_blocks",
+smalltalk.method({
+selector: "blocks",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Blocks", "\x22Cascade is cool ! Let's talk about blocks.\x0a\x0aBlocks are anonymous methods that can be stored into variables and executed on demand.\x0a\x0aBlocks are delimited by square brackets: []\x22\x0a\x0a[Transcript open].\x0a\x0a\x22does not open a Transcript because the block is not executed.\x0a\x0aHere is a block that adds 2 to its argument (its argument is named x):\x22\x0a\x0a[:x | x+2].\x0a\x0a\x22We can execute a block by sending it value messages.\x22\x0a\x0a[:x | x+2] value: 5.\x0a\x0a[Transcript open] value.\x0a\x0a[:x | x+2] value: 10.\x0a\x0a[:x :y| x + y] value:3 value:5.\x0a\x0a[ProfStef next] value."]);
+return self;},
+args: [],
+source: "blocks\x0a\x09^ Lesson\x0atitle: 'Blocks' \x0acontents: \x0a'\x22Cascade is cool ! Let''s talk about blocks.\x0a\x0aBlocks are anonymous methods that can be stored into variables and executed on demand.\x0a\x0aBlocks are delimited by square brackets: []\x22\x0a\x0a[Transcript open].\x0a\x0a\x22does not open a Transcript because the block is not executed.\x0a\x0aHere is a block that adds 2 to its argument (its argument is named x):\x22\x0a\x0a[:x | x+2].\x0a\x0a\x22We can execute a block by sending it value messages.\x22\x0a\x0a[:x | x+2] value: 5.\x0a\x0a[Transcript open] value.\x0a\x0a[:x | x+2] value: 10.\x0a\x0a[:x :y| x + y] value:3 value:5.\x0a\x0a[ProfStef next] value.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_blocksAssignation",
+smalltalk.method({
+selector: "blocksAssignation",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Block assignation", "\x22Blocks can be assigned to a variable then executed later.\x0a\x0aNote that |b| is the declaration of a variable named 'b' and that ':=' assigns a value to a variable.\x0a\x0aSelect the three lines then Print It:\x22\x0a\x0a|b|\x0ab := [:x | x+2].\x0ab value: 12.\x0a\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "blocksAssignation\x0a\x09^ Lesson\x0atitle: 'Block assignation' \x0acontents: \x0a'\x22Blocks can be assigned to a variable then executed later.\x0a\x0aNote that |b| is the declaration of a variable named ''b'' and that '':='' assigns a value to a variable.\x0a\x0aSelect the three lines then Print It:\x22\x0a\x0a|b|\x0ab := [:x | x+2].\x0ab value: 12.\x0a\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_conditionals",
+smalltalk.method({
+selector: "conditionals",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Conditionals", "\x22Conditionals are just messages sent to Boolean objects\x22\x0a\x0a1 < 2\x0a  ifTrue: [100]\x0a  ifFalse: [42].\x0a\x0a\x22Here the message is ifTrue:ifFalse\x0a\x0aTry this:\x22\x0a\x0aTranscript open.\x0a\x0a3 > 10 \x0a\x09ifTrue: [Transcript show: 'maybe there''s a bug ....']\x0a\x09ifFalse: [Transcript show: 'No : 3 is less than 10'].\x0a\x0a3 = 3 ifTrue: [ProfStef next]."]);
+return self;},
+args: [],
+source: "conditionals\x0a\x09^ Lesson\x0atitle: 'Conditionals' \x0acontents: \x0a'\x22Conditionals are just messages sent to Boolean objects\x22\x0a\x0a1 < 2\x0a  ifTrue: [100]\x0a  ifFalse: [42].\x0a\x0a\x22Here the message is ifTrue:ifFalse\x0a\x0aTry this:\x22\x0a\x0aTranscript open.\x0a\x0a3 > 10 \x0a\x09ifTrue: [Transcript show: ''maybe there''''s a bug ....'']\x0a\x09ifFalse: [Transcript show: ''No : 3 is less than 10''].\x0a\x0a3 = 3 ifTrue: [ProfStef next].'.",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_debugger",
+smalltalk.method({
+selector: "debugger",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Debugger", "\x22The Debugger may be the most famous tool of Smalltalk environments. It will open as soon as an unmanaged Exception occurs. \x0a\x0aThe following code will open the debugger.\x0a\x0a***This should be rethought completely***\x22\x0a\x0a\x0a "]);
+return self;},
+args: [],
+source: "debugger\x0a\x09^ Lesson\x0atitle: 'Debugger' \x0acontents: '\x22The Debugger may be the most famous tool of Smalltalk environments. It will open as soon as an unmanaged Exception occurs. \x0a\x0aThe following code will open the debugger.\x0a\x0a***This should be rethought completely***\x22\x0a\x0a\x0a '",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_doingVSPrinting",
+smalltalk.method({
+selector: "doingVSPrinting",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Doing VS Printing: Doing", "\x22Cool ! (I like to say Cooool :) ).\x0aYou've just executed a Smalltalk expression.\x0aMore precisely, you sent the message 'next' to ProfStef class (it's me !).\x0a\x0aNote you can run this tutorial again by evaluating: 'ProfStef go'. \x0a'ProfStef previous' returns to the previous lesson.\x0a\x0aYou can also Do It using the keyboard shortcut 'CTRL d'\x0a\x0aTry to evaluate this expression:\x22\x0a\x0awindow alert: 'hello world!'.\x0a\x0a\x22Then go to the next lesson:\x22\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "doingVSPrinting \x0a\x09^ Lesson\x0atitle: 'Doing VS Printing: Doing' \x0acontents: \x0a'\x22Cool ! (I like to say Cooool :) ).\x0aYou''ve just executed a Smalltalk expression.\x0aMore precisely, you sent the message ''next'' to ProfStef class (it''s me !).\x0a\x0aNote you can run this tutorial again by evaluating: ''ProfStef go''. \x0a''ProfStef previous'' returns to the previous lesson.\x0a\x0aYou can also Do It using the keyboard shortcut ''CTRL d''\x0a\x0aTry to evaluate this expression:\x22\x0a\x0awindow alert: ''hello world!''.\x0a\x0a\x22Then go to the next lesson:\x22\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_instanciation",
+smalltalk.method({
+selector: "instanciation",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Instanciation", "\x22Objects are instances of their class. Usually, we send the message #new to a class for creating an instance of this class.\x0a\x0aFor example, let's create an instance of the class Array:\x22\x0a\x0aArray new\x0a\x09add: 'Some text';\x0a\x09add: 3.;\x0a\x09yourself.\x0a\x0a\x22See the array we've created? Actually, #('Some text' 3) is just a shorthand for instantiating arrays.\x22\x0a\x0a\x22If we use a variable to keep track of this object, we'll be able to do stuff with it.\x22\x0a\x0a\x22The following code must be ran all at one, as the 'anArray' variable will cease to exist once the execution finishes:\x22\x0a\x0a|anArray|\x0a\x0aanArray := Array new\x0a\x09add: 'Some text';\x0a\x09add: 3;\x0a\x09yourself.\x0a\x0aTranscript show: anArray; cr.\x0a\x0aanArray remove: 3.\x0a\x0aTranscript show: anArray; cr.\x0a\x0aanArray add: 'Some more text!'.\x0a\x0aTranscript show: anArray; cr.\x0a\x09\x0a\x22I'll put myself in an instance of a class named Dictionary and go to the next lesson:\x22\x0a\x0a((Dictionary new add: ('move on!' -> ProfStef)) at: 'move on!') next"]);
+return self;},
+args: [],
+source: "instanciation\x0a\x09^ Lesson\x0atitle: 'Instanciation' \x0acontents: \x0a'\x22Objects are instances of their class. Usually, we send the message #new to a class for creating an instance of this class.\x0a\x0aFor example, let''s create an instance of the class Array:\x22\x0a\x0aArray new\x0a\x09add: ''Some text'';\x0a\x09add: 3.;\x0a\x09yourself.\x0a\x0a\x22See the array we''ve created? Actually, #(''Some text'' 3) is just a shorthand for instantiating arrays.\x22\x0a\x0a\x22If we use a variable to keep track of this object, we''ll be able to do stuff with it.\x22\x0a\x0a\x22The following code must be ran all at one, as the ''anArray'' variable will cease to exist once the execution finishes:\x22\x0a\x0a|anArray|\x0a\x0aanArray := Array new\x0a\x09add: ''Some text'';\x0a\x09add: 3;\x0a\x09yourself.\x0a\x0aTranscript show: anArray; cr.\x0a\x0aanArray remove: 3.\x0a\x0aTranscript show: anArray; cr.\x0a\x0aanArray add: ''Some more text!''.\x0a\x0aTranscript show: anArray; cr.\x0a\x09\x0a\x22I''ll put myself in an instance of a class named Dictionary and go to the next lesson:\x22\x0a\x0a((Dictionary new add: (''move on!'' -> ProfStef)) at: ''move on!'') next'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_iterators",
+smalltalk.method({
+selector: "iterators",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Iterators", "\x22The message do: is sent to a collection of objects (Array, Dictionary, String, etc), evaluating the block for each element.\x0a\x0aHere we want to print all the numbers on the Transcript (a console)\x22\x0a\x0a#(11 38 3 -2 10) do: [:each |\x0a     Transcript show: each printString; cr].\x0a\x0a\x22Some other really nice iterators\x22\x0a\x0a#(11 38 3 -2 10) collect: [:each | each negated].\x0a\x0a#(11 38 3 -2 10) collect: [:each | each odd].\x0a\x0a#(11 38 3 -2 10) select: [:each | each odd].\x0a\x0a#(11 38 3 -2 10) select: [:each | each > 10].\x0a\x0a#(11 38 3 -2 10) reject: [:each | each > 10].\x0a\x0a#(11 38 3 -2 10) \x0a     do: [:each | Transcript show: each printString]\x0a     separatedBy: [Transcript show: '.'].\x0a\x0a\x0a(Smalltalk current classes select: [:eachClass | eachClass name = 'ProfStef']) do: [:eachProfstef | eachProfstef next]."]);
+return self;},
+args: [],
+source: "iterators\x0a\x09^ Lesson\x0atitle: 'Iterators' \x0acontents: \x0a'\x22The message do: is sent to a collection of objects (Array, Dictionary, String, etc), evaluating the block for each element.\x0a\x0aHere we want to print all the numbers on the Transcript (a console)\x22\x0a\x0a#(11 38 3 -2 10) do: [:each |\x0a     Transcript show: each printString; cr].\x0a\x0a\x22Some other really nice iterators\x22\x0a\x0a#(11 38 3 -2 10) collect: [:each | each negated].\x0a\x0a#(11 38 3 -2 10) collect: [:each | each odd].\x0a\x0a#(11 38 3 -2 10) select: [:each | each odd].\x0a\x0a#(11 38 3 -2 10) select: [:each | each > 10].\x0a\x0a#(11 38 3 -2 10) reject: [:each | each > 10].\x0a\x0a#(11 38 3 -2 10) \x0a     do: [:each | Transcript show: each printString]\x0a     separatedBy: [Transcript show: ''.''].\x0a\x0a\x0a(Smalltalk current classes select: [:eachClass | eachClass name = ''ProfStef'']) do: [:eachProfstef | eachProfstef next].'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_loops",
+smalltalk.method({
+selector: "loops",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Loops", "\x22Loops are high-level collection iterators, implemented as regular methods.\x22\x0a\x0a\x22Basic loops:\x0a  to:do:\x0a  to:by:do\x22\x0a\x0a1 to: 100 do:\x0a  [:i | Transcript show: i asString; cr ].\x0a\x0a1 to: 100 by: 3 do: [:i | Transcript show: i asString; cr].\x0a\x0a100 to: 0 by: -2 do: \x0a    [:i | Transcript show: i asString; cr].\x0a\x0a1 to: 1 do: [:i | ProfStef next]."]);
+return self;},
+args: [],
+source: "loops\x0a\x09^ Lesson\x0atitle: 'Loops' \x0acontents: \x0a'\x22Loops are high-level collection iterators, implemented as regular methods.\x22\x0a\x0a\x22Basic loops:\x0a  to:do:\x0a  to:by:do\x22\x0a\x0a1 to: 100 do:\x0a  [:i | Transcript show: i asString; cr ].\x0a\x0a1 to: 100 by: 3 do: [:i | Transcript show: i asString; cr].\x0a\x0a100 to: 0 by: -2 do: \x0a    [:i | Transcript show: i asString; cr].\x0a\x0a1 to: 1 do: [:i | ProfStef next].'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_mathematicalPrecedence",
+smalltalk.method({
+selector: "mathematicalPrecedence",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Mathematical precedence", "\x22Traditional precedence rules from mathematics do not follow in Smalltalk.\x22\x0a\x0a2 * 10 + 2.\x0a\x0a\x22Here the message * is sent to 2, which answers 20, then 20 receive the message +\x0a\x0aRemember that all messages always follow a simple left-to-right precedence rule, * without exceptions *.\x22\x0a\x0a2 + 2 * 10.\x0a\x0a2 + (2 * 10).\x0a\x0a8 - 5 / 2.\x0a\x0a(8 - 5) / 2.\x0a\x0a8 - (5 / 2).\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "mathematicalPrecedence\x0a\x09^ Lesson\x0atitle: 'Mathematical precedence'\x0acontents: \x0a'\x22Traditional precedence rules from mathematics do not follow in Smalltalk.\x22\x0a\x0a2 * 10 + 2.\x0a\x0a\x22Here the message * is sent to 2, which answers 20, then 20 receive the message +\x0a\x0aRemember that all messages always follow a simple left-to-right precedence rule, * without exceptions *.\x22\x0a\x0a2 + 2 * 10.\x0a\x0a2 + (2 * 10).\x0a\x0a8 - 5 / 2.\x0a\x0a(8 - 5) / 2.\x0a\x0a8 - (5 / 2).\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxBinary",
+smalltalk.method({
+selector: "messageSyntaxBinary",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Binary messages", "\x22Binary messages have the following form:\x0a    anObject + anotherObject\x22\x0a\x0a3 * 2.\x0a\x0aDate today year = 2011.\x0a\x0afalse | false.\x0a\x0atrue & true.\x0a\x0atrue & false.\x0a\x0a10 @ 100.\x0a\x0a10 <= 12.\x0a\x0a'ab', 'cd'.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "messageSyntaxBinary\x0a\x09^ Lesson\x0atitle: 'Message syntax: Binary messages' \x0acontents: \x0a'\x22Binary messages have the following form:\x0a    anObject + anotherObject\x22\x0a\x0a3 * 2.\x0a\x0aDate today year = 2011.\x0a\x0afalse | false.\x0a\x0atrue & true.\x0a\x0atrue & false.\x0a\x0a10 @ 100.\x0a\x0a10 <= 12.\x0a\x0a''ab'', ''cd''.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxCascade",
+smalltalk.method({
+selector: "messageSyntaxCascade",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Cascade", "\x22; is the cascade operator. It's useful to send message to the SAME receiver\x0aOpen a Transcript (console):\x22\x0a\x0aTranscript open.\x0a\x0a\x22Then:\x22\x0a\x0aTranscript show: 'hello'.\x0aTranscript show: 'Smalltalk'.\x0aTranscript cr.\x0a\x0a\x22is equivalent to:\x22\x0a\x0aTranscript \x0a\x09   show: 'hello';\x0a\x09   show: 'Smalltalk' ;\x0a\x09   cr.\x0a\x0a\x22You can close the development tools by clicking on the red circle with a cross at the bottom left of the website.\x0aTry to go to the next lesson with a cascade of two 'next' messages:\x22\x0a\x0aProfStef"]);
+return self;},
+args: [],
+source: "messageSyntaxCascade\x0a\x09^ Lesson\x0atitle: 'Message syntax: Cascade' \x0acontents: \x0a'\x22; is the cascade operator. It''s useful to send message to the SAME receiver\x0aOpen a Transcript (console):\x22\x0a\x0aTranscript open.\x0a\x0a\x22Then:\x22\x0a\x0aTranscript show: ''hello''.\x0aTranscript show: ''Smalltalk''.\x0aTranscript cr.\x0a\x0a\x22is equivalent to:\x22\x0a\x0aTranscript \x0a\x09   show: ''hello'';\x0a\x09   show: ''Smalltalk'' ;\x0a\x09   cr.\x0a\x0a\x22You can close the development tools by clicking on the red circle with a cross at the bottom left of the website.\x0aTry to go to the next lesson with a cascade of two ''next'' messages:\x22\x0a\x0aProfStef'.",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxCascadeShouldNotBeHere",
+smalltalk.method({
+selector: "messageSyntaxCascadeShouldNotBeHere",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Lost ?", "\x22Hey, you should not be here !! \x0a\x0aGo back and use a cascade !\x22\x0a\x0aProfStef previous."]);
+return self;},
+args: [],
+source: "messageSyntaxCascadeShouldNotBeHere\x0a\x09^ Lesson\x0atitle: 'Lost ?' \x0acontents: \x0a'\x22Hey, you should not be here !! \x0a\x0aGo back and use a cascade !\x22\x0a\x0aProfStef previous.'.",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxExecutionOrder",
+smalltalk.method({
+selector: "messageSyntaxExecutionOrder",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Execution order", "\x22Unary messages are executed first, then binary messages and finally keyword messages:\x0a    Unary > Binary > Keywords\x22\x0a\x0a2.5 + 3.8 rounded.\x0a\x0a3 max: 2 + 2.\x0a  \x0a(0@0) class.\x0a\x0a0@0 x: 100.\x0a\x0a(0@0 x: 100) class.\x0a\x0a\x22Between messages of similar precedence, expressions are executed from left to right\x22\x0a\x0a-12345 negated asString reversed.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "messageSyntaxExecutionOrder\x0a\x09^ Lesson\x0atitle: 'Message syntax: Execution order' \x0acontents: \x0a'\x22Unary messages are executed first, then binary messages and finally keyword messages:\x0a    Unary > Binary > Keywords\x22\x0a\x0a2.5 + 3.8 rounded.\x0a\x0a3 max: 2 + 2.\x0a  \x0a(0@0) class.\x0a\x0a0@0 x: 100.\x0a\x0a(0@0 x: 100) class.\x0a\x0a\x22Between messages of similar precedence, expressions are executed from left to right\x22\x0a\x0a-12345 negated asString reversed.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxExecutionOrderParentheses",
+smalltalk.method({
+selector: "messageSyntaxExecutionOrderParentheses",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Parentheses", "\x22Use parentheses to change order of evaluation\x22\x0a\x0a(2.5 + 3.8) rounded.\x0a\x0a(3 max: 2) + 2.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "messageSyntaxExecutionOrderParentheses\x0a\x09^ Lesson\x0atitle: 'Message syntax: Parentheses'\x0acontents: \x0a'\x22Use parentheses to change order of evaluation\x22\x0a\x0a(2.5 + 3.8) rounded.\x0a\x0a(3 max: 2) + 2.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxKeyword",
+smalltalk.method({
+selector: "messageSyntaxKeyword",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Keyword messages", "\x22Keyword Messages are messages with arguments. They have the following form:\x0a    anObject akey: anotherObject akey2: anotherObject2\x22\x0a\x0a'Web development is a good deal of pain' copyFrom: 1 to: 30\x0a\x0a\x22The message is copyFrom:to: sent to the String 'Web development is a good deal of pain'\x22\x0a\x0a1 max: 3.\x0a\x0aArray with: 'hello' with: 2 with: Smalltalk.\x0a\x0a\x22The message is with:with:with: implemented on class Array. Note you can also write\x22\x0a\x0aArray\x0a\x09with: 'Hi there!'\x0a\x09with: 2\x0a\x09with: Smalltalk.\x0a\x09\x0aProfStef perform: 'next'."]);
+return self;},
+args: [],
+source: "messageSyntaxKeyword\x0a\x09^ Lesson\x0atitle: 'Message syntax: Keyword messages' \x0acontents: \x0a'\x22Keyword Messages are messages with arguments. They have the following form:\x0a    anObject akey: anotherObject akey2: anotherObject2\x22\x0a\x0a''Web development is a good deal of pain'' copyFrom: 1 to: 30\x0a\x0a\x22The message is copyFrom:to: sent to the String ''Web development is a good deal of pain''\x22\x0a\x0a1 max: 3.\x0a\x0aArray with: ''hello'' with: 2 with: Smalltalk.\x0a\x0a\x22The message is with:with:with: implemented on class Array. Note you can also write\x22\x0a\x0aArray\x0a\x09with: ''Hi there!''\x0a\x09with: 2\x0a\x09with: Smalltalk.\x0a\x09\x0aProfStef perform: ''next''.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_messageSyntaxUnary",
+smalltalk.method({
+selector: "messageSyntaxUnary",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Message syntax: Unary messages", "\x22Messages are sent to objects. There are three types of message: Unary, Binary and Keyword.\x0a\x0aUnary messages have the following form:\x0a    anObject aMessage \x0a\x0aYou've already sent unary messages. For example:\x22\x0a\x0a1 class.\x0a\x0afalse not.\x0a\x0aDate today.\x0a\x0aNumber pi.\x0a\x0a\x22And of course: \x22\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "messageSyntaxUnary\x0a\x09^ Lesson\x0atitle: 'Message syntax: Unary messages' \x0acontents: \x0a'\x22Messages are sent to objects. There are three types of message: Unary, Binary and Keyword.\x0a\x0aUnary messages have the following form:\x0a    anObject aMessage \x0a\x0aYou''ve already sent unary messages. For example:\x22\x0a\x0a1 class.\x0a\x0afalse not.\x0a\x0aDate today.\x0a\x0aNumber pi.\x0a\x0a\x22And of course: \x22\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_pharoEnvironment",
+smalltalk.method({
+selector: "pharoEnvironment",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Pharo environment", "\x22Every Smalltalk system is full of objects.\x0aThere are windows, text, numbers, dates, colors, points and much more.\x0aYou can interact with objects in a much more direct way than is possible with other programming languages.\x0a\x0aEvery object understands the message 'explore'. As a result, you get an Explorer window that shows details about the object.\x22\x0a\x0aDate today explore.\x0a\x0a\x22This shows that the date object consists of a point in time (start) and a duration (one day long).\x22\x0a\x0aProfStef explore.\x0a\x0a\x22You see, ProfStef class has a lot of objects. Let's take a look at my code:\x22\x0a\x0aProfStef browse.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "pharoEnvironment\x0a\x09^ Lesson\x0atitle: 'Pharo environment' \x0acontents: \x0a'\x22Every Smalltalk system is full of objects.\x0aThere are windows, text, numbers, dates, colors, points and much more.\x0aYou can interact with objects in a much more direct way than is possible with other programming languages.\x0a\x0aEvery object understands the message ''explore''. As a result, you get an Explorer window that shows details about the object.\x22\x0a\x0aDate today explore.\x0a\x0a\x22This shows that the date object consists of a point in time (start) and a duration (one day long).\x22\x0a\x0aProfStef explore.\x0a\x0a\x22You see, ProfStef class has a lot of objects. Let''s take a look at my code:\x22\x0a\x0aProfStef browse.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_printing",
+smalltalk.method({
+selector: "printing",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Doing VS Printing: Printing", "\x22Now you're a Do It master ! Let's talk about printing.\x0aIt's a Do It which prints the result next to the expression you've selected.\x0aFor example, select the text below, and click on 'PrintIt':\x22\x0a\x0a1 + 2.\x0a\x0a\x22As with 'DoIt', there is also a shortcut to execute this command.\x0a\x0aTry CTRL-p on the following expressions:\x22\x0a\x0aDate today.\x0a\x0a\x22The result is selected, so you can erase it using the backspace key. Try it !\x22\x0a\x0aDate today asDateString.\x0a\x0aDate today asTimeString.\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "printing \x0a\x09^ Lesson\x0atitle: 'Doing VS Printing: Printing' \x0acontents: \x0a'\x22Now you''re a Do It master ! Let''s talk about printing.\x0aIt''s a Do It which prints the result next to the expression you''ve selected.\x0aFor example, select the text below, and click on ''PrintIt'':\x22\x0a\x0a1 + 2.\x0a\x0a\x22As with ''DoIt'', there is also a shortcut to execute this command.\x0a\x0aTry CTRL-p on the following expressions:\x22\x0a\x0aDate today.\x0a\x0a\x22The result is selected, so you can erase it using the backspace key. Try it !\x22\x0a\x0aDate today asDateString.\x0a\x0aDate today asTimeString.\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_reflection",
+smalltalk.method({
+selector: "reflection",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Reflection", "\x22You can inspect and change the system at runtime.\x0a\x0aTake a look at the source code of the method #and: of the class Boolean:\x22\x0a\x0a(Boolean methodDictionary at: 'and:') source.\x0a\x0a\x22Or all the methods it sends:\x22\x0a\x0a(Boolean methodDictionary at: 'and:') messageSends.\x0a\x0a\x22Here's all the methods I implement:\x22\x0a\x0aProfStef methodDictionary.\x0a\x0a\x22Let's create a new method to go to the next lesson:\x22\x0a\x0a|newMethod|\x0anewMethod := Compiler new load: 'goToNextLesson ProfStef next.' forClass: ProfStef.\x0aProfStef class addCompiledMethod: newMethod\x0a\x0a\x22Wow! I can't wait to use my new method!\x22\x0a\x0aProfStef goToNextLesson."]);
+return self;},
+args: [],
+source: "reflection\x0a\x09^ Lesson\x0atitle: 'Reflection' \x0acontents: \x0a'\x22You can inspect and change the system at runtime.\x0a\x0aTake a look at the source code of the method #and: of the class Boolean:\x22\x0a\x0a(Boolean methodDictionary at: ''and:'') source.\x0a\x0a\x22Or all the methods it sends:\x22\x0a\x0a(Boolean methodDictionary at: ''and:'') messageSends.\x0a\x0a\x22Here''s all the methods I implement:\x22\x0a\x0aProfStef methodDictionary.\x0a\x0a\x22Let''s create a new method to go to the next lesson:\x22\x0a\x0a|newMethod|\x0anewMethod := Compiler new load: ''goToNextLesson ProfStef next.'' forClass: ProfStef.\x0aProfStef class addCompiledMethod: newMethod\x0a\x0a\x22Wow! I can''t wait to use my new method!\x22\x0a\x0aProfStef goToNextLesson.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_reflectionContinued",
+smalltalk.method({
+selector: "reflectionContinued",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Reflection continued", "\x22So cool, isn't it ?  Before going further, let's remove this method:\x22\x0a\x0aProfStef class methodAt: #goToNextLesson.\x0a\x0aProfStef class removeCompiledMethod: (ProfStef class methodAt: #goToNextLesson).\x0a\x0aProfStef class methodAt: #goToNextLesson.\x0a\x0a\x0a\x22Then move forward:\x22\x0a\x0aProfStef perform:#next"]);
+return self;},
+args: [],
+source: "reflectionContinued\x0a\x09^ Lesson\x0atitle: 'Reflection continued' \x0acontents: \x0a'\x22So cool, isn''t it ?  Before going further, let''s remove this method:\x22\x0a\x0aProfStef class methodAt: #goToNextLesson.\x0a\x0aProfStef class removeCompiledMethod: (ProfStef class methodAt: #goToNextLesson).\x0a\x0aProfStef class methodAt: #goToNextLesson.\x0a\x0a\x0a\x22Then move forward:\x22\x0a\x0aProfStef perform:#next'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_tableOfContents",
+smalltalk.method({
+selector: "tableOfContents",
+category: 'contents',
+fn: function (){
+var self=this;
+return ["welcome", "doingVSPrinting", "printing", "basicTypesNumbers", "basicTypesString", "basicTypesArray", "basicTypesDynamicArray", "messageSyntaxUnary", "messageSyntaxBinary", "messageSyntaxKeyword", "messageSyntaxExecutionOrder", "messageSyntaxExecutionOrderParentheses", "mathematicalPrecedence", "messageSyntaxCascade", "messageSyntaxCascadeShouldNotBeHere", "blocks", "blocksAssignation", "conditionals", "loops", "iterators", "instanciation", "reflection", "reflectionContinued", "theEnd"];
+return self;},
+args: [],
+source: "tableOfContents\x0a^ #(\x09'welcome'\x0a\x09'doingVSPrinting'\x0a\x09'printing'\x0a\x0a\x09'basicTypesNumbers'\x0a\x09\x22'basicTypesCharacters'\x22\x0a\x09'basicTypesString'\x0a\x09\x22'basicTypesSymbol'\x22\x0a\x09'basicTypesArray'\x0a\x09'basicTypesDynamicArray'\x0a\x0a\x09'messageSyntaxUnary'\x0a\x09'messageSyntaxBinary'\x0a\x09'messageSyntaxKeyword'\x0a\x09'messageSyntaxExecutionOrder'\x0a\x09'messageSyntaxExecutionOrderParentheses'\x0a\x09'mathematicalPrecedence'\x0a\x09'messageSyntaxCascade'\x0a\x09'messageSyntaxCascadeShouldNotBeHere'\x0a\x0a\x09'blocks'\x0a\x09'blocksAssignation'\x0a\x09'conditionals'\x0a\x09'loops'\x0a\x09'iterators'\x0a\x0a\x09'instanciation'\x0a\x0a\x09'reflection'\x0a\x09'reflectionContinued'\x0a\x09\x22'pharoEnvironment'\x22\x0a\x0a\x09\x22'debugger'\x22\x0a\x09'theEnd' )",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_theEnd",
+smalltalk.method({
+selector: "theEnd",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Tutorial done !", "\x22This tutorial is done. Enjoy programming Smalltalk with Amber. \x0a\x0aYou can run this tutorial again by evaluating: ProfStef go.\x0a\x0aSee you soon !\x22\x0a"]);
+return self;},
+args: [],
+source: "theEnd\x0a\x09^ Lesson\x0atitle: 'Tutorial done !' \x0acontents: \x0a'\x22This tutorial is done. Enjoy programming Smalltalk with Amber. \x0a\x0aYou can run this tutorial again by evaluating: ProfStef go.\x0a\x0aSee you soon !\x22\x0a'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+smalltalk.addMethod(
+"_welcome",
+smalltalk.method({
+selector: "welcome",
+category: 'pages',
+fn: function (){
+var self=this;
+return smalltalk.send((smalltalk.Lesson || Lesson), "_title_contents_", ["Welcome", " \x22Hello! I'm Professor Stef. \x0a\x0aYou must want me to help you learn Smalltalk.\x0a\x0aSo let's go to the first lesson.  Select the text below and click on the 'DoIt' button\x22\x0a\x0aProfStef next."]);
+return self;},
+args: [],
+source: "welcome\x0a\x09^ Lesson\x0atitle: 'Welcome' \x0acontents: \x0a' \x22Hello! I''m Professor Stef. \x0a\x0aYou must want me to help you learn Smalltalk.\x0a\x0aSo let''s go to the first lesson.  Select the text below and click on the ''DoIt'' button\x22\x0a\x0aProfStef next.'",
+messageSends: ["title:contents:"],
+referencedClasses: ["Lesson"]
+}),
+smalltalk.SmalltalkSyntaxTutorial);
+
+
+
+smalltalk.addClass('Lesson', smalltalk.Object, ['title', 'contents'], 'TrySmalltalk');
+smalltalk.addMethod(
+"_contents",
+smalltalk.method({
+selector: "contents",
+category: 'accessing',
+fn: function (){
+var self=this;
+return (($receiver = self['@contents']) == nil || $receiver == undefined) ? (function(){return (self['@contents']="");})() : $receiver;
+return self;},
+args: [],
+source: "contents\x0a\x09^ contents ifNil: [contents := '']",
+messageSends: ["ifNil:"],
+referencedClasses: []
+}),
+smalltalk.Lesson);
+
+smalltalk.addMethod(
+"_contents_",
+smalltalk.method({
+selector: "contents:",
+category: 'accessing',
+fn: function (aString){
+var self=this;
+(self['@contents']=aString);
+return self;},
+args: ["aString"],
+source: "contents: aString\x0a\x09contents := aString",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.Lesson);
+
+smalltalk.addMethod(
+"_title",
+smalltalk.method({
+selector: "title",
+category: 'accessing',
+fn: function (){
+var self=this;
+return (($receiver = self['@title']) == nil || $receiver == undefined) ? (function(){return (self['@title']="");})() : $receiver;
+return self;},
+args: [],
+source: "title\x0a\x09^ title ifNil: [title := '']",
+messageSends: ["ifNil:"],
+referencedClasses: []
+}),
+smalltalk.Lesson);
+
+smalltalk.addMethod(
+"_title_",
+smalltalk.method({
+selector: "title:",
+category: 'accessing',
+fn: function (aString){
+var self=this;
+(self['@title']=aString);
+return self;},
+args: ["aString"],
+source: "title: aString\x0a\x09title := aString",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.Lesson);
+
+
+smalltalk.addMethod(
+"_title_contents_",
+smalltalk.method({
+selector: "title:contents:",
+category: 'instance creation',
+fn: function (aTitle, someContents){
+var self=this;
+return (function($rec){smalltalk.send($rec, "_title_", [aTitle]);return smalltalk.send($rec, "_contents_", [someContents]);})(smalltalk.send(self, "_new", []));
+return self;},
+args: ["aTitle", "someContents"],
+source: "title: aTitle contents: someContents\x0a\x09^ (self new)\x0a\x09\x09title: aTitle;\x0a\x09\x09contents: someContents",
+messageSends: ["title:", "contents:", "new"],
+referencedClasses: []
+}),
+smalltalk.Lesson.klass);
+
+
+smalltalk.addClass('ProfStef', smalltalk.Object, ['tutorialPlayer', 'widget'], 'TrySmalltalk');
+smalltalk.ProfStef.comment="A ProfStef is the Smalltalk teacher. To start the tutorial, evaluate:\x0aProfStef go.\x0a\x0aTo go to the next lesson evaluate:\x0aProfStef next.\x0a\x0aTo execute your own tutorial:\x0aProfStef goOn: MyOwnTutorial\x0a\x0aTo see a table of contents with all defined tutorials:\x0aProfStef contents"
+smalltalk.addMethod(
+"_first",
+smalltalk.method({
+selector: "first",
+category: 'navigation',
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_first", []);
+return smalltalk.send(self, "_showCurrentLesson", []);
+return self;},
+args: [],
+source: "first\x0a\x09self tutorialPlayer first.\x0a\x09^ self showCurrentLesson.",
+messageSends: ["first", "tutorialPlayer", "showCurrentLesson"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_next",
+smalltalk.method({
+selector: "next",
+category: 'navigation',
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_next", []);
+return smalltalk.send(self, "_showCurrentLesson", []);
+return self;},
+args: [],
+source: "next\x0a\x09self tutorialPlayer next.\x0a\x09^ self showCurrentLesson.",
+messageSends: ["next", "tutorialPlayer", "showCurrentLesson"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_previous",
+smalltalk.method({
+selector: "previous",
+category: 'navigation',
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_previous", []);
+return smalltalk.send(self, "_showCurrentLesson", []);
+return self;},
+args: [],
+source: "previous\x0a\x09self tutorialPlayer previous.\x0a\x09^ self showCurrentLesson.",
+messageSends: ["previous", "tutorialPlayer", "showCurrentLesson"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_progress",
+smalltalk.method({
+selector: "progress",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send("(", "__comma", [smalltalk.send(self, "_tutorialPositionString", [])]), "__comma", ["/"]), "__comma", [smalltalk.send(self, "_tutorialSizeString", [])]), "__comma", [")"]);
+return self;},
+args: [],
+source: "progress\x0a\x09^ '(', self tutorialPositionString, '/', self tutorialSizeString, ')'.",
+messageSends: [",", "tutorialPositionString", "tutorialSizeString"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_showCurrentLesson",
+smalltalk.method({
+selector: "showCurrentLesson",
+category: 'accessing',
+fn: function (){
+var self=this;
+var lesson=nil;
+(lesson=smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_currentLesson", []));
+smalltalk.send(self['@widget'], "_contents_", [smalltalk.send(lesson, "_contents", [])]);
+smalltalk.send(self['@widget'], "_setTitle_", [smalltalk.send(smalltalk.send(smalltalk.send(lesson, "_title", []), "__comma", [" "]), "__comma", [smalltalk.send(self, "_progress", [])])]);
+return self;},
+args: [],
+source: "showCurrentLesson\x0a\x09| lesson |\x0a\x09lesson := self tutorialPlayer currentLesson.\x0a\x09widget contents: lesson contents.\x0a\x09widget setTitle: lesson title , ' ' , self progress.",
+messageSends: ["currentLesson", "tutorialPlayer", "contents:", "contents", "setTitle:", ",", "title", "progress"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_tutorialPlayer",
+smalltalk.method({
+selector: "tutorialPlayer",
+category: 'accessing',
+fn: function (){
+var self=this;
+return (($receiver = self['@tutorialPlayer']) == nil || $receiver == undefined) ? (function(){return (self['@tutorialPlayer']=smalltalk.send((smalltalk.TutorialPlayer || TutorialPlayer), "_new", []));})() : $receiver;
+return self;},
+args: [],
+source: "tutorialPlayer\x0a\x09^ tutorialPlayer ifNil: [tutorialPlayer := TutorialPlayer new]",
+messageSends: ["ifNil:", "new"],
+referencedClasses: ["TutorialPlayer"]
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_tutorialPositionString",
+smalltalk.method({
+selector: "tutorialPositionString",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_tutorialPosition", []), "_asString", []);
+return self;},
+args: [],
+source: "tutorialPositionString\x0a\x09^ self tutorialPlayer tutorialPosition asString.",
+messageSends: ["asString", "tutorialPosition", "tutorialPlayer"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_tutorialSizeString",
+smalltalk.method({
+selector: "tutorialSizeString",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(smalltalk.send(self, "_tutorialPlayer", []), "_size", []), "_asString", []);
+return self;},
+args: [],
+source: "tutorialSizeString\x0a\x09^ self tutorialPlayer size asString",
+messageSends: ["asString", "size", "tutorialPlayer"],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+smalltalk.addMethod(
+"_widget_",
+smalltalk.method({
+selector: "widget:",
+category: 'accessing',
+fn: function (aWidget){
+var self=this;
+(self['@widget']=aWidget);
+return self;},
+args: ["aWidget"],
+source: "widget: aWidget\x0a\x09widget := aWidget",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.ProfStef);
+
+
+smalltalk.ProfStef.klass.iVarNames = ['instance'];
+smalltalk.addMethod(
+"_default",
+smalltalk.method({
+selector: "default",
+category: 'initialize',
+fn: function (){
+var self=this;
+return (($receiver = self['@instance']) == nil || $receiver == undefined) ? (function(){return (self['@instance']=smalltalk.send(self, "_new", []));})() : $receiver;
+return self;},
+args: [],
+source: "default \x0a\x09^ instance ifNil: [instance := self new]",
+messageSends: ["ifNil:", "new"],
+referencedClasses: []
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_first",
+smalltalk.method({
+selector: "first",
+category: 'navigation',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_default", []), "_first", []);
+return self;},
+args: [],
+source: "first\x0a\x09^ self default first.",
+messageSends: ["first", "default"],
+referencedClasses: []
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_go",
+smalltalk.method({
+selector: "go",
+category: 'navigation',
+fn: function (){
+var self=this;
+smalltalk.send(self, "_first", []);
+return self;},
+args: [],
+source: "go\x0a\x09self first.",
+messageSends: ["first"],
+referencedClasses: []
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_next",
+smalltalk.method({
+selector: "next",
+category: 'navigation',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_default", []), "_next", []);
+return self;},
+args: [],
+source: "next\x0a\x09^ self default next.",
+messageSends: ["next", "default"],
+referencedClasses: []
+}),
+smalltalk.ProfStef.klass);
+
+smalltalk.addMethod(
+"_previous",
+smalltalk.method({
+selector: "previous",
+category: 'navigation',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_default", []), "_previous", []);
+return self;},
+args: [],
+source: "previous\x0a\x09^ self default previous.",
+messageSends: ["previous", "default"],
+referencedClasses: []
+}),
+smalltalk.ProfStef.klass);
+
+
+smalltalk.addClass('TrySmalltalkWidget', smalltalk.Widget, ['workspace', 'contents', 'header'], 'TrySmalltalk');
+smalltalk.addMethod(
+"_contents",
+smalltalk.method({
+selector: "contents",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_workspace", []), "_val", []);
+return self;},
+args: [],
+source: "contents\x0a\x09^self workspace val",
+messageSends: ["val", "workspace"],
+referencedClasses: []
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_contents_",
+smalltalk.method({
+selector: "contents:",
+category: 'accessing',
+fn: function (aString){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_workspace", []), "_val_", [aString]);
+return self;},
+args: ["aString"],
+source: "contents: aString\x0a\x09self workspace val: aString",
+messageSends: ["val:", "workspace"],
+referencedClasses: []
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_renderButtonsOn_",
+smalltalk.method({
+selector: "renderButtonsOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+(function($rec){smalltalk.send($rec, "_with_", ["DoIt"]);smalltalk.send($rec, "_title_", ["ctrl+d"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_doIt", []);})]);})(smalltalk.send(html, "_button", []));
+(function($rec){smalltalk.send($rec, "_with_", ["PrintIt"]);smalltalk.send($rec, "_title_", ["ctrl+p"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_printIt", []);})]);})(smalltalk.send(html, "_button", []));
+(function($rec){smalltalk.send($rec, "_with_", ["InspectIt"]);smalltalk.send($rec, "_title_", ["ctrl+i"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_inspectIt", []);})]);})(smalltalk.send(html, "_button", []));
+return self;},
+args: ["html"],
+source: "renderButtonsOn: html\x0a    html button\x0a\x09with: 'DoIt';\x0a\x09title: 'ctrl+d';\x0a\x09onClick: [self workspace doIt].\x0a    html button\x0a\x09with: 'PrintIt';\x0a\x09title: 'ctrl+p';\x0a\x09onClick: [self workspace printIt].\x0a    html button\x0a\x09with: 'InspectIt';\x0a\x09title: 'ctrl+i';\x0a\x09onClick: [self workspace inspectIt]",
+messageSends: ["with:", "title:", "onClick:", "doIt", "workspace", "button", "printIt", "inspectIt"],
+referencedClasses: []
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_renderOn_",
+smalltalk.method({
+selector: "renderOn:",
+category: 'rendering',
+fn: function (html){
+var self=this;
+(function($rec){smalltalk.send($rec, "_class_", ["profStef"]);smalltalk.send($rec, "_with_", [(function(){return (self['@header']=smalltalk.send(html, "_h2", []));})]);smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(smalltalk.send(self, "_workspace", []), "_renderOn_", [html]);})]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send(self, "_renderButtonsOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
+(function($rec){smalltalk.send($rec, "_widget_", [self]);return smalltalk.send($rec, "_showCurrentLesson", []);})(smalltalk.send((smalltalk.ProfStef || ProfStef), "_default", []));
+return self;},
+args: ["html"],
+source: "renderOn: html\x0a\x09html div \x0a\x09\x09class: 'profStef'; \x0a\x09\x09with: [header := html h2];\x0a\x09\x09with: [self workspace renderOn: html];\x0a\x09\x09with: [self renderButtonsOn: html].\x0a          ProfStef default \x0a\x09\x09widget: self;\x0a\x09\x09showCurrentLesson",
+messageSends: ["class:", "with:", "h2", "renderOn:", "workspace", "renderButtonsOn:", "div", "widget:", "showCurrentLesson", "default"],
+referencedClasses: ["ProfStef"]
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_setTitle_",
+smalltalk.method({
+selector: "setTitle:",
+category: 'accessing',
+fn: function (aString){
+var self=this;
+smalltalk.send(self['@header'], "_contents_", [(function(html){return smalltalk.send(html, "_with_", [aString]);})]);
+return self;},
+args: ["aString"],
+source: "setTitle: aString\x0a\x09header contents: [:html | html with: aString]",
+messageSends: ["contents:", "with:"],
+referencedClasses: []
+}),
+smalltalk.TrySmalltalkWidget);
+
+smalltalk.addMethod(
+"_workspace",
+smalltalk.method({
+selector: "workspace",
+category: 'accessing',
+fn: function (){
+var self=this;
+return (($receiver = self['@workspace']) == nil || $receiver == undefined) ? (function(){return (self['@workspace']=smalltalk.send((smalltalk.SourceArea || SourceArea), "_new", []));})() : $receiver;
+return self;},
+args: [],
+source: "workspace\x0a\x09^ workspace ifNil: [\x0a          \x09workspace := SourceArea new]",
+messageSends: ["ifNil:", "new"],
+referencedClasses: ["SourceArea"]
+}),
+smalltalk.TrySmalltalkWidget);
+
+
+smalltalk.addMethod(
+"_open",
+smalltalk.method({
+selector: "open",
+category: 'initialize',
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_new", []), "_appendToJQuery_", [smalltalk.send("body", "_asJQuery", [])]);
+return self;},
+args: [],
+source: "open\x0a\x09self new appendToJQuery: 'body' asJQuery.",
+messageSends: ["appendToJQuery:", "new", "asJQuery"],
+referencedClasses: []
+}),
+smalltalk.TrySmalltalkWidget.klass);
+
+
+smalltalk.addClass('TutorialPlayer', smalltalk.Object, ['tutorialPosition', 'tutorial'], 'TrySmalltalk');
+smalltalk.TutorialPlayer.comment="I can navigate through an AbstractTutorial subclass. With #next and #previous you can go forward and backward through the tutorial."
+smalltalk.addMethod(
+"_currentLesson",
+smalltalk.method({
+selector: "currentLesson",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tutorial", []), "_lessonAt_", [smalltalk.send(self, "_tutorialPosition", [])]);
+return self;},
+args: [],
+source: "currentLesson\x0a\x09^ self tutorial lessonAt: self tutorialPosition.",
+messageSends: ["lessonAt:", "tutorial", "tutorialPosition"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_first",
+smalltalk.method({
+selector: "first",
+category: 'navigation',
+fn: function (){
+var self=this;
+smalltalk.send(self, "_rewind", []);
+return smalltalk.send(self, "_currentLesson", []);
+return self;},
+args: [],
+source: "first\x0a\x09self rewind.\x0a\x09^ self currentLesson",
+messageSends: ["rewind", "currentLesson"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_last",
+smalltalk.method({
+selector: "last",
+category: 'navigation',
+fn: function (){
+var self=this;
+(self['@tutorialPosition']=smalltalk.send(self, "_size", []));
+return smalltalk.send(self, "_currentLesson", []);
+return self;},
+args: [],
+source: "last\x0a\x09tutorialPosition := self size.\x0a\x09^ self currentLesson",
+messageSends: ["size", "currentLesson"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_next",
+smalltalk.method({
+selector: "next",
+category: 'navigation',
+fn: function (){
+var self=this;
+((($receiver = ((($receiver = smalltalk.send(self, "_tutorialPosition", [])).klass === smalltalk.Number) ? $receiver <smalltalk.send(self, "_size", []) : smalltalk.send($receiver, "__lt", [smalltalk.send(self, "_size", [])]))).klass === smalltalk.Boolean) ? ($receiver ? (function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));})]));
+return smalltalk.send(self, "_currentLesson", []);
+return self;},
+args: [],
+source: "next\x0a\x09self tutorialPosition < self size\x0a\x09\x09ifTrue: [tutorialPosition := tutorialPosition + 1].\x0a\x09^ self currentLesson",
+messageSends: ["ifTrue:", "<", "tutorialPosition", "size", "+", "currentLesson"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_previous",
+smalltalk.method({
+selector: "previous",
+category: 'navigation',
+fn: function (){
+var self=this;
+((($receiver = ((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver >(1) : smalltalk.send($receiver, "__gt", [(1)]))).klass === smalltalk.Boolean) ? ($receiver ? (function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver -(1) : smalltalk.send($receiver, "__minus", [(1)])));})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return (self['@tutorialPosition']=((($receiver = self['@tutorialPosition']).klass === smalltalk.Number) ? $receiver -(1) : smalltalk.send($receiver, "__minus", [(1)])));})]));
+return smalltalk.send(self, "_currentLesson", []);
+return self;},
+args: [],
+source: "previous\x0a\x09tutorialPosition >  1 ifTrue: [tutorialPosition := tutorialPosition  - 1].\x0a\x09^ self currentLesson",
+messageSends: ["ifTrue:", ">", "-", "currentLesson"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_rewind",
+smalltalk.method({
+selector: "rewind",
+category: 'navigation',
+fn: function (){
+var self=this;
+(self['@tutorialPosition']=(1));
+return self;},
+args: [],
+source: "rewind\x0a\x09tutorialPosition := 1.",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_size",
+smalltalk.method({
+selector: "size",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_tutorial", []), "_size", []);
+return self;},
+args: [],
+source: "size\x0a\x09^ self tutorial size",
+messageSends: ["size", "tutorial"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorial",
+smalltalk.method({
+selector: "tutorial",
+category: 'accessing',
+fn: function (){
+var self=this;
+return (($receiver = self['@tutorial']) == nil || $receiver == undefined) ? (function(){return (self['@tutorial']=smalltalk.send((smalltalk.SmalltalkSyntaxTutorial || SmalltalkSyntaxTutorial), "_new", []));})() : $receiver;
+return self;},
+args: [],
+source: "tutorial\x0a\x09^ tutorial  ifNil: [tutorial := SmalltalkSyntaxTutorial new]",
+messageSends: ["ifNil:", "new"],
+referencedClasses: ["SmalltalkSyntaxTutorial"]
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorial_",
+smalltalk.method({
+selector: "tutorial:",
+category: 'accessing',
+fn: function (aTutorial){
+var self=this;
+(self['@tutorial']=aTutorial);
+return self;},
+args: ["aTutorial"],
+source: "tutorial: aTutorial\x0a\x09tutorial := aTutorial",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorialPosition",
+smalltalk.method({
+selector: "tutorialPosition",
+category: 'accessing',
+fn: function (){
+var self=this;
+return (($receiver = self['@tutorialPosition']) == nil || $receiver == undefined) ? (function(){smalltalk.send(self, "_rewind", []);return self['@tutorialPosition'];})() : $receiver;
+return self;},
+args: [],
+source: "tutorialPosition \x0a\x09^ tutorialPosition  ifNil: [\x0a\x09\x09self rewind.\x0a\x09\x09tutorialPosition.\x0a\x09].",
+messageSends: ["ifNil:", "rewind"],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+smalltalk.addMethod(
+"_tutorialPosition_",
+smalltalk.method({
+selector: "tutorialPosition:",
+category: 'accessing',
+fn: function (aTutorialPosition){
+var self=this;
+(self['@tutorialPosition']=aTutorialPosition);
+return self;},
+args: ["aTutorialPosition"],
+source: "tutorialPosition: aTutorialPosition \x0a\x09tutorialPosition := aTutorialPosition",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.TutorialPlayer);
+
+
+

trysmalltalk/st/TrySmalltalk.st

@@ -0,0 +1,969 @@
+Smalltalk current createPackage: 'TrySmalltalk' properties: #{}!
+Object subclass: #AbstractTutorial
+	instanceVariableNames: ''
+	package: 'TrySmalltalk'!
+!AbstractTutorial commentStamp!
+Parent class of all ProfStef tutorials.
+
+To create your own tutorial:
+- subclass AbstractTutorial
+- implement a few methods which returns a Lesson instance
+- implement tutorial which returns a Collection of selectors to the methods you've created.!
+
+!AbstractTutorial methodsFor: 'accessing'!
+
+indexOfLesson: aSelector
+	^self tableOfContents indexOf: aSelector.
+!
+
+lessonAt: anInteger
+	| lessonSelector |
+	lessonSelector := self tableOfContents at: anInteger.
+	^ self perform: lessonSelector.
+!
+
+size
+	^ self tableOfContents size
+!
+
+tableOfContents
+^ #(
+  'welcome'
+  'testLesson'
+  'theEnd'
+)
+! !
+
+!AbstractTutorial methodsFor: 'pages'!
+
+testLesson
+	^ Lesson
+		title: 'Test Lesson' 
+		contents: '"This lesson is a test"'
+!
+
+theEnd
+	^ Lesson
+		title: 'The End' 
+		contents: '"And that''d be pretty much it :)"'
+!
+
+welcome
+	^ Lesson
+		title: 'Welcome' 
+		contents: '"Hi, this is a test tutorial."'
+! !
+
+AbstractTutorial subclass: #SmalltalkSyntaxTutorial
+	instanceVariableNames: ''
+	package: 'TrySmalltalk'!
+!SmalltalkSyntaxTutorial commentStamp!
+The default ProfStef tutorial to learn Smalltalk syntax!
+
+!SmalltalkSyntaxTutorial methodsFor: 'contents'!
+
+tableOfContents
+^ #(	'welcome'
+	'doingVSPrinting'
+	'printing'
+
+	'basicTypesNumbers'
+	"'basicTypesCharacters'"
+	'basicTypesString'
+	"'basicTypesSymbol'"
+	'basicTypesArray'
+	'basicTypesDynamicArray'
+
+	'messageSyntaxUnary'
+	'messageSyntaxBinary'
+	'messageSyntaxKeyword'
+	'messageSyntaxExecutionOrder'
+	'messageSyntaxExecutionOrderParentheses'
+	'mathematicalPrecedence'
+	'messageSyntaxCascade'
+	'messageSyntaxCascadeShouldNotBeHere'
+
+	'blocks'
+	'blocksAssignation'
+	'conditionals'
+	'loops'
+	'iterators'
+
+	'instanciation'
+
+	'reflection'
+	'reflectionContinued'
+	"'pharoEnvironment'"
+
+	"'debugger'"
+	'theEnd' )
+! !
+
+!SmalltalkSyntaxTutorial methodsFor: 'pages'!
+
+basicTypesArray
+	^ Lesson
+title: 'Basic types: Array' 
+contents: 
+'"Literal arrays are created at parse time:"
+
+#(1 2 3).
+
+#( 1 2 3 #(4 5 6)) size.
+
+#(1 2 4) isEmpty.
+
+#(1 2 3) first.
+
+#(''hello'' ''Javascript'') at: 2 put: ''Smalltalk''; yourself.
+
+ProfStef next.'
+!
+
+basicTypesCharacters
+	^ Lesson
+title: 'Basic types: Characters' 
+contents: 
+'"A Character can be instantiated using $ operator:"
+
+$A.
+
+$A class.
+
+$B charCode.
+
+Character cr.
+
+Character space.
+
+"You can print all 256 characters of the ASCII extended set:"
+
+Character allByteCharacters.
+
+ProfStef next.'
+!
+
+basicTypesDynamicArray
+	^ Lesson
+title: 'Basic types: Dynamic Array' 
+contents: 
+'"Dynamic Arrays are created at execution time:"
+
+{ (2+3) . (6*6) }.
+
+{ (2+3) . (6*6) . ''hello'', '' Stef''} size.
+
+
+{ ProfStef } first next.'
+!
+
+basicTypesNumbers
+	^ Lesson
+title: 'Basic types: Numbers' 
+contents: 
+'"You now know how to execute Smalltalk code. 
+
+Now let''s talk about basic objects.
+
+1, 2, 100, 2/3 ... are Numbers, and respond to many messages evaluating mathematical expressions.
+Evaluate these ones:"
+
+2.
+
+(1/3).
+
+(1/3) + (4/5).
+
+(18/5) rounded.
+
+1 class.
+
+1 negated.
+
+1 negated negated.
+
+(1 + 3) odd.
+
+ProfStef next.'
+!
+
+basicTypesString
+	^ Lesson
+title: 'Basic types: Strings' 
+contents: 
+'"A String is a collection of characters. Use single quotes to create a String object. Print these expressions:"
+
+''ProfStef''.
+
+''ProfStef'' size.
+
+''abc'' asUppercase.
+
+''Hello World'' reversed. 
+
+"You can access each character using at: message"
+
+''ProfStef'' at: 1.
+
+"String concatenation uses the comma operator:"
+
+''ProfStef'', '' is cool''.
+
+ProfStef next.'
+!
+
+basicTypesSymbol
+	^ Lesson
+title: 'Basic types: Symbols' 
+contents: 
+'"A Symbol is a String which is guaranteed to be globally unique. 
+
+There is one and only one Symbol #ProfStef. There may be several ''ProfStef'' String objects.
+
+(Message == returns true if the two objects are the SAME)"
+
+''ProfStef'' asSymbol.
+
+#ProfStef asString.
+
+(2 asString) == (2 asString).
+
+(2 asString) asSymbol == (2 asString) asSymbol.
+
+
+(Smalltalk at: #ProfStef) next.'
+!
+
+blocks
+	^ Lesson
+title: 'Blocks' 
+contents: 
+'"Cascade is cool !! Let''s talk about blocks.
+
+Blocks are anonymous methods that can be stored into variables and executed on demand.
+
+Blocks are delimited by square brackets: []"
+
+[Transcript open].
+
+"does not open a Transcript because the block is not executed.
+
+Here is a block that adds 2 to its argument (its argument is named x):"
+
+[:x | x+2].
+
+"We can execute a block by sending it value messages."
+
+[:x | x+2] value: 5.
+
+[Transcript open] value.
+
+[:x | x+2] value: 10.
+
+[:x :y| x + y] value:3 value:5.
+
+[ProfStef next] value.'
+!
+
+blocksAssignation
+	^ Lesson
+title: 'Block assignation' 
+contents: 
+'"Blocks can be assigned to a variable then executed later.
+
+Note that |b| is the declaration of a variable named ''b'' and that '':='' assigns a value to a variable.
+
+Select the three lines then Print It:"
+
+|b|
+b := [:x | x+2].
+b value: 12.
+
+
+ProfStef next.'
+!
+
+conditionals
+	^ Lesson
+title: 'Conditionals' 
+contents: 
+'"Conditionals are just messages sent to Boolean objects"
+
+1 < 2
+  ifTrue: [100]
+  ifFalse: [42].
+
+"Here the message is ifTrue:ifFalse
+
+Try this:"
+
+Transcript open.
+
+3 > 10 
+	ifTrue: [Transcript show: ''maybe there''''s a bug ....'']
+	ifFalse: [Transcript show: ''No : 3 is less than 10''].
+
+3 = 3 ifTrue: [ProfStef next].'.
+!
+
+debugger
+	^ Lesson
+title: 'Debugger' 
+contents: '"The Debugger may be the most famous tool of Smalltalk environments. It will open as soon as an unmanaged Exception occurs. 
+
+The following code will open the debugger.
+
+***This should be rethought completely***"
+
+
+ '
+!
+
+doingVSPrinting 
+	^ Lesson
+title: 'Doing VS Printing: Doing' 
+contents: 
+'"Cool !! (I like to say Cooool :) ).
+You''ve just executed a Smalltalk expression.
+More precisely, you sent the message ''next'' to ProfStef class (it''s me !!).
+
+Note you can run this tutorial again by evaluating: ''ProfStef go''. 
+''ProfStef previous'' returns to the previous lesson.
+
+You can also Do It using the keyboard shortcut ''CTRL d''
+
+Try to evaluate this expression:"
+
+window alert: ''hello world!!''.
+
+"Then go to the next lesson:"
+
+ProfStef next.'
+!
+
+instanciation
+	^ Lesson
+title: 'Instanciation' 
+contents: 
+'"Objects are instances of their class. Usually, we send the message #new to a class for creating an instance of this class.
+
+For example, let''s create an instance of the class Array:"
+
+Array new
+	add: ''Some text'';
+	add: 3.;
+	yourself.
+
+"See the array we''ve created? Actually, #(''Some text'' 3) is just a shorthand for instantiating arrays."
+
+"If we use a variable to keep track of this object, we''ll be able to do stuff with it."
+
+"The following code must be ran all at one, as the ''anArray'' variable will cease to exist once the execution finishes:"
+
+|anArray|
+
+anArray := Array new
+	add: ''Some text'';
+	add: 3;
+	yourself.
+
+Transcript show: anArray; cr.
+
+anArray remove: 3.
+
+Transcript show: anArray; cr.
+
+anArray add: ''Some more text!!''.
+
+Transcript show: anArray; cr.
+	
+"I''ll put myself in an instance of a class named Dictionary and go to the next lesson:"
+
+((Dictionary new add: (''move on!!'' -> ProfStef)) at: ''move on!!'') next'
+!
+
+iterators
+	^ Lesson
+title: 'Iterators' 
+contents: 
+'"The message do: is sent to a collection of objects (Array, Dictionary, String, etc), evaluating the block for each element.
+
+Here we want to print all the numbers on the Transcript (a console)"
+
+#(11 38 3 -2 10) do: [:each |
+     Transcript show: each printString; cr].
+
+"Some other really nice iterators"
+
+#(11 38 3 -2 10) collect: [:each | each negated].
+
+#(11 38 3 -2 10) collect: [:each | each odd].
+
+#(11 38 3 -2 10) select: [:each | each odd].
+
+#(11 38 3 -2 10) select: [:each | each > 10].
+
+#(11 38 3 -2 10) reject: [:each | each > 10].
+
+#(11 38 3 -2 10) 
+     do: [:each | Transcript show: each printString]
+     separatedBy: [Transcript show: ''.''].
+
+
+(Smalltalk current classes select: [:eachClass | eachClass name = ''ProfStef'']) do: [:eachProfstef | eachProfstef next].'
+!
+
+loops
+	^ Lesson
+title: 'Loops' 
+contents: 
+'"Loops are high-level collection iterators, implemented as regular methods."
+
+"Basic loops:
+  to:do:
+  to:by:do"
+
+1 to: 100 do:
+  [:i | Transcript show: i asString; cr ].
+
+1 to: 100 by: 3 do: [:i | Transcript show: i asString; cr].
+
+100 to: 0 by: -2 do: 
+    [:i | Transcript show: i asString; cr].
+
+1 to: 1 do: [:i | ProfStef next].'
+!
+
+mathematicalPrecedence
+	^ Lesson
+title: 'Mathematical precedence'
+contents: 
+'"Traditional precedence rules from mathematics do not follow in Smalltalk."
+
+2 * 10 + 2.
+
+"Here the message * is sent to 2, which answers 20, then 20 receive the message +
+
+Remember that all messages always follow a simple left-to-right precedence rule, * without exceptions *."
+
+2 + 2 * 10.
+
+2 + (2 * 10).
+
+8 - 5 / 2.
+
+(8 - 5) / 2.
+
+8 - (5 / 2).
+
+ProfStef next.'
+!
+
+messageSyntaxBinary
+	^ Lesson
+title: 'Message syntax: Binary messages' 
+contents: 
+'"Binary messages have the following form:
+    anObject + anotherObject"
+
+3 * 2.
+
+Date today year = 2011.
+
+false | false.
+
+true & true.
+
+true & false.
+
+10 @ 100.
+
+10 <= 12.
+
+''ab'', ''cd''.
+
+ProfStef next.'
+!
+
+messageSyntaxCascade
+	^ Lesson
+title: 'Message syntax: Cascade' 
+contents: 
+'"; is the cascade operator. It''s useful to send message to the SAME receiver
+Open a Transcript (console):"
+
+Transcript open.
+
+"Then:"
+
+Transcript show: ''hello''.
+Transcript show: ''Smalltalk''.
+Transcript cr.
+
+"is equivalent to:"
+
+Transcript 
+	   show: ''hello'';
+	   show: ''Smalltalk'' ;
+	   cr.
+
+"You can close the development tools by clicking on the red circle with a cross at the bottom left of the website.
+Try to go to the next lesson with a cascade of two ''next'' messages:"
+
+ProfStef'.
+!
+
+messageSyntaxCascadeShouldNotBeHere
+	^ Lesson
+title: 'Lost ?' 
+contents: 
+'"Hey, you should not be here !!!! 
+
+Go back and use a cascade !!"
+
+ProfStef previous.'.
+!
+
+messageSyntaxExecutionOrder
+	^ Lesson
+title: 'Message syntax: Execution order' 
+contents: 
+'"Unary messages are executed first, then binary messages and finally keyword messages:
+    Unary > Binary > Keywords"
+
+2.5 + 3.8 rounded.
+
+3 max: 2 + 2.
+  
+(0@0) class.
+
+0@0 x: 100.
+
+(0@0 x: 100) class.
+
+"Between messages of similar precedence, expressions are executed from left to right"
+
+-12345 negated asString reversed.
+
+ProfStef next.'
+!
+
+messageSyntaxExecutionOrderParentheses
+	^ Lesson
+title: 'Message syntax: Parentheses'
+contents: 
+'"Use parentheses to change order of evaluation"
+
+(2.5 + 3.8) rounded.
+
+(3 max: 2) + 2.
+
+ProfStef next.'
+!
+
+messageSyntaxKeyword
+	^ Lesson
+title: 'Message syntax: Keyword messages' 
+contents: 
+'"Keyword Messages are messages with arguments. They have the following form:
+    anObject akey: anotherObject akey2: anotherObject2"
+
+''Web development is a good deal of pain'' copyFrom: 1 to: 30
+
+"The message is copyFrom:to: sent to the String ''Web development is a good deal of pain''"
+
+1 max: 3.
+
+Array with: ''hello'' with: 2 with: Smalltalk.
+
+"The message is with:with:with: implemented on class Array. Note you can also write"
+
+Array
+	with: ''Hi there!!''
+	with: 2
+	with: Smalltalk.
+	
+ProfStef perform: ''next''.'
+!
+
+messageSyntaxUnary
+	^ Lesson
+title: 'Message syntax: Unary messages' 
+contents: 
+'"Messages are sent to objects. There are three types of message: Unary, Binary and Keyword.
+
+Unary messages have the following form:
+    anObject aMessage 
+
+You''ve already sent unary messages. For example:"
+
+1 class.
+
+false not.
+
+Date today.
+
+Number pi.
+
+"And of course: "
+
+ProfStef next.'
+!
+
+pharoEnvironment
+	^ Lesson
+title: 'Pharo environment' 
+contents: 
+'"Every Smalltalk system is full of objects.
+There are windows, text, numbers, dates, colors, points and much more.
+You can interact with objects in a much more direct way than is possible with other programming languages.
+
+Every object understands the message ''explore''. As a result, you get an Explorer window that shows details about the object."
+
+Date today explore.
+
+"This shows that the date object consists of a point in time (start) and a duration (one day long)."
+
+ProfStef explore.
+
+"You see, ProfStef class has a lot of objects. Let''s take a look at my code:"
+
+ProfStef browse.
+
+ProfStef next.'
+!
+
+printing 
+	^ Lesson
+title: 'Doing VS Printing: Printing' 
+contents: 
+'"Now you''re a Do It master !! Let''s talk about printing.
+It''s a Do It which prints the result next to the expression you''ve selected.
+For example, select the text below, and click on ''PrintIt'':"
+
+1 + 2.
+
+"As with ''DoIt'', there is also a shortcut to execute this command.
+
+Try CTRL-p on the following expressions:"
+
+Date today.
+
+"The result is selected, so you can erase it using the backspace key. Try it !!"
+
+Date today asDateString.
+
+Date today asTimeString.
+
+ProfStef next.'
+!
+
+reflection
+	^ Lesson
+title: 'Reflection' 
+contents: 
+'"You can inspect and change the system at runtime.
+
+Take a look at the source code of the method #and: of the class Boolean:"
+
+(Boolean methodDictionary at: ''and:'') source.
+
+"Or all the methods it sends:"
+
+(Boolean methodDictionary at: ''and:'') messageSends.
+
+"Here''s all the methods I implement:"
+
+ProfStef methodDictionary.
+
+"Let''s create a new method to go to the next lesson:"
+
+|newMethod|
+newMethod := Compiler new load: ''goToNextLesson ProfStef next.'' forClass: ProfStef.
+ProfStef class addCompiledMethod: newMethod
+
+"Wow!! I can''t wait to use my new method!!"
+
+ProfStef goToNextLesson.'
+!
+
+reflectionContinued
+	^ Lesson
+title: 'Reflection continued' 
+contents: 
+'"So cool, isn''t it ?  Before going further, let''s remove this method:"
+
+ProfStef class methodAt: #goToNextLesson.
+
+ProfStef class removeCompiledMethod: (ProfStef class methodAt: #goToNextLesson).
+
+ProfStef class methodAt: #goToNextLesson.
+
+
+"Then move forward:"
+
+ProfStef perform:#next'
+!
+
+theEnd
+	^ Lesson
+title: 'Tutorial done !!' 
+contents: 
+'"This tutorial is done. Enjoy programming Smalltalk with Amber. 
+
+You can run this tutorial again by evaluating: ProfStef go.
+
+See you soon !!"
+'
+!
+
+welcome
+	^ Lesson
+title: 'Welcome' 
+contents: 
+' "Hello!! I''m Professor Stef. 
+
+You must want me to help you learn Smalltalk.
+
+So let''s go to the first lesson.  Select the text below and click on the ''DoIt'' button"
+
+ProfStef next.'
+! !
+
+Object subclass: #Lesson
+	instanceVariableNames: 'title contents'
+	package: 'TrySmalltalk'!
+
+!Lesson methodsFor: 'accessing'!
+
+contents
+	^ contents ifNil: [contents := '']
+!
+
+contents: aString
+	contents := aString
+!
+
+title
+	^ title ifNil: [title := '']
+!
+
+title: aString
+	title := aString
+! !
+
+!Lesson class methodsFor: 'instance creation'!
+
+title: aTitle contents: someContents
+	^ (self new)
+		title: aTitle;
+		contents: someContents
+! !
+
+Object subclass: #ProfStef
+	instanceVariableNames: 'tutorialPlayer widget'
+	package: 'TrySmalltalk'!
+!ProfStef commentStamp!
+A ProfStef is the Smalltalk teacher. To start the tutorial, evaluate:
+ProfStef go.
+
+To go to the next lesson evaluate:
+ProfStef next.
+
+To execute your own tutorial:
+ProfStef goOn: MyOwnTutorial
+
+To see a table of contents with all defined tutorials:
+ProfStef contents!
+
+!ProfStef methodsFor: 'accessing'!
+
+progress
+	^ '(', self tutorialPositionString, '/', self tutorialSizeString, ')'.
+!
+
+showCurrentLesson
+	| lesson |
+	lesson := self tutorialPlayer currentLesson.
+	widget contents: lesson contents.
+	widget setTitle: lesson title , ' ' , self progress.
+!
+
+tutorialPlayer
+	^ tutorialPlayer ifNil: [tutorialPlayer := TutorialPlayer new]
+!
+
+tutorialPositionString
+	^ self tutorialPlayer tutorialPosition asString.
+!
+
+tutorialSizeString
+	^ self tutorialPlayer size asString
+!
+
+widget: aWidget
+	widget := aWidget
+! !
+
+!ProfStef methodsFor: 'navigation'!
+
+first
+	self tutorialPlayer first.
+	^ self showCurrentLesson.
+!
+
+next
+	self tutorialPlayer next.
+	^ self showCurrentLesson.
+!
+
+previous
+	self tutorialPlayer previous.
+	^ self showCurrentLesson.
+! !
+
+ProfStef class instanceVariableNames: 'instance'!
+
+!ProfStef class methodsFor: 'initialize'!
+
+default 
+	^ instance ifNil: [instance := self new]
+! !
+
+!ProfStef class methodsFor: 'navigation'!
+
+first
+	^ self default first.
+!
+
+go
+	self first.
+!
+
+next
+	^ self default next.
+!
+
+previous
+	^ self default previous.
+! !
+
+Widget subclass: #TrySmalltalkWidget
+	instanceVariableNames: 'workspace contents header'
+	package: 'TrySmalltalk'!
+
+!TrySmalltalkWidget methodsFor: 'accessing'!
+
+contents
+	^self workspace val
+!
+
+contents: aString
+	self workspace val: aString
+!
+
+setTitle: aString
+	header contents: [:html | html with: aString]
+!
+
+workspace
+	^ workspace ifNil: [
+          	workspace := SourceArea new]
+! !
+
+!TrySmalltalkWidget methodsFor: 'rendering'!
+
+renderButtonsOn: html
+    html button
+	with: 'DoIt';
+	title: 'ctrl+d';
+	onClick: [self workspace doIt].
+    html button
+	with: 'PrintIt';
+	title: 'ctrl+p';
+	onClick: [self workspace printIt].
+    html button
+	with: 'InspectIt';
+	title: 'ctrl+i';
+	onClick: [self workspace inspectIt]
+!
+
+renderOn: html
+	html div 
+		class: 'profStef'; 
+		with: [header := html h2];
+		with: [self workspace renderOn: html];
+		with: [self renderButtonsOn: html].
+          ProfStef default 
+		widget: self;
+		showCurrentLesson
+! !
+
+!TrySmalltalkWidget class methodsFor: 'initialize'!
+
+open
+	self new appendToJQuery: 'body' asJQuery.
+! !
+
+Object subclass: #TutorialPlayer
+	instanceVariableNames: 'tutorialPosition tutorial'
+	package: 'TrySmalltalk'!
+!TutorialPlayer commentStamp!
+I can navigate through an AbstractTutorial subclass. With #next and #previous you can go forward and backward through the tutorial.!
+
+!TutorialPlayer methodsFor: 'accessing'!
+
+currentLesson
+	^ self tutorial lessonAt: self tutorialPosition.
+!
+
+size
+	^ self tutorial size
+!
+
+tutorial
+	^ tutorial  ifNil: [tutorial := SmalltalkSyntaxTutorial new]
+!
+
+tutorial: aTutorial
+	tutorial := aTutorial
+!
+
+tutorialPosition 
+	^ tutorialPosition  ifNil: [
+		self rewind.
+		tutorialPosition.
+	].
+!
+
+tutorialPosition: aTutorialPosition 
+	tutorialPosition := aTutorialPosition
+! !
+
+!TutorialPlayer methodsFor: 'navigation'!
+
+first
+	self rewind.
+	^ self currentLesson
+!
+
+last
+	tutorialPosition := self size.
+	^ self currentLesson
+!
+
+next
+	self tutorialPosition < self size
+		ifTrue: [tutorialPosition := tutorialPosition + 1].
+	^ self currentLesson
+!
+
+previous
+	tutorialPosition >  1 ifTrue: [tutorialPosition := tutorialPosition  - 1].
+	^ self currentLesson
+!
+
+rewind
+	tutorialPosition := 1.
+! !
+

twitterwall/css/twitterwall.css

@@ -0,0 +1,19 @@
+#twitterwall {
+    background: #eee;
+    border: 3px solid #ccc;
+    padding: 20px;
+    margin-bottom: 50px;
+	width: 500px;
+	height: 500px;
+}
+#user {
+	width: 15%;
+}
+#message{
+	font-family:'Verdana';
+	font-size: 12px
+}
+#date{
+	font-family:'Verdana';
+	font-size: 10px
+}

twitterwall/index.html

@@ -0,0 +1,35 @@
+
+<!DOCTYPE html> 
+<html> 
+  <head> 
+    <title>Twitterwall</title> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
+    <meta name="author" content="Stefan Krecher" /> 
+	<link rel="stylesheet" type="text/css" href='css/twitterwall.css' /> 
+    <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/> 
+    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'> 
+    <script src="../../js/amber.js" type="text/javascript"></script>
+  </head> 
+  <body> 
+         
+	<center>
+		<h2>A simple Twitterwall made with Amber</h2>
+		<p>Shows the last 5 Tweets regarding your query</p>
+	    <p>Examine the <button onClick="smalltalk.Browser._openOn_(smalltalk.TwitterSearch)"> TwitterSearch class</button></p> 
+
+	<p>Query:<br><input id="searchQuery" type="text" size="30" maxlength="30" value="#smalltalk">
+	<button onClick="smalltalk.TwitterSearch._new()._query()">update</button>
+	</p>
+	<div id="playground"></div>
+	</center>
+	<script type="text/javascript"> 
+	loadAmber({
+		files: ['TwitterWall.js'],
+		prefix: 'examples/twitterwall/js',
+		ready: function() {
+			smalltalk.TwitterSearch._new()._query() 
+		}}); 
+</script>
+	
+  </body> 
+</html> 

twitterwall/js/TwitterWall.deploy.js

@@ -0,0 +1,116 @@
+smalltalk.addPackage('TwitterWall', {});
+smalltalk.addClass('Tweet', smalltalk.Widget, ['json'], 'TwitterWall');
+smalltalk.addMethod(
+'_renderOn_',
+smalltalk.method({
+selector: 'renderOn:',
+fn: function (tr) {
+    var self = this;
+    var tdUser = nil;
+    var tdMessage = nil;
+    var img = nil;
+    var a = nil;
+    var pMessage = nil;
+    var pDate = nil;
+    tdUser = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdUser, "_element", []), "_id_", ["user"]);
+    tdMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdMessage, "_element", []), "_id_", ["messageBox"]);
+    smalltalk.send(tr, "_append_", [tdUser]);
+    smalltalk.send(tr, "_append_", [tdMessage]);
+    img = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_img", []), "_src_", [smalltalk.send(self['@json'], "_at_", ["profile_image_url"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_title_", [smalltalk.send(self['@json'], "_at_", ["from_user"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_longDesc_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    a = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_a", []), "_href_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    smalltalk.send(a, "_append_", [img]);
+    smalltalk.send(tdUser, "_append_", [a]);
+    pMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pMessage, "_element", []), "_id_", ["message"]);
+    smalltalk.send(pMessage, "_append_", [smalltalk.send(self['@json'], "_at_", ["text"])]);
+    smalltalk.send(tdMessage, "_append_", [pMessage]);
+    pDate = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pDate, "_element", []), "_id_", ["date"]);
+    smalltalk.send(pDate, "_append_", [smalltalk.send(self['@json'], "_at_", ["created_at"])]);
+    smalltalk.send(tdMessage, "_append_", [pDate]);
+    return self;
+}
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+'_json',
+smalltalk.method({
+selector: 'json',
+fn: function () {
+    var self = this;
+    return self['@json'];
+    return self;
+}
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+'_json_',
+smalltalk.method({
+selector: 'json:',
+fn: function (aJson) {
+    var self = this;
+    self['@json'] = aJson;
+    return self;
+}
+}),
+smalltalk.Tweet);
+
+
+smalltalk.addMethod(
+'_openAt_with_',
+smalltalk.method({
+selector: 'openAt:with:',
+fn: function (tr, aJson) {
+    var self = this;
+    var tweet = nil;
+    tweet = smalltalk.send(self, "_new", []);
+    smalltalk.send(tweet, "_json_", [aJson]);
+    smalltalk.send(tweet, "_renderOn_", [tr]);
+    return tr;
+    return self;
+}
+}),
+smalltalk.Tweet.klass);
+
+
+smalltalk.addClass('TwitterSearch', smalltalk.Object, ['queryString'], 'TwitterWall');
+smalltalk.addMethod(
+'_success_',
+smalltalk.method({
+selector: 'success:',
+fn: function (tweets) {
+    var self = this;
+    var playground = nil;
+    var table = nil;
+    var tr = nil;
+    playground = smalltalk.send(unescape("%23playground"), "_asJQuery", []);
+    smalltalk.send(playground, "_empty", []);
+    smalltalk.send(function (html) {table = smalltalk.send(html, "_table", []);smalltalk.send(smalltalk.send(table, "_element", []), "_id_", ["twitterwall"]);return smalltalk.send(tweets, "_do_", [function (tweet) {tr = smalltalk.send(html, "_tr", []);smalltalk.send(table, "_append_", [tr]);return smalltalk.send(smalltalk.Tweet || Tweet, "_openAt_with_", [tr, tweet]);}]);}, "_appendToJQuery_", [playground]);
+    return self;
+}
+}),
+smalltalk.TwitterSearch);
+
+smalltalk.addMethod(
+'_query',
+smalltalk.method({
+selector: 'query',
+fn: function () {
+    var self = this;
+    var result = nil;
+    var queryString = nil;
+    self['@queryString'] = smalltalk.send(smalltalk.send(smalltalk.send(unescape("%23searchQuery"), "_asJQuery", []), "_val", []), "_replace_with_", [unescape("%23"), unescape("%2523")]);
+    result = smalltalk.send(typeof jQuery == "undefined" ? nil : jQuery, "_ajax_options_", [smalltalk.send(unescape("http%3A//search.twitter.com/search.json%3Frpp%3D5%26q%3D"), "__comma", [self['@queryString']]), smalltalk.HashedCollection._fromPairs_([smalltalk.send("type", "__minus_gt", ["GET"]), smalltalk.send("success", "__minus_gt", [function (tmp) {return smalltalk.send(self, "_success_", [smalltalk.send(tmp, "_results", [])]);}]), smalltalk.send("error", "__minus_gt", [function () {return smalltalk.send(typeof window == "undefined" ? nil : window, "_alert_", ["error"]);}]), smalltalk.send("dataType", "__minus_gt", ["jsonp"])])]);
+    return self;
+}
+}),
+smalltalk.TwitterSearch);
+
+
+

twitterwall/js/TwitterWall.js

@@ -0,0 +1,146 @@
+smalltalk.addPackage('TwitterWall', {});
+smalltalk.addClass('Tweet', smalltalk.Widget, ['json'], 'TwitterWall');
+smalltalk.addMethod(
+unescape('_renderOn_'),
+smalltalk.method({
+selector: unescape('renderOn%3A'),
+category: 'not yet classified',
+fn: function (tr) {
+    var self = this;
+    var tdUser = nil;
+    var tdMessage = nil;
+    var img = nil;
+    var a = nil;
+    var pMessage = nil;
+    var pDate = nil;
+    tdUser = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdUser, "_element", []), "_id_", ["user"]);
+    tdMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdMessage, "_element", []), "_id_", ["messageBox"]);
+    smalltalk.send(tr, "_append_", [tdUser]);
+    smalltalk.send(tr, "_append_", [tdMessage]);
+    img = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_img", []), "_src_", [smalltalk.send(self['@json'], "_at_", ["profile_image_url"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_title_", [smalltalk.send(self['@json'], "_at_", ["from_user"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_longDesc_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    a = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_a", []), "_href_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    smalltalk.send(a, "_append_", [img]);
+    smalltalk.send(tdUser, "_append_", [a]);
+    pMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pMessage, "_element", []), "_id_", ["message"]);
+    smalltalk.send(pMessage, "_append_", [smalltalk.send(self['@json'], "_at_", ["text"])]);
+    smalltalk.send(tdMessage, "_append_", [pMessage]);
+    pDate = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pDate, "_element", []), "_id_", ["date"]);
+    smalltalk.send(pDate, "_append_", [smalltalk.send(self['@json'], "_at_", ["created_at"])]);
+    smalltalk.send(tdMessage, "_append_", [pDate]);
+    return self;
+},
+args: ["tr"],
+source: unescape('renderOn%3A%20tr%0A%0A%7C%20tdUser%20tdMessage%20img%20a%20pMessage%20pDate%20%7C%0AtdUser%20%3A%3D%20HTMLCanvas%20new%20td.%0AtdUser%20element%20id%3A%20%27user%27.%0AtdMessage%20%3A%3D%20HTMLCanvas%20new%20td.%0AtdMessage%20element%20id%3A%20%27messageBox%27.%0A%0Atr%20append%3A%20tdUser.%0Atr%20append%3A%20tdMessage.%0A%0Aimg%20%3A%3D%20HTMLCanvas%20new%20img%20src%3A%20%28json%20at%3A%20%27profile_image_url%27%29%20.%0Aimg%20element%20title%3A%20%28json%20at%3A%20%27from_user%27%29.%0Aimg%20element%20longDesc%3A%20%28%27http%3A//twitter.com/%27%2C%20%28json%20at%3A%20%27from_user%27%29%29.%0A%0Aa%20%3A%3D%20HTMLCanvas%20new%20a%20href%3A%20%28%27http%3A//twitter.com/%27%2C%20%28json%20at%3A%20%27from_user%27%29%29.%0Aa%20append%3A%20img.%0A%0AtdUser%20append%3A%20a.%0A%0ApMessage%20%3A%3D%20HTMLCanvas%20new%20p.%0ApMessage%20element%20id%3A%20%27message%27.%0ApMessage%20append%3A%20%28json%20at%3A%20%27text%27%29.%0AtdMessage%20append%3A%20pMessage.%0A%0ApDate%20%3A%3D%20HTMLCanvas%20new%20p.%0ApDate%20element%20id%3A%20%27date%27.%0ApDate%20append%3A%20%28json%20at%3A%20%27created_at%27%29.%0AtdMessage%20append%3A%20pDate.'),
+messageSends: ["td", "new", "id:", "element", "append:", "src:", "img", "at:", "title:", "longDesc:", unescape("%2C"), "href:", "a", "p"],
+referencedClasses: ["HTMLCanvas"]
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+unescape('_json'),
+smalltalk.method({
+selector: unescape('json'),
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    return self['@json'];
+    return self;
+},
+args: [],
+source: unescape('json%0A%5Ejson'),
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+unescape('_json_'),
+smalltalk.method({
+selector: unescape('json%3A'),
+category: 'not yet classified',
+fn: function (aJson) {
+    var self = this;
+    self['@json'] = aJson;
+    return self;
+},
+args: ["aJson"],
+source: unescape('json%3A%20aJson%0Ajson%20%3A%3D%20aJson'),
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.Tweet);
+
+
+smalltalk.addMethod(
+unescape('_openAt_with_'),
+smalltalk.method({
+selector: unescape('openAt%3Awith%3A'),
+category: 'not yet classified',
+fn: function (tr, aJson) {
+    var self = this;
+    var tweet = nil;
+    tweet = smalltalk.send(self, "_new", []);
+    smalltalk.send(tweet, "_json_", [aJson]);
+    smalltalk.send(tweet, "_renderOn_", [tr]);
+    return tr;
+    return self;
+},
+args: ["tr", "aJson"],
+source: unescape('openAt%3A%20tr%20with%3A%20aJson%0A%7C%20tweet%20%7C%0Atweet%20%3A%3D%20self%20new.%0Atweet%20json%3A%20aJson.%0Atweet%20renderOn%3A%20tr.%0A%5Etr'),
+messageSends: ["new", "json:", "renderOn:"],
+referencedClasses: []
+}),
+smalltalk.Tweet.klass);
+
+
+smalltalk.addClass('TwitterSearch', smalltalk.Object, ['queryString'], 'TwitterWall');
+smalltalk.addMethod(
+unescape('_success_'),
+smalltalk.method({
+selector: unescape('success%3A'),
+category: 'not yet classified',
+fn: function (tweets) {
+    var self = this;
+    var playground = nil;
+    var table = nil;
+    var tr = nil;
+    playground = smalltalk.send(unescape("%23playground"), "_asJQuery", []);
+    smalltalk.send(playground, "_empty", []);
+    smalltalk.send(function (html) {table = smalltalk.send(html, "_table", []);smalltalk.send(smalltalk.send(table, "_element", []), "_id_", ["twitterwall"]);return smalltalk.send(tweets, "_do_", [function (tweet) {tr = smalltalk.send(html, "_tr", []);smalltalk.send(table, "_append_", [tr]);return smalltalk.send(smalltalk.Tweet || Tweet, "_openAt_with_", [tr, tweet]);}]);}, "_appendToJQuery_", [playground]);
+    return self;
+},
+args: ["tweets"],
+source: unescape('success%3A%20tweets%0A%7C%20playground%20table%20tr%20%7C%0Aplayground%20%3A%3D%20%27%23playground%27%20asJQuery.%0Aplayground%20empty.%0A%20%5B%3Ahtml%20%7C%20%0A%09table%20%3A%3D%20html%20table.%0A%09table%20element%20id%3A%20%27twitterwall%27.%0A%0A%09tweets%20do%3A%20%5B%20%3Atweet%20%7C%20%0A%20%20%20%20%20%20%20%20%09%20%20%20tr%20%3A%3D%20html%20tr.%0A%09%20%20%20%20%20%20%20%20%20%20%20table%20append%3A%20tr.%0A%20%20%20%20%20%20%20%20%09%20%20%20Tweet%20openAt%3A%20tr%20with%3A%20tweet%0A%20%20%20%20%20%20%20%20%5D%0A%5D%20appendToJQuery%3A%20playground.'),
+messageSends: ["asJQuery", "empty", "appendToJQuery:", "table", "id:", "element", "do:", "tr", "append:", "openAt:with:"],
+referencedClasses: ["Tweet"]
+}),
+smalltalk.TwitterSearch);
+
+smalltalk.addMethod(
+unescape('_query'),
+smalltalk.method({
+selector: unescape('query'),
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    var result = nil;
+    var queryString = nil;
+    self['@queryString'] = smalltalk.send(smalltalk.send(smalltalk.send(unescape("%23searchQuery"), "_asJQuery", []), "_val", []), "_replace_with_", [unescape("%23"), unescape("%2523")]);
+    result = smalltalk.send(typeof jQuery == "undefined" ? nil : jQuery, "_ajax_options_", [smalltalk.send(unescape("http%3A//search.twitter.com/search.json%3Frpp%3D5%26q%3D"), "__comma", [self['@queryString']]), smalltalk.HashedCollection._fromPairs_([smalltalk.send("type", "__minus_gt", ["GET"]), smalltalk.send("success", "__minus_gt", [function (tmp) {return smalltalk.send(self, "_success_", [smalltalk.send(tmp, "_results", [])]);}]), smalltalk.send("error", "__minus_gt", [function () {return smalltalk.send(typeof window == "undefined" ? nil : window, "_alert_", ["error"]);}]), smalltalk.send("dataType", "__minus_gt", ["jsonp"])])]);
+    return self;
+},
+args: [],
+source: unescape('query%0A%7C%20result%20queryString%20%7C%0AqueryString%20%3A%3D%20%28%27%23searchQuery%27%20%20asJQuery%20val%29%20replace%3A%20%27%23%27%20with%3A%20%27%2523%27.%0Aresult%20%3A%3D%20jQuery%20%0A%09%09%09ajax%3A%20%27http%3A//search.twitter.com/search.json%3Frpp%3D5%26q%3D%27%2C%20queryString%0A%09%09%09options%3A%20%23%7B%0A%09%09%09%09%27type%27%20-%3E%20%27GET%27.%0A%09%09%09%09%27success%27%20-%3E%20%5B%20%3Atmp%20%7C%20self%20success%3A%20%28tmp%20results%29%5D.%0A%09%09%09%09%27error%27%20-%3E%20%5Bwindow%20alert%3A%20%27error%27%5D.%0A%09%09%09%09%27dataType%27%20-%3E%20%27jsonp%27%0A%09%09%09%7D.'),
+messageSends: ["replace:with:", "val", "asJQuery", "ajax:options:", unescape("%2C"), unescape("-%3E"), "success:", "results", "alert:"],
+referencedClasses: []
+}),
+smalltalk.TwitterSearch);
+
+
+

twitterwall/st/TwitterWall.st

@@ -0,0 +1,91 @@
+Smalltalk current createPackage: 'TwitterWall' properties: #{}!
+Widget subclass: #Tweet
+	instanceVariableNames: 'json'
+	category: 'TwitterWall'!
+
+!Tweet methodsFor: 'not yet classified'!
+
+renderOn: tr
+
+| tdUser tdMessage img a pMessage pDate |
+tdUser := HTMLCanvas new td.
+tdUser element id: 'user'.
+tdMessage := HTMLCanvas new td.
+tdMessage element id: 'messageBox'.
+
+tr append: tdUser.
+tr append: tdMessage.
+
+img := HTMLCanvas new img src: (json at: 'profile_image_url') .
+img element title: (json at: 'from_user').
+img element longDesc: ('http://twitter.com/', (json at: 'from_user')).
+
+a := HTMLCanvas new a href: ('http://twitter.com/', (json at: 'from_user')).
+a append: img.
+
+tdUser append: a.
+
+pMessage := HTMLCanvas new p.
+pMessage element id: 'message'.
+pMessage append: (json at: 'text').
+tdMessage append: pMessage.
+
+pDate := HTMLCanvas new p.
+pDate element id: 'date'.
+pDate append: (json at: 'created_at').
+tdMessage append: pDate.
+!
+
+json
+^json
+!
+
+json: aJson
+json := aJson
+! !
+
+!Tweet class methodsFor: 'not yet classified'!
+
+openAt: tr with: aJson
+| tweet |
+tweet := self new.
+tweet json: aJson.
+tweet renderOn: tr.
+^tr
+! !
+
+Object subclass: #TwitterSearch
+	instanceVariableNames: 'queryString'
+	category: 'TwitterWall'!
+
+!TwitterSearch methodsFor: 'not yet classified'!
+
+success: tweets
+| playground table tr |
+playground := '#playground' asJQuery.
+playground empty.
+ [:html | 
+	table := html table.
+	table element id: 'twitterwall'.
+
+	tweets do: [ :tweet | 
+        	   tr := html tr.
+	           table append: tr.
+        	   Tweet openAt: tr with: tweet
+        ]
+] appendToJQuery: playground.
+!
+
+query
+| result queryString |
+queryString := ('#searchQuery'  asJQuery val) replace: '#' with: '%23'.
+result := jQuery 
+			ajax: 'http://search.twitter.com/search.json?rpp=5&q=', queryString
+			options: #{
+				'type' -> 'GET'.
+				'success' -> [ :tmp | self success: (tmp results)].
+				'error' -> [window alert: 'error'].
+				'dataType' -> 'jsonp'
+			}.
+! !
+

webos/README

@@ -0,0 +1,11 @@
+These are examples that can be run in webOS 3.0 using Enyo - the new UI framework that was released with 3.0.
+
+You can play with them:
+
+- In a real device (a Touchpad or Pre 3 at the moment), but then you would first need to install the webOS SDK 3.0. With your device connected through USB you should be able to do "make run" and it should get installed and started on your device!
+
+- In the emulator included in the SDK. Just start "palm-emulator" and then do "make run" in any of the examples.
+
+- In a WebKit based browser, like Chromium (on Linux, do "make chromium") or Safari on the Mac (yes, it works). But first you would need to ensure that you have a copy of the enyo directory (normally you find it in /opt/PalmSDK/0.1/share/refcode/framework/enyo on Linux, just copy that whole directory into the directory in which you have the jtalk clone from github. Then the relative path in the index.html file referencing Enyo should work.
+
+

webos/eris/EnyoAmber.st

@@ -0,0 +1,36 @@
+"This is a base class for Amber Enyo UI classes. We keep track of an optional sister kind
+in Enyo and typically an instance of it, or an instance without a kind, called ui.
+
+NOTE: Inheritance of ivars seems broken, I need to use #ui: in subclass to set it"
+
+Object subclass: #EnyoFriend
+        instanceVariableNames: 'ui kind'
+        category: 'EnyoAmber'!
+
+!EnyoFriend methodsFor: 'accessing'!
+
+ui
+	^ui
+!
+
+ui: aUI
+	ui := aUI
+!
+
+dollar
+	"Return the $ of ui for easy access to the components of the UI."
+	<return this['@ui'].$>
+!
+
+kind
+	^kind
+! !
+
+!EnyoFriend methodsFor: 'initializing'!
+initialize
+	"We make sure our JS functions can be used transparently from Amber,
+	at this moment we do not use it - trying to create Enyo kinds that are
+	at the same time Amber classes failed for me."
+	super initialize.
+	<this.allowJavaScriptCalls = true>
+! !

webos/eris/Eris.st

@@ -0,0 +1,86 @@
+EnyoFriend subclass: #Eris
+        instanceVariableNames: ''
+        category: 'Eris'!
+
+!Eris methodsFor: 'actions'!
+
+doIt
+    | result |
+    [ result := self eval: self dollar richText getValue ]
+	on: Error
+	do: [:ex |
+		^self warn: ex messageText title: 'Error' button: 'Ooops...'].
+    ^result
+!
+
+clear
+	self dollar richText setValue: ''
+!
+
+eval: aString
+    | compiler node |
+    compiler := Compiler new.
+    node := compiler parseExpression: aString.
+    node isParseFailure ifTrue: [
+	^self warn: 'Ehrm, you are a Smalltalk n00b, right? That is not valid syntax.' title: 'Parsing Error' button: 'Okidoki...'].
+    ^compiler loadExpression: aString.
+!
+
+printString
+	^''
+!
+
+warn: aString title: aTitle button: caption
+	| block popup |
+	block := [popup close].
+	<props = {kind: 'ModalDialog', caption: aTitle, components: [
+			{kind: 'Control', content: aString, className: 'enyo-text-error warning-icon'},
+			{kind: 'Button', caption: caption, onclick: 'closePopup', style: 'margin-top:10px'}],
+		 closePopup: block}>.
+	popup := enyo create: props.
+	popup openAtCenter
+!
+
+print: aString
+    self dollar richText setValue: (self dollar richText getValue), ' ', aString
+!
+
+quack
+	"(self kind: 'Sound'; src: 'DuckQwaq.wav'; create) play"
+	(enyo create: (Dictionary new at: 'kind' put: 'Sound'; at: 'src' put: 'DuckQwaq.wav'; yourself)) play
+!
+
+printIt
+    self print: self doIt printString
+! !
+
+!Eris methodsFor: 'initialization'!
+initialize
+	| props doItBlock printItBlock quackBlock clearBlock |
+	super initialize.
+	doItBlock := [self doIt].
+	printItBlock := [self printIt].
+	quackBlock := [self quack].
+	clearBlock := [self clear].
+
+	<props = {kind: 'VFlexBox', components: [
+			{kind: 'PageHeader', content: 'Eris'},
+ 			{kind: 'RowGroup', caption: 'Workspace', components: [
+				{kind: 'RichText', richContent: false,
+					value: 'Put some funky Amber code here...',
+					autoWordComplete: false, spellcheck: false, autocorrect: false,
+					autoCapitalize: 'lowercase', alwaysLooksFocused: true
+				},
+				{kind: 'Toolbar', components: [
+					{caption: 'Do it', onclick: 'doit'},
+					{caption: 'Print it', onclick: 'printit'},
+					{caption: 'Clear', onclick: 'clear'},
+					{kind: 'Spacer'},
+					{caption: 'Quack!!', onclick: 'quack'}]}]}],
+		doit: doItBlock,
+		printit: printItBlock,
+		quack: quackBlock,
+		clear: clearBlock}>.
+	ui := enyo create: props.
+! !
+

webos/eris/Makefile

@@ -0,0 +1,37 @@
+#
+# If you copy this file for an Enyo/Amber project, just
+# modify these first three lines
+# and then add .st files as you please. This Makefile
+# should pick them all up and compile into Program.js.
+#
+PACKAGE  := amber.eris
+VERSION  := 0.0.1
+FLAGS    := -l Compiler
+
+IPK      := $(PACKAGE)_$(VERSION)_all.ipk
+FILE     := Program
+SOURCES  := $(wildcard *.st)
+OBJECTS  := $(patsubst %.st,%.js,$(wildcard *.st))
+FILEJS   := $(FILE).js
+
+$(FILEJS): $(SOURCES)
+	../../../bin/amberc $(FLAGS) $(SOURCES) $(FILE)
+
+$(IPK): $(FILEJS)
+	palm-package .
+
+clean:
+	rm -f $(FILEJS) $(OBJECTS) $(IPK)
+#	palm-install -r $(PACKAGE)
+
+install: $(IPK)
+	palm-install $(IPK)
+
+# If you want to run it in the emulator, start the emulator first with palm-emulator
+run:    $(IPK)
+	palm-install $(IPK)
+	palm-launch $(PACKAGE)
+
+# This should fire it up in Chromium (at least under Ubuntu)
+chromium: $(FILEJS)
+	chromium-browser --allow-file-access-from-files index.html

webos/eris/README

@@ -0,0 +1,3 @@
+This is an example that was shown at ESUG 2011 running on a HP Touhpad with webOS 3.0.2.
+It shows the minimal beginning of a Jtalk development environment that dynamically can run and build Enyo applications.
+

webos/eris/appinfo.json

@@ -0,0 +1,10 @@
+{
+	"id": "jtalk.eris",
+	"version": "0.0.1",
+	"vendor": "Krampe Dynamic Development",
+	"type": "web",
+	"main": "index.html",
+	"title": "Eris",
+	"icon": "icon.png",
+	"uiRevision": 2
+}

webos/eris/depends.js

@@ -0,0 +1,4 @@
+enyo.depends(
+	"Program.js",
+	"Eris.css"
+);

webos/eris/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+	<title>Eris</title>
+	<script src="../../../../enyo/1.0/framework/enyo.js" type="text/javascript"></script>
+</head>
+<body>
+<script type="text/javascript">
+	smalltalk.Eris._new()._ui().renderInto(document.body);
+</script>
+</body>
+</html>

webos/helloamber/EnyoAmber.st

@@ -0,0 +1,36 @@
+"This is a base class for Amber Enyo UI classes. We keep track of an optional sister kind
+in Enyo and typically an instance of it, or an instance without a kind, called ui.
+
+NOTE: Inheritance of ivars seems broken, I need to use #ui: in subclass to set it"
+
+Object subclass: #EnyoFriend
+        instanceVariableNames: 'ui kind'
+        category: 'EnyoAmber'!
+
+!EnyoFriend methodsFor: 'accessing'!
+
+ui
+	^ui
+!
+
+ui: aUI
+	ui := aUI
+!
+
+dollar
+	"Return the $ of ui for easy access to the components of the UI."
+	<return this['@ui'].$>
+!
+
+kind
+	^kind
+! !
+
+!EnyoFriend methodsFor: 'initializing'!
+initialize
+	"We make sure our JS functions can be used transparently from Amber,
+	at this moment we do not use it - trying to create Enyo kinds that are
+	at the same time Amber classes failed for me."
+	super initialize.
+	<this.allowJavaScriptCalls = true>
+! !