[%# 1.0@bugzilla.org %]
[%# The contents of this file are subject to the Mozilla Public
  # License Version 1.1 (the "License"); you may not use this file
  # except in compliance with the License. You may obtain a copy of
  # the License at http://www.mozilla.org/MPL/
  #
  # Software distributed under the License is distributed on an "AS
  # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  # implied. See the License for the specific language governing
  # rights and limitations under the License.
  #
  # The Original Code is the Bugzilla Test Runner System.
  #
  # The Initial Developer of the Original Code is Maciej Maczynski.
  # Portions created by Maciej Maczynski are Copyright (C) 2001
  # Maciej Maczynski. All Rights Reserved.
  #
  # Contributor(s): Greg Hendricks <ghendricks@novell.com>
  #                 Scott Sudweeks <ssudweeks@novell.com>
  #					Andrew Nelson <anelson@novell.com>
  #%]

[%# INTERFACE:
  # ...
  #%]
  
[% PROCESS global/variables.none.tmpl %]
[% PROCESS testopia/style.none.tmpl %]
[% PROCESS testopia/blocks.html.tmpl %]

[% javascript_urls.push( 'testopia/js/case.js') %]

[% title = "Environment Editor" %]

[% PROCESS global/header.html.tmpl %]

<style type = "text/css"> 
.product .x-tree-node-icon{
background:url(testopia/img/product.gif);
}
.product .x-tree-node-icon{
background:url(testopia/img/product.gif);
}
.element .x-tree-node-icon{
background:url(testopia/img/element.gif);
}
.property .x-tree-node-icon{
background:url(testopia/img/property.gif);
}
.category .x-tree-node-icon{
background:url(testopia/img/category.gif);
}
.validexp .x-tree-node-icon{
background:url(testopia/img/validexpRed.png);
}
.validexpYellow .x-tree-node-icon{
background:url(testopia/img/validexpYellow.png);
}
</style> 

<script type="text/javascript">
Ext.onReady(function(){
    var Tree = Ext.tree;
/*
 * etree - Environment Tree Panel
 *     This panel represents the environment
 */               
    var etree = new Tree.TreePanel({
        animate: true,
        autoScroll: true,
        enableDD:true,
        containerScroll: true,
        region: 'center',
        title: 'Editing Environment [% environment.name FILTER js %]',
        split: true,
        id: 'environment_tree',
        root: new Tree.AsyncTreeNode({
            text: '[% environment.name %]',
            draggable:false,
            id: '[% environment.id %]',
            action: 'getChildren',
            type: 'environment',
            env_id: '[% environment.id %]'        
        }),
        loader: new Tree.TreeLoader({
            url: "tr_show_environment.cgi",
            listeners: {'beforeload':function(l, node) {
             	l.baseParams.action = 'getChildren'; 
             	l.baseParams.id = node.attributes.id; 
             	l.baseParams.type = node.attributes.type;
             	l.baseParams.env_id = node.attributes.id;
             	l.baseParams.environmentPanel = 'true'; 
             	l.baseParams.environmentId = '[% environment.id %]';
            }}
        }),
        listeners:{
            "textchange": function(node, text, oldText){
            	var httpRequest = new Ext.data.Connection();
            	httpRequest.request({
                	url: 'tr_show_environment.cgi', 
                	params:{
                		action: 'rename',
                		name: text, 
                		env_id: node.id,
                		isactive: true
                	}, 
                	success:function(object){
                		TestopiaUtil.notify.msg('Test Environment updated', 'Environment renamed successfully');
                	}, 
                	failure: testopiaError
            	});  	
            },
            "contextmenu": function(node, event){	
            	if(node.attributes.type == 'category' || node.attributes.type == 'element'){
            		var context = new Ext.menu.Menu({
                		id: 'context menu', 
                		items: [{
                			text: 'Remove ' + node.attributes.text,
                			id: node.attributes.id, 
                			type: node.attributes.type,
                			handler: deleteNode  		
                		}]
            		});
            	}
            	else if(node.attributes.type == 'validexp'){
            		var context = new Ext.menu.Menu({
                		id: 'context menu', 
                		items: [{
                			text: 'Select ' + node.attributes.text,
                			id: node.attributes.id, 
                			type: node.attributes.type,
                			value: node.attributes.value, 
                			handler: changeNode	
                		}]
            		});
            	}
            	
            	else
            		return;
            		
            	context.showAt([event.getPageX(), event.getPageY()]);
            }
            }
    });
    
/*
 * vtree - Variables Tree Panel
 *     This panel represents the environment variables
 */               
    var vtree = new Tree.TreePanel({
        animate: true,
        autoScroll: true,
        enableDD:true,
        containerScroll: true,
        region: 'east',
        title: 'Environment Items',
        split: true,
        width: '300',
        collapsible: true,
        rootVisible: false,
        id: 'variable_tree',
        loader: new Tree.TreeLoader({
            url: "tr_show_environment.cgi",
            listeners: {"beforeload": function(l, node) {
             	l.baseParams.action = 'getChildren'; 
             	l.baseParams.id = node.attributes.id; 
             	l.baseParams.type = node.attributes.type;
             	l.baseParams.env_id = node.attributes.id;
           }}
        }),
        root: new Tree.AsyncTreeNode({
            text: 'root',
            draggable: false,
            id:'0',
            action: 'getChildren',
            type: 'root',
            env_id: '0'               
        }),
        listeners: {
            "textchange": function(node, text, oldText){
            	var nodeText = node.text;
            	var id = node.attributes.id; 
            	var type = node.attributes.type;
            	var httpRequest = new Ext.data.Connection();
            	
            	httpRequest.request({
                	url: 'tr_show_environment.cgi', 
                	params:{
                		action: 'edit',
                		text: text, 
                		id: id, 
                		type:type,
                		value: oldText,  
                		isactive: true
                	}, 
                	success:function(object){
                		if(object.responseText != "action successful")
                		    Ext.MessageBox.alert("response", object.responseText);
                	}, 
                	failure:function(){
                    	alert("Failure");
                	}
            	});  	
           
            }
            
            }
    });
/*
 * Tree Editor defs
 */   
    var environmentTreeEditor = new Tree.TreeEditor(etree, {});
    environmentTreeEditor.cancelOnEscape = true;
    environmentTreeEditor.ignoreNoChange = true;
    environmentTreeEditor.completeOnEnter = true;
    environmentTreeEditor.autosize = true;

    var itemTreeEditor = new Tree.TreeEditor(vtree, {});
    itemTreeEditor.cancelOnEscape = true;
    itemTreeEditor.ignoreNoChange = true;
    itemTreeEditor.completeOnEnter = true;
    itemTreeEditor.autosize = true;

    
/*
 * Functions
 */
    function deleteNode(item){
    	if(item.type == 'category' || item.type == 'element'){
    		var node = etree.getNodeById(item.id);    		
    		if(item.type == 'category'){
    			node.expand(false, true, expandCallBack);
    			return;
       		}
    		
    		else if(item.type == 'element'){
    			if(node.getDepth() > 2){
    				Ext.MessageBox.alert("response", "only first-level elements can be deleted from your environment");
    				return;
    			}
    		}
    	}
    	
    	else{
    		Ext.MessageBox.alert("response", "only first-level elements can be deleted from your environment");
    		return;
    	}
    
    	var httpRequest = new Ext.data.Connection();
    	
    	httpRequest.request({
        	url: 'tr_show_environment.cgi', 
        	params:{
        		action: 'removeNode',
        		id: item.id, 
        		type: item.type, 
        		isactive: true, 
        		environmentId: [% environment.id %]
        	}, 
        	success:function(object){
        		if(object.responseText != "action successful")
        		{
        			Ext.MessageBox.alert("response", object.responseText);
        			return;
        		}
        		
        		var node = etree.getNodeById(item.id);
        		if(node != null)
        			node.remove();
        			
        	}, 
        	failure:function(){
            	alert("Failure");
        	}
    	});  	
    }
    
     function changeNode(item){
		var httpRequest = new Ext.data.Connection();
    	
    	httpRequest.request({
        	url: 'tr_show_environment.cgi', 
        	params:{
        		action: 'set_selected',
        		id: item.id, 
        		type: item.type, 
        		isactive: true, 
        		environmentId: [% environment.id %],
        		value: item.value
        	}, 
        	success:function(object){
        		if(object.responseText != "action successful"){
        			Ext.MessageBox.alert("response", object.responseText);
        			return;
        		}
        		
        		var node = etree.getNodeById(item.id);
        		var parentNode = node.parentNode;
        		var children = parentNode.childNodes;
        		for(i=0; i<children.length; i++){
        			var c = children[i].getUI();
        			c.removeClass(["validexpYellow"]);
        			c.addClass(["validexp"]);
        		}
        		var c = node.getUI();
        		c.removeClass(["validexp"]);
        		c.addClass(["validexpYellow"]); 			
        	}, 
        	failure:function(){
            	alert("Failure");
        	}
    	}); 
	}
	
    function expandCallBack(node){
    	var children = node.childNodes;
    	for(i=0;i<children.length;i++){
    		var child = children[i];
    		checkAndRemoveNode(child);     				
    	}
		node.remove();
		return;    	
    }
        
    function checkAndRemoveNode(node){
    	if(node.attributes.type != 'element')
    		return;
    	if(node.getDepth() > 2)
    		return;
    	
    	var item = {};
    	item.id = node.attributes.id; 
    	item.type = node.attributes.type; 
    	deleteNode(item);
    }       
        
    vtree.on("contextmenu", function(node, event){	
    	
    	if(node.attributes.type == 'product'){
    		var context = new Ext.menu.Menu({
        		id: 'context menu', 
        		items: [{
        			text: 'Add category to ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: addNode  		
        		}]
            });
    	}
    	    	
    	else if(node.attributes.type == 'category'){
    		var context = new Ext.menu.Menu({
        		id: 'context menu', 
        		items: [{
        			text: 'Add element to ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: addNode 		
        		},{
        			text: 'Delete ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: deleteElement 		
        		},{
        			text: 'Rename ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: renameElement 		
        		}]
    		});
    	}
    	
    	else if(node.attributes.type == 'element'){
    		var context = new Ext.menu.Menu({
        		id: 'context menu', 
        		items: [{
        			text: 'Add element to ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: addNode, 
        			property: 'false' 		
        		},{
        			text: 'Add property to ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: addNode, 
        			property: 'true'  		
        		},{
        			text: 'Delete ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: deleteElement 		
        		},{
        			text: 'Rename ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: renameElement 		
        		}]
    		});
    	}
    	
    	else if(node.attributes.type == 'property'){
    		var context = new Ext.menu.Menu({
        		id: 'context menu', 
        		items: [{
        			text: 'Add Value to ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: addNode, 
        			property: 'false' 		
        		},{
        			text: 'Delete ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: deleteElement 		
        		},{
        			text: 'Rename ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: renameElement 		
        		}]
    		});
    	}
    	
    	else if(node.attributes.type == 'validexp'){
    		var context = new Ext.menu.Menu({
        		id: 'context menu', 
        		items: [{
        			text: 'Delete ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: deleteElement, 
        			value: node.attributes.value 		
        		},{
        			text: 'Rename ' + node.attributes.text,
        			nodeId: node.attributes.id, 
        			type: node.attributes.type,
        			handler: renameElement 		
        		}]
    		});
    	}
    	
    	else
    		return;
    	
    	context.showAt([event.getPageX(), event.getPageY()]);
    	    	
    });
     
    function addNode(item){
    	if(item.type == 'category' || item.type == 'element' || item.type == 'product' || item.type == 'property'){
    		var node = vtree.getNodeById(item.nodeId);
    	}
    	
    	else{
    		Ext.MessageBox.alert("response", "Elements can only be added to categories or elements");
    		return;
    	}
    
    	var httpRequest = new Ext.data.Connection();
    	var type = item.type; 
    	if(type == 'element' && item.property == 'false'){
    		type = 'child';
    	}
    	
    	httpRequest.request({
        	url: 'tr_show_environment.cgi', 
        	params:{
        		action: 'createChild',
        		id: item.nodeId, 
        		type: type, 
        		isactive: true, 
        		environmentId: [% environment.id %]
        	}, 
        	success:function(object){
        		var node = vtree.getNodeById(item.nodeId);
        		node.leaf = false;
        		var json = new Ext.data.JsonReader();
        		var newNode = new Ext.tree.TreeNode(Ext.util.JSON.decode(object.responseText));
        		node.appendChild(newNode);
        	}, 
        	failure:function(){
            	alert("Failure");
        	}
    	});  	
    }
    
    function deleteElement(item){
    	if(item.type == 'category' || item.type == 'element' || item.type == 'product' || item.type == 'property' || item.type == 'validexp'){
    		var node = vtree.getNodeById(item.nodeId);
    	}
    	
    	else{
    		Ext.MessageBox.alert("response", "Error handling delete");
    		return;
    	}
    	
    	var httpRequest = new Ext.data.Connection();
    	
    	httpRequest.request({
        	url: 'tr_show_environment.cgi', 
        	params:{
        		action: 'deleteElement',
        		id: item.nodeId, 
        		type: item.type, 
        		isactive: true, 
        		environmentId: [% environment.id %],
        		value: item.value
        	}, 
        	success:function(object){
        		if(object.responseText == 'action successful')
        		{
        			var node = vtree.getNodeById(item.nodeId);
        			node.remove();
        		}
        		
        		else
        			Ext.MessageBox.alert("response", object.responseText);
        		
        	}, 
        	failure:function(){
            	alert("Failure");
        	}
    	}); 
    }
    function renameElement(item){
    	var node = vtree.getNodeById(item.nodeId);
    	var el = node.getUI().getTextEl();
    	itemTreeEditor.startEdit(el);    	
    }
    
    
    function copyNode(node){
   		var copy = new Tree.TreeNode(Ext.apply({}, node.attributes));
    	for(var i=0; i < node.childNodes.length; i++){
			n = node.childNodes[i];
			if(n){
				copy.appendChild(copyNode(n));
			}
		}
		return copy; 
    };
   
    itemTreeEditor.on("beforestartedit", function(editor, element, value){
   		if(!editor.editNode)
   			return true;
   		var type = editor.editNode.attributes.type;
   		if(type == 'product' || type == 'classification')
   			return false;
    });
   
    environmentTreeEditor.on('beforestartedit', function(editor, element, value){
        if(editor.editNode.attributes.type != "environment")
   	        return false;
    }); 
    
    vtree.on("enddrag", function(treePanel, node, dd, e){
    	var connection = new Ext.data.Connection;
    	connection.request({
        	url: 'tr_show_environment.cgi',
        	method: 'POST',
        	params: {element_id: node.id, environment_id: [%environment.id%], type: node.attributes.type, action: 'move'},
         	failure: function() {
                Ext.Msg.alert('Status', '"the item could not be added to the list"');
         	}
		});
    }, this); 
    
    etree.on("beforenodedrop", function(event){
    	//alert("please let it fire");
    	event.dropNode = copyNode(event.dropNode);
    });
        

    var EnvironmentPanel = new Ext.Panel({
        id: 'environment_panel',
        layout: 'border',
        applyTo: 'environment_div',
        height: 800,
        items: [
            etree, 
            vtree,
        {
            title: 'Help',
            collapsible: true,
            region: 'south',
            split: true,
            height: 200
        }]
    });
});


</script>

<div id="environment_div"></div>

[% PROCESS global/footer.html.tmpl %]
