Ext.namespace('Ext.ux');

Ext.ux.sliderTreeNodeUI = function(config) {

	// call parent constructor
	Ext.ux.sliderTreeNodeUI.superclass.constructor.call(this, config);

};

Ext.extend(Ext.ux.sliderTreeNodeUI, Ext.tree.TreeNodeUI, {
			renderElements : 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, '" id="opacity_', n.id,
						'" class="x-tree-node-el x-tree-node-leaf x-unselectable ux-sliderTreeNodeUI', a.cls,
						'" unselectable="on">', '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
						'<img width="0px" src="', this.emptyIcon, '" class="" />', '<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">', "</span></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;

				this.slider = new GeoExt.LayerOpacitySlider({
							vertical : false,
							layer : n.parentNode.attributes.layer,
							width : 100,
							style : 'position:relative;top:-20px;left:65px;',
							plugins : new GeoExt.LayerOpacitySliderTip({
										template : '<div>Opacity: {opacity}%</div>'
									}),
							renderTo : document.getElementById('opacity_' + n.id),
							listeners : {
								changecomplete : function(s, val) {
									n.parentNode.attributes.layerlist.setOpacity(this.layer, (val / 100));
								},
								render : function(slider) {
									slider.setValue(30);
								}
							}
						});

				new Ext.Button({
							icon : 'images/world_zoom.png',
							cls : 'x-btn-icon',
							renderTo : document.getElementById('opacity_' + n.id),
							style : 'position:relative;top:-40px;left:170px',
							handler : function() {
								// if (treePanelLayer.getChecked('id', n) == '') {
								// toggleCheck(n, true);
								// }
								var llbbox = n.parentNode.attributes.layer.metadata.llbbox;
								var llbboxol = new OpenLayers.Bounds(llbbox[0], llbbox[1], llbbox[2], llbbox[3]);
								llbboxol.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913'));
								map.zoomToExtent(llbboxol);
							}
						});
				new Ext.Button({
							icon : 'images/information.png',
							cls : 'x-btn-icon',
							renderTo : document.getElementById('opacity_' + n.id),
							style : 'position:relative;top:-61px;left:200px',
							handler : function() {
								showInfoWindow(n.parentNode)
							}
						});
				this.hide();
			},

			// remove elbow icon
			updateExpandIcon : function() {
			}

		});