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

$(document).ready(function() {
InitializeHTML5();
    $('a.lightbox,  span.lighbox a').lightBox({ fixedNavigation: true });
    $('.btnClose').click(function() {
        if (Modernizr.canvas) {
            $('.container').fadeOut(500);
            InitializeOptions();
            EnablePaint();
        } else {
            alert('Bitte aktualisieren Sie Ihren Browser!');
        }
    });
    $('.options').css({
        top: ($(window).height() - $('.options').height()) / 2
    });

    $('.slider').slider({
        value: 5,
        min: 1,
        max: 60,
        step: 1,
        slide: function(event, ui) {
            $('.imgLine').width(ui.value);
            lineWidth = ui.value;
        }
    });
});

function InitializeOptions() {
    var options = $('.options');
    options.animate({
        left: 0
    }, 500);

    $.farbtastic('#colorPicker');
    $('.btnSite').unbind().click(function() {
        options.animate({
            left: -127
        }, 500);
        $('#canvas').animate({
            left: 0,
            top: 0
        }, 500);
        $('.container').fadeIn(500);
        DisablePaint();
    });

    $('.btnPaint').unbind().click(function() {
        EnablePaint();
    });

    $('.btnErase').unbind().click(function() {
        clearCanvas(); 
    });

    $('.btnColor').unbind().click(function() {
        DisablePaint();
        $('#colorPicker, .btnCloseColor').fadeIn();
        $('#canvas').mousemove(function() {
            color = $.farbtastic('#colorPicker').color;
            EnablePaint();
            $('#colorPicker, .btnCloseColor').fadeOut();
        });
    });

    $('.btnLine').unbind().click(function() {
        DisablePaint();
        $('.lineChoose').fadeIn();
        $('#canvas').mousemove(function() {
            EnablePaint();
            $('.lineChoose').fadeOut();
        });
    });

    $('.btnMove').unbind().click(function() {
        DisablePaint();
        var mouseX = 0;
        var mouseY = 0;
        var drag = false;
        $('#canvas').mousedown(function(e) {
            drag = true;
            mouseX = e.pageX;
            mouseY = e.pageY;
        });

        $('#canvas').mousemove(function(e) {
            if (drag) {
                var diffX = mouseX - e.pageX;
                var diffY = mouseY - e.pageY;
                var left = this.offsetLeft;
                var top = this.offsetTop;
                var right = 1920 - $(window).width();
                var bottom = 1080 - $(window).height();
                if (
                    (top <= 0 && bottom >= Math.abs(top))
                    && (left <= 0 && right >= Math.abs(left))
                    ) {
                    $(this).css({
                        left: left - diffX,
                        top: top - diffY
                    });
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                } else {
                    var setLeft = 0;
                    var setTop = 0;
                    if (left <= 0) {
                        setLeft = left;
                        if (right < Math.abs(left)) {
                            setLeft = -right;
                        }
                    }

                    if (top <= 0) {
                        setTop = top;
                        if (bottom < Math.abs(top)) {
                            setTop = -bottom;
                        }
                    }
                    $(this).css({
                        left: setLeft,
                        top: setTop
                    });
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                }
            }
        });
        $('#canvas').mouseup(function(e) {
            drag = false;
        });
        $('#canvas').mouseleave(function(e) {
            drag = false;
        });
    });

    $('.btnSave').unbind().click(function() {
        SaveCanvas();
    });

}

function timeStamp() {
    var time = new Date();
    return time.getTime();
}

function checkWindowHeight() {
    var content = $('.content');
    var containerHeight = $('.container').height()+40;
    var windowHeight = $(window).height();
    if (windowHeight < containerHeight) {
        var temp = content.height() - (containerHeight - windowHeight);
        content.height(temp).css('overflow', 'hidden');
    }
}

function checkStartWindowHeight() {
    var content = $('.startContent');
    var containerHeight = $('.container').height() + 40;
    var windowHeight = $(window).height();
    if (windowHeight < containerHeight) {
        var temp = content.height() - (containerHeight - windowHeight);
        content.height(temp).css('overflow', 'hidden');
    }
}