var zTreeView = Class.create( {
    srcURL: "zTreeView.php",
    imgPlus: "img/zTreeView/plus.gif",
    imgMin: "img/zTreeView/min.gif",
    imgLeaf: "img/zTreeView/leaf.gif",
    domId: null,
    jsonData: null,
    treeContent: "",
    selectedNode: null,
    //Constructor
    initialize: function(_domId, _node) {
        // Add private methods here
        this.node_click_bnd = this.node_click.bind(this),
        this.node_mouseover_bnd = this.node_mouseover.bind(this),
        this.node_mouseout_bnd = this.node_mouseout.bind(this),
        this.menu_click_bnd = this.menu_click.bind(this),
        this.parseTree = function() {
            //make ajaxrequest for all elements 
            var url = this.srcURL+"?action=getChilds&did="+this.domId;
            var success = this.drawTree.bind(this);
            var failure = this.showFailure.bind(this);
            new Ajax.Request(url, {method:"post",
                            onSuccess: success,
                            onFailure: failure
            });
        },
        this.drawTree = function(t){
            this.jsonData = eval('('+ t.responseText +')');
            //var mainid = this.jsonData.id.replace(/_/g, '');
            this.drawChilds(0);
            $(this.domId).innerHTML = this.treeContent;
            this.setEvents();
            this.showNode(this.selectedNode)
        },
        this.showFailure = function(t){
            alert(t.responseText);
        },
        this.drawChilds = function(parent) {
            //search in sjonData for childs of parent
            for (var i=parent; i< this.jsonData.data.length;i++) {
                if (this.jsonData.data[i].pid==parent) {
                    //draw element,
                    this.treeContent += "<div id='" + this.domId + this.jsonData.data[i].id + "' class='treenode'>";
                    this.treeContent += "<div id='menuitem"+this.jsonData.data[i].id +"' class='menuitem'>";
                    if (this.hasChilds(this.jsonData.data[i].id)){
                        this.treeContent += "<span id='symbol"  + this.jsonData.data[i].id + "' style='padding:2px 3px 2px 3px;' title='Menu uitklappen'><img src='"+this.imgLeaf+"' id='img"+this.jsonData.data[i].id+"'/></span><b>";
                    } else {
                        this.treeContent += "<span id='symbol" + this.jsonData.data[i].id +"' style='padding:2px 3px 2px 3px;'><img src='"+this.imgLeaf+"' id='img"+this.jsonData.data[i].id+"'/></span>";
                    }
                    this.treeContent += "&nbsp;<a href='"+this.jsonData.data[i].link+"' id='link"+this.jsonData.data[i].id+"' class='link'>" + this.jsonData.data[i].name + "</a></div>";
                    if (this.hasChilds(this.jsonData.data[i].id)){
                        this.treeContent += "</b><div id='childbox" + this.jsonData.data[i].id + "' class='nodechilds'>";
                        this.drawChilds(this.jsonData.data[i].id);
                        this.treeContent += "</div>";
                    }
                    this.treeContent +="</div>";
                }
            }
        },
        this.hasChilds = function(id) {
            childs = false;
            $A(this.jsonData.data).each(function(s){
                if (id==s.pid){
                    childs = true;
                }
            });
            return childs;
        },
        this.setEvents = function(){
            $$("#"+this.domId+" span").each(function(s){
                $(s).observe("click", this.node_click_bnd);
            }.bind(this));
            $$("#"+this.domId+" div.menuitem").each(function(s){
                $(s).observe("click", this.menu_click_bnd);
            }.bind(this));
            $$("#"+this.domId+" div.treenode").each(function(s){
                $(s).observe("mouseover", this.node_mouseover_bnd);
                $(s).observe("mouseout", this.node_mouseout_bnd);
            }.bind(this));
        },
        this.showChilds = function(id) {
            $("img"+id).src = this.imgMin;
            $("symbol"+id).title = "Menu inklappen"
            $("childbox" + id).setStyle({display: 'block'});
        },
        this.hideChilds = function(id) {
            $("img"+id).src = this.imgLeaf;
            $("symbol"+id).title = "Menu uitklappen"
            $("childbox" + id).setStyle({display: 'none'});
        },
        this.setNodeSelected = function(id) {

            if ($("link"+id).hasClassName("link")) {
                $("link"+id).removeClassName("link");
                $("link"+id).addClassName("link_selected");
            } else {
                 $("link"+id).removeClassName("link_selected");
                $("link"+id).addClassName("link");
            }
        },
        this.getParentNode = function(id) {
            var p = 0;
            $A(this.jsonData.data).each(function(s){
                if (id==s.id){
                    p = s.pid;
                }
            });
            return p;
        },
        //Constructor logic
        this.domId = _domId;
        this.selectedNode = _node;
        this.parseTree();
        

    },
    menu_click: function(e) {
        element = Event.element(e);
        if (element.id.startsWith("menuitem")){
            id = element.id.sub("menuitem","");
            window.location = $('link'+id).href
        }

    },
    node_click: function(e) {
        element = Event.element(e);
        if (element.id.startsWith("symbol"))
            id = element.id.sub("symbol","");
        else
            id = element.id.sub("img","");
        if (this.hasChilds(id)){
            if ($("childbox" + id).getStyle("display")=="none") {
                this.showChilds(id);
            } else {
               this.hideChilds(id);
            }
        }
    },
    node_mouseover: function(e) {
        var id = null;
        element = Event.element(e);
        
        if (element.id.startsWith("menuitem")) {
            id = element.id.sub("menuitem","");
        } else if (element.id.startsWith("symbol")){
            id = element.id.sub("symbol","");
        } else if (element.id.startsWith("img")){
            id = element.id.sub("img","");
        }else if (element.id.startsWith("link")){
            id = element.id.sub("link","");
        } else if ($(element).up().id.startsWith("menuitem")){
            id = $(element).up().id.sub("menuitem","");
        }
        if (id!=null){
            $("menuitem"+id).removeClassName('menuitem');
            $("menuitem"+id).addClassName('menuitem_mouseover');
            $("treebox"+id).removeClassName('treenode');
            $("treebox"+id).addClassName('treenode_mouseover');
        }

    },
    node_mouseout: function(e) {
         var id = null;
        element = Event.element(e);
        if (element.id.startsWith("menuitem")) {
            id = element.id.sub("menuitem","");
        } else if (element.id.startsWith("symbol")){
            id = element.id.sub("symbol","");
        } else if (element.id.startsWith("img")){
            id = element.id.sub("img","");
        } else if (element.id.startsWith("link")){
            id = element.id.sub("link","");
        }else if ($(element).up().id.startsWith("menuitem")){
            id = $(element).up().id.sub("menuitem","");
        }
        if (id!=null){

            $("menuitem"+id).removeClassName('menuitem_mouseover');
            $("menuitem"+id).addClassName('menuitem');
            $("treebox"+id).removeClassName('treenode_mouseover');
            $("treebox"+id).addClassName('treenode');

        }
    },
    showNode: function(id) {
        this.setNodeSelected(id);
        //recursively show parent childs till parent = 0
        if (this.hasChilds(id)) {
            this.showChilds(id);
        }
        var p = this.getParentNode(id);
            while (!p == 0) {
                this.showChilds(p);
                p = this.getParentNode(p);
            }
        
    }
});