assets/www/index.html - photark-mobile - Git at Google

 <!DOCTYPE HTML>
 <html>
 	<head>
 		<title>Photark Mobile</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link href="css/jquery.mobile-1.1.0.min.css" rel="stylesheet"
 		type="text/css" />
 		<link href="css/mobiscroll-2.0.full.min.css" rel="stylesheet"
 		type="text/css" />
 		<link href="css/photoswipe.css" rel="stylesheet"
 		type="text/css" />
 		<link href="css/jquery.mobile.simpledialog.css" rel="stylesheet"
 		type="text/css" />
 		<link href="css/custom.css" rel="stylesheet"
 		type="text/css" />
 		<style>
 			.more
 			{
 				text-align:right;
 			}
 		</style>
 		<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
 		<script type="text/javascript" src="scripts/jquery.mobile-1.1.0.min.js"></script>
 		<script type="text/javascript" src="scripts/mobiscroll-2.0.full.min.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/cordova-1.8.0.js" ></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/klass.min.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/code.photoswipe-3.0.5.min.js"></script>
 		<!--For Facebook Implementation Start-->
 		<script type="text/javascript" src="scripts/cdv-plugin-fb-connect.js"></script><!--Facebook Connect Plugin-->
 		<script type="text/javascript" src="scripts/facebook_js_sdk.js"></script><!--Facebook JS SDK-->
 		<script type="text/javascript" src="scripts/facebook.js"></script><!--Facebook Implementation-->
 		<!--For Facebook Implementation End-->
 		<script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile.simpledialog2.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/contacts.js" ></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/utils.js" ></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/tagging.js" ></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/dataAccess.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/search.js"></script>
 		<!--For Flickr Implementation Start-->
 		<script type="text/javascript" charset="utf-8" src="scripts/childbrowser.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/jquery.md5.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/sha1.js"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/flickr.js"></script>
 		<!--For Flickr Implementation End-->
 		<!--For Picasa Implementation Start-->
 		<script type="text/javascript" charset="utf-8" src="scripts/picasa.js"></script>
 		<!--For Picasa Implementation End-->
 		<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/geoLocation.js" ></script>
 		<script type="text/javascript" charset="utf-8" src="scripts/jquery.ui.map.js"></script>
 		<!-- <script type="text/javascript" charset="utf-8" src="scripts/jquery.ui.map.services.js"></script> -->
 		<script type="text/javascript" charset="utf-8" src="scripts/MapView.js"></script>
 		<script type="text/javascript">
 			var pictureSource;
 			// picture source
 			var destinationType;
 			// sets the format of returned value

 			var windowWidth;
 			var windowHeight;

 			var tagObjects;
 			var tagObjectsSaved;
 			// Wait for device
 			document.addEventListener("deviceready", onDeviceReady, false);

 			function onDeviceReady() {

 				checkNetwork();

 				pictureSource = navigator.camera.PictureSourceType;
 				destinationType = navigator.camera.DestinationType;
 				getContacts();
 				$('#ContactsPage li a').live('click', function() {
 					var name = $(this).text();
 					onContactsClick(name);
 				});
 				getLocation();
 				openDB();

 				//Screen orientation changed
 				$(window).bind( 'orientationchange', function(e){
 					if ($.event.special.orientationchange.orientation() == "portrait") {
 						adjustScreenLayout();
 					} else {
 						adjustScreenLayout();
 					}
 				});
 				adjustScreenLayout();

 				//To handle menu button clicks
 				document.addEventListener("menubutton", onMenuClick, false);

 				//Auto complete feature of location
 				var options = {
   					types: ['(cities)'
 					]
 				};

 				if(google) {
 					var autocomplete = new google.maps.places.Autocomplete($("#editLocation")[0], options);
 					google.maps.event.addListener(autocomplete, 'place_changed', function() {
 						var place = autocomplete.getPlace();
 						//console.log(place.address_components);
 					});
 				} else {

 				}
 			}

 			//Document ready function
 			$(function() {
 				// Handler for Date Picker

 				$('#editDate').scroller({
 					preset : 'date',
 					theme : 'default',
 					display : 'modal',
 					mode : 'scroller',
 					dateOrder : 'yymmdd',
 					dateFormat : "yy-mm-dd"
 				});

 				//Handler for time picker
 				$('#editTime').scroller({
 					preset : 'time',
 					theme : 'default',
 					display : 'modal',
 					mode : 'scroller'
 				});

 				$('#searchStartDate').scroller({
 					preset : 'date',
 					theme : 'default',
 					display : 'modal',
 					mode : 'scroller',
 					dateOrder : 'yymmdd',
 					dateFormat : "yy-mm-dd"
 				});

 				$('#searchEndDate').scroller({
 					preset : 'date',
 					theme : 'default',
 					display : 'modal',
 					mode : 'scroller',
 					dateOrder : 'yymmdd',
 					dateFormat : "yy-mm-dd"
 				});

 				 $("#tagPicture").click(function(e) {
 				 	 e.preventDefault();
 				 	 var x = e.pageX - this.offsetLeft;
 				     var y = e.pageY - this.offsetTop;
 				 	 showDialog(e,x,y) ;
 			    })

 			    $("#tagPicture").css({
 					    'position': 'relative'
 			    });

 			});

 			function onPhotoDataSuccess(imageData) {
 				var largeImage = document.getElementById('largeImage');
 				largeImage.style.display = 'block';
 				largeImage.src = "data:image/jpeg;base64," + imageData;
 			}

 			function onPhotoURISuccess(imageURI) {
 				$("#metadata").html("");
 				var largeImage = document.getElementById('largeImage');

 				largeImage.style.display = 'block';
 				largeImage.src = imageURI;

 				$('#imageInfoButton').show();
 				$('#photoTagButton').show();
 				$('#homeButton').show();
 				$('#deleteButton').show();
 				$('#editDataButton').show();

 				$('#captureButton').hide();
 				$('#galleryButton').hide();
 				$('#webAlbumButton').hide();
 				$('#searchButton').hide();
 				$('#toolbar_message').hide();
 				$('#helpButton').hide();


 				$('#toolbar').listview("create");
 				uri= imageURI;
 				window.resolveLocalFileSystemURI(imageURI, onFileEntryComplete, isFail);

 				displayTagImage(imageURI) ;

 				tagObjects=new Array();

 			    $('#largeImage').css({
 			          // Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
 			          'max-width' : windowWidth , 'height' : 'auto'
 			    });

 			    tagObjectsSaved=new Array();
 				viewData(imageURI);
 				$('#largeImage').click(function() { fullScreen(largeImage.src); });
 			}

 			function photoCaptureSuccess (uri) {
 			  onPhotoURISuccess(uri);
 			  clearMetadata();
 			  date=getCurrentDate();
 			  time=getCurrentTime();
 			  updateDB();
 			  $.mobile.changePage("#ConfirmLocation");
 			}

 			function onFileEntryComplete(fileEntry) {
 				fileEntry.file(successFile, isFail);
 				fileEntry.getMetadata(successMetadata, isFail);
 			}

 			function successMetadata(metadata) {
 				$("#metadata").append("<p> LastModified:" + metadata.modificationTime + "</p> ");

 			}

 			function successFile(file) {
 				$("#metadata").append("<p> Size:" + file.size + "bytes </p> <p> Type:" + file.type + " </p>");

 			}

 			function isFail() {
 				alert("Error Occured");
 			}

 			function capturePhoto() {
 				// Take picture using device camera and retrieve image
 				navigator.camera.getPicture(photoCaptureSuccess, onFail, {
 					destinationType : navigator.camera.DestinationType.FILE_URI,
 					quality : 50
 				});

 			}

 			function getPhoto(source) {
 				// Retrieve image file location from specified source
 				navigator.camera.getPicture(onPhotoURISuccess, onFail, {
 					quality : 50,
 					destinationType : destinationType.FILE_URI,
 					sourceType : source
 				});
 			}

 			function onFail(message) {
 				alert('Failed because: ' + message);
 			}

 			function editDateOnClick(parent) {
 				parent.scroller('show');
 			}

 			function editTimeOnClick(parent) {
 				$('#editTime').scroller('show');
 			}

 			function save() {
 				nickname = $("#nickName").val();
 				date = $("#editDate").val();
 				time = $("#editTime").val();
 				loc= $("#editLocation").val();
 				people=$("#editPeople").val().split(",");
 				description=$("#editDiscription").val();
 				if(loc!=""){
 					adressToCoordinate(loc);
 				}
 				updateDB();
 			}

 			//This method load existing metadata to edit metadata page on page load
 			$('#EditMetadata').live('pageshow', function () {
 				$("#nickName").val(getNickname());
 				$("#editDate").val(getDate());
 				$("#editTime").val(getTime());
 				$("#editLocation").val(getLocation());
 				$("#editDiscription").val(getDescription());
 				var people=getPeople();
 				var s="";
 				for (var i=0; i < people.length; i++) {
 				  s=s+people[i]+',';
 				};
 				$("#editPeople").val(s);
 			});

 			$('#photoTag').live('pageshow', function () {
 				markTags(tagObjectsSaved);
 			});

 			function clearMetadata(){
 			    $("#nickName").val("Not defined");
 				$("#editDate").val("");
 				$("#editTime").val("");
 				$("#editLocation").val("");
 				$("#editDiscription").val("");
 				$("#editPeople").val("");
 			}

         	function onMenuClick(){
         		$.mobile.changePage("#optionMenu");
         	}

 		</script>
 	</head>
 	<body>
 		<!-- Page Start-->
 		<div id="main" data-role="page" data-theme="a">
 			<!-- Page Header Start -->
 			<div data-role="header" data-position="fixed">
 				<h1>PhotArc Mobile</h1>
 			</div>
 			<!-- Page Header End -->
 			<!-- Page Body Start -->
 			<div id="a" data-role="content" align="justify">

 					<ul id="mainMenu" data-role="listview" data-theme="a" data-inset="false">
 						<img id="largeImage"
 						src="images/home.png"  />
 						<li data-icon="arrow-r" id="captureButton">
 							<a href="#" onclick="capturePhoto()">Capture Photo</a>
 						</li>
 						<li data-icon="arrow-r" id="galleryButton">
 							<a href="#" onclick="getPhoto(pictureSource.PHOTOLIBRARY)">From Gallery</a>
 						</li>
 						<li data-icon="arrow-r" id="webAlbumButton">
 							<a href="#webAlbum">Web Album</a>
 						</li>
 						<li data-icon="arrow-r" id="searchButton">
 							<a href="#search_photoes">Search</a>
 						</li>
 						<li id="imageInfoButton" data-icon="arrow-r" style="display: none">
 							<a href="#imageInfo" data-rel="dialog" >Image Info</a>
 						</li>
 						<li id="photoTagButton" data-icon="arrow-r" style="display: none">
 							<a href="#photoTag">View tags</a>
 						</li>
 						<li id="editDataButton" data-icon="arrow-r" style="display: none">
 							<a href="#EditMetadata">Edit image data</a>
 						</li>
 						<li id="deleteButton" data-icon="arrow-r" style="display: none" data-rel="dialog">
 							<a href="#ConfirmDelete">Delete Photo</a>
 						</li>
 					</ul>

 				<!-- This is not visible
 				Used to store the uri for photoswipe -->
 				<div id="slideshow" style="display: none;">
 					<ul id="Gallery">
 						<!-- To be added dynamically	 -->
 					</ul>
 				</div>

 			</div>
 			<!-- Page Body End -->
 			<!-- Page Footer Start -->
 			<div data-role="footer" data-position="fixed">
 				<div id="toolbar_icons" style="text-align: center" >
 					<a href="#" id="homeButton" data-role="button" data-icon="home" style="display: none" onclick="onHomeButtonClicked()">Home</a>
 					<a href="#" id="helpButton" data-role="button" data-icon="info" >Help</a>
 				</div>

 			</div>
 			<!-- Page Footer End -->
 		</div>

 		<!-- Edit metadata page -->
 		<div id="EditMetadata" data-role="page">
 			<div data-role="header" data-position="fixed">
 				<h1>Edit Metadata</h1>
 			</div>

 			<!-- Form Content -->
 			<div data-role="content">

 				<div data-role="fieldcontain">
 					<label for="name"> Photo nick name: </label>
 					<input type="text"
 					id="nickName" value="" />
 				</div>
 				<div data-role="fieldcontain">
 					<label for="name"> Date: </label>
 					<input type="text" name="name"
 					id="editDate" value="" onclick='editDateOnClick($("#editDate"))' />
 				</div>
 				<div data-role="fieldcontain">
 					<label for="name"> Time: </label>
 					<input type="text" name="name"
 					id="editTime" value="" onclick='editTimeOnClick($("#editTime"))' />
 				</div>
 				<div data-role="fieldcontain">
 					<label for="textarea"> Location </label>
 					<input type="text" name="searchbox" id="editLocation" value="" />
 				</div>
 				<div data-role="fieldcontain">
 					<label for="textarea"> People: </label>
 					<textarea cols="40" rows="8" name="textarea" id="editPeople"></textarea>
 					<a href="#ContactsPage" data-role="button" data-theme="a"  data-mini="true">Browse</a>
 				</div>

 				<div data-role="fieldcontain">
 					<label for="textarea"> Discription </label>
 					<textarea cols="40" rows="8" name="textarea" id="editDiscription"></textarea>
 				</div>
 			</div>
 			<div data-role="footer" data-position="fixed" style="text-align: center">
 				<a href="index.html" data-icon="check" onclick="save()">Save</a>
 				<a href="index.html" data-icon="delete">Cancel</a>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- Contacts List Page-->
 		<div id="ContactsPage" data-role="page">
 			<div data-role="header">
 				<h1>Contacts</h1>
 			</div>
 			<div data-role="content">

 				<ul id="allContacts" data-role="listview" data-filter="true" data-inset="true">

 				</ul>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- Confirm Delete Dialog-->
 		<div id="ConfirmDelete" data-role="page">
 			<div data-role="header">
 				<h1>Confirm Delete</h1>
 			</div>
 			<div data-role="content">

 				<p>
 					Are you sure you want to delete this photo?
 				</p>
 				<a href="index.html"
 				data-role="button" onclick="deleteFile()"
 				data-theme="b">Delete</a>
 				<a href="index.html"
 				data-role="button"
 				data-theme="b">Cancel</a>
 			</div>
 		</div>
 		<!-- Page End -->
 		<!-- User's Web Album -->
 		<div id="webAlbum" data-role="page">
 			<!-- Page Header Start -->
 			<div data-role="header" data-position="fixed">
 				<h1>PhotArc Mobile</h1>
 			</div>
 			<!-- Page Header End -->
 			<!-- Content Start-->
 				<!--Facebook Start-->
 				<div data-role="fieldcontain" class="switch">
 					<fieldset data-role="controlgroup">
 						<label for="facebookSwitch">Facebook</label>
 						<select name="facebookSwitch" id="facebookSwitch" data-theme="a" data-role="slider" data-mini="true">
 							<option value="off" selected="true">
 									Off
 							</option>
 							<option value="on">
 									On
 							</option>
 						</select>
 					</fieldset>
 				</div>
 				<div id="facebook"></div>
 				<!--Facebook End-->
 				<hr />
 				<!--Picasa Begin-->
 				<div data-role="fieldcontain" class="switch">
 					<fieldset data-role="controlgroup">
 						<label for="picasaSwitch">Picasa</label>
 						<select name="picasaSwitch" id="picasaSwitch" data-theme="a" data-role="slider" data-mini="true">
 							<option value="off" selected="true">
 									Off
 							</option>
 							<option value="on">
 									On
 							</option>
 						</select>
 					</fieldset>
 				</div>
 				<div id="picasa"></div>
 				<hr />
 				<!--Picasa End-->
 				<!--Flickr Begin-->
 				<div data-role="fieldcontain" class="switch">
 					<fieldset data-role="controlgroup">
 						<label for="flickrSwitch">Flickr</label>
 						<select name="flickrSwitch" id="flickrSwitch" data-theme="a" data-role="slider" data-mini="true">
 							<option value="off" selected="true">
 								Off
 							</option>
 							<option value="on">
 								On
 							</option>
 						</select>
 					</fieldset>
 				</div>
 				<div id="flickr"></div>
 				<!--Flickr End-->
 			<!-- Content End -->
 			<!-- Page Footer Start -->
 			<div data-role="footer" data-position="fixed" >
 				<div id="toolbar_message" style="text-align: center">
 					<a href="#" data-role="button" data-icon="search">Search</a>
 				</div>
 				<div id="toolbar_icons" style="display: none;text-align: center" >
 					<a href="#EditMetadata" data-role="button" data-icon="plus" data-transition="flip">Edit Metadata</a>
 					<a href="#" data-role="button" data-icon="search">Search</a>
 					<a href="#ConfirmDelete" data-role="button" data-icon="delete" data-rel="dialog" data-transition="pop">Delete</a>
 				</div>
 			</div>
 			<!-- Page Footer End -->
 		</div>

 	<!-- Search page -->
 		<div id="search_photoes" data-role="page">
 			<div data-role="header" data-position="fixed">
 				<h1>Search Photos</h1>
 			</div>
 			<div data-role="content">
 				<div data-role="fieldcontain">
 					<label for="search"> Enter name: </label>
 					<input type="text" name="search" id="searchName" value="" />
 				</div>

 				<p>
 					Date:
 				</p>
 				<div data-role="fieldcontain">
 					<label for="search">From:</label>
 					<input type="text" name="search" id="searchStartDate" value="" onclick='editDateOnClick($("#searchStartDate"))'/>
 					<label for="search">To:</label>
 					<input type="text" name="search" id="searchEndDate" value="" onclick='editDateOnClick($("#searchEndDate"))'/>
 				</div>

 				<div data-role="fieldcontain">
 					<label for="search"> Enter location: </label>
 					<input type="text" name="search" id="searchLocation" value="" />
 				</div>

 				<div data-role="fieldcontain">
 					<label for="textarea"> People: </label>
 					<textarea cols="40" rows="8" name="textarea" id="searchPeople"></textarea>
 					<a href="#ContactsPage" data-role="button" data-theme="a"  data-mini="true">Browse</a>
 				</div>

 			</div>
 			<div data-role="footer" data-position="fixed" style="text-align: center">
 				<a href="#"
 				data-role="button" data-mini="true" data-icon="search" onclick='doSearch()'>Search</a>
 				<a href="#"
 				data-role="button" data-rel="dialog" data-transition="pop" data-icon="grid" onclick="getPhoto(pictureSource.PHOTOLIBRARY)">Shaw all</a>
 				<a href="index.html"
 				data-role="button" data-mini="true"
 				data-icon="back">Cancel</a>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- Search Results page-->
 		<div id="searchResults" data-role="page">
 			<div data-role="header">
 				<h1>Results</h1>
 			</div>
 			<div data-role="content">

 				<div class="ui-grid-a" id="resultGallery" style="padding=5px !important">
 					<!-- To be added dinamically -->
 				</div>

 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- Image Info page-->
 		<div id="imageInfo" data-role="page">
 			<div data-role="header">
 				<h1>Image Info</h1>
 			</div>
 			<div data-role="content">
 				<div id="metadata">
 					<p>Capture or open a photo to view data.</p>
 				</div>
 				<div id="infoControlls">
 					<a href="#mapView"
 					data-role="button" data-mini="true" data-icon="star" onclick=''>Show in Map</a>
 				</div>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- Confirm Location Dialog-->
 		<div id="ConfirmLocation" data-role="dialog">
 			<div data-role="header">
 				<h1>Add location.</h1>
 			</div>
 			<div data-role="content">
 				<p>
 					Do you want to add current location to this photo?
 				</p>
 				<a href="#"
 				data-role="button" onclick="addLocation()"
 				data-theme="b">Yes</a>
 				<a href="index.html"
 				data-role="button"
 				data-theme="b">No</a>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- Map View-->
 		<div id="mapView" data-role="page">
 			<div data-role="header">
 				<a href="index.html" data-icon="delete">Back</a>
 				<h1>Map View</h1>
 			</div>
 			<div data-role="content">
 				<div class="item rounded dark">
 					<div id="map_canvas" align="center"></div>
 				</div>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- options menu page-->
 		<div id="optionMenu" data-role="dialog">
 			<div data-role="header">
 				<h1>Menu</h1>
 			</div>
 			<div data-role="content">
 				<div id="options">
 					<a href="#"
 					data-role="button" data-mini="false" data-icon="grid" onclick='viewAllImages()'>View all photos</a>
 					<a href="#mapView"
 					data-role="button" data-mini="false" data-icon="grid" onclick=''>View all in map</a>
 					<a href="#help"
 					data-role="button" data-mini="false" data-icon="info" onclick=''>Help</a>
 					<a href="#"
 					data-role="button" data-mini="false" data-icon="back" onclick='navigator.app.exitApp()'>Exit</a>
 				</div>
 			</div>
 		</div>
 		<!-- Page End -->

 		<!-- photo tag page-->
 		<div id="photoTag" data-role="page" data-add-back-btn="true"  data-theme="a">
 			<div data-role="header" >
 				<h1>Tag Photo</h1>
 			</div>
 			<div data-role="content">
 				<div id="tagPicture">
 					<img id="tagImage"/>
 				</div>
 				<a href="#" id="enableTaggingButton"
 				data-role="button" data-mini="false" data-icon="grid" onclick='enableTagging()'>Enable Tagging</a>
 				<a href="#" id="saveTagsButton"
 				data-role="button" data-mini="false" data-icon="grid" style="display: none" onclick='saveTags()'>Save tags</a>
 				<a href="#" id="clearTagsButton"
 				data-role="button" data-mini="false" data-icon="delete" style="display: none" onclick='clearTags()'>Clear tags</a>
 				<a href="#" id="cancelTaggingButton"
 				data-role="button" data-mini="false" data-icon="grid" style="display: none" onclick='enableTagging()'>Cancel</a>

 			</div>
 		</div>
 		<!-- Page End -->


 	</body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Photark Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/jquery.mobile-1.1.0.min.css" rel="stylesheet"
	type="text/css" />
	<link href="css/mobiscroll-2.0.full.min.css" rel="stylesheet"
	type="text/css" />
	<link href="css/photoswipe.css" rel="stylesheet"
	type="text/css" />
	<link href="css/jquery.mobile.simpledialog.css" rel="stylesheet"
	type="text/css" />
	<link href="css/custom.css" rel="stylesheet"
	type="text/css" />
	<style>
	.more
	{
	text-align:right;
	}
	</style>
	<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript" src="scripts/mobiscroll-2.0.full.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/cordova-1.8.0.js" ></script>
	<script type="text/javascript" charset="utf-8" src="scripts/klass.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/code.photoswipe-3.0.5.min.js"></script>
	<!--For Facebook Implementation Start-->
	<script type="text/javascript" src="scripts/cdv-plugin-fb-connect.js"></script><!--Facebook Connect Plugin-->
	<script type="text/javascript" src="scripts/facebook_js_sdk.js"></script><!--Facebook JS SDK-->
	<script type="text/javascript" src="scripts/facebook.js"></script><!--Facebook Implementation-->
	<!--For Facebook Implementation End-->
	<script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile.simpledialog2.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/contacts.js" ></script>
	<script type="text/javascript" charset="utf-8" src="scripts/utils.js" ></script>
	<script type="text/javascript" charset="utf-8" src="scripts/tagging.js" ></script>
	<script type="text/javascript" charset="utf-8" src="scripts/dataAccess.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/search.js"></script>
	<!--For Flickr Implementation Start-->
	<script type="text/javascript" charset="utf-8" src="scripts/childbrowser.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/jquery.md5.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/sha1.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/flickr.js"></script>
	<!--For Flickr Implementation End-->
	<!--For Picasa Implementation Start-->
	<script type="text/javascript" charset="utf-8" src="scripts/picasa.js"></script>
	<!--For Picasa Implementation End-->
	<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/geoLocation.js" ></script>
	<script type="text/javascript" charset="utf-8" src="scripts/jquery.ui.map.js"></script>
	<!-- <script type="text/javascript" charset="utf-8" src="scripts/jquery.ui.map.services.js"></script> -->
	<script type="text/javascript" charset="utf-8" src="scripts/MapView.js"></script>
	<script type="text/javascript">
	var pictureSource;
	// picture source
	var destinationType;
	// sets the format of returned value

	var windowWidth;
	var windowHeight;

	var tagObjects;
	var tagObjectsSaved;
	// Wait for device
	document.addEventListener("deviceready", onDeviceReady, false);

	function onDeviceReady() {

	checkNetwork();

	pictureSource = navigator.camera.PictureSourceType;
	destinationType = navigator.camera.DestinationType;
	getContacts();
	$('#ContactsPage li a').live('click', function() {
	var name = $(this).text();
	onContactsClick(name);
	});
	getLocation();
	openDB();

	//Screen orientation changed
	$(window).bind( 'orientationchange', function(e){
	if ($.event.special.orientationchange.orientation() == "portrait") {
	adjustScreenLayout();
	} else {
	adjustScreenLayout();
	}
	});
	adjustScreenLayout();

	//To handle menu button clicks
	document.addEventListener("menubutton", onMenuClick, false);

	//Auto complete feature of location
	var options = {
	types: ['(cities)'
	]
	};

	if(google) {
	var autocomplete = new google.maps.places.Autocomplete($("#editLocation")[0], options);
	google.maps.event.addListener(autocomplete, 'place_changed', function() {
	var place = autocomplete.getPlace();
	//console.log(place.address_components);
	});
	} else {

	}
	}

	//Document ready function
	$(function() {
	// Handler for Date Picker

	$('#editDate').scroller({
	preset : 'date',
	theme : 'default',
	display : 'modal',
	mode : 'scroller',
	dateOrder : 'yymmdd',
	dateFormat : "yy-mm-dd"
	});

	//Handler for time picker
	$('#editTime').scroller({
	preset : 'time',
	theme : 'default',
	display : 'modal',
	mode : 'scroller'
	});

	$('#searchStartDate').scroller({
	preset : 'date',
	theme : 'default',
	display : 'modal',
	mode : 'scroller',
	dateOrder : 'yymmdd',
	dateFormat : "yy-mm-dd"
	});

	$('#searchEndDate').scroller({
	preset : 'date',
	theme : 'default',
	display : 'modal',
	mode : 'scroller',
	dateOrder : 'yymmdd',
	dateFormat : "yy-mm-dd"
	});

	$("#tagPicture").click(function(e) {
	e.preventDefault();
	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;
	showDialog(e,x,y) ;
	})

	$("#tagPicture").css({
	'position': 'relative'
	});

	});

	function onPhotoDataSuccess(imageData) {
	var largeImage = document.getElementById('largeImage');
	largeImage.style.display = 'block';
	largeImage.src = "data:image/jpeg;base64," + imageData;
	}

	function onPhotoURISuccess(imageURI) {
	$("#metadata").html("");
	var largeImage = document.getElementById('largeImage');

	largeImage.style.display = 'block';
	largeImage.src = imageURI;

	$('#imageInfoButton').show();
	$('#photoTagButton').show();
	$('#homeButton').show();
	$('#deleteButton').show();
	$('#editDataButton').show();

	$('#captureButton').hide();
	$('#galleryButton').hide();
	$('#webAlbumButton').hide();
	$('#searchButton').hide();
	$('#toolbar_message').hide();
	$('#helpButton').hide();


	$('#toolbar').listview("create");
	uri= imageURI;
	window.resolveLocalFileSystemURI(imageURI, onFileEntryComplete, isFail);

	displayTagImage(imageURI) ;

	tagObjects=new Array();

	$('#largeImage').css({
	// Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
	'max-width' : windowWidth , 'height' : 'auto'
	});

	tagObjectsSaved=new Array();
	viewData(imageURI);
	$('#largeImage').click(function() { fullScreen(largeImage.src); });
	}

	function photoCaptureSuccess (uri) {
	onPhotoURISuccess(uri);
	clearMetadata();
	date=getCurrentDate();
	time=getCurrentTime();
	updateDB();
	$.mobile.changePage("#ConfirmLocation");
	}

	function onFileEntryComplete(fileEntry) {
	fileEntry.file(successFile, isFail);
	fileEntry.getMetadata(successMetadata, isFail);
	}

	function successMetadata(metadata) {
	$("#metadata").append("<p> LastModified:" + metadata.modificationTime + "</p> ");

	}

	function successFile(file) {
	$("#metadata").append("<p> Size:" + file.size + "bytes </p> <p> Type:" + file.type + " </p>");

	}

	function isFail() {
	alert("Error Occured");
	}

	function capturePhoto() {
	// Take picture using device camera and retrieve image
	navigator.camera.getPicture(photoCaptureSuccess, onFail, {
	destinationType : navigator.camera.DestinationType.FILE_URI,
	quality : 50
	});

	}

	function getPhoto(source) {
	// Retrieve image file location from specified source
	navigator.camera.getPicture(onPhotoURISuccess, onFail, {
	quality : 50,
	destinationType : destinationType.FILE_URI,
	sourceType : source
	});
	}

	function onFail(message) {
	alert('Failed because: ' + message);
	}

	function editDateOnClick(parent) {
	parent.scroller('show');
	}

	function editTimeOnClick(parent) {
	$('#editTime').scroller('show');
	}

	function save() {
	nickname = $("#nickName").val();
	date = $("#editDate").val();
	time = $("#editTime").val();
	loc= $("#editLocation").val();
	people=$("#editPeople").val().split(",");
	description=$("#editDiscription").val();
	if(loc!=""){
	adressToCoordinate(loc);
	}
	updateDB();
	}

	//This method load existing metadata to edit metadata page on page load
	$('#EditMetadata').live('pageshow', function () {
	$("#nickName").val(getNickname());
	$("#editDate").val(getDate());
	$("#editTime").val(getTime());
	$("#editLocation").val(getLocation());
	$("#editDiscription").val(getDescription());
	var people=getPeople();
	var s="";
	for (var i=0; i < people.length; i++) {
	s=s+people[i]+',';
	};
	$("#editPeople").val(s);
	});

	$('#photoTag').live('pageshow', function () {
	markTags(tagObjectsSaved);
	});

	function clearMetadata(){
	$("#nickName").val("Not defined");
	$("#editDate").val("");
	$("#editTime").val("");
	$("#editLocation").val("");
	$("#editDiscription").val("");
	$("#editPeople").val("");
	}

	function onMenuClick(){
	$.mobile.changePage("#optionMenu");
	}

	</script>
	</head>
	<body>
	<!-- Page Start-->
	<div id="main" data-role="page" data-theme="a">
	<!-- Page Header Start -->
	<div data-role="header" data-position="fixed">
	<h1>PhotArc Mobile</h1>
	</div>
	<!-- Page Header End -->
	<!-- Page Body Start -->
	<div id="a" data-role="content" align="justify">

	<ul id="mainMenu" data-role="listview" data-theme="a" data-inset="false">
	<img id="largeImage"
	src="images/home.png" />
	<li data-icon="arrow-r" id="captureButton">
	<a href="#" onclick="capturePhoto()">Capture Photo</a>
	</li>
	<li data-icon="arrow-r" id="galleryButton">
	<a href="#" onclick="getPhoto(pictureSource.PHOTOLIBRARY)">From Gallery</a>
	</li>
	<li data-icon="arrow-r" id="webAlbumButton">
	<a href="#webAlbum">Web Album</a>
	</li>
	<li data-icon="arrow-r" id="searchButton">
	<a href="#search_photoes">Search</a>
	</li>
	<li id="imageInfoButton" data-icon="arrow-r" style="display: none">
	<a href="#imageInfo" data-rel="dialog" >Image Info</a>
	</li>
	<li id="photoTagButton" data-icon="arrow-r" style="display: none">
	<a href="#photoTag">View tags</a>
	</li>
	<li id="editDataButton" data-icon="arrow-r" style="display: none">
	<a href="#EditMetadata">Edit image data</a>
	</li>
	<li id="deleteButton" data-icon="arrow-r" style="display: none" data-rel="dialog">
	<a href="#ConfirmDelete">Delete Photo</a>
	</li>
	</ul>

	<!-- This is not visible
	Used to store the uri for photoswipe -->
	<div id="slideshow" style="display: none;">
	<ul id="Gallery">
	<!-- To be added dynamically -->
	</ul>
	</div>

	</div>
	<!-- Page Body End -->
	<!-- Page Footer Start -->
	<div data-role="footer" data-position="fixed">
	<div id="toolbar_icons" style="text-align: center" >
	<a href="#" id="homeButton" data-role="button" data-icon="home" style="display: none" onclick="onHomeButtonClicked()">Home</a>
	<a href="#" id="helpButton" data-role="button" data-icon="info" >Help</a>
	</div>

	</div>
	<!-- Page Footer End -->
	</div>

	<!-- Edit metadata page -->
	<div id="EditMetadata" data-role="page">
	<div data-role="header" data-position="fixed">
	<h1>Edit Metadata</h1>
	</div>

	<!-- Form Content -->
	<div data-role="content">

	<div data-role="fieldcontain">
	<label for="name"> Photo nick name: </label>
	<input type="text"
	id="nickName" value="" />
	</div>
	<div data-role="fieldcontain">
	<label for="name"> Date: </label>
	<input type="text" name="name"
	id="editDate" value="" onclick='editDateOnClick($("#editDate"))' />
	</div>
	<div data-role="fieldcontain">
	<label for="name"> Time: </label>
	<input type="text" name="name"
	id="editTime" value="" onclick='editTimeOnClick($("#editTime"))' />
	</div>
	<div data-role="fieldcontain">
	<label for="textarea"> Location </label>
	<input type="text" name="searchbox" id="editLocation" value="" />
	</div>
	<div data-role="fieldcontain">
	<label for="textarea"> People: </label>
	<textarea cols="40" rows="8" name="textarea" id="editPeople"></textarea>
	<a href="#ContactsPage" data-role="button" data-theme="a" data-mini="true">Browse</a>
	</div>

	<div data-role="fieldcontain">
	<label for="textarea"> Discription </label>
	<textarea cols="40" rows="8" name="textarea" id="editDiscription"></textarea>
	</div>
	</div>
	<div data-role="footer" data-position="fixed" style="text-align: center">
	<a href="index.html" data-icon="check" onclick="save()">Save</a>
	<a href="index.html" data-icon="delete">Cancel</a>
	</div>
	</div>
	<!-- Page End -->

	<!-- Contacts List Page-->
	<div id="ContactsPage" data-role="page">
	<div data-role="header">
	<h1>Contacts</h1>
	</div>
	<div data-role="content">

	<ul id="allContacts" data-role="listview" data-filter="true" data-inset="true">

	</ul>
	</div>
	</div>
	<!-- Page End -->

	<!-- Confirm Delete Dialog-->
	<div id="ConfirmDelete" data-role="page">
	<div data-role="header">
	<h1>Confirm Delete</h1>
	</div>
	<div data-role="content">

	<p>
	Are you sure you want to delete this photo?
	</p>
	<a href="index.html"
	data-role="button" onclick="deleteFile()"
	data-theme="b">Delete</a>
	<a href="index.html"
	data-role="button"
	data-theme="b">Cancel</a>
	</div>
	</div>
	<!-- Page End -->
	<!-- User's Web Album -->
	<div id="webAlbum" data-role="page">
	<!-- Page Header Start -->
	<div data-role="header" data-position="fixed">
	<h1>PhotArc Mobile</h1>
	</div>
	<!-- Page Header End -->
	<!-- Content Start-->
	<!--Facebook Start-->
	<div data-role="fieldcontain" class="switch">
	<fieldset data-role="controlgroup">
	<label for="facebookSwitch">Facebook</label>
	<select name="facebookSwitch" id="facebookSwitch" data-theme="a" data-role="slider" data-mini="true">
	<option value="off" selected="true">
	Off
	</option>
	<option value="on">
	On
	</option>
	</select>
	</fieldset>
	</div>
	<div id="facebook"></div>
	<!--Facebook End-->
	<hr />
	<!--Picasa Begin-->
	<div data-role="fieldcontain" class="switch">
	<fieldset data-role="controlgroup">
	<label for="picasaSwitch">Picasa</label>
	<select name="picasaSwitch" id="picasaSwitch" data-theme="a" data-role="slider" data-mini="true">
	<option value="off" selected="true">
	Off
	</option>
	<option value="on">
	On
	</option>
	</select>
	</fieldset>
	</div>
	<div id="picasa"></div>
	<hr />
	<!--Picasa End-->
	<!--Flickr Begin-->
	<div data-role="fieldcontain" class="switch">
	<fieldset data-role="controlgroup">
	<label for="flickrSwitch">Flickr</label>
	<select name="flickrSwitch" id="flickrSwitch" data-theme="a" data-role="slider" data-mini="true">
	<option value="off" selected="true">
	Off
	</option>
	<option value="on">
	On
	</option>
	</select>
	</fieldset>
	</div>
	<div id="flickr"></div>
	<!--Flickr End-->
	<!-- Content End -->
	<!-- Page Footer Start -->
	<div data-role="footer" data-position="fixed" >
	<div id="toolbar_message" style="text-align: center">
	<a href="#" data-role="button" data-icon="search">Search</a>
	</div>
	<div id="toolbar_icons" style="display: none;text-align: center" >
	<a href="#EditMetadata" data-role="button" data-icon="plus" data-transition="flip">Edit Metadata</a>
	<a href="#" data-role="button" data-icon="search">Search</a>
	<a href="#ConfirmDelete" data-role="button" data-icon="delete" data-rel="dialog" data-transition="pop">Delete</a>
	</div>
	</div>
	<!-- Page Footer End -->
	</div>

	<!-- Search page -->
	<div id="search_photoes" data-role="page">
	<div data-role="header" data-position="fixed">
	<h1>Search Photos</h1>
	</div>
	<div data-role="content">
	<div data-role="fieldcontain">
	<label for="search"> Enter name: </label>
	<input type="text" name="search" id="searchName" value="" />
	</div>

	<p>
	Date:
	</p>
	<div data-role="fieldcontain">
	<label for="search">From:</label>
	<input type="text" name="search" id="searchStartDate" value="" onclick='editDateOnClick($("#searchStartDate"))'/>
	<label for="search">To:</label>
	<input type="text" name="search" id="searchEndDate" value="" onclick='editDateOnClick($("#searchEndDate"))'/>
	</div>

	<div data-role="fieldcontain">
	<label for="search"> Enter location: </label>
	<input type="text" name="search" id="searchLocation" value="" />
	</div>

	<div data-role="fieldcontain">
	<label for="textarea"> People: </label>
	<textarea cols="40" rows="8" name="textarea" id="searchPeople"></textarea>
	<a href="#ContactsPage" data-role="button" data-theme="a" data-mini="true">Browse</a>
	</div>

	</div>
	<div data-role="footer" data-position="fixed" style="text-align: center">
	<a href="#"
	data-role="button" data-mini="true" data-icon="search" onclick='doSearch()'>Search</a>
	<a href="#"
	data-role="button" data-rel="dialog" data-transition="pop" data-icon="grid" onclick="getPhoto(pictureSource.PHOTOLIBRARY)">Shaw all</a>
	<a href="index.html"
	data-role="button" data-mini="true"
	data-icon="back">Cancel</a>
	</div>
	</div>
	<!-- Page End -->

	<!-- Search Results page-->
	<div id="searchResults" data-role="page">
	<div data-role="header">
	<h1>Results</h1>
	</div>
	<div data-role="content">

	<div class="ui-grid-a" id="resultGallery" style="padding=5px !important">
	<!-- To be added dinamically -->
	</div>

	</div>
	</div>
	<!-- Page End -->

	<!-- Image Info page-->
	<div id="imageInfo" data-role="page">
	<div data-role="header">
	<h1>Image Info</h1>
	</div>
	<div data-role="content">
	<div id="metadata">
	<p>Capture or open a photo to view data.</p>
	</div>
	<div id="infoControlls">
	<a href="#mapView"
	data-role="button" data-mini="true" data-icon="star" onclick=''>Show in Map</a>
	</div>
	</div>
	</div>
	<!-- Page End -->

	<!-- Confirm Location Dialog-->
	<div id="ConfirmLocation" data-role="dialog">
	<div data-role="header">
	<h1>Add location.</h1>
	</div>
	<div data-role="content">
	<p>
	Do you want to add current location to this photo?
	</p>
	<a href="#"
	data-role="button" onclick="addLocation()"
	data-theme="b">Yes</a>
	<a href="index.html"
	data-role="button"
	data-theme="b">No</a>
	</div>
	</div>
	<!-- Page End -->

	<!-- Map View-->
	<div id="mapView" data-role="page">
	<div data-role="header">
	<a href="index.html" data-icon="delete">Back</a>
	<h1>Map View</h1>
	</div>
	<div data-role="content">
	<div class="item rounded dark">
	<div id="map_canvas" align="center"></div>
	</div>
	</div>
	</div>
	<!-- Page End -->

	<!-- options menu page-->
	<div id="optionMenu" data-role="dialog">
	<div data-role="header">
	<h1>Menu</h1>
	</div>
	<div data-role="content">
	<div id="options">
	<a href="#"
	data-role="button" data-mini="false" data-icon="grid" onclick='viewAllImages()'>View all photos</a>
	<a href="#mapView"
	data-role="button" data-mini="false" data-icon="grid" onclick=''>View all in map</a>
	<a href="#help"
	data-role="button" data-mini="false" data-icon="info" onclick=''>Help</a>
	<a href="#"
	data-role="button" data-mini="false" data-icon="back" onclick='navigator.app.exitApp()'>Exit</a>
	</div>
	</div>
	</div>
	<!-- Page End -->

	<!-- photo tag page-->
	<div id="photoTag" data-role="page" data-add-back-btn="true" data-theme="a">
	<div data-role="header" >
	<h1>Tag Photo</h1>
	</div>
	<div data-role="content">
	<div id="tagPicture">
	<img id="tagImage"/>
	</div>
	<a href="#" id="enableTaggingButton"
	data-role="button" data-mini="false" data-icon="grid" onclick='enableTagging()'>Enable Tagging</a>
	<a href="#" id="saveTagsButton"
	data-role="button" data-mini="false" data-icon="grid" style="display: none" onclick='saveTags()'>Save tags</a>
	<a href="#" id="clearTagsButton"
	data-role="button" data-mini="false" data-icon="delete" style="display: none" onclick='clearTags()'>Clear tags</a>
	<a href="#" id="cancelTaggingButton"
	data-role="button" data-mini="false" data-icon="grid" style="display: none" onclick='enableTagging()'>Cancel</a>

	</div>
	</div>
	<!-- Page End -->


	</body>
	</html>