Final tweaks for Google I/O. After this, I promise higher quality commit comments.

21 files changed, 495 insertions, 319 deletions

diff --git a/samples/pom.xml b/samples/pom.xml
index 4813f3ae..00fc33b0 100644
--- a/samples/pom.xml
+++ b/samples/pom.xml
@@ -1,86 +1,100 @@
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <modelVersion>4.0.0</modelVersion>
-  <parent>
-    <groupId>com.google.gwt</groupId>
-    <artifactId>gwtquery-project</artifactId>
-    <version>1.0-SNAPSHOT</version>
-  </parent>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>com.google.gwt</groupId>
+        <artifactId>gwtquery-project</artifactId>
+        <version>1.0-SNAPSHOT</version>
+    </parent>
 
-  <name>GwtQuery Samples</name>
-  <artifactId>gwtquery-samples</artifactId>
-  <packaging>jar</packaging>
-  <dependencies>
-    <dependency>
-      <groupId>${groupId}</groupId>
-      <artifactId>gwtquery</artifactId>
-      <version>${version}</version>
-      <type>jar</type>
-    </dependency>
+    <name>GwtQuery Samples</name>
+    <artifactId>gwtquery-samples</artifactId>
+    <packaging>jar</packaging>
+    <dependencies>
+        <dependency>
+            <groupId>${groupId}</groupId>
+            <artifactId>gwtquery</artifactId>
+            <version>${version}</version>
+            <type>jar</type>
+        </dependency>
 
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-dependency-plugin</artifactId>
-        <executions>
-          <execution>
-            <id>unpack</id>
-            <phase>compile</phase>
-            <goals>
-              <goal>unpack</goal>
-            </goals>
-            <configuration>
-              <artifactItems>
-                <artifactItem>
-                  <groupId>com.google.gwt</groupId>
-                  <artifactId>gwt-dev</artifactId>
-                  <version>${gwtversion}</version>
-                  <classifier>${gwtplatform}-libs</classifier>
-                  <type>zip</type>
-                  <overWrite>true</overWrite>
-                  <outputDirectory>
-                    ${settings.localRepository}/com/google/gwt/gwt-dev/${gwtversion}
-                  </outputDirectory>
-                </artifactItem>
-              </artifactItems>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>com.totsp.gwt</groupId>
-        <artifactId>maven-googlewebtoolkit2-plugin</artifactId>
-        <version>2.0-beta24</version>
-        <configuration>
-          <gwtVersion>${gwtversion}</gwtVersion>
-          <logLevel>WARN</logLevel>
-          <runTarget>
-            gwtquery.samples.GwtQueryDemo/index.html
-          </runTarget>
-          <compileTargets>
-            <compileTarget>
-              gwtquery.samples.GwtQueryDemo
-            </compileTarget>
-            <compileTarget>
-              gwtquery.samples.GwtQueryBench
-            </compileTarget>
-            <compileTarget>
-              gwtquery.samples.GwtQuerySample
-            </compileTarget>
-          </compileTargets>
-          <style>OBF</style>
-        </configuration>
-        <executions>
-          <execution>
-            <id>compilegwt</id>
-            <goals>
-              <goal>compile</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-    </plugins>
-  </build>
+    </dependencies>
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-dependency-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>unpack</id>
+                        <phase>compile</phase>
+                        <goals>
+                            <goal>unpack</goal>
+                        </goals>
+                        <configuration>
+                            <artifactItems>
+                                <artifactItem>
+                                    <groupId>com.google.gwt</groupId>
+                                    <artifactId>gwt-dev</artifactId>
+                                    <version>${gwtversion}</version>
+                                    <classifier>${gwtplatform}-libs</classifier>
+                                    <type>zip</type>
+                                    <overWrite>true</overWrite>
+                                    <outputDirectory>
+                                        ${settings.localRepository}/com/google/gwt/gwt-dev/${gwtversion}
+                                    </outputDirectory>
+                                </artifactItem>
+                            </artifactItems>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>com.totsp.gwt</groupId>
+                <artifactId>maven-googlewebtoolkit2-plugin</artifactId>
+                <version>2.0-beta24</version>
+                <configuration>
+                    <logLevel>${gwt.loglevel}</logLevel>
+                    <style>${gwt.outputstyle}</style>
+                    <gwtVersion>${gwtversion}</gwtVersion>
+
+                    <logLevel>WARN</logLevel>
+                    <runTarget>
+                        gwtquery.samples.GwtQueryDemo/index.html
+                    </runTarget>
+                    <compileTargets>
+                        <compileTarget>
+                            gwtquery.samples.GwtQueryDemo
+                        </compileTarget>
+                        <compileTarget>
+                            gwtquery.samples.GwtQueryBench
+                        </compileTarget>
+                        <compileTarget>
+                            gwtquery.samples.GwtQuerySample
+                        </compileTarget>
+                        <compileTarget>
+                            gwtquery.samples.GwtQueryPlugin
+                        </compileTarget>
+                        <compileTarget>
+                            gwtquery.samples.GwtQueryWidgets
+                        </compileTarget>
+                        <compileTarget>
+                            gwtquery.samples.GwtQueryEffects
+                        </compileTarget>
+
+                    </compileTargets>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>compilegwt</id>
+                        <goals>
+                            <goal>compile</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
 
 </project>
