module Coloring {
    export class Coloring extends Base.BasicGroup {
        GameData: any;

        Svg: String;
        task: number;
        vSender: any;

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

        }

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

        decodeBase64(s) {
            var e = {}, i, b = 0, c, x, l = 0, a, r = '', w = String.fromCharCode, L = s.length;
            var A = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
            for (i = 0; i < 64; i++) { e[A.charAt(i)] = i; }
            for (x = 0; x < L; x++) {
                c = e[s.charAt(x)]; b = (b << 6) + c; l += 6;
                while (l >= 8) { ((a = (b >>> (l -= 8)) & 0xff) || (x < (L - 2))) && (r += w(a)); }
            }
            return r;
        }

        preload() {
            super.preload();
            
            //funkcja do ładowania elementow z jsona
            //for (var i = 0; i < this.GameData.Graphics.length; i++) this.game.load.image(this.GameData.Graphics[i].key, this.GameData.Graphics[i].src);
            this.Svg = this.decodeBase64(this.GameData.Svg[0].base64);
            this.task = this.GameData.Options[0].task;

            this.game.load.onLoadComplete.addOnce(this.create, this);
            this.game.load.start();

            var htmlHead = document.getElementsByTagName('head');
            var helperScript = document.createElement('script');
            helperScript.setAttribute('src', 'Games/Elements/Coloring/svgHelper.js');
            htmlHead[0].appendChild(helperScript);

            var exam = document.getElementById('exam');

            var coloringBook = document.createElement('div');
            coloringBook.setAttribute('id', MODULE + '_' + this.task);
            coloringBook.setAttribute('style', 'display: none;');
            exam.appendChild(coloringBook);

            // kontener dla rysunku
            var svgContainer = document.createElement('div');
            svgContainer.setAttribute('id', 'svgContainer');
            svgContainer.setAttribute('style', 'position: absolute; z-index: 1000; top: 12%; left: 17%; width:70%; height:80%;');
            coloringBook.appendChild(svgContainer); // dodany do głównego exam


            // rysunek - wrzutka do kontenera
            svgContainer.innerHTML = "<svg id=\"" + 'svg_' + MODULE + '_' + this.task + "\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 900 700\" style=\"fill:#fff; stroke: #000; stroke-opacity: 0.9; \">" + this.Svg + "</svg>";
            
            // kontener dla palety
            var paletteContainer = document.createElement('div');
            paletteContainer.setAttribute('id', 'paletteContainer');
            paletteContainer.setAttribute('style', 'position: absolute; top: 30%; left: 1%; width:100%; height: 34%;');
            coloringBook.appendChild(paletteContainer); // dodany do głównego exam
            paletteContainer.innerHTML = "<svg class=\"swatches\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 500\" width=\"25%\" height=\"100%\" \" ><rect style=\"fill:#d4213d\" x=\"0\"  y=\"0\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#e9e8e7\" x=\"0\"  y=\"50\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#ff5cae\" x=\"0\" y=\"100\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#6d2bed\" x=\"0\" y=\"150\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#ffe131\" x=\"0\"  y=\"200\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#80ce1b\" x=\"0\" y=\"250\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#f28d20\" x=\"0\" y=\"300\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#843617\" x=\"0\" y=\"350\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#339eff\" x=\"0\" y=\"400\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:undefined\" x=\"0\" y=\"460\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:#339eff\" x=\"0\" y=\"400\" width=\"40px\" height=\"40px\" /> <rect style=\"fill:undefined\" stroke=\"#ffffff\" stroke-width=\"20\"  x=\"0\" y=\"450\" width=\"40px\" height=\"40px\" /> <line x1=\"0\" y1=\"450\" x2=\"40\" y2=\"490\" stroke=\"red\" stroke-width=\"3\" /> <rect id=\"selection\" style=\"stroke: #0000ff; stroke - opacity: 1; fill: none\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"/> </svg>";

            // variable sender ;) hack for IE
            this.vSender = document.createElement('div');
            this.vSender.setAttribute('id', 'vs_' + MODULE + '_' + this.task);
            this.vSender.setAttribute('style', 'display: none;');
            this.vSender.innerHTML = "0";
            exam.appendChild(this.vSender);


        }

        create() {
            if (this.json.isStandalone) {
                super.create();
            }
        }

        update() {

            if (this.vSender.innerHTML == '1') {
                EU.setGameCompletion(this.parent, 1);
            } else {
                EU.setGameCompletion(this.parent, 0);
            }
            if (this.game.camera.x == this.task * 1920) window.document.getElementById(MODULE + '_' + this.task).style.display = 'block';
            else window.document.getElementById(MODULE + '_' + this.task).style.display = 'none';
        }


    }
}