const PROTREEVIEW_PHP = "http://www.unexpectedit.com/myprojects/protreeview/protreeview.php";
const IMG_FOLDER = "http://www.unexpectedit.com/myprojects/protreeview/";

		function loadData(){
			new Ajax.Updater('protreeview', PROTREEVIEW_PHP, {
				onComplete: addEvents,
				parameters: {
					mode: 'load'
				}
			});
			addEvents();
		}
		
		function reloadSample(){
			new Ajax.Updater('protreeview',
			PROTREEVIEW_PHP, {onComplete: loadData, parameters: { mode: 'reload'}});
			$('console').update("");
		}
		
		function getChildCode(id) {
			return ("<li id=\""+id+"\"><img class=\"iadd\" src=\""+IMG_FOLDER+"add_album.gif\" /><img class=\"iaddsub\" src=\""+IMG_FOLDER+"add_sub-album.gif\" /><input type=\"text\" class=\"iname\" value=\"Unnamed\"/><img class=\"idel\" src=\""+IMG_FOLDER+"delete_album.gif\" /></li>");
		}
		
		function addSibling() {
			var parent = this.parentNode;
			new Ajax.Updater({failure:'console' },
			PROTREEVIEW_PHP, {onSuccess: function(request){add(request, parent,"sibling");}, insertion: 'top',
			parameters: { mode: 'addSibling', id: parent.id, name: 'Unnamed' }
			});			
		}
		
		function addChildren() {
			var parent = this.parentNode;
			new Ajax.Updater({failure:'console' },
			PROTREEVIEW_PHP, {onSuccess: function(request){add(request, parent,"children");}, insertion: 'top',
			parameters: { mode: 'addChildren', id: parent.id, name: 'Unnamed' }
			});
		}
		
		function add(request, parent, mode){
			var id = request.responseJSON.id;
			if (mode == "sibling") {
				if (parent.next() != null) 
					parent.insert(getChildCode(id));
				else 
					parent.up().insert(getChildCode(id));
			}
			else if(mode == "children") {
				parent.insert("<ul>"+getChildCode(id)+"</ul>");
			}
			$('console').insert(request.responseJSON.debug+"\n");
			addEvents();
		}
		
		function deleteChild() {
			this.parentNode.remove();
			new Ajax.Updater({failure:'console' },
			PROTREEVIEW_PHP, {onSuccess: function(request){	$('console').insert(request.responseJSON.debug+'\n');}, insertion: 'top',
			parameters: { mode: 'del', id: this.parentNode.id}
			});			
			addEvents();
		}

		function updateChild() {
			var parent = this.parentNode;
			new Ajax.Updater({failure:'console' },
			PROTREEVIEW_PHP, {onSuccess: function(request){	$('console').insert(request.responseJSON.debug+'\n');}, insertion: 'top',
			parameters: { mode: 'update', id: parent.id, name: this.value }
			});
		}
		
		function addEvents(){
			$$('img.iadd').each(function(e){
				e.observe('click', addSibling);
			});
			
			$$('img.idel').each(function(e){
				e.observe('click', deleteChild);
			});
			
			$$('img.iaddsub').each(function(e){
				e.observe('click', addChildren);
			});

			$$('input.iname').each(function(e){
				e.observe('keypress', function (event) {
					if (Event.KEY_RETURN == event.keyCode)
						updateChild;
				});
				e.observe('change', updateChild);
			});

		}
		loadData();