'use strict';

Ox.load('Image', function() {

    var $body = Ox.$('body'),
        $table = Ox.$('<table>').appendTo($body),
        $tr,
        text = {
            iceland: 'The first image he told me about '
                + 'was of three children on a road in Iceland in 1965.',
            vietnam: 'He said for him it was the image of happiness, '
                + 'and that he had often tried to link it to other images, '
                + 'but it had never worked.'
        },
        i = 0;

    encode(decode);

    function encode(callback) {
        status('Load iceland.png');
        Ox.Image('png/iceland.png', function(iceland) {
            result(Ox.$('<img>').attr({src: iceland.src()}));
            status(
                'Encode the text <i>"' + text.iceland + '"</i> into '
                + 'the least significant bits of iceland.png'
            );
            iceland.encode(text.iceland, false, 1, function(iceland) {
                result(Ox.$('<img>').attr({src: iceland.src()}));
                status('Load vietnam.png');
                Ox.Image('png/vietnam.png', function(vietnam) {
                    result(Ox.$('<img>').attr({src: vietnam.src()}));
                    status(
                        'Encode the text <i>"' + text.vietnam + '"</i> into'
                        + ' the least significant bits of vietnam.png'
                    );
                    vietnam.encode(text.vietnam, false, 1, function(vietnam) {
                        result(Ox.$('<img>').attr({src: vietnam.src()}));
                        status(
                            'Encode vietnam.png into iceland.png '
                            + 'by flipping the second least significant bits'
                        );
                        iceland.encode(vietnam.src(), -1, function(iceland) {
                            result(Ox.$('<img>').attr({src: iceland.src()}));
                            callback(iceland);
                        });
                    });
                });
            });
        });
    }

    function decode(iceland) {
        status('Decode the least signigicant bits of iceland.png');
        iceland.decode(false, 1, function(str) {
            result(str);
            status('Decode all bits of iceland.png');
            iceland.decode(-1, function(src) {
                result(
                    Ox.sub(src, 0, 32) + '<i> ... ['
                    + Ox.formatNumber(src.length - 64)
                    + ' more bytes] ... </i>' + Ox.sub(src, -32)
                );
                status('Load as vietnam.png');
                Ox.Image(src, function(image) {
                    result(Ox.$('<img>').attr({src: src}));
                    status('Decode the least significant bits of vietnam.png');
                    image.decode(false, 1, function(str) {
                        result(str);
                    });
                });
            });
        });
    }

    function status(value) {
        var $td = Ox.$('<td>');
        if (Ox.isString(value)) {
            $td.html(
                value.replace(/(\w+\.png)/g, '<b>$1</b>')
            );
        } else {
            $td.append(value);
        }
        $tr = Ox.$('<tr>').append($td).appendTo($table);
    }

    function result(value) {
        var $td = Ox.$('<td>');
        if (Ox.isString(value)) {
            $td.html(value);
        } else {
            $td.append(value);
        }
        $tr.append($td)
    }

});