diff --git a/NOTICE b/NOTICE
new file mode 100644
index 0000000..20d7a3f
--- /dev/null
+++ b/NOTICE
@@ -0,0 +1,5 @@
+Apache MyFaces Html5
+Copyright 2011 The Apache Software Foundation
+
+This product includes software developed at
+The Apache Software Foundation (http://www.apache.org/).
\ No newline at end of file
diff --git a/myfaces-html5-demo/NOTICE b/myfaces-html5-demo/NOTICE
new file mode 100644
index 0000000..40f2c1f
--- /dev/null
+++ b/myfaces-html5-demo/NOTICE
@@ -0,0 +1,18 @@
+Apache MyFaces Html5 Demo
+Copyright 2011 The Apache Software Foundation
+
+This product includes software developed at
+The Apache Software Foundation (http://www.apache.org/).
+
+This product includes software developed at http://code.google.com/p/google-code-prettify/.
+
+Notices for files :
+    mother_goose_flv.flv
+    mother_goose_h264.mp4
+    mother_goose_h264_copy.mp4
+    mother_goose_ogg_2.ogv
+    mother_goose_thumbnail_small.png
+
+    "Mother Goose: Little Miss Muffet"(1903) is public property.
+
+This product includes software developed by LongTail Video.
\ No newline at end of file
diff --git a/myfaces-html5-demo/pom.xml b/myfaces-html5-demo/pom.xml
new file mode 100644
index 0000000..4fb132d
--- /dev/null
+++ b/myfaces-html5-demo/pom.xml
@@ -0,0 +1,157 @@
+<!--
+  ~  * Licensed to the Apache Software Foundation (ASF) under one
+  ~  * or more contributor license agreements.  See the NOTICE file
+  ~  * distributed with this work for additional information
+  ~  * regarding copyright ownership.  The ASF licenses this file
+  ~  * to you under the Apache License, Version 2.0 (the
+  ~  * "License"); you may not use this file except in compliance
+  ~  * with the License.  You may obtain a copy of the License at
+  ~  *
+  ~  *   http://www.apache.org/licenses/LICENSE-2.0
+  ~  *
+  ~  * Unless required by applicable law or agreed to in writing,
+  ~  * software distributed under the License is distributed on an
+  ~  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~  * KIND, either express or implied.  See the License for the
+  ~  * specific language governing permissions and limitations
+  ~  * under the License.
+  -->
+
+<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/xsd/maven-4.0.0.xsd">
+
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.apache.myfaces.html5</groupId>
+        <artifactId>myfaces-html5-project</artifactId>
+        <version>0.0.4-SNAPSHOT</version>
+    </parent>
+
+    <groupId>org.apache.myfaces.html5</groupId>
+    <artifactId>myfaces-html5-demo</artifactId>
+    <name>MyFaces Html5 Demo</name>
+    <description>Demo of Apache MyFaces Html5</description>
+    <packaging>war</packaging>
+
+    <repositories>
+        <repository>
+            <id>java.net</id>
+            <url>http://download.java.net/maven/2</url>
+            <snapshots>
+                <enabled>false</enabled>
+            </snapshots>
+        </repository>
+
+        <repository>
+            <id>Maven2 Repo1</id>
+            <name>Maven2 Repo1</name>
+            <url>http://repo1.maven.org/maven2</url>
+            <layout>legacy</layout>
+            <snapshots>
+                <enabled>false</enabled>
+            </snapshots>
+        </repository>
+
+        <repository>
+            <id>java.net.2</id>
+            <name>java.net Maven 2 Repository</name>
+            <url>http://download.java.net/maven/2</url>
+            <snapshots>
+                <enabled>false</enabled>
+            </snapshots>
+        </repository>
+
+        <repository>
+            <id>codehaus</id>
+            <name>codehaus</name>
+            <url>http://repository.codehaus.org</url>
+            <snapshots>
+                <enabled>false</enabled>
+            </snapshots>
+        </repository>
+
+        <repository>
+            <id>jboss</id>
+            <name>jboss</name>
+            <url>http://repository.jboss.com/maven2</url>
+            <snapshots>
+                <enabled>false</enabled>
+            </snapshots>
+        </repository>
+
+        <!-- necessary! -->
+        <repository>
+            <id>myfaces-snapshots</id>
+            <name>myfaces-snapshots</name>
+            <url>http://people.apache.org/repo/m2-snapshot-repository</url>
+            <snapshots>
+                <enabled>true</enabled>
+            </snapshots>
+        </repository>
+
+    </repositories>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.apache.myfaces.html5</groupId>
+            <artifactId>myfaces-html5-core</artifactId>
+            <version>${parent.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>javax.servlet</groupId>
+            <artifactId>servlet-api</artifactId>
+            <version>2.5</version>
+            <scope>compile</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>javax.servlet.jsp</groupId>
+            <artifactId>jsp-api</artifactId>
+            <version>2.1</version>
+            <scope>provided</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>javax.servlet</groupId>
+            <artifactId>jstl</artifactId>
+            <version>1.2</version>
+            <scope>provided</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>commons-logging</groupId>
+            <artifactId>commons-logging</artifactId>
+            <version>1.1.1</version>
+            <scope>runtime</scope>
+        </dependency>
+        <dependency>
+            <groupId>log4j</groupId>
+            <artifactId>log4j</artifactId>
+            <version>1.2.13</version>
+            <scope>provided</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>javax.el</groupId>
+            <artifactId>el-api</artifactId>
+            <version>1.0</version>
+            <scope>provided</scope>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.mortbay.jetty</groupId>
+                <artifactId>maven-jetty-plugin</artifactId>
+                <version>6.1.22</version>
+                <configuration>
+                    <scanIntervalSeconds>10</scanIntervalSeconds>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/ClientSideValidationBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/ClientSideValidationBean.java
new file mode 100644
index 0000000..f7e3890
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/ClientSideValidationBean.java
@@ -0,0 +1,147 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import java.io.Serializable;
+
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ViewScoped;
+
+@ManagedBean(name = "clientSideValidationBean")
+@ViewScoped
+public class ClientSideValidationBean implements Serializable
+{
+    private static final long serialVersionUID = 1L;
+
+    private String param01;
+    private String param02;
+    private String param03;
+    private String param04;
+    private String param05;
+    private String param06;
+
+    private String color01;
+
+    private String email01;
+
+    private Number number01;
+    private Number number02;
+
+    public String getColor01()
+    {
+        return color01;
+    }
+
+    public void setColor01(String color01)
+    {
+        this.color01 = color01;
+    }
+
+    public String getParam01()
+    {
+        return param01;
+    }
+
+    public void setParam01(String param01)
+    {
+        this.param01 = param01;
+    }
+
+    public String getParam02()
+    {
+        return param02;
+    }
+
+    public void setParam02(String param02)
+    {
+        this.param02 = param02;
+    }
+
+    public String getParam03()
+    {
+        return param03;
+    }
+
+    public void setParam03(String param03)
+    {
+        this.param03 = param03;
+    }
+
+    public String getParam04()
+    {
+        return param04;
+    }
+
+    public void setParam04(String param04)
+    {
+        this.param04 = param04;
+    }
+
+    public String getParam05()
+    {
+        return param05;
+    }
+
+    public void setParam05(String param05)
+    {
+        this.param05 = param05;
+    }
+
+    public String getParam06()
+    {
+        return param06;
+    }
+
+    public void setParam06(String param06)
+    {
+        this.param06 = param06;
+    }
+
+    public String getEmail01()
+    {
+        return email01;
+    }
+
+    public void setEmail01(String email01)
+    {
+        this.email01 = email01;
+    }
+
+    public Number getNumber01()
+    {
+        return number01;
+    }
+
+    public void setNumber01(Number number01)
+    {
+        this.number01 = number01;
+    }
+
+    public Number getNumber02()
+    {
+        return number02;
+    }
+
+    public void setNumber02(Number number02)
+    {
+        this.number02 = number02;
+    }
+
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/DateTimeBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/DateTimeBean.java
new file mode 100644
index 0000000..375f7f0
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/DateTimeBean.java
@@ -0,0 +1,101 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import java.io.Serializable;
+import java.util.Date;
+
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ViewScoped;
+
+@ManagedBean(name = "dateTimeBean")
+@ViewScoped
+public class DateTimeBean implements Serializable
+{
+    private static final long serialVersionUID = 1L;
+
+    private Date date01;
+    private Date date02;
+    private Date date03;
+    private Date date04;
+    private Date date05;
+    private Date date06;
+
+    public Date getDate01()
+    {
+        return date01;
+    }
+
+    public void setDate01(Date date01)
+    {
+        this.date01 = date01;
+    }
+
+    public Date getDate02()
+    {
+        return date02;
+    }
+
+    public void setDate02(Date date02)
+    {
+        this.date02 = date02;
+    }
+
+    public Date getDate03()
+    {
+        return date03;
+    }
+
+    public void setDate03(Date date03)
+    {
+        this.date03 = date03;
+    }
+
+    public Date getDate04()
+    {
+        return date04;
+    }
+
+    public void setDate04(Date date04)
+    {
+        this.date04 = date04;
+    }
+
+    public Date getDate05()
+    {
+        return date05;
+    }
+
+    public void setDate05(Date date05)
+    {
+        this.date05 = date05;
+    }
+
+    public Date getDate06()
+    {
+        return date06;
+    }
+
+    public void setDate06(Date date06)
+    {
+        this.date06 = date06;
+    }
+
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/DndBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/DndBean.java
new file mode 100644
index 0000000..0982c53
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/DndBean.java
@@ -0,0 +1,222 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.Date;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ViewScoped;
+import javax.faces.event.AbortProcessingException;
+
+import org.apache.myfaces.html5.demo.model.SportsTeam;
+import org.apache.myfaces.html5.demo.model.SportsTeamType;
+import org.apache.myfaces.html5.event.DropEvent;
+
+@ManagedBean(name = "dndBean")
+@ViewScoped
+public class DndBean implements Serializable
+{
+    private static final long serialVersionUID = 1L;
+
+    private String simpleDndOutput = "Nothing dropped yet";
+    private String dragAnythingOutput = "Nothing dropped yet";
+    private String teamDropOutput = "Nothing dropped yet";
+
+    public void processSimpleDnd(DropEvent event) throws AbortProcessingException
+    {
+        simpleDndOutput = "";
+        simpleDndOutput += "Drop Time : " + new Date().toLocaleString() + "<br/>\n";
+        simpleDndOutput += "Drop event parameter : " + event.getParam() + "<br/>\n";
+    }
+
+    public void processDragAnything(DropEvent event) throws AbortProcessingException
+    {
+        dragAnythingOutput = "";
+        dragAnythingOutput += "Drop Time : " + new Date().toLocaleString() + "<br/>\n";
+        dragAnythingOutput += "Drop event parameter : " + event.getParam() + "<br/>\n";
+        Map<String, String> dropDataMap = event.getDropDataMap();
+        if (dropDataMap != null)
+        {
+            Set<String> keySet = dropDataMap.keySet();
+            for (String key : keySet)
+            {
+                dragAnythingOutput += key + "  :  " + dropDataMap.get(key) + "<br/>\n";
+            }
+        }
+    }
+
+    public String getSimpleDndOutput()
+    {
+        return simpleDndOutput;
+    }
+
+    public String getDragAnythingOutput()
+    {
+        return dragAnythingOutput;
+    }
+
+    private List<SportsTeam> teams;
+    private List<SportsTeam> footballTeams;
+    private List<SportsTeam> basketballTeams;
+
+    public DndBean()
+    {
+        initTeams();
+    }
+
+    public String initTeams()
+    {
+        teams = new ArrayList<SportsTeam>();
+        footballTeams = new ArrayList<SportsTeam>();
+        basketballTeams = new ArrayList<SportsTeam>();
+        teams.add(new SportsTeam("fcb", "FC Barcelona", SportsTeamType.FOOTBALL));
+        teams.add(new SportsTeam("rma", "Real Madrid", SportsTeamType.FOOTBALL));
+        teams.add(new SportsTeam("lal", "LA Lakers", SportsTeamType.BASKETBALL));
+        teams.add(new SportsTeam("boc", "Boston Celtics", SportsTeamType.BASKETBALL));
+
+        this.simpleDndOutput = "Nothing dropped yet";
+        this.dragAnythingOutput = "Nothing dropped yet";
+        this.teamDropOutput = "Nothing dropped yet";
+        
+        return null;
+    }
+
+    public List<SportsTeam> getTeams()
+    {
+        return teams;
+    }
+
+    // TODO: reuse the code!
+    public void processFootballTeamDrop(DropEvent event) throws AbortProcessingException
+    {
+        String param = event.getParam();
+        if (param == null || param.isEmpty())
+            return;
+
+        SportsTeam droppedTeam = null;
+        for (SportsTeam team : this.teams)
+        {
+            if (team.getId().equals(param))
+            {
+                droppedTeam = team;
+                break;
+            }
+        }
+
+        if (droppedTeam == null)
+        {
+            teamDropOutput = "No team or already dropped team is dropped.";
+            return;
+        }
+
+        teams.remove(droppedTeam);
+        footballTeams.add(droppedTeam);
+
+        teamDropOutput = droppedTeam.getName() + " is moved.";
+    }
+
+    public void processBasketballTeamDrop(DropEvent event) throws AbortProcessingException
+    {
+        String param = event.getParam();
+        if (param == null || param.isEmpty())
+            return;
+
+        SportsTeam droppedTeam = null;
+        for (SportsTeam team : this.teams)
+        {
+            if (team.getId().equals(param))
+            {
+                droppedTeam = team;
+                break;
+            }
+        }
+
+        if (droppedTeam == null)
+        {
+            teamDropOutput = "No team or already dropped team is dropped.";
+            return;
+        }
+
+        teams.remove(droppedTeam);
+        basketballTeams.add(droppedTeam);
+
+        teamDropOutput = droppedTeam.getName() + " is moved.";
+    }
+
+    public void processTeamDrop(DropEvent event) throws AbortProcessingException
+    {
+        String param = event.getParam();
+        if (param == null || param.isEmpty())
+            return;
+
+        SportsTeam droppedTeam = null;
+        for (SportsTeam team : this.footballTeams)
+        {
+            if (team.getId().equals(param))
+            {
+                droppedTeam = team;
+                this.footballTeams.remove(team);
+                break;
+            }
+        }
+        if (droppedTeam == null)
+        {
+            for (SportsTeam team : this.basketballTeams)
+            {
+                if (team.getId().equals(param))
+                {
+                    droppedTeam = team;
+                    this.basketballTeams.remove(team);
+                    break;
+                }
+            }
+        }
+        
+        if (droppedTeam == null)
+        {
+            teamDropOutput = "No team or already dropped team is dropped.";
+            return;
+        }
+
+        teams.add(droppedTeam);
+
+        teamDropOutput = droppedTeam.getName() + " is moved.";
+    }
+
+    public String getTeamDropOutput()
+    {
+        return teamDropOutput;
+    }
+
+    public List<SportsTeam> getFootballTeams()
+    {
+        return footballTeams;
+    }
+
+    public List<SportsTeam> getBasketballTeams()
+    {
+        return basketballTeams;
+    }
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/InputTypesBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/InputTypesBean.java
new file mode 100644
index 0000000..a74cde2
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/InputTypesBean.java
@@ -0,0 +1,152 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import java.io.Serializable;
+
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ViewScoped;
+
+@ManagedBean(name = "inputTypesBean")
+@ViewScoped
+public class InputTypesBean implements Serializable
+{
+    private static final long serialVersionUID = 1L;
+
+    private String param01;
+    private String param02;
+    private String param03;
+    private String param04;
+    private String param05;
+    private String param06;
+
+    private String color01;
+
+    private String email01;
+
+    private Number number01;
+    private Number number02 = 30;
+
+    public String getColor01()
+    {
+        return color01;
+    }
+
+    public void setColor01(String color01)
+    {
+        this.color01 = color01;
+    }
+
+    public String getParam01()
+    {
+        return param01;
+    }
+
+    public void setParam01(String param01)
+    {
+        this.param01 = param01;
+    }
+
+    public String getParam02()
+    {
+        return param02;
+    }
+
+    public void setParam02(String param02)
+    {
+        this.param02 = param02;
+    }
+
+    public String getParam03()
+    {
+        return param03;
+    }
+
+    public void setParam03(String param03)
+    {
+        this.param03 = param03;
+    }
+
+    public String getParam04()
+    {
+        return param04;
+    }
+
+    public void setParam04(String param04)
+    {
+        this.param04 = param04;
+    }
+
+    public String getParam05()
+    {
+        return param05;
+    }
+
+    public void setParam05(String param05)
+    {
+        this.param05 = param05;
+    }
+
+    public String getParam06()
+    {
+        return param06;
+    }
+
+    public void setParam06(String param06)
+    {
+        this.param06 = param06;
+    }
+
+    public String getEmail()
+    {
+        return email01;
+    }
+
+    public String getEmail01()
+    {
+        return email01;
+    }
+
+    public void setEmail01(String email01)
+    {
+        this.email01 = email01;
+    }
+
+    public Number getNumber01()
+    {
+        return number01;
+    }
+
+    public void setNumber01(Number number01)
+    {
+        this.number01 = number01;
+    }
+
+    public Number getNumber02()
+    {
+        return number02;
+    }
+
+    public void setNumber02(Number number02)
+    {
+        this.number02 = number02;
+    }
+
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/SuggestionsBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/SuggestionsBean.java
new file mode 100644
index 0000000..a542a48
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/SuggestionsBean.java
@@ -0,0 +1,163 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ViewScoped;
+import javax.faces.model.SelectItem;
+
+@ManagedBean(name = "suggestionsBean")
+@ViewScoped
+public class SuggestionsBean implements Serializable
+{
+
+    private static final long serialVersionUID = 1L;
+
+    private String movie01;
+    private String movie02;
+
+    private String favoriteMovie;
+
+    public List<SelectItem> getStaticSuggestionItems()
+    {
+        List<SelectItem> items = new ArrayList<SelectItem>();
+
+        // get top 20
+        for (int i = 0; i < 20; i++)
+        {
+            String str = movieNames[i];
+            items.add(new SelectItem(str, null));
+        }
+
+        return items;
+    }
+
+    public List<String> getStaticSuggestionStrings()
+    {
+        return Arrays.asList(movieNames).subList(0, 20);
+    }
+
+    public List<SelectItem> getDynamicSuggestionItems()
+    {
+        List<SelectItem> items = new ArrayList<SelectItem>();
+
+        if (this.favoriteMovie != null)
+        {
+            for (String movie : movieNames)
+            {
+                if (movie.startsWith(this.favoriteMovie))
+                    items.add(new SelectItem(movie, null));
+            }
+        }
+
+        return items;
+    }
+
+    public String getMovie01()
+    {
+        return movie01;
+    }
+
+    public void setMovie01(String movie01)
+    {
+        this.movie01 = movie01;
+    }
+
+    public String getMovie02()
+    {
+        return movie02;
+    }
+
+    public void setMovie02(String movie02)
+    {
+        this.movie02 = movie02;
+    }
+
+    public String getFavoriteMovie()
+    {
+        return favoriteMovie;
+    }
+
+    public void setFavoriteMovie(String favoriteMovie)
+    {
+        this.favoriteMovie = favoriteMovie;
+    }
+
+    private static String[] movieNames = new String[]
+    {
+            "Java 4 Ever", "The Shawshank Redemption", "The Godfather", "The Godfather: Part II",
+            "The Good, the Bad and the Ugly", "Pulp Fiction", "Toy Story 3", "Schindler's List", "12 Angry Men",
+            "One Flew Over the Cuckoo's Nest", "Star Wars: Episode V - The Empire Strikes Back", "The Dark Knight",
+            "The Lord of the Rings: The Return of the King", "Star Wars: Episode IV - A New Hope", "Seven Samurai",
+            "Casablanca", "Goodfellas", "Fight Club", "City of God",
+            "The Lord of the Rings: The Fellowship of the Ring", "Raiders of the Lost Ark", "Rear Window", "Psycho",
+            "The Usual Suspects", "Once Upon a Time in the West", "The Silence of the Lambs", "The Matrix", "Se7en",
+            "Memento", "It's a Wonderful Life", "The Lord of the Rings: The Two Towers", "Sunset Blvd.",
+            "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", "North by Northwest",
+            "Citizen Kane", "The Professional", "Apocalypse Now", "Forrest Gump", "American Beauty",
+            "American History X", "Taxi Driver", "Terminator 2: Judgment Day", "Vertigo", "Lawrence of Arabia",
+            "Alien", "Amélie", "Saving Private Ryan", "WALL·E", "The Shining", "A Clockwork Orange", "Paths of Glory",
+            "The Departed", "The Pianist", "To Kill a Mockingbird", "Aliens", "The Lives of Others", "Spirited Away",
+            "M", "Double Indemnity", "Eternal Sunshine of the Spotless Mind", "Chinatown", "Requiem for a Dream",
+            "L.A. Confidential", "Reservoir Dogs", "The Third Man", "Das Boot", "The Treasure of the Sierra Madre",
+            "Monty Python and the Holy Grail", "City Lights", "Pan's Labyrinth", "The Bridge on the River Kwai",
+            "Raging Bull", "The Prestige", "Back to the Future", "Inglourious Basterds", "2001: A Space Odyssey",
+            "Life Is Beautiful", "Modern Times", "Singin' in the Rain", "Some Like It Hot", "Amadeus", "Up",
+            "Downfall", "Full Metal Jacket", "Braveheart", "Cinema Paradiso", "The Maltese Falcon",
+            "Once Upon a Time in America", "All About Eve", "Rashômon", "Metropolis", "The Green Mile", "Gran Torino",
+            "The Elephant Man", "The Great Dictator", "Sin City", "Rebecca", "The Apartment", "Gladiator", "The Sting",
+            "The Great Escape", "Indiana Jones and the Last Crusade", "Slumdog Millionaire", "Avatar",
+            "Star Wars: Episode VI - Return of the Jedi", "Unforgiven", "Bicycle Thieves", "Jaws", "Batman Begins",
+            "Die Hard", "Blade Runner", "On the Waterfront", "Oldboy", "Mr. Smith Goes to Washington", "Hotel Rwanda",
+            "No Country for Old Men", "Touch of Evil", "The Seventh Seal", "Fargo", "Princess Mononoke",
+            "For a Few Dollars More", "The Wizard of Oz", "District 9", "Heat", "Strangers on a Train",
+            "Cool Hand Luke", "Donnie Darko", "High Noon", "The Sixth Sense", "Notorious", "The Deer Hunter",
+            "There Will Be Blood", "Snatch.", "Annie Hall", "Kill Bill: Vol. 1", "The Manchurian Candidate",
+            "The General", "The Big Lebowski", "Platoon", "Yojimbo", "Into the Wild", "Ran", "Ben-Hur", "The Wrestler",
+            "The Big Sleep", "Million Dollar Baby", "The Lion King", "It Happened One Night",
+            "Witness for the Prosecution", "Life of Brian", "Butch Cassidy and the Sundance Kid", "Toy Story",
+            "The Bourne Ultimatum", "Wild Strawberries", "Finding Nemo", "Trainspotting", "Gone with the Wind",
+            "Kick-Ass", "Stand by Me", "The Terminator", "Groundhog Day", "The Graduate", "Scarface", "The Thing",
+            "Amores Perros", "Star Trek", "Dog Day Afternoon", "Ratatouille", "Gandhi", "V for Vendetta",
+            "Lock, Stock and Two Smoking Barrels", "The Wages of Fear", "How to Train Your Dragon", "Twelve Monkeys",
+            "The Grapes of Wrath", "The Secret in Their Eyes", "The Gold Rush", "Casino", "8½",
+            "Grave of the Fireflies", "Diabolique", "The Night of the Hunter", "Judgment at Nuremberg",
+            "The Incredibles", "The Princess Bride", "The Killing", "The Wild Bunch", "Kind Hearts and Coronets",
+            "Children of Men", "The Exorcist", "In Bruges", "Sunrise: A Song of Two Humans",
+            "The Best Years of Our Lives", "The Kid", "Nights of Cabiria", "The Hustler", "Dial M for Murder",
+            "Good Will Hunting", "Rosemary's Baby", "Ed Wood", "Harvey", "Big Fish", "King Kong",
+            "A Streetcar Named Desire", "Let the Right One In", "The Diving Bell and the Butterfly", "Sleuth",
+            "Magnolia", "Kill Bill: Vol. 2", "Rocky", "Letters from Iwo Jima", "Shadow of a Doubt", "Mystic River",
+            "Stalag 17", "Network", "Brief Encounter", "The African Queen", "Rope", "Crash (200",
+            "Pirates of the Caribbean: The Curse of the Black Pearl", "Bonnie and Clyde", "The Battle of Algiers",
+            "Duck Soup", "Planet of the Apes", "Manhattan", "La strada", "Patton", "The 400 Blows", "The Conversation",
+            "Crouching Tiger, Hidden Dragon", "Changeling", "The Curious Case of Benjamin Button", "Barry Lyndon",
+            "Little Miss Sunshine", "All Quiet on the Western Front", "The Truman Show",
+            "The Nightmare Before Christmas", "Anatomy of a Murder", "Toy Story 2", "The Adventures of Robin Hood",
+            "Mulholland Dr.", "Who's Afraid of Virginia Woolf?", "Spartacus", "Monsters, Inc.", "Shaun of the Dead",
+            "Ikiru", "My Neighbor Totoro", "The Philadelphia Story", "Glory", "Rain Man", "Arsenic and Old Lace",
+    };
+
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/UserAgentBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/UserAgentBean.java
new file mode 100644
index 0000000..9833844
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/UserAgentBean.java
@@ -0,0 +1,83 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import org.apache.commons.lang.StringUtils;
+
+import javax.annotation.PostConstruct;
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.SessionScoped;
+import javax.faces.bean.ViewScoped;
+import javax.faces.context.FacesContext;
+import javax.servlet.http.HttpServletRequest;
+import java.io.Serializable;
+
+@ManagedBean(name = "userAgentBean")
+@SessionScoped
+public class UserAgentBean implements Serializable{
+
+    private boolean webkit;
+    private boolean mozilla;
+    private boolean opera;
+    private boolean ie;
+
+    @PostConstruct
+    public void initialize(){
+        final String userAgent = getUserAgent();
+        if(StringUtils.isBlank(userAgent))
+            return;
+
+        //poor detection :(
+        webkit = userAgent.contains("WebKit") || userAgent.contains("Webkit");
+        if(webkit)
+            return;
+
+        opera = userAgent.contains("Opera");
+        if(opera)
+            return;
+
+        ie = userAgent.contains("MSIE");
+        if(ie)
+            return;
+
+        mozilla = userAgent.contains("Mozilla");
+    }
+
+    public String getUserAgent(){
+         final HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
+         return request.getHeader("User-Agent");
+    }
+
+    public boolean isWebkit() {
+        return webkit;
+    }
+
+    public boolean isMozilla() {
+        return mozilla;
+    }
+
+    public boolean isOpera() {
+        return opera;
+    }
+
+    public boolean isIe() {
+        return ie;
+    }
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/ViewChangeBean.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/ViewChangeBean.java
new file mode 100644
index 0000000..487d3dc
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/bean/ViewChangeBean.java
@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.bean;
+
+import javax.faces.bean.ManagedBean;
+import javax.faces.bean.RequestScoped;
+import javax.faces.bean.SessionScoped;
+import javax.faces.context.FacesContext;
+import javax.servlet.http.HttpServletRequest;
+import java.io.Serializable;
+
+@ManagedBean(name = "viewChangeBean")
+@RequestScoped
+public class ViewChangeBean implements Serializable{
+    public boolean isSlideView(){
+        HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
+        return request.getRequestURL().toString().contains("slides.jsf");
+    }
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/model/SportsTeam.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/model/SportsTeam.java
new file mode 100644
index 0000000..ba93ae6
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/model/SportsTeam.java
@@ -0,0 +1,90 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.model;
+
+import org.apache.myfaces.html5.demo.model.SportsTeamType;
+
+import java.io.Serializable;
+
+public class SportsTeam implements Serializable
+{
+    private static final long serialVersionUID = 1L;
+
+    private String id;
+    private String name;
+    private SportsTeamType type;
+
+    public SportsTeam(String id, String name, SportsTeamType type)
+    {
+        this.id = id;
+        this.name = name;
+        this.type = type;
+    }
+
+    public String getId()
+    {
+        return id;
+    }
+
+    public void setId(String id)
+    {
+        this.id = id;
+    }
+
+    public String getName()
+    {
+        return name;
+    }
+
+    public void setName(String name)
+    {
+        this.name = name;
+    }
+
+    public SportsTeamType getType()
+    {
+        return type;
+    }
+
+    public void setType(SportsTeamType type)
+    {
+        this.type = type;
+    }
+    
+    @Override
+    public boolean equals(Object obj)
+    {
+        if (obj instanceof SportsTeam)
+        {
+            SportsTeam other = (SportsTeam) obj;
+            if(other.getId().equals(this.id))
+                return true;
+        }
+        
+        return false;
+    }
+    
+    @Override
+    public int hashCode()
+    {
+        return this.id.hashCode();
+    }
+
+}
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/model/SportsTeamType.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/model/SportsTeamType.java
new file mode 100644
index 0000000..fe070cb
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/model/SportsTeamType.java
@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.model;
+
+
+
+public enum SportsTeamType
+{
+
+    FOOTBALL("F"), BASKETBALL("B");
+
+    private final String code;
+
+    private SportsTeamType(String code)
+    {
+        this.code = code;
+    }
+
+    @Override
+    public String toString()
+    {
+        return code;
+    }
+
+    public String getCode()
+    {
+        return code;
+    }
+
+}
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/validator/PromoCodeValidator.java b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/validator/PromoCodeValidator.java
new file mode 100644
index 0000000..82118ab
--- /dev/null
+++ b/myfaces-html5-demo/src/main/java/org/apache/myfaces/html5/demo/validator/PromoCodeValidator.java
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.html5.demo.validator;
+
+import java.util.regex.Pattern;
+
+import javax.faces.application.FacesMessage;
+import javax.faces.component.UIComponent;
+import javax.faces.context.FacesContext;
+import javax.faces.validator.FacesValidator;
+import javax.faces.validator.Validator;
+import javax.faces.validator.ValidatorException;
+
+import org.apache.myfaces.html5.component.api.validation.ClientSidePatternProvider;
+
+@FacesValidator(value="promoCodeValidator")
+public class PromoCodeValidator implements Validator, ClientSidePatternProvider
+{
+
+    private static final String PATTERN = "[0-9]{2}[A-Z]{2}";
+
+    public String getPattern()
+    {
+        return "[0-9]{2}[A-Z]{2}";
+    }
+
+    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException
+    {
+        if(value == null)
+            return;
+        if (value instanceof String)
+        {
+            String partNum = (String) value;
+            
+            if(! Pattern.matches(PATTERN, partNum)){
+                throw new ValidatorException(new FacesMessage("Provided value is not a promo code"));
+            }
+        }
+    }
+}
diff --git a/myfaces-html5-demo/src/main/webapp/WEB-INF/faces-config.xml b/myfaces-html5-demo/src/main/webapp/WEB-INF/faces-config.xml
new file mode 100644
index 0000000..4a16ace
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/WEB-INF/faces-config.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
+	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
+	version="2.0">
+	
+</faces-config>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/WEB-INF/web.xml b/myfaces-html5-demo/src/main/webapp/WEB-INF/web.xml
new file mode 100644
index 0000000..ef165ad
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/WEB-INF/web.xml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
+	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
+	id="WebApp_ID" version="2.5">
+
+	<display-name>myfaces-html5-demo</display-name>
+
+	<welcome-file-list>
+		<welcome-file>index.jsf</welcome-file>
+		<welcome-file>index.jsp</welcome-file>
+	</welcome-file-list>
+
+	<context-param>
+		<param-name>javax.faces.PROJECT_STAGE</param-name>
+		<param-value>Development</param-value>
+	</context-param>
+    
+    <context-param>
+        <param-name>org.apache.myfaces.WRAP_SCRIPT_CONTENT_WITH_XML_COMMENT_TAG</param-name>
+        <param-value>false</param-value>
+    </context-param>
+    
+    <!-- Necessary to run with jetty:run -->
+    <context-param>
+        <param-name>org.apache.myfaces.annotation.SCAN_PACKAGES</param-name>
+        <param-value>org.apache.myfaces.html5.demo</param-value>
+    </context-param>
+
+	<servlet>
+		<servlet-name>Faces Servlet</servlet-name>
+		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
+	</servlet>
+
+	<servlet-mapping>
+		<servlet-name>Faces Servlet</servlet-name>
+		<url-pattern>*.jsf</url-pattern>
+	</servlet-mapping>
+
+</web-app>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/animations.xhtml b/myfaces-html5-demo/src/main/webapp/animations.xhtml
new file mode 100644
index 0000000..3776a02
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/animations.xhtml
@@ -0,0 +1,34 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+   <ui:define name="content">
+       <div class="slide">
+            <ui:include src="/sections/animations.xhtml" />
+       </div>
+   </ui:define>
+       
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/clientSideValidation.xhtml b/myfaces-html5-demo/src/main/webapp/clientSideValidation.xhtml
new file mode 100644
index 0000000..66e7be5
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/clientSideValidation.xhtml
@@ -0,0 +1,40 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+      
+    <ui:define name="content">
+        <div class="slide">
+            <ui:include src="/sections/clientSideValidation01.xhtml" />
+        </div>
+        <div class="slide">
+            <ui:include src="/sections/clientSideValidation02.xhtml" />
+        </div>
+        <div class="slide">
+            <ui:include src="/sections/clientSideValidation03.xhtml" />
+        </div>
+    </ui:define>        
+        
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/datetime.xhtml b/myfaces-html5-demo/src/main/webapp/datetime.xhtml
new file mode 100644
index 0000000..a3b1825
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/datetime.xhtml
@@ -0,0 +1,34 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+        
+    <ui:define name="content">
+        <div class="slide">
+            <ui:include src="/sections/datetime.xhtml" />
+        </div>
+    </ui:define>        
+        
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/dnd.xhtml b/myfaces-html5-demo/src/main/webapp/dnd.xhtml
new file mode 100644
index 0000000..f12c8e0
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/dnd.xhtml
@@ -0,0 +1,41 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+   <ui:define name="content">
+       <div class="slide">
+            <ui:include src="/sections/dnd01.xhtml" />
+       </div>
+       <div class="slide">
+            <ui:include src="/sections/dnd02.xhtml" />
+       </div>
+       <div class="slide">
+            <ui:include src="/sections/dnd03.xhtml" />
+       </div>
+       
+   </ui:define>        
+       
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/effects.xhtml b/myfaces-html5-demo/src/main/webapp/effects.xhtml
new file mode 100644
index 0000000..ded0b7b
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/effects.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+   <ui:define name="content">
+       <div class="slide">
+            <ui:include src="/sections/effects01.xhtml" />
+       </div>
+       <div class="slide">
+            <ui:include src="/sections/effects02.xhtml" />
+       </div>
+   </ui:define>
+       
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/index.xhtml b/myfaces-html5-demo/src/main/webapp/index.xhtml
new file mode 100644
index 0000000..709b258
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/index.xhtml
@@ -0,0 +1,50 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core">
+
+<h:head>
+    <h:outputStylesheet library="style" name="text.css" />
+    <h:outputStylesheet library="style" name="animation.css" />
+    <h:outputStylesheet library="style" name="box.css" />
+    <h:outputStylesheet library="style" name="common.css" />
+
+    <meta charset="utf-8" />
+    <title>Apache Myfaces Html5 Component Library Demo</title>
+</h:head>
+<h:body style="align:center;" class="nodecorate">
+	<div style="text-align:center; float: center; padding-left:15%; padding-right:15%; padding-top:100px; position: relative;">
+	   <h1>Apache Myfaces Html5 Component Library Demo</h1>
+	   <ul style="line-height:30px; list-style: upper-roman; font-size: 30px;" class="fontedHeader">
+	        <li>
+                    <h:link outcome="slides" value="Slide View"/>
+	        </li>
+	        <li>
+	            <h:link outcome="multiPage" value="Multiple Page View"/>
+	        </li>
+	    </ul>
+	    <h5>Demo available online at : <a href="http://bit.ly/myfaces-html5-demo">http://bit.ly/myfaces-html5-demo</a></h5>
+        <h6>Please use a modern browser to experiment features.</h6>
+	</div>
+
+</h:body>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/inputTypes.xhtml b/myfaces-html5-demo/src/main/webapp/inputTypes.xhtml
new file mode 100644
index 0000000..258e20e
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/inputTypes.xhtml
@@ -0,0 +1,34 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+	xmlns:h="http://java.sun.com/jsf/html"
+	xmlns:f="http://java.sun.com/jsf/core"
+	xmlns:ui="http://java.sun.com/jsf/facelets"
+	xmlns:hx="http://myfaces.apache.org/html5/html"
+	xmlns:fx="http://myfaces.apache.org/html5/core"
+	xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+      
+      <ui:define name="content">
+          <div class="slide">
+	            <ui:include src="/sections/inputTypes.xhtml" />
+	       </div>
+      </ui:define>        
+          
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/media.xhtml b/myfaces-html5-demo/src/main/webapp/media.xhtml
new file mode 100644
index 0000000..cb371d7
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/media.xhtml
@@ -0,0 +1,38 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+    <ui:define name="content">
+        <div class="slide">
+            <ui:include src="/sections/media01.xhtml" />
+        </div>
+        <div class="slide">
+            <ui:include src="/sections/media02.xhtml" />
+        </div>
+      <div style="height: 200px;"></div>
+    </ui:define>        
+        
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/meterAndProgress.xhtml b/myfaces-html5-demo/src/main/webapp/meterAndProgress.xhtml
new file mode 100644
index 0000000..953f9d5
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/meterAndProgress.xhtml
@@ -0,0 +1,33 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+   <ui:define name="content">
+       <div class="slide">
+            <ui:include src="/sections/meterAndProgress.xhtml" />
+       </div>
+   </ui:define>
+       
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/multiPage.xhtml b/myfaces-html5-demo/src/main/webapp/multiPage.xhtml
new file mode 100644
index 0000000..62a6020
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/multiPage.xhtml
@@ -0,0 +1,85 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:ui="http://java.sun.com/jsf/facelets">
+
+<h:head>
+    <h:outputStylesheet library="style" name="text.css"/>
+    <h:outputStylesheet library="style" name="animation.css"/>
+    <h:outputStylesheet library="style" name="box.css"/>
+    <h:outputStylesheet library="style" name="common.css"/>
+
+    <meta charset="utf-8"/>
+    <title>Apache Myfaces Html5 Component Library Demo</title>
+</h:head>
+<h:body style="align:center;" class="nodecorate">
+    <div style="text-align:center; float: center; padding-left:15%; padding-right:15%; padding-top:100px; position: relative;">
+        <h1>Apache Myfaces Html5 Component Library Demo</h1>
+
+        <ui:include src="/sections/generalInfo.xhtml"/>
+
+        <ul style="line-height:30px; list-style: upper-roman; font-size: 30px;" class="fontedHeader">
+            <li>
+                <h:link outcome="slideView" value="Slide View Component"/>
+                <sup class="newFeature">New</sup>
+            </li>
+            <li>
+                <h:link outcome="inputTypes" value="Input Types"/>
+            </li>
+            <li>
+                <h:link outcome="clientSideValidation"
+                        value="Client Side Validation and Driving Properties with JSF Validators/Converters"/>
+            </li>
+            <li>
+                <h:link outcome="effects" value="Effects"/>
+                <sup class="newFeature">New</sup>
+            </li>
+            <li>
+                <h:link outcome="animations" value="Animations"/>
+                <sup class="newFeature">New</sup>
+            </li>
+            <li>
+                <h:link outcome="media" value="Video, Audio and Media "/>
+            </li>
+            <li>
+                <h:link outcome="meterAndProgress" value="Meter Progress"/>
+                <sup class="newFeature">New</sup>
+            </li>
+            <li>
+                <h:link outcome="datetime" value="Date-Time"/>
+            </li>
+            <li>
+                <h:link outcome="suggestions" value="Suggestions"/>
+            </li>
+            <li>
+                <h:link outcome="dnd" value="Drag and Drop"/>
+            </li>
+        </ul>
+
+        <ui:include src="/sections/infoEnd.xhtml"/>
+        <h5>Demo available online at : <a
+                href="http://bit.ly/myfaces-html5-demo">http://bit.ly/myfaces-html5-demo</a></h5>
+    </div>
+
+</h:body>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/resources/components/browserSupport/_browserInfo.xhtml b/myfaces-html5-demo/src/main/webapp/resources/components/browserSupport/_browserInfo.xhtml
new file mode 100644
index 0000000..f236190
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/components/browserSupport/_browserInfo.xhtml
@@ -0,0 +1,60 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:composite="http://java.sun.com/jsf/composite"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core">
+
+<composite:interface>
+    <composite:facet name="content" required="false"/>
+    <composite:attribute name="facetName" required="true" />
+    <composite:attribute name="iconName" required="true" />
+    <composite:attribute name="supportedMessage" required="false" default="This feature is supported by this browser." />
+    <composite:attribute name="unsupportedMessage" required="false" default="This feature is not supported by this browser." />
+    <composite:attribute name="style" required="false" />
+    <composite:attribute name="support" required="true" type="java.lang.Boolean" />
+</composite:interface>
+
+
+<composite:implementation>
+    <h:outputStylesheet target="head" library="style" name="browserSupport.css" id="browserSupportStyle" />
+
+    <hx:div styleClass="browserSupportInfo" style="#{cc.attrs.style}">
+        <fx:effects additionalStyleClassToActivate="expandedBrowserSupportInfo"
+                    event="mouseover" deactivationEvents="mouseout" duration="1s"/>
+
+        <h:graphicImage library="image/browser" name="#{cc.attrs.iconName}" alt="#{cc.attrs.iconName}" 
+                        styleClass="#{(cc.attrs.support) ? ( (not empty cc.facets[cc.attrs.facetName]) ? 'emphasizedBrowserIcon supportedBrowserIcon' : 'supportedBrowserIcon') : ( (not empty cc.facets[cc.attrs.facetName]) ? 'emphasizedBrowserIcon' : 'unSupportedBrowserIcon')}" />
+        <br/>
+        <hx:div styleClass="browserInfoContent">
+            <h:panelGroup rendered="#{not empty cc.facets[cc.attrs.facetName]}">
+                <composite:renderFacet name="#{cc.attrs.facetName}" />
+            </h:panelGroup>
+            <h:outputText value="#{cc.attrs.supportedMessage}" rendered="#{empty cc.facets[cc.attrs.facetName] and cc.attrs.support}" />
+            <h:outputText value="#{cc.attrs.unsupportedMessage}" rendered="#{empty cc.facets[cc.attrs.facetName] and not cc.attrs.support}" />
+
+            <fx:effects delay="0.9s"/>
+        </hx:div>
+    </hx:div>
+
+</composite:implementation>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/resources/components/browserSupport/browserSupport.xhtml b/myfaces-html5-demo/src/main/webapp/resources/components/browserSupport/browserSupport.xhtml
new file mode 100644
index 0000000..17d32c0
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/components/browserSupport/browserSupport.xhtml
@@ -0,0 +1,68 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:composite="http://java.sun.com/jsf/composite"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core">
+
+<composite:interface shortDescription="If a facet is defined, but support attr is false, then its icon will be shown with red border.">
+    <composite:facet name="webkit" />
+    <composite:facet name="mozilla" />
+    <composite:facet name="opera" />
+    <composite:facet name="ie" />
+    <composite:attribute name="webkitSupport" type="java.lang.Boolean" default="#{not empty cc.facets.webkit}" />
+    <composite:attribute name="mozillaSupport" type="java.lang.Boolean" default="#{not empty cc.facets.mozilla}" />
+    <composite:attribute name="operaSupport" type="java.lang.Boolean" default="#{not empty cc.facets.opera}" />
+    <composite:attribute name="ieSupport" type="java.lang.Boolean" default="#{not empty cc.facets.ie}" />
+</composite:interface>
+
+
+<composite:implementation>
+        <bs:_browserInfo iconName="webkit.ico" facetName="webkit" support="#{cc.attrs.webkitSupport}"
+                         supportedMessage="This feature is supported by Webkit browsers(Chrome and Safari)."
+                         unsupportedMessage="This feature is not supported by Webkit browsers(Chrome and Safari)." style="right:94px;">
+            <composite:insertFacet name="webkit" />
+        </bs:_browserInfo>
+
+        <bs:_browserInfo iconName="mozilla.ico" facetName="mozilla" support="#{cc.attrs.mozillaSupport}"
+                         supportedMessage="This feature is supported by Mozilla browsers."
+                         unsupportedMessage="This feature is not supported by Mozilla browsers." style="right:66px;">
+            <composite:insertFacet name="mozilla" />
+        </bs:_browserInfo>
+
+        <bs:_browserInfo iconName="opera.ico" facetName="opera" support="#{cc.attrs.operaSupport}"
+                         supportedMessage="This feature is supported by Opera."
+                         unsupportedMessage="This feature is not supported by Opera." style="right:38px;">
+            <composite:insertFacet name="opera" />
+        </bs:_browserInfo>
+
+        <bs:_browserInfo iconName="iewin.gif"   facetName="ie" support="#{cc.attrs.ieSupport}"
+                         supportedMessage="This feature is supported by Internet Explorer."
+                         unsupportedMessage="This feature is not supported by Internet Explorer." style="right:10px;">
+            <composite:insertFacet name="ie" />
+        </bs:_browserInfo>
+
+</composite:implementation>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/resources/components/common/viewChange.xhtml b/myfaces-html5-demo/src/main/webapp/resources/components/common/viewChange.xhtml
new file mode 100644
index 0000000..48518ef
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/components/common/viewChange.xhtml
@@ -0,0 +1,45 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:composite="http://java.sun.com/jsf/composite"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core">
+
+<composite:interface shortDescription="If a facet is defined, but support attr is false, then its icon will be shown with red border.">
+    <composite:attribute name="singlePageName" type="java.lang.String" required="true" />
+    <composite:attribute name="slideId" type="java.lang.String" required="false" default="#{cc.attrs.singlePageName}"/>
+</composite:interface>
+
+
+<composite:implementation>
+    <hx:div styleClass="slideViewSinglePageViewLink" style="slideViewSinglePageViewLink"
+            rendered="#{viewChangeBean.slideView}">
+        <h:link outcome="/#{cc.attrs.singlePageName}" value="Go to single page view for this section" />
+    </hx:div>
+
+    <hx:div styleClass="slideViewSinglePageViewLink" style="slideViewSinglePageViewLink"
+            rendered="#{not viewChangeBean.slideView}">
+        <h:link outcome="/slides" fragment="#{cc.attrs.slideId}" value="Go to slide view for this section" />
+    </hx:div>
+
+</composite:implementation>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/resources/components/sh/sh.xhtml b/myfaces-html5-demo/src/main/webapp/resources/components/sh/sh.xhtml
new file mode 100644
index 0000000..d0774f4
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/components/sh/sh.xhtml
@@ -0,0 +1,38 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:composite="http://java.sun.com/jsf/composite">
+
+<composite:interface>
+    <composite:attribute name="lang" default="xml"/>
+    <composite:attribute name="linenums" default="false"/>
+</composite:interface>
+
+
+<composite:implementation>
+    <h:outputStylesheet target="head" id="demoCodeStyle">
+        .demoCode { font-size: smaller !important; overflow:hidden !important; }
+    </h:outputStylesheet>
+    
+	<pre class="prettyprint lang-#{cc.attrs.lang} #{(cc.attrs.linenums) ? 'linenums:1' : ''} demoCode codeBox"><composite:insertChildren /></pre>
+</composite:implementation>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/MyFaces_logo.jpg b/myfaces-html5-demo/src/main/webapp/resources/image/MyFaces_logo.jpg
new file mode 100644
index 0000000..5c76195
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/MyFaces_logo.jpg
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/apache_banner.png b/myfaces-html5-demo/src/main/webapp/resources/image/apache_banner.png
new file mode 100644
index 0000000..bf7b596
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/apache_banner.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/apache_feather.png b/myfaces-html5-demo/src/main/webapp/resources/image/apache_feather.png
new file mode 100644
index 0000000..ad8e348
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/apache_feather.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/browser/iewin.gif b/myfaces-html5-demo/src/main/webapp/resources/image/browser/iewin.gif
new file mode 100644
index 0000000..2d891cc
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/browser/iewin.gif
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/browser/mozilla.ico b/myfaces-html5-demo/src/main/webapp/resources/image/browser/mozilla.ico
new file mode 100644
index 0000000..d444389
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/browser/mozilla.ico
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/browser/opera.ico b/myfaces-html5-demo/src/main/webapp/resources/image/browser/opera.ico
new file mode 100644
index 0000000..036dc57
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/browser/opera.ico
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/browser/webkit.ico b/myfaces-html5-demo/src/main/webapp/resources/image/browser/webkit.ico
new file mode 100644
index 0000000..564fcb5
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/browser/webkit.ico
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/duke.jpg b/myfaces-html5-demo/src/main/webapp/resources/image/duke.jpg
new file mode 100644
index 0000000..b4c0414
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/duke.jpg
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/team/boc.png b/myfaces-html5-demo/src/main/webapp/resources/image/team/boc.png
new file mode 100644
index 0000000..2accda5
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/team/boc.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/team/fb.png b/myfaces-html5-demo/src/main/webapp/resources/image/team/fb.png
new file mode 100644
index 0000000..2748e5a
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/team/fb.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/team/fcb.png b/myfaces-html5-demo/src/main/webapp/resources/image/team/fcb.png
new file mode 100644
index 0000000..6a72285
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/team/fcb.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/team/gs.png b/myfaces-html5-demo/src/main/webapp/resources/image/team/gs.png
new file mode 100644
index 0000000..8b10f4d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/team/gs.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/team/lal.png b/myfaces-html5-demo/src/main/webapp/resources/image/team/lal.png
new file mode 100644
index 0000000..2150866
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/team/lal.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/image/team/rma.png b/myfaces-html5-demo/src/main/webapp/resources/image/team/rma.png
new file mode 100644
index 0000000..cc115b3
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/image/team/rma.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/demo/common.js b/myfaces-html5-demo/src/main/webapp/resources/script/demo/common.js
new file mode 100644
index 0000000..dd4c924
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/demo/common.js
@@ -0,0 +1,49 @@
+function submitForm(formId){
+   var form = document.getElementById(formId);
+
+   var formValid = form.checkValidity();
+   if(formValid){
+       return true;
+   }
+   else{
+       var elems = document.querySelectorAll('#' + formId + " :invalid");
+       if(elems && elems.length>0){
+         elems[0].focus();
+       }
+   
+       return false;
+   }
+}
+
+function removeCDataAndTrim(){
+    var elementsByClassName = document.getElementsByClassName('prettyprint');
+    var ua = navigator.userAgent;
+    var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
+    for (var i=0; i<elementsByClassName.length; i++) {
+        var innerHTML = elementsByClassName[i].innerHTML;
+        if(isOpera)     //behaves different in Opera
+            innerHTML = innerHTML.substr(10, innerHTML.length - 16);
+        else
+            innerHTML = innerHTML.substr(11, innerHTML.length - 16);
+        innerHTML = innerHTML.replace(new RegExp("^[\\s]+", "g"), "");
+        innerHTML = innerHTML.replace(new RegExp("[\\s]+$", "g"), "");
+        elementsByClassName[i].innerHTML = innerHTML;
+    }
+}
+
+
+function handleAjaxEvent(e){
+   if(e.status == 'success'){
+     alert('Request sent and respose recieved.');
+     return false;
+   }
+   return true;
+}
+
+function handleAjaxError(e){
+   if(e.status == 'serverError'){
+     alert('An error occurred during Ajax request. If you are on Google App Engine, please refresh the page. Unfortunately the view is expired on Google App Engine too early.');
+     return false;
+   }
+   return true;
+}
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-apollo.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-apollo.js
new file mode 100644
index 0000000..5542b12
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-apollo.js
@@ -0,0 +1,36 @@
+/**
+ * @fileoverview
+ * Registers a language handler for the AGC/AEA Assembly Language as described
+ * at http://virtualagc.googlecode.com
+ * <p>
+ * This file could be used by goodle code to allow syntax highlight for
+ * Virtual AGC SVN repository or if you don't want to commonize
+ * the header for the agc/aea html assembly listing.
+ *
+ * @author ohommes@alumni.cmu.edu
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // A line comment that starts with ;
+         [PR.PR_COMMENT,     /^#[^\r\n]*/, null, '#'],
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double quoted, possibly multi-line, string.
+         [PR.PR_STRING,      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"']
+        ],
+        [
+         [PR.PR_KEYWORD, /^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,null],
+         [PR.PR_TYPE, /^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],
+         // A single quote possibly followed by a word that optionally ends with
+         // = ! or ?.
+         [PR.PR_LITERAL,
+          /^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],
+         // Any word including labels that optionally ends with = ! or ?.
+         [PR.PR_PLAIN,
+          /^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],
+         // A printable non-space non-special character
+         [PR.PR_PUNCTUATION, /^[^\w\t\n\r \xA0()\"\\\';]+/]
+        ]),
+    ['apollo', 'agc', 'aea']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-css.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-css.js
new file mode 100644
index 0000000..fe5be51
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-css.js
@@ -0,0 +1,62 @@
+/**
+ * @fileoverview
+ * Registers a language handler for CSS.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-css"></pre>
+ *
+ *
+ * http://www.w3.org/TR/CSS21/grammar.html Section G2 defines the lexical
+ * grammar.  This scheme does not recognize keywords containing escapes.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // The space production <s>
+         [PR.PR_PLAIN,       /^[ \t\r\n\f]+/, null, ' \t\r\n\f']
+        ],
+        [
+         // Quoted strings.  <string1> and <string2>
+         [PR.PR_STRING,
+          /^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/, null],
+         [PR.PR_STRING,
+          /^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/, null],
+         ['lang-css-str', /^url\(([^\)\"\']*)\)/i],
+         [PR.PR_KEYWORD,
+          /^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,
+          null],
+         // A property name -- an identifier followed by a colon.
+         ['lang-css-kw', /^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],
+         // A C style block comment.  The <comment> production.
+         [PR.PR_COMMENT, /^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
+         // Escaping text spans
+         [PR.PR_COMMENT, /^(?:<!--|-->)/],
+         // A number possibly containing a suffix.
+         [PR.PR_LITERAL, /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],
+         // A hex color
+         [PR.PR_LITERAL, /^#(?:[0-9a-f]{3}){1,2}/i],
+         // An identifier
+         [PR.PR_PLAIN,
+          /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],
+         // A run of punctuation
+         [PR.PR_PUNCTUATION, /^[^\s\w\'\"]+/]
+        ]),
+    ['css']);
+PR.registerLangHandler(
+    PR.createSimpleLexer([],
+        [
+         [PR.PR_KEYWORD,
+          /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]
+        ]),
+    ['css-kw']);
+PR.registerLangHandler(
+    PR.createSimpleLexer([],
+        [
+         [PR.PR_STRING, /^[^\)\"\']+/]
+        ]),
+    ['css-str']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-hs.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-hs.js
new file mode 100644
index 0000000..4eda7cb
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-hs.js
@@ -0,0 +1,85 @@
+/**
+ * @fileoverview
+ * Registers a language handler for Haskell.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-hs">(my lisp code)</pre>
+ * The lang-cl class identifies the language as common lisp.
+ * This file supports the following language extensions:
+ *     lang-cl - Common Lisp
+ *     lang-el - Emacs Lisp
+ *     lang-lisp - Lisp
+ *     lang-scm - Scheme
+ *
+ *
+ * I used http://www.informatik.uni-freiburg.de/~thiemann/haskell/haskell98-report-html/syntax-iso.html
+ * as the basis, but ignore the way the ncomment production nests since this
+ * makes the lexical grammar irregular.  It might be possible to support
+ * ncomments using the lookbehind filter.
+ *
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         // whitechar    ->    newline | vertab | space | tab | uniWhite
+         // newline      ->    return linefeed | return | linefeed | formfeed
+         [PR.PR_PLAIN,       /^[\t\n\x0B\x0C\r ]+/, null, '\t\n\x0B\x0C\r '],
+         // Single line double and single-quoted strings.
+         // char         ->    ' (graphic<' | \> | space | escape<\&>) '
+         // string       ->    " {graphic<" | \> | space | escape | gap}"
+         // escape       ->    \ ( charesc | ascii | decimal | o octal
+         //                        | x hexadecimal )
+         // charesc      ->    a | b | f | n | r | t | v | \ | " | ' | &
+         [PR.PR_STRING,      /^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,
+          null, '"'],
+         [PR.PR_STRING,      /^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,
+          null, "'"],
+         // decimal      ->    digit{digit}
+         // octal        ->    octit{octit}
+         // hexadecimal  ->    hexit{hexit}
+         // integer      ->    decimal
+         //               |    0o octal | 0O octal
+         //               |    0x hexadecimal | 0X hexadecimal
+         // float        ->    decimal . decimal [exponent]
+         //               |    decimal exponent
+         // exponent     ->    (e | E) [+ | -] decimal
+         [PR.PR_LITERAL,
+          /^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,
+          null, '0123456789']
+        ],
+        [
+         // Haskell does not have a regular lexical grammar due to the nested
+         // ncomment.
+         // comment      ->    dashes [ any<symbol> {any}] newline
+         // ncomment     ->    opencom ANYseq {ncomment ANYseq}closecom
+         // dashes       ->    '--' {'-'}
+         // opencom      ->    '{-'
+         // closecom     ->    '-}'
+         [PR.PR_COMMENT,     /^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],
+         // reservedid   ->    case | class | data | default | deriving | do
+         //               |    else | if | import | in | infix | infixl | infixr
+         //               |    instance | let | module | newtype | of | then
+         //               |    type | where | _
+         [PR.PR_KEYWORD,     /^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/, null],
+         // qvarid       ->    [ modid . ] varid
+         // qconid       ->    [ modid . ] conid
+         // varid        ->    (small {small | large | digit | ' })<reservedid>
+         // conid        ->    large {small | large | digit | ' }
+         // modid        ->    conid
+         // small        ->    ascSmall | uniSmall | _
+         // ascSmall     ->    a | b | ... | z
+         // uniSmall     ->    any Unicode lowercase letter
+         // large        ->    ascLarge | uniLarge
+         // ascLarge     ->    A | B | ... | Z
+         // uniLarge     ->    any uppercase or titlecase Unicode letter
+         [PR.PR_PLAIN,  /^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],
+         // matches the symbol production
+         [PR.PR_PUNCTUATION, /^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]
+        ]),
+    ['hs']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-lisp.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-lisp.js
new file mode 100644
index 0000000..2614589
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-lisp.js
@@ -0,0 +1,77 @@
+/**
+ * @fileoverview
+ * Registers a language handler for Common Lisp and related languages.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-lisp">(my lisp code)</pre>
+ * The lang-cl class identifies the language as common lisp.
+ * This file supports the following language extensions:
+ *     lang-cl - Common Lisp
+ *     lang-el - Emacs Lisp
+ *     lang-lisp - Lisp
+ *     lang-scm - Scheme
+ *
+ *
+ * I used http://www.devincook.com/goldparser/doc/meta-language/grammar-LISP.htm
+ * as the basis, but added line comments that start with ; and changed the atom
+ * production to disallow unquoted semicolons.
+ *
+ * "Name"    = 'LISP'
+ * "Author"  = 'John McCarthy'
+ * "Version" = 'Minimal'
+ * "About"   = 'LISP is an abstract language that organizes ALL'
+ *           | 'data around "lists".'
+ *
+ * "Start Symbol" = [s-Expression]
+ *
+ * {Atom Char}   = {Printable} - {Whitespace} - [()"\'']
+ *
+ * Atom = ( {Atom Char} | '\'{Printable} )+
+ *
+ * [s-Expression] ::= [Quote] Atom
+ *                  | [Quote] '(' [Series] ')'
+ *                  | [Quote] '(' [s-Expression] '.' [s-Expression] ')'
+ *
+ * [Series] ::= [s-Expression] [Series]
+ *            |
+ *
+ * [Quote]  ::= ''      !Quote = do not evaluate
+ *            |
+ *
+ *
+ * I used <a href="http://gigamonkeys.com/book/">Practical Common Lisp</a> as
+ * the basis for the reserved word list.
+ *
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         ['opn',             /^\(/, null, '('],
+         ['clo',             /^\)/, null, ')'],
+         // A line comment that starts with ;
+         [PR.PR_COMMENT,     /^;[^\r\n]*/, null, ';'],
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double quoted, possibly multi-line, string.
+         [PR.PR_STRING,      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"']
+        ],
+        [
+         [PR.PR_KEYWORD,     /^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/, null],
+         [PR.PR_LITERAL,
+          /^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],
+         // A single quote possibly followed by a word that optionally ends with
+         // = ! or ?.
+         [PR.PR_LITERAL,
+          /^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],
+         // A word that optionally ends with = ! or ?.
+         [PR.PR_PLAIN,
+          /^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],
+         // A printable non-space non-special character
+         [PR.PR_PUNCTUATION, /^[^\w\t\n\r \xA0()\"\\\';]+/]
+        ]),
+    ['cl', 'el', 'lisp', 'scm']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-lua.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-lua.js
new file mode 100644
index 0000000..de727ff
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-lua.js
@@ -0,0 +1,43 @@
+/**
+ * @fileoverview
+ * Registers a language handler for Lua.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-lua">(my Lua code)</pre>
+ *
+ *
+ * I used http://www.lua.org/manual/5.1/manual.html#2.1
+ * Because of the long-bracket concept used in strings and comments, Lua does
+ * not have a regular lexical grammar, but luckily it fits within the space
+ * of irregular grammars supported by javascript regular expressions.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double or single quoted, possibly multi-line, string.
+         [PR.PR_STRING,      /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/, null, '"\'']
+        ],
+        [
+         // A comment is either a line comment that starts with two dashes, or
+         // two dashes preceding a long bracketed block.
+         [PR.PR_COMMENT, /^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],
+         // A long bracketed block not preceded by -- is a string.
+         [PR.PR_STRING,  /^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],
+         [PR.PR_KEYWORD, /^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/, null],
+         // A number is a hex integer literal, a decimal real literal, or in
+         // scientific notation.
+         [PR.PR_LITERAL,
+          /^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+         // An identifier
+         [PR.PR_PLAIN, /^[a-z_]\w*/i],
+         // A run of punctuation
+         [PR.PR_PUNCTUATION, /^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]
+        ]),
+    ['lua']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-ml.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-ml.js
new file mode 100644
index 0000000..d7170df
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-ml.js
@@ -0,0 +1,40 @@
+/**
+ * @fileoverview
+ * Registers a language handler for OCaml, SML, F# and similar languages.
+ *
+ * Based on the lexical grammar at
+ * http://research.microsoft.com/fsharp/manual/spec2.aspx#_Toc202383715
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace is made up of spaces, tabs and newline characters.
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // #if ident/#else/#endif directives delimit conditional compilation
+         // sections
+         [PR.PR_COMMENT,
+          /^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,
+          null, '#'],
+         // A double or single quoted, possibly multi-line, string.
+         // F# allows escaped newlines in strings.
+         [PR.PR_STRING,      /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/, null, '"\'']
+        ],
+        [
+         // Block comments are delimited by (* and *) and may be
+         // nested. Single-line comments begin with // and extend to
+         // the end of a line.
+         // TODO: (*...*) comments can be nested.  This does not handle that.
+         [PR.PR_COMMENT,     /^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],
+         [PR.PR_KEYWORD,     /^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
+         // A number is a hex integer literal, a decimal real literal, or in
+         // scientific notation.
+         [PR.PR_LITERAL,
+          /^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+         [PR.PR_PLAIN,       /^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],
+         // A printable non-space non-special character
+         [PR.PR_PUNCTUATION, /^[^\t\n\r \xA0\"\'\w]+/]
+        ]),
+    ['fs', 'ml']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-proto.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-proto.js
new file mode 100644
index 0000000..f8c4312
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-proto.js
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview
+ * Registers a language handler for Protocol Buffers as described at
+ * http://code.google.com/p/protobuf/.
+ *
+ * Based on the lexical grammar at
+ * http://research.microsoft.com/fsharp/manual/spec2.aspx#_Toc202383715
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(PR.sourceDecorator({
+        keywords: (
+            'bool bytes default double enum extend extensions false fixed32 '
+            + 'fixed64 float group import int32 int64 max message option '
+            + 'optional package repeated required returns rpc service '
+            + 'sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 '
+            + 'uint64'),
+        cStyleComments: true
+      }), ['proto']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-scala.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-scala.js
new file mode 100644
index 0000000..9229b39
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-scala.js
@@ -0,0 +1,39 @@
+/**
+ * @fileoverview
+ * Registers a language handler for Scala.
+ *
+ * Derived from http://lampsvn.epfl.ch/svn-repos/scala/scala-documentation/trunk/src/reference/SyntaxSummary.tex
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double or single quoted string 
+          // or a triple double-quoted multi-line string.
+         [PR.PR_STRING,
+          /^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,
+          null, '"'],
+         [PR.PR_LITERAL,     /^`(?:[^\r\n\\`]|\\.)*`?/, null, '`'],
+         [PR.PR_PUNCTUATION, /^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/, null,
+          '!#%&()*+,-:;<=>?@[\\]^{|}~']
+        ],
+        [
+         // A symbol literal is a single quote followed by an identifier with no
+         // single quote following
+         // A character literal has single quotes on either side
+         [PR.PR_STRING,      /^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],
+         [PR.PR_LITERAL,     /^'[a-zA-Z_$][\w$]*(?!['$\w])/],
+         [PR.PR_KEYWORD,     /^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
+         [PR.PR_LITERAL,     /^(?:true|false|null|this)\b/],
+         [PR.PR_LITERAL,     /^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],
+         // Treat upper camel case identifiers as types.
+         [PR.PR_TYPE,        /^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],
+         [PR.PR_PLAIN,       /^[$a-zA-Z_][\w$]*/],
+         [PR.PR_COMMENT,     /^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],
+         [PR.PR_PUNCTUATION, /^(?:\.+|\/)/]
+        ]),
+    ['scala']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-sql.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-sql.js
new file mode 100644
index 0000000..ff97fe1
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-sql.js
@@ -0,0 +1,41 @@
+/**
+ * @fileoverview
+ * Registers a language handler for SQL.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-sql">(my SQL code)</pre>
+ *
+ *
+ * http://savage.net.au/SQL/sql-99.bnf.html is the basis for the grammar, and
+ * http://msdn.microsoft.com/en-us/library/aa238507(SQL.80).aspx as the basis
+ * for the keyword list.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double or single quoted, possibly multi-line, string.
+         [PR.PR_STRING,      /^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/, null,
+          '"\'']
+        ],
+        [
+         // A comment is either a line comment that starts with two dashes, or
+         // two dashes preceding a long bracketed block.
+         [PR.PR_COMMENT, /^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],
+         [PR.PR_KEYWORD, /^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i, null],
+         // A number is a hex integer literal, a decimal real literal, or in
+         // scientific notation.
+         [PR.PR_LITERAL,
+          /^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+         // An identifier
+         [PR.PR_PLAIN, /^[a-z_][\w-]*/i],
+         // A run of punctuation
+         [PR.PR_PUNCTUATION, /^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]
+        ]),
+    ['sql']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-vb.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-vb.js
new file mode 100644
index 0000000..dcedacf
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-vb.js
@@ -0,0 +1,45 @@
+/**
+ * @fileoverview
+ * Registers a language handler for various flavors of basic.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-vb"></pre>
+ *
+ *
+ * http://msdn.microsoft.com/en-us/library/aa711638(VS.71).aspx defines the
+ * visual basic grammar lexical grammar.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t\n\r \xA0\u2028\u2029]+/, null, '\t\n\r \xA0\u2028\u2029'],
+         // A double quoted string with quotes escaped by doubling them.
+         // A single character can be suffixed with C.
+         [PR.PR_STRING,      /^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i, null,
+          '"\u201C\u201D'],
+         // A comment starts with a single quote and runs until the end of the
+         // line.
+         [PR.PR_COMMENT,     /^[\'\u2018\u2019][^\r\n\u2028\u2029]*/, null, '\'\u2018\u2019']
+        ],
+        [
+         [PR.PR_KEYWORD, /^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i, null],
+         // A second comment form
+         [PR.PR_COMMENT, /^REM[^\r\n\u2028\u2029]*/i],
+         // A boolean, numeric, or date literal.
+         [PR.PR_LITERAL,
+          /^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],
+         // An identifier?
+         [PR.PR_PLAIN, /^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],
+         // A run of punctuation
+         [PR.PR_PUNCTUATION,
+          /^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],
+         // Square brackets
+         [PR.PR_PUNCTUATION, /^(?:\[|\])/]
+        ]),
+    ['vb', 'vbs']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-vhdl.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-vhdl.js
new file mode 100644
index 0000000..24d33c2
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-vhdl.js
@@ -0,0 +1,34 @@
+/**
+ * @fileoverview
+ * Registers a language handler for VHDL '93.
+ *
+ * Based on the lexical grammar and keywords at
+ * http://www.iis.ee.ethz.ch/~zimmi/download/vhdl93_syntax.html
+ *
+ * @author benoit@ryder.fr
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         [PR.PR_PLAIN, /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0']
+        ],
+        [
+         // String, character or bit string
+         [PR.PR_STRING, /^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],
+         // Comment, from two dashes until end of line.
+         [PR.PR_COMMENT, /^--[^\r\n]*/],
+         [PR.PR_KEYWORD, /^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i, null],
+         // Type, predefined or standard
+         [PR.PR_TYPE, /^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i, null],
+         // Predefined attributes
+         [PR.PR_TYPE, /^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i, null],
+         // Number, decimal or based literal
+         [PR.PR_LITERAL, /^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
+         // Identifier, basic or extended
+         [PR.PR_PLAIN, /^(?:[a-z]\w*|\\[^\\]*\\)/i],
+         // Punctuation
+         [PR.PR_PUNCTUATION, /^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]
+        ]),
+    ['vhdl', 'vhd']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-wiki.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-wiki.js
new file mode 100644
index 0000000..63f4b5d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-wiki.js
@@ -0,0 +1,38 @@
+/**
+ * @fileoverview
+ * Registers a language handler for Wiki pages.
+ *
+ * Based on WikiSyntax at http://code.google.com/p/support/wiki/WikiSyntax
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // Whitespace
+         [PR.PR_PLAIN,       /^[\t \xA0a-gi-z0-9]+/, null,
+          '\t \xA0abcdefgijklmnopqrstuvwxyz0123456789'],
+         // Wiki formatting
+         [PR.PR_PUNCTUATION, /^[=*~\^\[\]]+/, null, '=*~^[]']
+        ],
+        [
+         // Meta-info like #summary, #labels, etc.
+         ['lang-wiki.meta',  /(?:^^|\r\n?|\n)(#[a-z]+)\b/],
+         // A WikiWord
+         [PR.PR_LITERAL,     /^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/
+          ],
+         // A preformatted block in an unknown language
+         ['lang-',           /^\{\{\{([\s\S]+?)\}\}\}/],
+         // A block of source code in an unknown language
+         ['lang-',           /^`([^\r\n`]+)`/],
+         // An inline URL.
+         [PR.PR_STRING,
+          /^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],
+         [PR.PR_PLAIN,       /^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]
+        ]),
+    ['wiki']);
+
+PR.registerLangHandler(
+    PR.createSimpleLexer([[PR.PR_KEYWORD, /^#[a-z]+/i, null, '#']], []),
+    ['wiki.meta']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-yaml.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-yaml.js
new file mode 100644
index 0000000..302b955
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/lang-yaml.js
@@ -0,0 +1,27 @@
+// Contributed by ribrdb @ code.google.com
+
+/**
+ * @fileoverview
+ * Registers a language handler for YAML.
+ *
+ * @author ribrdb
+ */
+
+PR.registerLangHandler(
+  PR.createSimpleLexer(
+    [
+      [PR.PR_PUNCTUATION, /^[:|>?]+/, null, ':|>?'],
+      [PR.PR_DECLARATION,  /^%(?:YAML|TAG)[^#\r\n]+/, null, '%'],
+      [PR.PR_TYPE, /^[&]\S+/, null, '&'],
+      [PR.PR_TYPE, /^!\S*/, null, '!'],
+      [PR.PR_STRING, /^"(?:[^\\"]|\\.)*(?:"|$)/, null, '"'],
+      [PR.PR_STRING, /^'(?:[^']|'')*(?:'|$)/, null, "'"],
+      [PR.PR_COMMENT, /^#[^\r\n]*/, null, '#'],
+      [PR.PR_PLAIN, /^\s+/, null, ' \t\r\n']
+    ],
+    [
+      [PR.PR_DECLARATION, /^(?:---|\.\.\.)(?:[\r\n]|$)/],
+      [PR.PR_PUNCTUATION, /^-/],
+      [PR.PR_KEYWORD, /^\w+:[ \r\n]/],
+      [PR.PR_PLAIN, /^\w+/]
+    ]), ['yaml', 'yml']);
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/prettify.css b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/prettify.css
new file mode 100644
index 0000000..93c26ab
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/prettify.css
@@ -0,0 +1,40 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+.str { color: #080; }
+.kwd { color: #008; }
+.com { color: #800; }
+.typ { color: #606; }
+.lit { color: #066; }
+.pun { color: #660; }
+.pln { color: #000; }
+.tag { color: #008; }
+.atn { color: #606; }
+.atv { color: #080; }
+.dec { color: #606; }
+pre.prettyprint { padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 { background: #eee }
+
+@media print {
+  .str { color: #060; }
+  .kwd { color: #006; font-weight: bold; }
+  .com { color: #600; font-style: italic; }
+  .typ { color: #404; font-weight: bold; }
+  .lit { color: #044; }
+  .pun { color: #440; }
+  .pln { color: #000; }
+  .tag { color: #006; font-weight: bold; }
+  .atn { color: #404; }
+  .atv { color: #060; }
+}
diff --git a/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/prettify.js b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/prettify.js
new file mode 100644
index 0000000..c8bffef
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/script/google-code-prettify/prettify.js
@@ -0,0 +1,1493 @@
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ * <p>
+ *
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Walks the DOM returning a properly escaped version of innerHTML.
+  * @param {Node} node
+  * @param {Array.<string>} out output buffer that receives chunks of HTML.
+  */
+window['PR_normalizedHtml']
+
+/** Contains functions for creating and registering new language handlers.
+  * @type {Object}
+  */
+  = window['PR']
+
+/** Pretty print a chunk of code.
+  *
+  * @param {string} sourceCodeHtml code as html
+  * @return {string} code as html, but prettier
+  */
+  = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+  * {@code class=prettyprint} and prettify them.
+  * @param {Function?} opt_whenDone if specified, called when the last entry
+  *     has been finished.
+  */
+  = window['prettyPrint'] = void 0;
+
+/** browser detection. @extern @returns false if not IE, otherwise the major version. */
+window['_pr_isIE6'] = function () {
+  var ieVersion = navigator && navigator.userAgent &&
+      navigator.userAgent.match(/\bMSIE ([678])\./);
+  ieVersion = ieVersion ? +ieVersion[1] : false;
+  window['_pr_isIE6'] = function () { return ieVersion; };
+  return ieVersion;
+};
+
+
+(function () {
+  // Keyword lists for various languages.
+  var FLOW_CONTROL_KEYWORDS =
+      "break continue do else for if return while ";
+  var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+      "double enum extern float goto int long register short signed sizeof " +
+      "static struct switch typedef union unsigned void volatile ";
+  var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+      "new operator private protected public this throw true try typeof ";
+  var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+      "concept concept_map const_cast constexpr decltype " +
+      "dynamic_cast explicit export friend inline late_check " +
+      "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+      "template typeid typename using virtual wchar_t where ";
+  var JAVA_KEYWORDS = COMMON_KEYWORDS +
+      "abstract boolean byte extends final finally implements import " +
+      "instanceof null native package strictfp super synchronized throws " +
+      "transient ";
+  var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+      "as base by checked decimal delegate descending event " +
+      "fixed foreach from group implicit in interface internal into is lock " +
+      "object out override orderby params partial readonly ref sbyte sealed " +
+      "stackalloc string select uint ulong unchecked unsafe ushort var ";
+  var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+      "debugger eval export function get null set undefined var with " +
+      "Infinity NaN ";
+  var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+      "goto if import last local my next no our print package redo require " +
+      "sub undef unless until use wantarray while BEGIN END ";
+  var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+      "elif except exec finally from global import in is lambda " +
+      "nonlocal not or pass print raise try with yield " +
+      "False True None ";
+  var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+      " defined elsif end ensure false in module next nil not or redo rescue " +
+      "retry self super then true undef unless until when yield BEGIN END ";
+  var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+      "function in local set then until ";
+  var ALL_KEYWORDS = (
+      CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+      PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+  // token style names.  correspond to css classes
+  /** token style for a string literal */
+  var PR_STRING = 'str';
+  /** token style for a keyword */
+  var PR_KEYWORD = 'kwd';
+  /** token style for a comment */
+  var PR_COMMENT = 'com';
+  /** token style for a type */
+  var PR_TYPE = 'typ';
+  /** token style for a literal value.  e.g. 1, null, true. */
+  var PR_LITERAL = 'lit';
+  /** token style for a punctuation string. */
+  var PR_PUNCTUATION = 'pun';
+  /** token style for a punctuation string. */
+  var PR_PLAIN = 'pln';
+
+  /** token style for an sgml tag. */
+  var PR_TAG = 'tag';
+  /** token style for a markup declaration such as a DOCTYPE. */
+  var PR_DECLARATION = 'dec';
+  /** token style for embedded source. */
+  var PR_SOURCE = 'src';
+  /** token style for an sgml attribute name. */
+  var PR_ATTRIB_NAME = 'atn';
+  /** token style for an sgml attribute value. */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   */
+  var PR_NOCODE = 'nocode';
+
+  /** A set of tokens that can precede a regular expression literal in
+    * javascript.
+    * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+    * list, but I've removed ones that might be problematic when seen in
+    * languages that don't support regular expression literals.
+    *
+    * <p>Specifically, I've removed any keywords that can't precede a regexp
+    * literal in a syntactically legal javascript program, and I've removed the
+    * "in" keyword since it's not a keyword in many languages, and might be used
+    * as a count of inches.
+    *
+    * <p>The link a above does not accurately describe EcmaScript rules since
+    * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+    * very well in practice.
+    *
+    * @private
+    */
+  var REGEXP_PRECEDER_PATTERN = function () {
+      var preceders = [
+          "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+          "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+          "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+          "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+          ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+          "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+          "||=", "~" /* handles =~ and !~ */,
+          "break", "case", "continue", "delete",
+          "do", "else", "finally", "instanceof",
+          "return", "throw", "try", "typeof"
+          ];
+      var pattern = '(?:^^|[+-]';
+      for (var i = 0; i < preceders.length; ++i) {
+        pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+      }
+      pattern += ')\\s*';  // matches at end, and matches empty string
+      return pattern;
+      // CAVEAT: this does not properly handle the case where a regular
+      // expression immediately follows another since a regular expression may
+      // have flags for case-sensitivity and the like.  Having regexp tokens
+      // adjacent is not valid in any language I'm aware of, so I'm punting.
+      // TODO: maybe style special characters inside a regexp as punctuation.
+    }();
+
+  // Define regexps here so that the interpreter doesn't have to create an
+  // object each time the function containing them is called.
+  // The language spec requires a new object created even if you don't access
+  // the $1 members.
+  var pr_amp = /&/g;
+  var pr_lt = /</g;
+  var pr_gt = />/g;
+  var pr_quot = /\"/g;
+  /** like textToHtml but escapes double quotes to be attribute safe. */
+  function attribToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;')
+        .replace(pr_quot, '&quot;');
+  }
+
+  /** escapest html special characters to html. */
+  function textToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;');
+  }
+
+
+  var pr_ltEnt = /&lt;/g;
+  var pr_gtEnt = /&gt;/g;
+  var pr_aposEnt = /&apos;/g;
+  var pr_quotEnt = /&quot;/g;
+  var pr_ampEnt = /&amp;/g;
+  var pr_nbspEnt = /&nbsp;/g;
+  /** unescapes html to plain text. */
+  function htmlToText(html) {
+    var pos = html.indexOf('&');
+    if (pos < 0) { return html; }
+    // Handle numeric entities specially.  We can't use functional substitution
+    // since that doesn't work in older versions of Safari.
+    // These should be rare since most browsers convert them to normal chars.
+    for (--pos; (pos = html.indexOf('&#', pos + 1)) >= 0;) {
+      var end = html.indexOf(';', pos);
+      if (end >= 0) {
+        var num = html.substring(pos + 3, end);
+        var radix = 10;
+        if (num && num.charAt(0) === 'x') {
+          num = num.substring(1);
+          radix = 16;
+        }
+        var codePoint = parseInt(num, radix);
+        if (!isNaN(codePoint)) {
+          html = (html.substring(0, pos) + String.fromCharCode(codePoint) +
+                  html.substring(end + 1));
+        }
+      }
+    }
+
+    return html.replace(pr_ltEnt, '<')
+        .replace(pr_gtEnt, '>')
+        .replace(pr_aposEnt, "'")
+        .replace(pr_quotEnt, '"')
+        .replace(pr_nbspEnt, ' ')
+        .replace(pr_ampEnt, '&');
+  }
+
+  /** is the given node's innerHTML normally unescaped? */
+  function isRawContent(node) {
+    return 'XMP' === node.tagName;
+  }
+
+  var newlineRe = /[\r\n]/g;
+  /**
+   * Are newlines and adjacent spaces significant in the given node's innerHTML?
+   */
+  function isPreformatted(node, content) {
+    // PRE means preformatted, and is a very common case, so don't create
+    // unnecessary computed style objects.
+    if ('PRE' === node.tagName) { return true; }
+    if (!newlineRe.test(content)) { return true; }  // Don't care
+    var whitespace = '';
+    // For disconnected nodes, IE has no currentStyle.
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      // Firefox makes a best guess if node is disconnected whereas Safari
+      // returns the empty string.
+      whitespace = window.getComputedStyle(node, null).whiteSpace;
+    }
+    return !whitespace || whitespace === 'pre';
+  }
+
+  function normalizedHtml(node, out, opt_sortAttrs) {
+    switch (node.nodeType) {
+      case 1:  // an element
+        var name = node.tagName.toLowerCase();
+
+        out.push('<', name);
+        var attrs = node.attributes;
+        var n = attrs.length;
+        if (n) {
+          if (opt_sortAttrs) {
+            var sortedAttrs = [];
+            for (var i = n; --i >= 0;) { sortedAttrs[i] = attrs[i]; }
+            sortedAttrs.sort(function (a, b) {
+                return (a.name < b.name) ? -1 : a.name === b.name ? 0 : 1;
+              });
+            attrs = sortedAttrs;
+          }
+          for (var i = 0; i < n; ++i) {
+            var attr = attrs[i];
+            if (!attr.specified) { continue; }
+            out.push(' ', attr.name.toLowerCase(),
+                     '="', attribToHtml(attr.value), '"');
+          }
+        }
+        out.push('>');
+        for (var child = node.firstChild; child; child = child.nextSibling) {
+          normalizedHtml(child, out, opt_sortAttrs);
+        }
+        if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
+          out.push('<\/', name, '>');
+        }
+        break;
+      case 3: case 4: // text
+        out.push(textToHtml(node.nodeValue));
+        break;
+    }
+  }
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union o the sets o strings matched d by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+
+    function decodeEscape(charsetPart) {
+      if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); }
+      switch (charsetPart.charAt(1)) {
+        case 'b': return 8;
+        case 't': return 9;
+        case 'n': return 0xa;
+        case 'v': return 0xb;
+        case 'f': return 0xc;
+        case 'r': return 0xd;
+        case 'u': case 'x':
+          return parseInt(charsetPart.substring(2), 16)
+              || charsetPart.charCodeAt(1);
+        case '0': case '1': case '2': case '3': case '4':
+        case '5': case '6': case '7':
+          return parseInt(charsetPart.substring(1), 8);
+        default: return charsetPart.charCodeAt(1);
+      }
+    }
+
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        switch (p) {
+          case '\\B': case '\\b':
+          case '\\D': case '\\d':
+          case '\\S': case '\\s':
+          case '\\W': case '\\w':
+            groups.push(p);
+            continue;
+        }
+        var start = decodeEscape(p);
+        var end;
+        if (i + 2 < n && '-' === charsetParts[i + 1]) {
+          end = decodeEscape(charsetParts[i + 2]);
+          i += 2;
+        } else {
+          end = start;
+        }
+        ranges.push([start, end]);
+        // If the range might intersect letters, then expand it.
+        if (!(end < 65 || start > 122)) {
+          if (!(end < 65 || start > 90)) {
+            ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+          }
+          if (!(end < 97 || start > 122)) {
+            ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+          }
+        }
+      }
+
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+
+      // Expand letters to groupts to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+
+      return parts.join('');
+    }
+
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+  var PR_innerHtmlWorks = null;
+  function getInnerHtml(node) {
+    // inner html is hopelessly broken in Safari 2.0.4 when the content is
+    // an html description of well formed XML and the containing tag is a PRE
+    // tag, so we detect that case and emulate innerHTML.
+    if (null === PR_innerHtmlWorks) {
+      var testNode = document.createElement('PRE');
+      testNode.appendChild(
+          document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));
+      PR_innerHtmlWorks = !/</.test(testNode.innerHTML);
+    }
+
+    if (PR_innerHtmlWorks) {
+      var content = node.innerHTML;
+      // XMP tags contain unescaped entities so require special handling.
+      if (isRawContent(node)) {
+        content = textToHtml(content);
+      } else if (!isPreformatted(node, content)) {
+        content = content.replace(/(<br\s*\/?>)[\r\n]+/g, '$1')
+            .replace(/(?:[\r\n]+[ \t]*)+/g, ' ');
+      }
+      return content;
+    }
+
+    var out = [];
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      normalizedHtml(child, out);
+    }
+    return out.join('');
+  }
+
+  /** returns a function that expand tabs to spaces.  This function can be fed
+    * successive chunks of text, and will maintain its own internal state to
+    * keep track of how tabs are expanded.
+    * @return {function (string) : string} a function that takes
+    *   plain text and return the text with tabs expanded.
+    * @private
+    */
+  function makeTabExpander(tabWidth) {
+    var SPACES = '                ';
+    var charInLine = 0;
+
+    return function (plainText) {
+      // walk over each character looking for tabs and newlines.
+      // On tabs, expand them.  On newlines, reset charInLine.
+      // Otherwise increment charInLine
+      var out = null;
+      var pos = 0;
+      for (var i = 0, n = plainText.length; i < n; ++i) {
+        var ch = plainText.charAt(i);
+
+        switch (ch) {
+          case '\t':
+            if (!out) { out = []; }
+            out.push(plainText.substring(pos, i));
+            // calculate how much space we need in front of this part
+            // nSpaces is the amount of padding -- the number of spaces needed
+            // to move us to the next column, where columns occur at factors of
+            // tabWidth.
+            var nSpaces = tabWidth - (charInLine % tabWidth);
+            charInLine += nSpaces;
+            for (; nSpaces >= 0; nSpaces -= SPACES.length) {
+              out.push(SPACES.substring(0, nSpaces));
+            }
+            pos = i + 1;
+            break;
+          case '\n':
+            charInLine = 0;
+            break;
+          default:
+            ++charInLine;
+        }
+      }
+      if (!out) { return plainText; }
+      out.push(plainText.substring(pos));
+      return out.join('');
+    };
+  }
+
+  var pr_chunkPattern = new RegExp(
+      '[^<]+'  // A run of characters other than '<'
+      + '|<\!--[\\s\\S]*?--\>'  // an HTML comment
+      + '|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>'  // a CDATA section
+      // a probable tag that should not be highlighted
+      + '|<\/?[a-zA-Z](?:[^>\"\']|\'[^\']*\'|\"[^\"]*\")*>'
+      + '|<',  // A '<' that does not begin a larger chunk
+      'g');
+  var pr_commentPrefix = /^<\!--/;
+  var pr_cdataPrefix = /^<!\[CDATA\[/;
+  var pr_brPrefix = /^<br\b/i;
+  var pr_tagNameRe = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/;
+
+  /** split markup into chunks of html tags (style null) and
+    * plain text (style {@link #PR_PLAIN}), converting tags which are
+    * significant for tokenization (<br>) into their textual equivalent.
+    *
+    * @param {string} s html where whitespace is considered significant.
+    * @return {Object} source code and extracted tags.
+    * @private
+    */
+  function extractTags(s) {
+    // since the pattern has the 'g' modifier and defines no capturing groups,
+    // this will return a list of all chunks which we then classify and wrap as
+    // PR_Tokens
+    var matches = s.match(pr_chunkPattern);
+    var sourceBuf = [];
+    var sourceBufLen = 0;
+    var extractedTags = [];
+    if (matches) {
+      for (var i = 0, n = matches.length; i < n; ++i) {
+        var match = matches[i];
+        if (match.length > 1 && match.charAt(0) === '<') {
+          if (pr_commentPrefix.test(match)) { continue; }
+          if (pr_cdataPrefix.test(match)) {
+            // strip CDATA prefix and suffix.  Don't unescape since it's CDATA
+            sourceBuf.push(match.substring(9, match.length - 3));
+            sourceBufLen += match.length - 12;
+          } else if (pr_brPrefix.test(match)) {
+            // <br> tags are lexically significant so convert them to text.
+            // This is undone later.
+            sourceBuf.push('\n');
+            ++sourceBufLen;
+          } else {
+            if (match.indexOf(PR_NOCODE) >= 0 && isNoCodeTag(match)) {
+              // A <span class="nocode"> will start a section that should be
+              // ignored.  Continue walking the list until we see a matching end
+              // tag.
+              var name = match.match(pr_tagNameRe)[2];
+              var depth = 1;
+              var j;
+              end_tag_loop:
+              for (j = i + 1; j < n; ++j) {
+                var name2 = matches[j].match(pr_tagNameRe);
+                if (name2 && name2[2] === name) {
+                  if (name2[1] === '/') {
+                    if (--depth === 0) { break end_tag_loop; }
+                  } else {
+                    ++depth;
+                  }
+                }
+              }
+              if (j < n) {
+                extractedTags.push(
+                    sourceBufLen, matches.slice(i, j + 1).join(''));
+                i = j;
+              } else {  // Ignore unclosed sections.
+                extractedTags.push(sourceBufLen, match);
+              }
+            } else {
+              extractedTags.push(sourceBufLen, match);
+            }
+          }
+        } else {
+          var literalText = htmlToText(match);
+          sourceBuf.push(literalText);
+          sourceBufLen += literalText.length;
+        }
+      }
+    }
+    return { source: sourceBuf.join(''), tags: extractedTags };
+  }
+
+  /** True if the given tag contains a class attribute with the nocode class. */
+  function isNoCodeTag(tag) {
+    return !!tag
+        // First canonicalize the representation of attributes
+        .replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,
+                 ' $1="$2$3$4"')
+        // Then look for the attribute we want.
+        .match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/);
+  }
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      source: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+    var notWs = /\S/;
+
+    /**
+     * Lexes job.source and produces an output array job.decorations of style
+     * classes preceded by the position at which they start in job.source in
+     * order.
+     *
+     * @param {Object} job an object like {@code
+     *    source: {string} sourceText plain text,
+     *    basePos: {int} position of job.source in the larger chunk of
+     *        sourceCode.
+     * }
+     */
+    var decorate = function (job) {
+      var sourceCode = job.source, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    if (options['hashComments']) {
+      if (options['cStyleComments']) {
+        // Stop C preprocessor declarations at an unclosed open comment
+        shortcutStylePatterns.push(
+            [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+             null, '#']);
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var keywords = options['keywords'].replace(/^\s+|\s+$/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /** Breaks {@code job.source} around style boundaries in
+    * {@code job.decorations} while re-interleaving {@code job.extractedTags},
+    * and leaves the result in {@code job.prettyPrintedHtml}.
+    * @param {Object} job like {
+    *    source: {string} source as plain text,
+    *    extractedTags: {Array.<number|string>} extractedTags chunks of raw
+    *                   html preceded by their position in {@code job.source}
+    *                   in order
+    *    decorations: {Array.<number|string} an array of style classes preceded
+    *                 by the position at which they start in job.source in order
+    * }
+    * @private
+    */
+  function recombineTagsAndDecorations(job) {
+    var sourceText = job.source;
+    var extractedTags = job.extractedTags;
+    var decorations = job.decorations;
+
+    var html = [];
+    // index past the last char in sourceText written to html
+    var outputIdx = 0;
+
+    var openDecoration = null;
+    var currentDecoration = null;
+    var tagPos = 0;  // index into extractedTags
+    var decPos = 0;  // index into decorations
+    var tabExpander = makeTabExpander(window['PR_TAB_WIDTH']);
+
+    var adjacentSpaceRe = /([\r\n ]) /g;
+    var startOrSpaceRe = /(^| ) /gm;
+    var newlineRe = /\r\n?|\n/g;
+    var trailingSpaceRe = /[ \r\n]$/;
+    var lastWasSpace = true;  // the last text chunk emitted ended with a space.
+
+    // See bug 71 and http://stackoverflow.com/questions/136443/why-doesnt-ie7-
+    var isIE678 = window['_pr_isIE6']();
+    var lineBreakHtml = (
+        isIE678
+        ? (job.sourceNode.tagName === 'PRE'
+           // Use line feeds instead of <br>s so that copying and pasting works
+           // on IE.
+           // Doing this on other browsers breaks lots of stuff since \r\n is
+           // treated as two newlines on Firefox.
+           ? (isIE678 === 6 ? '&#160;\r\n' :
+              isIE678 === 7 ? '&#160;<br>\r' : '&#160;\r')
+           // IE collapses multiple adjacent <br>s into 1 line break.
+           // Prefix every newline with '&#160;' to prevent such behavior.
+           // &nbsp; is the same as &#160; but works in XML as well as HTML.
+           : '&#160;<br />')
+        : '<br />');
+
+    // Look for a class like linenums or linenums:<n> where <n> is the 1-indexed
+    // number of the first line.
+    var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
+    var lineBreaker;
+    if (numberLines) {
+      var lineBreaks = [];
+      for (var i = 0; i < 10; ++i) {
+        lineBreaks[i] = lineBreakHtml + '</li><li class="L' + i + '">';
+      }
+      var lineNum = numberLines[1] && numberLines[1].length 
+          ? numberLines[1] - 1 : 0;  // Lines are 1-indexed
+      html.push('<ol class="linenums"><li class="L', (lineNum) % 10, '"');
+      if (lineNum) {
+        html.push(' value="', lineNum + 1, '"');
+      }
+      html.push('>');
+      lineBreaker = function () {
+        var lb = lineBreaks[++lineNum % 10];
+        // If a decoration is open, we need to close it before closing a list-item
+        // and reopen it on the other side of the list item.
+        return openDecoration
+            ? ('</span>' + lb + '<span class="' + openDecoration + '">') : lb;
+      };
+    } else {
+      lineBreaker = lineBreakHtml;
+    }
+
+    // A helper function that is responsible for opening sections of decoration
+    // and outputing properly escaped chunks of source
+    function emitTextUpTo(sourceIdx) {
+      if (sourceIdx > outputIdx) {
+        if (openDecoration && openDecoration !== currentDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        if (!openDecoration && currentDecoration) {
+          openDecoration = currentDecoration;
+          html.push('<span class="', openDecoration, '">');
+        }
+        // This interacts badly with some wikis which introduces paragraph tags
+        // into pre blocks for some strange reason.
+        // It's necessary for IE though which seems to lose the preformattedness
+        // of <pre> tags when their innerHTML is assigned.
+        // http://stud3.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+        // and it serves to undo the conversion of <br>s to newlines done in
+        // chunkify.
+        var htmlChunk = textToHtml(
+            tabExpander(sourceText.substring(outputIdx, sourceIdx)))
+            .replace(lastWasSpace
+                     ? startOrSpaceRe
+                     : adjacentSpaceRe, '$1&#160;');
+        // Keep track of whether we need to escape space at the beginning of the
+        // next chunk.
+        lastWasSpace = trailingSpaceRe.test(htmlChunk);
+        html.push(htmlChunk.replace(newlineRe, lineBreaker));
+        outputIdx = sourceIdx;
+      }
+    }
+
+    while (true) {
+      // Determine if we're going to consume a tag this time around.  Otherwise
+      // we consume a decoration or exit.
+      var outputTag;
+      if (tagPos < extractedTags.length) {
+        if (decPos < decorations.length) {
+          // Pick one giving preference to extractedTags since we shouldn't open
+          // a new style that we're going to have to immediately close in order
+          // to output a tag.
+          outputTag = extractedTags[tagPos] <= decorations[decPos];
+        } else {
+          outputTag = true;
+        }
+      } else {
+        outputTag = false;
+      }
+      // Consume either a decoration or a tag or exit.
+      if (outputTag) {
+        emitTextUpTo(extractedTags[tagPos]);
+        if (openDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        html.push(extractedTags[tagPos + 1]);
+        tagPos += 2;
+      } else if (decPos < decorations.length) {
+        emitTextUpTo(decorations[decPos]);
+        currentDecoration = decorations[decPos + 1];
+        decPos += 2;
+      } else {
+        break;
+      }
+    }
+    emitTextUpTo(sourceText.length);
+    if (openDecoration) {
+      html.push('</span>');
+    }
+    if (numberLines) { html.push('</li></ol>'); }
+    job.prettyPrintedHtml = html.join('');
+  }
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        source: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.source in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if ('console' in window) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null true false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var sourceCodeHtml = job.sourceCodeHtml;
+    var opt_langExtension = job.langExtension;
+
+    // Prepopulate output in case processing fails with an exception.
+    job.prettyPrintedHtml = sourceCodeHtml;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndExtractedTags = extractTags(sourceCodeHtml);
+      /** Plain text. @type {string} */
+      var source = sourceAndExtractedTags.source;
+      job.source = source;
+      job.basePos = 0;
+
+      /** Even entries are positions in source in ascending order.  Odd entries
+        * are tags that were extracted at that position.
+        * @type {Array.<number|string>}
+        */
+      job.extractedTags = sourceAndExtractedTags.tags;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+      // Integrate the decorations and tags back into the source code to produce
+      // a decorated html string which is left in job.prettyPrintedHtml.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension) {
+    var job = {
+      sourceCodeHtml: sourceCodeHtml,
+      langExtension: opt_langExtension
+    };
+    applyDecorator(job);
+    return job.prettyPrintedHtml;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return (new Date).getTime(); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock.now() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock.now() < endTime; k++) {
+        var cs = elements[k];
+        if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR_registerLangHandler.
+          var langExtension = cs.className.match(/\blang-(\w+)\b/);
+          if (langExtension) { langExtension = langExtension[1]; }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // fetch the content as a snippet of properly escaped HTML.
+            // Firefox adds newlines at the end.
+            var content = getInnerHtml(cs);
+            content = content.replace(/(?:\r\n?|\n)$/, '');
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              sourceCodeHtml: content,
+              langExtension: langExtension,
+              sourceNode: cs
+            };
+            applyDecorator(prettyPrintingJob);
+            replaceWithPrettyPrintedHtml();
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    function replaceWithPrettyPrintedHtml() {
+      var newContent = prettyPrintingJob.prettyPrintedHtml;
+      if (!newContent) { return; }
+      var cs = prettyPrintingJob.sourceNode;
+
+      // push the prettified html back into the tag.
+      if (!isRawContent(cs)) {
+        // just replace the old html with the new
+        cs.innerHTML = newContent;
+      } else {
+        // we need to change the tag to a <pre> since <xmp>s do not allow
+        // embedded tags such as the span tags used to attach styles to
+        // sections of source code.
+        var pre = document.createElement('PRE');
+        for (var i = 0; i < cs.attributes.length; ++i) {
+          var a = cs.attributes[i];
+          if (a.specified) {
+            var aname = a.name.toLowerCase();
+            if (aname === 'class') {
+              pre.className = a.value;  // For IE 6
+            } else {
+              pre.setAttribute(a.name, a.value);
+            }
+          }
+        }
+        pre.innerHTML = newContent;
+
+        // remove the old
+        cs.parentNode.replaceChild(pre, cs);
+        cs = pre;
+      }
+    }
+
+    doWork();
+  }
+
+  window['PR_normalizedHtml'] = normalizedHtml;
+  window['prettyPrintOne'] = prettyPrintOne;
+  window['prettyPrint'] = prettyPrint;
+  window['PR'] = {
+        'combinePrefixPatterns': combinePrefixPatterns,
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/DidactGothic.otf b/myfaces-html5-demo/src/main/webapp/resources/style/DidactGothic.otf
new file mode 100644
index 0000000..caaaa18
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/DidactGothic.otf
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/NovaSquare.ttf b/myfaces-html5-demo/src/main/webapp/resources/style/NovaSquare.ttf
new file mode 100644
index 0000000..28229a8
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/NovaSquare.ttf
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/animation.css b/myfaces-html5-demo/src/main/webapp/resources/style/animation.css
new file mode 100644
index 0000000..458c63d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/animation.css
@@ -0,0 +1,114 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@CHARSET "ISO-8859-1";
+
+	@-webkit-keyframes pulse {
+	  0%   {opacity: 1.0;}
+	  50%  {opacity: 0.6;}
+	  100% {opacity: 1.0;}
+	}
+	
+	.pulse {
+	  -webkit-animation-name: pulse;
+	  -webkit-animation-duration: 1s;
+	  -webkit-animation-iteration-count: 1;
+	  -webkit-animation-timing-function: ease-in-out;
+	  -webkit-animation-direction: alternate;
+	}
+	
+	@-webkit-keyframes flash {
+	  0%   {opacity: 1.0;}
+	  50%  {opacity: 0.2;}
+	  100% {opacity: 1.0;}
+	}
+	
+	.flash {
+	  -webkit-animation-name: flash;
+	  -webkit-animation-duration: 0.4s;
+	  -webkit-animation-iteration-count: 5;
+	  -webkit-animation-timing-function: ease-in-out;
+	  -webkit-animation-direction: alternate;
+	}
+	    
+	@-webkit-keyframes shake {
+	    0%   { -webkit-transform: rotate(0deg)}
+	    25%  { -webkit-transform: rotate(30deg)}
+	    75%  { -webkit-transform: rotate(-30deg)}
+	    100% { -webkit-transform: rotate(0deg)}
+	}
+	
+	.shake {
+	  -webkit-animation-name: shake;
+	  -webkit-animation-duration: 1s;
+	  -webkit-animation-iteration-count: 1;
+	  -webkit-animation-timing-function: ease-in-out;
+	  -webkit-animation-direction: alternate;
+	}
+	
+	 @-webkit-keyframes fade{
+	   0%   { -webkit-transform: scale(1) rotate(5deg); }
+	  50%  { -webkit-transform: scale(0.5) rotate(-15deg);  }
+	  100% { -webkit-transform: scale(0) rotate(5deg); }
+	}
+	
+	.fade {
+	  -webkit-animation-name: fade;
+	  -webkit-animation-duration: 1s;
+	  -webkit-animation-iteration-count: 1;
+	  -webkit-animation-timing-function: ease-in-out;
+	  -webkit-animation-direction: alternate;
+	}
+	
+	@-webkit-keyframes fall{
+	   from {top: 10px;}
+	   to {top: 470px;}
+	}
+	
+	.fall {
+	  -webkit-animation-name: fall;
+	  -webkit-animation-duration: 1s;
+	  -webkit-animation-iteration-count: 5;
+	  -webkit-animation-timing-function: ease-in-out;
+	  -webkit-animation-direction: alternate;
+	}
+	
+	@-webkit-keyframes appear {
+      0%   {opacity: 0.0;}
+      50%  {opacity: 0.5;}
+      100% {opacity: 1.0;}
+    }
+    
+    .appear {
+      -webkit-animation-name: appear;
+      -webkit-animation-duration: 1.0s;
+      -webkit-animation-iteration-count: 1;
+      -webkit-animation-timing-function: ease-in-out;
+      -webkit-animation-direction: alternate;
+    }
+    
+    .hidden
+    {
+        opacity: 0.0;
+    }
+    
+    .visible
+    {
+        opacity: 1.0;
+    }
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/box.css b/myfaces-html5-demo/src/main/webapp/resources/style/box.css
new file mode 100644
index 0000000..5f70e35
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/box.css
@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@CHARSET "ISO-8859-1";
+
+	.roundedBox
+    {
+        border-radius: 20px;
+        -moz-border-radius: 20px;
+    }
+    
+    .codeBox
+    {
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        
+        border: 1px solid #999; 
+        padding: 3px 0px 5px 0px;
+        width: 98% !important;
+        
+         box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px;
+        -webkit-box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px;
+        -moz-box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px;
+    }
+
+    .gradientBox
+    {
+        background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(white));
+        background: -moz-linear-gradient(-90deg, #EEEEEE, white);
+        
+        box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+        -webkit-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+        -moz-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+    }
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/browserSupport.css b/myfaces-html5-demo/src/main/webapp/resources/style/browserSupport.css
new file mode 100644
index 0000000..549dd96
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/browserSupport.css
@@ -0,0 +1,75 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.expandedBrowserSupportInfo{
+    height:300px !important;
+    width:20% !important;
+    overflow:visible;
+    z-index:100;
+
+    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(white));
+    background: -moz-linear-gradient(-90deg, #EEEEEE, white);
+    box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+    -webkit-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+    -moz-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    margin-bottom: -300px !important;
+}
+
+div.browserSupportInfo div.browserInfoContent{
+    opacity:0.0;
+}
+
+div.expandedBrowserSupportInfo div.browserInfoContent{
+    opacity:1.0;
+}
+
+.browserSupportInfo{
+    height:24px;
+    width:24px;
+    overflow:hidden;
+    z-index:99;
+
+    font-size:0.8em;
+    top: 0px;
+    right:100px;
+    text-align: left;
+
+    position:relative;
+    margin-bottom: -24px;
+    float : right;
+}
+.supportedBrowserIcon, .unSupportedBrowserIcon, .emphasizedBrowserIcon{
+    float:right;
+}
+
+.supportedBrowserIcon{
+    border : 2px solid green;
+    opacity:1 !important;
+}
+
+.unSupportedBrowserIcon{
+    opacity:0.1;
+}
+
+.emphasizedBrowserIcon{
+    opacity:0.5;
+    border : 2px solid red !important;
+}
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/common.css b/myfaces-html5-demo/src/main/webapp/resources/style/common.css
new file mode 100644
index 0000000..f293d8b
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/common.css
@@ -0,0 +1,175 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@CHARSET "ISO-8859-1";
+
+    body{
+        font-family: 'Didact GothicMedium';
+    }
+
+    input, a {
+        -webkit-transition: all 0.5s ease-out; 
+        -moz-transition: all 0.5s ease-out;
+        -o-transition: all 0.5s ease-out;
+    }
+
+	input, textarea
+    {
+        border-radius: 5px;
+        -moz-border-radius: 5px;
+        
+        font-family: 'Didact GothicMedium';
+        font-size: 100%;
+    }
+    
+    textarea {
+        border-width : 2px;
+        border-collapse: separate;
+        border-color: #EEE;
+		border-style: inset;
+    }
+	
+	input[type=submit], input[type=button], button
+    {
+        box-shadow: rgba(204, 204, 204, 0.6) -3px 7px 9px;
+        -webkit-box-shadow: rgba(204, 204, 204, 0.6) -3px 7px 9px;
+        -moz-box-shadow: rgba(204, 204, 204, 0.6) -3px 7px 9px;
+
+        border-radius: 8px;
+        -moz-border-radius: 8px;
+
+        background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(white));
+        background: -moz-linear-gradient(-90deg, #EEEEEE, white);
+        font-family: 'Didact GothicMedium';
+        font-size: large;
+    }
+    
+    input[type=submit]:hover, input[type=button]:hover, button:hover
+    {
+        box-shadow: rgba(204, 204, 204, 1) -3px 7px 9px;
+        -webkit-box-shadow: rgba(204, 204, 204, 1) -3px 7px 9px;
+        -moz-box-shadow: rgba(204, 204, 204, 1) -3px 7px 9px;
+    }
+    
+    input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+	   color: darkGray;
+	}
+	
+    :invalid  {
+	    -webkit-animation-name: flash;
+	    -webkit-animation-duration: 0.4s;
+	    -webkit-animation-iteration-count: 3;
+	    -webkit-animation-timing-function: ease-in-out;
+        -webkit-animation-direction: alternate;
+        
+        background-color: yellow;
+    }
+    
+    input:invalid::-webkit-input-placeholder {
+       color: #D00;
+    }
+    
+    a, a:visited
+    {
+        text-decoration: none;
+        color: black;
+    }
+    
+    a:hover
+    {
+        text-decoration: none;
+        
+        border: 2px solid darkGray;
+        border-radius: 8px;
+        -moz-border-radius: 8px;
+        
+        background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(white));
+        background: -moz-linear-gradient(-90deg, #EEEEEE, white);
+
+        box-shadow: rgba(204, 204, 204, 0.8) -3px 7px 9px;
+        -webkit-box-shadow: rgba(204, 204, 204, 0.8) -3px 7px 9px;
+        -moz-box-shadow: rgba(204, 204, 204, 0.8) -3px 7px 9px;
+    }
+
+    h1, h2 {
+        font-family: 'Nova Font FamilyRegular';
+    }
+    
+    pre.prettyprint{
+        font-size: small !important;
+        font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
+        background-color: #EEEEEE !important;
+        padding-right: 5px;
+    }
+
+    pre.prettyprint ol{
+        padding-left: 5% !important;
+    }
+    
+    .infoSlide{
+        height: 370px;
+		position: relative;
+		text-align: center;
+		top: 25%;
+    }
+
+    div.mf-slide {
+        padding-left : 1%;
+    }
+
+    @-webkit-keyframes newFeatureKeyFrame{
+        0% {
+           opacity: 1.0;
+        }
+        100% {
+           opacity: 0.1;
+        }
+    }
+    sup.newFeature{
+        -webkit-animation-name : newFeatureKeyFrame;
+        -webkit-animation-duration: 0.7s;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-timing-function: ease-in-out;
+        -webkit-animation-direction: alternate;
+        color: red;
+        font-size: small;
+        font-style: normal;
+        font-variant: small-caps;
+        font-weight: bold;
+    }
+
+    p.sectionManual{
+        width : 80%;
+    }
+
+    .slideViewSinglePageViewLink{
+        height:24px;
+        overflow:hidden;
+        z-index:99;
+
+        font-size:0.8em;
+        top: -14px;
+        text-align: left;
+
+        position:relative;
+        margin-bottom: -24px;
+        float : right;
+
+        font-size: small;
+    }
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/resources/style/text.css b/myfaces-html5-demo/src/main/webapp/resources/style/text.css
new file mode 100644
index 0000000..a192f98
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/style/text.css
@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@CHARSET "ISO-8859-1";
+
+    @font-face {
+      /* Medium */
+      font-family: "Didact GothicMedium";
+      src: local('Didact GothicMedium'), url( #{resource['style:DidactGothic.otf']} ) format('opentype');
+      font-weight:  500;
+      font-style:   normal;
+      font-variant: normal;
+      font-stretch: normal;
+    }
+
+    @font-face {
+      /* Regular */
+      font-family: "Nova Font FamilyRegular";
+      src: local('Nova Font FamilyRegular'), url( #{resource['style:NovaSquare.ttf']} ) format('truetype');  
+      font-weight:  400;
+      font-style:   normal;
+      font-variant: normal;
+      font-stretch: normal;
+    }
+    
+    .fontedText, .fontedHeader{
+        font-family: 'Didact GothicMedium';
+    }
+    
+    .reflectedText
+    {
+        -webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255, 255, 255, 0.179688))) 0 0 0 0 stretch stretch;
+        text-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px;
+    }
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_flv.flv b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_flv.flv
new file mode 100644
index 0000000..42f33a9
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_flv.flv
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_h264.mp4 b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_h264.mp4
new file mode 100644
index 0000000..e2bb4ec
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_h264.mp4
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_h264_copy.mp4 b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_h264_copy.mp4
new file mode 100644
index 0000000..e2bb4ec
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_h264_copy.mp4
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_ogg_2.ogv b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_ogg_2.ogv
new file mode 100644
index 0000000..644cc90
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_ogg_2.ogv
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_thumbnail_small.png b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_thumbnail_small.png
new file mode 100644
index 0000000..98ddd46
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/video/mother_goose_thumbnail_small.png
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/resources/video/player.swf b/myfaces-html5-demo/src/main/webapp/resources/video/player.swf
new file mode 100644
index 0000000..0eee379
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/resources/video/player.swf
Binary files differ
diff --git a/myfaces-html5-demo/src/main/webapp/sections/animations.xhtml b/myfaces-html5-demo/src/main/webapp/sections/animations.xhtml
new file mode 100644
index 0000000..91cc724
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/animations.xhtml
@@ -0,0 +1,196 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Animations
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="animations" slideId="animations" />
+</ui:define>
+
+<ui:define name="sectionContent">
+    <h:outputStylesheet>
+        div.effectDemoBox{
+            border: 1px dashed blue;
+            margin-top : 15px;
+            width: 100% !important;
+            height:200px !important;
+        }
+
+        div.effectDemoBoxText{
+            text-align:center;
+            width:100%;
+        }
+    </h:outputStylesheet>
+    <h:panelGrid columns="2" width="100%">
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Click to shake</div>
+            <fx:animations event="click" iteration="3" duration="0.3s" timingFunction="ease-in-out">
+                <fx:animationShake rotation="10" />
+            </fx:animations>
+
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:animations event="click" iteration="3"
+    duration="0.3s" timingFunction="ease-in-out">
+    <fx:animationShake rotation="10" />
+</fx:animations>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Click to pulse</div>
+            <fx:animations event="click" iteration="3" duration="0.3s" timingFunction="ease-in-out">
+                <fx:animationPulse maxOpacity="1" minOpacity="0.2"/>
+            </fx:animations>
+
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:animations event="click" iteration="3"
+    duration="0.3s" timingFunction="ease-in-out">
+    <fx:animationPulse maxOpacity="1" minOpacity="0.2"/>
+</fx:animations>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Click to scale</div>
+            <fx:animations event="click" iteration="3" duration="0.3s" timingFunction="ease-in-out">
+                <fx:animationScale maxSize="1" minSize="0.5" />
+            </fx:animations>
+
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:animations event="click" iteration="3"
+    duration="0.3s" timingFunction="ease-in-out">
+    <fx:animationScale maxSize="1" minSize="0.2" />
+</fx:animations>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <h:panelGroup>
+            <h:outputStylesheet id="customKeyFrame">
+                .customKeyFrameAnimation{
+                    position: absolute;
+                    width : 200px !important;
+                    box-shadow: 5px 44px 28px #333;
+                    box-reflect: below 1px -webkit-gradient
+                       (linear, 0% 0%, 0% 74%, from(transparent), to(rgba(255, 255, 255, 0.25)))
+                       0 0 0 0 stretch stretch;
+                    opacity : 1.0;
+                }
+                @-webkit-keyframes customKeyFrame {
+                    0% {
+                        width : 200px !important;
+                        left : 10%;
+                        top : 10%;
+                        -webkit-transform : skewX(0deg);
+                        background-color : yellow;
+                    }
+                    10% {
+                        left : 10%;
+                        top : 10%;
+                        background-color : none;
+                    }
+                    20% {
+                        left : 70%;
+                        top : 70%;
+                    }
+                    30% {
+                        left : 70%;
+                        top : 70%;
+                    }
+                    40% {
+                        left : 40%;
+                        top : 40%;
+                        -webkit-transform : skewX(-20deg);
+                    }
+                    50% {
+                        left : 40%;
+                        top : 40%;
+                        -webkit-transform : skewX(0deg);
+                    }
+                    60% {
+                        left : 70%;
+                        top : 50%;
+                    }
+                    70% {
+                        left : 70%;
+                        top : 50%;
+                    }
+                    80% {
+                        left : 10%;
+                        top : 20%;
+                    }
+                    90% {
+                        left : 10%;
+                        top : 20%;
+                    }
+                    100% {
+                        width : 200px !important;
+                        left : 10%;
+                        top : 20%;
+                        background-color : none;
+                        -webkit-transform : skewX(0deg);
+                    }
+                }
+            </h:outputStylesheet>
+            <hx:div styleClass="effectDemoBox" style="" onclick="this.className='effectDemoBox';">
+                <div class="effectDemoBoxText">Double click to run animation with custom</div>
+                <div class="effectDemoBoxText">keyframe. Click to stop</div>
+                <fx:animation id="customKeyFrameAnimation" event="dblclick" iteration="30" duration="6s" timingFunction="linear" direction="alternate" keyFrame="customKeyFrame"/>
+
+                <sh:sh lang="css"><![CDATA[
+@-webkit-keyframes customKeyFrame {
+     0% { left : 10%; top : 10%; }
+    10% { left : 70%; top : 70%; }
+    ....
+}
+                ]]></sh:sh>
+                <sh:sh lang="css"><![CDATA[
+<fx:animation keyFrame="customKeyFrame" event="dblclick"
+  iteration="30" duration="6s" direction="alternate"/>
+                ]]></sh:sh>
+            </hx:div>
+        </h:panelGroup>
+
+    </h:panelGrid>
+</ui:define>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation01.xhtml b/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation01.xhtml
new file mode 100644
index 0000000..ddc0df8
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation01.xhtml
@@ -0,0 +1,146 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+
+<ui:define name="title">
+ Driving Properties and Client-Side Validation by JSF Validators/Converters
+</ui:define>
+
+
+<ui:define name="browserSupport">
+    <bs:browserSupport webkitSupport="true" operaSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="clientSideValidation" slideId="clientSideValidation01" />
+</ui:define>
+
+
+<ui:define name="sectionContent">
+    <script>
+           function updateSliderValue(element){
+               document.getElementById('sliderValue').innerHTML = element.valueAsNumber;
+           };
+    </script>
+
+    <h:form id="clientSideValidationForm01">
+          <p class="sectionManual">
+              Try to type some inputs and submit the form. Form will not be submitted until validations are passed. Patterns can be defined in the JSF page and used in both client and server side.
+              For applicable components, patterns are set automatically. 
+          </p>
+
+          <h:panelGrid columns="4">
+              <h:outputLabel for="it01" value="Promo code" alt="Has pattern and required"/>
+              <hx:inputText id="it01" value="#{clientSideValidationBean.param01}" placeholder="Enter a promo code" cols="20"
+                     alt="A promo code consists of 2 digits followed by 2 upper-case characters" required="true">
+                 <f:validateRegex pattern="[0-9]{2}[A-Z]{2}" />
+              </hx:inputText>
+              <h:panelGroup id="it01Msg" >
+                  <h:message for="it01" style="font-size:9px;" />
+              </h:panelGroup>
+              <sh:sh><![CDATA[
+<hx:inputText ... required="true">
+    <f:validateRegex pattern="|0-9|{2}|A-Z|{2}">
+</hx:inputText>
+              ]]></sh:sh>
+
+              <h:outputLabel for="it02" value="URL"/>
+              <hx:inputText id="it02" type="url" value="#{clientSideValidationBean.param02}" cols="20"/>
+              <h:panelGroup id="it02Msg" >
+                  <h:message for="it02" />
+              </h:panelGroup>
+              <sh:sh><![CDATA[
+<hx:inputText type="url" .../>
+              ]]></sh:sh>
+
+              <h:outputLabel for="ie01" value="Email"/>
+              <hx:inputEmail id="ie01" value="#{clientSideValidationBean.email01}" placeholder="Type your email" />
+              <h:panelGroup id="ie01Msg">
+                  <h:message for="ie01" />
+              </h:panelGroup>
+              <sh:sh><![CDATA[
+<hx:inputEmail .../>
+              ]]></sh:sh>
+
+              <h:outputLabel for="ins01" value="Range min-max driven by standard JSF validator"/>
+              <h:panelGroup>
+                  <hx:inputNumberSlider id="ins01" value="#{clientSideValidationBean.number01}" step="5" onchange="updateSliderValue(this);">
+                      <f:convertNumber />
+                      <f:validateLongRange minimum="30" maximum="90" />
+                  </hx:inputNumberSlider>
+                  <span id="sliderValue">60</span>
+              </h:panelGroup>
+              <h:panelGroup id="ins01Msg" >
+                  <h:message for="ins01" />
+              </h:panelGroup>
+              <sh:sh><![CDATA[
+<hx:inputNumberSlider step="5" ...>
+    <f:validateLongRange minimum="30" maximum="90" />
+</hx:inputNumberSlider>
+              ]]></sh:sh>
+
+              <h:outputLabel for="ins02" value="Number min-max driven by standard JSF validator"/>
+              <hx:inputNumberSpinner id="ins02" value="#{clientSideValidationBean.number02}" segmentCount="10">
+                  <f:convertNumber />
+                  <f:validateLongRange minimum="0" maximum="50" />
+              </hx:inputNumberSpinner>
+              <h:panelGroup id="ins02Msg">
+                  <h:message for="ins02" />
+              </h:panelGroup>
+              <sh:sh><![CDATA[
+<hx:inputNumberSpinner segmentCount="10" ...>
+    <f:validateLongRange minimum="0" maximum="50" />
+</hx:inputNumberSpinner>
+              ]]></sh:sh>
+
+              <h:outputLabel for="idt01" value="Date"/>
+             <hx:inputDateTime id="idt01" type="date" value="#{dateTimeBean.date02}" step="3">
+                <fx:validateDateTimeRange minimum="2010-08-15" maximum="2010-12-31"/>
+             </hx:inputDateTime>
+             <h:panelGroup id="idt01Msg">
+                <h:message for="idt01" />
+             </h:panelGroup>
+             <sh:sh><![CDATA[
+<hx:inputDateTime type="date" step="3" ...>
+<fx:validateDateTimeRange minimum="2010-08-15"
+    maximum="2010-12-31"/>
+</hx:inputDateTime>
+             ]]></sh:sh>
+
+              <h:outputText />
+              <input type="button" value="Try Submitting"
+                 onclick="if(submitForm('clientSideValidationForm01')){jsf.ajax.request(this,event, {execute:'@form',render:'clientSideValidationForm01:it01Msg clientSideValidationForm01:it02Msg clientSideValidationForm01:ie01Msg clientSideValidationForm01:ins01Msg clientSideValidationForm01:ins02Msg clientSideValidationForm01:idt01Msg ',onevent: handleAjaxEvent, onerror:handleAjaxError})};return false;"/>
+              <h:outputText />
+              <h:outputText />
+
+          </h:panelGrid>
+  </h:form>
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation02.xhtml b/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation02.xhtml
new file mode 100644
index 0000000..3dc001d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation02.xhtml
@@ -0,0 +1,98 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+ Driving Properties and Client-Side Validation by JSF Validators/Converters
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" operaSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="clientSideValidation" slideId="clientSideValidation02" />
+</ui:define>
+
+<ui:define name="sectionContent">
+		    <p class="sectionManual">
+                Custom JSF validators can also drive client-side validation. The only thing required is implementing ClientSidePatternProvider interface and providing a pattern.
+            </p>
+
+            <h:form id="clientSideValidationForm02">
+	            <h:panelGrid columns="3">
+                    <h:outputLabel for="it03" value="Client-side validation pattern driven by custom JSF validator"/>
+                    <hx:inputText id="it03" value="#{clientSideValidationBean.param03}" placeholder="Enter a promo code" cols="20" 
+                           alt="A promo code consists of 2 digits followed by 2 upper-case characters">
+                       <f:validator validatorId="promoCodeValidator" />
+                    </hx:inputText>
+                    <h:panelGroup id="it03Msg">
+                        <h:message for="it03" />
+                    </h:panelGroup>
+
+	                <h:outputText />
+	                <input type="button" value="Try Submitting" 
+	                   onclick="if(submitForm('clientSideValidationForm02')){jsf.ajax.request(this,event, {execute:'@form',render:'clientSideValidationForm02:it03Msg',onevent: handleAjaxEvent, onerror:handleAjaxError})};return false;"/>
+	                <h:outputText />
+	            </h:panelGrid>
+                <h:panelGrid columns="1">
+                    <h:panelGroup>
+	                    <sh:sh><![CDATA[
+<hx:inputText ...>
+   <f:validator validatorId="promoCodeValidator" />
+</hx:inputText>
+	                    ]]></sh:sh>
+                    </h:panelGroup>
+                    <h:panelGroup>
+                        <sh:sh lang="java"><![CDATA[
+@FacesValidator(value="promoCodeValidator")
+public class PromoCodeValidator implements
+    Validator, ClientSidePatternProvider{
+    //replace | with closing square bracket
+    private static final String PATTERN = "|0-9|{2}|A-Z|{2}";
+
+    public String getPattern(){
+        return PATTERN;
+    }
+
+    public void validate(FacesContext context, UIComponent cmp,
+        Object value) throws ValidatorException{
+        ...
+        if(! Pattern.matches(PATTERN, partNum))
+            throw new ValidatorException(new FacesMessage
+                ("Provided value is not a promo code"));
+    }
+}
+                        ]]></sh:sh>
+                    </h:panelGroup>
+                </h:panelGrid>
+	        </h:form>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation03.xhtml b/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation03.xhtml
new file mode 100644
index 0000000..ee1a377
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/clientSideValidation03.xhtml
@@ -0,0 +1,106 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+ Driving Properties and Client-Side Validation by JSF Validators/Converters
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" operaSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="clientSideValidation" slideId="clientSideValidation03" />
+</ui:define>
+
+<ui:define name="sectionContent">
+      
+             <h:outputScript target="head" id="hackingButtonScript">
+                 function hack(){
+                    document.getElementById('clientSideValidationForm03:it03').pattern='[0-9]{2}';
+                    document.getElementById('hackDesc').className='visible appear';
+                 }
+             </h:outputScript>
+
+            <p class="sectionManual">
+                Even if the client-side validation is passed by changing the pattern attribute with Javascript, server-side validation always works.
+            </p>
+            <p class="sectionManual">
+                Because of custom JSF validator, "promoCodeValidator", the pattern defined is 2 numbers and 2 uppercase letters. "Hacking button" changes the pattern attribute of the input element
+                to accept only 2 numbers, however server-side code is not changed. Try typing a 2 digit number in the input and submit the form. After pressing the "Hack Button", you will be able to
+                send the form, but server-side validation will fail.
+            </p>
+
+
+		     <h:form id="clientSideValidationForm03">
+	            <h:panelGrid columns="3">
+	                
+	                <h:outputLabel for="it03" value="Client-side validation pattern driven by custom JSF validator"/>
+                    <h:panelGroup>
+	                    <hx:inputText id="it03" value="#{clientSideValidationBean.param03}" placeholder="Enter a promo code" cols="20" 
+	                           alt="A promo code consists of 2 digits followed by 2 upper-case characters">
+	                       <f:validator validatorId="promoCodeValidator" />
+	                    </hx:inputText>
+	                    <h:panelGroup id="it03Msg" >
+                            <h:message for="it03" style="color:red; font-size:14px;" />
+	                    </h:panelGroup>
+                    </h:panelGroup>
+                    
+                    <sh:sh><![CDATA[
+<hx:inputText ...>
+   <f:validator validatorId="promoCodeValidator" />
+</hx:inputText>
+                    ]]></sh:sh>
+
+                    <button onclick="hack();return false;">
+                        Hacking Button
+                    </button>
+                    <h:panelGroup>
+                        <div id="hackDesc" class="hidden" style="font-size:smaller; width: 200px; margin: 15px;">
+                            <p>Now the pattern is changed. So any two-digit number is accepted on client-side!</p>
+                            <p>But this is not the case on server-side.</p>
+                            <p>Try to submit the form with any two digit number!</p> 
+                        </div>
+                    </h:panelGroup>
+                    <sh:sh lang="js"><![CDATA[
+//HACK:
+document.getElementById('demoForm:it03').pattern='|0-9|{2}';
+                    ]]></sh:sh>
+                    
+                    <h:outputText />
+                    <input type="button" value="Try Submitting" 
+                       onclick="if(submitForm('clientSideValidationForm03')){jsf.ajax.request(this,event, {execute:'@form',render:'clientSideValidationForm03:it03Msg',onevent: handleAjaxEvent, onerror:handleAjaxError})} return false;"/>
+                    <h:outputText />
+	                               
+	            </h:panelGrid>
+	        </h:form>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/datetime.xhtml b/myfaces-html5-demo/src/main/webapp/sections/datetime.xhtml
new file mode 100644
index 0000000..a17421e
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/datetime.xhtml
@@ -0,0 +1,95 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Date inputs
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="false" operaSupport="true">
+      <f:facet name="webkit">
+          Currently, Chrome does not show the date picker, but it validates the entered value.
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="datetime" slideId="datetime" />
+</ui:define>
+
+<ui:define name="sectionContent">
+      
+              <h:panelGrid columns="4">
+	               <h:outputLabel for="idt01" value="Datetime"/>
+	                <hx:inputDateTime id="idt01" type="datetime" value="#{dateTimeBean.date01}" />
+	                <h:message for="idt01" />
+	                <sh:sh><![CDATA[
+<hx:inputDateTime type="datetime" .../>
+	                ]]></sh:sh>
+	                
+	                <h:outputLabel for="idt02" value="Date"/>
+	                <hx:inputDateTime id="idt02" type="date" value="#{dateTimeBean.date02}" />
+	                <h:message for="idt02" />
+	                <sh:sh><![CDATA[
+<hx:inputDateTime type="date" .../>
+	                ]]></sh:sh>
+	                
+	                <h:outputLabel for="idt03" value="Time"/>
+	                <hx:inputDateTime id="idt03" type="time" value="#{dateTimeBean.date03}"  />
+	                <h:message for="idt03" />
+	                <sh:sh><![CDATA[
+<hx:inputDateTime type="time" .../>
+	                ]]></sh:sh>
+	                
+	                <h:outputLabel for="idt04" value="Month"/>
+	                <hx:inputDateTime id="idt04" type="month" value="#{dateTimeBean.date04}" />
+	                <h:message for="idt04" />
+	                <sh:sh><![CDATA[
+<hx:inputDateTime type="month" .../>
+	                ]]></sh:sh>
+	                
+	                <h:outputLabel for="idt05" value="Week"/>
+	                <hx:inputDateTime id="idt05" type="week" value="#{dateTimeBean.date05}"  />
+	                <h:message for="idt05" />
+	                <sh:sh><![CDATA[
+<hx:inputDateTime type="week" .../>
+	                ]]></sh:sh>
+	                
+	                <h:outputLabel for="idt06" value="Local Datetime"/>
+	                <hx:inputDateTime id="idt06" type="datetime-local" value="#{dateTimeBean.date06}" />
+	                <h:message for="idt06" />
+	                <sh:sh><![CDATA[
+<hx:inputDateTime type="datetime-local" .../>
+	                ]]></sh:sh>
+
+             </h:panelGrid>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/dnd01.xhtml b/myfaces-html5-demo/src/main/webapp/sections/dnd01.xhtml
new file mode 100644
index 0000000..1d8bc70
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/dnd01.xhtml
@@ -0,0 +1,120 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+  Drag and Drop
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="false" mozillaSupport="true">
+      <f:facet name="webkit">
+          Does not work in Chrome because of <a href="http://code.google.com/p/chromium/issues/detail?id=50009" style="text-decoration: underline;">Chromium Issue-50009</a>
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="dnd" slideId="dnd01" />
+</ui:define>
+
+<ui:define name="sectionContent">
+      
+              <h:outputStylesheet id="dnd01Style" target="head"> 
+		          .dropZone, .dropZone02, .dropZone03, .dragSource01, .dragSource02 {text-align: center; color:green; font-size:30px; }
+		          .dragSource01 { width: 210px; height: 100px; background-image: url("#{request.contextPath}/resources/image/MyFaces_logo.jpg"); }
+		          .dragSource02 { width: 210px; height: 100px; background-image: url("#{request.contextPath}/resources/image/MyFaces_logo.jpg"); }
+		          
+		          .dropZone, .dropZone02, .dropZone03 { float: right; border: 2px dashed gray;}
+		          .dropZone { width: 219px; height: 213px; background-image: url("#{request.contextPath}/resources/image/apache_feather.png"); }
+		          .dropZone02 { width: 219px; height: 213px;}
+		          .dropZone03 { min-width: 300px; min-height: 300px; float: none;}
+
+                  .dragStarted { border: 2px solid yellow;}
+                  .dragEntered { border: 4px dashed green; background-color: #88FF00;}
+		          
+		          .team { width: 250px; height: 80px; color:darkGray; border: 1px solid gray; font-size: 20px;}
+              </h:outputStylesheet>
+
+              <p class="sectionManual">
+                  In this example, only the element with "DRAG ME" written on it can be dropped onto the drop zone.
+              </p>
+
+	          <h:form prependId="false">
+		          <table width="100%" >
+		                <tr>
+		                    <td>
+		                        <hx:div styleClass="dragSource01">
+		                            <fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/>
+                                    <fx:dragSource action="copy" param="MyFaces" />
+		                            <h:outputText value="DRAG ME"/>
+		                        </hx:div>
+		                    </td>
+		                    <td>
+		                        <hx:div id="dropZone01" styleClass="dropZone">
+                                    <fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/>
+                                    <fx:dropTarget dropListener="#{dndBean.processSimpleDnd}"
+		                                rerender="simpleDndOutput"/>
+		                            <div style="padding-top:45%; text-align: center;">
+		                                <h:outputText value="DROP HERE" />
+		                            </div>
+		                        </hx:div>
+		                    </td>
+		                </tr>
+		                <tr>
+		                    <td colspan="2"  align="center">
+		                        <span>Output of drop listener : </span><br/>
+		                        <h:outputText value="#{dndBean.simpleDndOutput}" id="simpleDndOutput" escape="false" style="color:green; font-size:medium;"/>
+		                    </td>
+		                </tr>
+		                <tr>
+		                   <td colspan="2">
+	                            <sh:sh><![CDATA[
+<hx:div ...>
+    <fx:dragSource action="copy" param="MyFaces" />
+</hx:div>
+...
+<hx:div ...>
+    <fx:dropTarget dropListener="#_{dndBean.processSimpleDnd}" rerender="simpleDndOutput"/>
+</hx:div>
+	                           ]]></sh:sh>
+	                           <sh:sh lang="java"><![CDATA[
+public void processSimpleDnd(DropEvent event) throws AbortProcessingException{
+    String param = event.getParam();
+    Map<String, String> dropDataMap = event.getDropDataMap();
+    ...
+}
+	                           ]]></sh:sh>
+	                        </td>
+		                </tr>
+		            </table>
+	            </h:form>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/dnd02.xhtml b/myfaces-html5-demo/src/main/webapp/sections/dnd02.xhtml
new file mode 100644
index 0000000..987d038
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/dnd02.xhtml
@@ -0,0 +1,130 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+  Drag and Drop
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="false" mozillaSupport="true">
+      <f:facet name="webkit">
+          Does not work in Chrome because of <a href="http://code.google.com/p/chromium/issues/detail?id=50009" style="text-decoration: underline;">Chromium Issue-50009</a>
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="dnd" slideId="dnd02" />
+</ui:define>
+
+<ui:define name="sectionContent">
+      
+              <h:outputStylesheet id="dnd02Style" target="head">
+		          .dropZone, .dropZone02, .dropZone03, .dragSource01, .dragSource02 {text-align: center; color:green; font-size:30px; }
+		          .dragSource01 { width: 210px; height: 100px; background-image: url("#{request.contextPath}/resources/image/MyFaces_logo.jpg"); }
+		          .dragSource02 { width: 210px; height: 100px; background-image: url("#{request.contextPath}/resources/image/MyFaces_logo.jpg"); }
+		          
+		          .dropZone, .dropZone02, .dropZone03 { float: right; border: 2px dashed gray;}
+		          .dropZone { width: 219px; height: 213px; background-image: url("#{request.contextPath}/resources/image/apache_feather.png"); }
+		          .dropZone02 { width: 219px; height: 213px;}
+		          .dropZone03 { min-width: 300px; min-height: 300px; float: none;}
+
+                  .dragStarted { border: 2px solid yellow;}
+                  .dragEntered { border: 4px dashed green; background-color: #88FF00;}
+		          
+		          .team { width: 250px; height: 80px; color:darkGray; border: 1px solid gray; font-size: 20px;}
+	          </h:outputStylesheet>
+
+              <p class="sectionManual">
+                  In this example, anything can be dragged and dropped on the drop zone.
+              </p>
+
+	          <h:form prependId="false">
+		          <table width="100%">
+	                <tr>
+	                    <td>
+	                        <hx:div styleClass="dragSource01">
+                                <fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/>
+	                            <fx:dragSource action="move" param="MyFaces"/>
+	                            <h:outputText value="DRAG ME"/>
+	                        </hx:div>
+	                    </td>
+	                    <td align="center" style="font-size:medium;">
+	                         <h3 style="color:blue;">
+	                             Text To Drag and drop 
+	                         </h3>
+	                         <br/>
+	                         <img src="#{request.contextPath}/resources/image/duke.jpg" alt="Duke" width="100" height="80"/> -> Image to drag and drop
+	                         <br/>
+	                         <a href="http://www.apache.org" style="text-decoration: underline;">apache.org</a> -> link to drag and drop
+	                         <br/>
+	                         Try dragging an image from any page, any text, any link etc...
+	                     </td>
+	                    <td>
+	                        <hx:div id="dropZone02" styleClass="dropZone02">
+                                <fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/>
+                                <fx:dropTarget acceptMimeTypes="text/x-myfaces-html5-dnd-source, text/plain, URL, text/uri-list"
+	                                    dropListener="#{dndBean.processDragAnything}" rerender="dragAnythingOutput"/>
+	                            <div style="padding-top:45%; text-align: center;">
+	                                <h:outputText value="DROP HERE" />
+	                            </div>
+	                        </hx:div>
+	                    </td>
+	                </tr>
+	                <tr>
+	                    <td colspan="3"  align="center">
+	                        <span>Output of drop listener : </span><br/>
+	                        <h:outputText value="#{dndBean.dragAnythingOutput}" id="dragAnythingOutput" escape="false" style="color:green; font-size:medium;"/>
+	                    </td>
+	                </tr>
+	                <tr>
+	                   <td colspan="3">
+                            <sh:sh><![CDATA[
+<hx:div ...>
+    <fx:dropTarget acceptMimeTypes="text/x-myfaces-html5-dnd-source, text/plain, text/uri-list"
+        dropListener="#_{dndBean.processDragAnything}" rerender="dragAnythingOutput"/> ...
+    </div>
+</hx:div>
+                           ]]></sh:sh>
+                           <sh:sh lang="java"><![CDATA[
+public void processDragAnything(DropEvent event) throws AbortProcessingException{
+    String param = event.getParam();
+    Map<String, String> dropDataMap = event.getDropDataMap();
+    String text = dropDataMap.get("text/plain");
+    ...
+}
+                           ]]></sh:sh>
+                        </td>
+	                </tr>
+	            </table>    
+	          </h:form>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/dnd03.xhtml b/myfaces-html5-demo/src/main/webapp/sections/dnd03.xhtml
new file mode 100644
index 0000000..c3b760f
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/dnd03.xhtml
@@ -0,0 +1,216 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+  Drag and Drop
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="false" mozillaSupport="true">
+      <f:facet name="webkit">
+          Does not work in Chrome because of <a href="http://code.google.com/p/chromium/issues/detail?id=50009" style="text-decoration: underline;">Chromium Issue-50009</a>
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="dnd" slideId="dnd03" />
+</ui:define>
+
+<ui:define name="sectionContent">
+      
+              <h:outputStylesheet id="dynamicDndStyle" target="head"> 
+                  .dropZone03{text-align: center; color:green; font-size:17px; }
+		          .dropZone03 { float: right; border: 2px dashed gray;}
+		          .dropZone03 { min-width: 210px; min-height: 220px; float: none;}
+
+                  .dragStarted { border: 2px solid yellow;}
+                  .dragEntered { border: 4px dashed green; background-color: #88FF00;}
+		          
+		          .team { 
+		              width: 200px; 
+	                  height: 38px; 
+	                  color:gray; 
+	                  border: 1px solid gray; 
+	                  font-size: 17px;
+	                  text-shadow: 0 3px 5px rgba(100, 100, 100, 0.5);
+                  }
+		          .team img {
+		              width: 35px;
+		          }
+		          
+	          </h:outputStylesheet>
+
+              <p class="sectionManual" style="width:90%;">
+                  A "drag source" behavior is attached for every rendered div within datatables. Only applicable drag sources are accepted onto the drop zone. This
+                  is determined by the "dropTargetTypes" attribute of the "dragSource" behavior, and "types" attribute of the "dropTarget" behavior.
+              </p>
+	          
+	          <h:form prependId="false">
+		          <hx:div id="dynamicDnDContainer">
+	                <table width="100%">
+	                    <tr>
+	                        <td align="left">
+	                              <hx:div id="teamDropZone" styleClass="dropZone03">
+                                      <fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/>
+                                      <fx:animations event="drop" duration="1s" iteration="5">
+                                          <fx:animationShake rotation="15" />
+                                      </fx:animations>
+	                                  <fx:dropTarget dropListener="#{dndBean.processTeamDrop}" rerender="dynamicDnDContainer" types="F,B"/>
+
+	                                  <div style="padding:5px; text-align: center;">
+	                                      <h:outputText value="All Teams" />
+	                                  </div>
+	                                  
+	                                  <h:dataTable value="#{dndBean.teams}" var="team">
+	                                      <h:column>
+	                                          <hx:div styleClass="team">
+                                                  <fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/>
+	                                              <fx:dragSource action="move" param="#{team.id}" dropTargetTypes="#{team.type.code}" />
+	                                              <img src="#{request.contextPath}/resources/image/team/#{team.id}.png" draggable="false" />
+	                                              <h:outputText value="#{team.name}" draggable="false"/>
+	                                          </hx:div>
+	                                      </h:column>
+	                                  </h:dataTable>
+	                              </hx:div>
+	                        </td>
+	                        <td align="center">
+	                            <hx:div id="basketballTeamDropZone" styleClass="dropZone03">
+                                     <fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/>
+	                                 <fx:animations event="drop" duration="1s" iteration="5">
+                                          <fx:animationShake rotation="15" />
+                                      </fx:animations>
+                                     <fx:dropTarget dropListener="#{dndBean.processBasketballTeamDrop}" rerender="dynamicDnDContainer" types="B"/>
+	                                    
+	                                 <div style="padding:5px; text-align: center;">
+	                                    <h:outputText value="Basketball Teams" />
+	                                 </div>
+	                                             
+	                                 <h:dataTable value="#{dndBean.basketballTeams}" var="team">
+	                                      <h:column>
+	                                          <hx:div styleClass="team">
+                                                  <fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/>
+                                                  <fx:dragSource action="move" param="#{team.id}" dropTargetTypes="#{team.type.code}" />
+	                                              <img src="#{request.contextPath}/resources/image/team/#{team.id}.png" draggable="false" />
+	                                              <h:outputText value="#{team.name}" draggable="false"/>
+	                                          </hx:div>
+	                                      </h:column>
+	                                 </h:dataTable>
+	                             </hx:div>
+	                         </td>
+	                        <td align="right">
+	                              <hx:div id="footballTeamDropZone" styleClass="dropZone03">
+                                      <fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/>
+                                      <fx:animations event="drop" duration="1s" iteration="5">
+                                          <fx:animationShake rotation="15" />
+                                      </fx:animations>
+	                                  <fx:dropTarget dropListener="#{dndBean.processFootballTeamDrop}" rerender="dynamicDnDContainer" types="F"/>
+	                              
+	                                  <div style="padding:5px; text-align: center;">
+	                                     <h:outputText value="Football Teams" />
+	                                  </div>
+	                              
+	                                 <h:dataTable value="#{dndBean.footballTeams}" var="team">
+	                                      <h:column>
+	                                          <hx:div styleClass="team">
+                                                  <fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/>
+	                                              <fx:dragSource action="move" param="#{team.id}" dropTargetTypes="#{team.type.code}" />
+	                                              <img src="#{request.contextPath}/resources/image/team/#{team.id}.png" draggable="false" />
+	                                              <h:outputText value="#{team.name}" draggable="false"/>
+	                                          </hx:div>
+	                                      </h:column>
+	                                 </h:dataTable>
+	                             </hx:div>
+	                        </td>
+	                    </tr>
+	                    <tr>
+	                        <td colspan="1" align="center">
+                                <h:commandButton action="#{dndBean.initTeams}" value="Refresh Teams">
+                                    <f:ajax render="@form"/>
+                                </h:commandButton>
+                            </td>
+	                        <td colspan="2" align="center">
+	                            <span>Output of drop listener : </span>
+	                            <h:outputText value="#{dndBean.teamDropOutput}" id="teamDropOutput" escape="false" style="color:green; font-size:medium;"/>
+	                        </td>
+	                    </tr>
+	                </table>
+	            </hx:div>
+            </h:form>
+            <table>
+                <tr>
+                    <td>
+		               <sh:sh><![CDATA[
+<h:dataTable value="#_{dndBean.teams}" var="team">
+   <h:column>
+       <hx:div ...>
+           <fx:dragSource param="#_{team.id}" dropTargetTypes="#_{team.type.code}" />
+           ...
+       </hx:div>
+   </h:column>
+</h:dataTable>
+...
+<hx:div id="basketballTeamDropZone" ...>
+   <fx:dropTarget dropListener="#_{dndBean.processBasketballTeamDrop}"
+      rerender="@form" types="B"/>...
+   <!-- List dropped basketball teams into this target -->
+   <h:dataTable value="#_{dndBean.basketballTeams}" var="team">
+        <h:column>
+            <hx:div styleClass="team">...
+                <h:outputText value="#_{team.name}" .../>
+            </hx:div>
+        </h:column>
+   </h:dataTable>
+</hx:div>
+		                 ]]></sh:sh>
+	                 </td>
+                    <td>
+                     <sh:sh><![CDATA[
+<hx:div id="footbalTeamDropZone" ...>...
+   <fx:dropTarget ... types="F"/>
+</hx:div>
+                     ]]></sh:sh>
+	                 <sh:sh lang="java"><![CDATA[
+public void processBasketballTeamDrop(DropEvent event)
+  throws AbortProcessingException{
+  String teamId = event.getParam();
+  ...
+  SportsTeam droppedTeam = getTeam(
+     this.basketballTeamsList, teamId);
+  ...
+  teams.remove(droppedTeam);
+  basketballTeams.add(droppedTeam);
+}
+	                 ]]></sh:sh>
+                    </td>
+                   </tr>
+                  </table>
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/effects01.xhtml b/myfaces-html5-demo/src/main/webapp/sections/effects01.xhtml
new file mode 100644
index 0000000..dd502fe
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/effects01.xhtml
@@ -0,0 +1,167 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Effects
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="effects" slideId="effects01" />
+</ui:define>
+
+<ui:define name="sectionContent">
+    <h:outputStylesheet>
+        div.effectDemoBox{
+            border: 1px dashed blue;
+            margin-top : 15px;
+            width: 100% !important;
+            height:200px !important;
+        }
+
+        div.effectDemoBoxText{
+            text-align:center;
+            width:100%;
+        }
+    </h:outputStylesheet>
+    <h:panelGrid columns="3" width="100%">
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Hover to Rotate</div>
+            <fx:effects event="mouseover" duration="1.5s" timingFunction="ease-in">
+                <fx:effectTransform rotate="695deg"/>
+            </fx:effects>
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:effects event="mouseover"
+    duration="2s"...>
+    <fx:effectTransform rotate="695deg"/>
+</fx:effects>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Click to fade, then mouse out to return back</div>
+            <fx:effects event="click" deactivationEvents="mouseout" duration="0.4s" timingFunction="ease-in">
+                <fx:effect property="opacity" value="0.3"/>
+            </fx:effects>
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:effects event="click"
+    deactivationEvents="mouseout" ...>
+    <fx:effect property="opacity"
+        value="0.3"/>
+</fx:effects>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Click to puff, then mouse out to return back</div>
+            <fx:effects event="click" deactivationEvents="mouseout" duration="0.2s" timingFunction="ease-out">
+                <fx:effectTransform scaleX="1.2" scaleY="1.2" />
+                <fx:effect property="opacity" value="0"/>
+            </fx:effects>
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:effects event="click"
+    deactivationEvents="mouseout" ...>
+    <fx:effect property="opacity"
+        value="0.3"/>
+</fx:effects>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Drag anything (i.e. select any text on the</div>
+            <div class="effectDemoBoxText">page and drag it) to see the effect, drop </div>
+            <div class="effectDemoBoxText">or drag out to return back</div>
+            <fx:effects event="dragenter" duration="0.3s">
+                <fx:effect property="background-color" value="#00AA00" />
+            </fx:effects>
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:effects event="dragenter" duration="0.3s">
+    <fx:effect property="background-color"
+        value="#00AA00" />
+</fx:effects>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Click to skew, then mouse out to return back</div>
+            <fx:effects event="click" deactivationEvents="mouseout" duration="0.2s" timingFunction="ease-out">
+                <fx:effectTransform skewX="-20deg"/>
+            </fx:effects>
+            <sh:sh><![CDATA[
+<hx:div>
+<fx:effects event="click"
+    deactivationEvents="mouseout"
+    duration="0.2s" timingFunction="ease-out">
+    <fx:effectTransform skewX="-20deg"/>
+</fx:effects>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Double click to see the complex effect,</div>
+            <div class="effectDemoBoxText">then click to return back</div>
+            <fx:effects event="dblclick" deactivationEvents="click" duration="2s" timingFunction="ease-in">
+                <fx:effectTransform scaleX="1.2" scaleY="1.2" rotate="20deg" translateX="50" translateY="50" skewX="-10deg"/>
+                <fx:effect property="opacity" value="0.3" />
+                <fx:effect property="background-color" value="yellow"/>
+                <fx:effect property="color" value="red" />
+            </fx:effects>
+            <sh:sh><![CDATA[
+<fx:effects event="dblclick" ...>
+    <fx:effectTransform scaleX="1.2" scaleY="1.2"
+        rotate="20deg" translateX="50"
+        translateY="50" skewX="-10deg"/>
+    <fx:effect property="opacity" value="0.3" />
+    <fx:effect property="background-color"
+        value="yellow"/>
+    <fx:effect property="color" value="red" />
+</fx:effects>
+            ]]></sh:sh>
+        </hx:div>
+    </h:panelGrid>
+</ui:define>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/sections/effects02.xhtml b/myfaces-html5-demo/src/main/webapp/sections/effects02.xhtml
new file mode 100644
index 0000000..4d7235b
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/effects02.xhtml
@@ -0,0 +1,146 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Effects
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="effects" slideId="effects02" />
+</ui:define>
+
+<ui:define name="sectionContent">
+    <h:outputStylesheet>
+        div.effectDemoBox{
+            border: 1px dashed blue;
+            margin-top : 15px;
+            width: 100% !important;
+            height:200px !important;
+        }
+
+        div.effectDemoBoxText{
+            text-align:center;
+            width:100%;
+        }
+    </h:outputStylesheet>
+
+    <p class="sectionManual">
+        Using predefined effects allows us to use the same effect in multiple places. A CSS class can also be activated with the defined effect. 
+    </p>
+
+    <fx:effectOutput id="myCustomEffect" target="head">
+        <fx:effectTransform rotate="-20deg"/>
+    </fx:effectOutput>
+
+    <h:panelGrid columns="2" width="100%">
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Using predefined effect</div>
+            <fx:effects event="mouseover" additionalStyleClassToActivate="myCustomEffect" duration="0.2s" timingFunction="ease-out"/>
+            <sh:sh><![CDATA[
+<fx:effectOutput id="myCustomEffect" target="head">
+    <fx:effectTransform rotate="-20deg"/>
+</fx:effectOutput>
+...
+<hx:div>
+  <fx:effects event="mouseover"
+    additionalStyleClassToActivate="myCustomEffect"
+    duration="0.2s" timingFunction="ease-out"/>
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="effectDemoBox">
+            <div class="effectDemoBoxText">Using the same predefined effect</div>
+            <div class="effectDemoBoxText">along with a new effect</div>
+            <fx:effects event="mouseover" additionalStyleClassToActivate="myCustomEffect" duration="1s" timingFunction="linear">
+                <fx:effect property="background-color" value="red" />
+            </fx:effects>
+            <sh:sh><![CDATA[
+<hx:div>
+  <fx:effects event="mouseover"
+    additionalStyleClassToActivate="myCustomEffect"
+    duration="1s" timingFunction="linear">
+    <fx:effect property="background-color" value="red" />
+  </fx:effects/>  
+</hx:div>
+            ]]></sh:sh>
+        </hx:div>
+
+        <h:panelGroup>
+            <h:outputStylesheet id="effectsDemoCustomStyle">
+                .effectsDemoCustomStyle{
+                    background-color : yellow;
+                }
+            </h:outputStylesheet>
+            <hx:div styleClass="effectDemoBox">
+                <div class="effectDemoBoxText">Using a CSS class </div>
+                <div class="effectDemoBoxText">for transition</div>
+                <fx:effects event="mouseover" additionalStyleClassToActivate="effectsDemoCustomStyle" duration="0.5s" timingFunction="linear"/>
+                <sh:sh><![CDATA[
+<h:outputStylesheet id="effectsDemoCustomStyle">
+    .effectsDemoCustomStyle{
+        background-color : yellow; }
+</h:outputStylesheet>
+<hx:div>
+  <fx:effects event="mouseover"
+    additionalStyleClassToActivate="effectsDemoCustomStyle".../>
+</hx:div>
+                ]]></sh:sh>
+            </hx:div>
+        </h:panelGroup>
+
+        <h:panelGroup>
+            <hx:div styleClass="effectDemoBox">
+                <div class="effectDemoBoxText">Using the same CSS class</div>
+                <div class="effectDemoBoxText">along with an effect</div>
+                <fx:effects event="mouseover" additionalStyleClassToActivate="effectsDemoCustomStyle" duration="0.5s" timingFunction="linear">
+                    <fx:effectTransform rotate="-10deg" />
+                </fx:effects>
+                <sh:sh><![CDATA[
+<hx:div>
+  <fx:effects event="mouseover"
+    additionalStyleClassToActivate="effectsDemoCustomStyle"...>
+    <fx:effectTransform rotate="-10deg" />
+</hx:div>
+                ]]></sh:sh>
+            </hx:div>
+        </h:panelGroup>
+
+    </h:panelGrid>
+</ui:define>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/sections/generalInfo.xhtml b/myfaces-html5-demo/src/main/webapp/sections/generalInfo.xhtml
new file mode 100644
index 0000000..7523e08
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/generalInfo.xhtml
@@ -0,0 +1,74 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+    <h:outputStylesheet target="head" library="style" name="browserSupport.css" id="browserSupportStyle" />
+    <h:outputStylesheet>
+        a.html5LogoAnchor{
+            text-decoration: none !important;
+            border: 0 !important;
+            border-radius: 0 !important;
+            -moz-border-radius: 0 !important;
+            background: none !important;
+            background: none !important;
+            box-shadow: none !important;
+            -webkit-box-shadow: none !important;
+            -moz-box-shadow: none !important;
+        }
+    </h:outputStylesheet>
+
+    <div id="generalInfo" class="middle" style="text-align:center;">
+
+        <br/>
+        <br/>
+        <br/>
+
+        <a href="http://www.w3.org/html/logo/" class="html5LogoAnchor">
+            <img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered" title="HTML5 Powered" />
+        </a>
+
+        <br/>
+        <br/>
+        <br/>
+
+        <h:outputText value="Browser support icons" style="font-weight:bold;"/>
+        
+        <h:panelGrid columns="2" style="text-align:left; margin-left:30%;">
+            <h:graphicImage library="image/browser" name="webkit.ico" alt="webkit.ico" styleClass="supportedBrowserIcon" />
+            <h:outputText value="Feature is supported on the browser" />
+
+            <h:graphicImage library="image/browser" name="webkit.ico" alt="webkit.ico" styleClass="emphasizedBrowserIcon supportedBrowserIcon" />
+            <h:outputText value="Feature is supported on the browser, and there are some notes to read on hover" />
+
+            <h:graphicImage library="image/browser" name="webkit.ico" alt="webkit.ico" styleClass="emphasizedBrowserIcon " />
+            <h:outputText value="There are some notes to read on hover" />
+
+            <h:graphicImage library="image/browser" name="webkit.ico" alt="webkit.ico" styleClass="unSupportedBrowserIcon" />
+            <h:outputText value="Feature is not supported on the browser" />
+        </h:panelGrid>
+    </div>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/infoEnd.xhtml b/myfaces-html5-demo/src/main/webapp/sections/infoEnd.xhtml
new file mode 100644
index 0000000..75a5244
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/infoEnd.xhtml
@@ -0,0 +1,53 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+
+<ui:define name="sectionContent">
+    <h:outputStylesheet>
+        div#endInfoSection a{
+            color: blue;    
+        }
+    </h:outputStylesheet>
+    <div id="endInfoSection" style="text-align:center;">
+        <h3>
+            <a href="http://myfaces.apache.org/">http://myfaces.apache.org/</a>
+        </h3>
+        <h3>
+            Questions ->
+            <a href="http://myfaces.apache.org/mail-lists.html">MyFaces User Mail List</a>
+            and
+            <a href="http://twitter.com/aliok_tr">@aliok_tr</a> 
+        </h3>
+        <h3>
+            Demo source code : <a href="https://github.com/aliok/javaone-myfaces-html5-demo">https://github.com/aliok/javaone-myfaces-html5-demo</a>
+        </h3>
+    </div>
+
+</ui:define>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/sections/inputTypes.xhtml b/myfaces-html5-demo/src/main/webapp/sections/inputTypes.xhtml
new file mode 100644
index 0000000..28f4a51
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/inputTypes.xhtml
@@ -0,0 +1,113 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Input Types
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" operaSupport="true" />
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="inputTypes" slideId="inputTypes" />
+</ui:define>
+
+<ui:define name="sectionContent">
+
+    <div>
+        These are convenience components with new features for Html5 input elements.
+    </div>
+
+              <h:panelGrid columns="4">
+	               
+	               <h:outputLabel for="it01" value="Simple Text" alt="With placeholder"/>
+	               <hx:inputText id="it01" value="#{inputTypesBean.param01}" placeholder="Enter a text" cols="20"/>
+	               <h:message for="it01" />
+	               <sh:sh><![CDATA[
+<hx:inputText placeholder="Enter a text" .../>
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="it02" value="Search" alt="With placeholder"/>
+	               <hx:inputText id="it02" type="search" value="#{inputTypesBean.param02}" placeholder="Enter a keyword" cols="20"/>
+	               <h:message for="it02" />
+	               <sh:sh><![CDATA[
+<hx:inputText type="search" placeholder="Enter a keyword" .../>
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="it03" value="URL"/>
+	               <hx:inputText id="it03" type="url" value="#{inputTypesBean.param03}" cols="20" placeholder="Enter your blog URL"/>
+	               <h:message for="it03" />
+	               <sh:sh><![CDATA[
+<hx:inputText type="url" placeholder="Enter your blog URL" .../>
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="it04" value="Phone Number"/>
+	               <hx:inputText id="it04" type="tel" value="#{inputTypesBean.param04}" cols="20" placeholder="Type your mobile nr"/>
+	               <h:message for="it04" />
+	               <sh:sh><![CDATA[
+<hx:inputText type="tel" placeholder="Type your mobile nr" .../>
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="it05" value="Textarea" alt="With maxlength"/>
+	               <hx:inputText id="it05" type="textarea" value="#{inputTypesBean.param05}" maxlength="20" cols="20" rows="2"/>
+	               <h:message for="it05" />
+	               <sh:sh><![CDATA[
+<hx:inputText type="textarea" maxlength="20" .../>
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="ie01" value="Email"/>
+	               <hx:inputEmail id="ie01" value="#{inputTypesBean.email01}" placeholder="Type your email" />
+	               <h:message for="ie01" />
+	               <sh:sh><![CDATA[
+<hx:inputEmail placeholder="Type your email" />
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="ins01" value="Range"/>
+	               <hx:inputNumberSlider id="ins01" value="#{inputTypesBean.number01}" step="5">
+	                   <f:convertNumber />
+	               </hx:inputNumberSlider>
+	               <h:message for="ins01" />
+	               <sh:sh><![CDATA[
+<hx:inputNumberSlider step="5" ... />
+	               ]]></sh:sh>
+	               
+	               <h:outputLabel for="ins02" value="Number"/>
+	               <hx:inputNumberSpinner id="ins02" value="#{inputTypesBean.number02}" segmentCount="20">
+	                   <f:convertNumber />
+	               </hx:inputNumberSpinner>
+	               <h:message for="ins02" />
+	               <sh:sh><![CDATA[
+<hx:inputNumberSpinner segmentCount="20" ... />
+	               ]]></sh:sh>
+	
+             </h:panelGrid>
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/media01.xhtml b/myfaces-html5-demo/src/main/webapp/sections/media01.xhtml
new file mode 100644
index 0000000..0fab64b
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/media01.xhtml
@@ -0,0 +1,128 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+  Media
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" operaSupport="true" mozillaSupport="true" ieSupport="false">
+      <f:facet name="webkit">
+          You will see a effect on hover and video will start to play.
+      </f:facet>
+      <f:facet name="ie">
+          You will see a warning instead of the video in IE or anyother browser that does not support Html5 video.
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="media" slideId="media01" />
+</ui:define>
+
+<ui:define name="sectionContent">
+
+              <h:outputScript target="head" id="videoScripts">
+	             function play(){
+                    document.getElementById('video02').play();
+                 }
+	             function pause(){
+                    document.getElementById('video02').pause();
+	             }
+              </h:outputScript>
+
+              <h:outputStylesheet target="head" id="videoStyles">
+                 video {
+                   z-index: 1000;
+                 }
+              </h:outputStylesheet>
+
+              <h:outputStylesheet target="head" id="videoEffectStyles">
+                 .styledVideo{
+		               box-shadow: 5px 44px 28px #333;
+		               -webkit-box-shadow: 5px 44px 28px #333;
+		               -moz-box-shadow: 5px 44px 28px #333;
+
+		               -webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 0%, 0% 74%, from(transparent), to(rgba(255, 255, 255, 0.25))) 0 0 0 0 stretch stretch;
+		             }
+
+              </h:outputStylesheet>
+
+              <h:panelGrid columns="1">
+                <h:panelGroup>
+	                <h:outputText value="Mouse hover on video to play" />
+                    <h:panelGrid columns="1">
+	                    <hx:video id="video02" showControls="false" onmouseover="this.play();" onmouseout="this.pause();"
+	                        autoplay="false" preload="none" poster="#{request.contextPath}/resources/video/mother_goose_thumbnail_small.png" width="200" height="150" >
+                            <fx:effects event="mouseover" additionalStyleClassToActivate="styledVideo" duration="1s">
+                                <fx:effectTransform translateX="100" translateY="30" scaleX="1.3" rotate="385deg" />
+                            </fx:effects>
+
+
+	                        <f:facet name="fallback">
+	                          <p style="color: red;">No Html5 video support here!</p>
+	                          <p>You can embed a Flash video in here.</p>
+	                        </f:facet>
+
+                            <fx:mediaSource src="#{request.contextPath}/resources/video/mother_goose_ogg_2.ogv" contentType="video/ogg" codec="theo, vorb"/>
+                            <fx:mediaSource src="#{request.contextPath}/resources/video/mother_goose_h264_copy.mp4" contentType="video/mp4" codec="avc1, mp4a"/>
+                        </hx:video>
+
+	                    <h:panelGroup>
+	                        <button onclick="play(); return false;">Play</button>
+	                        <button onclick="pause(); return false;">Pause</button>
+	                    </h:panelGroup>
+	                </h:panelGrid>
+	            </h:panelGroup>
+	            <h:panelGroup id="media02Code">
+	                <sh:sh><![CDATA[
+<hx:video id="motherGooseVideo" showControls="false" poster="... mother_goose_thumbnail_small.png"
+    onmouseover="this.play();" onmouseout="this.pause();">
+    <fx:effects event="mouseover" additionalStyleClassToActivate="styledVideo" duration="1s">
+        <fx:effectTransform translateX="100" translateY="30" scaleX="1.3" rotate="385deg" />
+    </fx:effects>
+    <fx:mediaSource src="... mother_goose_ogg.mp4" contentType="video/mp4" codec="avc1, mp4a"/>
+</hx:video>
+<button onclick="document.getElementById('motherGooseVideo').play();">Play</button>
+<button onclick="document.getElementById('motherGooseVideo').pause();">Pause</button>
+	                ]]></sh:sh>
+	                <sh:sh lang="css"><![CDATA[
+.styledVideo{
+    box-shadow: 5px 44px 28px #333;
+    box-reflect: below 1px -webkit-gradient
+       (linear, 0% 0%, 0% 74%, from(transparent), to(rgba(255, 255, 255, 0.25)))
+       0 0 0 0 stretch stretch;
+}
+	                ]]></sh:sh>
+	            </h:panelGroup>
+              </h:panelGrid>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/media02.xhtml b/myfaces-html5-demo/src/main/webapp/sections/media02.xhtml
new file mode 100644
index 0000000..9056d41
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/media02.xhtml
@@ -0,0 +1,95 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+  Media
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" operaSupport="false" mozillaSupport="false" ieSupport="false">
+      <f:facet name="mozilla">
+          The video will be played on Chrome, but not on Opera or Firefox since the only defined media source (h264 on mp4) is not supported by them.
+      </f:facet>
+      <f:facet name="opera">
+          The video will be played on Chrome, but not on Opera or Firefox since the only defined media source (h264 on mp4) is not supported by them.
+      </f:facet>
+      <f:facet name="ie">
+          You will see a flash fallback in IE or anyother browser that does not support Html5 video.
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="media" slideId="media02" />
+</ui:define>
+
+<ui:define name="sectionContent">
+
+              <h:panelGrid columns="1">
+
+	            <hx:video id="video01" showControls="true"
+	                autoplay="false" preload="none" poster="#{request.contextPath}/resources/video/mother_goose_thumbnail_small.png" width="400" height="300" >
+	                <f:facet name="fallback">
+	                    <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="300">
+	                        <param name="movie" value="#{request.contextPath}/resources/video/player.swf" />
+	                        <param name="allowfullscreen" value="true" />
+	                        <param name="allowscriptaccess" value="always" />
+	                        <param name="flashvars" value="file=#{request.contextPath}/resources/video/mother_goose_flv.flv" />
+	                        <embed
+	                            type="application/x-shockwave-flash"
+	                            id="player2"
+	                            name="player2"
+	                            src="#{request.contextPath}/resources/video/player.swf"
+	                            width="400"
+	                            height="300"
+	                            allowscriptaccess="always"
+	                            allowfullscreen="true"
+	                            flashvars="file=#{request.contextPath}/resources/video/mother_goose_flv.flv"
+	                        />
+	                    </object>
+	                </f:facet>
+
+	                <fx:mediaSource src="#{request.contextPath}/resources/video/mother_goose_h264.mp4" contentType="video/mp4" codec="avc1, mp4a"/>
+	            </hx:video>
+	            <sh:sh><![CDATA[
+<hx:video ...>
+    <f:facet name="fallback">
+      <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ...>
+      ...
+      </object>
+    </f:facet>
+    ....
+    <fx:mediaSource src="... mother_goose_ogg.mp4" contentType="video/mp4" codec="avc1, mp4a"/>
+</hx:video>
+	            ]]></sh:sh>
+	          </h:panelGrid>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/meterAndProgress.xhtml b/myfaces-html5-demo/src/main/webapp/sections/meterAndProgress.xhtml
new file mode 100644
index 0000000..51f04f3
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/meterAndProgress.xhtml
@@ -0,0 +1,131 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Meter and Progress
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" operaSupport="true">
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="meterAndProgress" slideId="meterAndProgress" />
+</ui:define>
+
+<ui:define name="sectionContent">
+    <h:outputStylesheet>
+        div.meterAndProgressDemoBox{
+            border : 1px solid blue;
+        }
+        div.meterAndProgressDemoBox div{
+            text-align:center;
+        }
+    </h:outputStylesheet>
+    <h:panelGrid columns="2" width="100%">
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>Value lower than optimal range</div>
+            <div>
+                <hx:meter value="15" maximum="100" minimum="0" low="20" high="80" optimum="50" />
+            </div>
+            <sh:sh><![CDATA[
+<hx:meter value="15" maximum="100" minimum="0"
+    low="20" high="80" optimum="50" />
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>Value in acceptable range</div>
+            <div>
+                <hx:meter value="60" maximum="100" minimum="0" low="20" high="80" optimum="50" />
+            </div>
+            <sh:sh><![CDATA[
+<hx:meter value="60" maximum="100" minimum="0"
+    low="20" high="80" optimum="50" />
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>Value higher than optimal range</div>
+            <div>
+                <hx:meter value="90" maximum="100" minimum="0" low="20" high="80" optimum="50" />
+            </div>
+            <sh:sh><![CDATA[
+<hx:meter value="90" maximum="100" minimum="0"
+    low="20" high="80" optimum="50" />
+            ]]></sh:sh>
+        </hx:div>
+
+        <h:outputText />
+
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>Low progress</div>
+            <div>
+                <hx:progress value="15" maximum="100"/>
+            </div>
+            <sh:sh><![CDATA[
+<hx:progress value="15" maximum="100"/>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>Middle in the progress</div>
+            <div>
+                <hx:progress value="50" maximum="100"/>
+            </div>
+            <sh:sh><![CDATA[
+<hx:progress value="50" maximum="100"/>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>High progress</div>
+            <div>
+                <hx:progress value="90" maximum="100"/>
+            </div>
+            <sh:sh><![CDATA[
+<hx:progress value="90" maximum="100"/>
+            ]]></sh:sh>
+        </hx:div>
+
+        <hx:div styleClass="meterAndProgressDemoBox">
+            <div>Indefinite progress</div>
+            <div>
+                <hx:progress maximum="100"/>
+            </div>
+            <sh:sh><![CDATA[
+<hx:progress maximum="100"/>
+            ]]></sh:sh>
+        </hx:div>
+    </h:panelGrid>
+</ui:define>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/sections/sectionTemplate.xhtml b/myfaces-html5-demo/src/main/webapp/sections/sectionTemplate.xhtml
new file mode 100644
index 0000000..b43e5ec
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/sectionTemplate.xhtml
@@ -0,0 +1,49 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+    <ui:insert name="browserSupport"/>
+    <table width="100%">
+       <tr>
+           <td width="100%">
+               <h2>
+                    <ui:insert name="title" />
+               </h2>
+           </td>
+       </tr>
+       <tr>
+           <td>
+               <ui:insert name="sectionContent" />
+           </td>
+       </tr>
+   </table>
+
+    <ui:insert name="viewChangeLinks" />
+
+
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/slideView.xhtml b/myfaces-html5-demo/src/main/webapp/sections/slideView.xhtml
new file mode 100644
index 0000000..0d54202
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/slideView.xhtml
@@ -0,0 +1,125 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+  Slide View
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport webkitSupport="true" mozillaSupport="true" operaSupport="true">
+      <f:facet name="mozilla">
+          Current version of the Firefox does not support transition effects. The slide view will work, but you will not able to see
+          any smooth transition.
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="slideView" slideId="slideView" />
+</ui:define>
+
+<ui:define name="sectionContent">
+
+    Even the <h:outputLink value="slides.jsf"> Slide View</h:outputLink> of this demo is made with SlideView component.
+
+    <sh:sh><![CDATA[
+<hx:slideView duration="0.5s" timingFunction="ease-in-out" widgetVar="slideViewWidget">
+    <hx:slide>
+        <ui:include src="/slides/info.xhtml" />
+    </hx:slide>
+    ...
+</hx:slideView>
+   ]]></sh:sh>
+
+
+    SlideView provides a number of client-side functionality to navigate between slides.
+
+    <sh:sh><![CDATA[
+<a href="#" onclick="slideViewWidget.goto(5);...">Navigate to 5th slide</a>
+<a href="#" onclick="slideViewWidget.right();...">Navigate to next slide</a>
+<a href="#" onclick="slideViewWidget.goBySlideId('explanationSlide');...">Navigate to explanation slide</a>
+    ]]></sh:sh>
+
+
+    Customized Slide View:
+
+    <sh:sh><![CDATA[
+<hx:slideView id="innerSlideView" navigateOnArrowKeys="false" navigateOnMouseWheel="false" slideHeight="10"
+          slideWidth="60" slideLeft="20" inactiveSlideScale="0.85" widgetVar="innerSlideView"
+          duration="2s" timingFunction="ease-in-out" delay="0.3s" prependId="false">
+    <hx:slide id="firstSlide">
+        <h:outputText value="SLIDE1" />
+        <a href="#" onclick="innerSlideView.left(); return false;">Previous</a>
+        <a href="#" onclick="innerSlideView.right();return false;">Next</a>
+        <a href="#" onclick="innerSlideView.goto(3);return false;">Third</a>
+    </hx:slide>
+    ...
+</hx:slideView>
+   ]]></sh:sh>
+
+    <h:outputStylesheet>
+        #innerSlideView{
+            background : none !important;
+            top : 80% !important;
+        }
+        #innerSlideView div.mf-slide{
+            text-align: center;
+        }
+    </h:outputStylesheet>
+
+    <hx:slideView id="innerSlideView" navigateOnArrowKeys="false" navigateOnMouseWheel="false" slideHeight="10"
+                slideWidth="60" slideLeft="20" inactiveSlideScale="0.85" widgetVar="innerSlideView"
+                duration="2s" timingFunction="ease-in-out" delay="0.3s" prependId="false">
+        <hx:slide id="firstSlide">
+            <h:outputText value="SLIDE1" />                                          <br/>
+            <a href="#" onclick="innerSlideView.right();return false;">Next</a>     <br/>
+            <a href="#" onclick="innerSlideView.goto(2);return false;">Go to Third</a>  <br/>
+            <a href="#" onclick="innerSlideView.goBySlideId('lastSlide');return false;">Last</a>   <br/>
+        </hx:slide>
+        <hx:slide>
+            <h:outputText value="SLIDE2" />                                          <br/>
+            <a href="#" onclick="innerSlideView.left(); return false;">Previous</a> <br/>
+            <a href="#" onclick="innerSlideView.right();return false;">Next</a>     <br/>
+        </hx:slide>
+        <hx:slide>
+            <h:outputText value="SLIDE3" />                                          <br/>
+            <a href="#" onclick="innerSlideView.left(); return false;">Previous</a> <br/>
+            <a href="#" onclick="innerSlideView.right();return false;">Next</a>     <br/>
+        </hx:slide>
+        <hx:slide id="lastSlide">
+            <h:outputText value="SLIDE4" />                                          <br/>
+            <a href="#" onclick="innerSlideView.left(); return false;">Previous</a> <br/>
+            <a href="#" onclick="innerSlideView.right(); return false;">Next (does nothing)</a> <br/>
+            <a href="#" onclick="innerSlideView.goBySlideId('firstSlide');return false;">First</a>
+        </hx:slide>
+    </hx:slideView>
+
+</ui:define>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/sections/slidesIndex.xhtml b/myfaces-html5-demo/src/main/webapp/sections/slidesIndex.xhtml
new file mode 100644
index 0000000..baf2635
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/slidesIndex.xhtml
@@ -0,0 +1,76 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:f="http://java.sun.com/jsf/core"
+                xmlns:h="http://java.sun.com/jsf/html"
+                xmlns:ui="http://java.sun.com/jsf/facelets"
+                xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+    <ui:define name="title">
+        Index
+    </ui:define>
+
+    <ui:define name="viewChangeLinks">
+        <common:viewChange singlePageName="multiPage" slideId="slidesIndex"/>
+    </ui:define>
+
+    <ui:define name="sectionContent">
+        <div style="padding-left:15%;">
+            <ul style="line-height:120%; list-style: upper-roman; font-size: 140%;" class="fontedHeader">
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('slideView');return false;">Slide View</a>
+                    <sup class="newFeature">New</sup>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('inputTypes');return false;">Input Types</a>
+                </li>
+                <li>
+                    <a href="#"
+                       onclick="slideView.goBySlideId('clientSideValidation01');return false;">Client Side Validation and Driving Properties with JSF Validators/Converters</a>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('effects01');return false;">Effects</a>
+                    <sup class="newFeature">New</sup>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('animations');return false;">Animations</a>
+                    <sup class="newFeature">New</sup>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('media01');return false;">Video and Audio</a>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('meterAndProgress');return false;">Meter and Progress</a>
+                    <sup class="newFeature">New</sup>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('datetime');return false;">Date-Time</a>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('suggestions');return false;">Suggestions</a>
+                </li>
+                <li>
+                    <a href="#" onclick="slideView.goBySlideId('dnd01');return false;">Drag and Drop</a>
+                </li>
+            </ul>
+        </div>
+    </ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/slidesInfo.xhtml b/myfaces-html5-demo/src/main/webapp/sections/slidesInfo.xhtml
new file mode 100644
index 0000000..cb07206
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/slidesInfo.xhtml
@@ -0,0 +1,38 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+     
+    <div class="middle infoSlide"> 
+       <h1>Apache Myfaces Html5 Component Library Demo</h1>
+       <h4>Click on the page and use [arrow keys] or [mouse wheel] to go next and previous.</h4>
+       <h5>Demo available online at : <a href="http://bit.ly/myfaces-html5-demo">http://bit.ly/myfaces-html5-demo</a></h5>
+
+       <ui:include src="/sections/generalInfo.xhtml" />
+    </div>
+
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/sections/suggestions.xhtml b/myfaces-html5-demo/src/main/webapp/sections/suggestions.xhtml
new file mode 100644
index 0000000..3745a1c
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/sections/suggestions.xhtml
@@ -0,0 +1,131 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/sections/sectionTemplate.xhtml"
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
+      xmlns:common="http://java.sun.com/jsf/composite/components/common">
+
+<ui:define name="title">
+    Suggestions
+</ui:define>
+
+<ui:define name="browserSupport">
+  <bs:browserSupport>
+      <f:facet name="opera">
+          Works best in Opera. However dynamic update of suggestions is not working _properly_ because of a bug of Opera!
+      </f:facet>
+  </bs:browserSupport>
+</ui:define>
+
+<ui:define name="viewChangeLinks">
+    <common:viewChange singlePageName="suggestions" slideId="suggestions" />
+</ui:define>
+
+<ui:define name="sectionContent">
+
+              <h:outputStylesheet id="suggestionsInputStyles">
+                  input.suggestionsInput{
+                    font-family : Verdana, Ariel, sans, monospace;
+                  }
+              </h:outputStylesheet>
+
+              <p class="sectionManual">
+                  In the third example, the suggestion provider is seperated, and partially rendered on input on the Html input.
+              </p>
+      
+              <h:form id="suggestionsForm">
+	            <h:panelGrid columns="4">
+	             
+	             <h:outputLabel for="it01" value="Static Suggestions(1)"/>
+	             <hx:inputText id="it01" value="#{suggestionsBean.movie01}" placeholder="Type a movie name" cols="25" styleClass="suggestionsInput">
+	                <f:selectItems value="#{suggestionsBean.staticSuggestionItems}" />
+	             </hx:inputText>
+	             <h:message for="it01" />
+	             <sh:sh><![CDATA[
+<hx:inputText ...>
+    <f:selectItems value="#_{suggestionsBean.staticSuggestionItems}" />
+</hx:inputText>
+	             ]]></sh:sh>
+	             
+	             <h:outputLabel for="it02" value="Static Suggestions(2)"/>
+	             <hx:inputText id="it02" value="#{suggestionsBean.movie02}" placeholder="Type a movie name" cols="25"
+	                suggestions="The Shawshank Redemption, The Godfather, The Godfather: Part II" styleClass="suggestionsInput"/>
+	             <h:message for="it02" />
+	             <sh:sh><![CDATA[
+<hx:inputText
+   suggestions="The Shawshank Redemption, The Godfather, ..."/>
+	             ]]></sh:sh>
+	             
+	             
+	             <h:outputLabel for="it03" value="Dynamic Suggestions"/>
+	             <h:panelGroup>
+	                 <hx:inputText id="it03" value="#{suggestionsBean.favoriteMovie}" placeholder="Type a movie name" cols="25" 
+	                     datalist="suggestionsForm:movieSuggestionsDataList" styleClass="suggestionsInput">
+	                     <f:ajax event="input" render="movieSuggestionsDataList" execute="@this"/>
+	                 </hx:inputText>
+	                 <hx:dataList id="movieSuggestionsDataList">
+	                     <f:selectItems value="#{suggestionsBean.dynamicSuggestionItems}" />
+	                 </hx:dataList>
+	             </h:panelGroup>
+	             <h:message for="it03" />
+	             <h:panelGroup>
+	                 <sh:sh><![CDATA[
+<hx:inputText value="#_{suggestionsBean.favoriteMovie}"
+   datalist="demoForm:movieSuggestionsDataList">
+    <f:ajax event="input" render="movieSuggestionsDataList"
+       execute="@this"/>
+</hx:inputText>
+<hx:dataList id="movieSuggestionsDataList">
+    <f:selectItems
+       value="#_{suggestionsBean.dynamicSuggestionItems}" />
+</hx:dataList>
+	                ]]></sh:sh>
+	                
+	                <sh:sh lang="java"><![CDATA[
+public List<SelectItem> getDynamicSuggestionItems(){
+    List<SelectItem> items = new ArrayList<SelectItem>();
+
+    for (String movie : movieNames){
+        if (movie.startsWith(this.favoriteMovie))
+            items.add(new SelectItem(movie, null));
+    }
+
+    return items;
+}
+...
+private static String[] movieNames = new String[]{
+        "The Shawshank Redemption", "The Godfather",
+        "The Godfather: Part II",
+        "The Good, the Bad and the Ugly", ...
+};
+	                ]]></sh:sh>
+	            </h:panelGroup>
+	                
+	           </h:panelGrid>                
+	        </h:form>
+
+</ui:define>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/singlePageTemplate.xhtml b/myfaces-html5-demo/src/main/webapp/singlePageTemplate.xhtml
new file mode 100644
index 0000000..19f0f60
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/singlePageTemplate.xhtml
@@ -0,0 +1,203 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core">
+      
+<h:head>
+	<ui:insert name="header">
+    </ui:insert>
+    <meta charset="utf-8" />
+    <title>Apache Myfaces Html5 Demo</title>
+	
+    <h:outputStylesheet library="script/google-code-prettify" name="prettify.css" />
+    <h:outputScript library="script/google-code-prettify" name="prettify.js" />
+
+    <h:outputScript library="script/demo" name="common.js" />
+
+    <h:outputStylesheet library="style" name="text.css" />
+    <h:outputStylesheet library="style" name="animation.css" />
+    <h:outputStylesheet library="style" name="box.css" />
+    <h:outputStylesheet library="style" name="common.css" />
+
+    <h:outputScript library="javax.faces" name="jsf.js" />
+
+    <style>
+    
+    #menu, #menu div div {
+       z-index: 1000;
+       -webkit-transition: all 0.5s ease-out; 
+       -moz-transition: all 0.5s ease-out;
+       -o-transition: all 0.5s ease-out;
+       
+       border-radius: 8px;
+       -moz-border-radius: 8px;
+      
+     }
+    .menu{
+        height: 25px;
+        width:835px;
+        overflow: hidden; 
+        text-align: center;
+        border : 1px solid darkGray;
+        padding-left:20px;
+        padding-right:20px;
+    }
+    .menuhover{
+        height: 185px;
+    }
+    
+    #menuPlaceHolder{
+        font-size:20px;
+        font-weight: bold;
+    }
+    
+    #menu div div{
+        float:left; 
+        font-size: 15px;
+        width: 80px;
+        height: 15px;
+        
+        border-radius: 8px;
+        -moz-border-radius: 8px;
+        
+        margin-left:3px;
+        
+        padding-top: 10%;
+        padding-bottom: 10%;
+        
+        box-shadow: rgba(204, 204, 204, 0.25) -3px 7px 9px;
+        -webkit-box-shadow: rgba(204, 204, 204, 0.25) -3px 7px 9px;
+        -moz-box-shadow: rgba(204, 204, 204, 0.25) -3px 7px 9px;
+        
+        background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(white));
+        background: -moz-linear-gradient(-90deg, #EEEEEE, white);
+        
+    }
+    #menu div div:hover{
+         box-shadow: rgba(204, 204, 204, 0.75) -3px 7px 9px;
+        -webkit-box-shadow: rgba(204, 204, 204, 0.75) -3px 7px 9px;
+        -moz-box-shadow: rgba(204, 204, 204, 0.75) -3px 7px 9px;
+        
+        background: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(white));
+        background: -moz-linear-gradient(-90deg, #CCCCCC, white);
+        
+        -webkit-transform: scale(1.3) rotate(5deg) translate(0,15px);
+        -moz-transform: scale(1.3) rotate(5deg) translate(0,15px); 
+    }
+    #menu div div a{
+        box-shadow: none;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        
+        border: none;
+        border-radius: none;
+        -moz-border-radius: none;
+        
+        background: none;
+        background: none;
+    }
+    </style>
+	
+	<style>
+	   .slide{
+         border-radius: 3px 3px !important;
+        -moz-border-radius: 3px 3px !important;
+        
+        border: 1px solid #999; 
+        padding: 3px 0px 5px 0px;
+        width: 98% !important;
+        
+         box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px;
+        -webkit-box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px;
+        -moz-box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px;
+        
+        background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(white));
+        background: -moz-linear-gradient(-90deg, #EEEEEE, white);
+        
+        box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+        -webkit-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+        -moz-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px;
+        
+        margin-top:20px;
+	   }
+	</style>
+</h:head>
+<h:body>
+
+    <table align="center">
+        <tr><td>
+			<div id="menu" class="fontedText menu" 
+			    onmouseover="className='fontedText menu menuhover';" 
+			    onmouseout="className='fontedText menu';">
+			    <div id="menuPlaceHolder" class="fontedHeader" >
+	                 Menu
+	            </div>
+				<div style="text-align:center; float: center; padding-right:3px; padding-top:10px; position: relative;">
+			        <div>
+                        <h:link outcome="slideView" value="Slide View Component"/>
+			        </div>
+                    <div>
+			           <h:link outcome="inputTypes" value="Input Types"/>
+			        </div>
+			        <div>
+		               <h:link outcome="clientSideValidation" value="Client Side Validation"/>
+		            </div>
+                    <div>
+                        <h:link outcome="effects" value="Effects"/>
+                    </div>
+                    <div>
+                        <h:link outcome="animations" value="Animations"/>
+                    </div>
+                    <div>
+		               <h:link outcome="media" value="Media"/>
+		            </div>
+                    <div>
+                        <h:link outcome="meterAndProgress" value="Meter Progress"/>
+                    </div>
+                    <div>
+		               <h:link outcome="datetime" value="Date-Time"/>
+		            </div>
+		            <div>
+		               <h:link outcome="suggestions" value="Suggestions"/>
+		            </div>
+		            <div>
+		               <h:link outcome="dnd" value="Drag and Drop"/>
+		            </div>
+			    </div>
+			</div>
+		</td></tr>
+	</table>
+
+    <div class="fontedText roundedBox gradientBox" style="padding: 20px; margin: 10px;" >
+        <ui:insert name="content" />
+    </div>
+    
+    <script type="text/javascript">
+        removeCDataAndTrim();
+        prettyPrint();
+	</script>
+	
+</h:body>
+</html>
diff --git a/myfaces-html5-demo/src/main/webapp/slideView.xhtml b/myfaces-html5-demo/src/main/webapp/slideView.xhtml
new file mode 100644
index 0000000..527afc6
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slideView.xhtml
@@ -0,0 +1,33 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+
+    <ui:define name="content">
+        <div class="slide">
+            <ui:include src="/sections/slideView.xhtml" />
+        </div>
+    </ui:define>        
+        
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides.xhtml b/myfaces-html5-demo/src/main/webapp/slides.xhtml
new file mode 100644
index 0000000..5f22366
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides.xhtml
@@ -0,0 +1,127 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html">
+	<h:head>
+
+        <h:outputStylesheet library="script/google-code-prettify" name="prettify.css" />
+        <h:outputScript library="script/google-code-prettify" name="prettify.js" />
+
+        <h:outputScript library="script/demo" name="common.js" />
+
+        <h:outputStylesheet library="style" name="text.css" />
+        <h:outputStylesheet library="style" name="animation.css" />
+        <h:outputStylesheet library="style" name="box.css" />
+        <h:outputStylesheet library="style" name="common.css" />
+
+        <h:outputScript library="javax.faces" name="jsf.js" />
+
+	    <meta charset="utf-8" />
+        <title>Apache Myfaces Html5 Component Library Demo</title>
+
+        <h:outputStylesheet>
+            div#parentSlideView{
+                margin-top : 0%;
+                padding-top : 1%;
+            }
+        </h:outputStylesheet>
+	  </h:head>
+    <h:body style="align:center;" class="nodecorate">
+        <hx:slideView id="parentSlideView" prependId="false"
+                      duration="0.5s" timingFunction="ease-in-out" widgetVar="slideView">
+            <hx:slide id="slidesInfo" prependId="false">
+                <ui:include src="/slides/slidesInfo.xhtml" />
+            </hx:slide>
+            <hx:slide id="slidesIndex" prependId="false">
+                <ui:include src="/slides/slidesIndex.xhtml" />
+            </hx:slide>
+            <hx:slide id="slideView" prependId="false">
+                <ui:include src="/slides/slideView.xhtml" />
+            </hx:slide>
+            <hx:slide id="inputTypes" prependId="false">
+                <ui:include src="/slides/inputTypes.xhtml" />
+            </hx:slide>
+            <hx:slide id="clientSideValidation01" prependId="false">
+                <ui:include src="/slides/clientSideValidation01.xhtml" />
+            </hx:slide>
+            <hx:slide id="clientSideValidation02" prependId="false">
+                <ui:include src="/slides/clientSideValidation02.xhtml" />
+            </hx:slide>
+            <hx:slide id="clientSideValidation03" prependId="false">
+                <ui:include src="/slides/clientSideValidation03.xhtml" />
+            </hx:slide>
+            <hx:slide id="effects01" prependId="false">
+                <ui:include src="/slides/effects01.xhtml" />
+            </hx:slide>
+            <hx:slide id="effects02" prependId="false">
+                <ui:include src="/slides/effects02.xhtml" />
+            </hx:slide>
+            <hx:slide id="animations" prependId="false">
+                <ui:include src="/slides/animations.xhtml" />
+            </hx:slide>
+            <hx:slide id="media01" prependId="false">
+                <ui:include src="/slides/media01.xhtml" />
+            </hx:slide>
+            <hx:slide id="media02" prependId="false">
+                <ui:include src="/slides/media02.xhtml" />
+            </hx:slide>
+            <hx:slide id="meterAndProgress" prependId="false">
+                <ui:include src="/slides/meterAndProgress.xhtml" />
+            </hx:slide>
+            <hx:slide id="datetime" prependId="false">
+                <ui:include src="/slides/datetime.xhtml" />
+            </hx:slide>
+            <hx:slide id="suggestions" prependId="false">
+                <ui:include src="/slides/suggestions.xhtml" />
+            </hx:slide>
+            <hx:slide id="dnd01" prependId="false">
+                <ui:include src="/slides/dnd01.xhtml" />
+            </hx:slide>
+            <hx:slide id="dnd02" prependId="false">
+                <ui:include src="/slides/dnd02.xhtml" />
+            </hx:slide>
+            <hx:slide id="dnd03" prependId="false">
+                <ui:include src="/slides/dnd03.xhtml" />
+            </hx:slide>
+            <hx:slide id="infoEnd" prependId="false">
+                <ui:include src="/slides/infoEnd.xhtml" />
+            </hx:slide>
+        </hx:slideView>
+
+    <script>
+        removeCDataAndTrim();
+        prettyPrint();
+        try {
+            if(parseInt(window.location.hash.split('#')[1])){
+                slideView.goto(parseInt(window.location.hash.split('#')[1]));
+            }
+            else{
+                if(window.location.hash.split('#')[1])
+                    slideView.goBySlideId(window.location.hash.split('#')[1]);
+            }
+        }catch (e) {
+        }
+    </script>
+  </h:body>
+</html>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/animations.xhtml b/myfaces-html5-demo/src/main/webapp/slides/animations.xhtml
new file mode 100644
index 0000000..ec61d8d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/animations.xhtml
@@ -0,0 +1,39 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/animations.xhtml" />
+          </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation01.xhtml b/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation01.xhtml
new file mode 100644
index 0000000..ea985ae
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation01.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+		      <ui:include src="/sections/clientSideValidation01.xhtml" />
+		  </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation02.xhtml b/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation02.xhtml
new file mode 100644
index 0000000..18b98e5
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation02.xhtml
@@ -0,0 +1,36 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/clientSideValidation02.xhtml" />        
+          </ui:define>
+          
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation03.xhtml b/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation03.xhtml
new file mode 100644
index 0000000..603bbcf
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/clientSideValidation03.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/clientSideValidation03.xhtml" />        
+          </ui:define>
+          
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/datetime.xhtml b/myfaces-html5-demo/src/main/webapp/slides/datetime.xhtml
new file mode 100644
index 0000000..d34369a
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/datetime.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/datetime.xhtml" />                
+          </ui:define>
+          
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/dnd01.xhtml b/myfaces-html5-demo/src/main/webapp/slides/dnd01.xhtml
new file mode 100644
index 0000000..c56e8eb
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/dnd01.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/dnd01.xhtml" />
+          </ui:define>
+
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/dnd02.xhtml b/myfaces-html5-demo/src/main/webapp/slides/dnd02.xhtml
new file mode 100644
index 0000000..f629af2
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/dnd02.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/dnd02.xhtml" />
+          </ui:define>
+          
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/dnd03.xhtml b/myfaces-html5-demo/src/main/webapp/slides/dnd03.xhtml
new file mode 100644
index 0000000..dfad12d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/dnd03.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/dnd03.xhtml" />
+          </ui:define>
+          
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/effects01.xhtml b/myfaces-html5-demo/src/main/webapp/slides/effects01.xhtml
new file mode 100644
index 0000000..1de2e70
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/effects01.xhtml
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/effects01.xhtml" />
+          </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides/effects02.xhtml b/myfaces-html5-demo/src/main/webapp/slides/effects02.xhtml
new file mode 100644
index 0000000..4978d43
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/effects02.xhtml
@@ -0,0 +1,36 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/effects02.xhtml" />
+          </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides/infoEnd.xhtml b/myfaces-html5-demo/src/main/webapp/slides/infoEnd.xhtml
new file mode 100644
index 0000000..f828e1f
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/infoEnd.xhtml
@@ -0,0 +1,36 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/infoEnd.xhtml" />
+          </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides/inputTypes.xhtml b/myfaces-html5-demo/src/main/webapp/slides/inputTypes.xhtml
new file mode 100644
index 0000000..33e511f
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/inputTypes.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/inputTypes.xhtml" />                
+          </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/media01.xhtml b/myfaces-html5-demo/src/main/webapp/slides/media01.xhtml
new file mode 100644
index 0000000..70501d5
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/media01.xhtml
@@ -0,0 +1,36 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/media01.xhtml" />
+          </ui:define>
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/media02.xhtml b/myfaces-html5-demo/src/main/webapp/slides/media02.xhtml
new file mode 100644
index 0000000..3bff2f8
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/media02.xhtml
@@ -0,0 +1,36 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/media02.xhtml" />
+          </ui:define>
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/meterAndProgress.xhtml b/myfaces-html5-demo/src/main/webapp/slides/meterAndProgress.xhtml
new file mode 100644
index 0000000..ca23fc3
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/meterAndProgress.xhtml
@@ -0,0 +1,39 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/meterAndProgress.xhtml" />
+          </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides/slideDecorator.xhtml b/myfaces-html5-demo/src/main/webapp/slides/slideDecorator.xhtml
new file mode 100644
index 0000000..74b14f0
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/slideDecorator.xhtml
@@ -0,0 +1,30 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+<ui:composition xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:f="http://java.sun.com/jsf/core"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core">
+            
+           <ui:insert name="content" />
+
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/slideView.xhtml b/myfaces-html5-demo/src/main/webapp/slides/slideView.xhtml
new file mode 100644
index 0000000..c4f8822
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/slideView.xhtml
@@ -0,0 +1,38 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/slideView.xhtml" />
+          </ui:define>
+      </ui:decorate>
+</ui:composition>
diff --git a/myfaces-html5-demo/src/main/webapp/slides/slidesIndex.xhtml b/myfaces-html5-demo/src/main/webapp/slides/slidesIndex.xhtml
new file mode 100644
index 0000000..c11e961
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/slidesIndex.xhtml
@@ -0,0 +1,34 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+	      <ui:define name="content">
+            <ui:include src="/sections/slidesIndex.xhtml" />
+	      </ui:define>
+      
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/slidesInfo.xhtml b/myfaces-html5-demo/src/main/webapp/slides/slidesInfo.xhtml
new file mode 100644
index 0000000..5c2101d
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/slidesInfo.xhtml
@@ -0,0 +1,35 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+     
+   <ui:decorate template="slideDecorator.xhtml">
+    <ui:define name="content">
+        <ui:include src="/sections/slidesInfo.xhtml" />
+    </ui:define>
+   </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/slides/suggestions.xhtml b/myfaces-html5-demo/src/main/webapp/slides/suggestions.xhtml
new file mode 100644
index 0000000..0ce998f
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/slides/suggestions.xhtml
@@ -0,0 +1,37 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition
+      xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:f="http://java.sun.com/jsf/core" 
+      xmlns:h="http://java.sun.com/jsf/html"
+      xmlns:ui="http://java.sun.com/jsf/facelets" 
+      xmlns:hx="http://myfaces.apache.org/html5/html"
+      xmlns:fx="http://myfaces.apache.org/html5/core"
+      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
+      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport">
+      
+      
+      <ui:decorate template="slideDecorator.xhtml">
+          <ui:define name="content">
+            <ui:include src="/sections/suggestions.xhtml" />
+          </ui:define>
+          
+      </ui:decorate>
+</ui:composition>
\ No newline at end of file
diff --git a/myfaces-html5-demo/src/main/webapp/suggestions.xhtml b/myfaces-html5-demo/src/main/webapp/suggestions.xhtml
new file mode 100644
index 0000000..7d0563f
--- /dev/null
+++ b/myfaces-html5-demo/src/main/webapp/suggestions.xhtml
@@ -0,0 +1,34 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<ui:composition template="/singlePageTemplate.xhtml"
+    xmlns:h="http://java.sun.com/jsf/html"
+    xmlns:f="http://java.sun.com/jsf/core"
+    xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:hx="http://myfaces.apache.org/html5/html"
+    xmlns:fx="http://myfaces.apache.org/html5/core"
+    xmlns:sh="http://java.sun.com/jsf/composite/components/sh">
+      
+    <ui:define name="content">
+        <div class="slide">
+            <ui:include src="/sections/suggestions.xhtml" />
+        </div>
+    </ui:define>        
+        
+</ui:composition>
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index 1c3685d..65d8e4b 100644
--- a/pom.xml
+++ b/pom.xml
@@ -1,20 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to you under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
--->
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
 <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/xsd/maven-4.0.0.xsd">
 
@@ -40,6 +43,7 @@
     <modules>
         <module>myfaces-html5-core</module>
         <module>myfaces-html5-examples</module>
+        <module>myfaces-html5-demo</module>
     </modules>
 
     <dependencies>
diff --git a/src/site/site.xml b/src/site/site.xml
index 330b262..69cdf14 100644
--- a/src/site/site.xml
+++ b/src/site/site.xml
@@ -1,20 +1,22 @@
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <!--
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
--->
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
 
 <!--
   - Note regarding relative and absolute urls: each pom file has an optional