import bb.cascades 1.3

Page {
    Container {
        layout: StackLayout{}


        Button{
            text: "attach animation"
            onClicked: {
               var ac = animationscomp.createObject();
               //ac.rem.anim.fadeFrom = 1.0;
               //ac.rem.anim.fadeTo  = 0.0;
               ac.moveFrom = 0;
               ac.moveTo = 500;
               //ac.createObject();

               node.add(ac)
               console.log("CONTROL ADDED");
               //anim.play();
            }
        }
        Container{
            preferredWidth: 1440
            preferredHeight: 1440
            background: Color.Red
            id: node
            layout: DockLayout {

            }
            onControlAdded: {
                //anim.play();
            }
        }
        attachedObjects: [
            ComponentDefinition {
                id: animationscomp
                content: Container{
                    id: rem
                    property alias moveFrom: mF.text
                    property alias moveTo: mT.text
                    preferredWidth: 1
                    preferredHeight:1
                    background: Color.Transparent
                    verticalAlignment: VerticalAlignment.Top
                    Label {
                        id: mF

                    }
                    Label {
                        id: mT
                        onTextChanged: {
                            //move.fromX = parseInt(mF.text);
                            //move.toX = parseInt(mT.text);
                            //anim.play();
                            anim.play();
                        }

                    }
                    animations: [
                        SequentialAnimation {
                            id: anim
                            target: node
                            //property  alias fadeFrom: fade.fromOpacity
                            //property alias fadeTo: fade.toOpacity

                            FadeTransition {
                                id: fade
                                fromOpacity: 1.0
                                toOpacity: 0.2
                            }
                            TranslateTransition {
                                id: move
                                fromX: parseInt(mF.text)
                                toX: parseInt(mT.text)
                            }
                            onEnded: {
                                node.translationX = 0;
                                node.opacity = 0.0;
                            }
                        }

                    ]
                    onCreationCompleted: {

                    }
                }
            }
        ]
    }
}