var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var page3 = document.getElementById('page3');
var page4 = document.getElementById('page4');
var page5 = document.getElementById('page5');

var map;
var map_canvas;
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(23, 35);
baseIcon.iconAnchor = new GPoint(13, 34);
//var ci = new GIcon(baseIcon);
baseIcon.image = "img/icon.png";
markerOptions = { icon:baseIcon };
var cur_lat;
var cur_lng;

var mydb;
var isSupport = false;
var sqlResult;
var cur_page = 1;

function iniApp() {
	//iniciate interface
	page1.style.visibility = "visible";
	page2.style.visibility = "hidden";
	page3.style.visibility = "hidden";
	page4.style.visibility = "hidden";
	page5.style.visibility = "hidden";
	//iniciate map
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map1"));
		map.setCenter(new GLatLng(0,0),0);
		map.disableScrollWheelZoom();
		map.disableDragging()
		map.setMapType(G_PHYSICAL_MAP);
	}
	//iniciate db
	try { 
		if (!window.openDatabase) { 
			alert('HTML5 databse is not supported on your browser.'); 
		} else { 
			var shortName = 'travellog'; 
			var version = '1.0'; 
			var displayName = 'My Travel Log'; 
			var maxSize = 5120000; // in bytes 
			mydb = openDatabase(shortName, version, displayName, maxSize); 
			// You should have a database instance in mydb. 
			createTable();
			isSupport = true;
		} 
	} catch(e) { 
		// Error handling code goes here. 
		if (e == 2) { 
			// Version number mismatch. 
			alert("Invalid database version."); 
		} else { 
			alert("Unknown error: "+e+"."); 
		} 
		return; 
	} 
}
//create table
function createTable() { 
	var sqlstr = 'CREATE TABLE IF NOT EXISTS log(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, loc_lat TEXT NOT NULL DEFAULT "-", loc_lng TEXT NOT NULL DEFAULT "-", loc_name TEXT NOT NULL DEFAULT "-", mate TEXT NOT NULL DEFAULT "-", content TEXT NOT NULL DEFAULT "-", time TEXT NOT NULL DEFAULT "-");';
    mydb.transaction( 
        function (transaction) { 
			transaction.executeSql(sqlstr, [], dataHandler, ondbError); 
        } 
    ); 
} 
//handle db error
function ondbError(transaction, error) { 
    // Error is a human-readable string. 
    alert('Oops.  Error was '+error.message+' (Code '+error.code+')'); 
	
    // Handle errors here 
    var we_think_this_error_is_fatal = true; 
    if (we_think_this_error_is_fatal) {
		return true;
	} else {
    	return false;
	}
} 
//handle other db transaction result
function dataHandler(transaction, results) {}


function testLoc() {
	map_canvas = document.getElementById("map1");
	getLoc();
}

//get current geo-location
function getLoc() {
	navigator.geolocation.getCurrentPosition(showMap, onLocError);
}
//handle geo-location error
function onLocError(e) {
	alert("Sorry, the app can't get your location now.");
	
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map1"));
		map.setCenter(new GLatLng(0,0),0);
		map.disableScrollWheelZoom();
		map.disableDragging()
		map.setMapType(G_PHYSICAL_MAP);
	}
}

function showMap(position) {
	cur_lat = position.coords.latitude; 
	cur_lng = position.coords.longitude;
	
	if (GBrowserIsCompatible()) {
		map = new GMap2(map_canvas);
		map.setCenter(new GLatLng(cur_lat,cur_lng),13);
		map.disableScrollWheelZoom();
		map.disableDragging()
		map.setMapType(G_NORMAL_MAP);

		var control = new GSmallZoomControl();
		map.addControl(control);
		
		var point = new GLatLng(cur_lat,cur_lng);
		var marker = new GMarker(point,markerOptions);
		map.addOverlay(marker);
		
		map.setCenter(point,13);
	}
}

function gotoAddLog() {	
	page1.style.visibility = "hidden";
	page2.style.visibility = "visible";
	map_canvas = document.getElementById("map2");
	getLoc();
}

function gotoViewLog() {
	page1.style.visibility = "hidden";
	page3.style.visibility = "visible";
	onSearchLog("");
}

