"use strict";

var GRID_WIDTH = 16;
var GRID_HEIGHT = 16;

var BLOCK_WIDTH = 8;
var BLOCK_HEIGHT = 8;

var CELL_WIDTH = BLOCK_WIDTH * 2;
var CELL_HEIGHT = BLOCK_HEIGHT * 2;


function launch(prefix, containerId, config) {
    var config = config || {};
    var deps = [
        "element-factory.js",
        "playfield.js",
        "playfield-canvas-view.js",
        "animation.js"
    ];
    var loaded = 0;
    for (var i = 0; i < deps.length; i++) {
        var elem = document.createElement('script');
        elem.src = prefix + deps[i];
        elem.onload = function() {
            if (++loaded < deps.length) return;

            var container = document.getElementById(containerId);
            var g = new TwoFiftySix();

            var paramList = window.location.search.substr(1).split('&');
            var params = {};
            for (var i = 0; i < paramList.length; i++) {
                var pair = paramList[i].split('=');
                params[pair[0]] = pair[1];
            }   

            var getIntParam = function(paramName, def, minV, maxV) {
                var value = parseInt(params[paramName] || ('' + def), 10);
                value = isNaN(value) ? def : value;
                value = value < minV ? minV : value;
                value = value > maxV ? maxV : value;
                return value;
            };

            var canvas = yoob.makeCanvas(
                container,
                GRID_WIDTH * CELL_WIDTH, GRID_HEIGHT * CELL_HEIGHT
            );
            canvas.style.border = Math.round(BLOCK_WIDTH / 2) + 'px solid black';

            yoob.makeLineBreak(container);
            var slidersPanel = yoob.makeDiv(container);
            slidersPanel.id = "sliders-panel";
            var speed = getIntParam('speed', 5, 0, 50);
            yoob.makeRangeControl(slidersPanel, {
                label: "Speed:",
                min: 0,
                max: 50,
                value: speed,
                callback: function(v) {
                    g.setDelay(50 - v);
                }
            });
            g.setDelay(50 - speed);

            var variety = getIntParam('variety', 1, 1, 256);
            yoob.makeLineBreak(slidersPanel);
            yoob.makeRangeControl(slidersPanel, {
                label: "Variety:",
                min: 1,
                max: 256,
                value: variety,
                callback: function(v) {
                    g.setVariety(v);
                }
            });
            g.setVariety(variety);

            var noise = getIntParam('noise', 0, 0, 100);
            yoob.makeLineBreak(slidersPanel);
            yoob.makeRangeControl(slidersPanel, {
                label: "Noise:",
                min: 0,
                max: 100,
                value: noise,
                callback: function(v) {
                    g.setNoise(v);
                }
            });
            g.setNoise(noise);

            var palette = params.palette || 'Tetrade';

            yoob.makeLineBreak(container);
            yoob.makeSelect(container, "Palette:", [
                ['RGB', 'RGB'],
                ['Greyscale', 'Greyscale'],
                ['Tetrade', 'Tetrade']
            ], function(value) {
                var pals = {
                    'RGB': [
                        '#ffffff',
                        '#ff0000',
                        '#00ff00',
                        '#0000ff'
                    ],
                    'Greyscale': [
                        '#ffffff',
                        '#aaaaaa',
                        '#555555',
                        '#000000'
                    ],
                    'Tetrade': [
                        '#E1E685',
                        '#85E6BB',
                        '#8A85E6',
                        '#E685B0'
                    ]
                };
                g.setMasterPalette(pals[value]);
            }, palette);

            g.init({
                canvas: canvas,
            });
        };
        document.body.appendChild(elem);
    }
}


function shuffle(ary) {
    var oldAry = ary.map(function(x) { return x; })
    var newAry = [];
    while (oldAry.length > 0) {
        newAry.push(oldAry.splice(Math.random() * oldAry.length, 1)[0]);
    }
    return newAry;
}


var TwoFiftySix = function() {
    this.init = function(cfg) {
        this.canvas = cfg.canvas;
        this.ctx = this.canvas.getContext('2d');
        if (!this.masterPalette) {
            this.masterPalette = [
                '#ffffff',
                '#ff0000',
                '#00ff00',
                '#0000ff'
            ];
        }
        this.palettes = new Array(256);
        this.makePalettes();
        //this.delay = cfg.delay || 0;
        this.delayCounter = 0;
        //this.noise = 0;
        //this.variety = cfg.variety || 1;

        this.playfield = (new yoob.Playfield()).init();

        for (var x = 0; x < GRID_WIDTH; x++) {
            for (var y = 0; y < GRID_HEIGHT; y++) {
                this.playfield.put(x, y, y*GRID_WIDTH + x);
            }
        }

        this.canvasView = new yoob.PlayfieldCanvasView().init({
            playfield: this.playfield,
            canvas: this.canvas,
            cellWidth: CELL_WIDTH,
            cellHeight: CELL_HEIGHT
        });

        var $this = this;
        this.canvasView.drawCell = function(ctx, value, playfieldX, playfieldY,
                                            canvasX, canvasY, cellWidth, cellHeight) {

            var palIndex = playfieldX + playfieldY * GRID_WIDTH;
            var pal = $this.palettes[palIndex % $this.variety];

            var colours = [];
            colours.push(pal[value & 0x03]);
            colours.push(pal[(value >> 2) & 0x03]);
            colours.push(pal[(value >> 4) & 0x03]);
            colours.push(pal[(value >> 6) & 0x03]);

            if (Math.floor(Math.random() * 100) < $this.noise) {
                colours = shuffle(colours);
            }

            ctx.fillStyle = colours[0];
            ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
            ctx.fillStyle = colours[1];
            ctx.fillRect(canvasX + BLOCK_WIDTH, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
            ctx.fillStyle = colours[2];
            ctx.fillRect(canvasX, canvasY + BLOCK_HEIGHT, BLOCK_WIDTH, BLOCK_HEIGHT);
            ctx.fillStyle = colours[3];
            ctx.fillRect(canvasX + BLOCK_WIDTH, canvasY + BLOCK_HEIGHT, BLOCK_WIDTH, BLOCK_HEIGHT);

            if ($this.outline) {
                ctx.lineWidth = 1;
                ctx.strokeStyle = 'black';
                ctx.strokeRect(canvasX, canvasY, CELL_WIDTH, CELL_HEIGHT);
            }
        };

        this.animation = (new yoob.Animation()).init({'object': this});
        this.animation.start();
    };

    this.setMasterPalette = function(pal) {
        this.masterPalette = pal;
    };

    this.makePalettes = function() {
        for (var i = 0; i < 256; i++) {
            this.palettes[i] = shuffle(this.masterPalette);
        }
    };

    this.setDelay = function(d) {
        this.delay = d;
    };

    this.setNoise = function(d) {
        this.noise = d;
    };

    this.setVariety = function(v) {
        v = v || 0;
        if (v < 1 || v > 256) return;
        this.variety = v;
    };

    this.setScramble = function(b) {
        this.scramble = b;
    };

    this.update = function() {
        if (this.delayCounter < this.delay) {
            this.delayCounter++;
            return;
        }
        this.delayCounter = 0;

        this.makePalettes();
    };

    this.draw = function() {
        this.canvasView.draw();
    };
}