var isListOfPOIVisible = true;
function toggleListOfPOIsVisibility() {
    if (isListOfPOIVisible == true) {
        var div = document.getElementById("divListOfPOIsBody").style.visibility = "hidden";
        isListOfPOIVisible = false;
    }
    else {
        var div = document.getElementById("divListOfPOIsBody").style.visibility = "visible";
        isListOfPOIVisible = true;
    }
}

function SetCenterCircle() {
    var radius;
    radius = tc.getCircleRadius() / 1.1;
    var top = tc.getCircleCenter().y + radius;
    var bottom = tc.getCircleCenter().y - radius;
    var right = tc.getCircleCenter().x + radius;
    var left = tc.getCircleCenter().x - radius;

    document.getElementById("HFCirclePoints").value = tc.getCircleCenter() + "," + tc.getCircleRadius();

    var ext = new KrakMap.Extent(top, bottom, left, right);
    document.getElementById("HFExtent").value = ext;
    tc.setMapViewExtent(ext);
    tc.removeDrawing();
    __doPostBack('UpdatePanel1', 'CircleDraw');
}
function SetCenterPoly() {
    var top = 0;
    var bottom = 0;
    var right = 0;
    var left = 0;
    coords = tc.getPolygonPoints().split(",");
    
    var coord
    for (var i = 0; i < coords.length; i += 1) {
        coord = coords[i].split(" ");
        if (i == 0) {
            top = coord[1];
            bottom = coord[1];
            right = coord[0];
            left = coord[0];
        }

        if (coord[1] > top) {
            top = coord[1];
        }
        if (coord[1] < bottom) {
            bottom = coord[1];
        }
        if (coord[0] > right) {
            right = coord[0];
        }
        if (coord[0] < left) {
            left = coord[0];
        }

        var ext = new KrakMap.Extent(top, bottom, left, right);
        document.getElementById("HFExtent").value = ext;
        tc.setMapViewExtent(ext);
    }
}

var isPanning = false;
function MouseUp(e) {
    if (isPanning) {
        ShowZoomLevel();
        isPanning = false;
    }
    return true;
}

document.onmouseup = MouseUp;


function MapMoved() {

    isPanning = true;
}

function ShowThemes() {
    tc.removeAllPoi();
    __doPostBack('UpdatePanel1', 'AddPois');
}
function ShowZoomLevel() {
    removePopup();
    document.getElementById("HFExtent").value = tc.getMapViewExtent();
    document.getElementById("HFZoomLevel").value = tc.getZoomLevel();
    if (tc.getZoomLevel() < 6) {
        ShowThemes()
    } else {
        tc.removeAllPoi();
        __doPostBack('UpdatePanel1', 'RemoveThemes');
    }
}

function ToggleCategoryVisibility(fCategoryName) {
    var objStyle = eval("document.getElementById('" + fCategoryName + "')");

    if (objStyle != null) {

        if (tc.isPoiCategory(fCategoryName) == true) {
            tc.switchPoiCategoryOff(fCategoryName);
            document.getElementById("Tema_" + fCategoryName).checked = false;
        }
        else {
            tc.switchPoiCategoryOn(fCategoryName);
            document.getElementById("Tema_" + fCategoryName).checked = true;
        }
    }
}

