/*****************************  Site Specific ********************************/

// centre of map

var centreLatitude = 58.2164;
var centreLongitude = -6.2061;
var startZoom = 12;

// villages and categories

var village = new Array("All", "Pabail Uarach", "Pabail Iarach", "Seisiadar", "Port Mholair", "Port nan Giùran", "Na Fleisearan", 
			"Sulaisiadar","Garrabost", "An Aird", "An Cnoc", "Suardail", "Aiginis");
var category = new Array("All", "Fishing Rocks", "Coastal Landmarks", "Inland Landmarks", "Lochs", "Streams");

/******************************************************************************/

var map;
var newPoint;
var currentPid;

var SEARCH = 1;
var ADD = 2;
var EDIT = 3;
var MOVE = 4;
var currentOperation = SEARCH;

// main function

function init(operation) 
{
  if (GBrowserIsCompatible()) 
  {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    //    map.addControl(new GMapTypeControl());
    var location =  new GLatLng(centreLatitude, centreLongitude);
    map.setCenter(location, startZoom, G_SATELLITE_MAP);
    switch (operation)
    {
      case SEARCH:
      	        currentOperation = operation;
	 	searchData();
	 	break;
      case ADD:
	        currentOperation = operation;
	        addData();
	        break;
      case EDIT:
	        currentOperation = operation;
		editData();
	 	break;
      case MOVE:
	        currentOperation = operation;
		moveData();
	 	break;
      default:
	 	alert("Invalid Operation");
	  	break;
    }
  }
}

//**************************SEARCH*****************************

// get data from database and associate with map icons

function searchData()
{
  // create an HTML DOM form element
  var outputForm = document.createElement("form");
  outputForm.setAttribute("action","");
  outputForm.onsubmit = function() {retrieveSearchData(); return false;};
  outputForm.innerHTML = generateOutputForm();
  map.openInfoWindow(map.getCenter(), outputForm);
}

// get data from database

function retrieveSearchData() 
{
    var category = document.getElementById("category").value;
    var village = document.getElementById("village").value;
    var getVars = "?operation=search" +
		"&category=" + category +
		"&village=" + village;

    document.getElementById("warning").firstChild.nodeValue = "Connecting to database, please wait";

    // create Ajax object
    var request = GXmlHttp.create();

    // open request to pointtable.php on server
    request.open("GET", "/pointtable.php" + getVars, true);
    request.onreadystatechange = function() 
    {
        if (request.readyState == 4) 
        {
            // request is successful
            if (request.responseText == 'success') 
            {
                map.closeInfoWindow();
                changeBodyClass('standby', 'loading');
                // ensure file not cached
                var filename = "/sites.xml?=";
                filename += Math.random();
                // get data from sites.xml
                GDownloadUrl(filename, function(data, responseCode) 
                {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    changeBodyClass('loading', 'standby');
                    changeBodyClass('rightcolumn-off', 'rightcolumn-on');
                    map.checkResize();
                    createRightColumnTitle(category, village);
                    var point;
                    var name;
                    var phon;
                    var desc;
                    var text;
                    var image;
                    for (var i = 0, lat = 0.0, lng = 0.0; i < markers.length; i++) 
                    {
                        point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                        lat = parseFloat(markers[i].getAttribute("lat"));
                        lat = lat.toFixed(8);
                        lng = parseFloat(markers[i].getAttribute("lng"));
                        lng = lng.toFixed(8);
                        name = markers[i].getAttribute("placename");
                        phon = markers[i].getAttribute("phonetic");
                        desc = markers[i].getAttribute("desc");
                        // html requirement
                        name = name.replace(/X/g, "&");
                        desc = desc.replace(/X/g, "&");
                        // mysql requirement
                        name = name.replace(/Z/g, "'");
                        desc = desc.replace(/Z/g, "'");
                        image = markers[i].getAttribute("img");
                        if (image.length != 0) 
                        {
                            text = ("<div style='width: 500px;'>");
                            text += ("<div style='float:left;margin:2px 10px 2px 10px;'>");
                            text += ("<img style='border:1px solid gray;' src=" + image + " width='200' height='200'>");
                            text += ("</div>");
                            text += ('<h3 title="' + phon + '">' + name + '</h3>');
                        }
                        else 
                        {
                            text = ("<div style='width: 500px;'>");
                            text += ('<h3 title="' + phon + '">' + name + '</h3>');
                        }
                        text += ('<br><strong>Lat:&nbsp;</strong> ' + lat + '<strong>&nbsp;Lng:&nbsp;</strong>' + lng);
                        text += ("<br>" + desc);
                        text += ("</div>");

                        map.addOverlay(createSearchMarker(point, name, phon, text));
                    }
                });
            }
            else {
                document.getElementById("warning").firstChild.nodeValue = request.responseText;
            }
        }
    }
    request.send(null);

    return (false);
}

