<html lang="en">
	
<head>
	<meta charset="utf-8">
	<title>Sticky Notes</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/scrollbar.css">
	<script type="application/javascript" src="js/iscroll.js?v4"></script>	
<script type="text/javascript">

var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });

   myScroll.options.onBeforeScrollStart = function(e) {                
        var target = e.target;

        while (target.nodeType != 1) target = target.parentNode;
        if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){
            e.preventDefault();
        }
	}
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

</script>	
<script type="text/javascript">
function MyLoad()
{
	if (window.PalmSystem) 		
			window.PalmSystem.stageReady();
				window.PalmSystem.setWindowOrientation("right");
}
</script>	
	
</head>

<body onload="MyLoad()">
<div id="wrapper">
	<div id="note-app">

		<header>
			<h1>Sticky Notes</h1>
			<input id="new-note" type="text" placeholder="Enter a title for a new note..." maxlength="15">

				<option name="colours" id="colours" value="#fffd75">Yellow</option>
		</header>
		<section id="main">
			<div id="note-list"></div>
		</section>
		<div id="break"></div>
		<footer></footer>
	</div>

	<script src="js/json2.js" type="text/javascript"></script>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/underscore.js" type="text/javascript"></script>
	<script src="js/backbone.js" type="text/javascript"></script>
	<script src="js/backbone.localStorage.js" type="text/javascript"></script>
	<script src="js/stickynote.js" type="text/javascript"></script>
	<script type="text/template" id="note-template">

		<div class="top-view" style="background-color: <%- colour %>">
			<div class="title-view">
				<label><%- title %></label>
				<a class="destroy"></a>
			</div>
			<input class="title-edit" type="text" value="<%- title %>" maxlength="15" />
			<div class="content-view">
				<p><%- content %></p>
			</div>
			<textarea class="content-edit"><%- content %></textarea> 
			<div class="tooltip"><%- date %></div>
		</div>

	</script>
	<script type="text/template" id="stats-template">
		<div class="note-count">
			<b><%= count %></b> <%= count == 1 ? 'note' : 'notes' %> currently active.
			Double click to add text
		</div>
	</script>
	</div>
</body>

</html>