function RestoreCategoryVisibility() {

    
    if (document.getElementById("Tema_1").checked == true) {
        tc.switchPoiCategoryOn("1");
    }
    else {
        tc.switchPoiCategoryOff("1");
    }
    if (document.getElementById("Tema_2").checked == true) {
        tc.switchPoiCategoryOn("2");
    }
    else {
        tc.switchPoiCategoryOff("2");
    }
    if (document.getElementById("Tema_3").checked == true) {
        tc.switchPoiCategoryOn("3");
    }
    else {
        tc.switchPoiCategoryOff("3");
    }
    if (document.getElementById("Tema_4").checked == true) {
        tc.switchPoiCategoryOn("4");
    }
    else {
        tc.switchPoiCategoryOff("4");
    }
    if (document.getElementById("Tema_5").checked == true) {
        tc.switchPoiCategoryOn("5");
    }
    else {
        tc.switchPoiCategoryOff("5");
    }
    if (document.getElementById("Tema_6").checked == true) {
        tc.switchPoiCategoryOn("6");
    }
    else {
        tc.switchPoiCategoryOff("6");
    }
    if (document.getElementById("Tema_7").checked == true) {
        tc.switchPoiCategoryOn("7");
    }
    else {
        tc.switchPoiCategoryOff("7");
    }

    if (document.getElementById("Tema_5995").checked == true) {
        tc.switchPoiCategoryOn("5995");
    }
    else {
        tc.switchPoiCategoryOff("5995");
    }

    if (document.getElementById("Tema_15714").checked == true) {
        tc.switchPoiCategoryOn("15714");
    }
    else {
        tc.switchPoiCategoryOff("15714");
    }

    if (document.getElementById("Tema_15729").checked == true) {
        tc.switchPoiCategoryOn("15729");
    }
    else {
        tc.switchPoiCategoryOff("15729");
    }
    if (document.getElementById("Tema_15762").checked == true) {
        tc.switchPoiCategoryOn("15762");
    }
    else {
        tc.switchPoiCategoryOff("15762");
    }
    if (document.getElementById("Tema_15915").checked == true) {
        tc.switchPoiCategoryOn("15915");
    }
    else {
        tc.switchPoiCategoryOff("15915");
    }
    if (document.getElementById("Tema_15954").checked == true) {
        tc.switchPoiCategoryOn("15954");
    }
    else {
        tc.switchPoiCategoryOff("15954");
    }
    if (document.getElementById("Tema_16041").checked == true) {
        tc.switchPoiCategoryOn("16041");
    }
    else {
        tc.switchPoiCategoryOff("16041");
    }
    if (document.getElementById("Tema_16203").checked == true) {
        tc.switchPoiCategoryOn("16203");
    }
    else {
        tc.switchPoiCategoryOff("16203");
    }
}


function CreatePoisDemo2(id, src, title, address, zip, city, phone, fax, manager, img, xPos, yPos, theme) {
    var poiDom = document.createElement('img');
    poiDom.id = id;
    poiDom.src = src;

    poiDom.popupWidth = document.documentElement.clientWidth;
    poiDom.popupHeight = document.documentElement.clientHeight;
    
    //poiDom.onclick = poiPanoClick;
    //poiDom.desc = createCallOutPano();
    poiDom.onclick = OpenPano;

    poiDom.style.cursor = 'hand';

    // Add point to map using the API
    var x = Number(xPos.replace(',', '.'));
    var y = Number(yPos.replace(',', '.'));
    var coord = new KrakMap.Coordinate(x, y);
    var poi = new KrakMap.Poi(poiDom, coord, theme, 40, 40); 
    tc.addPoi(poi);
}

function poiPanoClick(evt) {
//    // Handle the non-standard IE event model ...
//    var target = (evt && evt.target) ? evt.target : window.event.srcElement;

//    // Only show one popup at a time
//    removePopup();

//    // Width and height must be > 0
//    var popupWidth = Math.max(0, this.popupWidth);
//    var popupHeight = Math.max(0, this.popupHeight);

//    var left = Number(target.style.left.replace('px', '')) + 26;
//    var top = Number(target.style.top.replace('px', ''));
//    // These are needed because the POI layer doesn't have the
//    // same origin as the map layer.
//    var deltaX = Number(tc.getMousePosition().x - left);
//    var deltaY = Number(tc.getMousePosition().y - top);

//    // Create the popup div tag
//    //
//    // Note:
//    // Use the Demo.css style file to change the colors etc of the popup
//    var popdiv = document.createElement('div');
//    popdiv.id = 'pUp';
//    // Auto-resize if height is zero

//    if (popupHeight > 0) {
//        popdiv.style.height = popupHeight + 'px';
//        popdiv.style.width = popupWidth + 'px';
//    }
//    else {
//        popdiv.style.width = popupWidth + 'px';
//    }

//    popdiv.style.left = '0px';
//    popdiv.style.top = '0px';
//    
//    popdiv.innerHTML += this.desc;
//    // Launch the popup, close it by clicking on the close image
//    document.body.appendChild(popdiv);
//    popdiv.focus();
//    GetPano();
}


