/*
 * Async Treeview 0.1 - Lazy-loading extension for Treeview
 * 
 * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
 *
 * Copyright (c) 2007 Jörn Zaefferer
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id$
 *
 */

;(function($) {

function load(settings, root, child, container) {
	
	// submit only the number part of the id
	root = isNaN(root) && root.match(/^draggable_/) ? root.replace(/^draggable_/, '') : root;
	
	// check in wich tree (application | technology)
	var tree_type = $('#technology-tree').size() > 0 ? 'technology' : 'application';
	$.getJSON(settings.url, {root: root}, function(response) {
		function createNode(parent) {

				// li element of a tree leaf
				var current = $("<li/>")
						.attr("id", ("draggable_" + this.id) || "")
						.attr("node_id", this.id || "")
						.css("clear", "both");
						//.html("<span id=\"draggable_" + this.id + "_view\">" + this.text + "</span>")
	
			if ('placeholder' != this.id) {
				// span view element
				var span_view = $("<span/>")
						.attr("id", ("draggable_" + this.id + "_view") || "")
						.attr("style", "float:left;")
						.text(this.strKlasse + " " + this.strHeadline)
						.appendTo(current);
				// edit img-button for li
				var alttext_edit = gt.gettext('Wissen bearbeiten');
				var edit_img = $("<img/>")
						.attr("id", ("button_edit_" + this.id) || "")
						.attr("src", doc_root + "misc/icons/page_white_wrench.png")
						.bind("click", {intId: this.intId}, box.knowledge.edit)
						.attr("alt", alttext_edit)
						.attr("title", alttext_edit)
						.css("float", "left")
						.css("padding-left", "5px")
						.appendTo(current);

				// delete img-button for li
				var alttext_delete = gt.gettext('Wissen löschen');
				var deleteFkt = 'technology' == tree_type ? box.technology.Delete : box.application.Delete;
				var delete_img = $("<img/>")
						.attr("id", ("button_delete_" + this.id) || "")
						.attr("src", doc_root + "misc/icons/page_white_delete.png")
						.bind("click", {intLeft: this.intLeft, intRight: this.intRight, intId: this.intId}, deleteFkt)
						.attr("alt", alttext_delete)
						.attr("title", alttext_delete)
						.css("float", "left")
						.css("padding-left", "5px")
						.appendTo(current);
	
						
				// span edit form elements
				var form_html = ('Name (DE)') +': <input id="draggable_' + this.id + '_value" type="text" value="' + this.text + '" />&nbsp;' +
						gt.gettext('Wikipedia-URL (DE)') + ': <input id="draggable_' + this.intId + '_wiki-url" type="text" value="' + this.strWikipediaUrl + '" /><br>' +
						gt.gettext('Name (EN)') + ': <input id="draggable_' + this.intId + '_value_en" type="text" value="' + this.strHeadlineEn + '" />&nbsp;' +
						gt.gettext('Wikipedia-URL (EN)') + ': <input id="draggable_' + this.intId + '_wiki-url-en" type="text" value="' + this.strWikipediaEnUrl + '" />&nbsp;' +
						'<input type="button" value="' + gt.gettext('Speichern') + '" onclick="box.' + tree_type + '.update(' + this.intRight + ', \'draggable_' + this.intId + '_value\', ' + this.intId + ');" />' +
						'<br/>';
							
				// span edit element
				var span_edit = $("<span/>")
						.attr("id", ("draggable_" + this.id + "_edit") || "")
						.css("float", "left")
						.css("display", "none")
						.html(form_html)
						.appendTo(current);
	
						
						
						
				current.appendTo(parent);
						
				if (this.classes) {
					current.children("span").addClass(this.classes);
				}
				if (this.expanded) {
					current.addClass("open");
				}
				if (this.hasChildren || this.children && this.children.length) {
					var branch = $("<ul/>").appendTo(current);
					if (this.hasChildren) {
						current.addClass("hasChildren");
						createNode.call({
							text:"placeholder",
							id:"placeholder",
							children:[]
						}, branch);
					}
					if (this.children && this.children.length) {
						$.each(this.children, createNode, [branch])
					}
				}
			}
		}
		$.each(response, createNode, [child]);
        $(container).treeview({add: child});
    });
}

var proxied = $.fn.treeview;
$.fn.treeview = function(settings) {
	if (!settings.url) {
		return proxied.apply(this, arguments);
	}
	var container = this;
	load(settings, "source", this, container);
	var userToggle = settings.toggle;
	return proxied.call(this, $.extend({}, settings, {
		collapsed: true,
		toggle: function() {
			var $this = $(this);
			if ($this.hasClass("hasChildren")) {
				var childList = $this.removeClass("hasChildren").find("ul");
				childList.empty();
				load(settings, this.id, childList, container);
			}
			if (userToggle) {
				userToggle.apply(this, arguments);
			}
		}
	}));
};

})(jQuery);