import bb.cascades 1.0
import "../tart.js" as Tart

Page {
    id: thisPage

    titleBar: TitleBar {
        title: root.activeTab.title
    }

    Container {
        topPadding: 35
        leftPadding: 35
        rightPadding: 35
        bottomPadding: 35

        background: Color.create("#272727")

        layout: AbsoluteLayout {}

        ImageView {
            id: border
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 10
                positionY: 10
            }
            imageSource: "asset:///border_redcorners.amd"
            preferredWidth: 300
            preferredHeight: 300
        }

        Label {
            id: target
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 30
                positionY: 200
            }
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            textStyle.fontSizeValue: 35
            textStyle.color: Color.White
            text: "Foo bar!"

            attachedObjects: [
                // track the layout frame of the owner
                LayoutUpdateHandler {
                    id: handler
                    onLayoutFrameChanged: {
                        // Individual layout frame values can be
                        // retrieved from the signal parameter
                        console.log("Layout Frame: [ @" +
                                    layoutFrame.x + "," + layoutFrame.y +
                                    " " +
                                    layoutFrame.width + "x" +
                                    layoutFrame.height + " ]");
                        border.preferredWidth = layoutFrame.width;
                        border.preferredHeight = layoutFrame.height;
                        border.layoutProperties.positionX = layoutFrame.x;
                        border.layoutProperties.positionY = layoutFrame.y;
                    }
                }
            ]
        }

        // vertical
        Slider {
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 20
                positionY: 700
            }
            fromValue: 0
            toValue: 350
            onImmediateValueChanged: {
                target.layoutProperties.positionY = immediateValue;
            }
        }

        // rotation
        Slider {
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 20
                positionY: 800
            }
            fromValue: 0
            toValue: 360
            onImmediateValueChanged: {
                target.rotationZ = immediateValue;
                border.rotationZ = immediateValue;
            }
        }

        // font size
        Slider {
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 20
                positionY: 900
            }
            fromValue: 6
            toValue: 50
            onImmediateValueChanged: {
                target.textStyle.fontSizeValue = immediateValue;
            }
        }
    }// Container
}