Uize.module ({
        required:[
                'UizeDotCom.Page.Example.library',
                'Uize.Widget.ImagePort.Draggable',
                'Uize.Widget.Bar.Slider.xSkin'
        ],
        builder:function () {
                /*** create the example page widget ***/
                        var page = window.page = new UizeDotCom.Page.Example;

                /*** add the image port child widget ***/
                        var imagePort = page.addChild (
                                'imagePort',
                                Uize.Widget.ImagePort.Draggable,
                                {
                                        sizingLowerBound:'0',
                                        sizingUpperBound:'fill',
                                        sizingValue:.5,
                                        alignX:.5,
                                        alignY:.5
                                }
                        );

                /*** code to update the image port instance based on user input values ***/
                        function updateImagePortSettings () {
                                imagePort.set ({
                                        alignX:+alignXSlider,
                                        alignY:+alignYSlider,
                                        sizingUpperBound:page.getNodeValue ('sizingUpperBound'),
                                        sizingLowerBound:page.getNodeValue ('sizingLowerBound'),
                                        sizingValue:+sizingValueSlider
                                });
                        }

                /*** common values shared by alignX, alignY, and sizingValue sliders ***/
                        Uize.Widget.Bar.Slider.set ({
                                value:.5,
                                borderThickness:0,
                                borderTintLevel:0,
                                increments:0,
                                built:false
                        });

                /*** add the alignX slider child widget ***/
                        var alignXSlider = page.addChild (
                                'alignXSlider',
                                Uize.Widget.Bar.Slider,
                                {
                                        minValue:0,
                                        maxValue:1,
                                        orientation:'horizontal'
                                }
                        );
                        alignXSlider.addEventHandler (
                                'Changed.value',function () {imagePort.set ({alignX:+alignXSlider})}
                        );

                /*** add the alignY slider child widget ***/
                        var alignYSlider = page.addChild (
                                'alignYSlider',
                                Uize.Widget.Bar.Slider,
                                {
                                        minValue:1,
                                        maxValue:0,
                                        orientation:'vertical'
                                }
                        );
                        alignYSlider.addEventHandler (
                                'Changed.value',function () {imagePort.set ({alignY:+alignYSlider})}
                        );

                /*** add the sizingValue slider child widget ***/
                        var sizingValueSlider = page.addChild (
                                'sizingValueSlider',
                                Uize.Widget.Bar.Slider,
                                {
                                        minValue:1,
                                        maxValue:6,
                                        value:1,
                                        orientation:'horizontal'
                                }
                        );
                        sizingValueSlider.addEventHandler (
                                'Changed.value',function () {imagePort.set ({sizingValue:+sizingValueSlider})}
                        );

                /*** update settings UI whenever position changes ***/
                        imagePort.addEventHandler (
                                'Position Changed',
                                function () {
                                        alignXSlider.set ({value:imagePort.get ('alignX')});
                                        alignYSlider.set ({value:imagePort.get ('alignY')});
                                        sizingValueSlider.set ({value:imagePort.get ('sizingValue')});
                                }
                        );

                /*** initialize the ImagePort instance ***/
                        updateImagePortSettings ();

                /*** wire up the page widget ***/
                        page.wireUi ();

                /*** watch for changes in sizing bound values ***/
                        page.wireNodeEvent ('sizingUpperBound','onchange',updateImagePortSettings);
                        page.wireNodeEvent ('sizingLowerBound','onchange',updateImagePortSettings);
        }
});