Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

47 files changed, 2801 insertions, 682 deletions

diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml
index 1d60ac0..5cb471e 100644
--- a/examples/declarative/animation/animation.qml
+++ b/examples/declarative/animation/animation.qml
@@ -1,28 +1,51 @@
-<Rect width="400" height="200" color="white">
-    <Rect width="40" height="40" y="80" color="#FF0000" radius="10">
-
-        <x>
-            <!--
-            Animate the x property.  Setting repeat to true makes the
-            animation repeat indefinitely, otherwise it would only run once.
-            -->
-            <SequentialAnimation running="true" repeat="true">
-                <!-- Move from 0 to 360 in 500ms, using the easeInOutQuad easing function -->
-                <NumericAnimation from="0" to="360" easing="easeInOutQuad" duration="500"/>
-                <!-- Then pause for 200ms -->
-                <PauseAnimation duration="200"/>
-                <!-- Then move back to 0 in 2 seconds, using the easeInOutElastic easing function -->
-                <NumericAnimation from="360" to="0" easing="easeInOutElastic" duration="2000"/>
-            </SequentialAnimation>
-        </x>
-
-        <color>
-            <!-- Alternate color between red and green -->
-            <SequentialAnimation running="true" repeat="true">
-                <ColorAnimation from="#FF0000" to="#00FF00" duration="5000"/>
-                <ColorAnimation from="#00FF00" to="#FF0000" duration="5000"/>
-            </SequentialAnimation>
-        </color>
-
-    </Rect>
-</Rect>
+Rect {
+    width: 400
+    height: 200
+    color: "white"
+    Rect {
+        width: 40
+        height: 40
+        y: 80
+        color: "#FF0000"
+        radius: 10
+        // Animate the x property.  Setting repeat to true makes the
+        // animation repeat indefinitely, otherwise it would only run once.
+        x: SequentialAnimation {
+            running: true
+            repeat: true
+            // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function
+            NumericAnimation {
+                from: 0
+                to: 360
+                easing: "easeInOutQuad"
+                duration: 500
+            }
+            // Then pause for 200ms
+            PauseAnimation {
+                duration: 200
+            }
+            // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function
+            NumericAnimation {
+                from: 360
+                to: 0
+                easing: "easeInOutElastic"
+                duration: 2000
+            }
+        }
+        // Alternate color between red and green
+        color: SequentialAnimation {
+            running: true
+            repeat: true
+            ColorAnimation {
+                from: "#FF0000"
+                to: "#00FF00"
+                duration: 5000
+            }
+            ColorAnimation {
+                from: "#00FF00"
+                to: "#FF0000"
+                duration: 5000
+            }
+        }
+    }
+}
diff --git a/examples/declarative/behaviours/MyRect.qml b/examples/declarative/behaviours/MyRect.qml
index e40bd1b..dc9a094 100644
--- a/examples/declarative/behaviours/MyRect.qml
+++ b/examples/declarative/behaviours/MyRect.qml
@@ -1,4 +1,11 @@
-<Rect radius="15" pen.color="black" width="100" height="100" id="Page">
-    <MouseRegion anchors.fill="{parent}" onClicked="bluerect.parent = Page; bluerect.x=0" />
-</Rect>
-
+Rect {
+    radius: 15
+    pen.color: "black"
+    width: 100
+    height: 100
+    id: Page
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { bluerect.parent = Page; bluerect.x=0 }
+    }
+}
diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml
index a544028..bb7109e 100644
--- a/examples/declarative/behaviours/test.qml
+++ b/examples/declarative/behaviours/test.qml
@@ -1,37 +1,103 @@
-<Rect color="lightsteelblue" width="800" height="600" id="Page">
-    <MouseRegion anchors.fill="{parent}" onClicked="bluerect.parent = Page; bluerect.x = mouseX;" />
-
-    <MyRect color="green" x="200" y="200" />
-    <MyRect color="red" x="400" y="200" />
-    <MyRect color="yellow" x="400" y="400" />
-    <MyRect color="orange" x="400" y="500" />
-    <MyRect color="pink" x="400" y="0" />
-    <MyRect color="lightsteelblue" x="100" y="500" />
-    <MyRect color="black" x="0" y="200" />
-    <MyRect color="white" x="400" y="0" />
-
-    <Rect color="blue" x="0" y="0" width="100" height="100" id="bluerect">
-        <x>
-            <Behaviour>
-                <SequentialAnimation>
-                    <NumericAnimation target="{bluerect}" properties="y" from="0" to="10" easing="easeOutBounce(amplitude:30)" duration="250" />
-                    <NumericAnimation target="{bluerect}" properties="y" from="10" to="0" easing="easeOutBounce(amplitude:30)" duration="250" />
-                </SequentialAnimation>
-                <NumericAnimation target="{bluerect}" property="x" duration="500" />
-            </Behaviour>
-        </x>
-
-        <parent>
-            <Behaviour>
-                <SequentialAnimation>
-                    <NumericAnimation target="{bluerect}" properties="opacity" to="0" duration="150" />
-                    <SetPropertyAction target="{bluerect}" property="parent" />
-                    <NumericAnimation target="{bluerect}" properties="opacity" to="1" duration="150"/>
-                </SequentialAnimation>
-            </Behaviour>
-        </parent>
-        
-    </Rect>
-
-
-</Rect>
+Rect {
+    color: "lightsteelblue"
+    width: 800
+    height: 600
+    id: Page
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { bluerect.parent = Page; bluerect.x = mouseX; }
+    }
+    MyRect {
+        color: "green"
+        x: 200
+        y: 200
+    }
+    MyRect {
+        color: "red"
+        x: 400
+        y: 200
+    }
+    MyRect {
+        color: "yellow"
+        x: 400
+        y: 400
+    }
+    MyRect {
+        color: "orange"
+        x: 400
+        y: 500
+    }
+    MyRect {
+        color: "pink"
+        x: 400
+        y: 0
+    }
+    MyRect {
+        color: "lightsteelblue"
+        x: 100
+        y: 500
+    }
+    MyRect {
+        color: "black"
+        x: 0
+        y: 200
+    }
+    MyRect {
+        color: "white"
+        x: 400
+        y: 0
+    }
+    Rect {
+        color: "blue"
+        x: 0
+        y: 0
+        width: 100
+        height: 100
+        id: bluerect
+        x: Behaviour {
+            SequentialAnimation {
+                NumericAnimation {
+                    target: bluerect
+                    properties: "y"
+                    from: 0
+                    to: 10
+                    easing: "easeOutBounce(amplitude:30)"
+                    duration: 250
+                }
+                NumericAnimation {
+                    target: bluerect
+                    properties: "y"
+                    from: 10
+                    to: 0
+                    easing: "easeOutBounce(amplitude:30)"
+                    duration: 250
+                }
+            }
+            NumericAnimation {
+                target: bluerect
+                property: "x"
+                duration: 500
+            }
+        }
+        parent: Behaviour {
+            SequentialAnimation {
+                NumericAnimation {
+                    target: bluerect
+                    properties: "opacity"
+                    to: 0
+                    duration: 150
+                }
+                SetPropertyAction {
+                    target: bluerect
+                    property: "parent"
+                }
+                NumericAnimation {
+                    target: bluerect
+                    properties: "opacity"
+                    to: 1
+                    duration: 150
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml
index 45c0e99..e66875a 100644
--- a/examples/declarative/connections/connections.qml
+++ b/examples/declarative/connections/connections.qml
@@ -1,9 +1,29 @@
-<Rect id="rect" color="blue" width="40" height="30">
-    <Rect id="dot" color="red" width="3" height="3" x="{rect.width/2}" y="{rect.height/2}"/>
-    <MouseRegion id="mr" anchors.fill="{rect}"/>
-    <Connection sender="{mr}" signal="clicked(mouse)">
-        color="green";
-        dot.x = mouse.x-1;
-        dot.y = mouse.y-1;
-    </Connection>
-</Rect>
+Rect {
+    id: rect
+    color: "blue"
+    width: 40
+    height: 30
+    Rect {
+        id: dot
+        color: "red"
+        width: 3
+        height: 3
+        x: rect.width/2
+        y: rect.height/2
+    }
+    MouseRegion {
+        id: mr
+        anchors.fill: rect
+    }
+    Connection {
+        sender: mr
+        signal: "clicked(mouse)"
+        script: { 
+        
+                color="green";
+                dot.x = mouse.x-1;
+                dot.y = mouse.y-1;
+            
+        }
+    }
+}
diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml
index d4647f9..fa50010 100644
--- a/examples/declarative/contacts/contacts.qml
+++ b/examples/declarative/contacts/contacts.qml
@@ -1,44 +1,121 @@
-<Rect id="page" width="320" height="480" color="white">
-    <resources>
-        <Component id="contactDelegate">
-            <Rect id="wrapper" x="20" width="{List.width-40}" color="#FEFFEE" pen.color="#FFBE4F" radius="5">
-                <filter><Shadow xOffset="5" yOffset="5" /></filter>
-                <MouseRegion id="pageMouse" anchors.fill="{parent}" onClicked="if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';}"/> 
-                <Image id="portraitPic" src="{portrait}" x="10" y="10" />
-                <Text id="name" text="{firstName + ' ' + lastName}" anchors.left="{portraitPic.right}" anchors.leftMargin="10"
-                      anchors.top="{portraitPic.top}" anchors.right="{wrapper.right}" anchors.rightMargin="10"
-                      font.family="Comic Sans MS" font.bold="true" font.size="11"/>
-                <VerticalLayout id="email_layout" anchors.left="{name.left}" anchors.top="{name.bottom}" anchors.topMargin="10">
-                    <Repeater id="email_list" dataSource="{emails}" >
-                        <Component>
-                            <Text text="{modelData}" height="18" font.italic="true" color="midnightblue" />
-                        </Component>
-                    </Repeater>
-                </VerticalLayout>
-                <height>{Math.max(email_layout.height + name.height + 25, portraitPic.height+20)}</height>
-
-                <states>
-                    <State name="Details">
-                        <SetProperty target="{wrapper}" property="color" value="white" />
-                        <SetProperty target="{wrapper}" property="x" value="0" />
-                        <SetProperty target="{wrapper}" property="height" value="{List.height}" />
-                        <SetProperty target="{wrapper}" property="width" value="{List.width}" />
-                        <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/>
-                        <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition>
-                        <ParallelAnimation>
-                            <ColorAnimation duration="500" />
-                            <NumericAnimation duration="150" properties="x,yPosition,height,width"/>
-                        </ParallelAnimation>
-                    </Transition>
-                </transitions>
-            </Rect>
-        </Component>
-    </resources>
-
-    <ListView id="List" model="{contactModel}" width="320" height="480" clip="true" delegate="{contactDelegate}"/>
-</Rect>
+Rect {
+    id: page
+    width: 320
+    height: 480
+    color: "white"
+    resources: [
+        Component {
+            id: contactDelegate
+            Rect {
+                id: wrapper
+                x: 20
+                width: List.width-40
+                color: "#FEFFEE"
+                pen.color: "#FFBE4F"
+                radius: 5
+                filter: Shadow {
+                    xOffset: 5
+                    yOffset: 5
+                }
+                MouseRegion {
+                    id: pageMouse
+                    anchors.fill: parent
+                    onClicked: { if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';} }
+                }
+                Image {
+                    id: portraitPic
+                    src: portrait
+                    x: 10
+                    y: 10
+                }
+                Text {
+                    id: name
+                    text: firstName + ' ' + lastName
+                    anchors.left: portraitPic.right
+                    anchors.leftMargin: 10
+                    anchors.top: portraitPic.top
+                    anchors.right: wrapper.right
+                    anchors.rightMargin: 10
+                    font.family: "Comic Sans MS"
+                    font.bold: true
+                    font.size: 11
+                }
+                VerticalLayout {
+                    id: email_layout
+                    anchors.left: name.left
+                    anchors.top: name.bottom
+                    anchors.topMargin: 10
+                    Repeater {
+                        id: email_list
+                        dataSource: emails
+                        Component {
+                            Text {
+                                text: modelData
+                                height: 18
+                                font.italic: true
+                                color: "midnightblue"
+                            }
+                        }
+                    }
+                }
+                height: Math.max(email_layout.height + name.height + 25, portraitPic.height+20)
+                states: [
+                    State {
+                        name: "Details"
+                        SetProperty {
+                            target: wrapper
+                            property: "color"
+                            value: "white"
+                        }
+                        SetProperty {
+                            target: wrapper
+                            property: "x"
+                            value: 0
+                        }
+                        SetProperty {
+                            target: wrapper
+                            property: "height"
+                            value: List.height
+                        }
+                        SetProperty {
+                            target: wrapper
+                            property: "width"
+                            value: List.width
+                        }
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "yPosition"
+                            value: wrapper.y
+                        }
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "locked"
+                            value: 1
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        ParallelAnimation {
+                            ColorAnimation {
+                                duration: 500
+                            }
+                            NumericAnimation {
+                                duration: 150
+                                properties: "x,yPosition,height,width"
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+    ListView {
+        id: List
+        model: contactModel
+        width: 320
+        height: 480
+        clip: true
+        delegate: contactDelegate
+    }
+}
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index e2a11b1..8336a70 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -1,12 +1,42 @@
-<Item width="210" height="210">
-    <properties><Property name="value" type="real" value="0"/></properties>
-    <Image id="Background" src="background.svg"/>
-    <Item x="104" y="102" rotation="{Needle.rotation}">
-        <Image src="needle_shadow.svg" x="-104" y="-102"/>
-    </Item>
-    <Item id="Needle" x="102" y="98" rotation="-130">
-        <rotation><Follow spring="1.4" damping=".15" source="{Math.min(Math.max(-130, value*2.2 - 130), 133)}"/></rotation>
-        <Image src="needle.svg" x="-102" y="-98"/>
-    </Item>
-    <Image src="overlay.svg"/>
-</Item>
+Item {
+    width: 210
+    height: 210
+    properties: Property {
+        name: "value"
+        type: "real"
+        value: 0
+    }
+    Image {
+        id: Background
+        src: "background.svg"
+    }
+    Item {
+        x: 104
+        y: 102
+        rotation: Needle.rotation
+        Image {
+            src: "needle_shadow.svg"
+            x: -104
+            y: -102
+        }
+    }
+    Item {
+        id: Needle
+        x: 102
+        y: 98
+        rotation: -130
+        rotation: Follow {
+            spring: 1.4
+            damping: .15
+            source: Math.min(Math.max(-130, value*2.2 - 130), 133)
+        }
+        Image {
+            src: "needle.svg"
+            x: -102
+            y: -98
+        }
+    }
+    Image {
+        src: "overlay.svg"
+    }
+}
diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml
index bda9b41..fa11d79 100644
--- a/examples/declarative/dial/dial.qml
+++ b/examples/declarative/dial/dial.qml
@@ -1,14 +1,38 @@
-<?qtfx namespacepath:=DialLibrary ?>
-<Rect color="white" width="210" height="240">
-    <!-- Dial with a slider to adjust it -->
-    <Dial id="Dial" value="{Slider.x-2}"/>
-    <Rect anchors.top="{Dial.bottom}" x="20" width="160" height="16" color="steelblue" gradientColor="lightsteelblue" radius="8" opacity="0.7">
-        <Rect id="Slider" x="2" y="2" width="30" height="12" color="lightgray" gradientColor="gray" radius="6">
-            <MouseRegion anchors.fill="{parent}"
-                         drag.target="{parent}"
-                         drag.axis="x"
-                         drag.xmin="2"
-                         drag.xmax="128"/>
-        </Rect>
-    </Rect>
-</Rect>
+import "DialLibrary"
+Rect {
+    color: "white"
+    width: 210
+    height: 240
+    // Dial with a slider to adjust it
+    Dial {
+        id: Dial
+        value: Slider.x-2
+    }
+    Rect {
+        anchors.top: Dial.bottom
+        x: 20
+        width: 160
+        height: 16
+        color: "steelblue"
+        gradientColor: "lightsteelblue"
+        radius: 8
+        opacity: 0.7
+        Rect {
+            id: Slider
+            x: 2
+            y: 2
+            width: 30
+            height: 12
+            color: "lightgray"
+            gradientColor: "gray"
+            radius: 6
+            MouseRegion {
+                anchors.fill: parent
+                drag.target: parent
+                drag.axis: "x"
+                drag.xmin: 2
+                drag.xmax: 128
+            }
+        }
+    }
+}
diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml
index 0f3e772..598d953 100644
--- a/examples/declarative/follow/follow.qml
+++ b/examples/declarative/follow/follow.qml
@@ -1,35 +1,78 @@
-<Rect width="320" height="240" color="#ffffff">
-    <Rect id="Rect" y="{200}" color="#00ff00" width="60" height="20">
-        <y>
-            <SequentialAnimation running="true" repeat="true">
-            <NumericAnimation to="{200}" easing="easeOutBounce(amplitude:180)" duration="2000" />
-            <PauseAnimation duration="1000" />
-            </SequentialAnimation>
-        </y>
-    </Rect>
-    <!-- Velocity -->
-    <Rect x="{Rect.width}" color="#ff0000" width="{Rect.width}" height="20">
-        <y>
-            <Follow source="{Rect.y}" velocity="200"/>
-        </y>
-    </Rect>
-    <Text x="{Rect.width}" y="220" text="Velocity"/>
-    <!-- Spring -->
-    <Rect x="{Rect.width * 2}" color="#ff0000" width="{Rect.width}" height="20">
-        <y>
-            <Follow source="{Rect.y}" spring="1.2" damping="0.1"/>
-        </y>
-    </Rect>
-    <Text x="{Rect.width * 2}" y="220" text="Spring"/>
-    <!-- Follow mouse -->
-    <MouseRegion id="Mouse" anchors.fill="{parent}">
-        <Rect width="20" height="20" radius="10" color="#0000ff">
-            <x>
-                <Follow source="{Mouse.mouseX-10}" spring="1.0" damping="0.05"/>
-            </x>
-            <y>
-                <Follow source="{Mouse.mouseY-10}" spring="1.0" damping="0.05"/>
-            </y>
-        </Rect>
-    </MouseRegion>
-</Rect>
+Rect {
+    width: 320
+    height: 240
+    color: "#ffffff"
+    Rect {
+        id: Rect
+        y: 200
+        color: "#00ff00"
+        width: 60
+        height: 20
+        y: SequentialAnimation {
+            running: true
+            repeat: true
+            NumericAnimation {
+                to: 200
+                easing: "easeOutBounce(amplitude:180)"
+                duration: 2000
+            }
+            PauseAnimation {
+                duration: 1000
+            }
+        }
+    }
+    // Velocity
+    Rect {
+        x: Rect.width
+        color: "#ff0000"
+        width: Rect.width
+        height: 20
+        y: Follow {
+            source: Rect.y
+            velocity: 200
+        }
+    }
+    Text {
+        x: Rect.width
+        y: 220
+        text: "Velocity"
+    }
+    // Spring
+    Rect {
+        x: Rect.width * 2
+        color: "#ff0000"
+        width: Rect.width
+        height: 20
+        y: Follow {
+            source: Rect.y
+            spring: 1.2
+            damping: 0.1
+        }
+    }
+    Text {
+        x: Rect.width * 2
+        y: 220
+        text: "Spring"
+    }
+    // Follow mouse
+    MouseRegion {
+        id: Mouse
+        anchors.fill: parent
+        Rect {
+            width: 20
+            height: 20
+            radius: 10
+            color: "#0000ff"
+            x: Follow {
+                source: Mouse.mouseX-10
+                spring: 1.0
+                damping: 0.05
+            }
+            y: Follow {
+                source: Mouse.mouseY-10
+                spring: 1.0
+                damping: 0.05
+            }
+        }
+    }
+}
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 5ce7acb..cbadb72 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,56 +1,77 @@
-<Rect width="400" height="300" color="white">
-
-    <!--
-    MyPets model is defined in dummydata/MyPetsModel.qml
-    The viewer automatically loads files in dummydata/* to assist
-    development without a real data source.
-    This one contains my pets.
-    -->
-
-    <!--
-    Define a delegate component.  A component will be
-    instantiated for each visible item in the list.
-    -->
-    <Component id="PetDelegate">
-        <Item id="Wrapper" width="200" height="50">
-            <VerticalLayout>
-                <Text text="{'Name: ' + name}"/>
-                <Text text="{'Type: ' + type}"/>
-                <Text text="{'Age: ' + age}"/>
-            </VerticalLayout>
-
-            <!--
-            Use the ListView.isCurrentItem attached property to
-            indent the item if it is the current item.
-            -->
-            <states>
-                <State name="Current" when="{Wrapper.ListView.isCurrentItem}">
-                    <SetProperty target="{Wrapper}" property="x" value="10"/>
-                </State>
-            </states>
-            <transitions>
-                <Transition>
-                    <NumericAnimation properties="x" duration="200" />
-                </Transition>
-            </transitions>
-        </Item>
-    </Component>
-
-    <!--
-    Specify a highlight with custom movement.  Note that autoHighlight
-    is set to false in the ListView so that we can control how the
-    highlight moves to the current item.
-    -->
-    <Component id="PetHighlight">
-        <Rect width="200" height="50" color="#FFFF88">
-            <y>
-                <Follow source="{List1.current.y}" spring="3" damping="0.1"/>
-            </y>
-        </Rect>
-    </Component>
-
-    <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}"
-              delegate="{PetDelegate}" highlight="{PetHighlight}" autoHighlight="false"
-              focus="true"/>
-
-</Rect>
+Rect {
+    width: 400
+    height: 300
+    color: "white"
+    // MyPets model is defined in dummydata/MyPetsModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+    // This one contains my pets.
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            height: 50
+            VerticalLayout {
+                Text {
+                    text: 'Name: ' + name
+                }
+                Text {
+                    text: 'Type: ' + type
+                }
+                Text {
+                    text: 'Age: ' + age
+                }
+            }
+            // Use the ListView.isCurrentItem attached property to
+            // indent the item if it is the current item.
+            states: [
+                State {
+                    name: "Current"
+                    when: Wrapper.ListView.isCurrentItem
+                    SetProperty {
+                        target: Wrapper
+                        property: "x"
+                        value: 10
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    NumericAnimation {
+                        properties: "x"
+                        duration: 200
+                    }
+                }
+            ]
+        }
+    }
+    // Specify a highlight with custom movement.  Note that autoHighlight
+    // is set to false in the ListView so that we can control how the
+    // highlight moves to the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            width: 200
+            height: 50
+            color: "#FFFF88"
+            y: Follow {
+                source: List1.current.y
+                spring: 3
+                damping: 0.1
+            }
+        }
+    }
+    ListView {
+        id: List1
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        autoHighlight: false
+        focus: true
+    }
+}
diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml
index 6cacdd1..b71ed4e 100644
--- a/examples/declarative/listview/listview.qml
+++ b/examples/declarative/listview/listview.qml
@@ -1,81 +1,103 @@
-<Rect width="600" height="300" color="white">
-
-    <!--
-    MyPets model is defined in dummydata/MyPetsModel.qml
-    The viewer automatically loads files in dummydata/* to assist
-    development without a real data source.
-    This one contains my pets.
-    -->
-
-    <!--
-    Define a delegate component.  A component will be
-    instantiated for each visible item in the list.
-    -->
-    <Component id="PetDelegate">
-        <Item id="Wrapper" width="200" height="50">
-            <VerticalLayout>
-                <Text text="{'Name: ' + name}"/>
-                <Text text="{'Type: ' + type}"/>
-                <Text text="{'Age: ' + age}"/>
-            </VerticalLayout>
-        </Item>
-    </Component>
-
-    <!--
-    Define a highlight component.  Just one of these will be instantiated
-    by each ListView and placed behind the current item.
-    -->
-    <Component id="PetHighlight">
-        <Rect color="#FFFF88"/>
-    </Component>
-
-    <!--
-    Show the model in three lists, with different currentItemPositioning.
-    currentItemPositioning determines how the list behaves when the
-    current item changes.  Note that the second and third ListView
-    set their currentIndex to be the same as the first, and that
-    the first ListView is given keyboard focus.
-
-    The default mode, Free, allows the currentItem to move freely
-    within the visible area.  If it would move outside the visible
-    area, the view is scrolled to keep it visible.
-
-    Snap currentItemPositioning attempts to keep the current item
-    aligned with the snapPosition by scrolling the view, however the
-    items will not scroll beyond the beginning or end of the view.
-
-    SnapAuto currentItemPositioning always keeps the current item on
-    the snapPosition by scrolling the view.  It also automatically
-    sets the current item as is scrolled with the mouse.  Note
-    that the first ListView sets its currentIndex to be equal to
-    the third ListView's currentIndex.  By flicking List3 with
-    the mouse, the current index of List1 will be changed.
-    -->
-
-    <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}"
-              delegate="{PetDelegate}" highlight="{PetHighlight}"
-              currentIndex="{List3.currentIndex}" focus="true"/>
-
-    <ListView id="List2" x="200" width="200" height="{parent.height}" model="{MyPetsModel}"
-              delegate="{PetDelegate}" highlight="{PetHighlight}"
-              currentItemPositioning="Snap" snapPosition="125"
-              currentIndex="{List1.currentIndex}"/>
-
-    <ListView id="List3" x="400" width="200" height="{parent.height}" model="{MyPetsModel}"
-              delegate="{PetDelegate}"
-              currentItemPositioning="SnapAuto" snapPosition="125"
-              currentIndex="{List1.currentIndex}">
-        <children>
-            <!--
-            Position a static highlight rather than a normal highlight so that
-            when the view is flicked, the highlight does not move.
-            By positioning the highlight at the same position as the snapPosition
-            the item under the highlight will always be the current item.
-            Note that we specify the 'children' property.  This is because
-            the default property of a ListView is 'delegate'.
-            -->
-            <Rect y="125" width="200" height="50" color="#FFFF88" z="-1"/>
-        </children>
-    </ListView>
-
-</Rect>
+Rect {
+    width: 600
+    height: 300
+    color: "white"
+    // MyPets model is defined in dummydata/MyPetsModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+    // This one contains my pets.
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            height: 50
+            VerticalLayout {
+                Text {
+                    text: 'Name: ' + name
+                }
+                Text {
+                    text: 'Type: ' + type
+                }
+                Text {
+                    text: 'Age: ' + age
+                }
+            }
+        }
+    }
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            color: "#FFFF88"
+        }
+    }
+    // Show the model in three lists, with different currentItemPositioning.
+    // currentItemPositioning determines how the list behaves when the
+    // current item changes.  Note that the second and third ListView
+    // set their currentIndex to be the same as the first, and that
+    // the first ListView is given keyboard focus.
+    // The default mode, Free, allows the currentItem to move freely
+    // within the visible area.  If it would move outside the visible
+    // area, the view is scrolled to keep it visible.
+    // Snap currentItemPositioning attempts to keep the current item
+    // aligned with the snapPosition by scrolling the view, however the
+    // items will not scroll beyond the beginning or end of the view.
+    // SnapAuto currentItemPositioning always keeps the current item on
+    // the snapPosition by scrolling the view.  It also automatically
+    // sets the current item as is scrolled with the mouse.  Note
+    // that the first ListView sets its currentIndex to be equal to
+    // the third ListView's currentIndex.  By flicking List3 with
+    // the mouse, the current index of List1 will be changed.
+    ListView {
+        id: List1
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        currentIndex: List3.currentIndex
+        focus: true
+    }
+    ListView {
+        id: List2
+        x: 200
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        currentItemPositioning: "Snap"
+        snapPosition: 125
+        currentIndex: List1.currentIndex
+    }
+    ListView {
+        id: List3
+        x: 400
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        currentItemPositioning: "SnapAuto"
+        snapPosition: 125
+        currentIndex: List1.currentIndex
+        children: [
+            // Position a static highlight rather than a normal highlight so that
+            // when the view is flicked, the highlight does not move.
+            // By positioning the highlight at the same position as the snapPosition
+            // the item under the highlight will always be the current item.
+            // Note that we specify the 'children' property.  This is because
+            // the default property of a ListView is 'delegate'.
+            Rect {
+                y: 125
+                width: 200
+                height: 50
+                color: "#FFFF88"
+                z: -1
+            }
+        ]
+    }
+}
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 6826b78..0f6324f 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -1,85 +1,204 @@
-<!-- This example illustrates expanding a list item to show a more detailed view -->
-<?qtfx namespacepath:=content ?>
-<Rect id="page" width="400" height="240" color="black">
-    <resources>
-        <!--
-        Delegate for the recipes.  This delegate has two modes:
-        1. the list mode (default), which just shows the picture and title of the recipe.
-        2. the details mode, which also shows the ingredients and method.
-        -->
-        <Component id="recipeDelegate">
-            <Item id="wrapper" width="{List.width}">
-                <!--
-                Create a property to contain the visibility of the details.
-                We can bind multiple element's opacity to this one property,
-                rather than having a "SetProperty" line for each element we
-                want to fade.
-                -->
-                <properties><Property name="detailsOpacity" value="0" type="real"/></properties>
-                <!-- A simple rounded rectangle for the background -->
-                <Rect id="background" x="1" y="2" width="{parent.width-2}" height="{parent.height-4}" color="#FEFFEE" pen.color="#FFBE4F" radius="5"/>
-                <!--
-                This mouse region covers the entire delegate.
-                When clicked it changes mode to 'Details'.  If we are already
-                in Details mode, then no change will happen.
-                -->
-                <MouseRegion id="pageMouse" anchors.fill="{parent}" onClicked="wrapper.state = 'Details'"/> 
-                <!--
-                Layout the page.  Picture, title and ingredients at the top, method at the
-                bottom.  Note that elements that should not be visible in the list
-                mode have their opacity set to wrapper.detailsOpacity.
-                -->
-                <HorizontalLayout id="topLayout" x="10" y="10" spacing="10" height="{recipePic.height}" width="{parent.width}">
-                    <Image id="recipePic" src="{picture}" width="48" height="48"/>
-                    <VerticalLayout height="{recipePic.height}" spacing="5" width="{background.width-recipePic.width-20}">
-                        <Text id="name" text="{title}" font.bold="true" font.size="16"/>
-                        <Text opacity="{wrapper.detailsOpacity}" text="Ingredients" font.size="12" font.bold="true"/>
-                        <Text opacity="{wrapper.detailsOpacity}" text="{ingredients}" wrap="true" width="{parent.width}"/>
-                    </VerticalLayout>
-                </HorizontalLayout>
-                <Item id="details" x="10" width="{parent.width-20}" anchors.top="{topLayout.bottom}" anchors.topMargin="10"
-                            anchors.bottom="{parent.bottom}" anchors.bottomMargin="10" opacity="{wrapper.detailsOpacity}">
-                    <Text id="methodTitle" text="Method" font.size="12" font.bold="true" anchors.top="{parent.top}"/>
-                    <Flickable id="flick" anchors.top="{methodTitle.bottom}" anchors.bottom="{parent.bottom}" width="{parent.width}" viewportHeight="{methodText.height}" clip="true">
-                        <Text id="methodText" text="{method}" wrap="true" width="{details.width}"/>
-                    </Flickable>
-                    <Image anchors.right="{flick.right}" anchors.top="{flick.top}" src="content/pics/moreUp.png" opacity="{flick.atYBeginning ? 0 : 1}"/>
-                    <Image anchors.right="{flick.right}" anchors.bottom="{flick.bottom}" src="content/pics/moreDown.png" opacity="{flick.atYEnd ? 0 : 1}"/>
-                </Item>
-                <!-- A button to close the detailed view, i.e. set the state back to default (''). -->
-                <MediaButton anchors.right="{background.right}" anchors.rightMargin="5" y="10" opacity="{wrapper.detailsOpacity}" text="Close" onClicked="wrapper.state = ''"/>
-                <!-- Make the default height equal the hight of the picture, plus margin. -->
-                <height>68</height>
-
-                <states>
-                    <State name="Details">
-                        <SetProperty target="{background}" property="color" value="white" />
-                        <!-- Make the picture bigger -->
-                        <SetProperties target="{recipePic}" width="128" height="128" />
-                        <!-- Make details visible -->
-                        <SetProperties target="{wrapper}" detailsOpacity="1" x="0"/>
-                        <!-- Make the detailed view fill the entire list area -->
-                        <SetProperty target="{wrapper}" property="height" value="{List.height}"/>
-                        <!-- Move the list so that this item is at the top. -->
-                        <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/>
-                        <!-- Disallow flicking while we're in detailed view -->
-                        <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition>
-                        <!-- Make the state changes smooth -->
-                        <ParallelAnimation>
-                            <ColorAnimation duration="500" />
-                            <NumericAnimation duration="300" properties="detailsOpacity,x,yPosition,height,width"/>
-                        </ParallelAnimation>
-                    </Transition>
-                </transitions>
-            </Item>
-        </Component>
-    </resources>
-
-    <!-- The actual list -->
-    <ListView id="List" model="{Recipies}" anchors.fill="{parent}" clip="true" delegate="{recipeDelegate}"/>
-</Rect>
+import "content"
+// This example illustrates expanding a list item to show a more detailed view
+Rect {
+    id: page
+    width: 400
+    height: 240
+    color: "black"
+    resources: [
+        // Delegate for the recipes.  This delegate has two modes:
+        // 1. the list mode (default), which just shows the picture and title of the recipe.
+        // 2. the details mode, which also shows the ingredients and method.
+        Component {
+            id: recipeDelegate
+            Item {
+                id: wrapper
+                width: List.width
+                // Create a property to contain the visibility of the details.
+                // We can bind multiple element's opacity to this one property,
+                // rather than having a "SetProperty" line for each element we
+                // want to fade.
+                properties: Property {
+                    name: "detailsOpacity"
+                    value: 0
+                    type: "real"
+                }
+                // A simple rounded rectangle for the background
+                Rect {
+                    id: background
+                    x: 1
+                    y: 2
+                    width: parent.width-2
+                    height: parent.height-4
+                    color: "#FEFFEE"
+                    pen.color: "#FFBE4F"
+                    radius: 5
+                }
+                // This mouse region covers the entire delegate.
+                // When clicked it changes mode to 'Details'.  If we are already
+                // in Details mode, then no change will happen.
+                MouseRegion {
+                    id: pageMouse
+                    anchors.fill: parent
+                    onClicked: { wrapper.state = 'Details' }
+                }
+                // Layout the page.  Picture, title and ingredients at the top, method at the
+                // bottom.  Note that elements that should not be visible in the list
+                // mode have their opacity set to wrapper.detailsOpacity.
+                HorizontalLayout {
+                    id: topLayout
+                    x: 10
+                    y: 10
+                    spacing: 10
+                    height: recipePic.height
+                    width: parent.width
+                    Image {
+                        id: recipePic
+                        src: picture
+                        width: 48
+                        height: 48
+                    }
+                    VerticalLayout {
+                        height: recipePic.height
+                        spacing: 5
+                        width: background.width-recipePic.width-20
+                        Text {
+                            id: name
+                            text: title
+                            font.bold: true
+                            font.size: 16
+                        }
+                        Text {
+                            opacity: wrapper.detailsOpacity
+                            text: "Ingredients"
+                            font.size: 12
+                            font.bold: true
+                        }
+                        Text {
+                            opacity: wrapper.detailsOpacity
+                            text: ingredients
+                            wrap: true
+                            width: parent.width
+                        }
+                    }
+                }
+                Item {
+                    id: details
+                    x: 10
+                    width: parent.width-20
+                    anchors.top: topLayout.bottom
+                    anchors.topMargin: 10
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 10
+                    opacity: wrapper.detailsOpacity
+                    Text {
+                        id: methodTitle
+                        text: "Method"
+                        font.size: 12
+                        font.bold: true
+                        anchors.top: parent.top
+                    }
+                    Flickable {
+                        id: flick
+                        anchors.top: methodTitle.bottom
+                        anchors.bottom: parent.bottom
+                        width: parent.width
+                        viewportHeight: methodText.height
+                        clip: true
+                        Text {
+                            id: methodText
+                            text: method
+                            wrap: true
+                            width: details.width
+                        }
+                    }
+                    Image {
+                        anchors.right: flick.right
+                        anchors.top: flick.top
+                        src: "content/pics/moreUp.png"
+                        opacity: flick.atYBeginning ? 0 : 1
+                    }
+                    Image {
+                        anchors.right: flick.right
+                        anchors.bottom: flick.bottom
+                        src: "content/pics/moreDown.png"
+                        opacity: flick.atYEnd ? 0 : 1
+                    }
+                }
+                // A button to close the detailed view, i.e. set the state back to default ('').
+                MediaButton {
+                    anchors.right: background.right
+                    anchors.rightMargin: 5
+                    y: 10
+                    opacity: wrapper.detailsOpacity
+                    text: "Close"
+                    onClicked: { wrapper.state = '' }
+                }
+                // Make the default height equal the hight of the picture, plus margin.
+                height: 68
+                states: [
+                    State {
+                        name: "Details"
+                        SetProperty {
+                            target: background
+                            property: "color"
+                            value: "white"
+                        }
+                        // Make the picture bigger
+                        SetProperties {
+                            target: recipePic
+                            width: 128
+                            height: 128
+                        }
+                        // Make details visible
+                        SetProperties {
+                            target: wrapper
+                            detailsOpacity: 1
+                            x: 0
+                        }
+                        // Make the detailed view fill the entire list area
+                        SetProperty {
+                            target: wrapper
+                            property: "height"
+                            value: List.height
+                        }
+                        // Move the list so that this item is at the top.
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "yPosition"
+                            value: wrapper.y
+                        }
+                        // Disallow flicking while we're in detailed view
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "locked"
+                            value: 1
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        // Make the state changes smooth
+                        ParallelAnimation {
+                            ColorAnimation {
+                                duration: 500
+                            }
+                            NumericAnimation {
+                                duration: 300
+                                properties: "detailsOpacity,x,yPosition,height,width"
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+    // The actual list
+    ListView {
+        id: List
+        model: Recipies
+        anchors.fill: parent
+        clip: true
+        delegate: recipeDelegate
+    }
+}
diff --git a/examples/declarative/minehunt/Description.qml b/examples/declarative/minehunt/Description.qml
index 5bda5f8..f59c8f9 100644
--- a/examples/declarative/minehunt/Description.qml
+++ b/examples/declarative/minehunt/Description.qml
@@ -1,10 +1,38 @@
-<Item id="Page" height="{MyText.height + 20}" >
-    <properties><Property name="text" /></properties>
-    <MouseRegion anchors.fill="{parent}" drag.target="{Page}" drag.axis="xy" drag.xmin="0" drag.xmax="1000" drag.ymin="0" drag.ymax="1000"/>
-    <Rect radius="10" anchors.fill="{parent}" color="lightsteelblue" />
-    <Item x="10" y="10" width="{parent.width - 20}" height="{parent.height - 20}">
-        <Text id="MyText" text="{Page.text}" width="{parent.width}" clip="true" wrap="true"/>
-    </Item>
-
-    <filter><Shadow xOffset="5" yOffset="5" /></filter>
-</Item>
+Item {
+    id: Page
+    height: MyText.height + 20
+    properties: Property {
+        name: "text"
+    }
+    MouseRegion {
+        anchors.fill: parent
+        drag.target: Page
+        drag.axis: "xy"
+        drag.xmin: 0
+        drag.xmax: 1000
+        drag.ymin: 0
+        drag.ymax: 1000
+    }
+    Rect {
+        radius: 10
+        anchors.fill: parent
+        color: "lightsteelblue"
+    }
+    Item {
+        x: 10
+        y: 10
+        width: parent.width - 20
+        height: parent.height - 20
+        Text {
+            id: MyText
+            text: Page.text
+            width: parent.width
+            clip: true
+            wrap: true
+        }
+    }
+    filter: Shadow {
+        xOffset: 5
+        yOffset: 5
+    }
+}
diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml
index aec685b..1e4f03d 100644
--- a/examples/declarative/minehunt/Explosion.qml
+++ b/examples/declarative/minehunt/Explosion.qml
@@ -1,6 +1,21 @@
-<Item>
-    <properties>
-        <Property name="explode" type="Bool" value="false"/>
-    </properties>
-    <Particles width="38" height="21" lifeSpan="3600000" lifeSpanDeviation="0" src="pics/star.png" count="200" angle="270" angleDeviation="360" velocity="100" velocityDeviation="20" z="100" emitting="{explode}"/>
-</Item>
+Item {
+    properties: Property {
+        name: "explode"
+        type: "Bool"
+        value: false
+    }
+    Particles {
+        width: 38
+        height: 21
+        lifeSpan: 3600000
+        lifeSpanDeviation: 0
+        src: "pics/star.png"
+        count: 200
+        angle: 270
+        angleDeviation: 360
+        velocity: 100
+        velocityDeviation: 20
+        z: 100
+        emitting: explode
+    }
+}
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
index 9db0e84..20c3874 100644
--- a/examples/declarative/minehunt/minehunt.qml
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -7,7 +7,7 @@
         <Component id="tile">
             <Flipable id="flipable" width="40" height="40">
                 <transform>
-                    <Axis id="axis" xStart="20" xEnd="20" yStart="20" yEnd="0" />
+                    <AxisRotation id="axis" axis.startX="20" axis.endX="20" axis.startY="20" axis.endY="0" />
                 </transform>
                 <front>
                     <Image src="pics/front.png" width="40" height="40">
@@ -34,14 +34,14 @@
                 </back>
                 <states>
                     <State name="back" when="{modelData.flipped == true}">
-                        <SetProperty target="{axis}" property="rotation" value="180" />
+                        <SetProperty target="{axis}" property="angle" value="180" />
                     </State>
                 </states>
                 <transitions>
                     <Transition>
                         <SequentialAnimation>
                             <PauseAnimation duration="{var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true &amp;&amp; modelData.flipped==true){ret*3;}else{ret;}} else {0}}"/>
-                            <NumericAnimation easing="easeInOutQuad" properties="rotation"/>
+                            <NumericAnimation easing="easeInOutQuad" properties="angle"/>
                         </SequentialAnimation>
                     </Transition>
                 </transitions>
diff --git a/examples/declarative/mouseregion/mouse.qml b/examples/declarative/mouseregion/mouse.qml
index 9581da2..7aaf51a 100644
--- a/examples/declarative/mouseregion/mouse.qml
+++ b/examples/declarative/mouseregion/mouse.qml
@@ -1,7 +1,7 @@
 <Rect color="white" width="200" height="200">
     <Rect width="50" height="50" color="red">
         <Text text="Click" anchors.centeredIn="{parent}"/>
-        <MouseRegion onPressed="print('press (x: ' + mouse.x + ' y: ' + mouse.y + ')')"
+        <MouseRegion onPressed="print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers &amp; Qt.ShiftModifier ? 'true' : 'false') + ')')"
                      onReleased="print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')')"
                      onClicked="print('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')')"
                      onDoubleClicked="print('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')')"
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index 470a170..e3ca0c2 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -1,26 +1,36 @@
-<Item id="ScrollBar">
-    <!--
-    The properties that define the scrollbar's state.
-    position and pageSize are in the range 0.0 - 1.0.  They are relative to the
-    height of the page, i.e. a pageSize of 0.5 means that you can see 50%
-    of the height of the view.
-    orientation can be either 'Vertical' or 'Horizontal'
-    -->
-    <properties>
-        <Property name="position"/>
-        <Property name="pageSize"/>
-        <Property name="orientation" value="Vertical"/>
-    </properties>
-
-    <!-- A light, semi-transparent background -->
-    <Rect id="Background" radius="{orientation == 'Vertical' ? (width/2) : (height/2)}" color="white" opacity="0.3" anchors.fill="{parent}"/>
-
-    <!-- Size the bar to the required size, depending upon the orientation.  -->
-    <Rect opacity="0.6" color="black"
-          radius="{orientation == 'Vertical' ? (width/2) : (height/2)}"
-          x="{orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)}"
-          y="{orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2}"
-          width="{orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))}"
-          height="{orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)}"
-          />
-</Item>
+Item {
+    id: ScrollBar
+    // The properties that define the scrollbar's state.
+    // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
+    // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+    // of the height of the view.
+    // orientation can be either 'Vertical' or 'Horizontal'
+    properties: Property {
+        name: "position"
+    }
+    properties: Property {
+        name: "pageSize"
+    }
+    properties: Property {
+        name: "orientation"
+        value: "Vertical"
+    }
+    // A light, semi-transparent background
+    Rect {
+        id: Background
+        radius: orientation == 'Vertical' ? (width/2) : (height/2)
+        color: "white"
+        opacity: 0.3
+        anchors.fill: parent
+    }
+    // Size the bar to the required size, depending upon the orientation.
+    Rect {
+        opacity: 0.6
+        color: "black"
+        radius: orientation == 'Vertical' ? (width/2) : (height/2)
+        x: orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)
+        y: orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2
+        width: orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))
+        height: orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)
+    }
+}
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 697b68a..4412d7f 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -1,28 +1,63 @@
-<Rect width="640" height="480">
-
-    <!-- Create a flickable to view a large image.  -->
-    <Flickable id="View" anchors.fill="{parent}">
-        <Image id="Picture" src="pics/niagara_falls.jpg"/>
-        <viewportWidth>{Picture.width}</viewportWidth>
-        <viewportHeight>{Picture.height}</viewportHeight>
-
-        <!-- Only show the scrollbars when the view is moving.  -->
-        <states>
-            <State name="ShowBars" when="{View.moving}">
-                <SetProperty target="{SBV}" property="opacity" value="1" />
-                <SetProperty target="{SBH}" property="opacity" value="1" />
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="opacity" duration="400"/>
-            </Transition>
-        </transitions>
-
-    </Flickable>
-
-    <!-- Attach scrollbars to the right and bottom edges of the view.  -->
-    <ScrollBar id="SBV" opacity="0" orientation="Vertical" position="{View.pageYPosition}" pageSize="{View.pageHeight}" width="12" height="{View.height-12}" anchors.right="{View.right}"/>
-    <ScrollBar id="SBH" opacity="0" orientation="Horizontal" position="{View.pageXPosition}" pageSize="{View.pageWidth}" height="12" width="{View.width-12}" anchors.bottom="{View.bottom}"/>
-
-</Rect>
+Rect {
+    width: 640
+    height: 480
+    // Create a flickable to view a large image.
+    Flickable {
+        id: View
+        anchors.fill: parent
+        Image {
+            id: Picture
+            src: "pics/niagara_falls.jpg"
+        }
+        viewportWidth: Picture.width
+        viewportHeight: Picture.height
+        // Only show the scrollbars when the view is moving.
+        states: [
+            State {
+                name: "ShowBars"
+                when: View.moving
+                SetProperty {
+                    target: SBV
+                    property: "opacity"
+                    value: 1
+                }
+                SetProperty {
+                    target: SBH
+                    property: "opacity"
+                    value: 1
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                fromState: "*"
+                toState: "*"
+                NumericAnimation {
+                    properties: "opacity"
+                    duration: 400
+                }
+            }
+        ]
+    }
+    // Attach scrollbars to the right and bottom edges of the view.
+    ScrollBar {
+        id: SBV
+        opacity: 0
+        orientation: "Vertical"
+        position: View.pageYPosition
+        pageSize: View.pageHeight
+        width: 12
+        height: View.height-12
+        anchors.right: View.right
+    }
+    ScrollBar {
+        id: SBH
+        opacity: 0
+        orientation: "Horizontal"
+        position: View.pageXPosition
+        pageSize: View.pageWidth
+        height: 12
+        width: View.width-12
+        anchors.bottom: View.bottom
+    }
+}
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index 90e6e64..f62e4b6 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -1,6 +1,12 @@
-<Item id="Switch" width="{Groove.width}" height="{Groove.height}">
-    <properties><Property name="on"/></properties>
-    <Script>
+Item {
+    id: Switch
+    width: Groove.width
+    height: Groove.height
+    properties: Property {
+        name: "on"
+    }
+    Script {
+
         function toggle() {
             if(Switch.state == "On")
                 Switch.state = "Off";
@@ -21,32 +27,66 @@
 
             toggle();
         }
-    </Script>
-    <Image id="Groove" src="background.svg"/>
-    <MouseRegion anchors.fill="{Groove}" onClicked="toggle()"/>
-    <Image id="Knob" src="knob.svg" x="1" y="2"/>
-    <MouseRegion anchors.fill="{Knob}"
-                 onClicked="toggle()"
-                 onReleased="if (!isClick) dorelease()"
-                 drag.target="{Knob}"
-                 drag.axis="x"
-                 drag.xmin="1"
-                 drag.xmax="78"/>
-
-    <states>
-        <State name="On">
-            <SetProperty target="{Knob}" property="x" value="78" />
-            <SetProperty target="{Switch}" property="on" value="true" />
-        </State>
-        <State name="Off">
-            <SetProperty target="{Knob}" property="x" value="1" />
-            <SetProperty target="{Switch}" property="on" value="false" />
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="x" easing="easeInOutQuad" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
+    
+    }
+    Image {
+        id: Groove
+        src: "background.svg"
+    }
+    MouseRegion {
+        anchors.fill: Groove
+        onClicked: { toggle() }
+    }
+    Image {
+        id: Knob
+        src: "knob.svg"
+        x: 1
+        y: 2
+    }
+    MouseRegion {
+        anchors.fill: Knob
+        onClicked: { toggle() }
+        onReleased: { if (!isClick) dorelease() }
+        drag.target: Knob
+        drag.axis: "x"
+        drag.xmin: 1
+        drag.xmax: 78
+    }
+    states: [
+        State {
+            name: "On"
+            SetProperty {
+                target: Knob
+                property: "x"
+                value: 78
+            }
+            SetProperty {
+                target: Switch
+                property: "on"
+                value: true
+            }
+        },
+        State {
+            name: "Off"
+            SetProperty {
+                target: Knob
+                property: "x"
+                value: 1
+            }
+            SetProperty {
+                target: Switch
+                property: "on"
+                value: false
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "x"
+                easing: "easeInOutQuad"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/slideswitch/display.qml b/examples/declarative/slideswitch/display.qml
index b62422c..cea89b6 100644
--- a/examples/declarative/slideswitch/display.qml
+++ b/examples/declarative/slideswitch/display.qml
@@ -1,3 +1,8 @@
-<Rect color="white" width="150" height="150">
-    <Switch anchors.centeredIn="{parent}"/>
-</Rect>
+Rect {
+    color: "white"
+    width: 150
+    height: 150
+    Switch {
+        anchors.centeredIn: parent
+    }
+}
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index e540d25..0c27637 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -1,40 +1,79 @@
-<Rect id="Page" width="300" height="300" color="white">
-
-    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
-    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
-    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
-    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
-    </Rect>
-
-    <!-- Rect which will be moved when my state changes -->
-    <Rect id="myrect" width="50" height="50" color="red"/>
-
-    <states>
-
-        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
-        <State name="Position1">
-            <SetProperty target="{myrect}" property="x" value="150"/>
-            <SetProperty target="{myrect}" property="y" value="50"/>
-        </State>
-
-        <!--
-        In state 'Position2', change y to 100.  We do not specify 'x' here - 
-        it will therefore be restored to its default value of 0, if it
-        had been changed.
-        -->
-        <State name="Position2">
-            <SetProperty target="{myrect}" property="y" value="200"/>
-        </State>
-
-    </states>
-
-</Rect>
+Rect {
+    id: Page
+    width: 300
+    height: 300
+    color: "white"
+    // A target region.  Clicking in here sets the state to '' - the default state
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 0
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position1'
+    Rect {
+        width: 50
+        height: 50
+        x: 150
+        y: 50
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position1' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position2'
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 200
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position2' }
+        }
+    }
+    // Rect which will be moved when my state changes
+    Rect {
+        id: myrect
+        width: 50
+        height: 50
+        color: "red"
+    }
+    states: [
+        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        State {
+            name: "Position1"
+            SetProperty {
+                target: myrect
+                property: "x"
+                value: 150
+            }
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 50
+            }
+        }        // In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        // it will therefore be restored to its default value of 0, if it
+        // had been changed.
+,
+        State {
+            name: "Position2"
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c3f3515..c7fc656 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,68 +1,111 @@
-<Rect id="Page" width="300" height="300" color="white">
-
-    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
-    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
-    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
-    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
-    </Rect>
-
-    <!-- Rect which will be moved when my state changes -->
-    <Rect id="myrect" width="50" height="50" color="red"/>
-
-    <states>
-
-        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
-        <State name="Position1">
-            <SetProperty target="{myrect}" property="x" value="150"/>
-            <SetProperty target="{myrect}" property="y" value="50"/>
-        </State>
-
-        <!--
-        In state 'Position2', change y to 100.  We do not specify 'x' here - 
-        it will therefore be restored to its default value of 0, if it
-        had been changed.
-        -->
-        <State name="Position2">
-            <SetProperty target="{myrect}" property="y" value="200"/>
-        </State>
-
-    </states>
-
-    <!-- transitions define how the properties change. -->
-    <transitions>
-
-        <!--
-        When transitioning to 'Position1' move x,y over a duration of 1 second,
-        with easeOutBounce easing function.
-        -->
-        <Transition fromState="*" toState="Position1">
-            <NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
-        </Transition>
-
-        <!--
-        When transitioning to 'Position2' move x,y over a duration of 2 seconds,
-        with easeInOutQuad easing function.
-        -->
-        <Transition fromState="*" toState="Position2">
-            <NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
-        </Transition>
-
-        <!--
-        For any other state changes move x,y linearly over duration of 200ms.
-        -->
-        <Transition>
-            <NumericAnimation properties="x,y" duration="200" />
-        </Transition>
-
-    </transitions>
-
-</Rect>
+Rect {
+    id: Page
+    width: 300
+    height: 300
+    color: "white"
+    // A target region.  Clicking in here sets the state to '' - the default state
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 0
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position1'
+    Rect {
+        width: 50
+        height: 50
+        x: 150
+        y: 50
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position1' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position2'
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 200
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position2' }
+        }
+    }
+    // Rect which will be moved when my state changes
+    Rect {
+        id: myrect
+        width: 50
+        height: 50
+        color: "red"
+    }
+    states: [
+        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        State {
+            name: "Position1"
+            SetProperty {
+                target: myrect
+                property: "x"
+                value: 150
+            }
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 50
+            }
+        }        // In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        // it will therefore be restored to its default value of 0, if it
+        // had been changed.
+,
+        State {
+            name: "Position2"
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 200
+            }
+        }
+    ]
+    // transitions define how the properties change.
+    transitions: [
+        // When transitioning to 'Position1' move x,y over a duration of 1 second,
+        // with easeOutBounce easing function.
+        Transition {
+            fromState: "*"
+            toState: "Position1"
+            NumericAnimation {
+                properties: "x,y"
+                easing: "easeOutBounce"
+                duration: 1000
+            }
+        }        // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+        // with easeInOutQuad easing function.
+,
+        Transition {
+            fromState: "*"
+            toState: "Position2"
+            NumericAnimation {
+                properties: "x,y"
+                easing: "easeInOutQuad"
+                duration: 2000
+            }
+        }        // For any other state changes move x,y linearly over duration of 200ms.
+,
+        Transition {
+            NumericAnimation {
+                properties: "x,y"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/t1/tutorial1.qml b/examples/declarative/tutorials/t1/tutorial1.qml
index e4de571..ec29f4f 100644
--- a/examples/declarative/tutorials/t1/tutorial1.qml
+++ b/examples/declarative/tutorials/t1/tutorial1.qml
@@ -1,3 +1,14 @@
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+    }
+}
diff --git a/examples/declarative/tutorials/t2/Cell.qml b/examples/declarative/tutorials/t2/Cell.qml
index 5d6ff52..bd5bbe7 100644
--- a/examples/declarative/tutorials/t2/Cell.qml
+++ b/examples/declarative/tutorials/t2/Cell.qml
@@ -1,7 +1,16 @@
-<Item id="CellContainer" width="40" height="25">
-    <properties>
-        <Property name="color"/>
-    </properties>
-    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
-    <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" />
-</Item>
+Item {
+    id: CellContainer
+    width: 40
+    height: 25
+    properties: Property {
+        name: "color"
+    }
+    Rect {
+        anchors.fill: parent
+        color: CellContainer.color
+    }
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { HelloText.color = CellContainer.color }
+    }
+}
diff --git a/examples/declarative/tutorials/t2/tutorial2.qml b/examples/declarative/tutorials/t2/tutorial2.qml
index 1e3af16..08ea9eb 100644
--- a/examples/declarative/tutorials/t2/tutorial2.qml
+++ b/examples/declarative/tutorials/t2/tutorial2.qml
@@ -1,11 +1,41 @@
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
-    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-        <Cell color="#ff0000"/>
-        <Cell color="#00ff00"/>
-        <Cell color="#0000ff"/>
-        <Cell color="#ffff00"/>
-        <Cell color="#00ffff"/>
-        <Cell color="#ff00ff"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+    }
+    GridLayout {
+        id: ColorPicker
+        x: 0
+        anchors.bottom: Page.bottom
+        width: 120
+        height: 50
+        columns: 3
+        rows: 2
+        Cell {
+            color: "#ff0000"
+        }
+        Cell {
+            color: "#00ff00"
+        }
+        Cell {
+            color: "#0000ff"
+        }
+        Cell {
+            color: "#ffff00"
+        }
+        Cell {
+            color: "#00ffff"
+        }
+        Cell {
+            color: "#ff00ff"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/t3/Cell.qml b/examples/declarative/tutorials/t3/Cell.qml
index 5d6ff52..bd5bbe7 100644
--- a/examples/declarative/tutorials/t3/Cell.qml
+++ b/examples/declarative/tutorials/t3/Cell.qml
@@ -1,7 +1,16 @@
-<Item id="CellContainer" width="40" height="25">
-    <properties>
-        <Property name="color"/>
-    </properties>
-    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
-    <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" />
-</Item>
+Item {
+    id: CellContainer
+    width: 40
+    height: 25
+    properties: Property {
+        name: "color"
+    }
+    Rect {
+        anchors.fill: parent
+        color: CellContainer.color
+    }
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { HelloText.color = CellContainer.color }
+    }
+}
diff --git a/examples/declarative/tutorials/t3/tutorial3.qml b/examples/declarative/tutorials/t3/tutorial3.qml
index f9f1415..8e2b697 100644
--- a/examples/declarative/tutorials/t3/tutorial3.qml
+++ b/examples/declarative/tutorials/t3/tutorial3.qml
@@ -1,27 +1,78 @@
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}">
-        <states>
-            <State name="down" when="{MouseRegion.pressed == true}">
-                <SetProperty target="{HelloText}" property="y" value="160"/>
-                <SetProperty target="{HelloText}" property="color" value="red"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="down" reversible="true">
-                <ParallelAnimation>
-                    <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/>
-                    <ColorAnimation duration="500"/>
-                </ParallelAnimation>
-            </Transition>
-        </transitions>
-    </Text>
-    <MouseRegion id="MouseRegion" anchors.fill="{HelloText}"/>
-    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-        <Cell color="#ff0000"/>
-        <Cell color="#00ff00"/>
-        <Cell color="#0000ff"/>
-        <Cell color="#ffff00"/>
-        <Cell color="#00ffff"/>
-        <Cell color="#ff00ff"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+        states: [
+            State {
+                name: "down"
+                when: MouseRegion.pressed == true
+                SetProperty {
+                    target: HelloText
+                    property: "y"
+                    value: 160
+                }
+                SetProperty {
+                    target: HelloText
+                    property: "color"
+                    value: "red"
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                fromState: "*"
+                toState: "down"
+                reversible: true
+                ParallelAnimation {
+                    NumericAnimation {
+                        properties: "y"
+                        duration: 500
+                        easing: "easeOutBounce"
+                    }
+                    ColorAnimation {
+                        duration: 500
+                    }
+                }
+            }
+        ]
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: HelloText
+    }
+    GridLayout {
+        id: ColorPicker
+        x: 0
+        anchors.bottom: Page.bottom
+        width: 120
+        height: 50
+        columns: 3
+        rows: 2
+        Cell {
+            color: "#ff0000"
+        }
+        Cell {
+            color: "#00ff00"
+        }
+        Cell {
+            color: "#0000ff"
+        }
+        Cell {
+            color: "#ffff00"
+        }
+        Cell {
+            color: "#00ffff"
+        }
+        Cell {
+            color: "#ff00ff"
+        }
+    }
+}
diff --git a/examples/graphicsview/elasticnodes/edge.cpp b/examples/graphicsview/elasticnodes/edge.cpp
index e32a35a..eb02143 100644
--- a/examples/graphicsview/elasticnodes/edge.cpp
+++ b/examples/graphicsview/elasticnodes/edge.cpp
@@ -96,7 +96,7 @@ void Edge::adjust()
 
     prepareGeometryChange();
 
-    if (!qFuzzyCompare(length, qreal(0.0))) {
+    if (length > qreal(20.)) {
         QPointF edgeOffset((line.dx() * 10) / length, (line.dy() * 10) / length);
         sourcePoint = line.p1() + edgeOffset;
         destPoint = line.p2() - edgeOffset;
@@ -124,12 +124,15 @@ void Edge::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
     if (!source || !dest)
         return;
 
-    // Draw the line itself
     QLineF line(sourcePoint, destPoint);
+    if (qFuzzyCompare(line.length(), qreal(0.)))
+        return;
+
+    // Draw the line itself
     painter->setPen(QPen(Qt::black, 1, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
     painter->drawLine(line);
 
-    // Draw the arrows if there's enough room
+    // Draw the arrows
     double angle = ::acos(line.dx() / line.length());
     if (line.dy() >= 0)
         angle = TwoPi - angle;
diff --git a/examples/itemviews/chart/pieview.cpp b/examples/itemviews/chart/pieview.cpp
index 6b62f25..48f4073 100644
--- a/examples/itemviews/chart/pieview.cpp
+++ b/examples/itemviews/chart/pieview.cpp
@@ -254,7 +254,7 @@ void PieView::mousePressEvent(QMouseEvent *event)
     QAbstractItemView::mousePressEvent(event);
     origin = event->pos();
     if (!rubberBand)
-        rubberBand = new QRubberBand(QRubberBand::Rectangle, this);
+        rubberBand = new QRubberBand(QRubberBand::Rectangle, viewport());
     rubberBand->setGeometry(QRect(origin, QSize()));
     rubberBand->show();
 }
diff --git a/examples/network/googlesuggest/googlesuggest.cpp b/examples/network/googlesuggest/googlesuggest.cpp
new file mode 100644
index 0000000..285a018
--- /dev/null
+++ b/examples/network/googlesuggest/googlesuggest.cpp
@@ -0,0 +1,223 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtCore>
+#include <QtGui>
+#include <QtNetwork>
+
+#include "googlesuggest.h"
+
+#define GSUGGEST_URL "http://google.com/complete/search?output=toolbar&q=%1"
+
+GSuggestCompletion::GSuggestCompletion(QLineEdit *parent): QObject(parent), editor(parent)
+{
+    popup = new QTreeWidget;
+    popup->setColumnCount(2);
+    popup->setUniformRowHeights(true);
+    popup->setRootIsDecorated(false);
+    popup->setEditTriggers(QTreeWidget::NoEditTriggers);
+    popup->setSelectionBehavior(QTreeWidget::SelectRows);
+    popup->setFrameStyle(QFrame::Box | QFrame::Plain);
+    popup->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+
+    popup->header()->hide();
+    popup->installEventFilter(this);
+    popup->setMouseTracking(true);
+
+    connect(popup, SIGNAL(itemClicked(QTreeWidgetItem*, int)),
+            SLOT(doneCompletion()));
+
+    popup->setWindowFlags(Qt::Popup);
+    popup->setFocusPolicy(Qt::NoFocus);
+    popup->setFocusProxy(parent);
+
+    timer = new QTimer(this);
+    timer->setSingleShot(true);
+    timer->setInterval(500);
+    connect(timer, SIGNAL(timeout()), SLOT(autoSuggest()));
+    connect(editor, SIGNAL(textEdited(QString)), timer, SLOT(start()));
+
+    connect(&networkManager, SIGNAL(finished(QNetworkReply*)),
+            this, SLOT(handleNetworkData(QNetworkReply*)));
+
+}
+
+GSuggestCompletion::~GSuggestCompletion()
+{
+    delete popup;
+}
+
+bool GSuggestCompletion::eventFilter(QObject *obj, QEvent *ev)
+{
+    if (obj != popup)
+        return false;
+
+    if (ev->type() == QEvent::MouseButtonPress) {
+        popup->hide();
+        editor->setFocus();
+        return true;
+    }
+
+    if (ev->type() == QEvent::KeyPress) {
+
+        bool consumed = false;
+        int key = static_cast<QKeyEvent*>(ev)->key();
+        switch (key) {
+        case Qt::Key_Enter:
+        case Qt::Key_Return:
+            doneCompletion();
+            consumed = true;
+
+        case Qt::Key_Escape:
+            editor->setFocus();
+            popup->hide();
+            consumed = true;
+
+        case Qt::Key_Up:
+        case Qt::Key_Down:
+        case Qt::Key_Home:
+        case Qt::Key_End:
+        case Qt::Key_PageUp:
+        case Qt::Key_PageDown:
+            break;
+
+        default:
+            editor->setFocus();
+            editor->event(ev);
+            popup->hide();
+            break;
+        }
+
+        return consumed;
+    }
+
+    return false;
+}
+
+void GSuggestCompletion::showCompletion(const QStringList &choices, const QStringList &hits)
+{
+
+    if (choices.isEmpty() || choices.count() != hits.count())
+        return;
+
+    const QPalette &pal = editor->palette();
+    QColor color = pal.color(QPalette::Disabled, QPalette::WindowText);
+
+    popup->setUpdatesEnabled(false);
+    popup->clear();
+    for (int i = 0; i < choices.count(); ++i) {
+        QTreeWidgetItem * item;
+        item = new QTreeWidgetItem(popup);
+        item->setText(0, choices[i]);
+        item->setText(1, hits[i]);
+        item->setTextAlignment(1, Qt::AlignRight);
+        item->setTextColor(1, color);
+    }
+    popup->setCurrentItem(popup->topLevelItem(0));
+    popup->resizeColumnToContents(0);
+    popup->resizeColumnToContents(1);
+    popup->adjustSize();
+    popup->setUpdatesEnabled(true);
+
+    int h = popup->sizeHintForRow(0) * qMin(7, choices.count()) + 3;
+    popup->resize(popup->width(), h);
+
+    popup->move(editor->mapToGlobal(QPoint(0, editor->height())));
+    popup->setFocus();
+    popup->show();
+}
+
+void GSuggestCompletion::doneCompletion()
+{
+    timer->stop();
+    popup->hide();
+    editor->setFocus();
+    QTreeWidgetItem *item = popup->currentItem();
+    if (item) {
+        editor->setText(item->text(0));
+        QKeyEvent *e;
+        e = new QKeyEvent(QEvent::KeyPress, Qt::Key_Enter, Qt::NoModifier);
+        QApplication::postEvent(editor, e);
+        e = new QKeyEvent(QEvent::KeyRelease, Qt::Key_Enter, Qt::NoModifier);
+        QApplication::postEvent(editor, e);
+    }
+}
+
+void GSuggestCompletion::preventSuggest()
+{
+    timer->stop();
+}
+
+void GSuggestCompletion::autoSuggest()
+{
+    QString str = editor->text();
+    QString url = QString(GSUGGEST_URL).arg(str);
+    networkManager.get(QNetworkRequest(QString(url)));
+}
+
+void GSuggestCompletion::handleNetworkData(QNetworkReply *networkReply)
+{
+    QUrl url = networkReply->url();
+    if (!networkReply->error()) {
+        QStringList choices;
+        QStringList hits;
+
+        QString response(networkReply->readAll());
+        QXmlStreamReader xml(response);
+        while (!xml.atEnd()) {
+            xml.readNext();
+            if (xml.tokenType() == QXmlStreamReader::StartElement)
+                if (xml.name() == "suggestion") {
+                    QStringRef str = xml.attributes().value("data");
+                    choices << str.toString();
+                }
+            if (xml.tokenType() == QXmlStreamReader::StartElement)
+                if (xml.name() == "num_queries") {
+                    QStringRef str = xml.attributes().value("int");
+                    hits << str.toString();
+                }
+        }
+
+        showCompletion(choices, hits);
+    }
+
+    networkReply->deleteLater();
+}
diff --git a/examples/network/googlesuggest/googlesuggest.h b/examples/network/googlesuggest/googlesuggest.h
new file mode 100644
index 0000000..0267709
--- /dev/null
+++ b/examples/network/googlesuggest/googlesuggest.h
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef GOOGLESUGGEST_H
+#define GOOGLESUGGEST_H
+
+#include <QObject>
+#include <QNetworkAccessManager>
+
+QT_BEGIN_NAMESPACE
+class QLineEdit;
+class QNetworkReply;
+class QTimer;
+class QTreeWidget;
+QT_END_NAMESPACE
+
+class GSuggestCompletion : public QObject
+{
+    Q_OBJECT
+
+public:
+    GSuggestCompletion(QLineEdit *parent = 0);
+    ~GSuggestCompletion();
+    bool eventFilter(QObject *obj, QEvent *ev);
+    void showCompletion(const QStringList &choices, const QStringList &hits);
+
+public slots:
+
+    void doneCompletion();
+    void preventSuggest();
+    void autoSuggest();
+    void handleNetworkData(QNetworkReply *networkReply);
+
+private:
+    QLineEdit *editor;
+    QTreeWidget *popup;
+    QTimer *timer;
+    QNetworkAccessManager networkManager;
+};
+
+#endif // GOOGLESUGGEST_H
+
diff --git a/examples/network/googlesuggest/googlesuggest.pro b/examples/network/googlesuggest/googlesuggest.pro
new file mode 100644
index 0000000..afd600f
--- /dev/null
+++ b/examples/network/googlesuggest/googlesuggest.pro
@@ -0,0 +1,9 @@
+QT      +=  network
+SOURCES =   main.cpp searchbox.cpp googlesuggest.cpp
+HEADERS  =  searchbox.h googlesuggest.h
+
+# install
+target.path = $$[QT_INSTALL_EXAMPLES]/webkit/googlesuggest
+sources.files = $$SOURCES $$HEADERS *.pro
+sources.path = $$[QT_INSTALL_EXAMPLES]/webkit/googlesuggest
+INSTALLS += target sources
diff --git a/examples/network/googlesuggest/main.cpp b/examples/network/googlesuggest/main.cpp
new file mode 100644
index 0000000..f8d9bc5
--- /dev/null
+++ b/examples/network/googlesuggest/main.cpp
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QApplication>
+
+#include "searchbox.h"
+
+int main(int argc, char * argv[])
+{
+    QApplication app(argc, argv);
+    SearchBox *searchEdit = new SearchBox;
+    searchEdit->show();
+    return app.exec();
+}
diff --git a/examples/network/googlesuggest/searchbox.cpp b/examples/network/googlesuggest/searchbox.cpp
new file mode 100644
index 0000000..cd7b122
--- /dev/null
+++ b/examples/network/googlesuggest/searchbox.cpp
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QDesktopServices>
+#include <QUrl>
+
+#include "searchbox.h"
+#include "googlesuggest.h"
+
+#define GSEARCH_URL "http://www.google.com/search?q=%1"
+
+
+SearchBox::SearchBox(QWidget *parent): QLineEdit(parent)
+{
+    completer = new GSuggestCompletion(this);
+
+    connect(this, SIGNAL(returnPressed()), SLOT(doSearch()));
+
+    setWindowTitle("Search with Google");
+
+    adjustSize();
+    resize(400, height());
+    setFocus();
+}
+
+void SearchBox::doSearch()
+{
+    completer->preventSuggest();
+    QString url = QString(GSEARCH_URL).arg(text());
+    QDesktopServices::openUrl(QUrl(url));
+}
diff --git a/examples/network/googlesuggest/searchbox.h b/examples/network/googlesuggest/searchbox.h
new file mode 100644
index 0000000..75ceffd
--- /dev/null
+++ b/examples/network/googlesuggest/searchbox.h
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef SEARCHBOX_H
+#define SEARCHBOX_H
+
+#include <QLineEdit>
+
+class GSuggestCompletion;
+
+class SearchBox: public QLineEdit
+{
+    Q_OBJECT
+
+public:
+    SearchBox(QWidget *parent = 0);
+
+protected slots:
+    void doSearch();
+
+private:
+    GSuggestCompletion *completer;
+};
+
+
+#endif // SEARCHBOX_H
diff --git a/examples/network/network.pro b/examples/network/network.pro
index 13b3116..8c45745 100644
--- a/examples/network/network.pro
+++ b/examples/network/network.pro
@@ -11,6 +11,7 @@ SUBDIRS       = blockingfortuneclient \
                 http \
                 loopback \
                 threadedfortuneserver \
+                googlesuggest \
  		torrent
 
 contains(QT_CONFIG, openssl):SUBDIRS += securesocketclient
diff --git a/examples/webkit/fancybrowser/fancybrowser.pro b/examples/webkit/fancybrowser/fancybrowser.pro
new file mode 100644
index 0000000..3de3036
--- /dev/null
+++ b/examples/webkit/fancybrowser/fancybrowser.pro
@@ -0,0 +1,11 @@
+QT      +=  webkit
+HEADERS =   mainwindow.h
+SOURCES =   main.cpp \
+            mainwindow.cpp
+RESOURCES = jquery.qrc
+
+# install
+target.path = $$[QT_INSTALL_EXAMPLES]/webkit/fancybrowser
+sources.files = $$SOURCES $$HEADERS $$RESOURCES *.pro
+sources.path = $$[QT_INSTALL_EXAMPLES]/webkit/fancybrowser
+INSTALLS += target sources
diff --git a/examples/webkit/fancybrowser/jquery.min.js b/examples/webkit/fancybrowser/jquery.min.js
new file mode 100644
index 0000000..b1ae21d
--- /dev/null
+++ b/examples/webkit/fancybrowser/jquery.min.js
@@ -0,0 +1,19 @@
+/*
+ * jQuery JavaScript Library v1.3.2
+ * http://jquery.com/
+ *
+ * Copyright (c) 2009 John Resig
+ * Dual licensed under the MIT and GPL licenses.
+ * http://docs.jquery.com/License
+ *
+ * Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
+ * Revision: 6246
+ */
+(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={init:function(E,H){E=E||document;if(E.nodeType){this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string"){var G=D.exec(E);if(G&&(G[1]||!H)){if(G[1]){E=o.clean([G[1]],H)}else{var I=document.getElementById(G[3]);if(I&&I.id!=G[3]){return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else{return o(H).find(E)}}else{if(o.isFunction(E)){return o(document).ready(E)}}if(E.selector&&E.context){this.selector=E.selector;this.context=E.context}return this.setArray(o.isArray(E)?E:o.makeArray(E))},selector:"",jquery:"1.3.2",size:function(){return this.length},get:function(E){return E===g?Array.prototype.slice.call(this):this[E]},pushStack:function(F,H,E){var G=o(F);G.prevObject=this;G.context=this.context;if(H==="find"){G.selector=this.selector+(this.selector?" ":"")+E}else{if(H){G.selector=this.selector+"."+H+"("+E+")"}}return G},setArray:function(E){this.length=0;Array.prototype.push.apply(this,E);return this},each:function(F,E){return o.each(this,F,E)},index:function(E){return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){var E=F;if(typeof F==="string"){if(H===g){return this[0]&&o[G||"attr"](this[0],F)}else{E={};E[F]=H}}return this.each(function(I){for(F in E){o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){if((E=="width"||E=="height")&&parseFloat(F)<0){F=g}return this.attr(E,F,"curCSS")},text:function(F){if(typeof F!=="object"&&F!=null){return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){o.each(this.childNodes,function(){if(this.nodeType!=8){E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){if(this[0]){var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode){F.insertBefore(this[0])}F.map(function(){var G=this;while(G.firstChild){G=G.firstChild}return G}).append(this)}return this},wrapInner:function(E){return this.each(function(){o(this).contents().wrapAll(E)})},wrap:function(E){return this.each(function(){o(this).wrapAll(E)})},append:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.appendChild(E)}})},prepend:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.insertBefore(E,this.firstChild)}})},before:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this)})},after:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this.nextSibling)})},end:function(){return this.prevObject||o([])},push:[].push,sort:[].sort,splice:[].splice,find:function(E){if(this.length===1){var F=this.pushStack([],"find",E);F.length=0;o.find(E,this[0],F);return F}else{return this.pushStack(o.unique(o.map(this,function(G){return o.find(E,G)})),"find",E)}},clone:function(G){var E=this.map(function(){if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){var I=this.outerHTML;if(!I){var J=this.ownerDocument.createElement("div");J.appendChild(this.cloneNode(true));I=J.innerHTML}return o.clean([I.replace(/ jQuery\d+="(?:\d+|null)"/g,"").replace(/^\s*/,"")])[0]}else{return this.cloneNode(true)}});if(G===true){var H=this.find("*").andSelf(),F=0;E.find("*").andSelf().each(function(){if(this.nodeName!==H[F].nodeName){return}var I=o.data(H[F],"events");for(var K in I){for(var J in I[K]){o.event.add(this,K,I[K][J],I[K][J].data)}}F++})}return E},filter:function(E){return this.pushStack(o.isFunction(E)&&o.grep(this,function(G,F){return E.call(G,F)})||o.multiFilter(E,o.grep(this,function(F){return F.nodeType===1})),"filter",E)},closest:function(E){var G=o.expr.match.POS.test(E)?o(E):null,F=0;return this.map(function(){var H=this;while(H&&H.ownerDocument){if(G?G.index(H)>-1:o(H).is(E)){o.data(H,"closest",F);return H}H=H.parentNode;F++}})},not:function(E){if(typeof E==="string"){if(f.test(E)){return this.pushStack(o.multiFilter(E,this,true),"not",E)}else{E=o.multiFilter(E,this)}}var F=E.length&&E[E.length-1]!==g&&!E.nodeType;return this.filter(function(){return F?o.inArray(this,E)<0:this!=E})},add:function(E){return this.pushStack(o.unique(o.merge(this.get(),typeof E==="string"?o(E):o.makeArray(E))))},is:function(E){return !!E&&o.multiFilter(E,this).length>0},hasClass:function(E){return !!E&&this.is("."+E)},val:function(K){if(K===g){var E=this[0];if(E){if(o.nodeName(E,"option")){return(E.attributes.value||{}).specified?E.value:E.text}if(o.nodeName(E,"select")){var I=E.selectedIndex,L=[],M=E.options,H=E.type=="select-one";if(I<0){return null}for(var F=H?I:0,J=H?I+1:M.length;F<J;F++){var G=M[F];if(G.selected){K=o(G).val();if(H){return K}L.push(K)}}return L}return(E.value||"").replace(/\r/g,"")}return g}if(typeof K==="number"){K+=""}return this.each(function(){if(this.nodeType!=1){return}if(o.isArray(K)&&/radio|checkbox/.test(this.type)){this.checked=(o.inArray(this.value,K)>=0||o.inArray(this.name,K)>=0)}else{if(o.nodeName(this,"select")){var N=o.makeArray(K);o("option",this).each(function(){this.selected=(o.inArray(this.value,N)>=0||o.inArray(this.text,N)>=0)});if(!N.length){this.selectedIndex=-1}}else{this.value=K}}})},html:function(E){return E===g?(this[0]?this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g,""):null):this.empty().append(E)},replaceWith:function(E){return this.after(E).remove()},eq:function(E){return this.slice(E,+E+1)},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments),"slice",Array.prototype.slice.call(arguments).join(","))},map:function(E){return this.pushStack(o.map(this,function(G,F){return E.call(G,F,G)}))},andSelf:function(){return this.add(this.prevObject)},domManip:function(J,M,L){if(this[0]){var I=(this[0].ownerDocument||this[0]).createDocumentFragment(),F=o.clean(J,(this[0].ownerDocument||this[0]),I),H=I.firstChild;if(H){for(var G=0,E=this.length;G<E;G++){L.call(K(this[G],H),this.length>1||G>0?I.cloneNode(true):I)}}if(F){o.each(F,z)}}return this;function K(N,O){return M&&o.nodeName(N,"table")&&o.nodeName(O,"tr")?(N.getElementsByTagName("tbody")[0]||N.appendChild(N.ownerDocument.createElement("tbody"))):N}}};o.fn.init.prototype=o.fn;function z(E,F){if(F.src){o.ajax({url:F.src,async:false,dataType:"script"})}else{o.globalEval(F.text||F.textContent||F.innerHTML||"")}if(F.parentNode){F.parentNode.removeChild(F)}}function e(){return +new Date}o.extend=o.fn.extend=function(){var J=arguments[0]||{},H=1,I=arguments.length,E=false,G;if(typeof J==="boolean"){E=J;J=arguments[1]||{};H=2}if(typeof J!=="object"&&!o.isFunction(J)){J={}}if(I==H){J=this;--H}for(;H<I;H++){if((G=arguments[H])!=null){for(var F in G){var K=J[F],L=G[F];if(J===L){continue}if(E&&L&&typeof L==="object"&&!L.nodeType){J[F]=o.extend(E,K||(L.length!=null?[]:{}),L)}else{if(L!==g){J[F]=L}}}}}return J};var b=/z-?index|font-?weight|opacity|zoom|line-?height/i,q=document.defaultView||{},s=Object.prototype.toString;o.extend({noConflict:function(E){l.$=p;if(E){l.jQuery=y}return o},isFunction:function(E){return s.call(E)==="[object Function]"},isArray:function(E){return s.call(E)==="[object Array]"},isXMLDoc:function(E){return E.nodeType===9&&E.documentElement.nodeName!=="HTML"||!!E.ownerDocument&&o.isXMLDoc(E.ownerDocument)},globalEval:function(G){if(G&&/\S/.test(G)){var F=document.getElementsByTagName("head")[0]||document.documentElement,E=document.createElement("script");E.type="text/javascript";if(o.support.scriptEval){E.appendChild(document.createTextNode(G))}else{E.text=G}F.insertBefore(E,F.firstChild);F.removeChild(E)}},nodeName:function(F,E){return F.nodeName&&F.nodeName.toUpperCase()==E.toUpperCase()},each:function(G,K,F){var E,H=0,I=G.length;if(F){if(I===g){for(E in G){if(K.apply(G[E],F)===false){break}}}else{for(;H<I;){if(K.apply(G[H++],F)===false){break}}}}else{if(I===g){for(E in G){if(K.call(G[E],E,G[E])===false){break}}}else{for(var J=G[0];H<I&&K.call(J,H,J)!==false;J=G[++H]){}}}return G},prop:function(H,I,G,F,E){if(o.isFunction(I)){I=I.call(H,F)}return typeof I==="number"&&G=="curCSS"&&!b.test(E)?I+"px":I},className:{add:function(E,F){o.each((F||"").split(/\s+/),function(G,H){if(E.nodeType==1&&!o.className.has(E.className,H)){E.className+=(E.className?" ":"")+H}})},remove:function(E,F){if(E.nodeType==1){E.className=F!==g?o.grep(E.className.split(/\s+/),function(G){return !o.className.has(F,G)}).join(" "):""}},has:function(F,E){return F&&o.inArray(E,(F.className||F).toString().split(/\s+/))>-1}},swap:function(H,G,I){var E={};for(var F in G){E[F]=H.style[F];H.style[F]=G[F]}I.call(H);for(var F in G){H.style[F]=E[F]}},css:function(H,F,J,E){if(F=="width"||F=="height"){var L,G={position:"absolute",visibility:"hidden",display:"block"},K=F=="width"?["Left","Right"]:["Top","Bottom"];function I(){L=F=="width"?H.offsetWidth:H.offsetHeight;if(E==="border"){return}o.each(K,function(){if(!E){L-=parseFloat(o.curCSS(H,"padding"+this,true))||0}if(E==="margin"){L+=parseFloat(o.curCSS(H,"margin"+this,true))||0}else{L-=parseFloat(o.curCSS(H,"border"+this+"Width",true))||0}})}if(H.offsetWidth!==0){I()}else{o.swap(H,G,I)}return Math.max(0,Math.round(L))}return o.curCSS(H,F,J)},curCSS:function(I,F,G){var L,E=I.style;if(F=="opacity"&&!o.support.opacity){L=o.attr(E,"opacity");return L==""?"1":L}if(F.match(/float/i)){F=w}if(!G&&E&&E[F]){L=E[F]}else{if(q.getComputedStyle){if(F.match(/float/i)){F="float"}F=F.replace(/([A-Z])/g,"-$1").toLowerCase();var M=q.getComputedStyle(I,null);if(M){L=M.getPropertyValue(F)}if(F=="opacity"&&L==""){L="1"}}else{if(I.currentStyle){var J=F.replace(/\-(\w)/g,function(N,O){return O.toUpperCase()});L=I.currentStyle[F]||I.currentStyle[J];if(!/^\d+(px)?$/i.test(L)&&/^\d/.test(L)){var H=E.left,K=I.runtimeStyle.left;I.runtimeStyle.left=I.currentStyle.left;E.left=L||0;L=E.pixelLeft+"px";E.left=H;I.runtimeStyle.left=K}}}}return L},clean:function(F,K,I){K=K||document;if(typeof K.createElement==="undefined"){K=K.ownerDocument||K[0]&&K[0].ownerDocument||document}if(!I&&F.length===1&&typeof F[0]==="string"){var H=/^<(\w+)\s*\/?>$/.exec(F[0]);if(H){return[K.createElement(H[1])]}}var G=[],E=[],L=K.createElement("div");o.each(F,function(P,S){if(typeof S==="number"){S+=""}if(!S){return}if(typeof S==="string"){S=S.replace(/(<(\w+)[^>]*?)\/>/g,function(U,V,T){return T.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?U:V+"></"+T+">"});var O=S.replace(/^\s+/,"").substring(0,10).toLowerCase();var Q=!O.indexOf("<opt")&&[1,"<select multiple='multiple'>","</select>"]||!O.indexOf("<leg")&&[1,"<fieldset>","</fieldset>"]||O.match(/^<(thead|tbody|tfoot|colg|cap)/)&&[1,"<table>","</table>"]||!O.indexOf("<tr")&&[2,"<table><tbody>","</tbody></table>"]||(!O.indexOf("<td")||!O.indexOf("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||!O.indexOf("<col")&&[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||!o.support.htmlSerialize&&[1,"div<div>","</div>"]||[0,"",""];L.innerHTML=Q[1]+S+Q[2];while(Q[0]--){L=L.lastChild}if(!o.support.tbody){var R=/<tbody/i.test(S),N=!O.indexOf("<table")&&!R?L.firstChild&&L.firstChild.childNodes:Q[1]=="<table>"&&!R?L.childNodes:[];for(var M=N.length-1;M>=0;--M){if(o.nodeName(N[M],"tbody")&&!N[M].childNodes.length){N[M].parentNode.removeChild(N[M])}}}if(!o.support.leadingWhitespace&&/^\s/.test(S)){L.insertBefore(K.createTextNode(S.match(/^\s*/)[0]),L.firstChild)}S=o.makeArray(L.childNodes)}if(S.nodeType){G.push(S)}else{G=o.merge(G,S)}});if(I){for(var J=0;G[J];J++){if(o.nodeName(G[J],"script")&&(!G[J].type||G[J].type.toLowerCase()==="text/javascript")){E.push(G[J].parentNode?G[J].parentNode.removeChild(G[J]):G[J])}else{if(G[J].nodeType===1){G.splice.apply(G,[J+1,0].concat(o.makeArray(G[J].getElementsByTagName("script"))))}I.appendChild(G[J])}}return E}return G},attr:function(J,G,K){if(!J||J.nodeType==3||J.nodeType==8){return g}var H=!o.isXMLDoc(J),L=K!==g;G=H&&o.props[G]||G;if(J.tagName){var F=/href|src|style/.test(G);if(G=="selected"&&J.parentNode){J.parentNode.selectedIndex}if(G in J&&H&&!F){if(L){if(G=="type"&&o.nodeName(J,"input")&&J.parentNode){throw"type property can't be changed"}J[G]=K}if(o.nodeName(J,"form")&&J.getAttributeNode(G)){return J.getAttributeNode(G).nodeValue}if(G=="tabIndex"){var I=J.getAttributeNode("tabIndex");return I&&I.specified?I.value:J.nodeName.match(/(button|input|object|select|textarea)/i)?0:J.nodeName.match(/^(a|area)$/i)&&J.href?0:g}return J[G]}if(!o.support.style&&H&&G=="style"){return o.attr(J.style,"cssText",K)}if(L){J.setAttribute(G,""+K)}var E=!o.support.hrefNormalized&&H&&F?J.getAttribute(G,2):J.getAttribute(G);return E===null?g:E}if(!o.support.opacity&&G=="opacity"){if(L){J.zoom=1;J.filter=(J.filter||"").replace(/alpha\([^)]*\)/,"")+(parseInt(K)+""=="NaN"?"":"alpha(opacity="+K*100+")")}return J.filter&&J.filter.indexOf("opacity=")>=0?(parseFloat(J.filter.match(/opacity=([^)]*)/)[1])/100)+"":""}G=G.replace(/-([a-z])/ig,function(M,N){return N.toUpperCase()});if(L){J[G]=K}return J[G]},trim:function(E){return(E||"").replace(/^\s+|\s+$/g,"")},makeArray:function(G){var E=[];if(G!=null){var F=G.length;if(F==null||typeof G==="string"||o.isFunction(G)||G.setInterval){E[0]=G}else{while(F){E[--F]=G[F]}}}return E},inArray:function(G,H){for(var E=0,F=H.length;E<F;E++){if(H[E]===G){return E}}return -1},merge:function(H,E){var F=0,G,I=H.length;if(!o.support.getAll){while((G=E[F++])!=null){if(G.nodeType!=8){H[I++]=G}}}else{while((G=E[F++])!=null){H[I++]=G}}return H},unique:function(K){var F=[],E={};try{for(var G=0,H=K.length;G<H;G++){var J=o.data(K[G]);if(!E[J]){E[J]=true;F.push(K[G])}}}catch(I){F=K}return F},grep:function(F,J,E){var G=[];for(var H=0,I=F.length;H<I;H++){if(!E!=!J(F[H],H)){G.push(F[H])}}return G},map:function(E,J){var F=[];for(var G=0,H=E.length;G<H;G++){var I=J(E[G],G);if(I!=null){F[F.length]=I}}return F.concat.apply([],F)}});var C=navigator.userAgent.toLowerCase();o.browser={version:(C.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[0,"0"])[1],safari:/webkit/.test(C),opera:/opera/.test(C),msie:/msie/.test(C)&&!/opera/.test(C),mozilla:/mozilla/.test(C)&&!/(compatible|webkit)/.test(C)};o.each({parent:function(E){return E.parentNode},parents:function(E){return o.dir(E,"parentNode")},next:function(E){return o.nth(E,2,"nextSibling")},prev:function(E){return o.nth(E,2,"previousSibling")},nextAll:function(E){return o.dir(E,"nextSibling")},prevAll:function(E){return o.dir(E,"previousSibling")},siblings:function(E){return o.sibling(E.parentNode.firstChild,E)},children:function(E){return o.sibling(E.firstChild)},contents:function(E){return o.nodeName(E,"iframe")?E.contentDocument||E.contentWindow.document:o.makeArray(E.childNodes)}},function(E,F){o.fn[E]=function(G){var H=o.map(this,F);if(G&&typeof G=="string"){H=o.multiFilter(G,H)}return this.pushStack(o.unique(H),E,G)}});o.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(E,F){o.fn[E]=function(G){var J=[],L=o(G);for(var K=0,H=L.length;K<H;K++){var I=(K>0?this.clone(true):this).get();o.fn[F].apply(o(L[K]),I);J=J.concat(I)}return this.pushStack(J,E,G)}});o.each({removeAttr:function(E){o.attr(this,E,"");if(this.nodeType==1){this.removeAttribute(E)}},addClass:function(E){o.className.add(this,E)},removeClass:function(E){o.className.remove(this,E)},toggleClass:function(F,E){if(typeof E!=="boolean"){E=!o.className.has(this,F)}o.className[E?"add":"remove"](this,F)},remove:function(E){if(!E||o.filter(E,[this]).length){o("*",this).add([this]).each(function(){o.event.remove(this);o.removeData(this)});if(this.parentNode){this.parentNode.removeChild(this)}}},empty:function(){o(this).children().remove();while(this.firstChild){this.removeChild(this.firstChild)}}},function(E,F){o.fn[E]=function(){return this.each(F,arguments)}});function j(E,F){return E[0]&&parseInt(o.curCSS(E[0],F,true),10)||0}var h="jQuery"+e(),v=0,A={};o.extend({cache:{},data:function(F,E,G){F=F==l?A:F;var H=F[h];if(!H){H=F[h]=++v}if(E&&!o.cache[H]){o.cache[H]={}}if(G!==g){o.cache[H][E]=G}return E?o.cache[H][E]:H},removeData:function(F,E){F=F==l?A:F;var H=F[h];if(E){if(o.cache[H]){delete o.cache[H][E];E="";for(E in o.cache[H]){break}if(!E){o.removeData(F)}}}else{try{delete F[h]}catch(G){if(F.removeAttribute){F.removeAttribute(h)}}delete o.cache[H]}},queue:function(F,E,H){if(F){E=(E||"fx")+"queue";var G=o.data(F,E);if(!G||o.isArray(H)){G=o.data(F,E,o.makeArray(H))}else{if(H){G.push(H)}}}return G},dequeue:function(H,G){var E=o.queue(H,G),F=E.shift();if(!G||G==="fx"){F=E[0]}if(F!==g){F.call(H)}}});o.fn.extend({data:function(E,G){var H=E.split(".");H[1]=H[1]?"."+H[1]:"";if(G===g){var F=this.triggerHandler("getData"+H[1]+"!",[H[0]]);if(F===g&&this.length){F=o.data(this[0],E)}return F===g&&H[1]?this.data(H[0]):F}else{return this.trigger("setData"+H[1]+"!",[H[0],G]).each(function(){o.data(this,E,G)})}},removeData:function(E){return this.each(function(){o.removeData(this,E)})},queue:function(E,F){if(typeof E!=="string"){F=E;E="fx"}if(F===g){return o.queue(this[0],E)}return this.each(function(){var G=o.queue(this,E,F);if(E=="fx"&&G.length==1){G[0].call(this)}})},dequeue:function(E){return this.each(function(){o.dequeue(this,E)})}});
+/*
+ * Sizzle CSS Selector Engine - v0.9.3
+ *  Copyright 2009, The Dojo Foundation
+ *  Released under the MIT, BSD, and GPL Licenses.
+ *  More information: http://sizzlejs.com/
+ */
+(function(){var R=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,L=0,H=Object.prototype.toString;var F=function(Y,U,ab,ac){ab=ab||[];U=U||document;if(U.nodeType!==1&&U.nodeType!==9){return[]}if(!Y||typeof Y!=="string"){return ab}var Z=[],W,af,ai,T,ad,V,X=true;R.lastIndex=0;while((W=R.exec(Y))!==null){Z.push(W[1]);if(W[2]){V=RegExp.rightContext;break}}if(Z.length>1&&M.exec(Y)){if(Z.length===2&&I.relative[Z[0]]){af=J(Z[0]+Z[1],U)}else{af=I.relative[Z[0]]?[U]:F(Z.shift(),U);while(Z.length){Y=Z.shift();if(I.relative[Y]){Y+=Z.shift()}af=J(Y,af)}}}else{var ae=ac?{expr:Z.pop(),set:E(ac)}:F.find(Z.pop(),Z.length===1&&U.parentNode?U.parentNode:U,Q(U));af=F.filter(ae.expr,ae.set);if(Z.length>0){ai=E(af)}else{X=false}while(Z.length){var ah=Z.pop(),ag=ah;if(!I.relative[ah]){ah=""}else{ag=Z.pop()}if(ag==null){ag=U}I.relative[ah](ai,ag,Q(U))}}if(!ai){ai=af}if(!ai){throw"Syntax error, unrecognized expression: "+(ah||Y)}if(H.call(ai)==="[object Array]"){if(!X){ab.push.apply(ab,ai)}else{if(U.nodeType===1){for(var aa=0;ai[aa]!=null;aa++){if(ai[aa]&&(ai[aa]===true||ai[aa].nodeType===1&&K(U,ai[aa]))){ab.push(af[aa])}}}else{for(var aa=0;ai[aa]!=null;aa++){if(ai[aa]&&ai[aa].nodeType===1){ab.push(af[aa])}}}}}else{E(ai,ab)}if(V){F(V,U,ab,ac);if(G){hasDuplicate=false;ab.sort(G);if(hasDuplicate){for(var aa=1;aa<ab.length;aa++){if(ab[aa]===ab[aa-1]){ab.splice(aa--,1)}}}}}return ab};F.matches=function(T,U){return F(T,null,null,U)};F.find=function(aa,T,ab){var Z,X;if(!aa){return[]}for(var W=0,V=I.order.length;W<V;W++){var Y=I.order[W],X;if((X=I.match[Y].exec(aa))){var U=RegExp.leftContext;if(U.substr(U.length-1)!=="\\"){X[1]=(X[1]||"").replace(/\\/g,"");Z=I.find[Y](X,T,ab);if(Z!=null){aa=aa.replace(I.match[Y],"");break}}}}if(!Z){Z=T.getElementsByTagName("*")}return{set:Z,expr:aa}};F.filter=function(ad,ac,ag,W){var V=ad,ai=[],aa=ac,Y,T,Z=ac&&ac[0]&&Q(ac[0]);while(ad&&ac.length){for(var ab in I.filter){if((Y=I.match[ab].exec(ad))!=null){var U=I.filter[ab],ah,af;T=false;if(aa==ai){ai=[]}if(I.preFilter[ab]){Y=I.preFilter[ab](Y,aa,ag,ai,W,Z);if(!Y){T=ah=true}else{if(Y===true){continue}}}if(Y){for(var X=0;(af=aa[X])!=null;X++){if(af){ah=U(af,Y,X,aa);var ae=W^!!ah;if(ag&&ah!=null){if(ae){T=true}else{aa[X]=false}}else{if(ae){ai.push(af);T=true}}}}}if(ah!==g){if(!ag){aa=ai}ad=ad.replace(I.match[ab],"");if(!T){return[]}break}}}if(ad==V){if(T==null){throw"Syntax error, unrecognized expression: "+ad}else{break}}V=ad}return aa};var I=F.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]*)+)\2\))?/},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(T){return T.getAttribute("href")}},relative:{"+":function(aa,T,Z){var X=typeof T==="string",ab=X&&!/\W/.test(T),Y=X&&!ab;if(ab&&!Z){T=T.toUpperCase()}for(var W=0,V=aa.length,U;W<V;W++){if((U=aa[W])){while((U=U.previousSibling)&&U.nodeType!==1){}aa[W]=Y||U&&U.nodeName===T?U||false:U===T}}if(Y){F.filter(T,aa,true)}},">":function(Z,U,aa){var X=typeof U==="string";if(X&&!/\W/.test(U)){U=aa?U:U.toUpperCase();for(var V=0,T=Z.length;V<T;V++){var Y=Z[V];if(Y){var W=Y.parentNode;Z[V]=W.nodeName===U?W:false}}}else{for(var V=0,T=Z.length;V<T;V++){var Y=Z[V];if(Y){Z[V]=X?Y.parentNode:Y.parentNode===U}}if(X){F.filter(U,Z,true)}}},"":function(W,U,Y){var V=L++,T=S;if(!U.match(/\W/)){var X=U=Y?U:U.toUpperCase();T=P}T("parentNode",U,V,W,X,Y)},"~":function(W,U,Y){var V=L++,T=S;if(typeof U==="string"&&!U.match(/\W/)){var X=U=Y?U:U.toUpperCase();T=P}T("previousSibling",U,V,W,X,Y)}},find:{ID:function(U,V,W){if(typeof V.getElementById!=="undefined"&&!W){var T=V.getElementById(U[1]);return T?[T]:[]}},NAME:function(V,Y,Z){if(typeof Y.getElementsByName!=="undefined"){var U=[],X=Y.getElementsByName(V[1]);for(var W=0,T=X.length;W<T;W++){if(X[W].getAttribute("name")===V[1]){U.push(X[W])}}return U.length===0?null:U}},TAG:function(T,U){return U.getElementsByTagName(T[1])}},preFilter:{CLASS:function(W,U,V,T,Z,aa){W=" "+W[1].replace(/\\/g,"")+" ";if(aa){return W}for(var X=0,Y;(Y=U[X])!=null;X++){if(Y){if(Z^(Y.className&&(" "+Y.className+" ").indexOf(W)>=0)){if(!V){T.push(Y)}}else{if(V){U[X]=false}}}}return false},ID:function(T){return T[1].replace(/\\/g,"")},TAG:function(U,T){for(var V=0;T[V]===false;V++){}return T[V]&&Q(T[V])?U[1]:U[1].toUpperCase()},CHILD:function(T){if(T[1]=="nth"){var U=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(T[2]=="even"&&"2n"||T[2]=="odd"&&"2n+1"||!/\D/.test(T[2])&&"0n+"+T[2]||T[2]);T[2]=(U[1]+(U[2]||1))-0;T[3]=U[3]-0}T[0]=L++;return T},ATTR:function(X,U,V,T,Y,Z){var W=X[1].replace(/\\/g,"");if(!Z&&I.attrMap[W]){X[1]=I.attrMap[W]}if(X[2]==="~="){X[4]=" "+X[4]+" "}return X},PSEUDO:function(X,U,V,T,Y){if(X[1]==="not"){if(X[3].match(R).length>1||/^\w/.test(X[3])){X[3]=F(X[3],null,null,U)}else{var W=F.filter(X[3],U,V,true^Y);if(!V){T.push.apply(T,W)}return false}}else{if(I.match.POS.test(X[0])||I.match.CHILD.test(X[0])){return true}}return X},POS:function(T){T.unshift(true);return T}},filters:{enabled:function(T){return T.disabled===false&&T.type!=="hidden"},disabled:function(T){return T.disabled===true},checked:function(T){return T.checked===true},selected:function(T){T.parentNode.selectedIndex;return T.selected===true},parent:function(T){return !!T.firstChild},empty:function(T){return !T.firstChild},has:function(V,U,T){return !!F(T[3],V).length},header:function(T){return/h\d/i.test(T.nodeName)},text:function(T){return"text"===T.type},radio:function(T){return"radio"===T.type},checkbox:function(T){return"checkbox"===T.type},file:function(T){return"file"===T.type},password:function(T){return"password"===T.type},submit:function(T){return"submit"===T.type},image:function(T){return"image"===T.type},reset:function(T){return"reset"===T.type},button:function(T){return"button"===T.type||T.nodeName.toUpperCase()==="BUTTON"},input:function(T){return/input|select|textarea|button/i.test(T.nodeName)}},setFilters:{first:function(U,T){return T===0},last:function(V,U,T,W){return U===W.length-1},even:function(U,T){return T%2===0},odd:function(U,T){return T%2===1},lt:function(V,U,T){return U<T[3]-0},gt:function(V,U,T){return U>T[3]-0},nth:function(V,U,T){return T[3]-0==U},eq:function(V,U,T){return T[3]-0==U}},filter:{PSEUDO:function(Z,V,W,aa){var U=V[1],X=I.filters[U];if(X){return X(Z,W,V,aa)}else{if(U==="contains"){return(Z.textContent||Z.innerText||"").indexOf(V[3])>=0}else{if(U==="not"){var Y=V[3];for(var W=0,T=Y.length;W<T;W++){if(Y[W]===Z){return false}}return true}}}},CHILD:function(T,W){var Z=W[1],U=T;switch(Z){case"only":case"first":while(U=U.previousSibling){if(U.nodeType===1){return false}}if(Z=="first"){return true}U=T;case"last":while(U=U.nextSibling){if(U.nodeType===1){return false}}return true;case"nth":var V=W[2],ac=W[3];if(V==1&&ac==0){return true}var Y=W[0],ab=T.parentNode;if(ab&&(ab.sizcache!==Y||!T.nodeIndex)){var X=0;for(U=ab.firstChild;U;U=U.nextSibling){if(U.nodeType===1){U.nodeIndex=++X}}ab.sizcache=Y}var aa=T.nodeIndex-ac;if(V==0){return aa==0}else{return(aa%V==0&&aa/V>=0)}}},ID:function(U,T){return U.nodeType===1&&U.getAttribute("id")===T},TAG:function(U,T){return(T==="*"&&U.nodeType===1)||U.nodeName===T},CLASS:function(U,T){return(" "+(U.className||U.getAttribute("class"))+" ").indexOf(T)>-1},ATTR:function(Y,W){var V=W[1],T=I.attrHandle[V]?I.attrHandle[V](Y):Y[V]!=null?Y[V]:Y.getAttribute(V),Z=T+"",X=W[2],U=W[4];return T==null?X==="!=":X==="="?Z===U:X==="*="?Z.indexOf(U)>=0:X==="~="?(" "+Z+" ").indexOf(U)>=0:!U?Z&&T!==false:X==="!="?Z!=U:X==="^="?Z.indexOf(U)===0:X==="$="?Z.substr(Z.length-U.length)===U:X==="|="?Z===U||Z.substr(0,U.length+1)===U+"-":false},POS:function(X,U,V,Y){var T=U[2],W=I.setFilters[T];if(W){return W(X,V,U,Y)}}}};var M=I.match.POS;for(var O in I.match){I.match[O]=RegExp(I.match[O].source+/(?![^\[]*\])(?![^\(]*\))/.source)}var E=function(U,T){U=Array.prototype.slice.call(U);if(T){T.push.apply(T,U);return T}return U};try{Array.prototype.slice.call(document.documentElement.childNodes)}catch(N){E=function(X,W){var U=W||[];if(H.call(X)==="[object Array]"){Array.prototype.push.apply(U,X)}else{if(typeof X.length==="number"){for(var V=0,T=X.length;V<T;V++){U.push(X[V])}}else{for(var V=0;X[V];V++){U.push(X[V])}}}return U}}var G;if(document.documentElement.compareDocumentPosition){G=function(U,T){var V=U.compareDocumentPosition(T)&4?-1:U===T?0:1;if(V===0){hasDuplicate=true}return V}}else{if("sourceIndex" in document.documentElement){G=function(U,T){var V=U.sourceIndex-T.sourceIndex;if(V===0){hasDuplicate=true}return V}}else{if(document.createRange){G=function(W,U){var V=W.ownerDocument.createRange(),T=U.ownerDocument.createRange();V.selectNode(W);V.collapse(true);T.selectNode(U);T.collapse(true);var X=V.compareBoundaryPoints(Range.START_TO_END,T);if(X===0){hasDuplicate=true}return X}}}}(function(){var U=document.createElement("form"),V="script"+(new Date).getTime();U.innerHTML="<input name='"+V+"'/>";var T=document.documentElement;T.insertBefore(U,T.firstChild);if(!!document.getElementById(V)){I.find.ID=function(X,Y,Z){if(typeof Y.getElementById!=="undefined"&&!Z){var W=Y.getElementById(X[1]);return W?W.id===X[1]||typeof W.getAttributeNode!=="undefined"&&W.getAttributeNode("id").nodeValue===X[1]?[W]:g:[]}};I.filter.ID=function(Y,W){var X=typeof Y.getAttributeNode!=="undefined"&&Y.getAttributeNode("id");return Y.nodeType===1&&X&&X.nodeValue===W}}T.removeChild(U)})();(function(){var T=document.createElement("div");T.appendChild(document.createComment(""));if(T.getElementsByTagName("*").length>0){I.find.TAG=function(U,Y){var X=Y.getElementsByTagName(U[1]);if(U[1]==="*"){var W=[];for(var V=0;X[V];V++){if(X[V].nodeType===1){W.push(X[V])}}X=W}return X}}T.innerHTML="<a href='#'></a>";if(T.firstChild&&typeof T.firstChild.getAttribute!=="undefined"&&T.firstChild.getAttribute("href")!=="#"){I.attrHandle.href=function(U){return U.getAttribute("href",2)}}})();if(document.querySelectorAll){(function(){var T=F,U=document.createElement("div");U.innerHTML="<p class='TEST'></p>";if(U.querySelectorAll&&U.querySelectorAll(".TEST").length===0){return}F=function(Y,X,V,W){X=X||document;if(!W&&X.nodeType===9&&!Q(X)){try{return E(X.querySelectorAll(Y),V)}catch(Z){}}return T(Y,X,V,W)};F.find=T.find;F.filter=T.filter;F.selectors=T.selectors;F.matches=T.matches})()}if(document.getElementsByClassName&&document.documentElement.getElementsByClassName){(function(){var T=document.createElement("div");T.innerHTML="<div class='test e'></div><div class='test'></div>";if(T.getElementsByClassName("e").length===0){return}T.lastChild.className="e";if(T.getElementsByClassName("e").length===1){return}I.order.splice(1,0,"CLASS");I.find.CLASS=function(U,V,W){if(typeof V.getElementsByClassName!=="undefined"&&!W){return V.getElementsByClassName(U[1])}}})()}function P(U,Z,Y,ad,aa,ac){var ab=U=="previousSibling"&&!ac;for(var W=0,V=ad.length;W<V;W++){var T=ad[W];if(T){if(ab&&T.nodeType===1){T.sizcache=Y;T.sizset=W}T=T[U];var X=false;while(T){if(T.sizcache===Y){X=ad[T.sizset];break}if(T.nodeType===1&&!ac){T.sizcache=Y;T.sizset=W}if(T.nodeName===Z){X=T;break}T=T[U]}ad[W]=X}}}function S(U,Z,Y,ad,aa,ac){var ab=U=="previousSibling"&&!ac;for(var W=0,V=ad.length;W<V;W++){var T=ad[W];if(T){if(ab&&T.nodeType===1){T.sizcache=Y;T.sizset=W}T=T[U];var X=false;while(T){if(T.sizcache===Y){X=ad[T.sizset];break}if(T.nodeType===1){if(!ac){T.sizcache=Y;T.sizset=W}if(typeof Z!=="string"){if(T===Z){X=true;break}}else{if(F.filter(Z,[T]).length>0){X=T;break}}}T=T[U]}ad[W]=X}}}var K=document.compareDocumentPosition?function(U,T){return U.compareDocumentPosition(T)&16}:function(U,T){return U!==T&&(U.contains?U.contains(T):true)};var Q=function(T){return T.nodeType===9&&T.documentElement.nodeName!=="HTML"||!!T.ownerDocument&&Q(T.ownerDocument)};var J=function(T,aa){var W=[],X="",Y,V=aa.nodeType?[aa]:aa;while((Y=I.match.PSEUDO.exec(T))){X+=Y[0];T=T.replace(I.match.PSEUDO,"")}T=I.relative[T]?T+"*":T;for(var Z=0,U=V.length;Z<U;Z++){F(T,V[Z],W)}return F.filter(X,W)};o.find=F;o.filter=F.filter;o.expr=F.selectors;o.expr[":"]=o.expr.filters;F.selectors.filters.hidden=function(T){return T.offsetWidth===0||T.offsetHeight===0};F.selectors.filters.visible=function(T){return T.offsetWidth>0||T.offsetHeight>0};F.selectors.filters.animated=function(T){return o.grep(o.timers,function(U){return T===U.elem}).length};o.multiFilter=function(V,T,U){if(U){V=":not("+V+")"}return F.matches(V,T)};o.dir=function(V,U){var T=[],W=V[U];while(W&&W!=document){if(W.nodeType==1){T.push(W)}W=W[U]}return T};o.nth=function(X,T,V,W){T=T||1;var U=0;for(;X;X=X[V]){if(X.nodeType==1&&++U==T){break}}return X};o.sibling=function(V,U){var T=[];for(;V;V=V.nextSibling){if(V.nodeType==1&&V!=U){T.push(V)}}return T};return;l.Sizzle=F})();o.event={add:function(I,F,H,K){if(I.nodeType==3||I.nodeType==8){return}if(I.setInterval&&I!=l){I=l}if(!H.guid){H.guid=this.guid++}if(K!==g){var G=H;H=this.proxy(G);H.data=K}var E=o.data(I,"events")||o.data(I,"events",{}),J=o.data(I,"handle")||o.data(I,"handle",function(){return typeof o!=="undefined"&&!o.event.triggered?o.event.handle.apply(arguments.callee.elem,arguments):g});J.elem=I;o.each(F.split(/\s+/),function(M,N){var O=N.split(".");N=O.shift();H.type=O.slice().sort().join(".");var L=E[N];if(o.event.specialAll[N]){o.event.specialAll[N].setup.call(I,K,O)}if(!L){L=E[N]={};if(!o.event.special[N]||o.event.special[N].setup.call(I,K,O)===false){if(I.addEventListener){I.addEventListener(N,J,false)}else{if(I.attachEvent){I.attachEvent("on"+N,J)}}}}L[H.guid]=H;o.event.global[N]=true});I=null},guid:1,global:{},remove:function(K,H,J){if(K.nodeType==3||K.nodeType==8){return}var G=o.data(K,"events"),F,E;if(G){if(H===g||(typeof H==="string"&&H.charAt(0)==".")){for(var I in G){this.remove(K,I+(H||""))}}else{if(H.type){J=H.handler;H=H.type}o.each(H.split(/\s+/),function(M,O){var Q=O.split(".");O=Q.shift();var N=RegExp("(^|\\.)"+Q.slice().sort().join(".*\\.")+"(\\.|$)");if(G[O]){if(J){delete G[O][J.guid]}else{for(var P in G[O]){if(N.test(G[O][P].type)){delete G[O][P]}}}if(o.event.specialAll[O]){o.event.specialAll[O].teardown.call(K,Q)}for(F in G[O]){break}if(!F){if(!o.event.special[O]||o.event.special[O].teardown.call(K,Q)===false){if(K.removeEventListener){K.removeEventListener(O,o.data(K,"handle"),false)}else{if(K.detachEvent){K.detachEvent("on"+O,o.data(K,"handle"))}}}F=null;delete G[O]}}})}for(F in G){break}if(!F){var L=o.data(K,"handle");if(L){L.elem=null}o.removeData(K,"events");o.removeData(K,"handle")}}},trigger:function(I,K,H,E){var G=I.type||I;if(!E){I=typeof I==="object"?I[h]?I:o.extend(o.Event(G),I):o.Event(G);if(G.indexOf("!")>=0){I.type=G=G.slice(0,-1);I.exclusive=true}if(!H){I.stopPropagation();if(this.global[G]){o.each(o.cache,function(){if(this.events&&this.events[G]){o.event.trigger(I,K,this.handle.elem)}})}}if(!H||H.nodeType==3||H.nodeType==8){return g}I.result=g;I.target=H;K=o.makeArray(K);K.unshift(I)}I.currentTarget=H;var J=o.data(H,"handle");if(J){J.apply(H,K)}if((!H[G]||(o.nodeName(H,"a")&&G=="click"))&&H["on"+G]&&H["on"+G].apply(H,K)===false){I.result=false}if(!E&&H[G]&&!I.isDefaultPrevented()&&!(o.nodeName(H,"a")&&G=="click")){this.triggered=true;try{H[G]()}catch(L){}}this.triggered=false;if(!I.isPropagationStopped()){var F=H.parentNode||H.ownerDocument;if(F){o.event.trigger(I,K,F,true)}}},handle:function(K){var J,E;K=arguments[0]=o.event.fix(K||l.event);K.currentTarget=this;var L=K.type.split(".");K.type=L.shift();J=!L.length&&!K.exclusive;var I=RegExp("(^|\\.)"+L.slice().sort().join(".*\\.")+"(\\.|$)");E=(o.data(this,"events")||{})[K.type];for(var G in E){var H=E[G];if(J||I.test(H.type)){K.handler=H;K.data=H.data;var F=H.apply(this,arguments);if(F!==g){K.result=F;if(F===false){K.preventDefault();K.stopPropagation()}}if(K.isImmediatePropagationStopped()){break}}}},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(H){if(H[h]){return H}var F=H;H=o.Event(F);for(var G=this.props.length,J;G;){J=this.props[--G];H[J]=F[J]}if(!H.target){H.target=H.srcElement||document}if(H.target.nodeType==3){H.target=H.target.parentNode}if(!H.relatedTarget&&H.fromElement){H.relatedTarget=H.fromElement==H.target?H.toElement:H.fromElement}if(H.pageX==null&&H.clientX!=null){var I=document.documentElement,E=document.body;H.pageX=H.clientX+(I&&I.scrollLeft||E&&E.scrollLeft||0)-(I.clientLeft||0);H.pageY=H.clientY+(I&&I.scrollTop||E&&E.scrollTop||0)-(I.clientTop||0)}if(!H.which&&((H.charCode||H.charCode===0)?H.charCode:H.keyCode)){H.which=H.charCode||H.keyCode}if(!H.metaKey&&H.ctrlKey){H.metaKey=H.ctrlKey}if(!H.which&&H.button){H.which=(H.button&1?1:(H.button&2?3:(H.button&4?2:0)))}return H},proxy:function(F,E){E=E||function(){return F.apply(this,arguments)};E.guid=F.guid=F.guid||E.guid||this.guid++;return E},special:{ready:{setup:B,teardown:function(){}}},specialAll:{live:{setup:function(E,F){o.event.add(this,F[0],c)},teardown:function(G){if(G.length){var E=0,F=RegExp("(^|\\.)"+G[0]+"(\\.|$)");o.each((o.data(this,"events").live||{}),function(){if(F.test(this.type)){E++}});if(E<1){o.event.remove(this,G[0],c)}}}}}};o.Event=function(E){if(!this.preventDefault){return new o.Event(E)}if(E&&E.type){this.originalEvent=E;this.type=E.type}else{this.type=E}this.timeStamp=e();this[h]=true};function k(){return false}function u(){return true}o.Event.prototype={preventDefault:function(){this.isDefaultPrevented=u;var E=this.originalEvent;if(!E){return}if(E.preventDefault){E.preventDefault()}E.returnValue=false},stopPropagation:function(){this.isPropagationStopped=u;var E=this.originalEvent;if(!E){return}if(E.stopPropagation){E.stopPropagation()}E.cancelBubble=true},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=u;this.stopPropagation()},isDefaultPrevented:k,isPropagationStopped:k,isImmediatePropagationStopped:k};var a=function(F){var E=F.relatedTarget;while(E&&E!=this){try{E=E.parentNode}catch(G){E=this}}if(E!=this){F.type=F.data;o.event.handle.apply(this,arguments)}};o.each({mouseover:"mouseenter",mouseout:"mouseleave"},function(F,E){o.event.special[E]={setup:function(){o.event.add(this,F,a,E)},teardown:function(){o.event.remove(this,F,a)}}});o.fn.extend({bind:function(F,G,E){return F=="unload"?this.one(F,G,E):this.each(function(){o.event.add(this,F,E||G,E&&G)})},one:function(G,H,F){var E=o.event.proxy(F||H,function(I){o(this).unbind(I,E);return(F||H).apply(this,arguments)});return this.each(function(){o.event.add(this,G,E,F&&H)})},unbind:function(F,E){return this.each(function(){o.event.remove(this,F,E)})},trigger:function(E,F){return this.each(function(){o.event.trigger(E,F,this)})},triggerHandler:function(E,G){if(this[0]){var F=o.Event(E);F.preventDefault();F.stopPropagation();o.event.trigger(F,G,this[0]);return F.result}},toggle:function(G){var E=arguments,F=1;while(F<E.length){o.event.proxy(G,E[F++])}return this.click(o.event.proxy(G,function(H){this.lastToggle=(this.lastToggle||0)%F;H.preventDefault();return E[this.lastToggle++].apply(this,arguments)||false}))},hover:function(E,F){return this.mouseenter(E).mouseleave(F)},ready:function(E){B();if(o.isReady){E.call(document,o)}else{o.readyList.push(E)}return this},live:function(G,F){var E=o.event.proxy(F);E.guid+=this.selector+G;o(document).bind(i(G,this.selector),this.selector,E);return this},die:function(F,E){o(document).unbind(i(F,this.selector),E?{guid:E.guid+this.selector+F}:null);return this}});function c(H){var E=RegExp("(^|\\.)"+H.type+"(\\.|$)"),G=true,F=[];o.each(o.data(this,"events").live||[],function(I,J){if(E.test(J.type)){var K=o(H.target).closest(J.data)[0];if(K){F.push({elem:K,fn:J})}}});F.sort(function(J,I){return o.data(J.elem,"closest")-o.data(I.elem,"closest")});o.each(F,function(){if(this.fn.call(this.elem,H,this.fn.data)===false){return(G=false)}});return G}function i(F,E){return["live",F,E.replace(/\./g,"`").replace(/ /g,"|")].join(".")}o.extend({isReady:false,readyList:[],ready:function(){if(!o.isReady){o.isReady=true;if(o.readyList){o.each(o.readyList,function(){this.call(document,o)});o.readyList=null}o(document).triggerHandler("ready")}}});var x=false;function B(){if(x){return}x=true;if(document.addEventListener){document.addEventListener("DOMContentLoaded",function(){document.removeEventListener("DOMContentLoaded",arguments.callee,false);o.ready()},false)}else{if(document.attachEvent){document.attachEvent("onreadystatechange",function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",arguments.callee);o.ready()}});if(document.documentElement.doScroll&&l==l.top){(function(){if(o.isReady){return}try{document.documentElement.doScroll("left")}catch(E){setTimeout(arguments.callee,0);return}o.ready()})()}}}o.event.add(l,"load",o.ready)}o.each(("blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error").split(","),function(F,E){o.fn[E]=function(G){return G?this.bind(E,G):this.trigger(E)}});o(l).bind("unload",function(){for(var E in o.cache){if(E!=1&&o.cache[E].handle){o.event.remove(o.cache[E].handle.elem)}}});(function(){o.support={};var F=document.documentElement,G=document.createElement("script"),K=document.createElement("div"),J="script"+(new Date).getTime();K.style.display="none";K.innerHTML='   <link/><table></table><a href="/a" style="color:red;float:left;opacity:.5;">a</a><select><option>text</option></select><object><param/></object>';var H=K.getElementsByTagName("*"),E=K.getElementsByTagName("a")[0];if(!H||!H.length||!E){return}o.support={leadingWhitespace:K.firstChild.nodeType==3,tbody:!K.getElementsByTagName("tbody").length,objectAll:!!K.getElementsByTagName("object")[0].getElementsByTagName("*").length,htmlSerialize:!!K.getElementsByTagName("link").length,style:/red/.test(E.getAttribute("style")),hrefNormalized:E.getAttribute("href")==="/a",opacity:E.style.opacity==="0.5",cssFloat:!!E.style.cssFloat,scriptEval:false,noCloneEvent:true,boxModel:null};G.type="text/javascript";try{G.appendChild(document.createTextNode("window."+J+"=1;"))}catch(I){}F.insertBefore(G,F.firstChild);if(l[J]){o.support.scriptEval=true;delete l[J]}F.removeChild(G);if(K.attachEvent&&K.fireEvent){K.attachEvent("onclick",function(){o.support.noCloneEvent=false;K.detachEvent("onclick",arguments.callee)});K.cloneNode(true).fireEvent("onclick")}o(function(){var L=document.createElement("div");L.style.width=L.style.paddingLeft="1px";document.body.appendChild(L);o.boxModel=o.support.boxModel=L.offsetWidth===2;document.body.removeChild(L).style.display="none"})})();var w=o.support.cssFloat?"cssFloat":"styleFloat";o.props={"for":"htmlFor","class":"className","float":w,cssFloat:w,styleFloat:w,readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",tabindex:"tabIndex"};o.fn.extend({_load:o.fn.load,load:function(G,J,K){if(typeof G!=="string"){return this._load(G)}var I=G.indexOf(" ");if(I>=0){var E=G.slice(I,G.length);G=G.slice(0,I)}var H="GET";if(J){if(o.isFunction(J)){K=J;J=null}else{if(typeof J==="object"){J=o.param(J);H="POST"}}}var F=this;o.ajax({url:G,type:H,dataType:"html",data:J,complete:function(M,L){if(L=="success"||L=="notmodified"){F.html(E?o("<div/>").append(M.responseText.replace(/<script(.|\s)*?\/script>/g,"")).find(E):M.responseText)}if(K){F.each(K,[M.responseText,L,M])}}});return this},serialize:function(){return o.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?o.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||/select|textarea/i.test(this.nodeName)||/text|hidden|password|search/i.test(this.type))}).map(function(E,F){var G=o(this).val();return G==null?null:o.isArray(G)?o.map(G,function(I,H){return{name:F.name,value:I}}):{name:F.name,value:G}}).get()}});o.each("ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","),function(E,F){o.fn[F]=function(G){return this.bind(F,G)}});var r=e();o.extend({get:function(E,G,H,F){if(o.isFunction(G)){H=G;G=null}return o.ajax({type:"GET",url:E,data:G,success:H,dataType:F})},getScript:function(E,F){return o.get(E,null,F,"script")},getJSON:function(E,F,G){return o.get(E,F,G,"json")},post:function(E,G,H,F){if(o.isFunction(G)){H=G;G={}}return o.ajax({type:"POST",url:E,data:G,success:H,dataType:F})},ajaxSetup:function(E){o.extend(o.ajaxSettings,E)},ajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:function(){return l.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest()},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},ajax:function(M){M=o.extend(true,M,o.extend(true,{},o.ajaxSettings,M));var W,F=/=\?(&|$)/g,R,V,G=M.type.toUpperCase();if(M.data&&M.processData&&typeof M.data!=="string"){M.data=o.param(M.data)}if(M.dataType=="jsonp"){if(G=="GET"){if(!M.url.match(F)){M.url+=(M.url.match(/\?/)?"&":"?")+(M.jsonp||"callback")+"=?"}}else{if(!M.data||!M.data.match(F)){M.data=(M.data?M.data+"&":"")+(M.jsonp||"callback")+"=?"}}M.dataType="json"}if(M.dataType=="json"&&(M.data&&M.data.match(F)||M.url.match(F))){W="jsonp"+r++;if(M.data){M.data=(M.data+"").replace(F,"="+W+"$1")}M.url=M.url.replace(F,"="+W+"$1");M.dataType="script";l[W]=function(X){V=X;I();L();l[W]=g;try{delete l[W]}catch(Y){}if(H){H.removeChild(T)}}}if(M.dataType=="script"&&M.cache==null){M.cache=false}if(M.cache===false&&G=="GET"){var E=e();var U=M.url.replace(/(\?|&)_=.*?(&|$)/,"$1_="+E+"$2");M.url=U+((U==M.url)?(M.url.match(/\?/)?"&":"?")+"_="+E:"")}if(M.data&&G=="GET"){M.url+=(M.url.match(/\?/)?"&":"?")+M.data;M.data=null}if(M.global&&!o.active++){o.event.trigger("ajaxStart")}var Q=/^(\w+:)?\/\/([^\/?#]+)/.exec(M.url);if(M.dataType=="script"&&G=="GET"&&Q&&(Q[1]&&Q[1]!=location.protocol||Q[2]!=location.host)){var H=document.getElementsByTagName("head")[0];var T=document.createElement("script");T.src=M.url;if(M.scriptCharset){T.charset=M.scriptCharset}if(!W){var O=false;T.onload=T.onreadystatechange=function(){if(!O&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){O=true;I();L();T.onload=T.onreadystatechange=null;H.removeChild(T)}}}H.appendChild(T);return g}var K=false;var J=M.xhr();if(M.username){J.open(G,M.url,M.async,M.username,M.password)}else{J.open(G,M.url,M.async)}try{if(M.data){J.setRequestHeader("Content-Type",M.contentType)}if(M.ifModified){J.setRequestHeader("If-Modified-Since",o.lastModified[M.url]||"Thu, 01 Jan 1970 00:00:00 GMT")}J.setRequestHeader("X-Requested-With","XMLHttpRequest");J.setRequestHeader("Accept",M.dataType&&M.accepts[M.dataType]?M.accepts[M.dataType]+", */*":M.accepts._default)}catch(S){}if(M.beforeSend&&M.beforeSend(J,M)===false){if(M.global&&!--o.active){o.event.trigger("ajaxStop")}J.abort();return false}if(M.global){o.event.trigger("ajaxSend",[J,M])}var N=function(X){if(J.readyState==0){if(P){clearInterval(P);P=null;if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}}else{if(!K&&J&&(J.readyState==4||X=="timeout")){K=true;if(P){clearInterval(P);P=null}R=X=="timeout"?"timeout":!o.httpSuccess(J)?"error":M.ifModified&&o.httpNotModified(J,M.url)?"notmodified":"success";if(R=="success"){try{V=o.httpData(J,M.dataType,M)}catch(Z){R="parsererror"}}if(R=="success"){var Y;try{Y=J.getResponseHeader("Last-Modified")}catch(Z){}if(M.ifModified&&Y){o.lastModified[M.url]=Y}if(!W){I()}}else{o.handleError(M,J,R)}L();if(X){J.abort()}if(M.async){J=null}}}};if(M.async){var P=setInterval(N,13);if(M.timeout>0){setTimeout(function(){if(J&&!K){N("timeout")}},M.timeout)}}try{J.send(M.data)}catch(S){o.handleError(M,J,null,S)}if(!M.async){N()}function I(){if(M.success){M.success(V,R)}if(M.global){o.event.trigger("ajaxSuccess",[J,M])}}function L(){if(M.complete){M.complete(J,R)}if(M.global){o.event.trigger("ajaxComplete",[J,M])}if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}return J},handleError:function(F,H,E,G){if(F.error){F.error(H,E,G)}if(F.global){o.event.trigger("ajaxError",[H,F,G])}},active:0,httpSuccess:function(F){try{return !F.status&&location.protocol=="file:"||(F.status>=200&&F.status<300)||F.status==304||F.status==1223}catch(E){}return false},httpNotModified:function(G,E){try{var H=G.getResponseHeader("Last-Modified");return G.status==304||H==o.lastModified[E]}catch(F){}return false},httpData:function(J,H,G){var F=J.getResponseHeader("content-type"),E=H=="xml"||!H&&F&&F.indexOf("xml")>=0,I=E?J.responseXML:J.responseText;if(E&&I.documentElement.tagName=="parsererror"){throw"parsererror"}if(G&&G.dataFilter){I=G.dataFilter(I,H)}if(typeof I==="string"){if(H=="script"){o.globalEval(I)}if(H=="json"){I=l["eval"]("("+I+")")}}return I},param:function(E){var G=[];function H(I,J){G[G.length]=encodeURIComponent(I)+"="+encodeURIComponent(J)}if(o.isArray(E)||E.jquery){o.each(E,function(){H(this.name,this.value)})}else{for(var F in E){if(o.isArray(E[F])){o.each(E[F],function(){H(F,this)})}else{H(F,o.isFunction(E[F])?E[F]():E[F])}}}return G.join("&").replace(/%20/g,"+")}});var m={},n,d=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];function t(F,E){var G={};o.each(d.concat.apply([],d.slice(0,E)),function(){G[this]=F});return G}o.fn.extend({show:function(J,L){if(J){return this.animate(t("show",3),J,L)}else{for(var H=0,F=this.length;H<F;H++){var E=o.data(this[H],"olddisplay");this[H].style.display=E||"";if(o.css(this[H],"display")==="none"){var G=this[H].tagName,K;if(m[G]){K=m[G]}else{var I=o("<"+G+" />").appendTo("body");K=I.css("display");if(K==="none"){K="block"}I.remove();m[G]=K}o.data(this[H],"olddisplay",K)}}for(var H=0,F=this.length;H<F;H++){this[H].style.display=o.data(this[H],"olddisplay")||""}return this}},hide:function(H,I){if(H){return this.animate(t("hide",3),H,I)}else{for(var G=0,F=this.length;G<F;G++){var E=o.data(this[G],"olddisplay");if(!E&&E!=="none"){o.data(this[G],"olddisplay",o.css(this[G],"display"))}}for(var G=0,F=this.length;G<F;G++){this[G].style.display="none"}return this}},_toggle:o.fn.toggle,toggle:function(G,F){var E=typeof G==="boolean";return o.isFunction(G)&&o.isFunction(F)?this._toggle.apply(this,arguments):G==null||E?this.each(function(){var H=E?G:o(this).is(":hidden");o(this)[H?"show":"hide"]()}):this.animate(t("toggle",3),G,F)},fadeTo:function(E,G,F){return this.animate({opacity:G},E,F)},animate:function(I,F,H,G){var E=o.speed(F,H,G);return this[E.queue===false?"each":"queue"](function(){var K=o.extend({},E),M,L=this.nodeType==1&&o(this).is(":hidden"),J=this;for(M in I){if(I[M]=="hide"&&L||I[M]=="show"&&!L){return K.complete.call(this)}if((M=="height"||M=="width")&&this.style){K.display=o.css(this,"display");K.overflow=this.style.overflow}}if(K.overflow!=null){this.style.overflow="hidden"}K.curAnim=o.extend({},I);o.each(I,function(O,S){var R=new o.fx(J,K,O);if(/toggle|show|hide/.test(S)){R[S=="toggle"?L?"show":"hide":S](I)}else{var Q=S.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),T=R.cur(true)||0;if(Q){var N=parseFloat(Q[2]),P=Q[3]||"px";if(P!="px"){J.style[O]=(N||1)+P;T=((N||1)/R.cur(true))*T;J.style[O]=T+P}if(Q[1]){N=((Q[1]=="-="?-1:1)*N)+T}R.custom(T,N,P)}else{R.custom(T,S,"")}}});return true})},stop:function(F,E){var G=o.timers;if(F){this.queue([])}this.each(function(){for(var H=G.length-1;H>=0;H--){if(G[H].elem==this){if(E){G[H](true)}G.splice(H,1)}}});if(!E){this.dequeue()}return this}});o.each({slideDown:t("show",1),slideUp:t("hide",1),slideToggle:t("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(E,F){o.fn[E]=function(G,H){return this.animate(F,G,H)}});o.extend({speed:function(G,H,F){var E=typeof G==="object"?G:{complete:F||!F&&H||o.isFunction(G)&&G,duration:G,easing:F&&H||H&&!o.isFunction(H)&&H};E.duration=o.fx.off?0:typeof E.duration==="number"?E.duration:o.fx.speeds[E.duration]||o.fx.speeds._default;E.old=E.complete;E.complete=function(){if(E.queue!==false){o(this).dequeue()}if(o.isFunction(E.old)){E.old.call(this)}};return E},easing:{linear:function(G,H,E,F){return E+F*G},swing:function(G,H,E,F){return((-Math.cos(G*Math.PI)/2)+0.5)*F+E}},timers:[],fx:function(F,E,G){this.options=E;this.elem=F;this.prop=G;if(!E.orig){E.orig={}}}});o.fx.prototype={update:function(){if(this.options.step){this.options.step.call(this.elem,this.now,this)}(o.fx.step[this.prop]||o.fx.step._default)(this);if((this.prop=="height"||this.prop=="width")&&this.elem.style){this.elem.style.display="block"}},cur:function(F){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null)){return this.elem[this.prop]}var E=parseFloat(o.css(this.elem,this.prop,F));return E&&E>-10000?E:parseFloat(o.curCSS(this.elem,this.prop))||0},custom:function(I,H,G){this.startTime=e();this.start=I;this.end=H;this.unit=G||this.unit||"px";this.now=this.start;this.pos=this.state=0;var E=this;function F(J){return E.step(J)}F.elem=this.elem;if(F()&&o.timers.push(F)&&!n){n=setInterval(function(){var K=o.timers;for(var J=0;J<K.length;J++){if(!K[J]()){K.splice(J--,1)}}if(!K.length){clearInterval(n);n=g}},13)}},show:function(){this.options.orig[this.prop]=o.attr(this.elem.style,this.prop);this.options.show=true;this.custom(this.prop=="width"||this.prop=="height"?1:0,this.cur());o(this.elem).show()},hide:function(){this.options.orig[this.prop]=o.attr(this.elem.style,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(H){var G=e();if(H||G>=this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;var E=true;for(var F in this.options.curAnim){if(this.options.curAnim[F]!==true){E=false}}if(E){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;this.elem.style.display=this.options.display;if(o.css(this.elem,"display")=="none"){this.elem.style.display="block"}}if(this.options.hide){o(this.elem).hide()}if(this.options.hide||this.options.show){for(var I in this.options.curAnim){o.attr(this.elem.style,I,this.options.orig[I])}}this.options.complete.call(this.elem)}return false}else{var J=G-this.startTime;this.state=J/this.options.duration;this.pos=o.easing[this.options.easing||(o.easing.swing?"swing":"linear")](this.state,J,0,1,this.options.duration);this.now=this.start+((this.end-this.start)*this.pos);this.update()}return true}};o.extend(o.fx,{speeds:{slow:600,fast:200,_default:400},step:{opacity:function(E){o.attr(E.elem.style,"opacity",E.now)},_default:function(E){if(E.elem.style&&E.elem.style[E.prop]!=null){E.elem.style[E.prop]=E.now+E.unit}else{E.elem[E.prop]=E.now}}}});if(document.documentElement.getBoundingClientRect){o.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return o.offset.bodyOffset(this[0])}var G=this[0].getBoundingClientRect(),J=this[0].ownerDocument,F=J.body,E=J.documentElement,L=E.clientTop||F.clientTop||0,K=E.clientLeft||F.clientLeft||0,I=G.top+(self.pageYOffset||o.boxModel&&E.scrollTop||F.scrollTop)-L,H=G.left+(self.pageXOffset||o.boxModel&&E.scrollLeft||F.scrollLeft)-K;return{top:I,left:H}}}else{o.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return o.offset.bodyOffset(this[0])}o.offset.initialized||o.offset.initialize();var J=this[0],G=J.offsetParent,F=J,O=J.ownerDocument,M,H=O.documentElement,K=O.body,L=O.defaultView,E=L.getComputedStyle(J,null),N=J.offsetTop,I=J.offsetLeft;while((J=J.parentNode)&&J!==K&&J!==H){M=L.getComputedStyle(J,null);N-=J.scrollTop,I-=J.scrollLeft;if(J===G){N+=J.offsetTop,I+=J.offsetLeft;if(o.offset.doesNotAddBorder&&!(o.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(J.tagName))){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}F=G,G=J.offsetParent}if(o.offset.subtractsBorderForOverflowNotVisible&&M.overflow!=="visible"){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}E=M}if(E.position==="relative"||E.position==="static"){N+=K.offsetTop,I+=K.offsetLeft}if(E.position==="fixed"){N+=Math.max(H.scrollTop,K.scrollTop),I+=Math.max(H.scrollLeft,K.scrollLeft)}return{top:N,left:I}}}o.offset={initialize:function(){if(this.initialized){return}var L=document.body,F=document.createElement("div"),H,G,N,I,M,E,J=L.style.marginTop,K='<div style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;"><div></div></div><table style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;" cellpadding="0" cellspacing="0"><tr><td></td></tr></table>';M={position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"};for(E in M){F.style[E]=M[E]}F.innerHTML=K;L.insertBefore(F,L.firstChild);H=F.firstChild,G=H.firstChild,I=H.nextSibling.firstChild.firstChild;this.doesNotAddBorder=(G.offsetTop!==5);this.doesAddBorderForTableAndCells=(I.offsetTop===5);H.style.overflow="hidden",H.style.position="relative";this.subtractsBorderForOverflowNotVisible=(G.offsetTop===-5);L.style.marginTop="1px";this.doesNotIncludeMarginInBodyOffset=(L.offsetTop===0);L.style.marginTop=J;L.removeChild(F);this.initialized=true},bodyOffset:function(E){o.offset.initialized||o.offset.initialize();var G=E.offsetTop,F=E.offsetLeft;if(o.offset.doesNotIncludeMarginInBodyOffset){G+=parseInt(o.curCSS(E,"marginTop",true),10)||0,F+=parseInt(o.curCSS(E,"marginLeft",true),10)||0}return{top:G,left:F}}};o.fn.extend({position:function(){var I=0,H=0,F;if(this[0]){var G=this.offsetParent(),J=this.offset(),E=/^body|html$/i.test(G[0].tagName)?{top:0,left:0}:G.offset();J.top-=j(this,"marginTop");J.left-=j(this,"marginLeft");E.top+=j(G,"borderTopWidth");E.left+=j(G,"borderLeftWidth");F={top:J.top-E.top,left:J.left-E.left}}return F},offsetParent:function(){var E=this[0].offsetParent||document.body;while(E&&(!/^body|html$/i.test(E.tagName)&&o.css(E,"position")=="static")){E=E.offsetParent}return o(E)}});o.each(["Left","Top"],function(F,E){var G="scroll"+E;o.fn[G]=function(H){if(!this[0]){return null}return H!==g?this.each(function(){this==l||this==document?l.scrollTo(!F?H:o(l).scrollLeft(),F?H:o(l).scrollTop()):this[G]=H}):this[0]==l||this[0]==document?self[F?"pageYOffset":"pageXOffset"]||o.boxModel&&document.documentElement[G]||document.body[G]:this[0][G]}});o.each(["Height","Width"],function(I,G){var E=I?"Left":"Top",H=I?"Right":"Bottom",F=G.toLowerCase();o.fn["inner"+G]=function(){return this[0]?o.css(this[0],F,false,"padding"):null};o.fn["outer"+G]=function(K){return this[0]?o.css(this[0],F,false,K?"margin":"border"):null};var J=G.toLowerCase();o.fn[J]=function(K){return this[0]==l?document.compatMode=="CSS1Compat"&&document.documentElement["client"+G]||document.body["client"+G]:this[0]==document?Math.max(document.documentElement["client"+G],document.body["scroll"+G],document.documentElement["scroll"+G],document.body["offset"+G],document.documentElement["offset"+G]):K===g?(this.length?o.css(this[0],J):null):this.css(J,typeof K==="string"?K:K+"px")}})})();
\ No newline at end of file
diff --git a/examples/webkit/fancybrowser/jquery.qrc b/examples/webkit/fancybrowser/jquery.qrc
new file mode 100644
index 0000000..1022d68
--- /dev/null
+++ b/examples/webkit/fancybrowser/jquery.qrc
@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/" >
+        <file>jquery.min.js</file>
+    </qresource>
+</RCC>
diff --git a/examples/webkit/fancybrowser/main.cpp b/examples/webkit/fancybrowser/main.cpp
new file mode 100644
index 0000000..5936469
--- /dev/null
+++ b/examples/webkit/fancybrowser/main.cpp
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtGui>
+#include "mainwindow.h"
+
+int main(int argc, char * argv[])
+{
+    QApplication app(argc, argv);
+    MainWindow *browser = new MainWindow;
+    browser->show();
+    return app.exec();
+}
diff --git a/examples/webkit/fancybrowser/mainwindow.cpp b/examples/webkit/fancybrowser/mainwindow.cpp
new file mode 100644
index 0000000..bf61f9c
--- /dev/null
+++ b/examples/webkit/fancybrowser/mainwindow.cpp
@@ -0,0 +1,167 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtGui>
+#include <QtWebKit>
+#include "mainwindow.h"
+
+MainWindow::MainWindow()
+{
+    progress = 0;
+
+    QFile file;
+    file.setFileName(":/jquery.min.js");
+    file.open(QIODevice::ReadOnly);
+    jQuery = file.readAll();
+    file.close();
+
+    view = new QWebView(this);
+    view->load(QUrl("http://www.google.com/ncr"));
+    connect(view, SIGNAL(loadFinished(bool)), SLOT(adjustLocation()));
+    connect(view, SIGNAL(titleChanged(const QString&)), SLOT(adjustTitle()));
+    connect(view, SIGNAL(loadProgress(int)), SLOT(setProgress(int)));
+    connect(view, SIGNAL(loadFinished(bool)), SLOT(finishLoading(bool)));
+
+    locationEdit = new QLineEdit(this);
+    locationEdit->setSizePolicy(QSizePolicy::Expanding, locationEdit->sizePolicy().verticalPolicy());
+    connect(locationEdit, SIGNAL(returnPressed()), SLOT(changeLocation()));
+
+    QToolBar *toolBar = addToolBar(tr("Navigation"));
+    toolBar->addAction(view->pageAction(QWebPage::Back));
+    toolBar->addAction(view->pageAction(QWebPage::Forward));
+    toolBar->addAction(view->pageAction(QWebPage::Reload));
+    toolBar->addAction(view->pageAction(QWebPage::Stop));
+    toolBar->addWidget(locationEdit);
+
+    QMenu *effectMenu = menuBar()->addMenu(tr("&Effect"));
+    effectMenu->addAction("Highlight all links", this, SLOT(highlightAllLinks()));
+
+    QAction *rotateAction = new QAction(this);
+    rotateAction->setIcon(style()->standardIcon(QStyle::SP_FileDialogDetailedView));
+    rotateAction->setCheckable(true);
+    rotateAction->setText(tr("Turn images upside down"));
+    connect(rotateAction, SIGNAL(toggled(bool)), this, SLOT(rotateImages(bool)));
+    effectMenu->addAction(rotateAction);
+
+    QMenu *toolsMenu = menuBar()->addMenu(tr("&Tools"));
+    toolsMenu->addAction(tr("Remove GIF images"), this, SLOT(removeGifImages()));
+    toolsMenu->addAction(tr("Remove all inline frames"), this, SLOT(removeInlineFrames()));
+    toolsMenu->addAction(tr("Remove all object elements"), this, SLOT(removeObjectElements()));
+    toolsMenu->addAction(tr("Remove all embedded elements"), this, SLOT(removeEmbeddedElements()));
+
+    setCentralWidget(view);
+}
+
+void MainWindow::adjustLocation()
+{
+    locationEdit->setText(view->url().toString());
+}
+
+void MainWindow::changeLocation()
+{
+    QUrl url = QUrl(locationEdit->text());
+    locationEdit->setText(url.toString());
+    view->load(url);
+    view->setFocus();
+}
+
+void MainWindow::adjustTitle()
+{
+    if (progress <= 0 || progress >= 100)
+        setWindowTitle(view->title());
+    else
+        setWindowTitle(QString("%1 (%2%)").arg(view->title()).arg(progress));
+}
+
+void MainWindow::setProgress(int p)
+{
+    progress = p;
+    adjustTitle();
+}
+
+void MainWindow::finishLoading(bool)
+{
+    progress = 100;
+    adjustTitle();
+    view->page()->mainFrame()->evaluateJavaScript(jQuery);
+}
+
+void MainWindow::highlightAllLinks()
+{
+    QString code = "$('a').each( function () { $(this).css('background-color', 'yellow') } )";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+}
+
+void MainWindow::rotateImages(bool toggle)
+{
+    QString code = "$('img').each( function () { $(this).css('-webkit-transition', '-webkit-transform 2s') } )";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+    if (toggle)
+        code = "$('img').each( function () { $(this).css('-webkit-transform', 'rotate(180deg)') } )";
+    else
+        code = "$('img').each( function () { $(this).css('-webkit-transform', 'rotate(0deg)') } )";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+}
+
+void MainWindow::removeGifImages()
+{
+    QString code = "$('[src*=gif]').remove()";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+}
+
+void MainWindow::removeInlineFrames()
+{
+    QString code = "$('iframe').remove()";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+}
+
+void MainWindow::removeObjectElements()
+{
+    QString code = "$('object').remove()";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+}
+
+void MainWindow::removeEmbeddedElements()
+{
+    QString code = "$('embed').remove()";
+    view->page()->mainFrame()->evaluateJavaScript(code);
+}
+
diff --git a/examples/webkit/fancybrowser/mainwindow.h b/examples/webkit/fancybrowser/mainwindow.h
new file mode 100644
index 0000000..9362ca7
--- /dev/null
+++ b/examples/webkit/fancybrowser/mainwindow.h
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QMainWindow>
+
+QT_BEGIN_NAMESPACE
+class QWebView;
+class QLineEdit;
+QT_END_NAMESPACE
+
+class MainWindow : public QMainWindow
+{
+    Q_OBJECT
+
+public:
+    MainWindow();
+
+protected slots:
+
+    void adjustLocation();
+    void changeLocation();
+    void adjustTitle();
+    void setProgress(int p);
+    void finishLoading(bool);
+
+    void highlightAllLinks();
+    void rotateImages(bool toggle);
+    void removeGifImages();
+    void removeInlineFrames();
+    void removeObjectElements();
+    void removeEmbeddedElements();
+
+private:
+    QString jQuery;
+    QWebView *view;
+    QLineEdit *locationEdit;
+    int progress;
+};
diff --git a/examples/webkit/googlechat/form.ui b/examples/webkit/googlechat/form.ui
new file mode 100644
index 0000000..3b9fb82
--- /dev/null
+++ b/examples/webkit/googlechat/form.ui
@@ -0,0 +1,214 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>Form</class>
+ <widget class="QWidget" name="Form">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>286</width>
+    <height>413</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Google Talk Client</string>
+  </property>
+  <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="spacing">
+    <number>0</number>
+   </property>
+   <property name="margin">
+    <number>0</number>
+   </property>
+   <item>
+    <widget class="QStackedWidget" name="stackedWidget">
+     <property name="currentIndex">
+      <number>1</number>
+     </property>
+     <widget class="QWidget" name="page_3">
+      <layout class="QVBoxLayout" name="verticalLayout_4">
+       <item>
+        <spacer name="verticalSpacer_4">
+         <property name="orientation">
+          <enum>Qt::Vertical</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>170</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item>
+        <widget class="QLabel" name="statusLabel">
+         <property name="text">
+          <string>TextLabel</string>
+         </property>
+         <property name="alignment">
+          <set>Qt::AlignCenter</set>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QProgressBar" name="progressBar">
+         <property name="value">
+          <number>24</number>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <spacer name="verticalSpacer_5">
+         <property name="orientation">
+          <enum>Qt::Vertical</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>169</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+      </layout>
+     </widget>
+     <widget class="QWidget" name="page">
+      <layout class="QVBoxLayout" name="verticalLayout_2">
+       <item>
+        <spacer name="verticalSpacer_3">
+         <property name="orientation">
+          <enum>Qt::Vertical</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>119</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item>
+        <widget class="QLabel" name="userNameLabel">
+         <property name="text">
+          <string>Google username:</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QLineEdit" name="userNameEdit"/>
+       </item>
+       <item>
+        <spacer name="verticalSpacer_2">
+         <property name="orientation">
+          <enum>Qt::Vertical</enum>
+         </property>
+         <property name="sizeType">
+          <enum>QSizePolicy::Fixed</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>17</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item>
+        <widget class="QLabel" name="passwordLabel">
+         <property name="text">
+          <string>Password:</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QLineEdit" name="passwordEdit">
+         <property name="echoMode">
+          <enum>QLineEdit::Password</enum>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <spacer name="verticalSpacer">
+         <property name="orientation">
+          <enum>Qt::Vertical</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>118</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item>
+        <layout class="QHBoxLayout" name="horizontalLayout">
+         <item>
+          <spacer name="horizontalSpacer">
+           <property name="orientation">
+            <enum>Qt::Horizontal</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>40</width>
+             <height>20</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+         <item>
+          <widget class="QPushButton" name="loginButton">
+           <property name="text">
+            <string>Login</string>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <spacer name="horizontalSpacer_2">
+           <property name="orientation">
+            <enum>Qt::Horizontal</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>40</width>
+             <height>20</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+        </layout>
+       </item>
+      </layout>
+     </widget>
+     <widget class="QWidget" name="page_2">
+      <layout class="QVBoxLayout" name="verticalLayout_3">
+       <property name="spacing">
+        <number>0</number>
+       </property>
+       <property name="margin">
+        <number>0</number>
+       </property>
+       <item>
+        <widget class="QWebView" name="webView">
+         <property name="url">
+          <url>
+           <string>about:blank</string>
+          </url>
+         </property>
+        </widget>
+       </item>
+      </layout>
+     </widget>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>QWebView</class>
+   <extends>QWidget</extends>
+   <header>QtWebKit/QWebView</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>
diff --git a/examples/webkit/googlechat/googlechat.cpp b/examples/webkit/googlechat/googlechat.cpp
new file mode 100644
index 0000000..9ac2cd2
--- /dev/null
+++ b/examples/webkit/googlechat/googlechat.cpp
@@ -0,0 +1,163 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtGui>
+#include <QtWebKit>
+
+#include "googlechat.h"
+
+#define GOOGLECHAT_URL "http://talkgadget.google.com/talkgadget/m"
+
+GoogleChat::GoogleChat(): QWidget() {
+    form.setupUi(this);
+    setFixedSize(320, 480);
+
+    form.userNameEdit->setFocus();
+    connect(form.userNameEdit, SIGNAL(textChanged(QString)), SLOT(adjustLoginButton()));
+    connect(form.userNameEdit, SIGNAL(returnPressed()), SLOT(inputPassword()));
+
+    connect(form.passwordEdit, SIGNAL(textChanged(QString)), SLOT(adjustLoginButton()));
+    connect(form.passwordEdit, SIGNAL(returnPressed()), SLOT(doLogin()));
+
+    form.loginButton->setEnabled(false);
+    connect(form.loginButton, SIGNAL(clicked()), SLOT(doLogin()));
+
+    connect(form.webView, SIGNAL(loadFinished(bool)), SLOT(initialPage(bool)));
+    connect(form.webView, SIGNAL(loadProgress(int)),
+            form.progressBar, SLOT(setValue(int)));
+    form.webView->setUrl((QUrl(GOOGLECHAT_URL)));
+    form.webView->setContextMenuPolicy(Qt::PreventContextMenu);
+
+    showStatus("Wait...");
+}
+
+void GoogleChat::showStatus(const QString &msg) {
+    form.statusLabel->setText(msg);
+    form.stackedWidget->setCurrentIndex(0);
+}
+
+void GoogleChat::showError(const QString &msg) {
+    form.progressBar->hide();
+    showStatus(QString("Error: %1").arg(msg));
+}
+
+QString GoogleChat::evalJS(const QString &js) {
+    QWebFrame *frame = form.webView->page()->mainFrame();
+    return frame->evaluateJavaScript(js).toString();
+}
+
+void GoogleChat::adjustLoginButton() {
+    userName = form.userNameEdit->text();
+    password = form.passwordEdit->text();
+    bool ok = !userName.isEmpty() && !password.isEmpty();
+    form.loginButton->setEnabled(ok);
+}
+
+void GoogleChat::inputPassword() {
+    if (!form.userNameEdit->text().isEmpty())
+        form.passwordEdit->setFocus();
+}
+
+void GoogleChat::doLogin() {
+    userName = form.userNameEdit->text();
+    password = form.passwordEdit->text();
+    bool ok = !userName.isEmpty() && !password.isEmpty();
+    if (!ok)
+        return;
+
+    form.progressBar->setValue(0);
+    form.progressBar->show();
+    connect(form.webView, SIGNAL(loadFinished(bool)), SLOT(loginPage(bool)));
+    connect(form.webView, SIGNAL(loadProgress(int)),
+            form.progressBar, SLOT(setValue(int)));
+    showStatus("Logging in...");
+
+    QString userEmail = userName + "@gmail.com";
+    evalJS(QString("document.getElementById('Email').value = \"%1\";").arg(userEmail));
+    evalJS(QString("document.getElementById('Passwd').value = \"%1\";").arg(password));
+    evalJS("document.getElementById('gaia_loginform').submit();");
+}
+
+void GoogleChat::initialPage(bool ok) {
+    if (ok) {
+        QString s1 = evalJS("document.getElementById('Email').name");
+        QString s2 = evalJS("document.getElementById('Passwd').name");
+        QString s3 = evalJS("document.getElementById('gaia_loginform').id");
+        if (s1 == "Email" && s2 == "Passwd" && s3 == "gaia_loginform") {
+            form.stackedWidget->setCurrentIndex(1);
+            form.webView->disconnect();
+            return;
+        }
+    }
+
+    showError("SERVICE unavailable.");
+}
+
+void GoogleChat::hideElements()
+{
+    evalJS("var e = document.getElementsByClassName('footer-footer')[0]; e.parentElement.removeChild(e)");
+    evalJS("var e = document.getElementsByClassName('title-bar-bg title-bar')[0]; e.parentElement.removeChild(e)");
+    QTimer::singleShot(2000, this, SLOT(hideElements()));
+}
+
+void GoogleChat::loginPage(bool ok) {
+    QString location = form.webView->url().toString();
+    if (!ok) {
+        if (location.indexOf("CheckCookie"))
+            return;
+        showError("Service unavailable");
+    } else {
+        // check for any error message
+        QString c = evalJS("document.getElementsByClassName('errormsg').length");
+        if (c == "0") {
+            form.stackedWidget->setCurrentIndex(2);
+            QTimer::singleShot(500, this, SLOT(hideElements()));
+            return;
+        }
+
+        QString err = "Unknown login failure.";
+        if (c == "1") {
+            err = evalJS("document.getElementsByClassName('errormsg')[0].textContent");
+            err = err.simplified();
+        }
+        showError(err);
+    }
+}
diff --git a/examples/webkit/googlechat/googlechat.h b/examples/webkit/googlechat/googlechat.h
new file mode 100644
index 0000000..c92632c
--- /dev/null
+++ b/examples/webkit/googlechat/googlechat.h
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QWidget>
+
+#include "ui_form.h"
+
+class GoogleChat: public QWidget
+{
+    Q_OBJECT
+
+public:
+    GoogleChat();
+
+protected:
+    void showStatus(const QString &msg);
+    void showError(const QString &msg);
+    QString evalJS(const QString &js);
+
+private slots:
+
+    void adjustLoginButton();
+    void inputPassword();
+    void doLogin();
+    void initialPage(bool ok);
+    void loginPage(bool ok);
+    void hideElements();
+
+private:
+    Ui::Form form;
+    QString userName;
+    QString password;
+};
diff --git a/examples/webkit/googlechat/googlechat.pro b/examples/webkit/googlechat/googlechat.pro
new file mode 100644
index 0000000..14b7085
--- /dev/null
+++ b/examples/webkit/googlechat/googlechat.pro
@@ -0,0 +1,11 @@
+QT      +=  webkit
+HEADERS =   googlechat.h
+SOURCES =   main.cpp \
+            googlechat.cpp
+FORMS = form.ui
+
+# install
+target.path = $$[QT_INSTALL_EXAMPLES]/webkit/googlechat
+sources.files = $$SOURCES $$HEADERS $$FORMS *.pro
+sources.path = $$[QT_INSTALL_EXAMPLES]/webkit/googlechat
+INSTALLS += target sources
diff --git a/examples/webkit/googlechat/main.cpp b/examples/webkit/googlechat/main.cpp
new file mode 100644
index 0000000..26feeea
--- /dev/null
+++ b/examples/webkit/googlechat/main.cpp
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtGui>
+#include "googlechat.h"
+
+int main(int argc, char * argv[])
+{
+    QApplication app(argc, argv);
+    GoogleChat *chat = new GoogleChat;
+    chat->show();
+    return app.exec();
+}
diff --git a/examples/webkit/webkit.pro b/examples/webkit/webkit.pro
index 3777eec..225816a 100644
--- a/examples/webkit/webkit.pro
+++ b/examples/webkit/webkit.pro
@@ -1,6 +1,8 @@
 TEMPLATE =  subdirs
 SUBDIRS +=  formextractor \
-            previewer
+            previewer \
+            fancybrowser \
+            googlechat
 
 # install
 target.path = $$[QT_INSTALL_EXAMPLES]/webkit