(function() {
    var frameWidth = 690;
    var frameHeight = 460;

    getFrame = function(id) {
        id = id || 0;
        var frames = document.getElementsByClassName('frame'),
            i = frames.length;
        gid('heading').innerHTML = frames[id].getAttribute('data-heading');
        gid('prev').style.display = id ? 'inline' : 'none';

        while (i--) {
            frames[i].style.display = i == id ? 'block' : 'none';
        }

        VK.callMethod('resizeWindow', frameWidth, document.body.clientHeight > frameHeight ? document.body.clientHeight : frameHeight);
    }
})();

(function() {
    var i = 0;

    nextFrame = function() {
        getFrame(++i);
    };

    prevFrame = function() {
        getFrame(--i);
    }
})();

function setUploadError(message) {
    gid('uploadError').innerHTML = message ? message : '';
}

function imagePreview(data) {
    var size = 680,
        img = new Image,
        cnv = gid('preview'),
        ctx = cnv.getContext('2d');
    img.src = data;

    img.onload = function() {
        var proportion = this.width / this.height;
        (this.width > this.height) ? this.height = (this.width = size) / proportion : this.width = (this.height = size) * proportion;
        cnv.width = this.width;
        cnv.height = this.height;
        ctx.drawImage(this, 0, 0, this.width, this.height);
        nextFrame();
    };

    gid('uploadForm').reset();
    setUploadError();
}

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

function editImage(type, img) {
    var cnv = gid('result'),
        ctx = cnv.getContext('2d'),
        renderImage;

    switch (type) {
        case 'dem':
            var fontSize1 = img.width * 0.1,
                fontSize2 = img.width * 0.06,
                paddingFont = 'px Calibri, Arial, sans-serif',
                // отступ от края
                x1 = 32,
                // толщина белой линии
                x2 = 2,
                // промежуток между линией и изображением
                x3 = 2,
                x4 = x1 + x2 + x3,
                x5 = x4 * 2,
                x6 = x2 * 2 +  x3 * 2,
                x7 = x1 + x2,
                x8 = x3 * 2;
            cnv.width = img.width;
            cnv.height = img.height + fontSize1 + fontSize2;
            img.width -= x5;
            img.height -= x5;

            renderImage = function() {
                var text1 = clean( gid('text1').value );
                var text2 = clean( gid('text2').value );
                ctx.fillStyle = '#000';
                ctx.fillRect(0, 0, cnv.width, cnv.height);
                ctx.fillStyle = '#fff';
                ctx.fillRect(x1, x1, img.width + x6, img.height + x6);
                ctx.fillStyle = '#000';
                ctx.fillRect(x7, x7, img.width + x8, img.height + x8);
                ctx.drawImage(img, x4, x4, img.width, img.height);
                // верхний текст
                ctx.textAlign = 'center';
                ctx.fillStyle = '#fff';
                // текст уменьшается на 1 пиксель каждые два символа
                ctx.font = fontSize1 - text1.length / 2 + paddingFont;
                ctx.fillText( text1, cnv.width / 2 + 0.4, img.height + x4 + fontSize1 + 0.4 );
                // нижний текст
                ctx.font = fontSize2 - text2.length / 4 + paddingFont;
                ctx.fillText( text2, cnv.width / 2, cnv.height - x1 );
            };

            break;
    }

    gid('text1').onkeypress = gid('text1').onkeyup = gid('text2').onkeypress = gid('text2').onkeyup = renderImage;
    renderImage();
    nextFrame();
}

this.addEventListener('load', function() {
    gid('uploadForm').onsubmit = function() {
        var u = ( gid('uploadUrl').value = gid('uploadUrl').value.trim() );

        if (u) {
            var o = url.parse(u);

            if (!o) {
                setUploadError('Это не ссылка');
            }
            else if (o.scheme && o.scheme != 'http') {
                setUploadError('Протокол не поддерживается');
            }
            else if (!o.host) {
                setUploadError('Не указан хост');
            }
            else if (!o.path || o.path == '/') {
                setUploadError('Не указан путь до файла');
            }
            else {
                ajax.post('get_image.php', {hostname: o.host, uri: o.path + (o.query ? '?' + o.query : '')}, {
                    done: function(response) {
                        if (response.substr(0, 4) != 'data') {
                            return setUploadError(response);
                        }

                        imagePreview(response);
                    },

                    fail: function() {
                        this.reset()
                        setUploadError('Сервис временно недоступен');
                    }
                });
            }
        }

        return false;
    };

    gid('uploadImage').onchange = function(event) {
        var file = event.target.files[0];

        if ( !new RegExp('^image/(' + conf.allowedImageTypes.join('|') + ')$').test(file.type) ) {
            return setUploadError('Неправильный тип файла');
        }

        var reader = new FileReader;

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

        reader.readAsDataURL(file);
    };

    gid('prev').onclick = function() {
        prevFrame();
        return false;
    };

    gid('previewForm').onsubmit = function() {
        var img = new Image;
        img.src = gid('preview').toDataURL();

        img.onload = function() {
            editImage( gid('imageType').options[ gid('imageType').selectedIndex ].value, this );
        };

        return false;
    };

    gid('text1').onchange = gid('text2').onchange = function() {
        this.value = clean(this.value);
    };

    gid('editForm').onsubmit = function() {
        var data = gid('result').toDataURL('image/jpeg');
        var binary = atob( data.substr( data.indexOf(',') + 1 ) );
        var i = binary.length;
        var view = new Uint8Array(i);

        while (i--) {
            view[i] = binary.charCodeAt(i);
        }

        VK.api('photos.getWallUploadServer', function(serverInfo) {
            ajax.put('upload.php?url=' + encodeURIComponent(serverInfo.response.upload_url), new Blob([view]), {
                done: function(uploadInfo) {
                    eval('uploadInfo=' + uploadInfo);

                    VK.api('photos.saveWallPhoto', uploadInfo, function(saveInfo) {
                        VK.api('wall.post', {
                            message: 'Я создал свой мем в приложении vk.com/app' + query.api_id,
                            attachments: saveInfo.response[0].id + ',http://' + location.host
                        }, function() {
                            nextFrame();
                        });
                    });

                }
            });
        });

        return false;
    }

    gid('info').innerHTML = '&copy; Все права защищены <a href="/" target="_blank">' + location.host + '</a>, 2013.';
    VK.init(getFrame);
});