this.addEventListener('load', function() {
    var steps = document.getElementsByClassName('step'),
        lastStep = steps.length - 1,
        step = 0,
        size = 360;

    function showStep() {
        $('stepTitle').innerHTML = step == lastStep ? 'Завершение' : 'Шаг ' + (step + 1) + ': ' + ['Загрузка', 'Редактирование'][step];
        $('prevStep').style.display = step ? 'inline' : 'none';
        var i = lastStep;

        while (i >= 0) {
            steps[i].style.display = step == i-- ? 'block' : 'none';
        }
    }

    function prevStep() {
        if (step) {
            --step;
            showStep();
        }
    }

    function clean(str) {
        return str.trim().replace(/\s+/g, ' ');
    }

    function showPreview(data) {
        var img = new Image;

        img.onload = function() {
            var proportion = img.width / img.height;
            img.width = size * proportion;
            var dx = img.width < size ? size - img.width : 0;
            img.height = size;
            // убираем ошибки
            $('uploadError').innerHTML = '';
            $('uploadForm').reset();
            $('editForm').reset();
            // рисуем дем
            var canvas = $('preview');
            canvas.width = img.width + 40 + dx;
            canvas.height = img.height + 120;
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#fff';
            ctx.fillRect(15 + dx / 2, 15, canvas.width - 15 * 2 - dx, canvas.height - 15 * 2 - 40 * 2);
            ctx.fillStyle = '#000';
            ctx.fillRect(17 + dx / 2, 17, canvas.width - 17 * 2 - dx, canvas.height - 17 * 2 - 40 * 2);
            ctx.drawImage(img, 20 + dx / 2, 20, img.width, img.height);

            $('imgTitle').onchange = $('imgDescr').onchange = function() {
                this.value = clean(this.value);
            }

            $('imgTitle').onkeypress = $('imgTitle').onkeyup = function() {
                var fontSize = 32;
                ctx.fillStyle = '#000';
                ctx.fillRect(0, img.height + 30, canvas.width, 50);
                ctx.font = fontSize + 'px Tahoma, sans-serif';
                ctx.fillStyle = '#fff';
                ctx.textAlign = 'center';
                ctx.fillText(clean(this.value).toUpperCase(), canvas.width / 2, img.height + 30 + fontSize);
            }

            $('imgDescr').onkeypress = $('imgDescr').onkeyup = function() {
                var fontSize = 24;
                ctx.fillStyle = '#000';
                ctx.fillRect(0, img.height + 80, canvas.width, canvas.height);
                ctx.font = fontSize + 'px Tahoma, sans-serif';
                ctx.fillStyle = '#fff';
                ctx.textAlign = 'center';
                ctx.fillText(clean(this.value), canvas.width / 2, img.height + 80 + fontSize);
            }

            // canvas.toDataURL();
            step = 1;
            showStep();
        }

        img.src = data;
    }

    $('prevStep').onclick = prevStep;
    $('allowedImageTypes').innerHTML = app.allowedImageTypes.join(', ');
    $('minImageSize').innerHTML = formatSize(app.minImageSize, 'si');
    $('maxImageSize').innerHTML = formatSize(app.maxImageSize, 'si');

    $('imageURL').onchange = function() {
        var req = new XMLHttpRequest;
        req.open('POST', 'get_image.php');

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                if (req.status == 200) {
                    if (req.responseText.substr(0, 1) == 0) {
                        return $('uploadError').innerHTML = req.responseText.substr(1);
                    }

                    return showPreview(req.responseText);
                }

                $('uploadError').innerHTML = req.status + ' ' + req.statusText;
            }
        }

        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send( 'u=' + encodeURIComponent(this.value) );
    }

    $('imageUpload').onchange = function(event) {
        var file = event.target.files[0], error;

        if ( !new RegExp('^image/(' + app.allowedImageTypes.join('|') + ')$').test(file.type) ) {
            error = app.errors.invalidFileType;
        }
        else if (file.size < app.minImageSize) {
            error = app.errors.imageTooSmall;
        }
        else if (file.size > app.maxImageSize) {
            error = app.errors.imageTooBig;
        }

        if (error) {
            return $('uploadError').innerHTML = error;
        }

        var reader = new FileReader;

        reader.onload = function(event) {
            showPreview(event.target.result);
        }

        reader.readAsDataURL(file);
    }

    $('copyright').innerHTML = app.copyright;
    showStep();
});