<?xml version="1.0" encoding="UTF-8" ?>
<!--

    Copyright (C) 2009 eXo Platform SAS.
    
    This is free software; you can redistribute it and/or modify it
    under the terms of the GNU Lesser General Public License as
    published by the Free Software Foundation; either version 2.1 of
    the License, or (at your option) any later version.
    
    This software is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    Lesser General Public License for more details.
    
    You should have received a copy of the GNU Lesser General Public
    License along with this software; if not, write to the Free
    Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
    02110-1301 USA, or see the FSF site: http://www.fsf.org.

-->

<!--
 **
 * Created by The eXo Platform SARL
 * Author : dang.tung
 *          tungcnw@gmail.com
 * Oct 01, 2008
 *
-->
<Module>
	<ModulePrefs author="eXoPlatform"
		title="To-do"
		directory_title="To-do"
		title_url="http://www.exoplatform.org"
		description="To-do Gadget, easily manage and track your daily to-do list."
		thumbnail="http://localhost:8080/eXoGadgets/skin/DefaultSkin/portletIcons/Todo.png"
		height="235">
		<Locale messages="http://localhost:8080/eXoGadgets/locale/Todo/ALL_ALL.xml" />
		<Locale lang="ar" messages="http://localhost:8080/eXoGadgets/locale/Todo/ar_ALL.xml" language_direction="rtl"/>
		<Locale lang="fr" messages="http://localhost:8080/eXoGadgets/locale/Todo/fr_ALL.xml" />
		<Locale lang="vi" messages="http://localhost:8080/eXoGadgets/locale/Todo/vi_ALL.xml" />
		<Require feature="setprefs"/>
	</ModulePrefs>
	<UserPref name="todoList" datatype="list"/>
	<Content type="html">
	<![CDATA[
		<style type="text/css">

			body {
				margin: 0;
				outline: none;
				font: normal 100%/1.25  Verdana, Tahoma, Arial, Helvetica, sans-serif;
				text-decoration: none;
				text-align: center;
			}

			img {
				border:none;
			}

			li {
				list-style-type:none;
			}

			.clear {
				clear:both;
				width:0;
				height:0;
				line-height:0;
				font-size:0;
			}

			.Note {
				background: url(/eXoGadgets/skin/image/Note__BIDI_START_EDGE__.jpg) top __BIDI_START_EDGE__ no-repeat;
				width: 160px;
				height: 235px;
				margin: 0 auto;
				padding: 42px 18px 0 18px;
			}

			.write {
				width: 160px;
				height: 150px;
				overflow-y: auto;
        overflow-x: hidden;
			}

			.write input {
				background: url(/eXoGadgets/skin/image/line.gif) bottom left repeat-x;
				font-size: 11px;
				color: #be0d08;
				border: none;
				width: 100%;
				line-height: auto;
				font-style: italic;
				margin-bottom: 2px;
				height: 15px;
			}
			
			.UIAction .ActionContainer {
				width: auto;
				margin: auto;
			}	
			
			.UIAction .ActionButton {
				display: block;
				float: __BIDI_START_EDGE__; 
				margin: 0px 3px;
				cursor: pointer;
			}
			
			.UIAction .SimpleStyle {}
			
			.UIAction .SimpleStyle .ButtonLeft {
			  background: url('/eXoResources/skin/DefaultSkin/webui/component/UIBarDecorator/UIAction/background/SimpleStyle.gif') no-repeat left top;
			  padding: 0px 0px 0px 10px;
			  height: 21px;
			}
			
			.UIAction .SimpleStyle .ButtonRight {
			  background: url('/eXoResources/skin/DefaultSkin/webui/component/UIBarDecorator/UIAction/background/SimpleStyle.gif') no-repeat right top;
			  padding: 0px 10px 0px 0px ;
			  height: 21px;
			}
			
			.UIAction .SimpleStyle .ButtonMiddle {
			  line-height: 21px;
				background: url('/eXoResources/skin/DefaultSkin/webui/component/UIBarDecorator/UIAction/background/SimpleStyle.gif') repeat-x bottom;
				text-align: center;	
				padding: 0px 12px;
			  height: 21px;
			}
			
			.UIAction .SimpleStyle a {
			  color: #353535;
			  margin: 0px 6px;
			  white-space: nowrap;
			  font-size: 11px;
			  text-decoration: none;
			  display: block;
			}
			
			.UIAction .SimpleStyle a:hover {
			  color: #1273df;
			}

		</style>
		<script type="text/javascript">
				var prefs = new _IG_Prefs(__MODULE_ID__);
				function onLoad() {
					var listsTodo = prefs.getArray("todoList");
					var appendParrent = document.getElementById("write");
					for(var i=0; i<listsTodo.length; i++) {
						if(i>6) {
              createTaskInput(i+1);
						}
						var tmp = document.getElementById(parseInt(i)+1);
						tmp.value = listsTodo[i];
					}
					reArrange();
				}
				
				function focusFirstTask(firstInput) {
					if(firstInput.value == '1. __MSG_type_here__') {
						firstInput.focus();
						firstInput.value = "1.";
					}
				}

        function reArrange() {
          var nodeParent = document.getElementById("write");
          var inputList = nodeParent.getElementsByTagName("input");
          for(var i=0; i < inputList.length; i++)  {
            if(inputList[i].value != null && inputList[i].value != "") {
              var tmp = inputList[i].value;
	            var numTask = tmp.substring(0, tmp.indexOf('.'));
						  var contentTask = tmp.substring(tmp.indexOf('.') + 1, tmp.length);
              if(parseInt(numTask) != parseInt(inputList[i].id)) {
							  numTask = inputList[i].id;
					  	}
						  inputList[i].value = numTask + "." + contentTask;
            }
          }
        }   

				function save() {
					values = [];
          var nodeParent = document.getElementById("write");
          var inputList = nodeParent.getElementsByTagName("input");
					for (var i = 0; i < inputList.length; i++) {
							if(inputList[i].value != null && inputList[i].value != "") {
              	values.push(inputList[i].value);
							}
					}          
          prefs.setArray("todoList", values);
				}

        function setEnterKey(event) {
					var e = event || window.event;
					var elementInput = e.srcElement || e.target;
          var keynum = e.keyCode || e.which;         
					if(keynum == 13) {
						var nextInputElement = findNextElementByTagName(elementInput, "input");
            if(nextInputElement) {
              if(nextInputElement.value != null && nextInputElement.value != "") {
                nextInputElement.focus();                  
              } else {
							  nextInputElement.focus();
                nextInputElement.value = (parseInt(elementInput.id)+1)+".";
              }
						} else {
							createTaskInput(parseInt(elementInput.id)+1);
						}
					}						
				}

        function createTaskInput(index) {
          var parentNode = document.getElementById("write");
          var input = document.createElement("input");
					parentNode.insertBefore(input,null);
          input.focus();
					input.setAttribute("type","text");
					input.setAttribute("name",index);
					input.onkeydown = setEnterKey;          
          input.value = index+".";
          input.setAttribute("id",index);
        }


        function findNextElementByTagName(element, tagName) {
					var nextElement = element.nextSibling ;
					while (nextElement != null) {
						var nodeName = nextElement.nodeName ;
				    if (nodeName != null) nodeName = nodeName.toLowerCase() ;
						if (nodeName == tagName) return nextElement ;
						nextElement = nextElement.nextSibling ;
					}
					return null ;
				}       
  
			  gadgets.util.registerOnLoadHandler(onLoad);
		</script>
			<div class="Note">
	    	<div class="write" id="write">
	        <input type="text" id="1" onfocus="focusFirstTask(this);" value="1. __MSG_type_here__" name="1" onkeydown="setEnterKey(event);"/>
	        <input type="text" id="2" name="2" onkeydown="setEnterKey(event);"/>
	        <input type="text" id="3" name="3" onkeydown="setEnterKey(event);"/>
					<input type="text" id="4" name="4" onkeydown="setEnterKey(event);"/>
					<input type="text" id="5" name="5" onkeydown="setEnterKey(event);"/>
					<input type="text" id="6" name="6" onkeydown="setEnterKey(event);"/>
					<input type="text" id="7" name="7" onkeydown="setEnterKey(event);"/>
					
	      </div>

<div class="UIAction"> 
    <table class="ActionContainer">
	    <tbody><tr>
	    	<td>
		      <div class="ActionButton SimpleStyle" onclick="save();">
		        <div class="ButtonLeft">
		          <div class="ButtonRight">
		            <div class="ButtonMiddle">
		            	<a href="javascript:void(0);">__MSG_save__</a>
		            </div>
		          </div>
		        </div>
		      </div>
		    </td>
      </tr>
 	  </tbody></table>
	</div>
		   </div>
	]]>
	</Content>
</Module>