class Intro
{
    constructor( sparrowUI )
    {
        this.ui = sparrowUI;
        
        this.lbl_bg = this.ui.add( new Sparrow.UI.Label( "" , { position: "center" , verticalPosition: "center" , width: 600 , height: 500 , background: "background" , background: "background" , backgroundColor: "#ccaa88" , borderWidth: 1 , borderColor: "#554433" } ) );
        this.lbl_bg.addChild( new Sparrow.UI.Label( "Mousetropolis" , { position: "center" , y: 20 , width: 300 , height: 40 , textAlign: "center" , textSize: 40 } ) );

        var yPos = 60;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "The nearby Timberborn beavers have constructed a new dam." , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "center" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "This has caused severe flooding in the entire valley." , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "center" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "A group of mice has found an Ark Log..." , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "center" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "... but space on the log is limited." , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "center" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "How long can you manage the colony before it runs out?" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "center" , textSize: 20 } ) );
        yPos += 30;

        yPos += 20

        this.lbl_bg.addChild( new Sparrow.UI.Label( "- Manage the mice colony" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "left" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "- Mice need houses, water, and food" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "left" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "- Homelessness and low water and food causes crime" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "left" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "- Police fights crime" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "left" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "- You can upgrade buildings too" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "left" , textSize: 20 } ) );
        yPos += 30;
        this.lbl_bg.addChild( new Sparrow.UI.Label( "- Clicking on buildings shows more stats" , { position: "center" , y: yPos , width: 580 , height: 40 , textAlign: "left" , textSize: 20 } ) );
        yPos += 30;

        this.btn_playAgain = this.lbl_bg.addChild( new Sparrow.UI.Button( "Start" , { position: "center" , verticalPosition: "bottom" , y: 20 , width: 200 , height: 50 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_playAgain.onclick = () => {
            game.state = GameState.GAME;
            this.lbl_bg.b_visible = false;
            if ( b_playMusic )
            {
                music.play();
            }
        };
        this.lbl_bg.b_visible = true;
    }

    show()
    {
        this.lbl_bg.b_visible = true;
    }
}