|  | @@ -1,2453 +0,0 @@
 | 
	
		
			
				|  |  | -"use strict";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -// Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
 | 
	
		
			
				|  |  | -// Secretary of Defense (Personnel & Readiness).
 | 
	
		
			
				|  |  | -// 
 | 
	
		
			
				|  |  | -// Licensed under the Apache License, Version 2.0 (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.apache.org/licenses/LICENSE-2.0
 | 
	
		
			
				|  |  | -// 
 | 
	
		
			
				|  |  | -// Unless required by applicable law or agreed to in writing, software distributed under the License
 | 
	
		
			
				|  |  | -// is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 | 
	
		
			
				|  |  | -// or implied. See the License for the specific language governing permissions and limitations under
 | 
	
		
			
				|  |  | -// the License.
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -/// vwf/view/editor creates a view interface for editor functions. 
 | 
	
		
			
				|  |  | -/// 
 | 
	
		
			
				|  |  | -/// @module vwf/view/editor
 | 
	
		
			
				|  |  | -/// @requires version
 | 
	
		
			
				|  |  | -/// @requires vwf/view
 | 
	
		
			
				|  |  | -/// @requires vwf/utility
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -define( [ 
 | 
	
		
			
				|  |  | -    "module", 
 | 
	
		
			
				|  |  | -    "version", 
 | 
	
		
			
				|  |  | -    "vwf/view", 
 | 
	
		
			
				|  |  | -    "vwf/utility",
 | 
	
		
			
				|  |  | -    "vwf/view/lib/ace/ace", 
 | 
	
		
			
				|  |  | -    "jquery", 
 | 
	
		
			
				|  |  | -    "jquery-ui", 
 | 
	
		
			
				|  |  | -    "jquery-encoder-0.1.0" 
 | 
	
		
			
				|  |  | -    ], function( module, version, view, utility, ace, $ ) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    return view.load( module, {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // == Module Definition ====================================================================
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        initialize: function() {
 | 
	
		
			
				|  |  | -            var self = this;
 | 
	
		
			
				|  |  | -            this.ace = window.ace;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.nodes = {};
 | 
	
		
			
				|  |  | -            this.scenes = {};
 | 
	
		
			
				|  |  | -            this.allScripts = {};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // EDITOR CLOSED  --> 0
 | 
	
		
			
				|  |  | -            // HIERARCHY OPEN --> 1
 | 
	
		
			
				|  |  | -            // USER LIST OPEN --> 2
 | 
	
		
			
				|  |  | -            // TIMELINE OPEN  --> 3
 | 
	
		
			
				|  |  | -            // ABOUT OPEN     --> 4
 | 
	
		
			
				|  |  | -            this.editorView = 0;
 | 
	
		
			
				|  |  | -            this.editorOpen = false;
 | 
	
		
			
				|  |  | -            this.timelineInit = false;
 | 
	
		
			
				|  |  | -            this.aboutInit = false;
 | 
	
		
			
				|  |  | -            this.codeEditorInit = false;
 | 
	
		
			
				|  |  | -            this.modelsInit = false;
 | 
	
		
			
				|  |  | -            this.editingScript = false;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.topdownName = '#topdown_a';
 | 
	
		
			
				|  |  | -            this.topdownTemp = '#topdown_b';
 | 
	
		
			
				|  |  | -            this.clientList = '#client_list';
 | 
	
		
			
				|  |  | -            this.timeline = '#time_control';
 | 
	
		
			
				|  |  | -            this.about = '#about_tab';
 | 
	
		
			
				|  |  | -            this.codeEditor = '#codeEditor_tab';
 | 
	
		
			
				|  |  | -            this.models = '#model_a';
 | 
	
		
			
				|  |  | -            this.modelsTemp = '#model_b';
 | 
	
		
			
				|  |  | -            this.currentNodeID = '';
 | 
	
		
			
				|  |  | -            this.currentModelID = '';
 | 
	
		
			
				|  |  | -            this.currentModelURL = '';
 | 
	
		
			
				|  |  | -            this.highlightedChild = '';
 | 
	
		
			
				|  |  | -            this.intervalTimer = 0;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.activeCameraID = undefined;
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -           $(document.head).append('<style type="text/css" media="screen"> #editorlive { height: 500px; width: 800px; } </style>');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('body').append(
 | 
	
		
			
				|  |  | -                "<div id='editor' class='relClass'>\n" +
 | 
	
		
			
				|  |  | -                "  <div class='uiContainer'>\n" +
 | 
	
		
			
				|  |  | -                "    <div class='editor-tabs' id='tabs'>\n" +
 | 
	
		
			
				|  |  | -                "      <img id='x' style='display:none' src='images/tab_X.png' alt='x' />\n" +
 | 
	
		
			
				|  |  | -                "      <img id='hierarchy' src='images/tab_Application.png' alt='application' />\n" +
 | 
	
		
			
				|  |  | -                "      <img id='userlist' src='images/tab_Users.png' alt='users' />\n" +
 | 
	
		
			
				|  |  | -                "      <img id='timeline' src='images/tab_Time.png' alt='time' />\n" + 
 | 
	
		
			
				|  |  | -                "      <img id='models' src='images/tab_Models.png' alt='models' />\n" +
 | 
	
		
			
				|  |  | -                "      <img id='about' src='images/tab_About.png' alt='about' />\n" +
 | 
	
		
			
				|  |  | -                "      <img id='codeEditor' src='images/tab_CodeEditor.png' alt='code' />\n" +
 | 
	
		
			
				|  |  | -                "    </div>\n" +
 | 
	
		
			
				|  |  | -                "  </div>\n" + 
 | 
	
		
			
				|  |  | -                "</div>" + 
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='topdown_a'></div></div></div>" + 
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='topdown_b'></div></div></div>" + 
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='client_list'></div></div></div>" +
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='time_control'></div></div></div>" +
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='about_tab'></div></div></div>" +
 | 
	
		
			
				|  |  | -                 "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='codeEditor_tab'></div></div></div>" +
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='model_a'></div></div></div>" +
 | 
	
		
			
				|  |  | -                "<div class='relClass'><div class='uiContainer'><div class='vwf-tree' id='model_b'></div></div></div>"
 | 
	
		
			
				|  |  | -            );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -           
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            $('#tabs').stop().animate({ opacity:0.0 }, 0);
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            $('#tabs').mouseenter( function(evt) { 
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -                $('#tabs').stop().animate({ opacity:1.0 }, 175);
 | 
	
		
			
				|  |  | -                return false; 
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            $('#tabs').mouseleave( function(evt) { 
 | 
	
		
			
				|  |  | -                evt.stopPropagation(); 
 | 
	
		
			
				|  |  | -                $('#tabs').stop().animate({ opacity:0.0 }, 175);
 | 
	
		
			
				|  |  | -                return false; 
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            $('#hierarchy').click ( function(evt) {
 | 
	
		
			
				|  |  | -                openEditor.call(self, 1);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#userlist').click ( function(evt) {
 | 
	
		
			
				|  |  | -                openEditor.call(self, 2);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#timeline').click ( function(evt) {
 | 
	
		
			
				|  |  | -                openEditor.call(self, 3);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#about').click ( function(evt) {
 | 
	
		
			
				|  |  | -                openEditor.call(self, 4);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#models').click ( function(evt) {
 | 
	
		
			
				|  |  | -                openEditor.call(self, 5);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#codeEditor').click ( function(evt) {
 | 
	
		
			
				|  |  | -                openEditor.call(self, 6);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#x').click ( function(evt) {
 | 
	
		
			
				|  |  | -                closeEditor.call(self);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#topdown_a').hide();
 | 
	
		
			
				|  |  | -            $('#topdown_b').hide();
 | 
	
		
			
				|  |  | -            $('#client_list').hide();
 | 
	
		
			
				|  |  | -            $('#time_control').hide();
 | 
	
		
			
				|  |  | -            $('#about_tab').hide();
 | 
	
		
			
				|  |  | -            $('#codeEditor_tab').hide();
 | 
	
		
			
				|  |  | -            $('#model_a').hide();
 | 
	
		
			
				|  |  | -            $('#model_b').hide();
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            var canvas = document.getElementById(vwf_view.kernel.find("", "/")[0]);
 | 
	
		
			
				|  |  | -            if ( canvas ) {
 | 
	
		
			
				|  |  | -                $('#topdown_a').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#topdown_b').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#client_list').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#time_control').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#about_tab').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#codeEditor_tab').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#model_a').height(canvas.height);
 | 
	
		
			
				|  |  | -                $('#model_b').height(canvas.height);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            else
 | 
	
		
			
				|  |  | -            {    
 | 
	
		
			
				|  |  | -                $('#topdown_a').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#topdown_b').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#client_list').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#time_control').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#about_tab').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#codeEditor_tab').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#model_a').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -                $('#model_b').height(window.innerHeight-20);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        createdNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
 | 
	
		
			
				|  |  | -            childSource, childType, childIndex, childName, callback /* ( ready ) */ ) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var nodeIDAttribute = $.encoder.encodeForHTMLAttribute("id", nodeID, true);
 | 
	
		
			
				|  |  | -            var childIDAttribute = $.encoder.encodeForHTMLAttribute("id", childID, true);
 | 
	
		
			
				|  |  | -            var childIDAlpha = $.encoder.encodeForAlphaNumeric(childID);
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            var kernel = this.kernel;
 | 
	
		
			
				|  |  | -            var self = this;
 | 
	
		
			
				|  |  | -            var parent = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -            var node = this.nodes[ childID ] = {
 | 
	
		
			
				|  |  | -                children: [],
 | 
	
		
			
				|  |  | -                properties: [],
 | 
	
		
			
				|  |  | -                events: {},
 | 
	
		
			
				|  |  | -                methods: {},
 | 
	
		
			
				|  |  | -                parent: parent,
 | 
	
		
			
				|  |  | -                parentID: nodeID,
 | 
	
		
			
				|  |  | -                ID: childID,
 | 
	
		
			
				|  |  | -                extendsID: childExtendsID,
 | 
	
		
			
				|  |  | -                implementsIDs: childImplementsIDs,
 | 
	
		
			
				|  |  | -                source: childSource, 
 | 
	
		
			
				|  |  | -                name: childName,
 | 
	
		
			
				|  |  | -            };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( parent ) {
 | 
	
		
			
				|  |  | -                parent.children.push( node );
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( childID == vwf_view.kernel.find("", "/")[0] && childExtendsID && this.kernel.test( childExtendsID,
 | 
	
		
			
				|  |  | -                    "self::element(*,'http://vwf.example.com/aframe/ascene.vwf')", childExtendsID ) ) {
 | 
	
		
			
				|  |  | -                this.scenes[ childID ] = node;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            if ( nodeID === this.currentNodeID && this.editingScript == false )
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                $('#children > div:last').css('border-bottom-width', '1px');
 | 
	
		
			
				|  |  | -                $("#children").append("<div id='" + childIDAlpha + "' data-nodeID='" + childIDAttribute + "' class='childContainer'><div class='childEntry'><b>" + $.encoder.encodeForHTML(childName) + "</b></div></div>");
 | 
	
		
			
				|  |  | -                $('#' + childIDAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                    drillDown.call(self, $(this).attr("data-nodeID"), nodeIDAttribute);
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -                $('#children > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( nodeID === this.kernel.application() && childName === 'camera' ) {
 | 
	
		
			
				|  |  | -                this.activeCameraID = childID;    
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        createdProperty: function (nodeID, propertyName, propertyValue) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            return this.initializedProperty(nodeID, propertyName, propertyValue);   
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        initializedProperty: function (nodeID, propertyName, propertyValue) {
 | 
	
		
			
				|  |  | -   
 | 
	
		
			
				|  |  | -            var node = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( ! node ) return;  // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var property = node.properties[ propertyName ] = createProperty.call( this, node, propertyName, propertyValue );
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            node.properties.push( property );
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        deletedNode: function (nodeID) {
 | 
	
		
			
				|  |  | -            var node = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -            node.parent.children.splice( node.parent.children.indexOf(node), 1 );
 | 
	
		
			
				|  |  | -            delete this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -            var nodeIDAttribute = $.encoder.encodeForAlphaNumeric(nodeID); // $.encoder.encodeForHTMLAttribute("id", nodeID, true);
 | 
	
		
			
				|  |  | -            $('#' + nodeIDAttribute).remove();
 | 
	
		
			
				|  |  | -            $('#children > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //addedChild: [ /* nodeID, childID, childName */ ],
 | 
	
		
			
				|  |  | -        //removedChild: [ /* nodeID, childID */ ],
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        satProperty: function (nodeID, propertyName, propertyValue) {
 | 
	
		
			
				|  |  | -            var node = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( ! node ) return;  // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            // It is possible for a property to have satProperty called for it without ever getting an
 | 
	
		
			
				|  |  | -            // initializedProperty (if that property delegated to itself or another on replication)
 | 
	
		
			
				|  |  | -            // Catch that case here and create the property
 | 
	
		
			
				|  |  | -            if ( ! node.properties[ propertyName ] ) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                var property = node.properties[ propertyName ] = createProperty.call( this, node, propertyName, propertyValue );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                node.properties.push( property );
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            if ( propertyName === "activeCamera" ) {
 | 
	
		
			
				|  |  | -                if ( this.nodes[ propertyValue ] !== undefined ) {
 | 
	
		
			
				|  |  | -                    this.activeCameraID = propertyValue;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            try {
 | 
	
		
			
				|  |  | -                propertyValue = utility.transform( propertyValue, utility.transforms.transit );
 | 
	
		
			
				|  |  | -                node.properties[ propertyName ].value = JSON.stringify( propertyValue );
 | 
	
		
			
				|  |  | -                node.properties[ propertyName ].rawValue = propertyValue ;
 | 
	
		
			
				|  |  | -            } catch (e) {
 | 
	
		
			
				|  |  | -                this.logger.warnx( "satProperty", nodeID, propertyName, propertyValue,
 | 
	
		
			
				|  |  | -                    "stringify error:", e.message );
 | 
	
		
			
				|  |  | -                node.properties[ propertyName ].value = propertyValue;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( ( this.editorView == 1 ) && ( this.currentNodeID == nodeID ) ) {
 | 
	
		
			
				|  |  | -                var nodeIDAttribute = $.encoder.encodeForAlphaNumeric(nodeID); // $.encoder.encodeForHTMLAttribute("id", nodeID, true);
 | 
	
		
			
				|  |  | -                var propertyNameAttribute = $.encoder.encodeForAlphaNumeric("id", propertyName, true);
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -                // No need to escape propertyValue, because .val does its own escaping
 | 
	
		
			
				|  |  | -                $( '#input-' + nodeIDAttribute + '-' + propertyNameAttribute ).val( node.properties[ propertyName ].getValue() );
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        //gotProperty: [ /* nodeID, propertyName, propertyValue */ ],
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        createdMethod: function( nodeID, methodName, methodParameters, methodBody ){
 | 
	
		
			
				|  |  | -            var node = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -            if ( node ) {
 | 
	
		
			
				|  |  | -                node.methods[ methodName ] = methodParameters;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //},
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        createdEvent: function( nodeID, eventName, eventParameters ) {
 | 
	
		
			
				|  |  | -            var node = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -            if ( node ) {
 | 
	
		
			
				|  |  | -                node.events[ eventName ] = eventParameters;
 | 
	
		
			
				|  |  | -            }         
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        firedEvent: function ( nodeID, eventName, eventParameters ) {
 | 
	
		
			
				|  |  | -            if(eventName == "pointerHover") {
 | 
	
		
			
				|  |  | -                highlightChildInHierarchy.call(this, nodeID);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        executed: function( nodeID, scriptText, scriptType ) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // var nodeScript = {
 | 
	
		
			
				|  |  | -            //     text: scriptText,
 | 
	
		
			
				|  |  | -            //     type: scriptType,
 | 
	
		
			
				|  |  | -            // };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // if ( !this.allScripts[ nodeID ] ) {
 | 
	
		
			
				|  |  | -            //     var nodeScripts = new Array();
 | 
	
		
			
				|  |  | -            //     nodeScripts.push(nodeScript);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            //     this.allScripts[ nodeID ] = nodeScripts;
 | 
	
		
			
				|  |  | -            // }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // else {
 | 
	
		
			
				|  |  | -            //     this.allScripts[ nodeID ].push(nodeScript);
 | 
	
		
			
				|  |  | -            // }
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //ticked: [ /* time */ ],
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -    } );
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  | -    // -- getChildByName --------------------------------------------------------------------
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  | -    function getChildByName( node, childName ) {
 | 
	
		
			
				|  |  | -        var childNode = undefined;
 | 
	
		
			
				|  |  | -        for ( var i = 0; i < node.children.length && childNode === undefined; i++ ) {
 | 
	
		
			
				|  |  | -            if ( node.children[i].name == childName ) {
 | 
	
		
			
				|  |  | -                childNode = node.children[i];    
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        return childNode;
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function updateCameraProperties () {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if ( this.currentNodeID == this.activeCameraID ) {
 | 
	
		
			
				|  |  | -            if ( !this.intervalTimer ) {
 | 
	
		
			
				|  |  | -                var self = this;
 | 
	
		
			
				|  |  | -                this.intervalTimer = setInterval( function() { updateProperties.call( self, self.activeCameraID ) }, 200 );
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else {
 | 
	
		
			
				|  |  | -            if ( this.intervalTimer ) {
 | 
	
		
			
				|  |  | -                clearInterval( this.intervalTimer );
 | 
	
		
			
				|  |  | -                this.intervalTimer = 0;
 | 
	
		
			
				|  |  | -            } 
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function updateProperties( nodeName ) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var nodeID = nodeName;
 | 
	
		
			
				|  |  | -        var properties = getProperties.call( this, this.kernel, nodeID );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        for ( var i in properties ) { 
 | 
	
		
			
				|  |  | -            try {
 | 
	
		
			
				|  |  | -                var propertyName = properties[i].prop.name;
 | 
	
		
			
				|  |  | -                var propertyValue = JSON.stringify( utility.transform( vwf.getProperty( nodeID, propertyName, [] ), utility.transforms.transit ));
 | 
	
		
			
				|  |  | -            } catch ( e ) {
 | 
	
		
			
				|  |  | -                this.logger.warnx( "satProperty", nodeID, propertyName, propertyValue, "stringify error:", e.message );
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if ( propertyValue ) {
 | 
	
		
			
				|  |  | -                var nodeIDAttribute = $.encoder.encodeForAlphaNumeric( nodeID ); 
 | 
	
		
			
				|  |  | -                var propertyNameAttribute = $.encoder.encodeForHTMLAttribute( "id", propertyName, true );
 | 
	
		
			
				|  |  | -                var inputElement$ = $( '#input-' + nodeIDAttribute + '-' + propertyNameAttribute );
 | 
	
		
			
				|  |  | -                // Only update if property value input is not in focus
 | 
	
		
			
				|  |  | -                // If in focus, change font style to italic
 | 
	
		
			
				|  |  | -                if ( ! inputElement$.is(":focus") ) {
 | 
	
		
			
				|  |  | -                    inputElement$.val( propertyValue );
 | 
	
		
			
				|  |  | -                    inputElement$.css( "font-style", "normal");
 | 
	
		
			
				|  |  | -                } else {
 | 
	
		
			
				|  |  | -                    inputElement$.css( "font-style", "italic");
 | 
	
		
			
				|  |  | -                }  
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  | -    // -- openEditor ------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function openEditor(eView) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        if(eView == 0)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            closeEditor.call(this);
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        if(this.editorView != eView)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            // Hierarchy
 | 
	
		
			
				|  |  | -            if(eView == 1)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -                var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                if( !this.currentNodeID )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    this.currentNodeID = vwf_view.kernel.find("", "/")[0];
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                drill.call(this, this.currentNodeID, undefined);
 | 
	
		
			
				|  |  | -                $(this.clientList).hide();
 | 
	
		
			
				|  |  | -                $(this.timeline).hide();
 | 
	
		
			
				|  |  | -                $(this.about).hide();
 | 
	
		
			
				|  |  | -                $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -                $(this.models).hide();
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                if(this.editorOpen)
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    $(topdownName).hide();
 | 
	
		
			
				|  |  | -                    $(topdownTemp).show();
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                else
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    $(topdownTemp).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -                this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            else if (this.editingScript)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                // Reset width if on script
 | 
	
		
			
				|  |  | -                this.editingScript = false;
 | 
	
		
			
				|  |  | -                $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -                $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // User List
 | 
	
		
			
				|  |  | -            if(eView == 2)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                $(this.topdownName).hide();
 | 
	
		
			
				|  |  | -                $(this.topdownTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.timeline).hide();
 | 
	
		
			
				|  |  | -                $(this.about).hide();
 | 
	
		
			
				|  |  | -                $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -                $(this.models).hide();
 | 
	
		
			
				|  |  | -                $(this.modelsTemp).hide();
 | 
	
		
			
				|  |  | -                showUserList.call(this);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Timeline
 | 
	
		
			
				|  |  | -            else if(eView == 3)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                $(this.topdownName).hide();
 | 
	
		
			
				|  |  | -                $(this.topdownTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.clientList).hide();
 | 
	
		
			
				|  |  | -                $(this.about).hide();
 | 
	
		
			
				|  |  | -                $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -                $(this.models).hide();
 | 
	
		
			
				|  |  | -                $(this.modelsTemp).hide();
 | 
	
		
			
				|  |  | -                showTimeline.call(this);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // About
 | 
	
		
			
				|  |  | -            else if(eView == 4)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                $(this.topdownName).hide();
 | 
	
		
			
				|  |  | -                $(this.topdownTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.clientList).hide();
 | 
	
		
			
				|  |  | -                $(this.timeline).hide();
 | 
	
		
			
				|  |  | -                $(this.models).hide();
 | 
	
		
			
				|  |  | -                $(this.modelsTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -                showAboutTab.call(this);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Models
 | 
	
		
			
				|  |  | -            else if(eView == 5)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                var models = this.models;
 | 
	
		
			
				|  |  | -                var modelsTemp = this.modelsTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                showModelsTab.call(this, this.currentModelID, this.currentModelURL);
 | 
	
		
			
				|  |  | -                $(this.topdownName).hide();
 | 
	
		
			
				|  |  | -                $(this.topdownTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.clientList).hide();
 | 
	
		
			
				|  |  | -                $(this.timeline).hide();
 | 
	
		
			
				|  |  | -                $(this.about).hide();
 | 
	
		
			
				|  |  | -                $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                if(this.editorOpen)
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    $(models).hide();
 | 
	
		
			
				|  |  | -                    $(modelsTemp).show();
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                else
 | 
	
		
			
				|  |  | -                {                
 | 
	
		
			
				|  |  | -                    $(modelsTemp).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                this.models = modelsTemp;
 | 
	
		
			
				|  |  | -                this.modelsTemp = models;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Code Editor
 | 
	
		
			
				|  |  | -            else if(eView == 6)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                $(this.topdownName).hide();
 | 
	
		
			
				|  |  | -                $(this.topdownTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.clientList).hide();
 | 
	
		
			
				|  |  | -                $(this.timeline).hide();
 | 
	
		
			
				|  |  | -                $(this.models).hide();
 | 
	
		
			
				|  |  | -                $(this.modelsTemp).hide();
 | 
	
		
			
				|  |  | -                $(this.about).hide();
 | 
	
		
			
				|  |  | -                showCodeEditorTab.call(this);
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if(this.editorView == 0)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                $('#vwf-root').animate({ 'left' : "-=260px" }, 175);
 | 
	
		
			
				|  |  | -                $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -                $('#x').delay(1000).css({ 'display' : 'inline' });
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.editorView = eView;
 | 
	
		
			
				|  |  | -            this.editorOpen = true;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- closeEditor -----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function closeEditor() // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if (this.editorOpen && this.editorView == 1) // Hierarchy view open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(topdownName).hide('slide', {direction: 'right'}, 175);
 | 
	
		
			
				|  |  | -            $(topdownName).empty();
 | 
	
		
			
				|  |  | -            $(this.clientList).hide();
 | 
	
		
			
				|  |  | -            $(this.timeline).hide();
 | 
	
		
			
				|  |  | -            $(this.about).hide();
 | 
	
		
			
				|  |  | -             $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -            $(this.models).hide();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        else if (this.editorOpen && this.editorView == 2) // Client list open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(this.clientList).hide('slide', {direction: 'right'}, 175);
 | 
	
		
			
				|  |  | -            $(topdownName).hide();
 | 
	
		
			
				|  |  | -            $(this.timeline).hide();
 | 
	
		
			
				|  |  | -            $(this.about).hide();
 | 
	
		
			
				|  |  | -             $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -            $(this.models).hide();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        else if (this.editorOpen && this.editorView == 3) // Timeline open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(this.timeline).hide('slide', {direction: 'right'}, 175);
 | 
	
		
			
				|  |  | -            $(topdownName).hide();
 | 
	
		
			
				|  |  | -            $(this.clientList).hide();
 | 
	
		
			
				|  |  | -            $(this.about).hide();
 | 
	
		
			
				|  |  | -            $(this.models).hide();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        else if (this.editorOpen && this.editorView == 4) // About open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(this.about).hide('slide', {direction: 'right'}, 175);
 | 
	
		
			
				|  |  | -             $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -            $(topdownName).hide();
 | 
	
		
			
				|  |  | -            $(this.clientList).hide();
 | 
	
		
			
				|  |  | -            $(this.timeline).hide();
 | 
	
		
			
				|  |  | -            $(this.models).hide();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        else if (this.editorOpen && this.editorView == 5) // Models open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(this.models).hide('slide', {direction: 'right'}, 175);
 | 
	
		
			
				|  |  | -            $(topdownName).hide();
 | 
	
		
			
				|  |  | -            $(this.clientList).hide();
 | 
	
		
			
				|  |  | -            $(this.timeline).hide();
 | 
	
		
			
				|  |  | -            $(this.about).hide();
 | 
	
		
			
				|  |  | -             $(this.codeEditor).hide();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else if (this.editorOpen && this.editorView == 6) // Code Editor open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(this.codeEditor).hide('slide', {direction: 'right'}, 175);
 | 
	
		
			
				|  |  | -             $(this.about).hide();
 | 
	
		
			
				|  |  | -            $(topdownName).hide();
 | 
	
		
			
				|  |  | -            $(this.clientList).hide();
 | 
	
		
			
				|  |  | -            $(this.timeline).hide();
 | 
	
		
			
				|  |  | -            $(this.models).hide();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $('#vwf-root').animate({ 'left' : "+=260px" }, 175);
 | 
	
		
			
				|  |  | -        $('#editor').animate({ 'left' : "0px" }, 175);
 | 
	
		
			
				|  |  | -        $('#x').css({ 'display' : 'none' });
 | 
	
		
			
				|  |  | -        this.editorView = 0;
 | 
	
		
			
				|  |  | -        this.editorOpen = false;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- showUserList ----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function showUserList() // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var clientList = this.clientList;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        viewClients.call(this);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if (!this.editorOpen)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(clientList).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(clientList).show();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- viewClients -----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function viewClients() {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var app = window.location.pathname;
 | 
	
		
			
				|  |  | -        var pathSplit = app.split('/');
 | 
	
		
			
				|  |  | -        if ( pathSplit[0] == "" ) {          
 | 
	
		
			
				|  |  | -            pathSplit.shift();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        if ( pathSplit[ pathSplit.length - 1 ] == "" ) {
 | 
	
		
			
				|  |  | -            pathSplit.pop();
 | 
	
		
			
				|  |  | -        }            
 | 
	
		
			
				|  |  | -        var instIndex = pathSplit.length - 1;
 | 
	
		
			
				|  |  | -        if ( pathSplit.length > 2 ) {
 | 
	
		
			
				|  |  | -            if ( pathSplit[ pathSplit.length - 2 ] == "load" ) {
 | 
	
		
			
				|  |  | -                instIndex = pathSplit.length - 3;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        if ( pathSplit.length > 3 ) {
 | 
	
		
			
				|  |  | -            if ( pathSplit[ pathSplit.length - 3 ] == "load" ) {
 | 
	
		
			
				|  |  | -                instIndex = pathSplit.length - 4;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var root = "";
 | 
	
		
			
				|  |  | -        for ( var i=0; i < instIndex; i++ ) {
 | 
	
		
			
				|  |  | -            if ( root != "" ) {
 | 
	
		
			
				|  |  | -                root = root + "/";
 | 
	
		
			
				|  |  | -            } 
 | 
	
		
			
				|  |  | -            root = root + pathSplit[i];
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(root.indexOf('.vwf') != -1) root = root.substring(0, root.lastIndexOf('/'));
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        var clients$ = $(this.clientList);
 | 
	
		
			
				|  |  | -        var node = this.nodes[ "http://vwf.example.com/clients.vwf" ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        clients$.html("<div class='header'>Connected Clients</div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node children
 | 
	
		
			
				|  |  | -        clients$.append("<div id='clientsChildren'></div>");
 | 
	
		
			
				|  |  | -        for ( var i = 0; i < node.children.length; i++ ) {
 | 
	
		
			
				|  |  | -            var nodeChildIDAttribute = $.encoder.encodeForHTMLAttribute("id", node.children[i].ID, true);
 | 
	
		
			
				|  |  | -            var nodeChildIDAlpha = $.encoder.encodeForAlphaNumeric(node.children[i].ID);
 | 
	
		
			
				|  |  | -            var nodeChildNameHTML = $.encoder.encodeForHTML(node.children[i].name);
 | 
	
		
			
				|  |  | -            $('#clientsChildren').append("<div id='" + nodeChildIDAlpha + "' data-nodeID='" + nodeChildIDAttribute + "' class='childContainer'><div class='childEntry'><b>" + nodeChildNameHTML + "</b></div></div>");
 | 
	
		
			
				|  |  | -            $('#' + nodeChildIDAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                viewClient.call(self, $(this).attr("data-nodeID"));
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Login Information
 | 
	
		
			
				|  |  | -        clients$.append("<div style='padding:6px'><input class='filename_entry' type='text' id='userName' placeholder='Username' /><!-- <input class='filename_entry' type='password' id='password' placeholder='Password'/> --><input class='update_button' type='button' id='login' value='Login' /></div>"); 
 | 
	
		
			
				|  |  | -        clients$.append("<hr/>");
 | 
	
		
			
				|  |  | -        $('#userName').keydown( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#userName').keypress( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#userName').keyup( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#password').keydown( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#password').keypress( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#password').keyup( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#login').click(function(evt) {
 | 
	
		
			
				|  |  | -            // Future call to validate username and password
 | 
	
		
			
				|  |  | -            //login.call(self, $('#userName').val(), $('#password').val());
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var moniker = vwf_view.kernel.moniker();
 | 
	
		
			
				|  |  | -            var clients = vwf_view.kernel.findClients("", "/*");
 | 
	
		
			
				|  |  | -            var client = undefined;
 | 
	
		
			
				|  |  | -            for (var i=0; i < clients.length; i++)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                if ( clients[i].indexOf(moniker) != -1 )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    client = clients[i];
 | 
	
		
			
				|  |  | -                    break;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            // var client = vwf_view.kernel.findClients("", "/" + moniker)[0];
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            if ( client ) {
 | 
	
		
			
				|  |  | -                vwf_view.kernel.setProperty( client, "displayName", $('#userName').val() );
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // clients$.append("<div style='padding:6px'><input class='live_button' type='button' id='liveeditor' value='Open Code Editor' /></div>");
 | 
	
		
			
				|  |  | -        //  $('#liveeditor').click(function(evt) {
 | 
	
		
			
				|  |  | -        //     openLiveEditor.call(self);
 | 
	
		
			
				|  |  | -        // });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Save / Load
 | 
	
		
			
				|  |  | -        clients$.append("<div style='padding:6px'><input class='filename_entry' type='text' id='fileName' /><input class='update_button' type='button' id='save' value='Save' /></div>");
 | 
	
		
			
				|  |  | -        $('#fileName').keydown( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#fileName').keypress( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#fileName').keyup( function(evt) {
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#save').click(function(evt) {
 | 
	
		
			
				|  |  | -            saveStateAsFile.call(self, $('#fileName').val());
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        clients$.append("<div style='padding:6px'><select class='filename_select' id='fileToLoad' /></select></div>");
 | 
	
		
			
				|  |  | -        $('#fileToLoad').append("<option value='none'></option>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $.getJSON( "/" + root + "/listallsaves", function( data ) {
 | 
	
		
			
				|  |  | -            $.each( data, function( key, value ) {
 | 
	
		
			
				|  |  | -                var applicationName = value[ 'applicationpath' ].split( "/" );
 | 
	
		
			
				|  |  | -                if ( applicationName.length > 0 ) {
 | 
	
		
			
				|  |  | -                    applicationName = applicationName[ applicationName.length - 1 ];
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                if ( applicationName.length > 0 ) {
 | 
	
		
			
				|  |  | -                    applicationName = applicationName.charAt(0).toUpperCase() + applicationName.slice(1);
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                if ( value['latestsave'] ) {
 | 
	
		
			
				|  |  | -                    $('#fileToLoad').append("<option value='"+value['savename']+"' applicationpath='"+value['applicationpath']+"'>"+applicationName+": "+value['savename']+"</option>");
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                else {
 | 
	
		
			
				|  |  | -                    $('#fileToLoad').append("<option value='"+value['savename']+"' applicationpath='"+value['applicationpath']+"' revision='"+value['revision']+"'>"+applicationName+": "+value['savename']+" Rev(" + value['revision'] + ")</option>");
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            } );
 | 
	
		
			
				|  |  | -        } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        clients$.append("<div style='padding:6px'><input class='update_button' type='button' id='load' value='Load' /></div>");
 | 
	
		
			
				|  |  | -        $('#load').click(function(evt) {
 | 
	
		
			
				|  |  | -            loadSavedState.call(self, $('#fileToLoad').val(), $('#fileToLoad').find(':selected').attr('applicationpath'), $('#fileToLoad').find(':selected').attr('revision'));
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- editor ---
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function openLiveEditor(value) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //this.liveditor = document.createElement('div');
 | 
	
		
			
				|  |  | -        //this.liveditor.setAttribute('id', "editorlive");
 | 
	
		
			
				|  |  | -        // $('body').append(this.liveditor); 
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var editor = this.ace.edit("editorlive");
 | 
	
		
			
				|  |  | -        editor.setTheme("ace/theme/monokai");
 | 
	
		
			
				|  |  | -        editor.getSession().setMode("ace/mode/javascript");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- viewClient ------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function viewClient( clientID ) {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var clients$ = $(this.clientList);
 | 
	
		
			
				|  |  | -        var node = this.nodes[ clientID ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        clients$.html("<div class='header'><img src='images/back.png' id='back' alt='back'/> " + $.encoder.encodeForHTML(node.name) + "</div>");
 | 
	
		
			
				|  |  | -        $('#back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            viewClients.call( self );
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node properties
 | 
	
		
			
				|  |  | -        clients$.append("<div id='clientProperties'></div>");
 | 
	
		
			
				|  |  | -        var displayedProperties = {};
 | 
	
		
			
				|  |  | -        for ( var i = 0; i < node.properties.length; i++ ) {
 | 
	
		
			
				|  |  | -            if ( !displayedProperties[ node.properties[i].name ] ) {
 | 
	
		
			
				|  |  | -                displayedProperties[ node.properties[i].name ] = "instance";
 | 
	
		
			
				|  |  | -                var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(clientID);
 | 
	
		
			
				|  |  | -                var propertyNameAttribute = $.encoder.encodeForHTMLAttribute("id", node.properties[i].name, true);
 | 
	
		
			
				|  |  | -                var propertyNameAlpha = $.encoder.encodeForAlphaNumeric(node.properties[i].name);
 | 
	
		
			
				|  |  | -                var propertyNameHTML = $.encoder.encodeForHTML(node.properties[i].name);
 | 
	
		
			
				|  |  | -                var propertyValueAttribute = $.encoder.encodeForHTMLAttribute("val", node.properties[i].getValue(), true);
 | 
	
		
			
				|  |  | -                $('#clientProperties').append("<div id='" + nodeIDAlpha + "-" + propertyNameAlpha + "' class='propEntry'><table><tr><td><b>" + propertyNameHTML + " </b></td><td><input type='text' class='input_text' id='input-" + nodeIDAlpha + "-" + propertyNameAlpha + "' value='" + propertyValueAttribute + "' data-propertyName='" + propertyNameAttribute + "' readonly></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- drillDown -------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function drillDown(nodeID, drillBackID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        drill.call(this, nodeID, drillBackID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        if(nodeID != vwf_view.kernel.find("", "/")[0]) $(topdownName).hide('slide', {direction: 'left'}, 175); 
 | 
	
		
			
				|  |  | -        $(topdownTemp).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  | -    // -- drillUp ---------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function drillUp(nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        drill.call(this, nodeID, undefined);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownName).hide('slide', {direction: 'right'}, 175); 
 | 
	
		
			
				|  |  | -        $(topdownTemp).show('slide', {direction: 'left'}, 175);    
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- drillBack---------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function drillBack(nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        drill.call(this, nodeID, undefined);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        // No slide motion, when resizing script window back to normal
 | 
	
		
			
				|  |  | -        $(topdownName).hide();
 | 
	
		
			
				|  |  | -        $(topdownTemp).show();
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  | -    // -- drill -----------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function drill(nodeID, drillBackID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var node = this.nodes[ nodeID ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if ( !node ) {
 | 
	
		
			
				|  |  | -            this.logger.errorx( "drill: Cannot find node '" + nodeID + "'" );
 | 
	
		
			
				|  |  | -            return;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -        var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownName).html(''); // Clear alternate div first to ensure content is added correctly
 | 
	
		
			
				|  |  | -        this.currentNodeID = nodeID;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(!drillBackID) drillBackID = node.parentID;
 | 
	
		
			
				|  |  | -     
 | 
	
		
			
				|  |  | -        if(nodeID == vwf_view.kernel.find("", "/")[0]) 
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(topdownTemp).html("<div class='header'>index</div>");
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(topdownTemp).html("<div class='header'><img src='images/back.png' id='" + nodeIDAlpha + "-back' alt='back'/> " + $.encoder.encodeForHTML(node.name) + "</div>");
 | 
	
		
			
				|  |  | -            $('#' + nodeIDAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -                drillUp.call(self, drillBackID);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node children
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='children'></div>");
 | 
	
		
			
				|  |  | -        for ( var i = 0; i < node.children.length; i++ ) {
 | 
	
		
			
				|  |  | -            var nodeChildIDAttribute = $.encoder.encodeForHTMLAttribute("id", node.children[i].ID, true);
 | 
	
		
			
				|  |  | -            var nodeChildIDAlpha = $.encoder.encodeForAlphaNumeric(node.children[i].ID);
 | 
	
		
			
				|  |  | -            $('#children').append("<div id='" + nodeChildIDAlpha + "' data-nodeID='" + nodeChildIDAttribute + "' class='childContainer'><div class='childEntry'><b>" + $.encoder.encodeForHTML(node.children[i].name) + "</b></div></div>");
 | 
	
		
			
				|  |  | -            $('#' + nodeChildIDAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                drillDown.call(self, $(this).attr("data-nodeID"), nodeID);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#children > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add prototype children
 | 
	
		
			
				|  |  | -        // TODO: Commented out until prototype children inherit from prototypes
 | 
	
		
			
				|  |  | -        /*
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='prototypeChildren'></div>");
 | 
	
		
			
				|  |  | -        var prototypeChildren = getChildren.call( this, this.kernel, node.extendsID ); 
 | 
	
		
			
				|  |  | -        for ( var key in prototypeChildren)       
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            var child = prototypeChildren[key];
 | 
	
		
			
				|  |  | -            var prototypeChildIDAttribute = $.encoder.encodeForHTMLAttribute("id", child.ID, true);
 | 
	
		
			
				|  |  | -            var prototypeChildIDAlpha = $.encoder.encodeForAlphaNumeric(child.ID);
 | 
	
		
			
				|  |  | -            $('#prototypeChildren').append("<div id='" + prototypeChildIDAlpha + "' data-nodeID='" + prototypeChildIDAttribute + "' class='childContainer'><div class='childEntry'><b>" + $.encoder.encodeForHTML(child.name) + "</b></div></div>");
 | 
	
		
			
				|  |  | -            $('#' + prototypeChildIDAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                drillDown.call(self, $(this).attr("data-nodeID"), nodeID);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        } 
 | 
	
		
			
				|  |  | -        */   // END TODO:
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $('#prototypeChildren > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node properties
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='properties'></div>");
 | 
	
		
			
				|  |  | -        var displayedProperties = {};
 | 
	
		
			
				|  |  | -        for ( var i = 0; i < node.properties.length; i++ ) {
 | 
	
		
			
				|  |  | -            if ( !displayedProperties[ node.properties[i].name ] && node.properties[i].name.indexOf('$') === -1) {
 | 
	
		
			
				|  |  | -                displayedProperties[ node.properties[i].name ] = "instance";
 | 
	
		
			
				|  |  | -                var propertyNameAttribute = $.encoder.encodeForHTMLAttribute("id", node.properties[i].name, true);
 | 
	
		
			
				|  |  | -                var propertyNameAlpha = $.encoder.encodeForAlphaNumeric(node.properties[i].name);
 | 
	
		
			
				|  |  | -                var propertyNameHTML = $.encoder.encodeForHTML(node.properties[i].name);
 | 
	
		
			
				|  |  | -                var propertyValueAttribute = $.encoder.encodeForHTMLAttribute("val", node.properties[i].getValue(), true);
 | 
	
		
			
				|  |  | -                 
 | 
	
		
			
				|  |  | -               if (propertyNameAlpha.indexOf("semantics") > -1) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -               } else if (propertyNameAlpha.indexOf("grammar") > -1) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -               } else if (propertyNameAlpha.indexOf("ohm") > -1) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                let propName = propertyNameAlpha;
 | 
	
		
			
				|  |  | -                let propValue = node.properties[i].rawValue;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $(topdownTemp).append("<div id='" + nodeIDAlpha + "-" + propertyNameAlpha + "'></div>");
 | 
	
		
			
				|  |  | -            $('#' + nodeIDAlpha + '-' + propertyNameAlpha).append("<div class='childContainer'><div class='childEntry'><b>"+propertyNameHTML+"</div></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#' + nodeIDAlpha + '-' + propertyNameAlpha).click( function (evt) {
 | 
	
		
			
				|  |  | -            editOhmLang.call(self, nodeID, propName, propValue);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    // $('#properties').append("<div id='" + nodeIDAlpha + "-" + propertyNameAlpha + "' class='propEntry'><table><tr><td><b>" + propertyNameHTML + " </b></td><td><input type='text' class='input_text' id='input-" + nodeIDAlpha + "-" + propertyNameAlpha + "' value='" + propertyValueAttribute + "' data-propertyName='" + propertyNameAttribute + "'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                } else {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                     $('#properties').append("<div id='" + nodeIDAlpha + "-" + propertyNameAlpha + "' class='propEntry'><table><tr><td><b>" + propertyNameHTML + " </b></td><td><input type='text' class='input_text' id='input-" + nodeIDAlpha + "-" + propertyNameAlpha + "' value='" + propertyValueAttribute + "' data-propertyName='" + propertyNameAttribute + "'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -               
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAttribute).change( function(evt) {
 | 
	
		
			
				|  |  | -                    var propName = $.encoder.canonicalize($(this).attr("data-propertyName"));
 | 
	
		
			
				|  |  | -                    var propValue = $(this).val();
 | 
	
		
			
				|  |  | -                
 | 
	
		
			
				|  |  | -                    try {
 | 
	
		
			
				|  |  | -                        propValue = JSON.parse($.encoder.canonicalize(propValue));
 | 
	
		
			
				|  |  | -                        self.kernel.setProperty(nodeID, propName, propValue);
 | 
	
		
			
				|  |  | -                    } catch (e) {
 | 
	
		
			
				|  |  | -                        // restore the original value on error
 | 
	
		
			
				|  |  | -                        $(this).val(propValue);
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keydown( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keypress( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keyup( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#properties > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        this.logger.info(self + "    " + nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add prototype properties
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='prototypeProperties'></div>");
 | 
	
		
			
				|  |  | -        var prototypeProperties = getProperties.call( this, this.kernel, node.extendsID );
 | 
	
		
			
				|  |  | -        for ( var key in prototypeProperties ) {
 | 
	
		
			
				|  |  | -            var prop = prototypeProperties[key].prop;
 | 
	
		
			
				|  |  | -            if ( !displayedProperties[ prop.name ]  ) {
 | 
	
		
			
				|  |  | -                displayedProperties[ prop.name ] = prototypeProperties[key].prototype;
 | 
	
		
			
				|  |  | -                if(prop.value == undefined)
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    prop.value = JSON.stringify( utility.transform( vwf.getProperty( nodeID, prop.name, []), utility.transforms.transit ) );
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                var propertyNameAttribute = $.encoder.encodeForHTMLAttribute("id", prop.name, true);
 | 
	
		
			
				|  |  | -                var propertyNameAlpha = $.encoder.encodeForAlphaNumeric(prop.name);
 | 
	
		
			
				|  |  | -                var propertyNameHTML = $.encoder.encodeForHTML(prop.name);
 | 
	
		
			
				|  |  | -                var propertyValueAttribute = $.encoder.encodeForHTMLAttribute("val", prop.value, true);
 | 
	
		
			
				|  |  | -                $('#prototypeProperties').append("<div id='" + nodeIDAlpha + "-" + propertyNameAlpha + "' class='propEntry'><table><tr><td><b>" + propertyNameHTML + " </b></td><td><input type='text' class='input_text' id='input-" + nodeIDAlpha + "-" + propertyNameAlpha + "' value='" + propertyValueAttribute + "' data-propertyName='" + propertyNameAttribute + "'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).change( function(evt) {
 | 
	
		
			
				|  |  | -                    var propName = $.encoder.canonicalize($(this).attr("data-propertyName"));
 | 
	
		
			
				|  |  | -                    var propValue = $(this).val();
 | 
	
		
			
				|  |  | -                
 | 
	
		
			
				|  |  | -                    try {
 | 
	
		
			
				|  |  | -                        propValue = JSON.parse($.encoder.canonicalize(propValue));
 | 
	
		
			
				|  |  | -                        self.kernel.setProperty(nodeID, propName, propValue);
 | 
	
		
			
				|  |  | -                    } catch (e) {
 | 
	
		
			
				|  |  | -                        // restore the original value on error
 | 
	
		
			
				|  |  | -                        $(this).val(propValue);
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keydown( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keypress( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                $('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keyup( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#prototypeProperties > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node methods
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='methods'></div>");
 | 
	
		
			
				|  |  | -        for ( var key in node.methods ) {
 | 
	
		
			
				|  |  | -            var method = node.methods[key];
 | 
	
		
			
				|  |  | -            var methodNameAlpha = $.encoder.encodeForAlphaNumeric(key);
 | 
	
		
			
				|  |  | -            var methodNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
 | 
	
		
			
				|  |  | -            var methodNameHTML = $.encoder.encodeForHTML(key);
 | 
	
		
			
				|  |  | -            $('#methods').append("<div id='" + methodNameAlpha + "' class='methodEntry'><table><tr><td><b>" + methodNameHTML + " </b></td><td style='text-align:right;overflow:visible'><div id='rollover-" + methodNameAlpha + "' style='position:relative;left:12px'><input type='button' class='input_button_call' id='call-" + methodNameAlpha + "' value='Call' data-methodName='" + methodNameAttribute + "'><img id='param-" + methodNameAlpha + "' data-methodName='" + methodNameAttribute + "' src='images/arrow.png' alt='arrow' style='position:relative;top:4px;left:2px;visibility:hidden'></div></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#rollover-' + methodNameAlpha).mouseover( function(evt) {
 | 
	
		
			
				|  |  | -                $('#param-' + $(this).attr("id").substring(9)).css('visibility', 'visible');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#rollover-' + methodNameAlpha).mouseleave( function(evt) {
 | 
	
		
			
				|  |  | -                $('#param-' + $(this).attr("id").substring(9)).css('visibility', 'hidden');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#call-' + methodNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                self.kernel.callMethod( nodeID, $.encoder.canonicalize($(this).attr("data-methodName")) );
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#param-' + methodNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                setParams.call(self, $.encoder.canonicalize($(this).attr("data-methodName")), method, nodeID);                
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#methods > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add prototype methods
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='prototypeMethods'></div>");
 | 
	
		
			
				|  |  | -        var prototypeMethods = getMethods.call( this, this.kernel, node.extendsID );
 | 
	
		
			
				|  |  | -        for ( var key in prototypeMethods ) {
 | 
	
		
			
				|  |  | -            var method = prototypeMethods[key];
 | 
	
		
			
				|  |  | -            var prototypeMethodNameAlpha = $.encoder.encodeForAlphaNumeric(key);
 | 
	
		
			
				|  |  | -            var prototypeMethodNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
 | 
	
		
			
				|  |  | -            var prototypeMethodNameHTML = $.encoder.encodeForHTML(key);
 | 
	
		
			
				|  |  | -            $('#prototypeMethods').append("<div id='" + prototypeMethodNameAlpha + "' class='methodEntry'><table><tr><td><b>" + prototypeMethodNameHTML + " </b></td><td style='text-align:right;overflow:visible'><div id='rollover-" + prototypeMethodNameAlpha + "' style='position:relative;left:12px'><input type='button' class='input_button_call' id='call-" + prototypeMethodNameAlpha + "' value='Call' data-methodName='" + prototypeMethodNameAttribute + "'><img id='param-" + prototypeMethodNameAlpha + "' data-methodName='" + prototypeMethodNameAttribute + "' src='images/arrow.png' alt='arrow' style='position:relative;top:4px;left:2px;visibility:hidden'></div></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#rollover-' + prototypeMethodNameAlpha).mouseover( function(evt) {
 | 
	
		
			
				|  |  | -                $('#param-' + $(this).attr("id").substring(9)).css('visibility', 'visible');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#rollover-' + prototypeMethodNameAlpha).mouseleave( function(evt) {
 | 
	
		
			
				|  |  | -                $('#param-' + $(this).attr("id").substring(9)).css('visibility', 'hidden');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#call-' + prototypeMethodNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                self.kernel.callMethod( nodeID, $.encoder.canonicalize($(this).attr("data-methodName")) );
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#param-' + prototypeMethodNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                setParams.call(self, $.encoder.canonicalize($(this).attr("data-methodName")), method, nodeID);                
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#prototypeMethods > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node events
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='events'></div>");
 | 
	
		
			
				|  |  | -        for ( var key in node.events ) {
 | 
	
		
			
				|  |  | -            var nodeEvent = node.events[key];
 | 
	
		
			
				|  |  | -            var eventNameAlpha = $.encoder.encodeForAlphaNumeric(key);
 | 
	
		
			
				|  |  | -            var eventNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
 | 
	
		
			
				|  |  | -            var eventNameHTML = $.encoder.encodeForHTML(key);
 | 
	
		
			
				|  |  | -            $('#events').append("<div id='" + eventNameAlpha + "' class='methodEntry'><table><tr><td><b>" + eventNameHTML + " </b></td><td style='text-align:right;overflow:visible'><div id='rollover-" + eventNameAlpha + "' style='position:relative;left:12px'><input type='button' class='input_button_call' id='fire-" + eventNameAlpha + "' value='Fire' data-eventName='" + eventNameAttribute + "'><img id='arg-" + eventNameAlpha + "' data-eventName='" + eventNameAttribute + "' src='images/arrow.png' alt='arrow' style='position:relative;top:4px;left:2px;visibility:hidden'></div></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#rollover-' + eventNameAlpha).mouseover( function(evt) {
 | 
	
		
			
				|  |  | -                $('#arg-' + $(this).attr("id").substring(9)).css('visibility', 'visible');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#rollover-' + eventNameAlpha).mouseleave( function(evt) {
 | 
	
		
			
				|  |  | -                $('#arg-' + $(this).attr("id").substring(9)).css('visibility', 'hidden');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#fire-' + eventNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                self.kernel.fireEvent( nodeID, $.encoder.canonicalize($(this).attr("data-eventName")) );
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#arg-' + eventNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                setArgs.call(self, $.encoder.canonicalize($(this).attr("data-eventName")), nodeEvent, nodeID); 
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#events > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add prototype events
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='prototypeEvents'></div>");
 | 
	
		
			
				|  |  | -        var prototypeEvents = getEvents.call( this, this.kernel, node.extendsID );
 | 
	
		
			
				|  |  | -        for ( var key in prototypeEvents ) {
 | 
	
		
			
				|  |  | -            var nodeEvent = prototypeEvents[key];
 | 
	
		
			
				|  |  | -            var prototypeEventNameAlpha = $.encoder.encodeForAlphaNumeric(key);
 | 
	
		
			
				|  |  | -            var prototypeEventNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
 | 
	
		
			
				|  |  | -            var prototypeEventNameHTML = $.encoder.encodeForHTML(key);
 | 
	
		
			
				|  |  | -            $('#prototypeEvents').append("<div id='" + prototypeEventNameAlpha + "' class='methodEntry'><table><tr><td><b>" + prototypeEventNameHTML + " </b></td><td style='text-align:right;overflow:visible'><div id='rollover-" + prototypeEventNameAlpha + "' style='position:relative;left:12px'><input type='button' class='input_button_call' id='fire-" + prototypeEventNameAlpha + "' value='Fire' data-eventName='" + prototypeEventNameAttribute + "'><img id='arg-" + prototypeEventNameAlpha + "' data-eventName='" + prototypeEventNameAttribute + "' src='images/arrow.png' alt='arrow' style='position:relative;top:4px;left:2px;visibility:hidden'></div></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#rollover-' + prototypeEventNameAlpha).mouseover( function(evt) {
 | 
	
		
			
				|  |  | -                $('#arg-' + $(this).attr("id").substring(9)).css('visibility', 'visible');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#rollover-' + prototypeEventNameAlpha).mouseleave( function(evt) {
 | 
	
		
			
				|  |  | -                $('#arg-' + $(this).attr("id").substring(9)).css('visibility', 'hidden');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#fire-' + prototypeEventNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                self.kernel.fireEvent( nodeID, $.encoder.canonicalize($(this).attr("data-eventName")) );
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#arg-' + prototypeEventNameAlpha).click( function(evt) {
 | 
	
		
			
				|  |  | -                setArgs.call(self, $.encoder.canonicalize($(this).attr("data-eventName")), nodeEvent, nodeID); 
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#prototypeEvents > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add node behaviors
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='behaviors'></div>");
 | 
	
		
			
				|  |  | -        for ( var i = 0; i < node.implementsIDs.length; i++ ) {
 | 
	
		
			
				|  |  | -            var nodeImplementsIDAlpha = $.encoder.encodeForAlphaNumeric(node.implementsIDs[i]);
 | 
	
		
			
				|  |  | -            var nodeImplementsIDHTML = $.encoder.encodeForHTML(node.implementsIDs[i]);
 | 
	
		
			
				|  |  | -            $('#behaviors').append("<div class='propEntry'><table><tr><td style='width:92%'><b>" + nodeImplementsIDHTML + "</b></td><td><input id='" + nodeImplementsIDAlpha + "-enable' type='checkbox' checked='checked' disabled='disabled' /></td></tr></table></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            /* 
 | 
	
		
			
				|  |  | -            //Placeholder to Enable/Disable behaviors
 | 
	
		
			
				|  |  | -            $('#' + node.implementsID[i] + '-enable').change( function(evt) {
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -            }); 
 | 
	
		
			
				|  |  | -            */
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#behaviors > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Add prototype behaviors
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='prototypeBehaviors'></div>");
 | 
	
		
			
				|  |  | -        var prototypeNode = this.nodes[ node.extendsID ];
 | 
	
		
			
				|  |  | -        for ( var i=0; i < prototypeNode.implementsIDs.length; i++)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            var prototypeImplementsIDAlpha = $.encoder.encodeForAlphaNumeric(prototypeNode.implementsIDs[i]);
 | 
	
		
			
				|  |  | -            var prototypeImplementsIDHTML = $.encoder.encodeForHTML(prototypeNode.implementsIDs[i]);
 | 
	
		
			
				|  |  | -            $('#prototypeBehaviors').append("<div class='propEntry'><table><tr><td style='width:92%'><b>" + prototypeImplementsIDHTML + "</b></td><td><input id='" + prototypeImplementsIDAlpha + "-enable' type='checkbox' checked='checked' disabled='disabled' /></td></tr></table></div>");
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#prototypeBehaviors > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Create new method
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='createMethodID'></div>");
 | 
	
		
			
				|  |  | -        $('#createMethodID').append("<div class='childContainer'><div class='childEntry'><b>New Method</div></div>");
 | 
	
		
			
				|  |  | -        $('#createMethodID').click( function (evt) {
 | 
	
		
			
				|  |  | -            createMethod.call(self, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         // Create new Event
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='createEventID'></div>");
 | 
	
		
			
				|  |  | -        $('#createEventID').append("<div class='childContainer'><div class='childEntry'><b>New Event</div></div>");
 | 
	
		
			
				|  |  | -        $('#createEventID').click( function (evt) {
 | 
	
		
			
				|  |  | -            createEvent.call(self, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Create new script
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='createScript'></div>");
 | 
	
		
			
				|  |  | -        $('#createScript').append("<div class='childContainer'><div class='childEntry'><b>New Script</div></div>");
 | 
	
		
			
				|  |  | -        $('#createScript').click( function (evt) {
 | 
	
		
			
				|  |  | -            createScript.call(self, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        $('#createScript > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if ( this.allScripts[ nodeID ] !== undefined ) {
 | 
	
		
			
				|  |  | -            // Add node scripts
 | 
	
		
			
				|  |  | -            $(topdownTemp).append("<div id='scripts'></div>");
 | 
	
		
			
				|  |  | -            for( var i=0; i < this.allScripts[ nodeID ].length; i++ )
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                var scriptFull = this.allScripts[nodeID][i].text;
 | 
	
		
			
				|  |  | -                if(scriptFull != undefined)
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var scriptName = scriptFull.substring(0, scriptFull.indexOf('='));
 | 
	
		
			
				|  |  | -                    $('#scripts').append("<div id='script-" + nodeIDAlpha + "-" + i + "' class='childContainer'><div class='childEntry'><b>script </b>" + scriptName + "</div></div>");
 | 
	
		
			
				|  |  | -                    $('#script-' + nodeIDAlpha + "-" + i).click( function(evt) {
 | 
	
		
			
				|  |  | -                        var scriptID = $(this).attr("id").substring($(this).attr("id").lastIndexOf('-')+1);
 | 
	
		
			
				|  |  | -                        viewScript.call(self, nodeID, scriptID, undefined);
 | 
	
		
			
				|  |  | -                    });
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#scripts > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if ( this.allScripts[ node.extendsID ] !== undefined ) {
 | 
	
		
			
				|  |  | -            // Add prototype scripts
 | 
	
		
			
				|  |  | -            $(topdownTemp).append("<div id='prototypeScripts'></div>");
 | 
	
		
			
				|  |  | -            for( var i=0; i < this.allScripts[ node.extendsID ].length; i++ )
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                var scriptFull = this.allScripts[node.extendsID][i].text;
 | 
	
		
			
				|  |  | -                if(scriptFull != undefined)
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var nodeExtendsIDAlpha = $.encoder.encodeForAlphaNumeric(node.extendsID);
 | 
	
		
			
				|  |  | -                    var nodeExtendsIDAttribute = $.encoder.encodeForHTMLAttribute("id", node.extendsID, true);
 | 
	
		
			
				|  |  | -                    var scriptName = scriptFull.substring(0, scriptFull.indexOf('='));
 | 
	
		
			
				|  |  | -                    $('#prototypeScripts').append("<div id='script-" + nodeExtendsIDAlpha + "-" + i + "' class='childContainer' data-nodeExtendsID='" + nodeExtendsIDAttribute + "'><div class='childEntry'><b>script </b>" + scriptName + "</div></div>");
 | 
	
		
			
				|  |  | -                    $('#script-' + nodeExtendsIDAlpha + "-" + i).click( function(evt) {
 | 
	
		
			
				|  |  | -                        var extendsId = $.encoder.canonicalize($(this).attr("data-nodeExtendsID"));
 | 
	
		
			
				|  |  | -                        var scriptID = $(this).attr("id").substring($(this).attr("id").lastIndexOf('-')+1);
 | 
	
		
			
				|  |  | -                        viewScript.call(self, nodeID, scriptID, extendsId);
 | 
	
		
			
				|  |  | -                    });
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $('#prototypeScripts > div:last').css('border-bottom-width', '3px');
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        updateCameraProperties.call(self);
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // createEvent
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function createEvent (nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='script-" + nodeIDAlpha + "-back' alt='back'/> New event</div>");
 | 
	
		
			
				|  |  | -        $('#script-' + nodeIDAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            self.editingScript = false;
 | 
	
		
			
				|  |  | -            drillBack.call(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Return editor to normal width
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='cm'>Name:<br/><input type='text' class='input_text' id='eventName'/><br/>Parameters:<br/><input type='text' class='input_text' id='eventParams'/></div><hr><input class='update_button' type='button' id='createEvent' value='Create' />");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $("#createEvent").click ( function(evt) {
 | 
	
		
			
				|  |  | -            console.log("not yet created");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -              
 | 
	
		
			
				|  |  | -                if( $('#eventName').val() )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var eventName = $('#eventName').val();
 | 
	
		
			
				|  |  | -                    //prmtr = JSON.parse(JSON.stringify($.encoder.canonicalize(prmtr)));
 | 
	
		
			
				|  |  | -                    console.log(eventName);
 | 
	
		
			
				|  |  | -                
 | 
	
		
			
				|  |  | -                if( $('#eventParams').val() )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var params = $('#eventParams').val();
 | 
	
		
			
				|  |  | -                    params = params.split(',');
 | 
	
		
			
				|  |  | -					var cleanParams = [];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -					for (var i = 0; i < params.length; i++) {
 | 
	
		
			
				|  |  | -						params[i] = $.trim(params[i]);
 | 
	
		
			
				|  |  | -						if (params[i] != '' && params[i] != null && params[i] !== undefined)
 | 
	
		
			
				|  |  | -							cleanParams.push(params[i]);
 | 
	
		
			
				|  |  | -					}
 | 
	
		
			
				|  |  | -                    console.log(cleanParams);
 | 
	
		
			
				|  |  | -                    //prmtr = JSON.parse(JSON.stringify($.encoder.canonicalize(prmtr)));
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                let body = '';
 | 
	
		
			
				|  |  | -                self.kernel.createEvent(nodeID, eventName, cleanParams);
 | 
	
		
			
				|  |  | -        }  
 | 
	
		
			
				|  |  | -            //self.kernel.execute( nodeID, editor.getValue() );
 | 
	
		
			
				|  |  | -           // self.kernel.execute( nodeID, $("#newScriptArea").val() );
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownName).hide();
 | 
	
		
			
				|  |  | -        $(topdownTemp).show();
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- createMethod
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -     function createMethod (nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='script-" + nodeIDAlpha + "-back' alt='back'/> New method</div>");
 | 
	
		
			
				|  |  | -        $('#script-' + nodeIDAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            self.editingScript = false;
 | 
	
		
			
				|  |  | -            drillBack.call(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Return editor to normal width
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div id='cm'>Name:<br/><input type='text' class='input_text' id='methodName'/><br/>Parameters:<br/><input type='text' class='input_text' id='methodParams'/></div><hr><input class='update_button' type='button' id='createMethod' value='Create' />");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $("#createMethod").click ( function(evt) {
 | 
	
		
			
				|  |  | -            console.log("not yet created");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -              
 | 
	
		
			
				|  |  | -                if( $('#methodName').val() )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var methodName = $('#methodName').val();
 | 
	
		
			
				|  |  | -                    //prmtr = JSON.parse(JSON.stringify($.encoder.canonicalize(prmtr)));
 | 
	
		
			
				|  |  | -                    console.log(methodName);
 | 
	
		
			
				|  |  | -                
 | 
	
		
			
				|  |  | -                if( $('#methodParams').val() )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var params = $('#methodParams').val();
 | 
	
		
			
				|  |  | -                    params = params.split(',');
 | 
	
		
			
				|  |  | -					var cleanParams = [];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -					for (var i = 0; i < params.length; i++) {
 | 
	
		
			
				|  |  | -						params[i] = $.trim(params[i]);
 | 
	
		
			
				|  |  | -						if (params[i] != '' && params[i] != null && params[i] !== undefined)
 | 
	
		
			
				|  |  | -							cleanParams.push(params[i]);
 | 
	
		
			
				|  |  | -					}
 | 
	
		
			
				|  |  | -                    console.log(cleanParams);
 | 
	
		
			
				|  |  | -                    //prmtr = JSON.parse(JSON.stringify($.encoder.canonicalize(prmtr)));
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                let body = '';
 | 
	
		
			
				|  |  | -                self.kernel.createMethod(nodeID, methodName, cleanParams, body);
 | 
	
		
			
				|  |  | -        }  
 | 
	
		
			
				|  |  | -            //self.kernel.execute( nodeID, editor.getValue() );
 | 
	
		
			
				|  |  | -           // self.kernel.execute( nodeID, $("#newScriptArea").val() );
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownName).hide();
 | 
	
		
			
				|  |  | -        $(topdownTemp).show();
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- createScript ----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function createScript (nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -        var allScripts = this.allScripts;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='script-" + nodeIDAlpha + "-back' alt='back'/> script</div>");
 | 
	
		
			
				|  |  | -        $('#script-' + nodeIDAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            self.editingScript = false;
 | 
	
		
			
				|  |  | -            drillBack.call(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Return editor to normal width
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // $(topdownTemp).append("<div class='scriptEntry'><pre class='scriptCode'><textarea id='newScriptArea' class='scriptEdit' spellcheck='false' wrap='off'></textarea></pre><input class='update_button' type='button' id='create-" + nodeIDAlpha + "' value='Create' /></div><hr>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          $(topdownTemp).append("<div class='scriptEntry'><pre class='scriptCode'> <div id='editorlive'></div></pre><input class='update_button' type='button' id='create-" + nodeIDAlpha + "' value='Create' /></div><hr>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -           var editor = createAceEditor(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $("#create-" + nodeIDAlpha).click ( function(evt) {
 | 
	
		
			
				|  |  | -            self.kernel.execute( nodeID, editor.getValue() );
 | 
	
		
			
				|  |  | -           // self.kernel.execute( nodeID, $("#newScriptArea").val() );
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // $('#newScriptArea').focus( function(evt) { 
 | 
	
		
			
				|  |  | -        //     // Expand the script editor
 | 
	
		
			
				|  |  | -        //     self.editingScript = true;
 | 
	
		
			
				|  |  | -        //     $('#editor').animate({ 'left' : "-500px" }, 175);
 | 
	
		
			
				|  |  | -        //     $('.vwf-tree').animate({ 'width' : "500px" }, 175);
 | 
	
		
			
				|  |  | -        // });
 | 
	
		
			
				|  |  | -        $('#editorlive').keydown( function(evt) { 
 | 
	
		
			
				|  |  | -            evt.stopPropagation();
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownName).hide();
 | 
	
		
			
				|  |  | -        $(topdownTemp).show();
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- viewScript ------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function createAceEditor(view, nodeID) {
 | 
	
		
			
				|  |  | -        var editor = view.ace.edit("editorlive");
 | 
	
		
			
				|  |  | -        editor.setTheme("ace/theme/monokai");
 | 
	
		
			
				|  |  | -        editor.setFontSize(16);
 | 
	
		
			
				|  |  | -        editor.getSession().setMode("ace/mode/javascript");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        editor.commands.addCommand({
 | 
	
		
			
				|  |  | -                name: "doit",
 | 
	
		
			
				|  |  | -                bindKey: { win: "Ctrl-e", mac: "Command-e" },                
 | 
	
		
			
				|  |  | -                exec: function() {
 | 
	
		
			
				|  |  | -                    codeEditorDoit(editor, nodeID);
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -});     
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    editor.commands.addCommand({
 | 
	
		
			
				|  |  | -                name: "printit",
 | 
	
		
			
				|  |  | -                bindKey: { win: "Ctrl-b", mac: "Command-b" },                
 | 
	
		
			
				|  |  | -                exec: function() {
 | 
	
		
			
				|  |  | -                    codeEditorPrintit(editor, nodeID);
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -});     
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        editor.on('focus', function (event, editor) {
 | 
	
		
			
				|  |  | -            // Expand the script editor
 | 
	
		
			
				|  |  | -            self.editingScript = true;
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left': "-800px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width': "800px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        editor.on('blur', function (event, editor) {
 | 
	
		
			
				|  |  | -            //    $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            //     $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -      
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        return editor;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function editOhmLang (nodeID, propertyName, propertyValue) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='script-" + nodeIDAlpha + "-back' alt='back'/> script</div>");
 | 
	
		
			
				|  |  | -        $('#script-' + nodeIDAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            self.editingScript = false;
 | 
	
		
			
				|  |  | -            drillBack.call(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Return editor to normal width
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(propertyValue != undefined)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var propText =  propertyValue;
 | 
	
		
			
				|  |  | -       // var propText = propertyValue.split("\n").map($.trim).filter(function(line) { return line != "" }).join("\n");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $(topdownTemp).append("<div style='padding:6px'><input class='live_button' type='button' id='update-" + nodeIDAlpha + "-" + propertyName + "' value='Update' /></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $(topdownTemp).append("<div class='scriptEntry'><pre class='scriptCode'> <div id='editorlive'> </div></pre></div><hr>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         var editor = createAceEditor(self, nodeID);
 | 
	
		
			
				|  |  | -         editor.setValue(propText);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -            $("#update-" + nodeIDAlpha + "-" + propertyName).click ( function(evt) {
 | 
	
		
			
				|  |  | -                var evalText = editor.getValue();
 | 
	
		
			
				|  |  | -                 self.kernel.setProperty( nodeID, propertyName, evalText);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -          
 | 
	
		
			
				|  |  | -            $('#editorlive').keydown( function(evt) { 
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownName).hide();
 | 
	
		
			
				|  |  | -        $(topdownTemp).show();
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function viewScript (nodeID, scriptID, extendsID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -        var allScripts = this.allScripts;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='script-" + nodeIDAlpha + "-back' alt='back'/> script</div>");
 | 
	
		
			
				|  |  | -        $('#script-' + nodeIDAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            self.editingScript = false;
 | 
	
		
			
				|  |  | -            drillBack.call(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Return editor to normal width
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(extendsID) {
 | 
	
		
			
				|  |  | -            nodeID = extendsID;
 | 
	
		
			
				|  |  | -            nodeIDAlpha = $.encoder.encodeForAlphaNumeric(extendsID);
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var scriptText = self.allScripts[nodeID][scriptID].text;
 | 
	
		
			
				|  |  | -        if(scriptText != undefined)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            // $(topdownTemp).append("<div class='scriptEntry'><pre class='scriptCode'><textarea id='scriptTextArea' class='scriptEdit' spellcheck='false' wrap='off'>" + scriptText + "</textarea></pre><input class='update_button' type='button' id='update-" + nodeIDAlpha + "-" + scriptID + "' value='Update' /></div><hr>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -             //Open Live Editor
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -         $(topdownTemp).append("<div style='padding:6px'><input class='live_button' type='button' id='printit' value='Print It' /><span> </span><input class='live_button' type='button' id='doit-" + nodeIDAlpha + "-" + scriptID + "' value='DoIt' /><span> </span><input class='live_button' type='button' id='update-" + nodeIDAlpha + "-" + scriptID + "' value='Update' /></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $(topdownTemp).append("<div class='scriptEntry'><pre class='scriptCode'> <div id='editorlive'>" + scriptText + "</div></pre></div><hr>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         var editor = createAceEditor(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //  $(topdownTemp).append("<div style='padding:6px'><input class='live_button' type='button' id='doit' value='DoIt' /></div>");
 | 
	
		
			
				|  |  | -         $("#doit-" + nodeIDAlpha + "-" + scriptID).click(function(evt) {
 | 
	
		
			
				|  |  | -              var s_id = $(this).attr("id").substring($(this).attr("id").lastIndexOf('-') + 1);
 | 
	
		
			
				|  |  | -                self.allScripts[nodeID][s_id].text = undefined;;
 | 
	
		
			
				|  |  | -            codeEditorDoit.call(self, editor, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $("#printit").click(function(evt) {
 | 
	
		
			
				|  |  | -            codeEditorPrintit.call(self, editor, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -            $("#update-" + nodeIDAlpha + "-" + scriptID).click ( function(evt) {
 | 
	
		
			
				|  |  | -                var s_id = $(this).attr("id").substring($(this).attr("id").lastIndexOf('-') + 1);
 | 
	
		
			
				|  |  | -                self.allScripts[nodeID][s_id].text = undefined;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                var evalText = editor.getValue();
 | 
	
		
			
				|  |  | -                self.kernel.execute( nodeID, evalText );
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            // $('#editorlive').focus( function(evt) { 
 | 
	
		
			
				|  |  | -            //     // Expand the script editor
 | 
	
		
			
				|  |  | -            //     self.editingScript = true;
 | 
	
		
			
				|  |  | -            //     $('#editor').animate({ 'left' : "-500px" }, 175);
 | 
	
		
			
				|  |  | -            //     $('.vwf-tree').animate({ 'width' : "500px" }, 175);
 | 
	
		
			
				|  |  | -            // });
 | 
	
		
			
				|  |  | -            $('#editorlive').keydown( function(evt) { 
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(topdownName).hide();
 | 
	
		
			
				|  |  | -        $(topdownTemp).show();
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- setParams -------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function setParams (methodName, methodParams, nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var methodNameAlpha = $.encoder.encodeForAlphaNumeric(methodName);
 | 
	
		
			
				|  |  | -        var methodNameHTML = $.encoder.encodeForHTML(methodName);
 | 
	
		
			
				|  |  | -     
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='" + methodNameAlpha + "-back' alt='back'/> " + methodNameHTML + "</div>");
 | 
	
		
			
				|  |  | -        $('#' + methodNameAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -             self.editingScript = false;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -             drillUp.call(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Return editor to normal width
 | 
	
		
			
				|  |  | -            $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var method = vwf.getMethod(nodeID, methodNameAlpha);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -           $(topdownTemp).append("<div style='padding:6px'><input class='live_button' type='button' id='printit' value='Print It' /><span> </span><input class='live_button' type='button' id='doit' value='Do It' /><span> </span><input class='live_button' type='button' id='update-" + nodeIDAlpha + "-" + methodNameAlpha + "' value='Update' /><span> </span> <input class='live_button' type='button' id='call' value='Call' /></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            //$(topdownTemp).append("<input class='update_button' type='button' id='call' value='Call' />");
 | 
	
		
			
				|  |  | -           
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          $(topdownTemp).append("<div id='editorlive'>" + method.body + "</div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var editor = createAceEditor(self, nodeID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $("#printit").click(function(evt) {
 | 
	
		
			
				|  |  | -            codeEditorPrintit.call(self, editor, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $("#doit").click(function(evt) {
 | 
	
		
			
				|  |  | -            codeEditorDoit.call(self, editor, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          $("#update-" + nodeIDAlpha + "-" + methodNameAlpha).click ( function(evt) {
 | 
	
		
			
				|  |  | -                var evalText = editor.getValue();
 | 
	
		
			
				|  |  | -                self.kernel.setMethod( nodeID, methodNameAlpha,
 | 
	
		
			
				|  |  | -                { body: evalText, type: "application/javascript", parameters: method.parameters } );
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          var params = [];
 | 
	
		
			
				|  |  | -          if (method.parameters) {
 | 
	
		
			
				|  |  | -              params = method.parameters.length
 | 
	
		
			
				|  |  | -          };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          if (params >= 1) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        for(var i=1; i<=params; i++)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(topdownTemp).append("<div id='param" + i + "' class='propEntry'><table><tr><td><b>" + method.parameters[i-1] + ": " + i + ": </b></td><td><input type='text' class='input_text' id='input-param" + i + "'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#input-param'+ i).keydown( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -            $('#input-param'+ i).keypress( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#input-param'+ i).keyup( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $('#call').click ( function (evt) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if (params >= 1) {
 | 
	
		
			
				|  |  | -            var parameters = new Array();
 | 
	
		
			
				|  |  | -            for(var i=1; i<=params; i++)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                if( $('#input-param'+ i).val() )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var prmtr = $('#input-param'+ i).val();
 | 
	
		
			
				|  |  | -                    try {
 | 
	
		
			
				|  |  | -                        prmtr = JSON.parse(JSON.stringify($.encoder.canonicalize(prmtr)));
 | 
	
		
			
				|  |  | -                        parameters.push( prmtr );
 | 
	
		
			
				|  |  | -                    } catch (e) {
 | 
	
		
			
				|  |  | -                        self.logger.error('Invalid Value');
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -            self.kernel.callMethod(nodeID, methodName, parameters);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownName).hide('slide', {direction: 'left'}, 175); 
 | 
	
		
			
				|  |  | -        $(topdownTemp).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- setArgs ---------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -   function setArgs (eventName, eventArgs, nodeID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var topdownName = this.topdownName;
 | 
	
		
			
				|  |  | -        var topdownTemp = this.topdownTemp;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        var eventNameAlpha = $.encoder.encodeForAlphaNumeric(eventName);
 | 
	
		
			
				|  |  | -        var eventNameHTML = $.encoder.encodeForHTML(eventName);
 | 
	
		
			
				|  |  | -     
 | 
	
		
			
				|  |  | -        $(topdownTemp).html("<div class='header'><img src='images/back.png' id='" + eventNameAlpha + "-back' alt='back'/> " + eventNameHTML + "<input type='button' class='input_button_call' id='fire' value='Fire' style='float:right;position:relative;top:5px;right:33px'></input></div>");
 | 
	
		
			
				|  |  | -        $('#' + eventNameAlpha + '-back').click ( function(evt) {
 | 
	
		
			
				|  |  | -            drillUp.call(self, nodeID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        for(var i=1; i<=8; i++)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(topdownTemp).append("<div id='arg" + i + "' class='propEntry'><table><tr><td><b>Argument " + i + ": </b></td><td><input type='text' class='input_text' id='input-arg" + i + "'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#input-arg'+ i).keydown( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -            $('#input-arg'+ i).keypress( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#input-arg'+ i).keyup( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownTemp).append("<div style='font-weight:bold;text-align:right;padding-right:10px'></div>");
 | 
	
		
			
				|  |  | -        $('#fire').click ( function (evt) {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var args = new Array();
 | 
	
		
			
				|  |  | -            for(var i=1; i<=8; i++)
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -                if( $('#input-arg'+ i).val() )
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    var arg = $('#input-arg'+ i).val();
 | 
	
		
			
				|  |  | -                    try {
 | 
	
		
			
				|  |  | -                        arg = JSON.parse($.encoder.canonicalize(arg));
 | 
	
		
			
				|  |  | -                        args.push( arg );
 | 
	
		
			
				|  |  | -                    } catch (e) {
 | 
	
		
			
				|  |  | -                        self.logger.error('Invalid Value');
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            self.kernel.fireEvent(nodeID, eventName, args);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(topdownName).hide('slide', {direction: 'left'}, 175); 
 | 
	
		
			
				|  |  | -        $(topdownTemp).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        this.topdownName = topdownTemp;
 | 
	
		
			
				|  |  | -        this.topdownTemp = topdownName;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function getPrototypes( kernel, extendsID ) {
 | 
	
		
			
				|  |  | -        var prototypes = [];
 | 
	
		
			
				|  |  | -        var id = extendsID;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        while ( id !== undefined ) {
 | 
	
		
			
				|  |  | -            prototypes.push( id );
 | 
	
		
			
				|  |  | -            id = kernel.prototype( id );
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -                
 | 
	
		
			
				|  |  | -        return prototypes;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function getPrototypes( kernel, extendsID ) {
 | 
	
		
			
				|  |  | -        var prototypes = [];
 | 
	
		
			
				|  |  | -        var id = extendsID;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        while ( id !== undefined ) {
 | 
	
		
			
				|  |  | -            prototypes.push( id );
 | 
	
		
			
				|  |  | -            id = kernel.prototype( id );
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -                
 | 
	
		
			
				|  |  | -        return prototypes;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function createProperty( node, propertyName, propertyValue ) {
 | 
	
		
			
				|  |  | -        var property = {
 | 
	
		
			
				|  |  | -            name: propertyName,
 | 
	
		
			
				|  |  | -            rawValue: propertyValue,
 | 
	
		
			
				|  |  | -            value: undefined,
 | 
	
		
			
				|  |  | -            getValue: function() {
 | 
	
		
			
				|  |  | -                var propertyValue;
 | 
	
		
			
				|  |  | -                if ( this.value == undefined ) {
 | 
	
		
			
				|  |  | -                    try {
 | 
	
		
			
				|  |  | -                        propertyValue = utility.transform( this.rawValue, utility.transforms.transit );
 | 
	
		
			
				|  |  | -                        this.value = JSON.stringify( propertyValue );
 | 
	
		
			
				|  |  | -                    } catch (e) {
 | 
	
		
			
				|  |  | -                        this.logger.warnx( "createdProperty", nodeID, this.propertyName, this.rawValue,
 | 
	
		
			
				|  |  | -                            "stringify error:", e.message );
 | 
	
		
			
				|  |  | -                        this.value = this.rawValue;
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                return this.value;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        return property;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function getProperties( kernel, extendsID ) {
 | 
	
		
			
				|  |  | -        var pTypes = getPrototypes( kernel, extendsID );
 | 
	
		
			
				|  |  | -        var pProperties = {};
 | 
	
		
			
				|  |  | -        if ( pTypes ) {
 | 
	
		
			
				|  |  | -            for ( var i=0; i < pTypes.length; i++ ) {
 | 
	
		
			
				|  |  | -                var nd = this.nodes[ pTypes[i] ];
 | 
	
		
			
				|  |  | -                if ( nd && nd.properties ) {
 | 
	
		
			
				|  |  | -                    for ( var key in nd.properties ) {
 | 
	
		
			
				|  |  | -                        pProperties[ key ] = { "prop": nd.properties[ key ], "prototype": pTypes[i]  };
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        return pProperties;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function getChildren( kernel, extendsID ) {
 | 
	
		
			
				|  |  | -        var pTypes = getPrototypes( kernel, extendsID );
 | 
	
		
			
				|  |  | -        var pChildren = {};
 | 
	
		
			
				|  |  | -        if ( pTypes ) {
 | 
	
		
			
				|  |  | -            for ( var i=0; i < pTypes.length; i++ ) {
 | 
	
		
			
				|  |  | -                var nd = this.nodes[ pTypes[i] ];
 | 
	
		
			
				|  |  | -                if ( nd && nd.children ) {
 | 
	
		
			
				|  |  | -                    for ( var key in nd.children ) {
 | 
	
		
			
				|  |  | -                        pChildren[ key ] = nd.children[key];
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        return pChildren;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function getEvents( kernel, extendsID ) {
 | 
	
		
			
				|  |  | -        var pTypes = getPrototypes( kernel, extendsID );
 | 
	
		
			
				|  |  | -        var events = {};
 | 
	
		
			
				|  |  | -        if ( pTypes ) {
 | 
	
		
			
				|  |  | -            for ( var i = 0; i < pTypes.length; i++ ) {
 | 
	
		
			
				|  |  | -                var nd = this.nodes[ pTypes[i] ];
 | 
	
		
			
				|  |  | -                if  ( nd && nd.events ) {
 | 
	
		
			
				|  |  | -                    for ( var key in nd.events ) {
 | 
	
		
			
				|  |  | -                        events[ key ] = nd.events[key];
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        return events;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function getMethods( kernel, extendsID ) {
 | 
	
		
			
				|  |  | -        var pTypes = getPrototypes( kernel, extendsID );
 | 
	
		
			
				|  |  | -        var methods = {};
 | 
	
		
			
				|  |  | -        if ( pTypes ) {
 | 
	
		
			
				|  |  | -            for ( var i = 0; i < pTypes.length; i++ ) {
 | 
	
		
			
				|  |  | -                var nd = this.nodes[ pTypes[i] ];
 | 
	
		
			
				|  |  | -                if  ( nd && nd.methods ) {
 | 
	
		
			
				|  |  | -                    for ( var key in nd.methods ) {
 | 
	
		
			
				|  |  | -                        methods[ key ] = nd.methods[key];
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        return methods;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function highlightChildInHierarchy(nodeID) {
 | 
	
		
			
				|  |  | -        if (this.editorOpen && this.editorView == 1) // Hierarchy view open
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            var childDiv = $("div[id='" + nodeID +"']");
 | 
	
		
			
				|  |  | -            if(childDiv.length > 0) {
 | 
	
		
			
				|  |  | -                var previousChild = $("div[id='" + this.highlightedChild +"']");
 | 
	
		
			
				|  |  | -                if(previousChild.length > 0) {
 | 
	
		
			
				|  |  | -                    previousChild.removeClass('childContainerHighlight');
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                childDiv.addClass('childContainerHighlight');
 | 
	
		
			
				|  |  | -                this.highlightedChild = nodeID;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- showTimeline ----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function showTimeline() // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var timeline = this.timeline;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(!this.timelineInit)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $('#time_control').append("<div class='header'>Timeline</div>" + 
 | 
	
		
			
				|  |  | -                "<div style='text-align:center;padding-top:10px'><span><button id='play'></button><button id='stop'></button></span>" +
 | 
	
		
			
				|  |  | -                "<span><span class='rate slider'></span> " + 
 | 
	
		
			
				|  |  | -                "<span class='rate vwf-label' style='display: inline-block; width:8ex'></span></span></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var options = {};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            [ "play", "pause", "stop" ].forEach( function( state ) {
 | 
	
		
			
				|  |  | -                options[state] = { icons: { primary: "ui-icon-" + state }, label: state, text: false };
 | 
	
		
			
				|  |  | -            } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            options.rate = { value: 0, min: -2, max: 2, step: 0.1, };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var state = {};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $.get(
 | 
	
		
			
				|  |  | -                "admin/state", 
 | 
	
		
			
				|  |  | -                undefined, 
 | 
	
		
			
				|  |  | -                function( data ) {
 | 
	
		
			
				|  |  | -                    state = data;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    $( "button#play" ).button( "option", state.playing ? options.pause : options.play );
 | 
	
		
			
				|  |  | -                    $( "button#stop" ).button( "option", "disabled", state.stopped );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    $( ".rate.slider" ).slider( "value", Math.log( state.rate ) / Math.LN10 );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    if ( state.rate < 1.0 ) {
 | 
	
		
			
				|  |  | -                        var label_rate = 1.0 / state.rate;
 | 
	
		
			
				|  |  | -                    } 
 | 
	
		
			
				|  |  | -                    else {
 | 
	
		
			
				|  |  | -                        var label_rate = state.rate;
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    var label = label_rate.toFixed(2).toString().replace( /(\.\d*?)0+$/, "$1" ).replace( /\.$/, "" );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    if ( state.rate < 1.0 ) {
 | 
	
		
			
				|  |  | -                        label = "∕ " + label;
 | 
	
		
			
				|  |  | -                    } else {
 | 
	
		
			
				|  |  | -                        label = label + " ×";
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    $( ".rate.vwf-label" ).html( label );
 | 
	
		
			
				|  |  | -                }, 
 | 
	
		
			
				|  |  | -                "json" 
 | 
	
		
			
				|  |  | -            );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $( "button#play" ).button(
 | 
	
		
			
				|  |  | -                options.pause
 | 
	
		
			
				|  |  | -            ). click( function() {
 | 
	
		
			
				|  |  | -                $.post(
 | 
	
		
			
				|  |  | -                    state.playing ? "admin/pause" : "admin/play", 
 | 
	
		
			
				|  |  | -                    undefined, 
 | 
	
		
			
				|  |  | -                    function( data ) {
 | 
	
		
			
				|  |  | -                        state = data;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        $( "button#play" ).button( "option", state.playing ? options.pause : options.play );
 | 
	
		
			
				|  |  | -                        $( "button#stop" ).button( "option", "disabled", state.stopped );
 | 
	
		
			
				|  |  | -                    },
 | 
	
		
			
				|  |  | -                    "json" 
 | 
	
		
			
				|  |  | -                );
 | 
	
		
			
				|  |  | -            } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $( "button#stop" ).button(
 | 
	
		
			
				|  |  | -                options.stop
 | 
	
		
			
				|  |  | -            ). click( function() {
 | 
	
		
			
				|  |  | -                $.post(
 | 
	
		
			
				|  |  | -                    "admin/stop", 
 | 
	
		
			
				|  |  | -                    undefined, 
 | 
	
		
			
				|  |  | -                    function( data ) {
 | 
	
		
			
				|  |  | -                        state = data;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        $( "button#play" ).button( "option", state.playing ? options.pause : options.play );
 | 
	
		
			
				|  |  | -                        $( "button#stop" ).button( "option", "disabled", state.stopped );
 | 
	
		
			
				|  |  | -                    }, 
 | 
	
		
			
				|  |  | -                    "json" 
 | 
	
		
			
				|  |  | -                );
 | 
	
		
			
				|  |  | -            } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $( ".rate.slider" ).slider(
 | 
	
		
			
				|  |  | -                options.rate
 | 
	
		
			
				|  |  | -            ) .bind( "slide", function( event, ui ) {
 | 
	
		
			
				|  |  | -                $.get( 
 | 
	
		
			
				|  |  | -                    "admin/state", 
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    { "rate": Math.pow( 10, Number(ui.value) ) }, 
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    function( data ) {
 | 
	
		
			
				|  |  | -                        state = data;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        $( ".rate.slider" ).slider( "value", Math.log( state.rate ) / Math.LN10 );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        if ( state.rate < 1.0 ) {
 | 
	
		
			
				|  |  | -                            var label_rate = 1.0 / state.rate;
 | 
	
		
			
				|  |  | -                        } 
 | 
	
		
			
				|  |  | -                        else {
 | 
	
		
			
				|  |  | -                            var label_rate = state.rate;
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        var label = label_rate.toFixed(2).toString().replace( /(\.\d*?)0+$/, "$1" ).replace( /\.$/, "" );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        if ( state.rate < 1.0 ) {
 | 
	
		
			
				|  |  | -                            label = "∕ " + label;
 | 
	
		
			
				|  |  | -                        } else {
 | 
	
		
			
				|  |  | -                            label = label + " ×";
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        $( ".rate.vwf-label" ).html( label );
 | 
	
		
			
				|  |  | -                    }, 
 | 
	
		
			
				|  |  | -                    "json"
 | 
	
		
			
				|  |  | -                );
 | 
	
		
			
				|  |  | -            } );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.timelineInit = true;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if (!this.editorOpen)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(timeline).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(timeline).show();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- Show Code Editor tab
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -function showCodeEditorTab() // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -       var self = this;
 | 
	
		
			
				|  |  | -        var codeEditor= this.codeEditor;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(!this.codeEditorInit)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $('#codeEditor_tab').append("<div class='header'>Live Code Editor</div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $('#codeEditor_tab').append("<div style='padding:6px'><input type='button' id='min' value='Min Window' /><span> </span><input class='live_button' type='button' id='printit' value='Print It' /><span> </span><input class='live_button' type='button' id='doit' value='Do It' /></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -           $("#doit").click(function(evt) {
 | 
	
		
			
				|  |  | -            codeEditorDoit.call(self, editor, sceneID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         $("#printit").click(function(evt) {
 | 
	
		
			
				|  |  | -            codeEditorPrintit.call(self, editor, sceneID);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -         // $('#codeEditor_tab').append("<div style='padding:6px'></div>");
 | 
	
		
			
				|  |  | -         $('#min').click(function(evt) {
 | 
	
		
			
				|  |  | -               $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -             $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        //Open Live Editor
 | 
	
		
			
				|  |  | -         $('#codeEditor_tab').append('<div id="editorlive">console.log("test")</div>');
 | 
	
		
			
				|  |  | -         
 | 
	
		
			
				|  |  | -     var sceneID = self.kernel.application();    
 | 
	
		
			
				|  |  | -     var editor = createAceEditor(self, sceneID);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    editor.on('blur', function (event, editor) {
 | 
	
		
			
				|  |  | -            //    $('#editor').animate({ 'left' : "-260px" }, 175);
 | 
	
		
			
				|  |  | -            //     $('.vwf-tree').animate({ 'width' : "260px" }, 175);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.codeEditorInit = true;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if (!this.editorOpen)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(codeEditor).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(codeEditor).show();
 | 
	
		
			
				|  |  | -                // $('#editor').animate({ 'left' : "-500px" }, 175);
 | 
	
		
			
				|  |  | -                // $('.vwf-tree').animate({ 'width' : "500px" }, 175);
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function codeEditorDoit(editor, nodeID)
 | 
	
		
			
				|  |  | -		{
 | 
	
		
			
				|  |  | -			var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -			if (selectedText == "") {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -				var currline = editor.getSelectionRange().start.row;
 | 
	
		
			
				|  |  | -				var selectedText = editor.session.getLine(currline);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -			}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -			//console.log(selectedText);
 | 
	
		
			
				|  |  | -            //var sceneID = self.kernel.application();
 | 
	
		
			
				|  |  | -			vwf_view.kernel.execute(nodeID, selectedText);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | - function codeEditorPrintit(editor, nodeID)
 | 
	
		
			
				|  |  | -		{
 | 
	
		
			
				|  |  | -			var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -			if (selectedText == "") {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -				var currline = editor.getSelectionRange().start.row;
 | 
	
		
			
				|  |  | -				var selectedText = editor.session.getLine(currline);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -			}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -			//console.log(selectedText);
 | 
	
		
			
				|  |  | -            //var sceneID = self.kernel.application();
 | 
	
		
			
				|  |  | -            let scriptText = 'console.log('+selectedText+');'
 | 
	
		
			
				|  |  | -			self.kernel.execute(nodeID, scriptText);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -         
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // -- showAboutTab ----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function showAboutTab() // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var about = this.about;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(!this.aboutInit)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $('#about_tab').append("<div class='header'>About</div>" + 
 | 
	
		
			
				|  |  | -                "<div class='about'><p style='font:bold 12pt Arial'>Virtual World Framework & LiveCode editor</p>" +
 | 
	
		
			
				|  |  | -                "<p><b>Version: </b> 0.1 <b>VWF version: </b>" + version.toString() + "</p>" +
 | 
	
		
			
				|  |  | -                "<p><b>This project site: </b><a href='http://demo.krestianstvo.org' target='_blank'>http://demo.krestianstvo.org</a></p>" +
 | 
	
		
			
				|  |  | -                "<p><b>Site VWF: </b><a href='http://virtualworldframework.com' target='_blank'>http://virtualworldframework.com</a></p>" +
 | 
	
		
			
				|  |  | -                "<p><b>Project source: </b><a href='https://github.com/NikolaySuslov/vwf/tree/aframe' target='_blank'>https://github.com/NikolaySuslov/vwf/tree/aframe</a></p></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            this.aboutInit = true;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if (!this.editorOpen)
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(about).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            $(about).show();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    //  -- showModelsTab ----------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function showModelsTab(modelID, modelURL) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var self = this;
 | 
	
		
			
				|  |  | -        var models = this.models;
 | 
	
		
			
				|  |  | -        var modelsTemp = this.modelsTemp;
 | 
	
		
			
				|  |  | -        this.currentModelID = modelID;
 | 
	
		
			
				|  |  | -        this.currentModelURL = modelURL;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        $(models).html("");
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        if(modelID == "") {
 | 
	
		
			
				|  |  | -            $(modelsTemp).html("<div class='header'>Models</div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $.getJSON("admin/models", function( data ) {
 | 
	
		
			
				|  |  | -                if(data.length > 0) {
 | 
	
		
			
				|  |  | -                    $.each( data, function( key, value ) {
 | 
	
		
			
				|  |  | -                        var fileName = encodeURIComponent(value['basename']);
 | 
	
		
			
				|  |  | -                        var divId = fileName;
 | 
	
		
			
				|  |  | -                        if(divId.indexOf('.') != -1) {
 | 
	
		
			
				|  |  | -                            divId = divId.replace(/\./g, "_");
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -                        var url = value['url'];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        $(modelsTemp).append("<div class='childContainer'><div id='" + divId + "' class='modelEntry' data-url='" + url + "'>"
 | 
	
		
			
				|  |  | -                            + fileName + "</div></div>");
 | 
	
		
			
				|  |  | -                        $("#" + divId).click(function(e) {
 | 
	
		
			
				|  |  | -                            modelDrillDown.call(self, e.target.textContent, e.target.getAttribute("data-url"));
 | 
	
		
			
				|  |  | -                        })
 | 
	
		
			
				|  |  | -                    });
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                else {
 | 
	
		
			
				|  |  | -                    $(modelsTemp).append("<div class='childEntry'><p style='font:bold 12pt Arial'>No Models Found</p></div>");
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            } );
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else {
 | 
	
		
			
				|  |  | -            var divId = modelID;
 | 
	
		
			
				|  |  | -            if(divId.indexOf('.') != -1) {
 | 
	
		
			
				|  |  | -                divId = divId.replace(/\./g, "_");
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            $(modelsTemp).html("<div id='" + divId + "-backDiv' class='header'><img src='images/back.png' id='" + divId + "-back' alt='back'/>" + modelID + "</div>");
 | 
	
		
			
				|  |  | -            $("#" + divId + "-back").click(function(e) {
 | 
	
		
			
				|  |  | -                modelDrillUp.call(self, '');
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $(modelsTemp).append("<div id='" + divId + "-rotation' class='propEntry'><table><tr><td><b>Rotation</b></td><td>" +
 | 
	
		
			
				|  |  | -                "<input type='text' class='input_text' id='input-" + divId + "-rotation' value='[1,0,0,0]'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-rotation').keydown( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-rotation').keypress( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-rotation').keyup( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $(modelsTemp).append("<div id='" + divId + "-scale' class='propEntry'><table><tr><td><b>Scale</b></td><td>" +
 | 
	
		
			
				|  |  | -                "<input type='text' class='input_text' id='input-" + divId + "-scale' value='[1,1,1]'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-scale').keydown( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-scale').keypress( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-scale').keyup( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $(modelsTemp).append("<div id='" + divId + "-translation' class='propEntry'><table><tr><td><b>Translation Offset</b></td><td>" +
 | 
	
		
			
				|  |  | -                "<input type='text' class='input_text' id='input-" + divId + "-translation' value='[0,0,0]'></td></tr></table></div>");
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-translation').keydown( function(evt) {
 | 
	
		
			
				|  |  | -                    evt.stopPropagation();
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-translation').keypress( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            $('#input-' + divId + '-translation').keyup( function(evt) {
 | 
	
		
			
				|  |  | -                evt.stopPropagation();
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $(modelsTemp).append("<div class='drag'><div id='" + divId + "-drag' class='modelEntry' draggable='true' data-escaped-name='" + divId +"' data-url='" + modelURL + "'>Drag To Create</div></div>");
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            $("#" + divId + "-drag").on("dragstart", function (e) {
 | 
	
		
			
				|  |  | -                var fileName = $("#" + e.target.getAttribute("data-escaped-name") + "-backDiv").text();
 | 
	
		
			
				|  |  | -                var rotation = encodeURIComponent($("#input-" + e.target.getAttribute("data-escaped-name") + "-rotation").val());
 | 
	
		
			
				|  |  | -                var scale = encodeURIComponent($("#input-" + e.target.getAttribute("data-escaped-name") + "-scale").val());
 | 
	
		
			
				|  |  | -                var translation = encodeURIComponent($("#input-" + e.target.getAttribute("data-escaped-name") + "-translation").val());
 | 
	
		
			
				|  |  | -                var fileData = "{\"fileName\":\""+fileName+"\", \"fileUrl\":\""+e.target.getAttribute("data-url")+"\", " +
 | 
	
		
			
				|  |  | -                    "\"rotation\":\"" + rotation + "\", \"scale\":\"" + scale + "\", \"translation\":\"" + translation + "\"}";
 | 
	
		
			
				|  |  | -                e.originalEvent.dataTransfer.setData('text/plain', fileData);
 | 
	
		
			
				|  |  | -                e.originalEvent.dataTransfer.setDragImage(e.target, 0, 0);
 | 
	
		
			
				|  |  | -                return true;
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- Model drillDown -------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function modelDrillDown(modelID, modelURL) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var models = this.models;
 | 
	
		
			
				|  |  | -        var modelsTemp = this.modelsTemp;
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        showModelsTab.call(this, modelID, modelURL);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        if(modelID != "") $(models).hide('slide', {direction: 'left'}, 175); 
 | 
	
		
			
				|  |  | -        $(modelsTemp).show('slide', {direction: 'right'}, 175);    
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.models = modelsTemp;
 | 
	
		
			
				|  |  | -        this.modelsTemp = models;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  | -    // -- Model drillUp ---------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function modelDrillUp(modelID) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        var models = this.models;
 | 
	
		
			
				|  |  | -        var modelsTemp = this.modelsTemp;
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        showModelsTab.call(this, modelID);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        $(models).hide('slide', {direction: 'right'}, 175); 
 | 
	
		
			
				|  |  | -        $(modelsTemp).show('slide', {direction: 'left'}, 175);    
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        this.models = modelsTemp;
 | 
	
		
			
				|  |  | -        this.modelsTemp = models;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- SaveStateAsFile -------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function saveStateAsFile(filename) // invoke with the view as "this"
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        this.logger.info("Saving: " + filename);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        if(supportAjaxUploadWithProgress.call(this))
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            var xhr = new XMLHttpRequest();
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Save State Information
 | 
	
		
			
				|  |  | -            var state = vwf.getState();
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var timestamp = state["queue"].time;
 | 
	
		
			
				|  |  | -            timestamp = Math.round(timestamp * 1000);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var objectIsTypedArray = function( candidate ) {
 | 
	
		
			
				|  |  | -                var typedArrayTypes = [
 | 
	
		
			
				|  |  | -                    Int8Array,
 | 
	
		
			
				|  |  | -                    Uint8Array,
 | 
	
		
			
				|  |  | -                    // Uint8ClampedArray,
 | 
	
		
			
				|  |  | -                    Int16Array,
 | 
	
		
			
				|  |  | -                    Uint16Array,
 | 
	
		
			
				|  |  | -                    Int32Array,
 | 
	
		
			
				|  |  | -                    Uint32Array,
 | 
	
		
			
				|  |  | -                    Float32Array,
 | 
	
		
			
				|  |  | -                    Float64Array
 | 
	
		
			
				|  |  | -                ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                var isTypedArray = false;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                if ( typeof candidate == "object" && candidate != null ) {
 | 
	
		
			
				|  |  | -                    typedArrayTypes.forEach( function( typedArrayType ) {
 | 
	
		
			
				|  |  | -                        isTypedArray = isTypedArray || candidate instanceof typedArrayType;
 | 
	
		
			
				|  |  | -                    } );
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                return isTypedArray;
 | 
	
		
			
				|  |  | -            };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var transitTransformation = function( object ) {
 | 
	
		
			
				|  |  | -                return objectIsTypedArray( object ) ?
 | 
	
		
			
				|  |  | -                    Array.prototype.slice.call( object ) : object;
 | 
	
		
			
				|  |  | -            };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var json = JSON.stringify(
 | 
	
		
			
				|  |  | -                require("vwf/utility").transform(
 | 
	
		
			
				|  |  | -                    state, transitTransformation
 | 
	
		
			
				|  |  | -                )
 | 
	
		
			
				|  |  | -            );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            json = $.encoder.encodeForURL(json);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var path = window.location.pathname;
 | 
	
		
			
				|  |  | -            var pathSplit = path.split('/');
 | 
	
		
			
				|  |  | -            if ( pathSplit[0] == "" ) {          
 | 
	
		
			
				|  |  | -                pathSplit.shift();
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            if ( pathSplit[ pathSplit.length - 1 ] == "" ) {
 | 
	
		
			
				|  |  | -                pathSplit.pop();
 | 
	
		
			
				|  |  | -            }            
 | 
	
		
			
				|  |  | -            var inst = undefined;
 | 
	
		
			
				|  |  | -            var instIndex = pathSplit.length - 1;
 | 
	
		
			
				|  |  | -            if ( pathSplit.length > 2 ) {
 | 
	
		
			
				|  |  | -                if ( pathSplit[ pathSplit.length - 2 ] == "load" ) {
 | 
	
		
			
				|  |  | -                    instIndex = pathSplit.length - 3;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            if ( pathSplit.length > 3 ) {
 | 
	
		
			
				|  |  | -                if ( pathSplit[ pathSplit.length - 3 ] == "load" ) {
 | 
	
		
			
				|  |  | -                    instIndex = pathSplit.length - 4;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -            inst = pathSplit[ instIndex ];
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var root = "";
 | 
	
		
			
				|  |  | -            for ( var i=0; i < instIndex; i++ ) {
 | 
	
		
			
				|  |  | -                if ( root != "" ) {
 | 
	
		
			
				|  |  | -                    root = root + "/";
 | 
	
		
			
				|  |  | -                } 
 | 
	
		
			
				|  |  | -                root = root + pathSplit[i];
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if(filename == '') filename = inst;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            if(root.indexOf('.vwf') != -1) root = root.substring(0, root.lastIndexOf('/'));
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            xhr.open("POST", "/"+root+"/save/"+filename, true);
 | 
	
		
			
				|  |  | -            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 | 
	
		
			
				|  |  | -            xhr.send("root="+root+"/"+filename+"&filename=saveState&inst="+inst+"×tamp="+timestamp+"&extension=.vwf.json"+"&jsonState="+json);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Save Config Information
 | 
	
		
			
				|  |  | -            var config = {"info":{}, "model":{}, "view":{} };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Save browser title
 | 
	
		
			
				|  |  | -            config["info"]["title"] = $('title').html();
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Save model drivers
 | 
	
		
			
				|  |  | -            Object.keys(vwf_view.kernel.kernel.models).forEach(function(modelDriver) {
 | 
	
		
			
				|  |  | -                if(modelDriver.indexOf('vwf/model/') != -1) config["model"][modelDriver] = "";
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // If neither glge or threejs model drivers are defined, specify nodriver
 | 
	
		
			
				|  |  | -            if(config["model"]["vwf/model/glge"] === undefined && config["model"]["vwf/model/threejs"] === undefined) config["model"]["nodriver"] = "";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Save view drivers and associated parameters, if any
 | 
	
		
			
				|  |  | -            Object.keys(vwf_view.kernel.kernel.views).forEach(function(viewDriver) {
 | 
	
		
			
				|  |  | -                if(viewDriver.indexOf('vwf/view/') != -1)
 | 
	
		
			
				|  |  | -                {
 | 
	
		
			
				|  |  | -                    if( vwf_view.kernel.kernel.views[viewDriver].parameters )
 | 
	
		
			
				|  |  | -                    {
 | 
	
		
			
				|  |  | -                        config["view"][viewDriver] = vwf_view.kernel.kernel.views[viewDriver].parameters;
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                    else config["view"][viewDriver] = "";
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            var jsonConfig = $.encoder.encodeForURL( JSON.stringify( config ) );
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            // Save config file to server
 | 
	
		
			
				|  |  | -            var xhrConfig = new XMLHttpRequest();
 | 
	
		
			
				|  |  | -            xhrConfig.open("POST", "/"+root+"/save/"+filename, true);
 | 
	
		
			
				|  |  | -            xhrConfig.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 | 
	
		
			
				|  |  | -            xhrConfig.send("root="+root+"/"+filename+"&filename=saveState&inst="+inst+"×tamp="+timestamp+"&extension=.vwf.config.json"+"&jsonState="+jsonConfig);
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        else
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            console.error("Unable to save state.");
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- LoadSavedState --------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function loadSavedState(filename, applicationpath, revision) 
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        this.logger.info("Loading: " + filename);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // Redirect until setState ID conflict is resolved
 | 
	
		
			
				|  |  | -        var path = window.location.pathname;
 | 
	
		
			
				|  |  | -        var inst = path.substring(path.length-17, path.length-1);
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | -        var pathSplit = path.split('/');
 | 
	
		
			
				|  |  | -        if ( pathSplit[0] == "" ) {          
 | 
	
		
			
				|  |  | -            pathSplit.shift();
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        if ( pathSplit[ pathSplit.length - 1 ] == "" ) {
 | 
	
		
			
				|  |  | -            pathSplit.pop();
 | 
	
		
			
				|  |  | -        }            
 | 
	
		
			
				|  |  | -        var inst = undefined;
 | 
	
		
			
				|  |  | -        var instIndex = pathSplit.length - 1;
 | 
	
		
			
				|  |  | -        if ( pathSplit.length > 2 ) {
 | 
	
		
			
				|  |  | -            if ( pathSplit[ pathSplit.length - 2 ] == "load" ) {
 | 
	
		
			
				|  |  | -                instIndex = pathSplit.length - 3;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        if ( pathSplit.length > 3 ) {
 | 
	
		
			
				|  |  | -            if ( pathSplit[ pathSplit.length - 3 ] == "load" ) {
 | 
	
		
			
				|  |  | -                instIndex = pathSplit.length - 4;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        inst = pathSplit[ instIndex ];
 | 
	
		
			
				|  |  | -        if ( revision ) {
 | 
	
		
			
				|  |  | -            window.location.pathname = applicationpath + "/" + inst + '/load/' + filename + '/' + revision + '/';
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        else {
 | 
	
		
			
				|  |  | -            window.location.pathname = applicationpath + "/" + inst + '/load/' + filename + '/';
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // $.get(filename,function(data,status){
 | 
	
		
			
				|  |  | -        //     vwf.setState(data);
 | 
	
		
			
				|  |  | -        // });
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // -- SupportAjax -----------------------------------------------------------------------------
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    function supportAjaxUploadWithProgress()
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -        return supportAjaxUploadProgressEvents();
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        function supportAjaxUploadProgressEvents() 
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -            var xhr = new XMLHttpRequest();
 | 
	
		
			
				|  |  | -            return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -} );
 |