/// <reference path="jquery/jquery-vsdoc.js" />

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickColor = new Array();
var clickLineWidth = new Array();
var paint;
var color = '#000';
var lineWidth = 5;
var canvas;
function InitializeHTML5() {
    if (!$('#canvas').length) {
        $('.html5').height($(window).height());
        var canvasDiv = document.getElementById('canvasDiv');
        canvas = document.createElement('canvas');
        canvas.setAttribute('width', 1920);
        canvas.setAttribute('height', 1080);
        canvas.setAttribute('id', 'canvas');
        canvasDiv.appendChild(canvas);
        if (typeof G_vmlCanvasManager != 'undefined') {
            canvas = G_vmlCanvasManager.initElement(canvas);
        }
        context = canvas.getContext("2d");

        var body = $('#body');
        var src = body.css('background-image')+'?'+(new Date()).getTime();
        var from = src.indexOf('templates');
        var to = src.indexOf(')');
        src = src.substring(from, to).replace('"', ''); 
        var imageObj = new Image();
        imageObj.onload = function () {
            context.drawImage(imageObj, 0, 0, 1920,1080);
        };
        imageObj.src = src;
    }
}

function EnablePaint() {
    DisablePaint();
    $('#canvas').mousedown(function (e) {
        paint = true;
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });

    $('#canvas').mousemove(function (e) {
        if (paint) {
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });
    $('#canvas').mouseup(function (e) {
        paint = false;
    });
    $('#canvas').mouseleave(function (e) {
        paint = false;
    });
}

function DisablePaint() {
    paint = false;
    $('#canvas').unbind();
}

function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
    clickColor.push(color);
    clickLineWidth.push(lineWidth);
}

function SaveCanvas() {
    var dataURL = canvas.toDataURL("image/jpeg");
    dataURL = dataURL.replace('data:image/jpeg;base64,', '');

    $('<div id="overlay"></div>').css({
        width: $(window).width(),
        height: $(window).height(),
        position: 'absolute',
        top: 0,
        background: '#000',
        opacity: 0.7,
        display: 'none',
        'z-index': 100
    }).appendTo('body');
    $('.formular').css({
    top: ($(window).height() - $('.formular').height()) / 2,
        left: ($(window).width() - 302) / 2
    });
    $('.formular, #overlay').fadeIn();

    $('.btnAbort').unbind().click(function() {
        $('.formular, #overlay').fadeOut(function() {
            $('#overlay').remove();
            $('.tbFirstname, .tbName, .tbEmail').val('');
        });
    });

    $('.btnSendForm').unbind().click(function() {
        $('#error').remove();
        var firstname = $('.tbFirstname').val();
        var name = $('.tbName').val();
        var email = $('.tbEmail').val();
        var image = $('<img />').attr({
            'src': 'templates/Bilder/loading.gif',
            'class': 'load',
            'alt': ''
        });
        $('.formOverlay').css({
            height: $('.formular').height() + 20
        })
        .fadeIn(function() {
            SendData(dataURL, firstname, name, email);
        });
    });
}

function SendData(dataURL, firstName, Name, Email) {
    var isComplete = false;
    $.ajax({
        type: 'POST',
        url: 'ImageHandler.axd',
        cache: 'false',
        dataType: 'json',
        data: { 'data': dataURL, 'firstname': firstName, 'name': Name, 'email': Email },
        success: function(result) {
            if (result == 1) {
                isComplete = true;
            } else {
                isComplete = false;
            }
        },
        complete: function() {
            if (isComplete) {
                $('#overlay').fadeOut().remove();
                $('.formular').fadeOut();
                $('.formOverlay').fadeOut();
            } else {
                $('<p id="error">Bitte füllen Sie alle Felder korrekt aus.</p>').appendTo('.formular');
                $('.formOverlay').fadeOut();
            }
        }
    });
}

function clearCanvas() {
    clickX = new Array();
    clickY = new Array();
    clickDrag = new Array();
    clickColor = new Array();
    clickLineWidth = new Array();
    context.clearRect(0, 0, canvas.width, canvas.height); // Fill in the canvas with white
    canvas.width = canvas.width; // clears the canvas
    var imageObj = new Image();
    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = "templates/Bilder/hintergrund.jpg";
    $('#canvas').css({
        left: 0,
        top: 0
    });
    EnablePaint();
}

function redraw() {
    context.lineJoin = "round";

    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.strokeStyle = clickColor[i];
        context.lineWidth = clickLineWidth[i];
        context.stroke();
    }
}