function gotoTools() {
	page1.style.visibility = "hidden";
	page4.style.visibility = "visible";
}

function gobackHome(obj) {
	page1.style.visibility = "visible";
	obj.style.visibility = "hidden";
}

function gobackSearch() {
	page3.style.visibility = "visible";
	page5.style.visibility = "hidden";
}

//when add a new log
function onAddLog() {
	var loc_name = document.getElementById('loc_name').value;
	var loc_mate = document.getElementById('loc_mate').value;
	var loc_content = document.getElementById('loc_content').value;
	
	if (loc_name == "") {
		alert("You need to input the name of the location.");
		return;
	}
	
	var d = new Date();
	var log_time = String(d.getFullYear())+"/"+String(d.getMonth()+1)+"/"+String(d.getDate());
	if (isSupport) {
		var sqlstr = 'INSERT INTO log (loc_lat,loc_lng,loc_name,mate,content,time) VALUES ("'+cur_lat+'","'+cur_lng+'","'+loc_name+'","'+loc_mate+'","'+loc_content+'", "'+log_time+'");';
		mydb.transaction( 
        	function (transaction) {
				transaction.executeSql(sqlstr, [], dataHandler, ondbError); 
			}
		);
		document.getElementById('loc_name').value = "";
		document.getElementById('loc_mate').value = "";
		document.getElementById('loc_content').value = "";
		alert("New log added.");
		gobackHome(page2);
	}
}

//when search the log db
function onSearchLog(q) {
	if (isSupport) {
		var sqlstr = '';
		if (q == "") {
			sqlstr = 'SELECT * FROM log;';
		} else {
			sqlstr = 'SELECT * FROM log WHERE loc_name LIKE "%'+q+'%" ORDER BY "id" DESC;';
		}
		mydb.transaction( 
			function (transaction) { 
				transaction.executeSql(sqlstr,[], onSearchResult, ondbError); 
			} 
		); 
	} else {
		return;	
	}
}
//handle sql SELECT result, use the result to fill the sqlResult Array 
function onSearchResult(transaction, results) {
	if (results.rows.length == 0) {
		document.getElementById('loglist_frame').innerHTML = "<div style='font-family: Arial Rounded MT Bold; font-size: 14px;'>No log record was found.</div>";
		document.getElementById('loglist_control').innerHTML = "";
		document.getElementById('sql_info').innerHTML = "(0 log record)";
		return;
	}
	
	sqlResult = new Array();
	for (var i = 0; i < results.rows.length; i++) { 
        sqlResult[i] = results.rows.item(i);   
    } 
	cur_page = 1;
	showLogList(cur_page);
}

function showLogList(sec) {
	var totalNum = sqlResult.length; //all result numbers
	var showNum = 6; //the number of results that can be show at once
	var sectionNum = 0;
	if (totalNum%showNum != 0) {
		sectionNum = Math.ceil(totalNum/showNum);
	} else {
		sectionNum = totalNum/showNum;
	}
	
	var sqlResultSec = new Array();
	if (sec == sectionNum) {
		if (totalNum%showNum != 0) {
			for (var i = 0; i < totalNum%showNum; i++) {
				sqlResultSec[i] = sqlResult[i+(sec-1)*showNum];	
			}
		} else {
			for (var i = 0; i < showNum; i++) {
				sqlResultSec[i] = sqlResult[i+(sec-1)*showNum];	
			}
		}
	} else {
		for (var i = 0; i < showNum; i++) {
			sqlResultSec[i] = sqlResult[i+(sec-1)*showNum];	
		}
	}
	
	document.getElementById('sql_info').innerHTML = "("+totalNum+" log records)";
	//display controls
	var lsCtrl = document.getElementById('loglist_control');
	var tmpstr = "";
	if (cur_page > 1) {
		tmpstr += "<a onclick='cur_page--; showLogList("+String(cur_page-1)+")'>Prev</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
	} else {
		tmpstr += "<a onclick='cur_page = 1; showLogList(1)'>Prev</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
	}
	
	tmpstr += cur_page+"/"+sectionNum+"&nbsp;&nbsp;&nbsp;&nbsp;";

	if (cur_page < sectionNum) {
		tmpstr += "<a onclick='cur_page++; showLogList("+String(cur_page+1)+")'>Next</a>";
	} else {
		tmpstr += "<a onclick='cur_page = sectionNum; showLogList("+sectionNum+")'>Next</a>";
	}
	lsCtrl.innerHTML = tmpstr;
	//display list
	var lsObj = document.getElementById('loglist_frame');
	var func = "showLogContent";
	createList(sqlResultSec, lsObj, func);
}