//function createCallOutPano(selskab) 
//{
//    var html = '<table id="PopDragTable" class="PopUpHeader" width="100%" heigth="100%" border="0" cellspacing="0" cellpadding="0">';
//    html += '<tr id="PopDrag">';
//    html += '<td width="10" height="30">&nbsp;</td>';
//    html += '<td width="100%" height="30" class="PopUpHeader">' + selskab + '</td>';
//    html += '<td width="17" height="30"><img src="gfx/krak/popup/luk.jpg" width="17" height="30" alt="luk" onclick="removePopup()"/></td>';
//    html += '<td width="10" height="30">&nbsp;</td>';
//    html += '</tr>';
//    html += '<tr>';
//    html += '<td></td>';
//    html += '<td colspan="2" valign="top">';
//    html += '<div id="Pano"></div>';
//    html += '</td>';
//    html += '<td></td>';
//    html += '</tr>';
//    html += '</table>';
//    return (html);
//}

//function GetPano() {

//    $("#Pano").load("pano/index123.html");
//}

function CreatePois(id, src, title, address, zip, city, phone, fax, manager, img, xPos, yPos, theme) {
    var poiDom = document.createElement('img');
    poiDom.id = id;
    poiDom.src = src;
    //poiDom.head = fields[3];
    
    //poiDom.desc = fields[3];

    if (tc.getZoomLevel() > 5) {
        poiDom.popupWidth = 550;
        poiDom.popupHeight = 370;
    } else {
        poiDom.popupWidth = 250;
        poiDom.popupHeight = 180;
    }
    
    if (tc.getZoomLevel() > 5) {
        poiDom.onclick = poiIconClick;
        poiDom.desc = createCallOutContent2(title, address, zip, city, phone, fax, manager, img);
    } else {
        poiDom.onmouseover = poiIconClick;
        poiDom.desc = createCallOutContent(title, address, zip, city, phone, fax, manager, img);
    }
    poiDom.style.cursor = 'hand';
    
    // Add point to map using the API
    var x = Number(xPos.replace(',', '.'));
    var y = Number(yPos.replace(',', '.'));
    var coord = new KrakMap.Coordinate(x, y);
    var poi = new KrakMap.Poi(poiDom, coord, theme, 40, 40); // size of gif is 20 pixels square
    tc.addPoi(poi);
}

function CreateTheme(id, src, title, address, zip, city, xPos, yPos, theme) {
    var poiDom = document.createElement('img');
    poiDom.id = id;
    poiDom.src = src;
    //poiDom.head = fields[3];
    poiDom.desc = createCallOutContentTheme(title, address, zip, city);
    //poiDom.desc = fields[3];
    poiDom.popupWidth = 250;
    poiDom.popupHeight = 100;
   
    if (tc.getZoomLevel() > 5) {
        poiDom.onclick = poiThemeClick;
    } else {
        poiDom.onmouseover = poiThemeClick;
    }
    poiDom.style.cursor = 'hand';
    
    // Add point to map using the API
    var x = Number(xPos.replace(',', '.'));
    var y = Number(yPos.replace(',', '.'));
    var coord = new KrakMap.Coordinate(x, y);
    var poi = new KrakMap.Poi(poiDom, coord, theme, 20, 20); // size of gif is 20 pixels square
    tc.addPoi(poi);
}
function removePopup() {
    $('#pUp').remove(); 
    $('#pUpRids').remove();
}
    
