<?xml version="1.0" encoding="utf-8" ?>
<vbox id="main" width="100%" height="100%" style="border:none; padding:0;spacing:5">

    <bind source="text1.text" target="text2.text" transform="text = ${value}" />
    <bind source="text2" target="text3" transform="${value}" />
    <bind source="vscroll1" target="text4" />

    <bind source="vscroll1" target="vscroll2" />
    <bind source="vscroll2" target="vscroll1" />

    <bind source="vscroll1" target="hscroll1" />
    <bind source="hscroll1" target="vscroll1" />

    <bind source="vscroll1" target="vscroll3" transform="${value * .75}" />
    <bind source="vscroll1" target="vscroll4" transform="${value * .5}" />
    <bind source="vscroll1" target="vscroll5" transform="${value * .25}" />
    <bind source="vscroll1" target="vscroll6.pageSize" transform="${value * 5}" />

    <bind source="scrollview.height" target="scrollviewHeight" />
    <bind source="scrollview.height" target="scrollviewHeightLabel" transform="${Std.int(value)}" />
    <bind source="scrollviewHeight" target="scrollview.height" />

    <bind source="scrollview.width" target="scrollviewWidth" />
    <bind source="scrollview.width" target="scrollviewWidthLabel" transform="${Std.int(value)}" />
    <bind source="scrollviewWidth" target="scrollview.width" />

    <script>
        function addScrollViewItem() {
            var b = new haxe.ui.components.Button();
            b.text = "Dynamic Button";
            scrollview.addComponent(b);
        }
    </script>

    <hbox>
        <button text="This is some text that will be clipped" width="100" repeater="true" onclick="trace(1);" />
        <button text="Test" onclick="scrollview.width += 20;scrollview.height += 20;" />
    </hbox>

    <hbox width="100%" style="border:none; padding:0">
        <vbox width="100%">
            <hbox>
                <textfield id="text1" text="bob" />
                <textfield id="text2" />
                <textfield id="text3" />
                <textfield id="text4" />
            </hbox>

            <hbox>
                <vbox>
                    <hbox>
                        <vscroll id="vscroll1" height="300" />
                        <vscroll id="vscroll2" height="300" />
                        <vscroll id="vscroll3" height="300" />
                        <vscroll id="vscroll4" height="300" />
                        <vscroll id="vscroll5" height="300" />
                        <vscroll id="vscroll6" height="300" />
                    </hbox>
                    <hscroll id="hscroll1" width="100%" />
                </vbox>


                <vbox width="200">
                        <button text="Add Item" onclick="addScrollViewItem()" />
                        <hbox width="100%">
                            <label text="Width: " />
                            <hscroll id="scrollviewWidth" width="100%" min="200" max="600" pos="200" />
                            <label id="scrollviewWidthLabel" />
                        </hbox>
                        <hbox width="100%">
                            <label text="Height: " />
                            <hscroll id="scrollviewHeight" width="100%" min="200" max="600" pos="300" />
                            <label id="scrollviewHeightLabel" />
                        </hbox>
                </vbox>

                <vbox>
                    <hbox>

                        <scrollview id="scrollview" width="200" height="300">
                            <button text="100%" width="100%"/>
                            <button text="100% + 10px margins" width="100%" marginRight="10" marginLeft="10" marginTop="10" style="margin-bottom: 10;" />
                            <button text="button 2" id="scrollButton" />
                            <button icon="img/slinky_tiny.jpg"/>
                            <button text="button 3" />
                            <button text="slinky" icon="img/slinky_tiny.jpg"/>
                            <button text="button 4" />
                            <image resource="img/slinky_tiny.jpg"/>
                            <button text="button 5" />
                            <button text="button 6" />
                            <button text="button 7" />
                            <button text="button 8" />
                            <button text="button 9" />
                            <button text="button 10" />
                            <button text="button 11" />
                            <button text="button 12" />
                            <button text="button 13" />
                            <button text="button 14" />
                            <button text="button 15" />
                        </scrollview>

                        <scrollview id="scrollview" width="150" height="300">
                            <vbox>
                                <button text="button 1" width="200" />
                                <button text="button 2" />
                                <button text="button 3" />
                                <button text="button 4" />
                                <button text="button 5" />
                                <button text="button 6" />
                                <button text="button 7" />
                                <button text="button 8" />
                                <button text="button 9" />
                                <button text="button 10" />
                                <button text="button 11" />
                                <button text="button 12" />
                                <button text="button 13" />
                                <button text="button 14" />
                                <button text="button 15" />
                            </vbox>
                        </scrollview>

                    </hbox>

                    <scrollview width="100%" height="70">
                        <hbox>
                            <button text="button 1"/>
                            <button text="button 2"/>
                            <button text="button 3"/>
                            <button text="button 4"/>
                            <button text="button 5"/>
                            <button text="button 6"/>
                            <button text="button 7"/>
                            <button text="button 8"/>
                            <button text="button 9"/>
                            <button text="button 10"/>
                        </hbox>
                    </scrollview>
                </vbox>

            </hbox>
        </vbox>
    </hbox>

    <button text="Fill rest" width="100%" height="100%" />
</vbox>