diff --git a/samples/src/main/java/gwtquery/samples/GwtQueryEffects.gwt.xml b/samples/src/main/java/gwtquery/samples/GwtQueryEffects.gwt.xml
new file mode 100644
index 00000000..a8f1ad41
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/GwtQueryEffects.gwt.xml
@@ -0,0 +1,7 @@
+<module>
+    <inherits name='com.google.gwt.query.Query'/>
+    <entry-point class='gwtquery.samples.client.GwtQueryEffectsModule'/>
+  
+  
+</module>
+    
diff --git a/samples/src/main/java/gwtquery/samples/GwtQueryPlugin.gwt.xml b/samples/src/main/java/gwtquery/samples/GwtQueryPlugin.gwt.xml
new file mode 100644
index 00000000..e2254211
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/GwtQueryPlugin.gwt.xml
@@ -0,0 +1,7 @@
+<module>
+    <inherits name='com.google.gwt.query.Query'/>
+    <entry-point class='gwtquery.samples.client.GwtQueryPluginModule'/>
+  
+  
+</module>
+    
diff --git a/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml b/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml
new file mode 100644
index 00000000..cecae267
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml
@@ -0,0 +1,7 @@
+<module>
+    <inherits name='com.google.gwt.query.Query'/>
+    <entry-point class='gwtquery.samples.client.GwtQueryWidgetModule'/>
+  
+  
+</module>
+    
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java
index 3753c25c..2c0b5fc5 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java
@@ -39,14 +39,10 @@ public class GwtQueryDemoModule implements EntryPoint {
         // Ask GWT compiler to generate our interface

         final Slide s = GWT.create(Slide.class);

 

-        // Find all slides, set css to display: none

-        // change first slide to display: block

-        $(s.allSlides()).css("display", "none")

-                .eq(0).css("display", "block");

+        $(s.allSlides()).hide().eq(0).show();

 

-

-        // we initially hide all bullets by setting opacity to 0

-        $(s.allSlideBullets()).css("opacity", "0");

+        // we initially hide all bullets

+        $(s.allSlideBullets()).hide();

 

         // add onclick handler to body element

         $(Document.get().getBody()).click(new Function() {

@@ -62,11 +58,14 @@ public class GwtQueryDemoModule implements EntryPoint {
             public boolean f(Event e) {

                 // onclick, if not all bullets shown, show a bullet and increment

                 if (curBullets < bullets.size()) {

-                    bullets.eq(curBullets++).as(Effects).fadeIn();

+                    bullets.eq(curBullets++).show();

                 } else {

                     // all bullets shown, hide them and current slide

-                    bullets.css("opacity","0");

-                    slides.eq(curSlide).css("display", "none");

+//                    bullets.css("opacity","0");

+                  bullets.hide();

+                  slides.eq(curSlide).hide();

+

+//                    slides.eq(curSlide).css("display", "none");

                     // move to next slide, checking for wrap around

                     curSlide++;

                     if(curSlide == slides.size()) {

@@ -76,7 +75,7 @@ public class GwtQueryDemoModule implements EntryPoint {
                     // query for new set of bullets, and show next slide

                     // by changing opacity to 1 and display to block

                     bullets = $(s.slideBulletsCtx(slides.get(curSlide)));

-                    slides.eq(curSlide).css("display", "block").as(Effects).fadeIn();

+                    slides.eq(curSlide).show();

                 }

                 return true;

             }

diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java
new file mode 100644
index 00000000..26626faf
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java
@@ -0,0 +1,41 @@
+package gwtquery.samples.client;

+

+import com.google.gwt.core.client.EntryPoint;

+import com.google.gwt.query.client.Effects;

+import com.google.gwt.query.client.Function;

+import static com.google.gwt.query.client.Effects.Effects;

+import static com.google.gwt.query.client.Effects.Easing.*;

+import static com.google.gwt.query.client.GQuery.$;

+import static com.google.gwt.query.client.GQuery.$$;

+import static com.google.gwt.query.client.GQuery.lazy;

+import com.google.gwt.user.client.Event;

+

+

+public class GwtQueryEffectsModule implements EntryPoint {

+

+  public void onModuleLoad() {

+

+    $("div > div").

+        css("color", "blue").

+        hover(lazy().

+            css("color", "red").

+            done(), lazy().

+            css("color", "blue").

+            done());

+

+

+    $("div.outer > div").css("position", "relative").dblclick(new Function() {

+      public boolean f(Event e) {

+        $("div.outer > div").as(Effects).

+            animate($$("left: '+=100'"), 400, LINEAR, null).

+            animate($$("top: '+=100'"), 400, LINEAR, null).

+            animate($$("left: '-=100'"), 400, LINEAR, null).

+            animate($$("top: '-=100'"), 400, LINEAR, null);

+

+        return true;

+      }

+    });

+    $(".note").click(lazy().fadeOut().done());

+    $(".note").append(" Hello");

+  }

+}
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryPluginModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryPluginModule.java
new file mode 100644
index 00000000..8b965163
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryPluginModule.java
@@ -0,0 +1,35 @@
+package gwtquery.samples.client;

+

+import com.google.gwt.core.client.EntryPoint;

+import com.google.gwt.event.dom.client.ClickEvent;

+import com.google.gwt.event.dom.client.ClickHandler;

+import com.google.gwt.query.client.Function;

+import static com.google.gwt.query.client.GQuery.$;

+import com.google.gwt.query.client.plugins.Ratings;

+import com.google.gwt.query.client.plugins.Widgets;

+import com.google.gwt.user.client.Event;

+import com.google.gwt.user.client.Window;

+

+

+public class GwtQueryPluginModule implements EntryPoint {

+

+  public void onModuleLoad() {

+

+    $(".outer").eq(0).after("<button id='enhance'>Enhance</button>");

+    $("#enhance").one(Event.ONCLICK, null, new Function() {

+      @Override

+      public boolean f(Event e) {

+        $(e).attr("disabled", "true");

+        $("input").as(Ratings.Ratings).rating();

+        return true;

+      }

+    });

+    $(".btn:nth-child(odd)").as(Widgets.Widgets).button()

+        .addClickHandler(new ClickHandler() {

+          public void onClick(ClickEvent clickEvent) {

+            Window.alert("You Clicked the Button");

+          }

+        }).end();

+

+  }

+}
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
index 7a8f20c0..93fe3687 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
@@ -1,57 +1,26 @@
 package gwtquery.samples.client;

 

 import com.google.gwt.core.client.EntryPoint;

-import com.google.gwt.query.client.Effects;

-import com.google.gwt.query.client.Function;

+import com.google.gwt.core.client.GWT;

 import com.google.gwt.query.client.GQuery;

-import com.google.gwt.query.client.plugins.Ratings;

 import static com.google.gwt.query.client.GQuery.$;

-import static com.google.gwt.query.client.GQuery.$$;

-import static com.google.gwt.query.client.GQuery.lazy;

-import com.google.gwt.user.client.Event;

+import com.google.gwt.query.client.Selector;

+import com.google.gwt.query.client.Selectors;

+import static com.google.gwt.query.client.css.CSS.TOP;

+import static com.google.gwt.query.client.css.CSS.VERTICAL_ALIGN;

 

 

 public class GwtQuerySampleModule implements EntryPoint {

-//    public interface Sample extends Selectors {

-//      @Selector(".note")

-//      GQuery allNotes();

 

-  //    }

+  public interface Sample extends Selectors {

 

-  public void onModuleLoad() {

-    GQuery q = $(".note");

-

-    $("div > div").

-        css("color", "blue").

-        hover(

-            lazy().

-              css("color", "red").

-            done(),

-            lazy().

-              css("color", "blue").

-            done());

-    $("div.outer > div").css("position", "relative").dblclick(new Function() {

-      public boolean f(Event e) {

-        $("div.outer > div").as(Effects.Effects).

-            animate($$("left: '+=100'"), 400, Effects.Easing.LINEAR, null).

-            animate($$("top: '+=100'"), 400, Effects.Easing.LINEAR, null).

-            animate($$("left: '-=100'"), 400, Effects.Easing.LINEAR, null).

-            animate($$("top: '-=100'"), 400, Effects.Easing.LINEAR, null);

+    @Selector(".note")

+    GQuery allNotes();

 

-        return true;

-      }

-    });

-    $(".note").click(lazy().fadeOut().done());

-    $(".note").append(" Hello");

-    $(".outer").eq(0).after("<button id='enhance'>Enhance</button>");

-    $("#enhance").one(Event.ONCLICK, null, new Function() {

-      @Override

-      public boolean f(Event e) {

-        $(e).attr("disabled", "true");

-        $("input").as(Ratings.Ratings).rating();

-        return true;

-      }

-    });

+  }

 

+  public void onModuleLoad() {

+    Sample s = GWT.create(Sample.class);

+    s.allNotes().text("Hello Google I/O");

   }

 }

diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java
new file mode 100644
index 00000000..9264deda
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java
@@ -0,0 +1,33 @@
+package gwtquery.samples.client;

+

+import com.google.gwt.core.client.EntryPoint;

+import com.google.gwt.event.dom.client.ClickEvent;

+import com.google.gwt.event.dom.client.ClickHandler;

+import com.google.gwt.query.client.Function;

+import static com.google.gwt.query.client.GQuery.$;

+import com.google.gwt.query.client.plugins.Widgets;

+import com.google.gwt.user.client.Event;

+import com.google.gwt.user.client.Window;

+

+

+public class GwtQueryWidgetModule implements EntryPoint {

+

+  public void onModuleLoad() {

+

+    $(".outer").eq(0).after("<button id='enhance'>Enhance</button>");

+    $("#enhance").one(Event.ONCLICK, null, new Function() {

+      @Override

+      public boolean f(Event e) {

+        $(".btn:nth-child(odd)").as(Widgets.Widgets).button().label("Foo")

+            .addClickHandler(new ClickHandler() {

+              public void onClick(ClickEvent clickEvent) {

+                Window.alert("You Clicked the Button");

+              }

+            }).end();

+

+        return true;

+      }

+    });

+

+  }

+}
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html
index 44e930e3..623053b1 100644
--- a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html
@@ -43,6 +43,7 @@
             background-color: black;

             color: white

         }

+

         

        </style>

 </head>

@@ -54,11 +55,12 @@
 <iframe id="dojobench" src="dojobench.html" style="display: none"></iframe>

 <iframe id="prototypebench" src="prototypebench.html" style="display: none"></iframe>

 

-<code style="display: block; height: 200px; width:790px; overflow-y:scroll; overflow-x: hidden">

-<table id="resultstable" border="1" style="width: 780px; border-collapse: collapse">

+<!-- hack, we don't use DIV because we don't want to effect the result of the selectors -->

+<blockquote style="display: block; height: 200px; width:790px; overflow-y:scroll; overflow-x: hidden; margin: 0">

+<table id="resultstable" border="1" style="width: 100%;  border-collapse: collapse">

 

 </table>

-</code>

+</blockquote>

 <div style="display: none">

 <div style="display: none" class="head">

     <p><a href="http://www.w3.org/"><img height=48 alt=W3C

diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html
index fdcf6d79..ee4f6f04 100644
--- a/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html
@@ -4,31 +4,35 @@
   <script language="javascript" src="gwtquery.samples.GwtQueryDemo.nocache.js"></script>

   <style type="text/css">

       .slide { border: 1px solid black; width: 800px; height: 600px; display: none}

-      .slide { font-size: 200%; }

+      .slide {

+           background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#808080),  color-stop(0.9, #808080));

+           -webkit-background-origin: padding-box; -webkit-background-clip: content-box;

+      }

+      .slide, .slide * { color: white; font-size: 150%;  }

   </style>

 </head>

 <body>

 <p>

-  Short example of how to do animated powerpoint-like slides with GQuery Effects

-  module.

+  Short example of how to do progressively enhance DIV, UL, LI elements into powerpoint-like slides 

 </p>

-<div class="slide transition-fade">

+<div class="slide transition-appear">

   Slide 1

-  <ul class="transition-slidein">

+  <ul class="transition-appear">

     <li>jQuery is</li>

     <li>such a</li>

     <li>Cool Library</li>

   </ul>

 </div>

-<div class="slide transition-fade">

+<div class="slide transition-appear">

   Slide 2

-  <ul class="transition-dropin">

+  <ul class="transition-appear">

     <li>Now GWT</li>

     <li>has a</li>

     <li>jQuery-like API Too!</li>

     <li>GwtQuery Rocks!</li>

   </ul>

 </div>

+

 </body>

 </html>

     
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html
new file mode 100644
index 00000000..2c53396a
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html
@@ -0,0 +1,23 @@
+<html>

+<head>

+  <title>GQuery Demo</title>

+  <script language="javascript" src="gwtquery.samples.GwtQueryEffects.nocache.js"></script>

+    <link href='gquery-star-ratings.css' type="text/css" rel="stylesheet"/>

+    

+</head>

+<body>

+<div class="outer">

+<div>Foo <span class="note">bar</span> baz</div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+</div>

+ 

+   

+</body>

+</html>

+    
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryPlugin.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryPlugin.html
new file mode 100644
index 00000000..a9585147
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryPlugin.html
@@ -0,0 +1,174 @@
+<html>

+<head>

+  <title>GQuery Demo</title>

+  <script language="javascript" src="gwtquery.samples.GwtQueryPlugin.nocache.js"></script>

+    <link href='gquery-star-ratings.css' type="text/css" rel="stylesheet"/>

+    

+</head>

+<body>

+

+<div class="outer">

+<div id="tab-Overview">

+  <h2>What is this?</h2>

+  <p>

+   The <strong>Star Rating Plugin</strong> is a plugin

+   for the jQuery Javascript library that creates a non-obstrusive

+   star rating control based on a set of radio input boxes.

+  </p>

+    

+  <h2>What does it do?</h2>

+  <ul>

+   <li>

+    It turns a collection of radio boxes into a neat star-rating control.

+   </li>

+   <li>

+    It creates the interface based on standard form elements, which means the

+    basic functionality will still be available even if Javascript is disabled.

+   </li>

+   <li>

+    <strong style="color: rgb(0, 153, 0);">NEW</strong> (12-Mar-08):

+    In read only mode (using the 'readOnly' option or <code>disabled</code> property), the plugin is a neat way of

+    displaying star-like values without any additional code

+   </li>

+  </ul>

+    

+  <h2>How do I use it?</h2>

+  <p>

+   Just add the <code><strong>star</strong></code> class to your radio boxes

+  </p>

+  <table cellspacing="5" width="100%">

+   <tr>

+    <td valign="top">

+     <pre class="code"><code class="html">&lt;input name="star1" type="radio" class="star"/&gt;

+  &lt;input name="star1" type="radio" class="star"/&gt;

+  &lt;input name="star1" type="radio" class="star"/&gt;

+  &lt;input name="star1" type="radio" class="star"/&gt;

+  &lt;input name="star1" type="radio" class="star"/&gt;</code></pre>

+    </td>

+    <td valign="top" width="10">&raquo;</td>

+    <td valign="top" width="180">

+     <input name="star1" type="radio" class="star"/>

+     <input name="star1" type="radio" class="star"/>

+     <input name="star1" type="radio" class="star"/>

+     <input name="star1" type="radio" class="star"/>

+     <input name="star1" type="radio" class="star"/>

+    </td>

+   </tr>

+  </table>

+    

+  <p>

+   Use the <code><strong>checked</strong></code> property to specify the initial/default value of the control

+  </p>

+  <table cellspacing="5" width="100%">

+   <tr>

+    <td valign="top">

+     <pre class="code"><code class="html">&lt;input name="star2" type="radio" class="star"/&gt;

+  &lt;input name="star2" type="radio" class="star"/&gt;

+  &lt;input name="star2" type="radio" class="star" checked="checked"/&gt;

+  &lt;input name="star2" type="radio" class="star"/&gt;

+  &lt;input name="star2" type="radio" class="star"/&gt;</code></pre>

+    </td>

+    <td valign="top" width="10">&raquo;</td>

+    <td valign="top" width="180">

+     <input name="star2" type="radio" class="star"/>

+     <input name="star2" type="radio" class="star"/>

+     <input name="star2" type="radio" class="star" checked="checked"/>

+     <input name="star2" type="radio" class="star"/>

+     <input name="star2" type="radio" class="star"/>

+    </td>

+   </tr>

+  </table>

+    

+  <p>

+   Use the <code><strong>disabled</strong></code> property to use a control for display purposes only

+  </p>

+  <table cellspacing="5" width="100%">

+   <tr>

+    <td valign="top">

+     <pre class="code"><code class="html">&lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;

+  &lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;

+  &lt;input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/&gt;

+  &lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;

+  &lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;</code></pre>

+    </td>

+    <td valign="top" width="10">&raquo;</td>

+    <td valign="top" width="180">

+     <input name="star3" type="radio" class="star" disabled="disabled"/>

+     <input name="star3" type="radio" class="star" disabled="disabled"/>

+     <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>

+     <input name="star3" type="radio" class="star" disabled="disabled"/>

+     <input name="star3" type="radio" class="star" disabled="disabled"/>

+    </td>

+   </tr>

+  </table>

+    

+  <h2>What about split stars and 'half ratings'???</h2>

+  <p>

+   Use metadata plugin to pass advanced settings to the plugin via the class property.

+  </p>

+  <table cellspacing="5" width="100%">

+   <tr>

+    <td valign="top">

+     <pre class="code"><code class="html">&lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}" checked="checked"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

+  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;</code></pre>

+    </td>

+    <td valign="top" width="10">&raquo;</td>

+    <td valign="top" width="180">

+     <input name="adv1" type="radio" class="star {split:4}"/>

+     <input name="adv1" type="radio" class="star {split:4}"/>

+     <input name="adv1" type="radio" class="star {split:4}"/>

+     <input name="adv1" type="radio" class="star {split:4}"/>

+     <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>

+     <input name="adv1" type="radio" class="star {split:4}"/>

+     <input name="adv1" type="radio" class="star {split:4}"/>

+     <input name="adv1" type="radio" class="star {split:4}"/>

+    </td>

+   </tr>

+  </table>

+    

+  <p>

+   Use custom selector

+  </p>

+  <table cellspacing="5" width="100%">

+   <tr>

+    <td valign="top">

+     <script>$(function(){ // wait for document to load

+   $('input.wow').rating();

+  });</script>

+     <pre class="code"><code class="js">$(function(){ // wait for document to load

+   $('input.wow').rating();

+  });</code></pre>

+     <pre class="code"><code class="html">&lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}" checked="checked"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

+  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;</code></pre>

+    </td>

+    <td valign="top" width="10">&raquo;</td>

+    <td valign="top" width="180">

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+     <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+     <input name="adv2" type="radio" class="wow {split:4}"/>

+    </td>

+   </tr>

+  </table>

+ </div><!--// tab-Overview //-->

+</div>

+   

+</body>

+</html>

+    
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
index c0f50b1d..efd912fe 100644
--- a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
@@ -8,175 +8,15 @@
 <body>

 <div class="outer">

 <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    <div>Foo <span class="note">bar</span> baz</div>

-    

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

+    <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>

 </div>

-<div id="tab-Overview">

-  <h2>What is this?</h2>

-  <p>

-   The <strong>Star Rating Plugin</strong> is a plugin

-   for the jQuery Javascript library that creates a non-obstrusive

-   star rating control based on a set of radio input boxes.

-  </p>

-    

-  <h2>What does it do?</h2>

-  <ul>

-   <li>

-    It turns a collection of radio boxes into a neat star-rating control.

-   </li>

-   <li>

-    It creates the interface based on standard form elements, which means the

-    basic functionality will still be available even if Javascript is disabled.

-   </li>

-   <li>

-    <strong style="color: rgb(0, 153, 0);">NEW</strong> (12-Mar-08):

-    In read only mode (using the 'readOnly' option or <code>disabled</code> property), the plugin is a neat way of

-    displaying star-like values without any additional code

-   </li>

-  </ul>

-    

-  <h2>How do I use it?</h2>

-  <p>

-   Just add the <code><strong>star</strong></code> class to your radio boxes

-  </p>

-  <table cellspacing="5" width="100%">

-   <tr>

-    <td valign="top">

-     <pre class="code"><code class="html">&lt;input name="star1" type="radio" class="star"/&gt;

-  &lt;input name="star1" type="radio" class="star"/&gt;

-  &lt;input name="star1" type="radio" class="star"/&gt;

-  &lt;input name="star1" type="radio" class="star"/&gt;

-  &lt;input name="star1" type="radio" class="star"/&gt;</code></pre>

-    </td>

-    <td valign="top" width="10">&raquo;</td>

-    <td valign="top" width="180">

-     <input name="star1" type="radio" class="star"/>

-     <input name="star1" type="radio" class="star"/>

-     <input name="star1" type="radio" class="star"/>

-     <input name="star1" type="radio" class="star"/>

-     <input name="star1" type="radio" class="star"/>

-    </td>

-   </tr>

-  </table>

-    

-  <p>

-   Use the <code><strong>checked</strong></code> property to specify the initial/default value of the control

-  </p>

-  <table cellspacing="5" width="100%">

-   <tr>

-    <td valign="top">

-     <pre class="code"><code class="html">&lt;input name="star2" type="radio" class="star"/&gt;

-  &lt;input name="star2" type="radio" class="star"/&gt;

-  &lt;input name="star2" type="radio" class="star" checked="checked"/&gt;

-  &lt;input name="star2" type="radio" class="star"/&gt;

-  &lt;input name="star2" type="radio" class="star"/&gt;</code></pre>

-    </td>

-    <td valign="top" width="10">&raquo;</td>

-    <td valign="top" width="180">

-     <input name="star2" type="radio" class="star"/>

-     <input name="star2" type="radio" class="star"/>

-     <input name="star2" type="radio" class="star" checked="checked"/>

-     <input name="star2" type="radio" class="star"/>

-     <input name="star2" type="radio" class="star"/>

-    </td>

-   </tr>

-  </table>

-    

-  <p>

-   Use the <code><strong>disabled</strong></code> property to use a control for display purposes only

-  </p>

-  <table cellspacing="5" width="100%">

-   <tr>

-    <td valign="top">

-     <pre class="code"><code class="html">&lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;

-  &lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;

-  &lt;input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/&gt;

-  &lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;

-  &lt;input name="star3" type="radio" class="star" disabled="disabled"/&gt;</code></pre>

-    </td>

-    <td valign="top" width="10">&raquo;</td>

-    <td valign="top" width="180">

-     <input name="star3" type="radio" class="star" disabled="disabled"/>

-     <input name="star3" type="radio" class="star" disabled="disabled"/>

-     <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>

-     <input name="star3" type="radio" class="star" disabled="disabled"/>

-     <input name="star3" type="radio" class="star" disabled="disabled"/>

-    </td>

-   </tr>

-  </table>

-    

-  <h2>What about split stars and 'half ratings'???</h2>

-  <p>

-   Use metadata plugin to pass advanced settings to the plugin via the class property.

-  </p>

-  <table cellspacing="5" width="100%">

-   <tr>

-    <td valign="top">

-     <pre class="code"><code class="html">&lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}" checked="checked"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;

-  &lt;input name="adv1" type="radio" class="star {split:4}"/&gt;</code></pre>

-    </td>

-    <td valign="top" width="10">&raquo;</td>

-    <td valign="top" width="180">

-     <input name="adv1" type="radio" class="star {split:4}"/>

-     <input name="adv1" type="radio" class="star {split:4}"/>

-     <input name="adv1" type="radio" class="star {split:4}"/>

-     <input name="adv1" type="radio" class="star {split:4}"/>

-     <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>

-     <input name="adv1" type="radio" class="star {split:4}"/>

-     <input name="adv1" type="radio" class="star {split:4}"/>

-     <input name="adv1" type="radio" class="star {split:4}"/>

-    </td>

-   </tr>

-  </table>

-    

-  <p>

-   Use custom selector

-  </p>

-  <table cellspacing="5" width="100%">

-   <tr>

-    <td valign="top">

-     <script>$(function(){ // wait for document to load

-   $('input.wow').rating();

-  });</script>

-     <pre class="code"><code class="js">$(function(){ // wait for document to load

-   $('input.wow').rating();

-  });</code></pre>

-     <pre class="code"><code class="html">&lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}" checked="checked"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;

-  &lt;input name="adv2" type="radio" class="wow {split:4}"/&gt;</code></pre>

-    </td>

-    <td valign="top" width="10">&raquo;</td>

-    <td valign="top" width="180">

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-     <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-     <input name="adv2" type="radio" class="wow {split:4}"/>

-    </td>

-   </tr>

-  </table>

- </div><!--// tab-Overview //-->

- 

+

    

 </body>

 </html>

diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html
new file mode 100644
index 00000000..32c1ba6f
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html
@@ -0,0 +1,21 @@
+<html>

+<head>

+  <title>GQuery Demo</title>

+  <script language="javascript" src="gwtquery.samples.GwtQueryWidgets.nocache.js"></script>

+    <link href='gquery-star-ratings.css' type="text/css" rel="stylesheet"/>

+    

+</head>

+<body>

+<div class="outer">

+<div class="btn">Make me a button 1!</div>

+<div class="btn">Make me a button 2!</div>

+<div class="btn">Make me a button 3!</div>

+<div class="btn">Make me a button 4!</div>

+<div class="btn">Make me a button 5!</div>

+<div class="btn">Make me a button 6!</div>

+</div>         

+

+   

+</body>

+</html>

+    
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/dojo-logo-text.gif b/samples/src/main/java/gwtquery/samples/public/dojo-logo-text.gif
new file mode 100644
index 00000000..cacdd231
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/dojo-logo-text.gif
diff --git a/samples/src/main/java/gwtquery/samples/public/gwt-logo-cs.gif b/samples/src/main/java/gwtquery/samples/public/gwt-logo-cs.gif
new file mode 100644
index 00000000..d119c804
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/gwt-logo-cs.gif
diff --git a/samples/src/main/java/gwtquery/samples/public/horse.gif b/samples/src/main/java/gwtquery/samples/public/horse.gif
new file mode 100644
index 00000000..d27bf1a2
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/horse.gif
diff --git a/samples/src/main/java/gwtquery/samples/public/logo_jquery.gif b/samples/src/main/java/gwtquery/samples/public/logo_jquery.gif
new file mode 100644
index 00000000..0dae334b
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/logo_jquery.gif
diff --git a/samples/src/main/java/gwtquery/samples/public/prototype_logo.gif b/samples/src/main/java/gwtquery/samples/public/prototype_logo.gif
new file mode 100644
index 00000000..0d4f8b50
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/prototype_logo.gif
diff --git a/samples/src/main/java/gwtquery/samples/public/racetrack.html b/samples/src/main/java/gwtquery/samples/public/racetrack.html
index de448d6d..62ce171d 100644
--- a/samples/src/main/java/gwtquery/samples/public/racetrack.html
+++ b/samples/src/main/java/gwtquery/samples/public/racetrack.html
@@ -24,7 +24,7 @@
         }
     </script>
     <style type="text/css">
-        img {
+        img.himg {
             width: 124px;
             height: 73px;
         }
@@ -47,18 +47,18 @@
 <div id="racefield"
      style="width:790px; background-image: url(grass-texture-small.jpg); background-repeat: repeat;">
     <div id="gwthorse" class="horse">
-        <img src="horse.png"><span>GWT</span><br>
+        <nobr><img class="himg" src="horse.gif"><img src="gwt-logo-cs.gif"></nobr>
     </div>
     <div id="jqueryhorse" class="horse">
-        <img src="horse.png"><span>jQuery</span><br>
+        <nobr><img class="himg" src="horse.gif"><img src="logo_jquery.gif"></nobr>
     </div>
     <div id="dojohorse" class="horse">
 
-        <img src="horse.png"><span>dojo</span><br>
+        <img class="himg" src="horse.gif"><img src="dojo-logo-text.gif"></nobr>
     </div>
     <div id="prototypehorse" class="horse">
 
-        <img src="horse.png"><span>Prototype</span>
+        <img class="himg" src="horse.gif"><img src="prototype_logo.gif"></nobr>
     </div>
 
 </div>