function ExpandPopup() {
    $("#poptxt").show("slow");
    $("#popTable").show("slow");
    $("#popHeader").show("slow");
    $('#pUp').css("width", "525");
    $('#pUp').css("height", "370");
}
function ColapsePopup() {
    $("#poptxt").hide("slow");
    $("#popTable").hide("slow");
    $("#popHeader").hide("slow");
    $('#pUp').css("width", "250");
    $('#pUp').css("height", "180");
}

var pop;
function poiIconClick(evt) {
    // Handle the non-standard IE event model ...
    var target = (evt && evt.target) ? evt.target : window.event.srcElement;

    // Only show one popup at a time
    removePopup();

    // Width and height must be > 0
    var popupWidth = Math.max(0, this.popupWidth);
    var popupHeight = Math.max(0, this.popupHeight);

    var left = Number(target.style.left.replace('px', '')) + 26;
    var top = Number(target.style.top.replace('px', ''));
    // These are needed because the POI layer doesn't have the
    // same origin as the map layer.
    var deltaX = Number(tc.getMousePosition().x - left);
    var deltaY = Number(tc.getMousePosition().y - top);

    // Create the popup div tag
    //
    // Note:
    // Use the Demo.css style file to change the colors etc of the popup
    var popdiv = document.createElement('div');
    popdiv.id = 'pUp';
    // Auto-resize if height is zero

    if (popupHeight > 0) {
        popdiv.style.height = popupHeight + 'px';
        popdiv.style.width = popupWidth + 'px';
    }
    else {
        popdiv.style.width = popupWidth + 'px';
    }

    if (tc.getZoomLevel() > 5) {
        popdiv.style.left = ((document.body.offsetWidth + document.documentElement.scrollLeft - popupWidth) / 2) + 'px';
        popdiv.style.top = ((document.body.offsetHeight + document.documentElement.scrollTop - popupHeight) / 2) + 'px';
    } else {
    //Centrer på skærmen
    popdiv.style.left = (((document.body.offsetWidth + document.documentElement.scrollLeft) / 2)-225)+ 'px';
    popdiv.style.top = (((document.body.offsetHeight - popupHeight) / 2)+90)+ 'px';
    }
    
    //Ved mouseclick
    /*popdiv.style.left = (window.event.clientX + document.documentElement.scrollLeft) + 'px';
    popdiv.style.top = (window.event.clientY + document.documentElement.scrollTop) + 'px';*/
    
    //popdiv.innerHTML = '<h2>' + this.head + '</h2>';
    popdiv.innerHTML += '<p>' + this.desc + '</p>';
    //popdiv.innerHTML += '<img src="close.gif" alt="Luk" onclick="removePopup()" />';

    // Launch the popup, close it by clicking on the close image
    //target.parentNode.parentNode.appendChild(popdiv);
    document.body.appendChild(popdiv);
    
    popdiv.focus();
   

    //popdiv.onmousedown = StartMovePop;
    //popdiv.onmouseup = StopMovePop;

    //$('#PopDragTable').draggable();
}

var movepop = false;
function StartMovePop() {

    movepop = true;
    document.onmousemove = MovePop;
}
function StopMovePop() {

    movepop = false;
    document.onmousemove = '';
}
function MovePop(evt) {
    if (movepop) {
        document.getElementById('pUp').style.left = (event.x + document.documentElement.scrollLeft - 100) + 'px';
        document.getElementById('pUp').style.top = (event.y + document.documentElement.scrollTop - 100) + 'px';
        document.getElementById('pUp').focus();
    }
}


