import BitmapMask = Phaser.Display.Masks.BitmapMask;
import POINTER_UP = Phaser.Input.Events.POINTER_UP;

class CharacterScene extends WTScene
{
    private title_txt               : Phaser.GameObjects.Text;
    private activeCategoryIDX       : number = 0;
    private activeCategory          : string;
    private levelsDict_arr          : any[];
    private categories_arr          : string[];

    constructor(props)
    {
        super(Main.CHARACTER, false);
    }

    preload(): void
    {
        super.preload();

        this.load.image("character_bg", "../img/character/character_bg.png");
        this.load.image("control_bg", "../img/character/controlPanelGFX.png");
    }

    create():void
    {
        this.initDP();

        this.add.image(this.gameX,this.gameY+4,"character_bg").setOrigin(0,0);
        let panelGFX : Phaser.GameObjects.Image = this.add.image(this.gameX,this.gameY + this.gameHei-91,"control_bg").setOrigin(0,0);

       // this.addCurtains();

        let txtY : number = this.gameCenterY;
        this.title_txt = this.add.text(this.gameCenterX, txtY, 'Appearance', { fontFamily: 'CarnevaleeFreakshow', fontSize: 46, color: '#FFFFFF' });
        this.title_txt.setStroke("#737245",4);
        this.title_txt.setShadow(4,4,'#000000',5);
        this.title_txt.setOrigin(0.5);

        let desc: Phaser.GameObjects.Text = this.add.text(this.gameCenterX, txtY+30, 'capture details about your character', { fontFamily: 'CarnevaleeFreakshow', fontSize: 20, color: '#FFFFFF' });
        desc.setShadow(4,4,'#000000',4);
        desc.setOrigin(0.5);

        //add buttons
        let btnOffset : number = 92;
        let btnY : number = panelGFX.y+26;

        let left_btn : CharPushBtn = new CharPushBtn(this,this.gameCenterX - btnOffset,btnY,"left");
        let right_btn : CharPushBtn = new CharPushBtn(this,this.gameCenterX + btnOffset,btnY,"right");


        if (Main.DEBUG_MODE)
        {
            this.showTray();
        }
        else
        {
            this.createDisableBG();
        }
    }


    private initDP() : void
    {
        var appearance_arr  : string[]  = ["Tall", "Short", "Skinny", "Chubby", "Dark", "Fair"];
        var features_arr    : string[]  = ["Blue eyes", "Brown eyes", "Green eyes", "Long hair", "Short hair","Medium hair"];
        var personality_arr : string[]  = ["Friendly", "Confident", "Shy", "Kind", "Bossy", "Moody","Happy"];

        this.levelsDict_arr = [];

        this.levelsDict_arr["appearance"]   = {id:"appearance", idx:0, label:"Appearance",  words_arr:appearance_arr,   color:"yellow"};
        this.levelsDict_arr["features"]     = {id:"features",   idx:1, label:"Features",    words_arr:features_arr,     color:"blue"};
        this.levelsDict_arr["personality"]  = {id:"personality",idx:2, label:"Personality", words_arr:personality_arr,  color:"green"};
        this.categories_arr                     = ["appearance","features","personality"];
    }
}

class CharPushBtn  {

    private fx              : AudioFX;
    private top_btn         : Phaser.GameObjects.Image;
    private startY          : number;
    private endY            : number;


    constructor(scene : Phaser.Scene, x : number, y:number, btnType :string)
    {
        this.fx = scene.scene.get(Main.AUDIO_FX) as AudioFX;

        //addd base
        let base: Phaser.GameObjects.Image = scene.add.image(x, y, Main.UI, "craneMoveBtnBaseGFX0000");

        //add top_btn
        this.startY     = y-5;
        this.endY       = y-1;
        this.top_btn    = scene.add.image(x, this.startY, Main.UI, "craneMoveBtnTopGFX0000");

        if (btnType == "left")
        {
            this.top_btn.scaleX = -1;
            this.top_btn.x =x-2;
        }

        let mask_gfx: Phaser.GameObjects.Image = scene.add.image(x, y-9, Main.UI, "craneMoveBtnMask0000");
        let maska = new BitmapMask(scene,mask_gfx);
        //mask_gfx.alpha = .5;
        this.top_btn.mask = maska;

        this.top_btn.setInteractive();
        this.top_btn.on(POINTER_DOWN,()=>this.onBtnDown());
        this.top_btn.on(POINTER_UP,()=>this.onBtnUp());
        this.top_btn.on(POINTER_OVER,()=>{this.fx.playRollover();});
    }

    private onBtnDown():void
    {
        TweenLite.to(this.top_btn, .2,{y:this.endY, ease:Quad.easeInOut});
        this.fx.playSFX(AudioFX.SERVO_START);
        this.fx.toggleServoLoop();
    }

    private onBtnUp():void
    {
        TweenLite.to(this.top_btn, .3,{y:this.startY, ease:Quad.easeIn});
        this.fx.toggleServoLoop(false);
    }

}