/*****************************  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 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;
    }
  }
}

// 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() {retrieveData(); return false;};
  outputForm.innerHTML = generateOutputForm();
  map.openInfoWindow(map.getCenter(), outputForm);
}

// 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;
}

// get data from database

function retrieveData()
{
  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);
	if (currentOperation == SEARCH)
	{
	  var point;
	  var name;
	  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"));
	    lng = parseFloat(markers[i].getAttribute("lng"));
	    name = markers[i].getAttribute("placename");
	    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: 550px;'>");
	      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>');
	    }
	    else
	    {
	      text = ("<div style='width: 550px;'>");
	      text += '<h3>' + name + '</h3>'; 
	    }
	    text += ('<br><strong>Lat:&nbsp;</strong> ' + lat + '<strong>&nbsp;Lng:&nbsp;</strong>' + lng);
	    text += ("<br>" + desc);
	    text += ("</div>");
	    
	    map.addOverlay(createMarker(point, name, text, true));
	  }
	}
	else if (currentOperation == EDIT)
	{
	  var point;
	  var name;
	  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");
	    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() {storeData(); return false;};
	    editForm.innerHTML = generateEditForm(markers[i].getAttribute("place_id"),
						  parseFloat(markers[i].getAttribute("lat")),
						  parseFloat(markers[i].getAttribute("lng")),
						  name,
						  desc,
						  markers[i].getAttribute("img"));
	    map.addOverlay(createMarker(point, name, editForm, true));
    	  }	
	}
	else // MOVE
	{
	  var point;
	  var name;
	  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"));
	    lng = parseFloat(markers[i].getAttribute("lng"));
	    name = markers[i].getAttribute("placename");
	    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='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>');
	    }
	    else
	    {
	      text = '<h3>' + name + '</h3>'; 
	    }
	    text += ('<br><strong>Lat:&nbsp;</strong> ' + lat + '<strong>&nbsp;Lng:&nbsp;</strong>' + lng);
	    text += ("<br>" + desc);
	    

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

  return(false);
}

// 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() {storeData(); 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);
  });
}

// 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="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;
}

// store data in database

function storeData()
{
  // get coordinates from input form
  var lat = document.getElementById("latitude").value;
  var lng = document.getElementById("longitude").value;
	
  if (currentOperation == ADD)
  {
    var name = document.getElementById("placename").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 +
		"&description=" + desc +
                "&image=" + document.getElementById("image").value +
		"&category=" + document.getElementById("category").value +
		"&village=" + document.getElementById("village").value +
		"&lat=" + lat +
		"&lng=" + lng;
  }
  else // EDIT
  {
    var name = document.getElementById("placename").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 +
		"&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')
      {
	// put marker on map with info window
	var point = new GLatLng(parseFloat(lat), parseFloat(lng));
	var name = document.getElementById("placename").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>');
	}
	else
	{
	  var text = '<h3>' + name + '</h3>'; 
	}
	//var text = '<h3>' + name + '</h3>';
	text += ('<br><strong>Lat:&nbsp;</strong> ' + lat + '<strong>&nbsp;Lng:&nbsp;</strong>' + lng);
	text += ('<br>' + desc);
	map.addOverlay(createMarker(point, name, text, false));
	map.closeInfoWindow();
      }
      else
      {
	document.getElementById("warning").firstChild.nodeValue = request.responseText;
      }
    }
  }
  request.send(null);

  return(false);
}

// 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() {retrieveData(); return false;};
  editForm.innerHTML = generateOutputForm();
  map.openInfoWindow(map.getCenter(), editForm);
}

// generate html for edit form

function generateEditForm(place_id, lat, lng, placename, 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="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;
}

// 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() {retrieveData(); return false;};
  moveForm.innerHTML = generateOutputForm();
  map.openInfoWindow(map.getCenter(), moveForm);
}

// google map marker

function createMarker(point, name, text, add)
{
  // var marker = new GMarker(point, text);
  if (currentOperation == MOVE)
  {
    var marker = new GMarker(point, {draggable:true});
    marker.enableDragging();
    GEvent.addListener(marker, 'dragend', function() {
			 alert(marker.getPoint());
		       });
  }
  else
  {
    var marker = new GMarker(point);
  }
 
  // marker plus add to rightcolumn
  if (add)
  {
    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);
  }
  else // map marker only - ADD
  {
    GEvent.addListener(marker, "click", function() {
			 marker.openInfoWindowHtml(text);
		       });
  }

  return marker;
}

// 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;
}

// delay for milliseconds

function pause(millis)
{
  var date = new Date();
  var curDate = null;

  do { 
    curDate = new Date(); 
  } while(curDate-date < millis);
} 

// 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;
}