AWP.Layer.TreeNodeUI = function(node) {
	AWP.Layer.TreeNodeUI.superclass.constructor.call(this, node);
}

Ext.extend(AWP.Layer.TreeNodeUI, Ext.tree.TreeNodeUI, {
	getIndent: function() {
        if(!this.childIndent){
            var buf = [];
            var p = this.node;
            while(p){
                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
                    if(!p.isLast()) {
                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
                    } else {
                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
                    }
                }
                p = p.parentNode;
            }
            this.childIndent = buf;
        }
        return this.childIndent.length;
    },
    getChildIndent: function() {
        if (!this.childIndent) {
            var buf = [];
            var p = this.node;
            while(p){
                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
                    if(!p.isLast()) {
                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
                    } else {
                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
                    }
                }
                p = p.parentNode;
            }
            this.childIndent = buf;
        }
        return this.childIndent.join("");
    },
	renderElements2 : function(n, a, targetNode, bulkRender){
        // add some indent caching, this helps performance when rendering a large tree
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var cb = typeof a.checked == 'boolean';

        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var buf = [
			'<li class="x-tree-node">',
			'<div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
            '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
            '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
            '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
            cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
            '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
            a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a>",
			a.listable ? '<a href="javascript:void(0)" class="x-tree-node-attributes"></a>' : '',
			'</div>',
            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
            "</li>"].join('');

        var nel;
        if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
        }else{
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
        }
        
        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];
        var cs = this.elNode.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];
        var index = 3;
        if(cb){
            this.checkbox = cs[3];
			// fix for IE6
			this.checkbox.defaultChecked = this.checkbox.checked;			
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    },
	renderElements: function(n, a, targetNode, bulkRender) {
        var indent = n.parentNode ? n.parentNode.ui.getIndent() : -1;
		
        /**
         * 如果是左边的用户内容
         */
		if (a.category == 'customer') {
			var cb = typeof a.checked == 'boolean';
			this.indentMarkup = indent == 0 ? '' : (n.parentNode ? n.parentNode.ui.getChildIndent() : '');
			
			/**
			 * define "font-size:1em" to cover "font-size:0px" in css x-tree-node-ct to void see nothing under IE8
			 */
			var buf = ['<li style="padding: 0px;">',
				'<div ext:tree-node-id="', n.id, '" class="x-tree-node-el">',
				'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
				a.leaf ? '<img src="' + this.emptyIcon + '" class="x-tree-ec-icon x-tree-elbow' + (n.isLast() ? '-end' : '') + '" />'
					: '<img class="x-tree-ec-icon x-tree-elbow-end-minus" src="' + this.emptyIcon + '" />',
				cb ? '<input type="checkbox" ' + (a.checked ? 'checked="checked" /> ' : '/>') : '',
				indent == 0 ? '<span>' + n.text + '</span>'
					: '<a href="javascript:void(0)" class="user-feature" title="' + a.title + '"'
						+ (a.approved == 1 ? ' style="color:#008000;font-weight:bold"' : ' style="color:gray"') + '>' + n.text + '</a>',
				indent != 0 && (!AWP.user.guest && a.approved != 1)
					? ' <span class="x-tree-node-attributes"></span><span class="x-tree-node-delete"></span>' : '',
				'</div>',
				'<ul class="x-tree-node-ct" style="display:none; font-size: 1em"></ul>',
				'</li>'].join('');
	
			this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
			this.elNode = this.wrap.childNodes[0];
			this.ctNode = this.wrap.childNodes[1];
			
			var cs = this.elNode.childNodes;
			var index = 0;
			this.indentNode = cs[index++];
			this.ecNode = cs[index++];
			cb ? this.checkbox = cs[index++] : null;
			this.textNode = cs[index++];
			this.attrNode = cs[index++];
		/**
		 * 如果是左上角的树节点
		 */
		} else if (a.category == AWP.cfg.SEAWA) {
			var cb = typeof a.checked == 'boolean';
			this.indentMarkup = indent == 0 ? '' : (n.parentNode ? n.parentNode.ui.getChildIndent() : '');
			
			/**
			 * define "font-size:1em" to cover "font-size:0px" in css x-tree-node-ct to void see nothing under IE8
			 */
			var buf = ['<li style="padding: 0px;">',
				'<div ext:tree-node-id="', n.id, '" class="x-tree-node-el">',
				'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
				cb ? '<input type="checkbox" ' + (a.checked ? 'checked="checked" /> ' : '/> ') : '',
				'<span class="sub-basin">', n.text.length > 23 ? n.text.substr(0, 20)
					+ '<span style="font-weight: bold">...</span>' : n.text, '</span>',
				'</div>',
				'<ul class="x-tree-node-ct" style="display:none; font-size: 1em;"></ul>',
				'</li>'].join('');
	
			this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
			this.elNode = this.wrap.childNodes[0];
			this.ctNode = this.wrap.childNodes[1];
			
			var cs = this.elNode.childNodes;
			var index = 0;
			this.indentNode = cs[index++];
			cb ? this.checkbox = cs[index++] : null;
			this.textNode = cs[index++];
		} else if (this.node.getOwnerTree().initAWPAdmin) {
			// 是否有 checkbox 关系到点击节点 text 能否触发 oncheckedchange 事件
			var cb = typeof a.checked == 'boolean';
			this.indentMarkup = indent == 0 ? '' : (n.parentNode ? n.parentNode.ui.getChildIndent() : '');
			var radioGrp = n.attributes.radioGrp || "radioGrp";
			var buf = [
				'<li>',
					'<div ext:tree-node-id="', n.id, '" class="x-tree-node-el">',
					'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
					cb ? ( indent <= 0
						? '<input type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')
						: '<input type="radio" name="' + radioGrp + '" ' + (a.checked ? 'checked="checked" />' : '/>')
					) : '',
					' <span> ', n.text, '</span>',
					'</div>',
					'<ul class="x-tree-node-ct" style="display:none;"></ul>',
				"</li>"
			].join('');
	
			this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
			this.elNode = this.wrap.childNodes[0];
			this.ctNode = this.wrap.childNodes[1];
			
			var cs = this.elNode.childNodes;
			var index = 0;
			this.indentNode = cs[index++];
			cb ? this.checkbox = cs[index++] : null;
			this.textNode = cs[index++];
		} else if (indent <= 0) {
			var cb = typeof a.checked == 'boolean';
			var buf = [
				'<li>',
					'<div ext:tree-node-id="', n.id, '" class="x-tree-node-el">',
					cb ? '<input type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>') : '',
					'<span>', n.text, '</span>',
					'<input type="button" value="DETAILS" style="width: auto" />',
					'</div>',
				"</li>"
			].join('');
	
			this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
			this.elNode = this.wrap.childNodes[0];
			
			var divLayers = document.getElementById('map_layers_body');
			this.ctNode = document.createElement('div');
			Ext.fly(this.ctNode).on('click',
				this.node.getOwnerTree().eventModel.delegateClick,
				this.node.getOwnerTree().eventModel
			);
			divLayers.appendChild(this.ctNode);
			
			var cs = this.elNode.childNodes;
			var index = 0;
			this.checkbox = cs[index++]
			this.textNode = cs[index++];
		} else if (indent == 1) {
			if (a.radio) {
				var cb = typeof a.checked == 'boolean';
				var radioGrp = n.attributes.radioGrp || "radioGrp";
				
				var buf = [
					'<li class="awp-tree-node">',
					'<div ext:tree-node-id="', n.id, '" class="x-tree-node-el">',
					'<input type="radio" name="' + radioGrp + '" ' + (a.checked ? 'checked="checked" />' : '/>'),
					'<label>', n.text, '</label>',
					"</div>",
					'<ul class="x-tree-node-ct" style="display:none;"></ul>',
					"</li>"].join('');
				
				var nel;
				if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())) {
					this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
				} else {
					this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
				}
				
				this.elNode = this.wrap.childNodes[0];
				this.ctNode = this.wrap.childNodes[1];
				
				var cs = this.elNode.childNodes;
				var index = 0;
				if (cb) this.checkbox = cs[index++];
				this.textNode = cs[index++];
			} else {
				var cb = typeof a.checked == 'boolean';
				var buf = [
					'<li class="awp-tree-node">',
					'<div ext:tree-node-id="',n.id,'" class="x-tree-node-el">',
					'<input type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>'),
					'<label>', n.text, '</label>',
					//a.listable ? '<a href="javascript:void(0)" class="x-tree-node-attributes"></a>' : '',
					'</div>',
					'<ul class="x-tree-node-ct" style="display:none;"></ul>',
					"</li>"].join('');
		
				var nel;
				if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
					this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
				}else{
					this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
				}
				
				this.elNode = this.wrap.childNodes[0];
				this.ctNode = this.wrap.childNodes[1];
				
				var cs = this.elNode.childNodes;
				var index = 0;
				if (cb) {
					this.checkbox = cs[0];
					// fix for IE6
					this.checkbox.defaultChecked = this.checkbox.checked;			
					index++;
				}
				this.textNode = cs[index];
			}
		} else {
			alert('indent:' + indent);
		}
    },
    updateExpandIcon : function() {
        if (this.rendered) {
			var n = this.node, c1, c2, indent = n.parentNode ? n.parentNode.ui.getIndent() : -1;
			//var n = this.node, c1, c2;
			if (n.attributes.category != 'customer' && indent <= 1) return;
			
            var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
            if(n.isExpandable()){
                if(n.expanded){
                    cls += "-minus";
                    c1 = "x-tree-node-collapsed";
                    c2 = "x-tree-node-expanded";
                }else{
                    cls += "-plus";
                    c1 = "x-tree-node-expanded";
                    c2 = "x-tree-node-collapsed";
                }
                if(this.wasLeaf){
                    this.removeClass("x-tree-node-leaf");
                    this.wasLeaf = false;
                }
                if(this.c1 != c1 || this.c2 != c2){
                    Ext.fly(this.elNode).replaceClass(c1, c2);
                    this.c1 = c1; this.c2 = c2;
                }
            }else{
                if(!this.wasLeaf){
                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
                    delete this.c1;
                    delete this.c2;
                    this.wasLeaf = true;
                }
            }
            var ecc = "x-tree-ec-icon "+cls;
            if (this.ecc != ecc){
                this.ecNode.className = ecc;
                this.ecc = ecc;
            }
        }
    },
	expand: function() {
		if (this.node.attributes.category == 'seawa' || this.node.attributes.category == 'wsow') {
			this.ctNode.style.display = "";
			return
		}
		if (this.node.attributes.category == 'customer') {
			this.updateExpandIcon();
			this.ctNode.style.display = this.ctNode.style.display == "none" ? "" : "none";
			return
		}
		if (this.node.getOwnerTree().initAWPAdmin) {
	        this.updateExpandIcon();
	        this.ctNode.style.display = "";
	        return
		}
		
		var ct = document.getElementById('map_layers');
		document.getElementById('map_layers_head').innerHTML = 'Data Layers: ' + this.node.text;
		
		if (this.ctNode.style.display == "none" || ct.style.display == 'none') {
			if (ct.style.display == 'none') ct.style.display = 'block';
			
			var cs = document.getElementById('map_layers_body').childNodes;
			for (var i = 0, len = cs.length; i < len; i++) {
				if (cs[i] != this.ctNode) cs[i].style.display = 'none';
			}
			
			this.ctNode.style.display = "block";
			
			var h = document.getElementById('map_layers_head');
			var b = document.getElementById('map_layers_body');
			b.style.height = ct.offsetHeight - h.offsetHeight - 22 + 'px';
		} else {
			ct.style.display = 'none';
			this.ctNode.style.display = "none";
		}
	},
	collapse: function() {
		this.expand();
	},
	onAttributesClick: function() {
		this.fireEvent('attributesclick', this.node);
	},
	onRadioChange: function() {
		var checked = this.checkbox.checked;
		this.node.attributes.checked = checked;
		this.fireEvent('radiochange', this.node, checked);
	},
	/**
	 * 取消注释可以调试
	 *
	toggleCheck : function(value){
        var cb = this.checkbox;
        if(cb){
            cb.checked = (value === undefined ? !cb.checked : value);
            this.onCheckChange();
        }
    },/**/
	CLASS_NAME: "AWP.Layer.TreeNodeUI"
});