//create a new list for search result
function createList(dataSrc, lsObj, func){
	//remove all items from the list
	lsObj.innerHTML = "";

	//add new items
	var itemNum = dataSrc.length;
	for (i = 0; i < 6; i++){
		var lsitem = document.createElement("div");
		if (i == 0){
			lsitem.setAttribute("class", "list-item-top");
		}else if (i == 5){
			lsitem.setAttribute("class", "list-item-bottom");
		}else{
			lsitem.setAttribute("class", "list-item-other");
		}
		
		if (i < itemNum) {
			lsitem.setAttribute("onclick", func+"('"+dataSrc[i]['id']+"')");
			lsitem.innerHTML = "<span class='list_location'>"+dataSrc[i]['loc_name']+"</span> <span class='list_time'>("+dataSrc[i]['time']+")</span>";
			//console.info(dataSrc[i]['loc_name']+"; "+dataSrc[i]['id']); 
		}
		
		lsObj.appendChild(lsitem);
	}
}
//show one log result
function showLogContent(id) {
	if (isSupport) {
		var sqlstr = 'SELECT * FROM log WHERE id = '+id+';';
		
		mydb.transaction( 
			function (transaction) { 
				transaction.executeSql(sqlstr,[], onLogResult, ondbError); 
			} 
		); 
	} else {
		return;	
	}
}
//display the result
function onLogResult(transaction, results) {
	//console.info(results.rows.item(0)['loc_name']+": "+results.rows.item(0)['content']);
	var log_id = results.rows.item(0)['id'];
	var loc_lat = results.rows.item(0)['loc_lat'];
	var loc_lng = results.rows.item(0)['loc_lng'];
	var loc_name = results.rows.item(0)['loc_name'];
	var mate = results.rows.item(0)['mate'];
	var content = results.rows.item(0)['content'];
	var time = results.rows.item(0)['time'];
	
	document.getElementById('log_title').innerHTML = loc_name;
	if (mate != "") {
		document.getElementById('log_subtitle').innerHTML = time+", with "+mate;
	} else {
		document.getElementById('log_subtitle').innerHTML = time+", alone";
	}
	document.getElementById('log_content').innerHTML = content;
	document.getElementById('log_id').value = log_id;
	document.getElementById('log_location').value = String(loc_lat)+",+"+String(loc_lng);
	
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("log_map"));
		map.setCenter(new GLatLng(loc_lat,loc_lng),13);
		map.disableScrollWheelZoom();
		map.disableDragging()
		map.setMapType(G_NORMAL_MAP);
		
		var control = new GSmallZoomControl();
		map.addControl(control);
		
		var point = new GLatLng(loc_lat,loc_lng);
		var marker = new GMarker(point,markerOptions);
		map.addOverlay(marker);
		
		map.setCenter(point,13);
	}
	
	page3.style.visibility = "hidden";
	page5.style.visibility = "visible";
}

//delete one record
function onDeleteLog() {
	var r = confirm("Do you want to delete this record?");
	if (!r) {
		return;	
	}
	
	var log_id = document.getElementById('log_id').value;
	
	if (isSupport) {
		var sqlstr = 'DELETE FROM log WHERE id = '+log_id+';';
		
		mydb.transaction( 
			function (transaction) { 
				transaction.executeSql(sqlstr,[], dataHandler, ondbError); 
			} 
		); 
		page5.style.visibility = "hidden";
		page1.style.visibility = "visible";

	} else {
		return;	
	}
}

