//create distance window                                 
 function distance_html(){
          html = '<div align="center">' + '<div style=background-color:#F1F5E7;>' + '<div style="background-color:#F1F5E9;font-family:Arial; font-size: 10pt; color:#666666; border:solid 4px #F1F5F9;" > Direction/Distance </div>' +'<div style="border-style: none; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1"  valign="bottom"  " height="  width="124" height="29"><tr><td  height="80" width="146" Background = "./symbols/comp1.gif"><p align="center" ><img src="./symbols/'+bear3+'.png" height="30" width="30" align="middle"></td><td height="80" width="141" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height=15 width='+dist2+' align="left"></div> </td> </tr><tr><td valign="bottom" height="1" width="146"><div style="background-color:#F1F5F9; font-size: 10pt; color:#666666; font-family:Arial; border:1px solid #F1F5F9;" >  <font size="2">Direction: '+ bear + "°" + '</font></div></td> <td valign="bottom" height="1" width="141" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-right-style:none; border-bottom-style:none"><div style="background-color:#F1F5F9; font-size: 10pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > <font size="2">Distance: ' + dist1 + " km" + '</font></div></td></tr></table>' + "<BR>" +"<div id='detailmap'></div>" + "<BR>";
         }
  //create detail window (wx,mobile,phg)
 function detail_html(){
   //WX
   if (weather[0] != null) {
       var windspeed = parseFloat(weather[0].getAttribute("windspeed"));
       var windspd2 = windspeed * 0.51444;
       var windspeed2 = runden(windspd2);
       var windspeed1 = windspeed2 * 4;
       var winddirection = parseFloat(weather[0].getAttribute("winddirection"));
       var winddir = winddirection /1000;
       var winddir3 = runden(winddir);
       var winddirection1 = winddir3 * 1000;
       var temperature = parseFloat(weather[0].getAttribute("temperature"));
       var tempcelsius = runden((temperature - 32) * 5 / 9);
       if (tempcelsius>0) {
           var tempicon = "./symbols/red.gif";
           var tempcelsiusplus = tempcelsius;
           var tempcelsiusminus = "0"
       } else {  
           var tempicon = "./symbols/blue.gif";
           var tempcelsiusminus = tempcelsius * -1.0;
           var tempcelsiusplus = "0"
       }
       var pressure2 = parseFloat(weather[0].getAttribute("pressure"));
       pressure = pressure2 - 980;
       var rain = parseFloat(weather[0].getAttribute("rain"));
       var humid = parseFloat(weather[0].getAttribute("humid"));
       if(pressure2 >= 1020 && rain <= 0 && humid <= 70 ){
          var weatherpic = "weathersun";
       } else if (pressure2 <= 1020 && rain <= 0 && humid > 70 ){
          var weatherpic = "weathercloud";
       } else if (pressure2 <= 1020 && rain >= 0 && humid <= 70 ){
          var weatherpic = "weatherrain";
       } else if (pressure2 >= 1020 && rain > 0 && humid <= 70 ){
          var weatherpic = "weathersunrain";
       } else if (pressure2 <= 1020 && rain > 0 && humid >= 70 ){
          var weatherpic = "weatherstrongrain";
       } else if (pressure2 >= 1020 && rain <= 0 && humid >= 70 ){
          var weatherpic = "weathersuncloud";
       } else { 
          var weatherpic = "none";
     }
       // detail_html WX
       html2 = '<div align="center">' + '<div style=background-color:#F1F5E7;>' + '<div style="background-color:#F1F5E9;font-family:Arial; font-size: 10pt; color:#666666; border:solid 4px #F1F5F9;" > Weatherstation: <B>' + label + '</B></div>' +'<img border="0" src="./symbols/'+weatherpic+'.gif" width="34" height="31"><div style="border-style: none; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1"  valign="bottom"  " height="  width="130" height="50"><tr><td  height="101" width="139" Background = "./symbols/comp.gif" colspan="3"><p align="center" ><img src="./symbols/'+winddirection1+'.png" height="30" width="30" align="middle"></td><td valign="bottom" height="101" width="133" style="border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height="'+windspeed1+'" width=15></div></td></tr><tr><td valign="bottom" height="1" colspan="3" width="139"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:1px solid #F1F5F9;" > Winddirection: '+ winddirection + "°" + '</div></td><td valign="bottom" height="1" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Windspeed: ' + windspeed2 + " m/s" + '</div></td></tr><tr><td valign="bottom" height="71" width="5" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-left-style:solid; border-left-width:1; border-top-style:none; border-bottom-style:solid; border-bottom-width:1" align="center">&nbsp;</td><td valign="bottom" height="71" width="104" style="border-top-style: none; border-bottom-style: solid; border-bottom-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" align="center"><img src="'+tempicon+'" height="'+tempcelsiusplus+'" width=15></td><td valign="top" height="71" width="21" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-bottom-style:none" align="center">&nbsp;</td><td valign="bottom" height="106" width="133" rowspan="2" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-right-style:solid; border-right-width:1; border-bottom-style:solid; border-bottom-width:1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height="'+pressure+'" width=15></div></td></tr><tr><td valign="top" height="35" width="5" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-bottom-style:solid; border-left-style:solid; border-left-width:1; border-bottom-width:1" align="center">&nbsp;</td><td valign="top" height="35" width="104" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-bottom-style:solid; border-bottom-width:1" align="center"><img src="'+tempicon+'" height="'+tempcelsiusminus+'" width=15></td><td valign="top" height="35" width="21" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-top-style:none" align="center"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1">&nbsp;</div></td></tr><tr><td valign="bottom" height="10" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; " colspan="3" width="131"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Temperature: : ' + tempcelsius + " °C" + '</div></td>  <td valign="bottom" height="10" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Pressure: ' + pressure2 + " hPa" +  '</div></td></tr></table>';
                                        
      //Mobile
  } else if (course[0] != null) { 
         var direction = parseFloat(course[0].getAttribute("direction"));
         var dir = direction /1000;
         var dir3 = runden(dir);
         var direction1 = dir3 * 1000;
         var speed1 = parseFloat(course[0].getAttribute("speed"));
         var spd2 = speed1 * 1.852; //in km/h
         var speed = runden(spd2);
         var speed1 = speed / 2;
         var height = parseFloat(course[0].getAttribute("height"));
         var height1 = height / 2;
       // detail_html mobile
       html2 = '<div align="center">' + '<div style=background-color:#F1F5E7;>' + '<div style="background-color:#F1F5E9;font-family:Arial; font-size: 10pt; color:#666666; border:solid 4px #F1F5F9;" > Mobile Station: <B>' + label + '</B></div>' +'<div style="border-style: none; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1"  valign="bottom"  " height="  width="130" height="50"><tr><td  height="101" width="139" Background = "./symbols/comp.gif" colspan="3"><p align="center" ><img src="./symbols/'+direction1+'.png" height="30" width="30" align="middle"></td><td valign="bottom" height="101" width="133" style="border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height="'+speed1+'" width=15></div></td></tr><tr><td valign="bottom" height="1" colspan="3" width="139"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:1px solid #F1F5F9;" > Course: '+ direction1 + "°" + '</div></td><td valign="bottom" height="1" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Speed: ' + speed + " km/h" + '</div></td></tr><tr><td valign="bottom" height="71" width="5" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; " align="center">&nbsp;</td><td valign="bottom" height="71" width="104" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-left-style:none" align="center"><img border="2" src="./icons/'+icontype+'.png"></td><td valign="top" height="71" width="21" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-bottom-style:none" align="center">&nbsp;</td><td valign="bottom" height="106" width="133" rowspan="2" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-right-style:solid; border-right-width:1; border-bottom-style:solid; border-bottom-width:1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height="'+height1+'" width=15></div></td></tr><tr><td valign="top" height="35" width="5" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-top-style:none" align="center">&nbsp;</td><td valign="top" height="35" width="104" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-left-style:none; border-top-style:none" align="center">&nbsp;</td><td valign="top" height="35" width="21" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-top-style:none" align="center"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1">&nbsp;</div></td></tr><tr><td valign="bottom" height="10" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; " colspan="3" width="131"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;"°C" + </div></td><td valign="bottom" height="10" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Height: ' + height + " m" +  '</div></td></tr></table>';
      
      //PHG
   } else if (phg[0] != null && !course[0] != null && !weather[0] != null) { //PHG Data
         var pwr = parseFloat(phg[0].getAttribute("pwr"));
         var power = pwr
         //var power = pwr * pwr; //in W
         var hgt = parseFloat(phg[0].getAttribute("hgt"));
         var height = hgt
         //var height = 10* Math.pow(2,hgt); //feet
         var hgtm = height / 3.2808399;
         var heightmetric = runden(hgtm);
         if  (heightmetric > 150){
         heightmetric = 150;
         }
         var gn = parseFloat(phg[0].getAttribute("gn"));
         var gn1 = gn/10;
         var gn2 = Math.pow(10, gn1);
         var gain = gn
         //var gain = runden(gn2); //in dB
         var gain2 = gain * 10
         var rng1 = Math.sqrt(2*height*Math.sqrt((power/10)*(gain/2)));
         var range = runden(rng1); //miles 0.621371192
         var rng2 = range / 0.621371192;
         var rangemetric = runden(rng2);
         var range2 = rangemetric * 2
         
       // detail_html phg  
       html2 = '<div align="center">' + '<div style=background-color:#F1F5E7;>' + '<div style="background-color:#F1F5E9;font-family:Arial; font-size: 10pt; color:#666666; border:solid 4px #F1F5F9;" > Station: <B>' + label + '</B></div>' +'<img border="0" src="icons/'+icontype+'.png"><div style="border-style: none; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1"  valign="bottom"  " height="  width="130" height="50"><tr><td  height="101" width="139" colspan="3"><p align="center" ><img src="./symbols/range.png" height="'+range2+'" width="'+range2+'" align="middle"></td><td valign="bottom" height="101" width="133" style="border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height="'+power+'" width=15></div></td></tr><tr><td valign="bottom" height="1" colspan="3" width="139"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:1px solid #F1F5F9;" > Range: '+ rangemetric + " km" + '</div></td><td valign="bottom" height="1" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Power: ' + power + " w" + '</div></td></tr><tr><td valign="bottom" height="71" width="5" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-left-style:solid; border-left-width:1; border-top-style:none; border-bottom-style:solid; border-bottom-width:1" align="center">&nbsp;</td><td valign="bottom" height="71" width="104" style="border-top-style: none; border-bottom-style: solid; border-bottom-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" align="center"><img src="./symbols/red.gif" height="'+heightmetric+'" width=15></td><td valign="top" height="71" width="21" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-bottom-style:none" align="center">&nbsp;</td><td valign="bottom" height="106" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; border-right-style:solid; border-right-width:1; border-bottom-style:solid; border-bottom-width:1"><div style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center"><img src="./symbols/blue.gif" height="'+gain2+'" width=15></div></td></tr><tr><td valign="bottom" height="10" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; " colspan="3" width="131"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Height : ' + heightmetric + " m" + '</div></td>  <td valign="bottom" height="10" width="133" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"><div style="background-color:#F1F5F9; font-size: 8pt; color:#666666; font-family:Arial; border:solid 0px #F1F5F9;" > Gain: ' + gain + " dB" +  '</div></td></tr></table>';
   
   } else { //No Data
      html2 = '<div align="center">' + '<div style="background-color:#F1F5E7; width:244; height:132">' +'<div style="background-color:#F1F5E9;font-family:Arial; font-size: 10pt; color:#666666; border:solid 4px #F1F5F9;" > Station: <B>' + label + '</B></div>&nbsp;<p><font size="2" face="Arial">No Details available</font></p><p>';
}
  
      
      
      //info_html 
    html1 = '<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber2" height="100" width="291"><tr><td height="130" width="295"><div style="background-color:#F1F5E9;font-family:Arial; font-size: 10pt; color:#666666; border:2px solid #F1F5F9;; width:295; height:41" > <p> <b>Station: '+label + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;("+icontype+")"+" "+  '</b></p></div><p>'+ "" + '</p><div style="background-color:#F1F5F9; font-size: 10pt;font-family:Arial; color:#666666; border:2px solid #F1F5F9;; width:295; height:17" > Position: <B>' + lat_min + ' / ' +  lng_min  + '</B></div><p>'+ "" +'</p><div style="background-color:#F1F5F9; border:2px solid #F1F5F9;font-family:Arial; font-size: 10pt; color:#666666; width:295; height:17" > Last heard: <B>' + time + '</B></div><p>'+ "" + '</p><div style="background-color:#F1F5F9; border:2px solid #F1F5F9;font-family:Arial; font-size: 10pt; color:#666666; width:295; height:16" > Comment: <B>' + comment + '</B></div><p>'+ "" + '</p><div style="background-color:#F1F5F9; border:3px solid #F1F5F9;font-family:Arial; font-size: 10pt; color:#666666; width:295; height:16" > Path: <B>' + path + '</B></div><p>&nbsp;</td></tr><tr><td height="1" width="295"><p align="center"><img border="0" src="./icons/'+icontype+'.png" width="20" height="20"></td></tr></table>'; 
    label2 = "Detail";
    label1 = "Overview";
}