function startodolist() {
    var session = DragDrop.getcookie("session");
    var list = document.getElementById('p_todolist');
	var req = createXMLHttpRequest();	
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        if (req.status == 200) {
		  donnees = req.responseText.split('|');
		  for(i=0; i<donnees.length; i++){
		    if(donnees[i]!='') {
		     resultat = donnees[i].split('=');
		     addnote(''+resultat[0]+'', ''+resultat[1]+'')
		    }
		  }
        }
      }
    };	
    req.open('GET', 'todolist.php?init=1&session='+session+'', true);
    req.send('');	
}

// this function will be called when the add link is pressed
// and when loading the list at startup
function addnote(id, text) { 
  text = unescape(text);
  var session = DragDrop.getcookie("session");
  var list = document.getElementById('p_todolist');
  var item = document.createElement('li');
  var html = document.createElement('span');
  html.setAttribute("id","todo"+id+"");
  item.appendChild(html);
  list.insertBefore(item, null);
  var edit           = item.appendChild(document.createElement('input'));
      edit.type      = 'text';
      edit.value     = text;
	  edit.autocomplete = 'OFF';
      edit.maxLength = 100;
      edit.size      = 30;
  var dele               = item.appendChild(document.createElement('img'));
      dele.src           = 'http://www.portail.ma/img/close.gif';
      dele.style.display = edit.style.display = 'none';

  // new note?
  if (id == -1) {
    // use an xmlhttprequest to get a new id for the note
    var req = createXMLHttpRequest();
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        if (req.status == 200) {
          item.id = req.responseText;
        }
      }
    };
    req.open('GET', 'todolist.php?getid=1&session='+session+'', true);
    req.send('');
  } else {
    item.id = id;
  }
  
  item.onclick = function() {
    // switch the note to edit mode
    html.style.display = 'none';
    dele.style.display = edit.style.display = 'inline';
    edit.focus();
  };

  edit.onblur = function() {
    var t = edit.value;
    // has the contents of the note changed?
    if (html.innerHTML != t) {
      // use an xmlhttprequest to update the note contents in the database
      var req = createXMLHttpRequest();
          req.open('POST', 'todolist.php', true);
          req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          req.send('id='+item.id+'&text='+edit.value+'&session='+session+'');
   }
   html.innerHTML = "";
   html.appendChild(document.createTextNode(t));
   // switch the note to display mode
   html.style.display = 'inline';
   dele.style.display = edit.style.display = 'none';
  }

  // catch the enter key to finish editing the note
  edit.onkeydown = function(e) {
    var key = 0;
    if (window.event) {
      key = window.event.keyCode;
    } else if (e) {
      key = e.keyCode; // e.which
    }
    if (key == 13) { // 13 is the enter key
      edit.onblur();
    }
  }

  dele.onmousedown = function() {
    // ask the user if he/she really wants to delete the note
    if (confirm('Confirmer la suppression ?')) {
      // use an xmlhttprequest to remove the note from the database
      var req = createXMLHttpRequest();
          req.open('GET', 'todolist.php?del='+item.id+'&session='+session+'', true);
          req.send('');
      list.removeChild(item);
    }
  }
  // trigger onblur to switch the note to display mode and update it's innerHTML
  edit.onblur();
}