// google map marker

function createSearchMarker(point, name, phon, text) 
{
    var marker = new GMarker(point);
    
    // marker plus add to rightcolumn
    var listItem = document.createElement('li');
    var listItemLink = listItem.appendChild(document.createElement('a'));
    listItemLink.href = "#";
    listItemLink.setAttribute("title", phon);
    listItemLink.innerHTML = name;

    var focusPoint = function() 
    {
        marker.openInfoWindowHtml(text);
        map.panTo(point);
        return false;
    }

    GEvent.addListener(marker, "click", focusPoint);
    listItemLink.onclick = focusPoint;

    document.getElementById('rightcolumn-list').appendChild(listItem);

    return marker;
}

/*********************SEARCH*********************************/

/**********************ADD***********************************/

// onclick, create input form  and open in map window

function addData() {
    GEvent.addListener(map, "click", function(overlay, latlng) 
    {
        // create an HTML DOM form element
        var inputForm = document.createElement("form");
        inputForm.setAttribute("action", "");
        inputForm.onsubmit = function() { storeAddData(); return false; };
        // retrieve the longitude and latitude of the click point
        var lat = latlng.lat();
        var lng = latlng.lng();
        inputForm.innerHTML = generateInputForm(lat, lng);
        map.openInfoWindow(latlng, inputForm);
    });
}

// store data in database

function storeAddData() 
{
    // get coordinates from input form
    var lat = document.getElementById("latitude").value;
    var lng = document.getElementById("longitude").value;
    var name = document.getElementById("placename").value;
    var phon = document.getElementById("phonetic").value;
    var desc = document.getElementById("description").value;

    // mysql requirement
    name = name.replace(/'/g, "Z");
    desc = desc.replace(/'/g, "Z");

    var getVars = "?operation=add" +
		"&placename=" + name +
		"&phonetic=" + phon +
		"&description=" + desc +
        "&image=" + document.getElementById("image").value +
		"&category=" + document.getElementById("category").value +
		"&village=" + document.getElementById("village").value +
		"&lat=" + lat +
		"&lng=" + lng;

    document.getElementById("warning").firstChild.nodeValue = "Connecting to database, please wait";

    // create Ajax object
    var request = GXmlHttp.create();

    // open request to pointtable.php on server
    request.open("GET", "/pointtable.php" + getVars, true);
    request.onreadystatechange = function() 
    {
        if (request.readyState == 4) 
        {
            // request is successful
            if (request.responseText == 'success') 
            {
                // put marker on map with info window
                var point = new GLatLng(parseFloat(lat), parseFloat(lng));
                var name = document.getElementById("placename").value;
                var phon = document.getElementById("phonetic").value;
                var desc = document.getElementById("description").value;
                // html requirement
                name = name.replace(/X/g, "&");
                desc = desc.replace(/X/g, "&");
                var image = document.getElementById("image").value;
                if (image.length != 0) 
                {
                    var text = ("<div style='float:left;margin:2px 10px 2px 10px;'>");
                    text += ("<img style='border:1px solid gray;' src=" + image + " width='200' height='200'>");
                    text += ("</div>");
                    text += ('<h3>' + name + '</h3>');
                    if (phon.length != 0) {
                        text += ('[<em>' + phon + '</em>]');
                    }
                }
                else {
                    var text = '<h3>' + name + '</h3>';
                    if (phon.length != 0) {
                        text += ('[<em>' + phon + '</em>]');
                    }
                }
                text += ('<br><strong>Lat:&nbsp;</strong> ' + lat + '<strong>&nbsp;Lng:&nbsp;</strong>' + lng);
                text += ('<br>' + desc);
                map.addOverlay(createAddMarker(point, text));
                map.closeInfoWindow();
            }
            else {
                document.getElementById("warning").firstChild.nodeValue = request.responseText;
            }
        }
    }
    request.send(null);

    return (false);
}

// google map marker

function createAddMarker(point, text) 
{
    var marker = new GMarker(point);
    
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(text);
    });

    return marker;
}

