import QtQuick 2.7
import QtQuick.Controls 2.7
ApplicationWindow {
	visible : true
  	anchors.fill : parent
	title : "Rabbit Animation Sample"
	Rectangle {
		id : background
		anchors.fill : parent
		color : "white"
		Image {
			id : logo
			source : "https://khatharsis.com/share/Random%20Bullcrap/RabbitTeamIcon.png"
			x : background.width / 2 - width / 2
			y : background.height / 2 - height / 2
			z : 10
			property const originalHeight: 347
			property const originalWidth: 247
			property const finalHeight: background.height * .25
			property const finalWidth: finalHeight * originalWidth / originalHeight
			property const offset: .1
			height : 0
			width : 0
          		NumberAnimation on height {
				from: 0
				to: logo.finalHeight
				duration: 1000
				running: true
            		}
          		NumberAnimation on width {
            			from: 0
              			to: logo.finalWidth
                		duration: 1000
            			running: true
              			onFinished: blinkingAnimation.start()
          		}
            SequentialAnimation {
              	id: blinkingAnimation
              	loops: 10
          		NumberAnimation {
                  	target: logo
                    property: "opacity"
        			from: 1
        			to: 0
        			duration: 500
    			}
              	NumberAnimation {
                  	target: logo
                    property: "opacity"
        			from: 0
        			to: 1
        			duration: 500
    			}
            }
        } // Loo
        Rectangle {
            id : leftRect
            width : 0
            height : logo.finalHeight * (1-logo.offset * 2)
            color : "#ff3a00"
            x : 0
            y : background.height / 2 - height / 2
            NumberAnimation on width {
              	from: 0
              	to: background.width / 2
              	duration: 1000 
              	running: true
            }
			Text {
            	id : textRabbit
            	text : "RABBIT"
          		anchors.verticalCenter: parent.verticalCenter
          		x: parent.width - width - logo.finalWidth / 2
          		height: parent.height * 0.8
          		font.pixelSize: 120
				font.family: "Impact"
        	}
        } // Left rectangle
      
        Rectangle {
            id : rightRect
            width : 0
            height : logo.finalHeight * (1-logo.offset * 2)
            color : "#ff3a00"
            x : background.width // Start off-screen
            y : background.height / 2 - height / 2
            NumberAnimation on width {
                from: 0
              	to: background.width / 2
              	duration: 1000
              	running: true
           	}
         	NumberAnimation on x {
                from: background.width
              	to: background.width / 2
              	duration: 1000
              	running: true
           	}
			Text {
				id : textProtocol
              	text : "PROTOCOL"
              	anchors.verticalCenter: parent.verticalCenter
              	x: logo.finalWidth / 2
              	height: parent.height * 0.8
              	font.pixelSize: 120
              	font.family: "Impact"
        	}
        } // Right rectangle
      	Component {
            id: movingTextComponent
			Text {
            	text: "TERMINATE"
            	font.pixelSize: 30
            	color: "#ff3a00"
              	font.family: "impact"
        	}
        }
      	
    	Row {
			id: textRow
        	y: leftRect.y - height
        	spacing: 20 // Space between repetitions of the text
          	property const nItems: 20

        	Repeater {
            	model: textRow.nItems
            	delegate: movingTextComponent
        	}
          	NumberAnimation on x {
        		from: - textRow.width / textRow.nItems
        		to: 0 // Move left enough to wrap one repetition
        		duration: 1000
        		loops: Animation.Infinite
        		onStopped: textRow.x = 0 // Reset position when animation stops (though it loops infinitely)
    		}
    	}
        Row {
			id: textRow
        	y: leftRect.y + leftRect.height
        	spacing: 20 // Space between repetitions of the text
          	property const nItems: 20

        	Repeater {
            	model: textRow.nItems
            	delegate: movingTextComponent
        	}
          	NumberAnimation on x {
        		from: 0
        		to: - textRow.width / textRow.nItems 
        		duration: 1000
        		loops: Animation.Infinite
        		onStopped: textRow.x = 0 // Reset position when animation stops (though it loops infinitely)
    		}
    	}
    }
}