import Qt 4.7

Item {
    width: 400; height: 400

    ListView {
        id: list_view1
        x: 95
        y: 169
        width: 210
        height: 62
        orientation: ListView.Horizontal
        spacing: 50
        delegate: Item {
            id: item
            height: 40

            Text {
                id: textName
                text: name
                z: 2
                anchors.bottom: picture.top
                font.bold: true
            }

            Rectangle {
                id: picture
                width: 40
                height: 40
                color: colorCode

            }

            MouseArea {
                anchors.fill: picture
                hoverEnabled: true
                onEntered: SequentialAnimation {

                    NumberAnimation {
                        target: picture;
                        property: "scale";
                        to: 2;
                        duration: 100;
                        easing.type: Easing.InOutQuad
                    }

                }
                onExited: SequentialAnimation {

                    NumberAnimation {
                        target: picture;
                        property: "scale";
                        to: 1;
                        duration: 100;
                        easing.type: Easing.InOutQuad
                    }

                }
                onClicked: SequentialAnimation {

                    NumberAnimation {
                        target: picture;
                        property: "rotation";
                        from: 0
                        to: 180;
                        duration: 400;
                        easing.type: Easing.InOutQuad

                    }


                    NumberAnimation {
                        target: textName;
                        property: "rotation";
                        from: 0
                        to: 360;
                        duration: 400;
                        easing.type: Easing.InOutQuad

                    }

                }
            }



        }

        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
    }


}