function poiThemeClick(evt) {
    // Handle the non-standard IE event model ...
    var target = (evt && evt.target) ? evt.target : window.event.srcElement;

    // Only show one popup at a time
    removePopup();

    // Width and height must be > 0
    var popupWidth = Math.max(0, this.popupWidth);
    var popupHeight = Math.max(0, this.popupHeight);

    var left = Number(target.style.left.replace('px', '')) + 26;
    var top = Number(target.style.top.replace('px', ''));
    // These are needed because the POI layer doesn't have the
    // same origin as the map layer.
    var deltaX = Number(tc.getMousePosition().x - left);
    var deltaY = Number(tc.getMousePosition().y - top);

    // Create the popup div tag
    //
    // Note:
    // Use the Demo.css style file to change the colors etc of the popup
    var popdiv = document.createElement('div');
    popdiv.id = 'pUp';
    // Auto-resize if height is zero

    if (popupHeight > 0) {
        popdiv.style.height = popupHeight + 'px';
        popdiv.style.width = popupWidth + 'px';
    }
    else {
        popdiv.style.width = popupWidth + 'px';
    }

    //left = (left - 26) + popupWidth / 2;
    //top = (top + 110) + popupHeight / 2;

    //        popdiv.style.left = left + 'px';
    //        popdiv.style.top = top + 'px';
    popdiv.style.left = (window.event.clientX + document.documentElement.scrollLeft) + 'px';
    popdiv.style.top = (window.event.clientY + document.documentElement.scrollTop) + 'px';
    
    //popdiv.innerHTML = '<h2>' + this.head + '</h2>';
    popdiv.innerHTML += '<p>' + this.desc + '</p>';
    //popdiv.innerHTML += '<img src="close.gif" alt="Luk" onclick="removePopup()" />';

    // Launch the popup, close it by clicking on the close image
    //target.parentNode.parentNode.appendChild(popdiv);
    document.body.appendChild(popdiv);
    popdiv.focus();
}

function startLytebox(elem, href, title, rel) {
    var el = document.getElementById(elem);
    el.href = href;
    el.title = title;
    el.rel = rel;
    myLytebox.updateLyteboxItems();
    myLytebox.start(el);
}

function startLyteFrame(elem, href, title, rel, rev) {
    var el = document.getElementById(elem);
    el.href = href;
    el.title = title;
    el.rel = rel;
    el.rev = rev;
    //myLytebox.updateLyteboxItems();
    myLytebox.start(el, false, true);
}

