var popupStatus = 0;


//loading popup with jQuery magic!
function loadPopup() {
    //loads popup only if it is disabled
    if (popupStatus == 0) {
        $("#backgroundPopup").css({
            "opacity": "0.75"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
        var bk_canvas = document.getElementById("bkgd");
        var bk_context = bk_canvas.getContext("2d");

        for (var y = 0.5; y < 1200; y += 10) {
            for (var x = 0.5; x < 1600; x += 10) {
                bk_context.moveTo(x, y);
                bk_context.lineTo(x + 10, y + 10);
                bk_context.moveTo(x + 10, y);
                bk_context.lineTo(x, y + 10);
            }
        }
        
//        for (var x = 0.5; x < 1600; x += 20) {
//            bk_context.moveTo(x, 0);
//            bk_context.lineTo(x, 1200);
//        }

//        for (var y = 0.5; y < 1200; y += 20) {
//            bk_context.moveTo(0, y);
//            bk_context.lineTo(1600, y);
//        }

        bk_context.strokeStyle = 'rgba(0, 0, 0, .95)';
        bk_context.stroke();

    }
}

//disabling popup with jQuery magic!
function disablePopup() {
    //disables popup only if it is enabled
    if (popupStatus == 1) {
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(x,y) {
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;

    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
     //   "left": windowWidth / 2 - popupWidth / 2
     //   "top":x,
     //   "left":y 
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });
    
}

$(document).ready(function() {
    //following code will be here

    //LOADING POPUP
    //Click the button event!

    $('#button').click(function(event) {
        //centering with css
        popLeft = event.pageX - 120 + "px";
        popTop = event.pageY - 320  + "px";
        centerPopup(popTop,popLeft);
        //load popup
        loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function() {
        disablePopup();
    });
    //Click out event!
    $("#backgroundPopup").click(function() {
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e) {
        if (e.keyCode == 27 && popupStatus == 1) {
            disablePopup();
        }
    });
});

function fancyheader() {
    var b_canvas = document.getElementById("myCanvas");
    var c_canvas = document.getElementById("Canvas1");
    var d_canvas = document.getElementById("Canvas2");
    var e_canvas = document.getElementById("Canvas3");
    var f_canvas = document.getElementById("Canvas4");

    var c_context = c_canvas.getContext("2d");
    var b_context = b_canvas.getContext("2d");
    var d_context = d_canvas.getContext("2d");
    var e_context = e_canvas.getContext("2d");
    var f_context = f_canvas.getContext("2d");
    var img = new Image();   // Create new Image object
    img.src = '../Pictures/car3.png'; // Set source path
    
    b_context.fillStyle = 'rgba(15,15,95,1)';
    b_context.fillRect(2, 4, 800, 226);
    f_context.drawImage(img, 425, 10)
    f_context.strokeStyle = 'rgba(10, 10, 10, 0.75)';
    f_context.stroke();

    for (var y = 0.5; y < 226; y += 10) {
        for (var x = 0.5; x < 800; x += 10) {
            b_context.moveTo(x, y);
            b_context.lineTo(x + 10, y + 10);
            b_context.moveTo(x + 10, y);
            b_context.lineTo(x, y + 10);
        }
    }

//    for (var x = 0.5; x < 1006; x += 15) {
//        b_context.moveTo(x, 0);
//        b_context.lineTo(x, 226);
//    }

//    for (var y = 0.5; y < 226; y += 15) {
//        b_context.moveTo(0, y);
//        b_context.lineTo(1006, y);
//    }

    b_context.strokeStyle = 'rgba(10, 10, 10, 0.75)';
    b_context.stroke();
    b_context.shadowOffsetX = 5;
    b_context.shadowOffsetY = 5;
    b_context.shadowBlur = 4;
    b_context.shadowColor = 'rgba(255, 0, 0, 0.65)';
    b_context.fillStyle = 'rgba(25,75,145,0.90)';
    d_context.fillStyle = 'rgba(255,255,255,0.90)';

    b_context.font = "bold 36px sans-serif";
    b_context.fillText("TheUltimatePitStop.net", 5, 50);
    d_context.strokeStyle = 'rgba(255,255,255,0.75)';
    d_context.font = "bold 36px sans-serif";
    d_context.strokeText("TheUltimatePitStop.net", 5, 50);

    b_context.strokeStyle = 'rgba(10, 10, 10, 0.75)';
    b_context.fillStyle = "#00f";
    b_context.font = "bold 28px sans-serif";
    d_context.shadowOffsetX = 2;
    d_context.shadowOffsetY = 2;
    d_context.shadowBlur = 4;
    d_context.shadowColor = 'rgba(255, 0, 0,0.55)';

    c_context.fillStyle = "#00f";
    c_context.font = "bold 36px sans-serif";
    c_context.fillText("Auto Show and Swap Meet", 25, 105);
    d_context.fillStyle = "#00f";
    d_context.font = "bold 36px sans-serif";
    d_context.strokeText("Auto Show and Swap Meet", 25, 105);

    e_context.fillStyle = 'rgba(250, 215, 30, 0.85)';
    e_context.font = "bold 24px Arial";
    e_context.fillText("Next Event - November 12th", 35, 155);

    f_context.fillStyle = 'rgba(255, 255, 255, 0.85)';
    f_context.font = "Normal 18px Arial";
    f_context.fillText("See Flyer for Details", 35, 185);
}