From: Ray Cromwell <cromwellian@gmail.com>
Date: Wed, 6 May 2009 23:33:34 +0000 (+0000)
Subject: CSS enum work.
X-Git-Tag: release-1.3.2~784
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e2fcafc45ee4cf09010f7754befd6a5012d5fc54;p=gwtquery.git

CSS enum work.
---

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml b/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml
index 0b503ae6..0e4bf13a 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml
@@ -82,4 +82,6 @@
         </all>
     </replace-with>
 
+    <entry-point class='com.google.gwt.query.client.css.CSS'/>
+    
 </module>
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/$.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/$.java
index a3c56323..0be4552e 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/$.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/$.java
@@ -18,17 +18,12 @@ package com.google.gwt.query.client;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.Node;
 import com.google.gwt.dom.client.NodeList;
-import com.google.gwt.user.client.Event;
 
 /**
  * A facade class of forwarding functions which allow end users to refer to the
  * GQuery class as '$' if they desire.
  */
 public class $ {
-
-  public static LazyGQuery lazy() {
-    return GQuery.$().lazy();
-  }
   
   public static GQuery $(String selectorOrHtml) {
     return GQuery.$(selectorOrHtml);
@@ -90,6 +85,15 @@ public class $ {
     return GQuery.$$(properties);
   }
 
+  /**
+   * Return a lazy version of the GQuery interface. Lazy function calls are
+   * simply queued up and not executed immediately.
+   * @return
+   */
+  public static LazyGQuery lazy() {
+    return GQuery.lazy();
+  }
+
   /**
    * Registers a GQuery plugin.
    */
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/Effects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/Effects.java
index e7bd1718..77d3c06e 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/Effects.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/Effects.java
@@ -376,6 +376,11 @@ public class Effects extends GQuery {
 
   public Effects animate(final Properties properties, final Speed speed,
       final Easing easing, final Function complete) {
+    return animate(properties, speed.getDuration(), easing, complete);
+  }
+
+  public Effects animate(final Properties properties, final int speed,
+      final Easing easing, final Function complete) {
     if (!"false".equals(properties.get("queue"))) {
       queue(new Function() {
         final SpeedOpts optall = new SpeedOpts(speed, easing, complete);
@@ -465,6 +470,15 @@ public class Effects extends GQuery {
     return fadeIn(speed, null);
   }
 
+  /**
+   * Fade in all matched elements by adjusting their opacity. Only the opacity
+   * is adjusted for this animation, meaning that all of the matched elements
+   * should already have some form of height and width associated with them.
+   */
+  public Effects fadeIn(int speed) {
+    return fadeIn(speed, null);
+  }
+
   /**
    * Fade in all matched elements by adjusting their opacity and firing an
    * optional callback after completion. Only the opacity is adjusted for this
@@ -475,6 +489,16 @@ public class Effects extends GQuery {
     return animate($$("opacity: \"hide\""), speed, Easing.LINEAR, callback);
   }
 
+  /**
+   * Fade in all matched elements by adjusting their opacity and firing an
+   * optional callback after completion. Only the opacity is adjusted for this
+   * animation, meaning that all of the matched elements should already have
+   * some form of height and width associated with them.
+   */
+  public Effects fadeIn(int speed, Function callback) {
+    return animate($$("opacity: \"hide\""), speed, Easing.LINEAR, callback);
+  }
+
   /**
    * Fade out all matched elements by adjusting their opacity to 0, then setting
    * display to "none". Only the opacity is adjusted for this animation, meaning
@@ -495,6 +519,16 @@ public class Effects extends GQuery {
     return fadeOut(speed, null);
   }
 
+  /**
+   * Fade out all matched elements by adjusting their opacity to 0, then
+   * setting display to "none". Only the opacity is adjusted for this
+   * animation, meaning that all of the matched elements should already have
+   * some form of height and width associated with them.
+   */
+  public Effects fadeOut(int speed) {
+    return fadeOut(speed, null);
+  }
+
   /**
    * Fade out all matched elements by adjusting their opacity to 0, then setting
    * display to "none" and firing an optional callback after completion. Only
@@ -506,6 +540,17 @@ public class Effects extends GQuery {
     return animate($$("opacity: \"hide\""), speed, Easing.LINEAR, callback);
   }
 
+  /**
+   * Fade out all matched elements by adjusting their opacity to 0, then setting
+   * display to "none" and firing an optional callback after completion. Only
+   * the opacity is adjusted for this animation, meaning that all of the matched
+   * elements should already have some form of height and width associated with
+   * them.
+   */
+  public Effects fadeOut(int speed, Function callback) {
+    return animate($$("opacity: \"hide\""), speed, Easing.LINEAR, callback);
+  }
+
   /**
    * Fade the opacity of all matched elements to a specified opacity. Only the
    * opacity is adjusted for this animation, meaning that all of the matched
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
index 37e2c196..45bf4d76 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
@@ -33,6 +33,13 @@ import com.google.gwt.dom.client.TextAreaElement;
 import static com.google.gwt.query.client.Effects.Effects;
 import static com.google.gwt.query.client.Events.Events;
 import com.google.gwt.query.client.impl.DocumentStyleImpl;
+import com.google.gwt.query.client.css.BackgroundColor;
+import com.google.gwt.query.client.css.RGBColor;
+import com.google.gwt.query.client.css.CssProperty;
+import com.google.gwt.query.client.css.TakesLength;
+import com.google.gwt.query.client.css.Length;
+import com.google.gwt.query.client.css.TakesPercentage;
+import com.google.gwt.query.client.css.Percentage;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.Window;
@@ -192,6 +199,8 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
 
   public static boolean fxOff = false;
 
+  public static Class<GQuery> GQUERY = GQuery.class;
+
   private static Map<Class<? extends GQuery>, Plugin<? extends GQuery>> plugins;
 
   private static Element windowData = null;
@@ -325,6 +334,14 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return styleImpl.getCurrentStyle(elem, name);
   }
 
+  /**
+   * Return a lazy version of the GQuery interface. Lazy function calls are
+   * simply queued up and not executed immediately.
+   */
+  public static LazyGQuery lazy() {
+    return GQuery.$().createLazy();
+  }
+
   public static void registerPlugin(Class<? extends GQuery> plugin,
       Plugin<? extends GQuery> pluginFactory) {
     if (plugins == null) {
@@ -555,7 +572,10 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    * Convert to Plugin interface provided by Class literal.
    */
   public <T extends GQuery> T as(Class<T> plugin) {
-    if (plugins != null) {
+    // GQuery is not a plugin for itself
+    if (plugin == GQUERY) {
+      return (T) $(this);
+    } else if (plugins != null) {
       return (T) plugins.get(plugin).init(this);
     }
     throw new RuntimeException("No plugin registered for class " + plugin);
@@ -762,22 +782,39 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return new GQuery(unique(result));
   }
 
+  public LazyGQuery createLazy() {
+    return GWT.create(GQuery.class);
+  }
+
   /**
-   * Set a single style property to a value, on all matched elements using
-   * type-safe overhead-free enumerations.
-   *
-   * @param property a CSS property type
-   * @param value a legal value from the type T
-   * @param <T> inferred from the CSS property type
-   * @return
+   * Set CSS property on every matched element using type-safe enumerations.
+   */
+  public <S, T extends CssProperty<S>> GQuery css(T cssProperty, S value) {
+    for (Element e : elements()) {
+      cssProperty.set(e.getStyle(), value);
+    }
+    return this;
+  }
+
+  /**
+   * Set CSS property on every matched element using type-safe enumerations.
    */
-//  public <T> GQuery css(CssProperty<T> property, T value) {
-//    for(Element e : elements()) {
-//      property.set(e.getStyle(), value);
-//    }
-//    return this;
+  public GQuery css(TakesLength cssProperty, Length value) {
+    for (Element e : elements()) {
+      cssProperty.setLength(e.getStyle(), value);
+    }
+    return this;
+  }
 
-  //  }
+  /**
+   * Set CSS property on every matched element using type-safe enumerations.
+   */
+  public GQuery css(TakesPercentage cssProperty, Percentage value) {
+    for (Element e : elements()) {
+      cssProperty.setPercentage(e.getStyle(), value);
+    }
+    return this;
+  }
 
   /**
    * Return a style property on the first matched element.
@@ -1289,10 +1326,6 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return bind(Event.ONKEYUP, null, f);
   }
 
-  public LazyGQuery lazy() {
-    return GWT.create(GQuery.class);
-  }
-
   /**
    * Returns the number of elements currently matched. The size function will
    * return the same value.
@@ -1870,6 +1903,30 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
         null);
   }
 
+  /**
+   * Set CSS property on the first element.
+   */
+  public <S, T extends CssProperty<S>> GQuery setCss(T cssProperty, S value) {
+    cssProperty.set(elements.getItem(0).getStyle(), value);
+    return this;
+  }
+
+  /**
+   * Set CSS property on first matched element using type-safe enumerations.
+   */
+  public GQuery setCss(TakesLength cssProperty, Length value) {
+    cssProperty.setLength(elements.getItem(0).getStyle(), value);
+    return this;
+  }
+
+  /**
+   * Set CSS property on first matched element using type-safe enumerations.
+   */
+  public GQuery setCss(TakesPercentage cssProperty, Percentage value) {
+    cssProperty.setPercentage(elements.getItem(0).getStyle(), value);
+    return this;
+  }
+
   public void setPreviousObject(GQuery previousObject) {
     this.previousObject = previousObject;
   }
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/Lazy.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/Lazy.java
index 5f2347bb..a10e9283 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/Lazy.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/Lazy.java
@@ -7,12 +7,12 @@ package com.google.gwt.query.client;
  * Methods in the generated class do not execute but instead queue up a
  * deferred execution of the method.
  */
-public interface Lazy<S, T extends LazyBase<S>> {
+public interface Lazy<S, T extends LazyBase> {
 
   /**
    * Create a lazy instance of the current class. Most implementing classes
    * will automate this by simply invoking GWT.create().
    * @return
    */
-   T lazy();
+   T createLazy();
 }
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyBase.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyBase.java
index 2f34bbdd..6327fd62 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyBase.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyBase.java
@@ -6,4 +6,4 @@ package com.google.gwt.query.client;
  */
 public interface LazyBase<S> {
    Function done();
-}
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyEffects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyEffects.java
new file mode 100644
index 00000000..8b2093a3
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyEffects.java
@@ -0,0 +1,61 @@
+package com.google.gwt.query.client;
+
+/**
+ *
+ */
+public interface LazyEffects extends LazyGQuery {
+
+  LazyEffects animate(Properties properties, Effects.Speed speed,
+      Effects.Easing easing, Function complete);
+
+  LazyEffects animate(Properties properties, int speed,
+          Effects.Easing easing, Function complete);
+
+  LazyEffects fadeIn();
+
+  LazyEffects fadeIn(Effects.Speed speed);
+
+  LazyEffects fadeIn(int speed);
+
+  LazyEffects fadeIn(Effects.Speed speed, Function callback);
+
+  LazyEffects fadeIn(int speed, Function callback);
+
+  LazyEffects fadeOut();
+
+  LazyEffects fadeOut(Effects.Speed speed);
+
+  LazyEffects fadeOut(int speed);
+
+  LazyEffects fadeOut(Effects.Speed speed, Function callback);
+
+  LazyEffects fadeOut(int speed, Function callback);
+
+  LazyEffects fadeTo(Effects.Speed speed, double opacity);
+
+  LazyEffects fadeTo(Effects.Speed speed, double opacity, Function callback);
+
+  LazyEffects hide();
+
+  LazyEffects show();
+
+  LazyEffects slideDown();
+
+  LazyEffects slideDown(Effects.Speed speed);
+
+  LazyEffects slideDown(Effects.Speed speed, Function callback);
+
+  LazyEffects slideToggle();
+
+  LazyEffects slideToggle(Effects.Speed speed);
+
+  LazyEffects slideToggle(Effects.Speed speed, Function callback);
+
+  LazyEffects slideUp();
+
+  LazyEffects slideUp(Effects.Speed speed);
+
+  LazyEffects slideUp(Effects.Speed speed, Function callback);
+
+  LazyEffects toggle();
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
index c30773fc..ffa059cc 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
@@ -8,7 +8,7 @@ import com.google.gwt.dom.client.Element;
  * Created by IntelliJ IDEA. User: ray Date: May 2, 2009 Time: 10:48:07 PM To
  * change this template use File | Settings | File Templates.
  */
-public interface LazyGQuery extends LazyBase<GQuery>  {
+public interface LazyGQuery<T> extends LazyBase<T>  {
 
   /**
    * Add elements to the set of matched elements if they are not included yet.
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundAttachment.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundAttachment.java
new file mode 100644
index 00000000..49d16a5f
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundAttachment.java
@@ -0,0 +1,60 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property affects the vertical positioning inside a line box of the boxes
+ * generated by an inline-level element.
+ */
+public class BackgroundAttachment
+    implements CssProperty<BackgroundAttachment.AttachValue> {
+
+  public BackgroundAttachment() {
+    CSS.FIXED = AttachValue.create("fixed");
+    CSS.SCROLL = AttachValue.create("scroll");
+  }
+
+  public static void init() {
+    CSS.BACKGROUND_ATTACHMENT = new BackgroundAttachment();
+  }
+
+  public void set(Style s, AttachValue value) {
+    s.setProperty("backgroundAttachment", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("backgroundAttachment");
+  }
+
+  final static public class AttachValue extends JavaScriptObject {
+
+    protected AttachValue() {
+    }
+
+    protected static AttachValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private static native AttachValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    private static native AttachValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundColor.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundColor.java
new file mode 100644
index 00000000..8f7a62dc
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundColor.java
@@ -0,0 +1,28 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property sets the background color of an element, either a <color> value
+ * or the keyword 'transparent', to make the underlying colors shine through.
+ */
+public class BackgroundColor
+    implements CssProperty<RGBColor> {
+
+  public BackgroundColor() {
+  }
+
+  public static void init() {
+    CSS.BACKGROUND_COLOR = new BackgroundColor();
+  }
+
+  public void set(Style s, RGBColor value) {
+    s.setProperty("backgroundColor", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("backgroundColor");
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java
index 4099fe87..593f638e 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java
@@ -1,39 +1,469 @@
 package com.google.gwt.query.client.css;
 
+import com.google.gwt.core.client.EntryPoint;
+
 /**
  * Created by IntelliJ IDEA. User: ray Date: May 2, 2009 Time: 12:56:09 AM To
  * change this template use File | Settings | File Templates.
  */
-public class CSS {
-//  public static VerticalAlign VERTICAL_ALIGN;
-//
-//  /**
-//   * Align the top of the aligned subtree with the top of the line box.
-//   */
-//  public static TextAlign.TAlignValue LEFT;
-//
-//  public static TextAlign.TAlignValue RIGHT;
-//
-//  public static TextAlign TEXT_ALIGN;
-//
-//  /**
-//   * Align the top of the aligned subtree with the top of the line box.
-//   */
-//  public static VerticalAlign.VAlignValue TOP;
-//
-//  public static VerticalAlign.VAlignValue BOTTOM;
-//
-//  public static VerticalAlign.VAlignValue BASELINE;
-//
-//  public static VerticalAlign.VAlignValue SUB;
-//
-//  public static VerticalAlign.VAlignValue SUPER;
-//
-//  public static VerticalAlign.VAlignValue TEXT_TOP;
-//
-//  public static VerticalAlign.VAlignValue MIDDLE;
-//
-//  public static VerticalAlign.VAlignValue TEXT_BOTTOM;
-//
-//  public static VerticalAlign.VAlignValue INHERIT;
+public class CSS implements EntryPoint {
+
+  /**
+   * This property affects the vertical positioning inside a line box of the
+   * boxes generated by an inline-level element.
+   */
+  public static VerticalAlign VERTICAL_ALIGN;
+
+  /**
+   * Align the line box with the left side of the containing box.
+   */
+  public static TextAlign.TAlignValue LEFT;
+
+  /**
+   * Align the line box with the right side of the containing box.
+   */
+  public static TextAlign.TAlignValue RIGHT;
+
+  /**
+   * This property describes how inline content of a block is aligned.
+   */
+  public static TextAlign TEXT_ALIGN;
+
+  /**
+   * Align the top of the aligned subtree with the top of the line box.
+   */
+  public static VerticalAlign.VAlignValue TOP;
+
+  /**
+   * Align the bottom of the aligned subtree with the bottom of the line box.
+   */
+  public static VerticalAlign.VAlignValue BOTTOM;
+
+  /**
+   * Align the baseline of the box with the baseline of the parent box. If the
+   * box doesn't have a baseline, align the bottom margin edge with the parent's
+   * baseline.
+   */
+  public static VerticalAlign.VAlignValue BASELINE;
+
+  /**
+   * Lower the baseline of the box to the proper position for subscripts of the
+   * parent's box. (This value has no effect on the font size of the element's
+   * text.)
+   */
+  public static VerticalAlign.VAlignValue SUB;
+
+  /**
+   * Raise the baseline of the box to the proper position for superscripts of
+   * the parent's box. (This value has no effect on the font size of the
+   * element's text.)
+   */
+  public static VerticalAlign.VAlignValue SUPER;
+
+  /**
+   * Align the top of the box with the top of the parent's content area.
+   */
+  public static VerticalAlign.VAlignValue TEXT_TOP;
+
+  /**
+   * Align the vertical midpoint of the box with the baseline of the parent box
+   * plus half the x-height of the parent.
+   */
+  public static VerticalAlign.VAlignValue MIDDLE;
+
+  /**
+   * Align the bottom of the box with the bottom of the parent's content area.
+   */
+  public static VerticalAlign.VAlignValue TEXT_BOTTOM;
+
+  /**
+   * Inherit value from parent elements.
+   */
+  public static Inherit INHERIT;
+
+  /**
+   * Align the line box with the left side of the containing box.
+   */
+  public static TextAlign.TAlignValue CENTER;
+
+  /**
+   * this property specifies that the inline boxes are to be made flush with
+   * both sides of the block. If the computed value of text-align is 'justify'
+   * while the computed value of white-space is 'pre' or 'pre-line', the actual
+   * value of text-align is set to the initial value.
+   */
+  public static TextAlign.TAlignValue JUSTIFY;
+
+  /**
+   * background image is specified, this property specifies whether it is fixed
+   * with regard to the viewport ('fixed') or scrolls along with the containing
+   * block ('scroll').
+   */
+  public static BackgroundAttachment BACKGROUND_ATTACHMENT;
+
+  /**
+   * Background image is fixed.
+   */
+  public static BackgroundAttachment.AttachValue FIXED;
+
+  /**
+   * Background image scrolls when viewport is scrolled.
+   */
+  public static BackgroundAttachment.AttachValue SCROLL;
+
+  public static BackgroundColor BACKGROUND_COLOR;
+
+  public static RGBColor AQUA;
+
+  public static RGBColor BLACK;
+
+  public static RGBColor FUSCHIA;
+
+  public static RGBColor GRAY;
+
+  public static RGBColor GREEN;
+
+  public static RGBColor LIME;
+
+  public static RGBColor MAROON;
+
+  public static RGBColor NAVY;
+
+  public static RGBColor OLIVE;
+
+  public static RGBColor ORANGE;
+
+  public static RGBColor PURPLE;
+
+  public static RGBColor RED;
+
+  public static RGBColor SILVER;
+
+  public static RGBColor TEAL;
+
+  public static RGBColor WHITE;
+
+  public static RGBColor YELLOW;
+
+  public static RGBColor TRANSPARENT;
+
+  /**
+   * This property describes the foreground color of an element's text content.
+   */
+  public static Color COLOR;
+
+  /**
+   * This property specifies whether a box should float to the left, right, or
+   * not at all. It may be set for any element, but only applies to elements
+   * that generate boxes that are not absolutely positioned.
+   */
+  public static Float FLOAT;
+
+  /**
+   * The element generates a block box that is floated to the left. Content
+   * flows on the right side of the box, starting at the top (subject to the
+   * 'clear' property).
+   */
+  public static Float.FloatValue FLOAT_LEFT;
+
+  /**
+   * Similar to 'left', except the box is floated to the right, and content
+   * flows on the left side of the box, starting at the top.
+   */
+  public static Float.FloatValue FLOAT_RIGHT;
+
+  /**
+   * The box is not floated.
+   */
+  public static Float.FloatValue FLOAT_NONE;
+
+  /**
+   * This property specifies the type of cursor to be displayed for the pointing
+   * device.
+   */
+  public static Cursor CURSOR;
+
+  /**
+   * The UA determines the cursor to display based on the current context.
+   */
+  public static Cursor.CursorValue CURSOR_AUTO;
+
+  /**
+   * A simple crosshair (e.g., short line segments resembling a "+" sign).
+   */
+  public static Cursor.CursorValue CURSOR_CROSSHAIR;
+
+  /**
+   * The platform-dependent default cursor. Often rendered as an arrow.
+   */
+  public static Cursor.CursorValue CURSOR_DEFAULT;
+
+  /**
+   * The cursor is a pointer that indicates a link.
+   */
+  public static Cursor.CursorValue CURSOR_POINTER;
+
+  /**
+   * Indicates something is to be moved.
+   */
+  public static Cursor.CursorValue CURSOR_MOVE;
+
+  /**
+   * Indicates text that may be selected. Often rendered as an I-beam.
+   */
+  public static Cursor.CursorValue CURSOR_TEXT;
+
+  /**
+   * Indicates that the program is busy and the user should wait. Often rendered
+   * as a watch or hourglass.
+   */
+  public static Cursor.CursorValue CURSOR_WAIT;
+
+  /**
+   * A progress indicator. The program is performing some processing, but is
+   * different from 'wait' in that the user may still interact with the program.
+   * Often rendered as a spinning beach ball, or an arrow with a watch or
+   * hourglass.
+   */
+  public static Cursor.CursorValue CURSOR_PROGRESS;
+
+  /**
+   * Help is available for the object under the cursor. Often rendered as a
+   * question mark or a balloon.
+   */
+  public static Cursor.CursorValue CURSOR_HELP;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_E_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_NE_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_NW_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_N_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_SE_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_SW_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_S_RESIZE;
+
+  /**
+   * Indicate that some edge is to be moved. For example, the 'se-resize' cursor
+   * is used when the movement starts from the south-east corner of the box.
+   */
+  public static Cursor.CursorValue CURSOR_W_RESIZE;
+
+  /**
+   * This property specifies the mechanism by which elements are rendered.
+   */
+  public static Display DISPLAY;
+
+  /**
+   * This value causes an element to generate a block box.
+   */
+  public static Display.DisplayValue BLOCK;
+
+  /**
+   * This value causes an element to generate one or more inline boxes.
+   */
+  public static Display.DisplayValue INLINE;
+
+  /**
+   * This value causes an element to generate a block box, which itself is
+   * flowed as a single inline box, similar to a replaced element. The inside of
+   * an inline-block is formatted as a block box, and the element itself is
+   * formatted as an inline replaced element.
+   */
+  public static Display.DisplayValue INLINE_BLOCK;
+
+  /**
+   * This value causes an element (e.g., LI in HTML) to generate a principal
+   * block box and a list-item inline box. For information about lists and
+   * examples of list formatting, please consult the section on lists.
+   */
+  public static Display.DisplayValue LIST_ITEM;
+
+  /**
+   * This value causes an element to not appear in the formatting structure
+   * (i.e., in visual media the element generates no boxes and has no effect on
+   * layout). Descendant elements do not generate any boxes either; the element
+   * and its content are removed from the formatting structure entirely. This
+   * behavior cannot be overridden by setting the 'display' property on the
+   * descendants. Please note that a display of 'none' does not create an
+   * invisible box; it creates no box at all. CSS includes mechanisms that
+   * enable an element to generate boxes in the formatting structure that affect
+   * formatting but are not visible themselves. Please consult the section on
+   * visibility for details.
+   */
+  public static Display.DisplayValue NONE;
+
+  /**
+   * This value creates either block or inline boxes, depending on context.
+   * Properties apply to run-in boxes based on their final status (inline-level
+   * or block-level).
+   */
+  public static Display.DisplayValue RUN_IN;
+
+  /**
+   * Specifies that an element defines a block-level table: it is a rectangular
+   * block that participates in a block formatting context.
+   */
+  public static Display.DisplayValue TABLE;
+
+  /**
+   * Specifies that an element defines an inline-level table: it is a
+   * rectangular block that participates in an inline formatting context).
+   */
+  public static Display.DisplayValue INLINE_TABLE;
+
+  /**
+   * Specifies that an element groups one or more rows.
+   */
+  public static Display.DisplayValue TABLE_ROW_GROUP;
+
+  /**
+   * Specifies that an element groups one or more columns.
+   */
+  public static Display.DisplayValue TABLE_COLUMN_GROUP;
+
+  /**
+   * Specifies that an element describes a column of cells.
+   */
+  public static Display.DisplayValue TABLE_COLUMN;
+
+  /**
+   * Like 'table-row-group', but for visual formatting, the row group is always
+   * displayed before all other rows and row groups and after any top captions.
+   * Print user agents may repeat header rows on each page spanned by a table.
+   * If a table contains multiple elements with 'display: table-header-group',
+   * only the first is rendered as a header; the others are treated as if they
+   * had 'display: table-row-group'.
+   */
+  public static Display.DisplayValue TABLE_HEADER_GROUP;
+
+  /**
+   * Like 'table-row-group', but for visual formatting, the row group is always
+   * displayed after all other rows and row groups and before any bottom
+   * captions. Print user agents may repeat footer rows on each page spanned by
+   * a table. If a table contains multiple elements with 'display:
+   * table-footer-group', only the first is rendered as a footer; the others are
+   * treated as if they had 'display: table-row-group'.
+   */
+  public static Display.DisplayValue TABLE_FOOTER_GROUP;
+
+  /**
+   * Specifies that an element is a row of cells.
+   */
+  public static Display.DisplayValue TABLE_ROW;
+
+  /**
+   * Specifies that an element represents a table cell.
+   */
+  public static Display.DisplayValue TABLE_CELL;
+
+  /**
+   * Specifies a caption for the table. All elements with 'display:
+   * table-caption' must be rendered, as described in section 17.4.
+   */
+  public static Display.DisplayValue TABLE_CAPTION;
+
+  /**
+   * The 'visibility' property specifies whether the boxes generated by an
+   * element are rendered. Invisible boxes still affect layout (set the
+   * 'display' property to 'none' to suppress box generation altogether).
+   */
+  public static Visibility VISIBILITY;
+
+  /**
+   * The generated box is visible.
+   */
+  public static Visibility.VisibilityValue VISIBLE;
+
+  /**
+   * The generated box is invisible (fully transparent, nothing is drawn), but
+   * still affects layout. Furthermore, descendents of the element will be
+   * visible if they have 'visibility: visible'.
+   */
+  public static Visibility.VisibilityValue HIDDEN;
+
+  /**
+   * Please consult the CSS spec on dynamic row and column effects in tables. If
+   * used on elements other than rows, row groups, columns, or column groups,
+   * 'collapse' has the same meaning as 'hidden'.
+   */
+  public static Visibility.VisibilityValue COLLAPSE;
+
+  /**
+   * This property specifies the content width of boxes generated by block-level
+   * and replaced elements.
+   *
+   * This property does not apply to non-replaced inline-level elements. The
+   * content width of a non-replaced inline element's boxes is that of the
+   * rendered content within them (before any relative offset of children).
+   * Recall that inline boxes flow into line boxes. The width of line boxes is
+   * given by the their containing block, but may be shorted by the presence of
+   * floats.
+   *
+   * The width of a replaced element's box is intrinsic and may be scaled by the
+   * user agent if the value of this property is different than 'auto'.
+   */
+  public static Width WIDTH;
+
+  /**
+   * This property specifies the content height of boxes generated by
+   * block-level, inline-block and replaced elements.
+   *
+   * This property does not apply to non-replaced inline-level elements. See the
+   * section on computing heights and margins for non-replaced inline elements
+   * for the rules used instead.
+   */
+  public static Height HEIGHT;
+
+  public static void init() {
+    INHERIT = Inherit.create();
+    BackgroundAttachment.init();
+    BackgroundColor.init();
+    Color.init();
+    Cursor.init();
+    Display.init();
+    Float.init();
+    Height.init();
+    RGBColor.init();
+    TextAlign.init();
+    VerticalAlign.init();
+    Visibility.init();
+    Width.init();
+  }
+
+  public void onModuleLoad() {
+    CSS.init();
+  }
 }
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Color.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Color.java
new file mode 100644
index 00000000..72a99350
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Color.java
@@ -0,0 +1,26 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property describes the foreground color of an element's text content.
+ */
+public class Color implements CssProperty<RGBColor> {
+
+  public Color() {
+  }
+
+  public static void init() {
+    CSS.COLOR = new Color();
+  }
+
+  public void set(Style s, RGBColor value) {
+    s.setProperty("color", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("color");
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty.java
new file mode 100644
index 00000000..37d7b811
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty.java
@@ -0,0 +1,24 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+
+/**
+ * An enumerated CSS property with values of type T.
+ */
+public interface CssProperty<T> {
+
+  /**
+   * Set the style to the given value.
+   * @param s
+   * @param value a value from the enumerated type T
+   */
+  void set(Style s, T value);
+
+  /**
+   * Return the value of the property as an enumerated type, or null, if the
+   * value falls outside the enumerated set.
+   * @param s
+   * @return
+   */
+  String get(Style s);
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty4.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty4.java
new file mode 100644
index 00000000..5ffb1ff1
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty4.java
@@ -0,0 +1,12 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+
+/**
+ * An enumerated CSS property with values of type X,Y,W,Z.
+*/
+public interface CssProperty4<X,Y,Z,W> {
+
+  void set(Style s, X value1, Y value2, Z value3, W value4);
+  String get(Style s);
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Cursor.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Cursor.java
new file mode 100644
index 00000000..93ad3f46
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Cursor.java
@@ -0,0 +1,82 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property specifies whether a box should float to the left, right, or not
+ * at all. It may be set for any element, but only applies to elements that
+ * generate boxes that are not absolutely positioned.
+ */
+public class Cursor implements CssProperty<Cursor.CursorValue> {
+
+  public Cursor() {
+    CSS.CURSOR_AUTO = CursorValue.create("auto");
+    CSS.CURSOR_CROSSHAIR = CursorValue.create("crosshair");
+    CSS.CURSOR_DEFAULT = CursorValue.create("default");
+    CSS.CURSOR_POINTER = CursorValue.create("pointer");
+    CSS.CURSOR_MOVE = CursorValue.create("move");
+    CSS.CURSOR_TEXT = CursorValue.create("text");
+    CSS.CURSOR_WAIT = CursorValue.create("wait");
+    CSS.CURSOR_PROGRESS = CursorValue.create("progress");
+    CSS.CURSOR_HELP = CursorValue.create("help");
+    CSS.CURSOR_E_RESIZE = CursorValue.create("e-resize");
+    CSS.CURSOR_NE_RESIZE = CursorValue.create("ne-resize");
+    CSS.CURSOR_NW_RESIZE = CursorValue.create("nw-resize");
+    CSS.CURSOR_N_RESIZE = CursorValue.create("n-resize");
+    CSS.CURSOR_SE_RESIZE = CursorValue.create("se-resize");
+    CSS.CURSOR_SW_RESIZE = CursorValue.create("sw-resize");
+    CSS.CURSOR_S_RESIZE = CursorValue.create("s-resize");
+    CSS.CURSOR_W_RESIZE = CursorValue.create("w-resize");
+  }
+
+  public static void init() {
+    CSS.CURSOR = new Cursor();
+  }
+
+  public void set(Style s, CursorValue value) {
+    s.setProperty("float", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("float");
+  }
+
+  /**
+   * Returns a cursor located at the given uri.
+   */
+  public static CursorValue cursor(String uri) {
+    return CursorValue.create("uri(" + uri + ")");
+  }
+
+  final static public class CursorValue extends JavaScriptObject {
+
+    protected CursorValue() {
+    }
+
+    protected static CursorValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private static native CursorValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    private static native CursorValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Display.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Display.java
new file mode 100644
index 00000000..732d04c0
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Display.java
@@ -0,0 +1,72 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property specifies the mechanism by which elements are rendered.
+ */
+public class Display implements CssProperty<Display.DisplayValue> {
+
+  final static public class DisplayValue extends JavaScriptObject {
+
+    protected static DisplayValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    private static native DisplayValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private static native DisplayValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    protected DisplayValue() {
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+  }
+
+  public static void init() {
+    CSS.DISPLAY = new Display();
+  }
+
+  public Display() {
+    CSS.BLOCK = DisplayValue.create("block");
+    CSS.INLINE = DisplayValue.create("inline");
+    CSS.INLINE_BLOCK = DisplayValue.create("inline-block");
+    CSS.LIST_ITEM = DisplayValue.create("list-item");
+    CSS.NONE = DisplayValue.create("none");
+    CSS.RUN_IN = DisplayValue.create("run-in");
+    CSS.TABLE = DisplayValue.create("table");
+    CSS.INLINE_TABLE = DisplayValue.create("inline-table");
+    CSS.TABLE_ROW_GROUP = DisplayValue.create("table-row-group");
+    CSS.TABLE_COLUMN = DisplayValue.create("table-column");
+    CSS.TABLE_COLUMN_GROUP = DisplayValue.create("table-column-group");
+    CSS.TABLE_HEADER_GROUP = DisplayValue.create("table-header-group");
+    CSS.TABLE_FOOTER_GROUP = DisplayValue.create("table-footer-group");
+    CSS.TABLE_ROW = DisplayValue.create("table-row");
+    CSS.TABLE_CELL = DisplayValue.create("table-cell");
+    CSS.TABLE_CAPTION = DisplayValue.create("table-caption");
+  }
+
+  public String get(Style s) {
+    return s.getProperty("display");
+  }
+
+  public void set(Style s, DisplayValue value) {
+    s.setProperty("display", value.value());
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Float.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Float.java
new file mode 100644
index 00000000..ad28549e
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Float.java
@@ -0,0 +1,61 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property specifies whether a box should float to the left, right, or not
+ * at all. It may be set for any element, but only applies to elements that
+ * generate boxes that are not absolutely positioned.
+ */
+public class Float implements CssProperty<Float.FloatValue> {
+
+  public Float() {
+    CSS.FLOAT_LEFT = FloatValue.create("left");
+    CSS.FLOAT_RIGHT = FloatValue.create("right");
+    CSS.FLOAT_NONE = FloatValue.create("none");
+  }
+
+  public static void init() {
+    CSS.FLOAT = new Float();
+  }
+
+  public void set(Style s, FloatValue value) {
+    s.setProperty("float", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("float");
+  }
+
+  final static public class FloatValue extends JavaScriptObject {
+
+    protected FloatValue() {
+    }
+
+    protected static FloatValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private static native FloatValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    private static native FloatValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Height.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Height.java
new file mode 100644
index 00000000..4326a5ae
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Height.java
@@ -0,0 +1,39 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property specifies the content height of boxes generated by block-level,
+ * inline-block and replaced elements.
+ *
+ * This property does not apply to non-replaced inline-level elements. See the
+ * section on computing heights and margins for non-replaced inline elements for
+ * the rules used instead.
+ */
+public class Height implements TakesLength, TakesPercentage {
+
+  public Height() {
+  }
+
+  public static void init() {
+    CSS.HEIGHT = new Height();
+  }
+
+  public void set(Style s, Length value) {
+    s.setProperty("height", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("height");
+  }
+
+  public void setLength(Style s, Length p) {
+    s.setProperty("height", p.value());
+  }
+
+  public void setPercentage(Style s, Percentage p) {
+    s.setProperty("height", p.value());
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Inherit.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Inherit.java
new file mode 100644
index 00000000..344536b0
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Inherit.java
@@ -0,0 +1,37 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.JavaScriptObject;
+
+/**
+ * A special value for inherited CSS properties,
+ */
+public class Inherit extends JavaScriptObject {
+
+  protected Inherit() {
+  }
+
+  public static Inherit create() {
+    return GWT.isScript() ? createWeb() : createHosted();
+  }
+
+  private static native Inherit createWeb() /*-{
+    return "inherit";
+  }-*/;
+
+  private static native Inherit createHosted() /*-{
+    return ["inherit"];
+  }-*/;
+
+  final public String value() {
+    return GWT.isScript() ? valueWeb() : valueHosted();
+  }
+
+  private native String valueWeb() /*-{
+    return this;
+  }-*/;
+
+  private native String valueHosted() /*-{
+    return this[0];
+  }-*/;
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Length.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Length.java
new file mode 100644
index 00000000..771dc17b
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Length.java
@@ -0,0 +1,84 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.JavaScriptObject;
+
+/**
+ * Length type constructors.
+ */
+public class Length extends JavaScriptObject {
+
+  protected Length() {
+  }
+
+  /**
+   * Size in pixels.
+   * @param amt
+   * @return
+   */
+  public static Length px(int amt) {
+    return GWT.isScript() ? createWeb(amt + "px") : createHosted(amt + "px");
+  }
+
+  /**
+   * Size as multiple of the 'font-size' of the relevant font.
+   */
+  public static Length em(int amt) {
+    return GWT.isScript() ? createWeb(amt + "em") : createHosted(amt + "em");
+  }
+
+  /**
+   * Size as multiple of the 'x-height' of the relevant font.
+   */
+  public static Length ex(int amt) {
+    return GWT.isScript() ? createWeb(amt + "ex") : createHosted(amt + "ex");
+  }
+
+  /**
+   * Size in picas.
+   */
+  public static Length pc(int amt) {
+    return GWT.isScript() ? createWeb(amt + "pc") : createHosted(amt + "pc");
+  }
+
+  /**
+   * Size in millimeters.
+   */
+  public static Length mm(int amt) {
+    return GWT.isScript() ? createWeb(amt + "mm") : createHosted(amt + "mm");
+  }
+
+  /**
+   * Size in centimeters.
+   */
+  public static Length cm(int amt) {
+    return GWT.isScript() ? createWeb(amt + "cm") : createHosted(amt + "cm");
+  }
+
+  /**
+   * Size in inches.
+   */
+  public static Length in(int amt) {
+    return GWT.isScript() ? createWeb(amt + "in") : createHosted(amt + "in");
+  }
+
+  private static native Length createWeb(String pct) /*-{
+    return pct;
+  }-*/;
+
+  private static native Length createHosted(String pct) /*-{
+    return [pct];
+  }-*/;
+
+  final public String value() {
+    return GWT.isScript() ? valueWeb() : valueHosted();
+  }
+
+  private native String valueWeb() /*-{
+    return this;
+  }-*/;
+
+  private native String valueHosted() /*-{
+    return this[0];
+  }-*/;
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Percentage.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Percentage.java
new file mode 100644
index 00000000..6c9b922d
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Percentage.java
@@ -0,0 +1,42 @@
+package com.google.gwt.query.client.css;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.JavaScriptObject;
+
+/**
+ * Percentage type constructors.
+ */
+public class Percentage extends JavaScriptObject {
+
+  protected Percentage() {
+  }
+
+  /**
+   * Size in percentage units.
+   * @param amt
+   * @return
+   */
+  public static Percentage pct(int amt) {
+    return GWT.isScript() ? createWeb(amt + "%") : createHosted(amt + "%");
+  }
+
+  private static native Percentage createWeb(String pct) /*-{
+    return pct;
+  }-*/;
+
+  private static native Percentage createHosted(String pct) /*-{
+    return [pct];
+  }-*/;
+
+  final public String value() {
+    return GWT.isScript() ? valueWeb() : valueHosted();
+  }
+
+  private native String valueWeb() /*-{
+    return this;
+  }-*/;
+
+  private native String valueHosted() /*-{
+    return this[0];
+  }-*/;
+}
+
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/RGBColor.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/RGBColor.java
new file mode 100644
index 00000000..4c3224ef
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/RGBColor.java
@@ -0,0 +1,71 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.JavaScriptObject;
+
+/**
+ * Color type constructors.
+ */
+public class RGBColor extends JavaScriptObject {
+
+  protected RGBColor() {
+  }
+
+  public static void init() {
+    CSS.AQUA=rgb("aqua");
+    CSS.BLACK=rgb("black");
+    CSS.FUSCHIA=rgb("fuschia");
+    CSS.GRAY=rgb("gray");
+    CSS.GREEN=rgb("green");
+    CSS.LIME=rgb("lime");
+    CSS.MAROON=rgb("lime");
+    CSS.NAVY=rgb("navy");
+    CSS.OLIVE=rgb("olive");
+    CSS.ORANGE=rgb("orange");
+    CSS.PURPLE=rgb("purple");
+    CSS.RED=rgb("red");
+    CSS.SILVER=rgb("silver");
+    CSS.TEAL=rgb("teal");
+    CSS.WHITE=rgb("white");
+    CSS.YELLOW=rgb("yellow");
+    CSS.TRANSPARENT=rgb("transparent");
+  }
+  /**
+   * RGB color in hexidecimal.
+   */
+  public static RGBColor rgb(String hex) {
+    return GWT.isScript() ? createWeb(hex) : createHosted(hex);
+  }
+
+  /**
+   * RGB color as r,g,b triple.
+   */
+  public static RGBColor rgb(int r, int g, int b) {
+    return GWT.isScript() ? createWeb(makeRgb(r, g, b))
+        : createHosted(makeRgb(r, g, b));
+  }
+
+  private static String makeRgb(int r, int g, int b) {
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+
+  private static native RGBColor createWeb(String pct) /*-{
+    return pct;
+  }-*/;
+
+  private static native RGBColor createHosted(String pct) /*-{
+    return [pct];
+  }-*/;
+
+  final public String value() {
+    return GWT.isScript() ? valueWeb() : valueHosted();
+  }
+
+  private native String valueWeb() /*-{
+    return this;
+  }-*/;
+
+  private native String valueHosted() /*-{
+    return this[0];
+  }-*/;
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesLength.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesLength.java
new file mode 100644
index 00000000..ad28fed7
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesLength.java
@@ -0,0 +1,10 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+
+/**
+ * Interface to be implemented by properties which take length units.
+ */
+public interface TakesLength {
+   void setLength(Style s, Length p);
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesPercentage.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesPercentage.java
new file mode 100644
index 00000000..f758c165
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesPercentage.java
@@ -0,0 +1,11 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+
+/**
+ * Interface to be implemented by properties which take percentage units.
+ */
+public interface TakesPercentage {
+
+  void setPercentage(Style s, Percentage p);
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextAlign.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextAlign.java
new file mode 100644
index 00000000..0936050d
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextAlign.java
@@ -0,0 +1,60 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property describes how inline content of a block is aligned.
+ */
+public class TextAlign implements CssProperty<TextAlign.TAlignValue> {
+
+  public TextAlign() {
+    CSS.LEFT = TAlignValue.create("left");
+    CSS.RIGHT = TAlignValue.create("right");
+    CSS.CENTER = TAlignValue.create("center");
+    CSS.JUSTIFY = TAlignValue.create("justify");
+  }
+
+  public static void init() {
+    CSS.TEXT_ALIGN = new TextAlign();
+  }
+
+  public void set(Style s, TAlignValue value) {
+    s.setProperty("textAlign", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("textAlign");
+  }
+
+  final static public class TAlignValue extends JavaScriptObject {
+
+    protected TAlignValue() {
+    }
+
+    protected static TAlignValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private static native TAlignValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    private static native TAlignValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+  }
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/VerticalAlign.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/VerticalAlign.java
new file mode 100644
index 00000000..fbd1c843
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/VerticalAlign.java
@@ -0,0 +1,77 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+import static com.google.gwt.query.client.css.VerticalAlign.VAlignValue.create;
+
+/**
+ * This property affects the vertical positioning inside a line box of the boxes
+ * generated by an inline-level element.
+ */
+public class VerticalAlign
+    implements CssProperty<VerticalAlign.VAlignValue>, TakesPercentage,
+    TakesLength {
+
+  public VerticalAlign() {
+    CSS.TOP = create("top");
+    CSS.BOTTOM = create("bottom");
+    CSS.BASELINE = create("baseline");
+    CSS.SUB = create("sub");
+    CSS.SUPER = create("super");
+    CSS.TEXT_TOP = create("text-top");
+    CSS.MIDDLE = create("middle");
+    CSS.TEXT_BOTTOM = create("text-bottom");
+  }
+
+  public static void init() {
+    CSS.VERTICAL_ALIGN = new VerticalAlign();
+  }
+
+  public void set(Style s, VAlignValue value) {
+    s.setProperty("verticalAlign", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("verticalAlign");
+  }
+
+  public void setPercentage(Style s, Percentage p) {
+    s.setProperty("verticalAlign", p.value());
+  }
+
+  public void setLength(Style s, Length p) {
+    s.setProperty("verticalAlign", p.value());
+  }
+
+  final static public class VAlignValue extends JavaScriptObject {
+
+    protected VAlignValue() {
+    }
+
+    protected static VAlignValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private static native VAlignValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    private static native VAlignValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+  }
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Visibility.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Visibility.java
new file mode 100644
index 00000000..4e684915
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Visibility.java
@@ -0,0 +1,62 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * The 'visibility' property specifies whether the boxes generated by an element
+ * are rendered. Invisible boxes still affect layout (set the 'display' property
+ * to 'none' to suppress box generation altogether). Values have the following
+ * meanings:
+ */
+public class Visibility implements CssProperty<Visibility.VisibilityValue> {
+
+  public Visibility() {
+    CSS.VISIBLE = VisibilityValue.create("visible");
+    CSS.HIDDEN = VisibilityValue.create("hidden");
+    CSS.COLLAPSE = VisibilityValue.create("collapse");
+  }
+
+  public static void init() {
+    CSS.VISIBILITY = new Visibility();
+  }
+
+  public void set(Style s, VisibilityValue value) {
+    s.setProperty("visibility", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("visibilityat");
+  }
+
+  final static public class VisibilityValue extends JavaScriptObject {
+
+    protected VisibilityValue() {
+    }
+
+    protected static VisibilityValue create(String val) {
+      return GWT.isScript() ? createWeb(val) : createHosted(val);
+    }
+
+    public String value() {
+      return GWT.isScript() ? valueWeb() : valueHosted();
+    }
+
+    private static native VisibilityValue createWeb(String val) /*-{
+      return val;
+    }-*/;
+
+    private static native VisibilityValue createHosted(String val) /*-{
+      return [val];
+    }-*/;
+
+    private native String valueWeb() /*-{
+       return this;
+    }-*/;
+
+    private native String valueHosted() /*-{
+       return this[0];
+    }-*/;
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Width.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Width.java
new file mode 100644
index 00000000..5a585050
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/Width.java
@@ -0,0 +1,44 @@
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.GWT;
+
+/**
+ * This property specifies the content width of boxes generated by block-level
+ * and replaced elements.
+ *
+ * This property does not apply to non-replaced inline-level elements. The
+ * content width of a non-replaced inline element's boxes is that of the
+ * rendered content within them (before any relative offset of children). Recall
+ * that inline boxes flow into line boxes. The width of line boxes is given by
+ * the their containing block, but may be shorted by the presence of floats.
+ *
+ * The width of a replaced element's box is intrinsic and may be scaled by the
+ * user agent if the value of this property is different than 'auto'.
+ */
+public class Width implements TakesLength, TakesPercentage {
+
+  public Width() {
+  }
+
+  public static void init() {
+    CSS.WIDTH = new Width();
+  }
+
+  public void set(Style s, Length value) {
+    s.setProperty("width", value.value());
+  }
+
+  public String get(Style s) {
+    return s.getProperty("width");
+  }
+
+  public void setLength(Style s, Length p) {
+    s.setProperty("width", p.value());
+  }
+
+  public void setPercentage(Style s, Percentage p) {
+    s.setProperty("width", p.value());
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/rebind/LazyGenerator.java b/gwtquery-core/src/main/java/com/google/gwt/query/rebind/LazyGenerator.java
index 5ce1d828..4523222a 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/rebind/LazyGenerator.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/rebind/LazyGenerator.java
@@ -81,7 +81,7 @@ public class LazyGenerator extends Generator {
             genClass, treeLogger);
       }
       sw.outdent();
-      generateDoneMethod(sw, nonLazyType.getQualifiedSourceName(), treeLogger);
+      generateDoneMethod(sw, nonLazyType, treeLogger);
       sw.commit(treeLogger);
     }
 
@@ -147,7 +147,12 @@ public class LazyGenerator extends Generator {
       sw.print("arg" + i + (i < argNum - 1 ? "," : ""));
     }
 
-    sw.println(");");
+    sw.print(")");
+    // special case, as() needs to invoke createLazy()
+    if("as".equals(method.getName())) {
+      sw.print(".createLazy()");
+    }
+    sw.println(";");
     sw.outdent();
     sw.println("}");
     sw.outdent();
@@ -185,7 +190,7 @@ public class LazyGenerator extends Generator {
   }
 
   // used by benchmark harness
-  private void generateDoneMethod(SourceWriter sw, String nonLazyType,
+  private void generateDoneMethod(SourceWriter sw, JClassType nonLazyType,
       TreeLogger treeLogger) {
     sw.indent();
     sw.println("public Function done() {");
@@ -194,7 +199,12 @@ public class LazyGenerator extends Generator {
 
     sw.println("public void f(Element e) {");
     sw.indent();
-    sw.println("ctx = GQuery.$(e).as(" + nonLazyType + ".class);");
+    String classID = nonLazyType.getSimpleSourceName();
+    if("GQuery".equals(classID)) {
+      classID="GQUERY";
+    }
+    
+    sw.println("ctx = GQuery.$(e).as(" + nonLazyType.getQualifiedSourceName() + "."+classID+");");
     sw.println("for (int i = 0; i < closures.length(); i++) {");
     sw.indent();
     sw.println("closures.get(i).invoke();");
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
index f86fa89b..74a137b7 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
@@ -2,12 +2,16 @@ package gwtquery.samples.client;
 
 import com.google.gwt.core.client.EntryPoint;
 import com.google.gwt.query.client.$;
-import com.google.gwt.query.client.GQuery;
-import com.google.gwt.query.client.Widgets;
 import com.google.gwt.query.client.Function;
-import static com.google.gwt.query.client.Widgets.*;
-import static com.google.gwt.query.client.$.$;
-import com.google.gwt.user.client.Event;
+import com.google.gwt.query.client.Effects;
+import com.google.gwt.query.client.GQuery;
+import com.google.gwt.query.client.css.CSS;
+import static com.google.gwt.query.client.GQuery.$;
+import static com.google.gwt.query.client.GQuery.lazy;
+import static com.google.gwt.query.client.css.CSS.*;
+import static com.google.gwt.query.client.css.Length.*;
+import static com.google.gwt.query.client.css.Percentage.*;
+import static com.google.gwt.query.client.css.RGBColor.*;
 
 /**
  * Copyright 2007 Timepedia.org Licensed under the Apache License, Version 2.0
@@ -29,20 +33,28 @@ public class GwtQuerySampleModule implements EntryPoint {
   //    }
 
   public void onModuleLoad() {
-    $("div").hover(
-        $.lazy().                   
-          css("color", "red").
-        done(),                                
-        $.lazy().
-          css("color", "blue").
-        done());
-    
-    $(".note").dblclick(
-        $.lazy().
-            fadeOut().
-        done());
-    $("div").wrapAll("<table border=2><tr><td></td></tr></table>").fadeOut(10000);
-  }
+    GQuery q = $(".note");
+    q.setCss(CSS.BACKGROUND_COLOR, CSS.RED);
+    q.setCss(TEXT_ALIGN, LEFT);
+    q.setCss(VERTICAL_ALIGN, px(10));
 
+    $("div > div").hover(lazy().
+        css("color", "red").
+        done(), lazy().
+        css("color", "blue").
+        done());
 
+//    $(".note").dblclick(
+//        lazy().as(Effects.Effects).
+//            fadeOut().
+//        done());
+//     $("div.outer").dblclick(new Function() {
+//       @Override
+//       public boolean f(Event e, Object data) {
+//         $(e.getCurrentTarget()).as(Effects.Effects).slideUp();
+//         return true;
+//       }
+//     });
+//    $("div").wrapAll("<table border=2><tr><td></td></tr></table>");
+  }
 }
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
index a2ab635c..b15701a7 100644
--- a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
@@ -4,7 +4,17 @@
   <script language="javascript" src="gwtquery.samples.GwtQuerySample.nocache.js"></script>
 </head>
 <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>
 </body>
 </html>
     
\ No newline at end of file