function createCallOutContent(title, address, zip, city, phone, fax, manager, img) {

    var html = '<table id="PopDragTable" class="PopUpHeader" width="100%" border="0" cellspacing="0" cellpadding="0">';
html += '<tr id="PopDrag">';
html += '<td width="10" height="30">&nbsp;</td>';
html += '<td align="left" height="30" width="80%" class="PopUpHeader">&nbsp;' + title + '</td>';
html += '<td height="30" align="right" width="20%"><nobr><font style="font-family:Verdana; font-size:10px;position:relative;top:7px;" id="PopUpExpand" onclick="ExpandPopup()">Læs mere&nbsp;&nbsp;</font><img src="gfx/krak/popup/luk.jpg" width="17" height="30" alt="luk" onclick="removePopup()"/></nobr></td>';
html += '<td width="10" height="30">&nbsp;</td>';
html += '</tr>';
html += '<tr>';
html += '<td height="8"></td>';
html += '<td height="8" colspan="2" valign="top"></td>';
html += '<td height="8"></td>';
html += '</tr>';
html += '<tr>';
html += '<td width="10" height="160">&nbsp;</td>';
html += '<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">';
html += '<tr>';
html += '<td valign="top"><a id="lytebox_img" href="Billeder/10-01.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="Billeder/popup-billede.png" width="119" height="87" class="PopUpBillede" style="border=none;" /></a>';
//html += '<br /><br /><img src="gfx/grøn_pil.png" />&nbsp;&nbsp;<a href="Billeder/10-01.JPG" rel="lyteshow[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none">Se flere billeder</a></td>';
html += '<br /><br /><img src="gfx/grøn_pil.png" />&nbsp;&nbsp;<a id="lytebox_misc" href="Billeder/10-01.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;">Se flere billeder</a></td>';

html += '<a href="Billeder/10-02.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
html += '<a href="Billeder/10-03.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
html += '<a href="Billeder/10-04.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
html += '<a href="Billeder/10-05.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
html += '<a href="Billeder/10-06.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
html += '<a href="Billeder/10-07.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
html += '<a href="Billeder/10-08.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';

    html += '</td>';
    html += '<td align="char" valign="top" id="poptxt" style="display:none;width:350px;">';
    html += '<p style="font-family:Verdana; font-size:14px; width:360px;">Velkommen til afd. 123 - Mindegårdsten</p>';
        html += '<p style="font-family:Verdana; font-size:10px;">Afdelingen er opført i 1977 og blevet renoveret i 2004.</p>';
        html += '<p style="font-family:Verdana; font-size:10px;">Der er store dejlige udendørsarealer til beboerne med 2<br />';
            html += 'grilsteder, 2 ';
        html += 'fodboldbaner samt 1 stor ny legeplads.<br />';
            html += '<br />';
        html += 'Afdelingen ligger centralt med kort afstand til<br />indkøbscenter og banegård.<br />';
            html += '<br />';
        html += 'Der er 60 familieboliger og 30 ældreboliger i afdelingen.';
        html += '</p>';
    html += '</td>';
html += '</tr>';
html += '<tr>';
html += '<td valign="top" colspan="2" id="popHeader" style="display:none;" >Boligtyper i afdelinge</td>';
html += '</tr>';
html += '</table>';
html += '<table id="popTable" style="display:none; margin:0 0 0 5; padding:0 0 0 0; border-left:none 0px transparent;border-right:none 0px transparent;border-top:solid 1px #E6E6E6;border-bottom:solid 1px #E6E6E6;width:100%;" cellpadding="0" cellspacing="0">';
    html += '<tr style="width:100%; height:15px; background-color:#F7F7F7;">';
        html += '<td style="width:50px;">Billeder</td>';
        html += '<td>&nbsp;</td>';
        html += '<td style="width:60px;">Boligtype</td>';
        html += '<td>&nbsp;</td>';
        html += '<td style="width:70px;" align="right">Brutto areal</td>';
        html += '<td>&nbsp;</td>';
        html += '<td style="width:50px;" align="right">Værelser</td>';
        html += '<td>&nbsp;</td>';
        html += '<td style="width:50px;" align="right">Husleje</td>';
        html += '<td>&nbsp;</td>';
        html += '<td style="width:60px;">Mere info</td>';
        html += '<td>&nbsp;</td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;" /></a></td>';
        html += '<td>&nbsp;</td>';
        html += '<td>Familiebolig</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="right">80 m2</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="right">3 rum</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="right">2.400</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;"  /></a></td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;"  /></a></td>';
        html += '<td>&nbsp;</td>';
        html += '<td>Familiebolig</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="right">110 m2</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="right">4 rum</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="right">3.700</td>';
        html += '<td>&nbsp;</td>';
        html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;"  /></a></td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;"  /></a></td>';
    html += '<td>&nbsp;</td>';
    html += '<td>Familiebolig</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">80 m2</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2 rum</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2.300</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;"  /></a></td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;"  /></a></td>';
    html += '<td>&nbsp;</td>';
    html += '<td>Familiebolig</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">110 m2</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">4 rum</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2.000</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;" /></a></td>';
    html += '</tr>';
    html += '</table>';
    return (html);
}
function createCallOutContent2(title, address, zip, city, phone, fax, manager, img) {

    var html = '<table id="PopDragTable" class="PopUpHeader" width="550" border="0" cellspacing="0" cellpadding="0">';
    html += '<tr id="PopDrag">';
    html += '<td width="10" height="30">&nbsp;</td>';
    html += '<td width="354" height="30" class="PopUpHeader">' + title + '</td>';
    html += '<td width="17" height="30"><img src="gfx/krak/popup/luk.jpg" width="17" height="30" alt="luk" onclick="removePopup()"/></td>';
    html += '<td width="10" height="30">&nbsp;</td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td height="8"></td>';
    html += '<td height="8" colspan="2" valign="top"></td>';
    html += '<td height="8"></td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td width="10" height="160">&nbsp;</td>';
    html += '<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">';
    html += '<tr>';
    html += '<td valign="top"><a id="lytebox_img" href="Billeder/10-01.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="Billeder/popup-billede.png" width="119" height="87" class="PopUpBillede" style="border=none;" /></a>';
    //html += '<br /><br /><img src="gfx/grøn_pil.png" />&nbsp;&nbsp;<a href="Billeder/10-01.JPG" rel="lyteshow[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none">Se flere billeder</a></td>';
    html += '<br /><br /><img src="gfx/grøn_pil.png" />&nbsp;&nbsp;<a id="lytebox_misc" href="Billeder/10-01.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;">Se flere billeder</a></td>';

    html += '<a href="Billeder/10-02.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
    html += '<a href="Billeder/10-03.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
    html += '<a href="Billeder/10-04.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
    html += '<a href="Billeder/10-05.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
    html += '<a href="Billeder/10-06.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
    html += '<a href="Billeder/10-07.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';
    html += '<a href="Billeder/10-08.JPG" rel="lytebox[imgs]" title="" style="color: #000000; cursor: hand; text-decoration: none"></a></td>';

    html += '</td>';
    html += '<td align="char" valign="top">';
    html += '<p style="font-family:Verdana; font-size:14px;">Velkommen til afd. 123 - Mindegårdsten</p>';
    html += '<p style="font-family:Verdana; font-size:10px;">Afdelingen er opført i 1977 og blevet renoveret i 2004.</p>';
    html += '<p style="font-family:Verdana; font-size:10px;">lDer er store dejlige udendørsarealer til beboerne med 2<br />';
    html += 'grilsteder, 2 ';
    html += 'fodboldbaner samt 1 stor ny legeplads.<br />';
    html += '<br />';
    html += 'Afdelingen ligger centralt med kort afstand til<br />indkøbscenter og banegård.<br />';
    html += '<br />';
    html += 'Der er 60 familieboliger og 30 ældreboliger i afdelingen.';
    html += '</p>';
    html += '</td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td valign="top" colspan="2">Boligtyper i afdelinge</td>';
    html += '</tr>';
    html += '</table>';
    html += '<table style="margin:0 0 0 0; padding:0 0 0 0; border-left:none 0px transparent;border-right:none 0px transparent;border-top:solid 1px #E6E6E6;border-bottom:solid 1px #E6E6E6;width:100%;" cellpadding="0" cellspacing="0">';
    html += '<tr style="width:100%; height:15px; background-color:#F7F7F7;">';
    html += '<td style="width:50px;">Billeder</td>';
    html += '<td>&nbsp;</td>';
    html += '<td style="width:60px;">Boligtype</td>';
    html += '<td>&nbsp;</td>';
    html += '<td style="width:70px;" align="right">Brutto areal</td>';
    html += '<td>&nbsp;</td>';
    html += '<td style="width:50px;" align="right">Værelser</td>';
    html += '<td>&nbsp;</td>';
    html += '<td style="width:50px;" align="right">Husleje</td>';
    html += '<td>&nbsp;</td>';
    html += '<td style="width:60px;">Mere info</td>';
    html += '<td>&nbsp;</td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;" /></a></td>';
    html += '<td>&nbsp;</td>';
    html += '<td>Familiebolig</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">80 m2</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">3 rum</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2.400</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;"  /></a></td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;"  /></a></td>';
    html += '<td>&nbsp;</td>';
    html += '<td>Familiebolig</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">110 m2</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">4 rum</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">3.700</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;"  /></a></td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;"  /></a></td>';
    html += '<td>&nbsp;</td>';
    html += '<td>Familiebolig</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">80 m2</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2 rum</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2.300</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;"  /></a></td>';
    html += '</tr>';
    html += '<tr style="width:100%; height:15px">';
    html += '<td><a id="lytebox_plan" href="Billeder/plantegning.jpg" rel="lytebox" title="" style="color: #000000; cursor: hand; text-decoration: none;" onclick="startLytebox(this.id, this.href, this.title, this.rel); return false;"><img src="gfx/ikon_plan.jpg" style="border=none;"  /></a></td>';
    html += '<td>&nbsp;</td>';
    html += '<td>Familiebolig</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">110 m2</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">4 rum</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="right">2.000</td>';
    html += '<td>&nbsp;</td>';
    html += '<td align="center"><a id="info" href="pop-mere_om_lejemaalet.html" rel="lyteframe" title="" rev="width: 720px; height: 400px; scrolling: no;" onclick="startLyteFrame(this.id, this.href, this.title, this.rel, this.rev); return false;"><img src="gfx/zoom.png" style="border=none;" /></a></td>';
    html += '</tr>';
    html += '</table>';
    return (html);
}
function createCallOutContent_old(title, address, zip, city, phone, fax, manager, img) {

    var html = '<table class="PopUpHeader" width="400" border="0" cellspacing="0" cellpadding="0">';
    html += '<tr>';
    html += '<td width="10" height="30">&nbsp;</td>'
    html += '<td width="354" height="30" class="PopUpHeader">' + title + '</td>';
    html += '<td width="17" height="30"><img src="gfx/krak/popup/luk.jpg" width="17" height="30" alt="luk" onclick="removePopup()"/></td>';
    html += '<td width="10" height="30">&nbsp;</td>'
    html += '</tr>';
    html += '<tr>';
    html += '<td height="8"></td>';
    html += '<td height="8" colspan="2" valign="top"></td>';
    html += '<td height="8"></td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td width="10" height="160">&nbsp;</td>';
    html += '<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">';
    html += '<tr>';
    html += '<td width="51%" valign="top"><span class="PopUpTxt"><strong>Adresse</strong><br />';
    html += address + '<br />';
    html += zip + ' ' + city + '<br />';
    html += '<br />';
    html += '<strong>Tlf: </strong></span><br />';
    html += '<span class="PopUpTxt">' + phone + '<br />';
    html += '<br />';
    html += '<a class="PopUp"href="link.html">Gå til afdelingens side</a></span><br />';
    html += '<br /></td>';
    html += '<td width="49%" align="right" valign="top"><img src="' + img + '" width="157" height="114" class="PopUpBillede" /></td>';
    html += '</tr>';
    html += '</table></td>';
    //html += '<td width="10">&nbsp;</td>';
    html += '</tr>';
    html += '</table>';

    return (html);

}
function createCallOutContentTheme(title, address, zip, city) {

    var html = '<table class="PopUpHeader" width="250" border="0" cellspacing="0" cellpadding="0">';
    html += '<tr>';
    html += '<td width="10" height="30">&nbsp;</td>'
    html += '<td width="204" height="30" class="PopUpHeader">' + title + '</td>';
    html += '<td width="17" height="30"><img src="gfx/krak/popup/luk.jpg" width="17" height="30" alt="luk" onclick="removePopup()"/></td>';
    html += '<td width="10" height="30">&nbsp;</td>'
    html += '</tr>';
    html += '<tr>';
    html += '<td height="8"></td>';
    html += '<td height="8" colspan="2" valign="top"></td>';
    html += '<td height="8"></td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td width="10" height="160">&nbsp;</td>';
    html += '<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">';
    html += '<tr>';
    html += '<td width="51%" valign="top"><span class="PopUpTxt"><strong>Adresse</strong><br />';
    html += address + '<br />';
    html += zip + ' ' + city + '</td>';
    html += '</tr>';
    html += '</table></td>';
    html += '<td width="10">&nbsp;</td>';
    html += '</tr>';
    html += '</table>';

    return (html);
}

function OpenPano() {

    var winWidth = document.documentElement.clientWidth;
    var winHeight = document.documentElement.clientHeight;
    //window.open('pano/index123.html', '_blank', 'status=yes,resizable=yes,top=0,left=0,width='+winWidth+',height='+winHeight+'');
    window.open('pano2/pano.html', '_blank', 'status=yes,resizable=yes,top=0,left=0,width=' + winWidth + ',height=' + winHeight + '');
}