/* Show */

function BuildingAreaToolTip() {
    // Use the each() method to gain access to each elements attributes
    $('area').each(function () {
        $(this).qtip(
        {
            content: GetBuildingAreaInfo($(this).attr('id')), // Use the ALT attribute of the area map
            style: {
                width: 242,
                height: 127,
                border: "none",
                background: "url('/img/MiniCMS/BuildingAreaBackground.png')"
                //tip: true // Apply a tip at the default tooltip corner
            },
            position: {
                corner: {
                    target: 'topRight',
                    tooltip: 'bottomLeft'
                }
            }
        });
    }); 

function GetBuildingAreaInfo(AreaID) {
    for (var i = 0; i < BuildingAreaInfoArray.length; i++) {
        if (AreaID == BuildingAreaInfoArray[i]["ID"]) {
            return BuildingAreaInfoArray[i]["HTML"]
        }
    }
}


    $(".BuildingAreaJS").click(function (evt) {
        evt.preventDefault();
    });
}

/* Edit */

var OldSendAction;
var BAidTop
function BuildingAreaUpload(BAid) {

    var linkattr;
    var UploadDone = false;

    BAidTop = BAid

    ModulFormSend = true;

    $("#Submit_BuildingArea").remove();

    document.getElementById("actionform").onsubmit = function () {
        if (ModulFormSend == true) {
            $("#actionform").attr("action", "Ajax.aspx" + linkattr + "&Ajax=1&FormSend=1&ModulVarFormSend=1");
            document.getElementById("actionform").target = "BA_upload_target";
            document.getElementById("BA_upload_target").onload = uploadDone();
        }
    }

    $("#ModulVarBlueprintFile").change(function () {
        if (UploadDone == false && ModulFormSend == true) {
            UploadDone = true;
            OldSendAction = $("#actionform").attr("action");
            linkattr = OldSendAction.substr(OldSendAction.indexOf("?"));

            $("#__VIEWSTATE").attr("name", "_VIEWSTATE")
            $("#__EVENTVALIDATION").attr("name", "_EVENTVALIDATION")

            frames['BA_upload_target'].document.getElementsByTagName("body")[0].innerHTML = "";
            $("#actionform").submit();
        }
    });
}

function uploadDone() { //Function will be called when iframe is loaded

    var ret = frames['BA_upload_target'].document.getElementsByTagName("body")[0].innerHTML;
    if (ret == "UploadDone") {
        $("#actionform").attr("action", OldSendAction);

        $("#__VIEWSTATE").attr("name", "__VIEWSTATE");
        $("#__EVENTVALIDATION").attr("name", "__EVENTVALIDATION");

        $("#MBAImageUpload").attr("src", "/ModulBuildingAreaPicture.ashx?id=" + BAidTop + "&" + Math.random());
        $("#BuildingAreaImage").attr("src", "/ModulBuildingAreaPicture.ashx?id=" + BAidTop + "&" + Math.random());
        
        $("#ModulVarBlueprintFile").attr("value", "");

        UploadDone = false;

        //$(".CalleditModulData").click();

        BuildingAreaUpload(BAidTop);
    }
}


var AreaArrayX = Array(0)
var AreaArrayY = Array(0)

function LoadCanvasImage(DataID) {

    AreaArrayX = Array(0)
    AreaArrayY = Array(0)

    var objImg = new Image();
    // IE
    //if (document.all && !window.opera)
    //    window.onload = function () { drawIt(objImg); };
    // Sonstige
    //else
        objImg.onload = function () { drawIt(objImg); }

    objImg.src = "/ModulBuildingAreaPicture.ashx?id=" + DataID + "&o=1";



}

function checkBrowserName(name) {
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf(name.toLowerCase()) > -1) {
        return true;
    }
    return false;
}  

function drawIt(objImg) {


    $("#AreasCanvas").attr("width", objImg.width);
    $("#AreasCanvas").attr("height", objImg.height);

    var objCanvas = document.getElementById("AreasCanvas");
    // Falls das Objekt unterstützt wird
    if (objCanvas.getContext) {
        var objContext = objCanvas.getContext('2d');
        objContext.drawImage(objImg, 0, 0);
    }

    var OverlayTitleHeight
    if (checkBrowserName('MSIE')) {
        OverlayTitleHeight = 0;
    } else {
        OverlayTitleHeight = parseInt($(".userInputTitle").height()) + parseInt($(".userInputTitle").css("padding-top").replace("px", "")) + parseInt($(".userInputTitle").css("padding-bottom").replace("px", ""));
    }

    objCanvas.onmouseup = function (e) {
        x = e.layerX - objCanvas.offsetLeft;
        y = e.layerY - objCanvas.offsetTop + OverlayTitleHeight - 1;

        var AreaArrayLength = AreaArrayX.length

        if (AreaArrayLength == 0) {
            AreaArrayX[AreaArrayLength] = x
            AreaArrayY[AreaArrayLength] = y
        } else {
            AreaArrayX.push(AreaArrayLength - 1)
            AreaArrayX[AreaArrayLength] = x

            AreaArrayY.push(AreaArrayLength - 1)
            AreaArrayY[AreaArrayLength] = y
        }

        AreaArrayLength = AreaArrayX.length
        var i
        var CoordinatesLine

        if (objCanvas.getContext) {
            var objContext = objCanvas.getContext('2d');
            
            objContext.fillStyle = "#fff";
            objContext.fillRect(0, 0, objImg.width, objImg.height);

            objContext.drawImage(objImg, 0, 0);

            if (AreaArrayLength == 1) {
                
                // Nur ein Punkt

                objContext.fillStyle = "rgb(6, 139, 231)";
                objContext.fillRect(AreaArrayX[AreaArrayLength - 1] - 2, AreaArrayY[AreaArrayLength - 1] - 2, 4, 4);

            } else {
                if (AreaArrayLength == 2) {

                    // Nur zwei Punkte

                    objContext.beginPath(); 
                    objContext.lineWidth = 2;

                    for (i = 0; i < AreaArrayLength; i++) {
                        if (i == 0) {
                            objContext.moveTo(AreaArrayX[i], AreaArrayY[i]);
                        } else {
                            objContext.lineTo(AreaArrayX[i], AreaArrayY[i]);
                        }


                    }
                    objContext.closePath(); 
                    objContext.lineCap = "butt";
                    objContext.strokeStyle = "rgb(6, 139, 231)";
                    objContext.stroke();

                } else {

                    // Eine Fläche
                    // Hier geht es los

                    CoordinatesLine = "";

                    objContext.beginPath();
                    objContext.lineWidth = 1;

                    for (i = 0; i < AreaArrayLength; i++) {
                        if (i == 0) {
                            objContext.moveTo(AreaArrayX[i], AreaArrayY[i]);
                            CoordinatesLine = CoordinatesLine + String(AreaArrayX[i]) + "," + String(AreaArrayY[i])
                        } else {
                            objContext.lineTo(AreaArrayX[i], AreaArrayY[i]);
                            CoordinatesLine = CoordinatesLine + "," + String(AreaArrayX[i]) + "," + String(AreaArrayY[i])
                        }


                    }
                    objContext.closePath();

                    objContext.fillStyle = "rgba(6, 139, 231, 0.5)";
                    objContext.fill(); 

                    objContext.strokeStyle = "rgb(6, 139, 231)";
                    objContext.stroke();

                    $("#ModulVarAreaCoordinates").attr("value", CoordinatesLine);
                }

            }
        }
    }

}