module ConnectDots {

    export class ConnectDots extends Base.BasicGroup {

        Elements: any;
        PREFIX: any;

        lastX: number;
        lastY: number;
        gfx: Phaser.Graphics;
        order: Array<any> = [];

        init(json) {
            super.init(json);
            this.Elements = json.GameData;

        }

        constructor(game, name, x, y, json) {
            super(game, name, x + 400, y, json);
        }

        preload() {
            super.preload();
            this.game.load.onLoadComplete.addOnce(this.create, this);
            this.loadGraphics();
            this.game.load.start();
        }

        loadGraphics() {
            for (var i = 0; i < this.Elements.Graphics.length; i++)
                this.game.load.image(this.Elements.Graphics[i].key, this.Elements.Graphics[i].src);
        }

        create() {
            if (this.json.isStandalone) {
                super.create();
            }
            
            //this.createStaticElements();
            var airplane = this.game.add.sprite(0, 0, 'airplane');
            this.addChild(airplane);
            
            this.drawNumbers();
        }

        createStaticElements() {
            if (this.Elements.StaticElements)
                for (var i = 0; i < this.Elements.StaticElements.el.length; i++) {
                    var el;
                    switch (this.Elements.StaticElements.el[i].type) {
                        case "image":
                            el = this.game.add.image(0, 0, this.PREFIX + this.Elements.StaticElements.el[i].key);
                            break;
                        case "text":
                            el = this.game.add.text(0, 0, this.Elements.StaticElements.el[i].text, this.Elements.StaticElements.Options.Style);
                            break;
                        case "sound":
                            el = this.game.add.sprite(0, 0, "speaker");
                            el.inputEnabled = true;
                            el.name = this.Elements.StaticElements.el[i].sound;
                            el.events.onInputUp.add(this.soundButtonDown, this);
                            break;
                    }
                    var posX = this.Elements.StaticElements.el[i].pos.x;
                    var posY = this.Elements.StaticElements.el[i].pos.y;
                    if (this.Elements.StaticElements.Options.Just) {
                        switch (this.Elements.StaticElements.Options.Just.x) {
                            case "center":
                                posX += (Global.Main.mainContainerDims.wd - 120) / 2;
                                el.anchor.x = 0.5;
                                break;
                            case "right":
                                posX += Global.Main.mainContainerDims.wd - 120;
                                el.anchor.x = 1;
                                break;
                        }
                        switch (this.Elements.StaticElements.Options.Just.y) {
                            case "center":
                                posY += (Global.Main.mainContainerDims.hg - 65) / 2;
                                el.anchor.y = 0.5;
                                break;
                            case "bottom":
                                posY += Global.Main.mainContainerDims.hg - 65;
                                el.anchor.y = 1;
                                break;
                        }
                    }
                    el.position.set(posX, posY);
                    this.addChild(el);
                }
        }

        soundButtonDown(button) {
            Global.Main.PlayMusic(new Audio(button.name));
        }

        drawNumbers() {

            var liczby = [];
            
            for (var i = 0; i < this.Elements.Dots.length; i++) {
                liczby.push({ x: this.Elements.Dots[i].x, y: this.Elements.Dots[i].y });
                if (i == 0) { this.lastX = this.Elements.Dots[i].x; this.lastY = this.Elements.Dots[i].y; }
            }

            for (i = 0; i < liczby.length; i++) {

                if (i > 0) this.order.push(i.toString());

                var txt = this.game.add.text(liczby[i].x, liczby[i].y, i.toString(), { font: "24px Arial", fill: "#000000", align: "center" } );
                txt.anchor.set(0.5, 0.5);
                txt.inputEnabled = true;
                txt.events.onInputDown.add(this.drawLine, this);
                this.addChild(txt);

                
                var dot = this.game.add.graphics(0, 0);
                dot.lineStyle(6, 0x000000, 1);
                dot.moveTo(liczby[i].x - 3, liczby[i].y + 10);
                dot.lineTo(liczby[i].x + 3, liczby[i].y + 10);
                this.addChild(dot);
            }
            // this.order.push("0"); // repeat first element
        }

        private drawLine(item) {



            if (this.order[0] != item.text && this.order.length > 0) {
                this.gfx = this.game.add.graphics(0, 0);
                this.gfx.lineStyle(3, 0xff0000, 1);
                this.gfx.moveTo(this.lastX, this.lastY + 10);
                this.gfx.lineTo(item.x, item.y + 10);
                this.addChild(this.gfx);

                var tw = this.game.add.tween(this.gfx).to({ alpha: 0 }, 1500, "Linear", true);
                
            }
            else if(this.order.length > 0) {
                this.order.shift();
                this.gfx = this.game.add.graphics(0, 0);
                this.gfx.lineStyle(3, 0x0000000, 1);
                this.gfx.moveTo(this.lastX, this.lastY + 10);
                this.gfx.lineTo(item.x, item.y + 10);
                this.addChild(this.gfx);

                this.lastX = item.x;
                this.lastY = item.y;
            }

            if (this.order.length == 0) {
                this.game.time.events.add(Phaser.Timer.SECOND * 3, this.end, this);
            }

        }

        end() {
            EU.setGameCompletion(this.parent, 1);
            EU.Log("Kropki połączone poprawnie.");
            if (TYPE === "gm") super.nextTask();
        }
    }

}

