var playoff = {

    settings: {
        'winner_h_offset': 8,
        'loser_h_offset': 14,
        'winner_v_offset': -6,
        'loser_v_offset': 6,
        'loser_colour': '#ff0000',
        'winner_colour': '#00ff00'
    },

    drawLine: function(ctx, line) {
        ctx.beginPath();
        ctx.moveTo(line[0], line[1]);
        ctx.lineTo(line[2], line[3]);
        ctx.stroke();
    },

    loadSettings: function(canvas, defaults) {
        for (var setting in defaults) {
            var attr = 'data-' + setting.replace(/_/g, '-');
            var attr_value = canvas.getAttribute(attr);
            if (attr_value) {
                defaults[setting] = attr_value;
            }
        }
        return defaults;
    },

    run: function() {
        var boxes = document.getElementsByClassName('playoff_matchbox');
        var lines = {
            'winner': {},
            'loser': {}
        };
        var boxes_idx = {};
        for (var b = 0; b < boxes.length; b++) {
            var id = boxes[b].getAttribute('data-id');
            boxes_idx[id] = boxes[b];
            for (var attr in lines) {
                var value = boxes[b].getAttribute('data-' + attr);
                if (value) {
                    if (!lines[attr][value]) {
                        lines[attr][value] = [];
                    }
                    lines[attr][value].push(id);
                }
            }
        }
        var canvas = document.getElementById('playoff_canvas');
        this.settings = this.loadSettings(canvas, this.settings);
        var ctx = canvas.getContext('2d');
        for (var type in lines) {
            ctx.strokeStyle = this.settings[type + '_colour'];
            for (var from in lines[type]) {
                var to = lines[type][from];
                from = from.split(' ');
                var horizontal_from = [];
                var vertical_from = [0, canvas.height, 0, 0];
                for (var f = 0; f < from.length; f++) {
                    var box = boxes_idx[from[f]];
                    var line = [
                        Math.floor(parseInt(box.style.left) + parseInt(box.clientWidth)),
                        Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + parseFloat(this.settings[type + '_v_offset'])),
                        Math.floor(parseInt(box.style.left) + parseInt(box.clientWidth) + parseFloat(this.settings[type + '_h_offset'])),
                        Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + parseFloat(this.settings[type + '_v_offset']))
                    ];
                    horizontal_from.push(line);
                    for (var l in horizontal_from) {
                        if (horizontal_from[l][2] < line[2]) {
                            horizontal_from[l][2] = line[2];
                        } else {
                            line[2] = horizontal_from[l][2];
                        }
                        if (vertical_from[0] < horizontal_from[l][2]) {
                            vertical_from[0] = horizontal_from[l][2];
                            vertical_from[2] = horizontal_from[l][2];
                        }
                        if (vertical_from[1] > horizontal_from[l][3]) {
                            vertical_from[1] = horizontal_from[l][3];
                        }
                        if (vertical_from[3] < horizontal_from[l][3]) {
                            vertical_from[3] = horizontal_from[l][3];
                        }
                    }
                }
                var horizontal_to = [];
                var vertical_to = [canvas.width, canvas.height, canvas.width, 0];
                for (var t = 0; t < to.length; t++) {
                    var box = boxes_idx[to[t]];
                    var line = [
                        parseInt(box.style.left),
                        Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + parseFloat(this.settings[type + '_v_offset'])),
                        Math.floor(parseInt(box.style.left) - parseFloat(this.settings[type + '_h_offset'])),
                        Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + parseFloat(this.settings[type + '_v_offset']))
                    ];
                    horizontal_to.push(line);
                    for (var l in horizontal_to) {
                        if (horizontal_to[l][2] > line[2]) {
                            horizontal_to[l][2] = line[2];
                        } else {
                            line[2] = horizontal_to[l][2];
                        }
                        if (vertical_to[0] > horizontal_to[l][2]) {
                            vertical_to[0] = horizontal_to[l][2];
                            vertical_to[2] = horizontal_to[l][2];
                        }
                        if (vertical_to[1] > horizontal_to[l][3]) {
                            vertical_to[1] = horizontal_to[l][3];
                        }
                        if (vertical_to[3] < horizontal_to[l][3]) {
                            vertical_to[3] = horizontal_to[l][3];
                        }
                    }
                }
                var midpoints = [
                    [
                        (vertical_from[0] + vertical_from[2]) / 2,
                        (vertical_from[1] + vertical_from[3]) / 2
                    ],
                    [
                        parseFloat(this.settings[type + '_h_offset']) / 2 + (vertical_from[0] + vertical_from[2] + vertical_to[0] + vertical_to[2]) / 4,
                        (vertical_from[1] + vertical_from[3]) / 2
                    ],
                    [
                        parseFloat(this.settings[type + '_h_offset']) / 2 + (vertical_from[0] + vertical_from[2] + vertical_to[0] + vertical_to[2]) / 4,
                        (vertical_to[1] + vertical_to[3]) / 2
                    ],
                    [
                        (vertical_to[0] + vertical_to[2]) / 2,
                        (vertical_to[1] + vertical_to[3]) / 2
                    ]
                ]
                for (var l in horizontal_from) {
                    this.drawLine(ctx, horizontal_from[l]);
                }
                this.drawLine(ctx, vertical_from);
                for (var l in horizontal_to) {
                    this.drawLine(ctx, horizontal_to[l]);
                }
                this.drawLine(ctx, vertical_to);
                for (var m = 0; m < midpoints.length-1; m++) {
                    this.drawLine(ctx, [
                        midpoints[m][0], midpoints[m][1], midpoints[m+1][0], midpoints[m+1][1]
                    ]);
                }
            }
        }
    }

}

playoff.run();