ZonePanel = function(){
	ZonePanel.superclass.constructor.call(this, {
		id:'zonePanel',
		region:'west',
		title:'Explorer',
		iconCls: 'explorer-icon', 
		split:true,
		width:225,
		minSize:175,
		maxSize:400,
		collapsible: true,
		margins:'0 0 0 5',
		rootVisible:false,
		lines:false,
		autoScroll:true,
		root:new Ext.tree.TreeNode(),
		collapseFirst:false,
		
		tbar: [{
			iconCls:'add-icon',
			text:'Add Zone',
			handler: this.showWindow,
			scope: this
		},{
			id:'delete',
			iconCls:'delete-icon',
			text:'Remove',
			handler: function(){
				var selected = this.getSelectionModel().getSelectedNode();
				if(selected){
					this.removeZone(selected.attributes.id);
				} else {
					// nothing selected
					Ext.ux.NotificationBox.msg("Empty", "Nothing to remove. Select a zone first.");
				}
			},
			scope: this
		}]
	});
	
	this.zones = this.root.appendChild(
		new Ext.tree.TreeNode({
			text:'Zones',
			iconCls: 'x-root-node',
			expanded:true
		})
	);
	
	this.getSelectionModel().on({
		'beforeselect' : function(sm, node){
			return node.isLeaf(); // can not select root node
		},
		'selectionchange' : function(sm, node){
			if(node){
				this.fireEvent('zoneselect', node.attributes);
			}
		},
		scope:this
	});
	
	this.addEvents({zoneselect:true});
	this.on('contextmenu', this.onContextMenu, this);
};

Ext.extend(ZonePanel, Ext.tree.TreePanel, {
	onContextMenu : function(node, e){
		if(!this.menu){ // create context menu on first right click
			this.menu = new Ext.menu.Menu({
				id:'zones-ctx',
				items: [{
					id:'open',
					iconCls:'open-icon',
					text:'Open Zone',
					scope: this,
					handler:function(){
						this.ctxNode.select();
					}
				},{
					text:'Remove',
					iconCls:'delete-icon',
					scope: this,
					handler:function(){
						this.ctxNode.ui.removeClass('x-node-ctx');
						this.removeZone(this.ctxNode.attributes.id);
						this.ctxNode = null;
					}
				},'-',{
					id:'intodns',
					iconCls:'intodns-icon',
					text:'intoDNS Report',
					scope: this,
					handler:function(){
						var zone = this.ctxNode.attributes.id;
					
						var tab= new Ext.ux.ManagedIframePanel({
							title: "intoDNS",
							iconCls: 'tab-intodns',
							loadMask:true,
							defaultSrc:'http://intodns.com/' + zone,
				            autoScroll:false
				    		       
				    	 });
						
						// show tab
						Ext.getCmp("tabPanel").add(tab).show();
					}
				},'-',{
					iconCls:'add-icon',
					text:'Add Zone',
					handler: this.showWindow,
					scope: this
				}]
			});
			this.menu.on('hide', this.onContextHide, this);
		}
		e.stopEvent(); // blocks normal menu
		if(this.ctxNode){
			this.ctxNode.ui.removeClass('x-node-ctx');
			this.ctxNode = null;
		}
		if(node.isLeaf()){
			this.ctxNode = node;
			this.ctxNode.ui.addClass('x-node-ctx');
			// disable load button if already loaded
			this.menu.items.get('open').setDisabled(node.isSelected());
			this.menu.showAt(e.getXY());
		}
	},
	
	onContextHide:function(){
		if(this.ctxNode){
			this.ctxNode.ui.removeClass('x-node-ctx');
			this.ctxNode = null;
		}
	},
	
	showWindow : function(){
		if(!this.win){
			this.win = new ZoneWindow();
			this.win.on('validzone', this.addZone, this);
		}
		this.win.show();
	},
	
	selectZone: function(zone){
		this.getNodeById(zone).select();
	},
	
	removeZone: function(zone) {
		var node = this.getNodeById(zone);
		if (node) {
			var mb = Ext.Msg.show({
				title:'Remove Zone',
				msg: 'Are you sure you want to remove the zone ' + zone + '?',
				buttons: Ext.Msg.YESNO,
				fn: function(btn) {
					switch (btn) {
						case 'yes':
							Ext.Ajax.request({
								url: 'xhr/zone/remove.php',
								method: 'POST',
								params: {zone: zone},
								success: function(response, options) {
									var jsonData = new Object();
									try {
										jsonData = Ext.util.JSON.decode(response.responseText);
									}
									catch (err) {
										jsonData.success = false;
										jsonData.msg = "Error decoding JSON response!";
									}
									
									// log to status panel
									Ext.ux.Status.log({
										msg: jsonData.msg,
										success: jsonData.success
									});
								},
								failure: function(response, options) {
									// log to status panel
									Ext.ux.Status.log({
										msg: "Cannot remove zone. XHR failure!",
										type: 'error'
									});
								}
							});
							// remove zone
							node.remove();
							break;
							
						case 'no': default:
							// do nothing
					} // switch
					
				},
				icon: Ext.Msg.WARNING
			});
		}
	},
	
	addZone : function(attrs, inactive, preventAnim){ 
		var exists = this.getNodeById(attrs.zone);
		if (exists) {
			if(!inactive){
				exists.select();
				exists.ui.highlight();
			}
			return;
		}
		
		Ext.apply(attrs, {
			iconCls:'zone-icon',
			leaf:true,
			id: attrs.zone,
			text:attrs.zone
		});
		
		var node = new Ext.tree.TreeNode(attrs);
		this.zones.appendChild(node);
		node.render(); // pefents Ext.fly error if creating the first node
		
		if(!inactive){
			if(!preventAnim){
				Ext.fly(node.ui.elNode).slideIn('l', {
					callback: node.select, scope: node, duration: .4
				});
			}else{
				node.select();
			}
		}
		
		this.zones.expand(); // expand just in case
		
		return node;
	},

	load: function() {
		var panel = this;
		Ext.Ajax.request({
			url: 'xhr/zone/load.php',
			method: 'POST',
			
			success: function(response, options) {
				var jsonData = new Object();
				try {
					jsonData = Ext.util.JSON.decode(response.responseText);
				}
				catch (err) {
					jsonData.success = false;
					jsonData.msg = "Error decoding JSON response!";
				}
				
				if (jsonData.success) {
					// add each zone to panel
					jsonData.results.forEach(function(e) {
						panel.addZone({
							zone: e,
						}, true);
					});
				}
				
				// log to status panel
				Ext.ux.Status.log({
					msg: jsonData.msg,
					success: jsonData.success
				});
			
			},
			failure: function(response, options) {
				// log to status panel
				Ext.ux.Status.log({
					msg: "Cannot load zones. XHR failure!",
					type: 'error'
				});
			}
		});
	},
	
	// prevent the default context menu when you miss the node
	afterRender: function() {
		ZonePanel.superclass.afterRender.call(this);
		this.el.on('contextmenu', function(e){
			e.preventDefault();
		});
	}
});