/*
Filename: ridedetails.js
Author: Archana
When a ride is selected from the list of rides, its description is added to the div element of the page.
*/

//Creates a new element node, appends it to parent.
// if text != "", this also creates a text node with text in it and appends it to element.
//sets the name and id attributes to nameId.
//adapted From page 48 of Crane and Pescarello.
function addNode_wStyle(parent, element, text, style)
{	
	var childEl = document.createElement(element);
	if (style !="")
	{
		childEl.setAttribute('style', style);
	}
	if (text != "")
	{	textNode = document.createTextNode(text);
		childEl.appendChild(textNode);
	}
	parent.appendChild(childEl);	
	
	return childEl;
}
//adding a break element to the div
function addBreakElement(parent)
{
	var breakEl = document.createElement('br');
	parent.appendChild(breakEl);
}

//creates a div element and appends it to the parent div element
function createDivElement(parent, id)
{
	var divEl = document.createElement("div");
	divEl.setAttribute("id", id);
	parent.appendChild(divEl);
	
	return divEl;
}
//creates a TR element and appends it to the parent div element
function createTRElement(parent, id, style)
{
	var divEl = document.createElement("tr");
	divEl.setAttribute("id", id);
	divEl.setAttribute('style', style);
	parent.appendChild(divEl);
	
	return divEl;
}


//Populates the div tag with the Ride details based on which ride is selected.
// id - is the id of the route (which is also the number of ride details object in json file)

// accesses global var "RESULTS" which is a json object.  tyler 3.17.09
function createDetailsUI(id)
{
	var superParent = document.getElementById("contentArea");
	
	//remove child elements	
	removeChildElements(superParent);
	
	var parent = createDivElement(superParent, 'ride_details');
	addReturnLink(parent);
	
	addBreakElement(parent);
	
	var div_title = createDivElement(parent, 'title');
	addNode_wStyle(div_title, "label", RESULTS[id].title, '');
	
	addBreakElement(parent);

	var div_map = createDivElement(parent, 'map');
	div_map.setAttribute('style', 'width:556px; height:300px');
	addBreakElement(parent);
	
	//create Table element
	var tableEl = document.createElement("table");
	tableEl.setAttribute("id", id);
	tableEl.setAttribute('style', 'border:1;width:400px;');
	parent.appendChild(tableEl);		
	
	var tr_date = createTRElement(tableEl, 'date', 'background-color:#D3E1E8');
	$date = getDateHeaderString( dateStringToDate( RESULTS[id].date ))+" @ "+ formatTimeString( RESULTS[id].time );
	addNode_wStyle(tr_date, "td", "Date and Time:", 'float:left; font-weight:bold;');
	addNode_wStyle(tr_date, "td", $date, 'float:left;');	

	$city = RESULTS[id].city+", CA";
	$start = RESULTS[id].start_point+", "+RESULTS[id].city+", CA";
	var tr_start = createTRElement(tableEl, 'start', 'background-color:white');
	addNode_wStyle(tr_start, "td", "Start Point:", 'float:left; font-weight:bold;');
	addNode_wStyle(tr_start, "td", $start, 'float:left;');

	var tr_leader = createTRElement(tableEl, 'contact', 'background-color:#D3E1E8');
	addNode_wStyle(tr_leader, "td", "Leader Name:", 'float:left; font-weight:bold;');
	addNode_wStyle(tr_leader, "td", RESULTS[id].leader, 'float:left; ');
	
	var tr_contact = createTRElement(tableEl, 'contact', 'background-color:white');           // phone number listing with phone format
	addNode_wStyle(tr_contact, "td", "Leader Phone:", 'float:left; font-weight:bold;');                // function added 3.17.09 by tyler
	addNode_wStyle(tr_contact, "td", phoneNumFormat( RESULTS[id].leader_phone ), 'float:left; ');
	
	var tr_category = createTRElement(tableEl, 'category', 'background-color:#D3E1E8');
	addNode_wStyle(tr_category, "td", "Category:", 'float:left; font-weight:bold;');
	addNode_wStyle(tr_category, "td", RESULTS[id].category, 'float:left; ');
    
    var tr_elevation = createTRElement(tableEl, 'elevation', 'background-color:white');
	addNode_wStyle(tr_elevation, "td", "Hilliness:", 'float:left; font-weight:bold;');
	addNode_wStyle(tr_elevation, "td", RESULTS[id].hilliness, 'float:left;');	
	
	var tr_mileage = createTRElement(tableEl, 'mileage', 'background-color:#D3E1E8');
	addNode_wStyle(tr_mileage, "td", "Mileage:", 'float:left; font-weight:bold;');
	addNode_wStyle(tr_mileage, "td", RESULTS[id].mileage, 'float:left; ');
		
	addBreakElement(parent);
	var div_descr = createDivElement(parent, 'descr');
	addNode_wStyle(div_descr, "label", "Ride Description:", 'float:left; font-weight:bold; font-size:15;');
	addBreakElement(div_descr);
	addNode_wStyle(div_descr, "p", RESULTS[id].description, "");
	addBreakElement(parent);
	
	addReturnLink(parent);
	
	//add map
	zoom = 15;
	getMap($start);	
}
var $city = "Palo Alto, CA";

