var isle = $('categorytree'); //first <ol>
    var childs = isle.select('div');

    for (var index = 0, len = childs.length; index < len; ++index) {
	var item = childs[index];

	item.observe('click', treeEntryClicked);
    }

function log(msg){
  if (window.console && console.log) {
    console.log(msg); //for firebug
  }
  //document.write(msg); //write to screen
  //$("#logBox").append(msg); //log to container
}

function treeEntryClicked(event)
{
    var ee = Event.element(event);

    //event must bubble to the top
    if(ee.tagName == 'A' || ee.tagName == 'a' || ee.tagName == 'SPAN' || ee.TagName == 'span')
    {
	return true;
    }
    Event.stop(event);
    var e = ee.up('li').down('div');

    var id = e.down('a').readAttribute('id');
    id = id.substring( id.indexOf('_')+1 );

    //Ist das naechste auf dieser ebene ein OL?
    //Wenn ja, dann ist die Kategorie aufgeklappt
    var next = e.nextSiblings();

    if( next[0] && next[0].nodeName == 'OL')
    {
    	e.removeClassName('treeicon_minus');
	e.addClassName('treeicon_plus');
	next[0].remove();
    }
    else
    {
	e.addClassName('treeicon_loading');

	new Ajax.Request('/tree.php',
    	{
		method: 'get',
		requestHeaders: {Accept: 'application/json'},
		parameters: {category: id},

		onSuccess: function(transport) {
	    		var json = transport.responseText.evalJSON(true);
	    		var target = $($('catlink_'+json.id).parentNode);
	    		target.removeClassName('treeicon_loading');

			var level = -1;
			$(target.parentNode).classNames().each(function(name, index) {
				var loc = name.indexOf('level_');
				if(loc != -1)
				{
					level = parseInt(name.substring(loc+6));
					++level;
				}
			});


			if(json.childs.length > 0)
			{
				target.removeClassName('treeicon_plus');
				target.removeClassName('treeicon_arrow');
				target.addClassName('treeicon_minus');

		 		var ol = new Element('ol');
		    		for( var i = 0; i < json.childs.length; ++i)
		    		{
					var el = json.childs[i];

					var treeicon = (el.ccount > 0) ? 'treeicon_plus' : 'treeicon_arrow';
					var isactive = (parseInt(el.is_active) > 0) ? ' cat_is_active' : '';
					var level_isactive = (parseInt(el.is_active) > 0) ? 'level_'+level+'_active' : '';

					var li = new Element('li');
					li.addClassName('categorielisting');
				        li.addClassName('level_' + level);
					//li.addClassName(treeicon);
				        li.addClassName(isactive);
				        li.addClassName(level_isactive);


					//li.classNames().each(function(name, index) { alert(name); });
					

					var div = new Element('div');
					div.addClassName(treeicon);
				
					var icon = new Element('div');
					icon.addClassName("icon");
					div.insert(icon);

					var a = new Element('a', {
			    			id: 'catlink_' + el.id,
			    			href: el.link
					});
					a.addClassName(isactive);

					div.insert(a);
					a.update(el.name);
					li.insert(div);
					div.observe('click', treeEntryClicked);

					ol.insert(li);
		    		}
		    		
				$(target.parentNode).insert(ol);
			}
			else
			{
		    		//alert("keine Unterkategorien gefunden!");
			}
		},
		onFailure: function(){ alert('Something went wrong...') }
    	});
    }
}