/*****************************ADD*******************************/

/*****************************EDIT******************************/

// get data from database, edit and store

function editData() 
{
    // create an HTML DOM form element
    var editForm = document.createElement("form");
    editForm.setAttribute("action", "");
    editForm.onsubmit = function() { retrieveEditData(); return false; };
    editForm.innerHTML = generateOutputForm();
    map.openInfoWindow(map.getCenter(), editForm);
}

// get data from database

function retrieveEditData() 
{
    var category = document.getElementById("category").value;
    var village = document.getElementById("village").value;
    var getVars = "?operation=search" +
		"&category=" + category +
		"&village=" + village;

    document.getElementById("warning").firstChild.nodeValue = "Connecting to database, please wait";

    // create Ajax object
    var request = GXmlHttp.create();

    // open request to pointtable.php on server
    request.open("GET", "/pointtable.php" + getVars, true);
    request.onreadystatechange = function() 
    {
        if (request.readyState == 4) 
        {
            // request is successful
            if (request.responseText == 'success') 
            {
                map.closeInfoWindow();
                changeBodyClass('standby', 'loading');
                // ensure file not cached
                var filename = "/sites.xml?=";
                filename += Math.random();
                // get data from sites.xml
                GDownloadUrl(filename, function(data, responseCode) 
                {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    changeBodyClass('loading', 'standby');
                    changeBodyClass('rightcolumn-off', 'rightcolumn-on');
                    map.checkResize();
                    createRightColumnTitle(category, village);
                    var point;
                    var name;
                    var phon;
                    var desc;
                    var editForm;
                    for (var i = 0; i < markers.length; i++) 
                    {
                        point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                        name = markers[i].getAttribute("placename");
                        phon = markers[i].getAttribute("phonetic");
                        desc = markers[i].getAttribute("desc");
                        // mysql requirement
                        name = name.replace(/Z/g, "'");
                        desc = desc.replace(/Z/g, "'");
                        editForm = document.createElement("form");
                        editForm.setAttribute("action", "");
                        editForm.onsubmit = function() { storeEditData(); return false; };
                        editForm.innerHTML = generateEditForm(markers[i].getAttribute("place_id"),
						    parseFloat(markers[i].getAttribute("lat")),
						    parseFloat(markers[i].getAttribute("lng")),
						    name,
						    phon,
						    desc,
						    markers[i].getAttribute("img"));
                       map.addOverlay(createEditMarker(point, name, phon, editForm));
                    }
                });
            }
            else {
                document.getElementById("warning").firstChild.nodeValue = request.responseText;
            }
        }
    }
    request.send(null);

    return (false);
}

// store data in database