// converts 10 "digit" string into phone number format "(xxx) xxx - xxxx"
// improved and shortened by Vern, 3.17.09
function phoneNumFormat (phone) {
    return "(" + phone.substr(0,3) + ") " + phone.substr(3,3) + " - " +	phone.substr(6,4);
}

function addReturnLink(parent){
	//add link to ride list
	var div_link = createDivElement(parent, 'link');
	var linkNode = addNode_wStyle(div_link, "a", '<< Return to ride list', 'float:left; font-size:12');
	linkNode.onclick=updateRideListing;         // refresh the display back to most recent ride listing when clicked.  tyler 3.17.09
	linkNode.href="javascript:void(0)"; 
	addBreakElement(parent);
}

// Makes an instance of GClientCoder and submits a request for the geocode of a country
function getMap(place)
{
	var geocoder = new GClientGeocoder();
	geocoder.getLatLng(place, createMap);
}

// Makes an instance of GClientCoder and submits a request for the geocode of a country
function getMapNoMarker(place)
{
	var geocoder = new GClientGeocoder();
	geocoder.getLatLng(place, createMapNoMarker);
}


// callback function for the getLatLng request. Creates a map with center AND MARKER at geocode "glatlng"
function createMap(glatlng)
{
	if (glatlng == null ) {
		getMapNoMarker($city);
		return;
	}
	var map = new GMap2(document.getElementById("map"));
	map.setCenter(glatlng, zoom);
	
	map.addOverlay(new GMarker(glatlng));
	
	//adds Map type like Satelitte, Hybrid, terrain to the map
	map.addControl(new GMapTypeControl());
	
	// adds zoom level bar to the map
	map.addControl(new GLargeMapControl());
}

// callback function for the getLatLng request. Creates a map with center at geocode "glatlng".  NO MARKER.
function createMapNoMarker(glatlng)
{
	if (glatlng == null ) {
		getMapNoMarker($city);
		return;
	}
	var map = new GMap2(document.getElementById("map"));
	map.setCenter(glatlng, zoom);
	
	//adds Map type like Satelitte, Hybrid, terrain to the map
	map.addControl(new GMapTypeControl());
	
	// adds zoom level bar to the map
	map.addControl(new GLargeMapControl());
}


//removes all child nodes from the parent node
function removeChildElements(parent)
{
	while (parent.firstChild) {
	  parent.removeChild(parent.firstChild);
	}
}


// Adds a google map element to a page.  Assigns 'map_toggle' the inverse function getTestMap()
function getTestMap(){
    var trigger = document.getElementById('map_toggle');   
    var mapContainer = document.getElementById('map_test');
    var map = createDivElement(mapContainer, 'map');
    
    var testPlace = document.getElementById('start_point').firstChild.nextSibling.value;
    var testCity = document.getElementById('city').firstChild.nextSibling.value;
    
    $city = testCity + ', CA';  // sets default for the map
    
    
    trigger.value = "Close Map"; 
    trigger.onclick=closeTestMap;
    
    map.setAttribute('style', 'width: 400px; height: 300px; border: 2px solid #444;');
    
    zoom = 15; 
    getMap( testPlace + ', '+ testCity + ', CA');  
}

// Removes a google map from a page.  Assigns 'map_toggle' the inverse function getTestMap()
function closeTestMap(){
    var trigger = document.getElementById('map_toggle');
    removeChildElements(document.getElementById('map_test'));
    
    trigger.value='Test Mapability'; 
    trigger.onclick=getTestMap;    
}