function runApp() {
    var steps = document.getElementsByClassName('step'),
        lastStep = steps.length - 1,
        step = 0;

    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() {
        if ($('uploadForm')['data-image']) {
            var img = new Image,
                canvas = $('preview'),
                context = canvas.getContext('2d'),
                scale = 360,
                background = '#000',
                color = '#fff',
                font = 'Calibri, Arial, sans-serif',
                titleFontSize = 32,
                descrFontSize = 24,
                i1 = 20,
                i2 = 80,
                i3 = 15,
                i4 = 17,
                i5 = i1 * 1.5,
                i6 = 50,
                i7 = i5 + i6,
                i8 = 40;

            function drawBackground() {
                var dx = img.width < scale ? scale - img.width : 0;
                canvas.width = dx + i1 * 2 + img.width;
                canvas.height = i1 * 2 + i2 + img.height;
                context.fillStyle = background;
                context.fillRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = color;
                context.fillRect(i3 + dx / 2, i3, img.width + (i1 - i3) * 2, img.height + (i1 - i3) * 2);
                context.fillStyle = background;
                context.fillRect(i4 + dx / 2, i4, img.width + (i1 - i4) * 2, img.height + (i1 - i4) * 2);
                context.drawImage(img, i1 + dx / 2, i1, img.width, img.height);
            }

            function drawText(text, size, dy) {
                context.font = size + 'px ' + font;
                context.fillStyle = color;
                context.textAlign = 'center';
                context.fillText(clean(text), canvas.width / 2, dy);
            }

            img.onload = function() {
                var proportion = img.width / img.height;

                if (proportion < 0.51 || proportion > 1.94) {
                    $('uploadForm')['data-image'] = '';
                    return $('uploadError').innerHTML = 'Неправильные пропорции изображения';
                }

                img.width = scale * proportion;
                img.height = scale;
                drawBackground();
                // canvas.toDataURL();
                step = 1;
                showStep();
            }

            img.src = $('uploadForm')['data-image'];
            $('uploadForm')['data-image'] = '';
            $('uploadForm').reset();
            $('editForm').reset();

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

            $('imgTitle').onkeypress = $('imgTitle').onkeyup = function() {
                context.fillStyle = background;
                context.fillRect(0, img.height + i5, canvas.width, i6);
                drawText(this.value.toUpperCase(), titleFontSize, img.height + i5 + titleFontSize);
            }

            $('imgDescr').onkeypress = $('imgDescr').onkeyup = function() {
                context.fillStyle = background;
                context.fillRect(0, img.height + i7, canvas.width, i8);
                drawText(this.value, descrFontSize, img.height + i7 + descrFontSize);
            }

            $('backgroundColor').onchange = $('fontColor').onchange = function() {
                if (this.id == 'backgroundColor') {
                    background = this.value;
                }
                else if (this.id == 'fontColor') {
                    color = this.value;
                }

                // перерисовываем все
                drawBackground();
                drawText($('imgTitle').value.toUpperCase(), titleFontSize, img.height + i5 + titleFontSize);
                drawText($('imgDescr').value, descrFontSize, img.height + i7 + descrFontSize);
            }

            $('editForm').onsubmit = function() {
                // alert(1);
                ajax.post('save_image.php', {data: canvas.toDataURL()}, {done: function(data) {
                        //
                }})

                return false;
            }
        }
    }

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

    $('imgURL').onchange = function() {
        ajax.post('get_image.php', {url: this.value.trim()}, {
            done: function(data) {
                if (data.substr(0, 5) == 'error') {
                    $('uploadForm')['data-image'] = '';
                    return $('uploadError').innerHTML = data.substr(6);
                }

                $('uploadForm')['data-image'] = data;
                $('uploadError').innerHTML = '';
            },

            fail: function(code, text) {
                $('uploadForm')['data-image'] = '';
                $('uploadError').innerHTML = code + ' ' + text;
            }
        });
    }

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

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

        if (error) {
            $('uploadForm')['data-image'] = '';
            return $('uploadError').innerHTML = error;
        }

        var reader = new FileReader;

        reader.onload = function(event) {
            $('uploadForm')['data-image'] = event.target.result;
            $('uploadError').innerHTML = '';
        }

        reader.readAsDataURL(file);
    }

    $('uploadForm').onsubmit = function() {
        if (this['data-image']) {
            showPreview();
        }
        else {
            $('uploadError').innerHTML = 'Не выбрано изображение';
        }

        return false;
    }

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

this.addEventListener('load', runApp);