AWP.Layer.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
	getIndent: function() {
		return 0;
	},
    render: function() {
        if (!this.rendered){
            var targetNode = this.node.ownerTree.innerCt.dom;
            this.node.expanded = true;
            targetNode.innerHTML = '<div style="padding: 10px; color: gray"></div>';
            this.wrap = this.ctNode = targetNode.firstChild;
        }
    },
    collapse : Ext.emptyFn,
    expand : Ext.emptyFn,
	CLASS_NAME: "AWP.Layer.RootTreeNodeUI"
});


AWP.Layer.TreeNode = function(attributes) {
	//if (!config.uiProvider) config.uiProvider = AWP.Layer.TreeNodeUI;
	AWP.Layer.TreeNode.superclass.constructor.call(this, attributes);
}

Ext.extend(AWP.Layer.TreeNode, Ext.tree.TreeNode, {
	defaultUI: AWP.Layer.TreeNodeUI,
	/**
	 * In order not to get error
	 * tree.getRootNode().setLastChild = function(node){
	        var ol = this.lastChild;
	        Ext.tree.TreeNode.superclass.setLastChild.call(this, node);
	        if(this.childrenRendered && ol && node != ol){
	            //ol.renderIndent(true, true);
	        }
	        if(this.rendered){
	            //this.renderIndent(true, true);
	        }
	    };
	 */
	renderIndent: function() {
		
	},
	// 取消注释可以进行覆盖调试
    /*render: function(bulkRender) {
        this.ui.render(bulkRender);
        if (!this.rendered) {
            // make sure it is registered
            this.getOwnerTree().registerNode(this);
            this.rendered = true;
            if (this.expanded) {
                this.expanded = false;
                this.expand(false, false);
            }
        }
    },/**/
    renderChildren : function(suppressEvent){
        if (suppressEvent !== false){
            this.fireEvent("beforechildrenrendered", this);
        }
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++){
            cs[i].render(true);
        }
        this.childrenRendered = true;
    },
	expand: function(deep, anim, callback){
		if (!this.expanded) {
			if (this.fireEvent("beforeexpand", this, deep, anim) === false) {
			    return;
			}
			
			if (!this.childrenRendered) {
			    this.renderChildren();
			}
			this.expanded = true;
			
//            if (!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim) {
//                this.ui.animExpand(function() {
//                    this.fireEvent("expand", this);
//                    if (typeof callback == "function"){
//                        callback(this);
//                    }
//                    if (deep === true) {
//                        this.expandChildNodes(true);
//                    }
//                }.createDelegate(this));
//                return;
//            } else {
                this.ui.expand();
                this.fireEvent("expand", this);
                if (typeof callback == "function") {
                    callback(this);
                }
//            }
		} else {
			// 展开一个节点路径的功能需要这几行
			if (typeof callback == "function") {
			   callback(this);
			}
		}
		// 展开所有子节点的功能需要这几行
		if (deep === true) {
			this.expandChildNodes(true);
		}
	},
    collapse : function(deep, anim){
        if(this.expanded && !this.isHiddenRoot()){
            if(this.fireEvent("beforecollapse", this, deep, anim) === false){
                return;
            }
            this.expanded = false;

            this.ui.collapse();
            this.fireEvent("collapse", this);
        }
    },
	CLASS_NAME: "AWP.Layer.TreeNode"
});


AWP.Layer.AsyncTreeNode = function(attributes) {
	//if (!config.uiProvider) config.uiProvider = AWP.Layer.TreeNodeUI;
	AWP.Layer.AsyncTreeNode.superclass.constructor.call(this, attributes);
}

Ext.extend(AWP.Layer.AsyncTreeNode, Ext.tree.AsyncTreeNode, {
	defaultUI: AWP.Layer.TreeNodeUI,
	CLASS_NAME: "AWP.Layer.AsyncTreeNode"
});