<h1 class="pageTitle">TODO Manager</h1>
<span flexy:if="msgGet()">{msgGet()}</span>

<p>Enter your TODO items below.  Often is helps if you group similar tasks, just drag any item to a group box to achieve this.  When
an item is complete, mark as done by clicking the [X].  If you later decide an item belongs better in another group, drap it to 
that group.</p>

<div id="response" style="display:none">Todo saved</div>

<div id="page">

	<div id="createNew">

		<h3>Create New Group</h3>
		<input type="text" id="sectionName" size="25">
		<input type="button" onClick="
								createNewSection();
								new Ajax.Request(
									'{makeUrl(#addGroup#,##,#todo#)}', 
									{asynchronous:true, 
									 method:'post',
									 parameters:'groupName=' + $('sectionName').value,
									 onSuccess:handlerFunc}); 
								return false" 
							value="Create Group">
	</div>

	<div flexy:foreach="results,k,oGroup" id="group{oGroup.todo_group_id}" class="section">
		<div class="mytitlebar">
			<div class="handle">{oGroup.name}</div>
			<div class="addtodo">
				<input 	type="text" id="new_todo_{oGroup.todo_group_id}" />
				<input 	type="button" 
						onClick="
							createNewTodo($('new_todo_{oGroup.todo_group_id}').value, $('group{oGroup.todo_group_id}').id);
							new Ajax.Request(
								'{makeUrl(#addTodo#,##,#todo#)}', 
								{asynchronous:true, 
								 method:'post',
								 parameters:'todo=' + $('new_todo_{oGroup.todo_group_id}').value + '&groupId='+ {oGroup.todo_group_id},
								 onSuccess:handlerFunc}); 
							return false;" 
						value="Add Todo" />		
			</div>
			<div style="clear:both"></div>
		</div>
		<div flexy:foreach="oGroup.aTodos,k,oTodo" id="item_{oTodo.todo_id}" class="lineitem">
			<span>
				<a onclick="toggleDone('todo_item_{oTodo.todo_id}')" class="toggleDone" href="#">[X]</a>
			</span>
			<span class="todo" id="todo_item_{oTodo.todo_id}">{oTodo.description}</span>		
		</div>
	</div>

</div>

<fieldset>
	<legend>Debug and Help Information</legend>

	<input type="button" onClick="getGroupOrder()" value="Debug: Show serialized group order">
</fieldset>

{scriptOpen:h}

//	get all sections (groups)
elems = document.getElementsByClassName('section');
sections = new Array;
elems.each(function(elems) {
	sections.push(elems.id);
});		

	// <![CDATA[
{foreach:results,k,oGroup}
Sortable.create('group{oGroup.todo_group_id}', {tag:'div', dropOnEmpty: true, containment: sections, only:'lineitem'});
{end:}	
Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
	// ]]>
	
{scriptClose:h}