function storeEditData()
{	

  // get coordinates from input form
  var lat = document.getElementById("latitude").value;
  var lng = document.getElementById("longitude").value;
  var name = document.getElementById("placename").value;
  var phon = document.getElementById("phonetic").value;
  var desc = document.getElementById("description").value;
  // mysql requirement
  name = name.replace(/'/g, "Z");
  desc = desc.replace(/'/g, "Z");

  var getVars = "?operation=edit" +
		"&placename=" + name +
		"&phonetic=" + phon +
		"&description=" + desc +
                "&image=" + document.getElementById("image").value +
		"&category=" + document.getElementById("category").value +
		"&village=" + document.getElementById("village").value +
	        "&place_id=" + document.getElementById("place_id").value +
		"&lat=" + lat +
		"&lng=" + lng;

  document.getElementById("warning").firstChild.nodeValue = "Connecting to database, please wait";

  // create Ajax object
  var request = GXmlHttp.create();

  // open request to pointtable.php on server
  request.open("GET", "/pointtable.php"+getVars, true);
  request.onreadystatechange = function() {
  if (request.readyState == 4) 
  {
      // request is successful
        if (request.responseText == 'success') 
        {
		document.getElementById("warning").firstChild.nodeValue = "Updated";
		map.closeInfoWindow(); 
      }
      else
      {
	document.getElementById("warning").firstChild.nodeValue = request.responseText;
      } 
    }
  }
  request.send(null);

  return(false);
}

// google map marker

function createEditMarker(point, name, phon, text)
{
  var marker = new GMarker(point);

  // marker plus add to rightcolumn
  var listItem = document.createElement('li');
  var listItemLink = listItem.appendChild(document.createElement('a'));
  listItemLink.href = "#";
  listItemLink.setAttribute("title", phon);
  listItemLink.innerHTML = name;

  var focusPoint = function()
  {
    marker.openInfoWindowHtml(text);
    map.panTo(point);
    return false;
  }

  GEvent.addListener(marker, "click", focusPoint);
  listItemLink.onclick = focusPoint;

  document.getElementById('rightcolumn-list').appendChild(listItem);

  return marker;
}

/*****************************EDIT******************************/

/*****************************MOVE******************************/

// get data from database, move and new lat lng

function moveData() 
{
    // create an HTML DOM form element
    var moveForm = document.createElement("form");
    moveForm.setAttribute("action", "");
    moveForm.onsubmit = function() { retrieveMoveData(); return false; };
    moveForm.innerHTML = generateOutputForm();
    map.openInfoWindow(map.getCenter(), moveForm);
}

// get data from database

function retrieveMoveData() 
{
    var category = document.getElementById("category").value;
    var village = document.getElementById("village").value;
    var getVars = "?operation=search" +
		"&category=" + category +
		"&village=" + village;

    document.getElementById("warning").firstChild.nodeValue = "Connecting to database, please wait";

    // create Ajax object
    var request = GXmlHttp.create();

    // open request to pointtable.php on server
    request.open("GET", "/pointtable.php" + getVars, true);
    request.onreadystatechange = function() 
    {
        if (request.readyState == 4) 
        {
            // request is successful
            if (request.responseText == 'success') 
            {
                map.closeInfoWindow();
                changeBodyClass('standby', 'loading');
                // ensure file not cached
                var filename = "/sites.xml?=";
                filename += Math.random();
                // get data from sites.xml
                GDownloadUrl(filename, function(data, responseCode) 
                {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    changeBodyClass('loading', 'standby');
                    changeBodyClass('rightcolumn-off', 'rightcolumn-on');
                    map.checkResize();
                    createRightColumnTitle(category, village);
                    
                    var point;
                    var name;
                    var desc;
                    var text;
                    var image;
                    var pid;
                    var marker;
                    for (var i = 0, lat = 0.0, lng = 0.0; i < markers.length; i++) 
                    {
                        point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                        lat = parseFloat(markers[i].getAttribute("lat"));
                        lng = parseFloat(markers[i].getAttribute("lng"));
                        name = markers[i].getAttribute("placename");
                        desc = markers[i].getAttribute("desc");
                        pid = markers[i].getAttribute("place_id");
                        // html requirement
                        name = name.replace(/X/g, "&");
                        desc = desc.replace(/X/g, "&");
                        // mysql requirement
                        name = name.replace(/Z/g, "'");
                        desc = desc.replace(/Z/g, "'");
   
                        text = '<h3>' + name + '</h3>';
                        text += ('<br><strong>Lat:&nbsp;</strong> ' + lat + '<strong>&nbsp;Lng:&nbsp;</strong>' + lng);
                        text += ("<br>" + desc);

                        marker = createMoveMarker(pid, point, name, text);
                        GEvent.addListener(marker, 'dragend', function() 
                        {
                            newPoint = this.getPoint();
                            currentPid = this.getTitle();
                            storeMoveData();
                        });

                        map.addOverlay(marker);
                    }
                });
            }
            else {
                document.getElementById("warning").firstChild.nodeValue = request.responseText;
            }
        }
    }
    request.send(null);

    return (false);
}

// store data in database

function storeMoveData() 
{
    var getVars = "?operation=move" +
	    "&place_id=" + currentPid +
        "&lat=" + newPoint.lat() +
        "&lng=" + newPoint.lng();

    // create Ajax object
    var request = GXmlHttp.create();

    // open request to pointtable.php on server
    request.open("GET", "/pointtable.php" + getVars, true);
    request.onreadystatechange = function() 
    {
        if (request.readyState == 4) 
        {
            // request is successful
            if (request.responseText != 'success') 
            {
                alert("Bad Move");
            }
        }
    }
    request.send(null);

    return (false);
}

// google map marker

function createMoveMarker(pid, point, name, text) 
{
    var marker = new GMarker(point, { draggable: true, bouncy: false, title: pid });
    marker.enableDragging();

    // marker plus add to rightcolumn
    
    var listItem = document.createElement('li');
    var listItemLink = listItem.appendChild(document.createElement('a'));
    listItemLink.href = "#";
    listItemLink.innerHTML = name;

    var focusPoint = function() {
        marker.openInfoWindowHtml(text);
        map.panTo(point);
        return false;
    }

    GEvent.addListener(marker, "click", focusPoint);
    listItemLink.onclick = focusPoint;

    document.getElementById('rightcolumn-list').appendChild(listItem);

    return marker;
}

/*****************************MOVE******************************/

// generate html for output form

function generateOutputForm()
{
  var txt = '<fieldset>' +
	    '<legend>Search</legend>' +
	    '<div id="details">' +
	    '<label for="village">Village:<div class="warn">*&nbsp;</div></label><br>' +
	    '<select id="village" class="maxw" name="village" size="1" tabindex="1">' +
	    '<option value="1">Please select one of the options below...</option>';

  for (var i = 0; i < village.length; i++)
  {
    txt += ('<option value="' + i + '">' + village[i] + '</option>');
  }
				
  txt += ('</select>' +
	  '<label for="category">Category:<div class="warn">*&nbsp;</div></label><br>' +
	  '<select id="category" class="maxw" name="category" size="1" tabindex="2">' +
          '<option value="1">Please select one of the options below...</option>');

  for (var i = 0; i < category.length; i++)
  {
    txt += ('<option value="' + i + '">' + category[i] + '</option>');
  }
				
  txt += ('</select>' +
	  '<div id="warning" class="warn">*&nbsp;Please ensure that all required fields are completed</div>' +
	  '<div align="center">' +
	  '<p><input type="submit" value="Search"/></p>' +
	  '</div>' +
	  '</div>' +
	  '</fieldset>');

  return txt;
}

// generate html for input form

function generateInputForm(lat, lng)
{
  var txt = '<fieldset>' +
            '<legend>Add Place Name</legend>' + 
            '<div id="placeform">' +
	    '<div id="location">' +
	    '<label for="lat">Latitude:</label>' +
	    '<input id="latitude" type="text" readonly value="' + lat + '"/>' +
	    '<label for="lng">Longitude:</label>' +
	    '<input type="text" id="longitude" readonly value="' + lng + '"/>' +
	    '</div>' +
	    '<div id="details">' +
	    '<label for="placename">Placename:<div class="warn">*&nbsp;</div></label><br>' +
	    '<input id="placename" class="maxw" name="placename" type="text" tabindex="1">' +
	    '<label for="phonetic">Phonetic Placename:</label><br>' +
	    '<input id="phonetic" class="maxw" name="phonetic" type="text" tabindex="1">' +	         
        '<label for="description">Description:</label><br>' +
	    '<textarea id="description" class="maxw" name="description" rows="3" tabindex="2"></textarea>' +
            '<label for="image">Image:</label><br>' +
	    '<input id="image" class="maxw" name="image" type="text" tabindex="4"/>' +
	    '<label for="village">Village:<div class="warn">*&nbsp;</div></label><br>' +
	    '<select id="village" class="maxw" name="village" size="1" tabindex="5">' +
	    '<option value="1">Please select one of the options below...</option>';
	        
  for (var i = 1; i < village.length; i++)
  {
    txt += ('<option value="' + i + '">' + village[i] + '</option>');
  }
				
  txt += ('</select>' +
	  '<label for="category">Category:<div class="warn">*&nbsp;</div></label><br>' +
	  '<select id="category" class="maxw" name="category" size="1" tabindex="6">' +
          '<option value="1">Please select one of the options below...</option>');

  for (var i = 1; i < category.length; i++)
  {
    txt += ('<option value="' + i + '">' + category[i] + '</option>');
  }
					
  txt +=  ('</select>' +
	   '<div id="warning" class="warn">*&nbsp;Please ensure that all required fields are completed</div>' +
	   '<div align="center">' +
	   '<p><input type="submit" value="Save"/></p>' +
	   '</div>' +
	   '</div>' +
	   '</div>' +
	   '</fieldset>');

  return txt;
}

// generate html for edit form

function generateEditForm(place_id, lat, lng, placename, phon, desc, img)
{
  var txt = '<fieldset>' +
	    '<legend>New Place Name</legend>' + 
            '<div id="placeform">' +
	    '<div id="location">' +
	    '<label for="lat">Latitude:</label>' +
	    '<input id="latitude" type="text" readonly value="' + lat + '"/>' +
	    '<label for="lng">Longitude:</label>' +
	    '<input type="text" id="longitude" readonly value="' + lng + '"/>' +
	    '</div>' +
	    '<div id="details">' +
	    '<label for="placename">Placename:<div class="warn">*&nbsp;</div></label><br>' +
	    '<input id="placename" class="maxw" name="placename" type="text" tabindex="1" value="' + placename + '"/>' +
	    '<label for="phonetic">Phonetic Placename:</label><br>' +
	    '<input id="phonetic" class="maxw" name="phonetic" type="text" tabindex="1" value="' + phon + '"/>' +		         
            '<label for="description">Description:</label><br>' +
	    '<textarea id="description" class="maxw" name="description" rows="3" tabindex="2">' + desc + '</textarea>' +
            '<label for="image">Image:</label><br>' +
	    '<input id="image" class="maxw" name="image" type="text" tabindex="4" value="' + img + '"/>' +
	    '<label for="village">Village:<div class="warn">*&nbsp;</div></label><br>' +
	    '<select id="village" class="maxw" name="village" size="1" tabindex="5">' +
	    '<option value="1">Please select one of the options below...</option>';
	       
  for (var i = 1; i < village.length; i++)
  {
    txt += ('<option value="' + i + '">' + village[i] + '</option>');
  }
				
  txt += ('</select>' +
	  '<label for="category">Category:<div class="warn">*&nbsp;</div></label><br>' +
	  '<select id="category" class="maxw" name="category" size="1" tabindex="6">' +
          '<option value="1">Please select one of the options below...</option>');

  for (var i = 1; i < category.length; i++)
  {
    txt += ('<option value="' + i + '">' + category[i] + '</option>');
  }
					
  txt +=  ('</select>' +
	   '<div id="warning" class="warn">*&nbsp;Please ensure that all required fields are completed</div>' +
	   '<div align="center">' +
	   '<p><input type="submit" value="Save"/></p>' +
           '<input type="hidden" id="place_id" value="' + place_id + '"/>' +
	   '</div>' +
	   '</div>' +
	   '</div>' +
	   '</fieldset>');

  return txt;
}

// switch rightcolumn on/off

function changeBodyClass(from, to)
{
  document.body.className = document.body.className.replace(from, to);
  return false;
}

// create rightcolumn title

function createRightColumnTitle(categoryid, villageid)
{
  var text = "<strong>" + village[villageid] + "</strong>";
  text += "<br>&nbsp;&nbsp;";
  text += "<strong>" + category[categoryid] + "</strong>";
  document.getElementById('rightcolumn-title').innerHTML = text;
}

// convert decimal coordinates to degrees

function convert()
{
  var lat = document.getElementById("latin").value;
  var lng = Math.abs(document.getElementById("longin").value);

  var frac = lat - Math.floor(lat);
  var min = Math.floor(frac * 60);
  frac = frac * 60 - Math.floor(frac * 60);
  var sec = Math.floor(frac * 60);
  sec = decPlaces(frac * 60, 4);
  var text = Math.floor(lat) + " " + min + " " + sec + " N";
    
  document.getElementById("latout").value = text;

  frac = lng - Math.floor(lng);
  min = Math.floor(frac * 60);
  frac = frac * 60 - Math.floor(frac * 60);
  sec = Math.floor(frac * 60);
  sec = decPlaces(frac * 60, 4);
  text = Math.floor(lng) + " " + min + " " + sec + " W";

  document.getElementById("longout").value = text;
}

// format to number of decimal places

function decPlaces(dec, places)
{
  var val = dec.toString();
  var index = val.indexOf(".");
  var con = parseFloat(val.substr(0, index+places+1));

  return con;
}