//modify one record
function onEditSave(label) {	
	if (label == "Edit") {
		var content = document.getElementById('log_content').innerHTML;
		var newStr = "<textarea class='edit_area' id='log_edit'>"+content+"</textarea>";
		document.getElementById('log_content').innerHTML = newStr;
		document.getElementById('btn_edit').value = "Save";
	} else {
		var log_id = document.getElementById('log_id').value;
		var new_content = document.getElementById('log_edit').value;
		if (isSupport) {
			var sqlstr = 'UPDATE log SET content = "'+new_content+'" WHERE id = '+log_id+';';
			mydb.transaction( 
				function (transaction) { 
					transaction.executeSql(sqlstr,[], dataHandler, ondbError); 
				} 
			); 
			document.getElementById('log_content').innerHTML = new_content;
			document.getElementById('btn_edit').value = "Edit";
		} else {
			return;	
		}
	}
	
}

//search log from tool page
function onSearchByStr() {
	var q = document.getElementById('search-txt').value;
	document.getElementById('search-txt').value = "";
	page4.style.visibility = "hidden";
	page3.style.visibility = "visible";
	onSearchLog(q);
}

//reset db
function ondbClear() {
	var r = confirm("Do you want to remove all travel logs? This operation is irreversible.");
	if (!r) {
		return;	
	}
	
	if (isSupport) {
		var sqlstr = 'DROP TABLE log;';
		
		mydb.transaction( 
			function (transaction) { 
				transaction.executeSql(sqlstr,[], dataHandler, ondbError); 
			} 
		); 
		alert("All old logs has been removed and the database is reset.");
		createTable();
		page4.style.visibility = "hidden";
		page1.style.visibility = "visible";

	} else {
		return;	
	}
	
}

//send one log by email
function sendLog() {
	var line1 = "<div style='font-family:Arial Rounded MT Bold; font-size:16px;'>Travel to <span style='font-size:18px'>"+document.getElementById('log_title').innerHTML+"</span></div>";
	var line2 = "<div style='font-family:Arial Rounded MT Bold; font-size:8px; color:#666666;'>"+document.getElementById('log_subtitle').innerHTML+".</div>";
	var line3 = "<div style='font-family:Arial; font-size:8px;'><a href='http://www.google.com/search?q="+document.getElementById('log_location').value+"'>Get the location</a></div>";
	var line4 = "<div>------------------------</div><div style='font-family:Arial Rounded MT Bold; font-size:14px;'>"+document.getElementById('log_content').innerHTML+"</div>";
	
	var tmp="mailto:?subject="+encodeURI("My travel log");
	tmp=tmp+"&body="+encodeURI(line1+line2+line3+line4);	
	window.location.href=tmp;
}

//export all logs
function exportLog() {
	if (isSupport) {
		var sqlstr = 'SELECT * FROM log;';
		mydb.transaction( 
			function (transaction) { 
				transaction.executeSql(sqlstr,[], onExportResult, ondbError); 
			} 
		); 
	} else {
		return;	
	}
}

function onExportResult(transaction, results) {
	if (results.rows.length == 0) {
		alert("No record in the database so far, please try to export your travel logs later.");
		return;
	}
	
	var records;
	var tmpstr = "";
	var line1, line2, line3, line4;
	for (var i = 0; i < results.rows.length; i++) { 
        records = results.rows.item(i);  
		line1 = "<div style='font-family:Arial Rounded MT Bold; font-size:16px;'>"+String(i+1)+". Travel to <span style='font-size:18px'>"+records['loc_name']+"</span></div>";
		if (records['mate'] != "") {
			line2 = "<div style='font-family:Arial Rounded MT Bold; font-size:8px;'>"+records['time']+", with "+records['mate']+".</div>";
		} else {
			line2 = "<div style='font-family:Arial Rounded MT Bold; font-size:8px;'>"+records['time']+", alone.</div>";
		}
		line3 = "<div style='font-family:Arial; font-size:8px;'><a href='http://www.google.com/search?q="+String(records['loc_lat'])+",+"+String(records['loc_lng'])+"'>Get the location</a></div><div>------------------------</div>";
		line4 = "<div style='font-family:Arial Rounded MT Bold; font-size:14px;'>"+records['content']+"</div><p>========================</p>";
		tmpstr = tmpstr+line1+line2+line3+line4;
    } 
	tmpstr = "<div style='font-family:Arial Rounded MT Bold; font-size:18px;'>All my travel logs</div><p>========================</p>"+tmpstr;
	
	var tmp="mailto:?subject="+encodeURI("All my travel logs");
	tmp=tmp+"&body="+encodeURI(tmpstr);	
	window.location.href=tmp;
}