Alterações solicitadas por e-mail e atualização de interface

css/ivprog-term (cópia).css

@@ -0,0 +1,71 @@
+.ivprog-term-div {
+  background-color: black;
+  width: 100%;
+  height: 12rem;
+  overflow-y: scroll;
+}
+
+.ivprog-term-userText {
+  color: white;
+}
+
+.ivprog-term-info {
+  color: green;
+}
+
+.ivprog-term-error {
+  color: red;
+}
+
+.ivprog-term-input {
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 500;
+  background-color: inherit;
+  border: 0;
+  color: white;
+}
+
+.ivprog-term-div > .ivprog-term-input, .ivprog-term-div > .ivprog-term-userText,
+.ivprog-term-div > .ivprog-term-info, .ivprog-term-div, .ivprog-term-error {
+  padding-left: 20px;
+}
+
+#ivprog-term {
+  border: 1px solid gray;
+  background: black;
+  margin-top: -30px;
+  position: relative;
+  padding: 5px;
+}
+#ivprog-term i {
+  margin-left: 5px;
+  cursor: pointer;
+}
+.div_toggle_console {
+  cursor: pointer;
+}
+.ivprog-term-active {
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
+  border: 3px solid rgba(81, 203, 238, 1) !important;
+}
+
+.ivprog-term-div {
+  overflow:scroll;
+}
+
+.ivprog-term-div::-webkit-scrollbar {
+    width: 12px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: green;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}

css/ivprog-term.css

@@ -29,3 +29,47 @@
 .ivprog-term-div > .ivprog-term-info, .ivprog-term-div, .ivprog-term-error {
   padding-left: 20px;
 }
+
+.general-grid {
+  height: 90%;
+}
+
+#ivprog-term {
+  border: 1px solid gray;
+  background: black;
+  margin-top: -30px;
+  position: relative;
+  padding: 5px;
+}
+#ivprog-term i {
+  margin-left: 5px;
+  cursor: pointer;
+}
+.div_toggle_console {
+  cursor: pointer;
+}
+.ivprog-term-active {
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
+  border: 3px solid rgba(81, 203, 238, 1) !important;
+}
+
+.ivprog-term-div {
+  overflow:scroll;
+}
+
+.ivprog-term-div::-webkit-scrollbar {
+    width: 12px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: green;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}

css/ivprog-visual-1.0 (cópia).css

@@ -0,0 +1,786 @@
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+}
+
+.ui.raised.container.segment.div_to_body {
+  height: 92%;
+  padding: 10px;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: #1279c6;
+}
+
+.ivprog_visual_panel {
+	height: 96%;
+	overflow: auto;
+	overflow-x: auto;
+}
+
+.ivprog_textual_code {
+	width: 100%;
+	min-height: 500px;
+	resize: none;
+	background-color: white;
+}
+
+.main_title h2 {
+	margin: 0;
+}
+.main_title span {
+	font-size: 80%;
+	font-style: italic;
+}
+.ivprog_format_info {
+	cursor: pointer;
+	margin-left: 10px;
+}
+.ivprog_visual_panel {
+	border: 2px solid #A0A0A0;
+	background-color: red;
+}
+
+.ui.container.main_title {
+	float: left;
+	width: 200px;
+}
+.ui.container.content_margin {
+	margin-top: 10px;
+}
+.content_margin .content_sub_margin {
+	display: inline; 
+    margin-left: 34%;
+	margin-top: 50px;
+}
+.ui.icon.menu.center.aligned.container {
+	width: 438px;
+	margin-top: -10px;
+}
+
+.ghost {
+  opacity: .5;
+  background: #C8EBFB;
+}
+
+/* editor visual: **/
+
+.function_signature_div,
+.function_close_div {
+	font-weight: bold;
+	color: black;
+}
+.ui.selection.data_types_dropdown.visible.dropdown>.text:not(.default),
+.ui.selection.parameter_data_types_dropdown.visible.dropdown>.text:not(.default) {
+	font-weight: bold;
+}
+.ui.selection.data_types_dropdown.dropdown,
+.ui.selection.parameter_data_types_dropdown.dropdown {
+	padding-bottom: 0;
+}
+
+.ui.fluid.dropdown.data_types_dropdown {
+	display: inline;
+	width: 150px;
+	border: none;
+	background: none;
+}
+
+.ui.fluid.dropdown.parameter_data_types_dropdown {
+	display: inline;
+	border: none;
+	background: none;
+}
+
+.ui.fluid.dropdown.data_types_dropdown.selection .dropdown.icon,
+.ui.fluid.dropdown.parameter_data_types_dropdown.selection .dropdown.icon {
+	font-size: 1em;
+}
+
+.function_close_div {
+	margin-left: 20px;
+}
+
+.command_div {
+	margin-left: 16px;
+}
+
+.function_draggable_div {
+	width: 16px;
+	float: left;
+}
+
+.function_draggable_div img {
+	margin-bottom: -4px;
+	margin-left: -2px;
+}
+
+.input_name_function{
+	min-width: 50px;
+}
+
+.text_attr_receives {
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+.menu_operations {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.case_commands_block {
+	/*border: 1px solid red;*/
+}
+
+.context_menu {
+	display: inline;
+	float: right; 
+	margin-right: 25px;
+	margin-top: -4px;
+}
+
+.case_div {
+	border: 1px solid gray;
+	margin-left: 30px;
+	padding-left: 5px;
+	margin-top: 5px;
+}
+
+.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
+.expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
+.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
+.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit,
+.all_elements_write, .container_var_element_control, .inline_add_command {
+	display: inline;
+}
+
+.conditional_comands_block {
+	min-height: 10px;
+}
+
+.div_comment_text {
+	min-width: 100px;
+	font-style: italic;
+}
+
+.enable_edit_name_function, .add_parameter, .remove_parameter, .add_parameter_button, .remove_variable {
+	cursor: pointer;
+}
+
+[contenteditable="true"]:active,
+[contenteditable="true"]:focus,
+[contenteditable="true"]:hover {
+	border: 1px dashed #000;
+	background: white;
+}
+
+.ui.segment.ivprog_visual_panel {
+	padding: 3px;
+	margin-top: -5px;
+	background: white;
+}
+
+.ui.segment.function_div {
+	padding: 5px;
+	margin: 0;
+	margin-bottom: 5px;
+	background-color: #bddbff;
+}
+
+.ui.button.add_function_button,
+.ui.button.add_variable_button,
+.ui.button.add_command_button {
+	padding: 8px;
+	margin: 0;
+}
+
+.glyphicon-move {
+  cursor: move;
+  cursor: -webkit-grabbing;
+}
+
+.glyphicon.glyphicon-move {
+	float: left;
+}
+
+.remove_function_button, .minimize_function_button, .add_var_top_button, .add_command_top_button {
+	float: right;
+}
+
+.ui.icon.button.remove_function_button,
+.ui.icon.button.minimize_function_button {
+	background: none;
+	padding: 0;
+	margin-top: 12px;
+}
+
+.ui.segment.variables_list_div,
+.ui.segment.commands_list_div {
+	padding: 5px;
+	margin: 0;
+	margin-left: 30px;
+	width: calc(100% - 30px);
+	background-color: #f9f9f9;
+	min-height: 30px;
+}
+
+.ui.segment.variables_list_div {
+	margin-top: 5px;
+}
+
+.ui.labeled.icon.button.add_variable_button,
+.ui.labeled.icon.button.add_command_button {
+	
+}
+
+.program_signature {
+	font-weight: bold;
+	margin: -3px 0 10px -5px;
+}
+
+.program_final {
+	font-weight: bold;
+	margin: 5px 0 0 -5px;
+}
+
+.parameters_list {
+	display: inline;
+}
+
+.parameter_type {
+	margin-left: 10px;
+    margin-right: 15px;
+}
+
+.function_return .dropdown .icon, .parameter_type .dropdown .icon {
+	margin-left: 6px;
+}
+.tabela_var {
+	display: inline;
+}
+.buttons_manage_columns i, .tr_manage_lines i {
+	cursor: pointer;
+	display: inline;
+}
+div.buttons_manage_columns {
+	display: inline;
+}
+.tr_manage_lines {
+	text-align: center;
+}
+.div_valor_var {
+	display: inline;
+}
+.ui.comment span {
+	font-style: italic;
+}
+.ui.comment, .ui.reader, .ui.writer, .ui.attribution, .ui.iftrue, .ui.repeatNtimes, .ui.whiletrue, .ui.dowhiletrue, .ui.switch, .ui.functioncall,
+.ui.return {
+	border: 1px solid gray;
+	padding: 5px;
+	border-radius: 5px;
+	margin: 5px;
+	background: #f9f9f9;
+}
+.ui.repeatNtimes .separator_character {
+	margin-right: 10px;
+}
+.ui.repeatNtimes, .ui.whiletrue {
+    min-height: 50px;
+}
+.ui.dowhiletrue .ui.block_commands {
+	min-height: 10px;
+}
+.add_var_top_button {
+	padding-right: 50px;
+}
+
+.function_signature_div {
+	min-height: 40px;
+	padding-top: 8px;
+}
+
+.move_function {
+	margin-top: 9px;
+}
+
+.div_start_minimize_v {
+	float: right;
+	width: 22px; 
+	height: 10px;
+}
+
+.global_var {
+	margin-bottom: 7px;
+}
+
+.list_globals, .global_const {
+	display: inline;
+}
+
+.created_element {
+	position: absolute;
+	width: 50%;
+	z-index: 99999999;
+	opacity: .8;
+	cursor: move;
+}
+
+.width-dynamic {
+	min-width: 100px;
+}
+
+.ui.icon.plus.square.outline.icon_add_item_to_writer {
+	margin-right: 10px;
+	margin-left: 10px;
+	cursor: pointer;
+}
+
+.button_remove_command, .button_refresh_attribution {
+	float: right;
+	cursor: pointer;
+}
+
+.expression_drag {
+	cursor: col-resize;
+	border: 2px gray solid;
+	display: inline;
+	width: 5px;
+}
+
+.ui.icon.red.exclamation.triangle.error_icon {
+	float: left;
+    margin-left: -30px;
+}
+
+.height_100 {
+  height: 100%;
+}
+
+.default_visual_title {
+  display: none;
+}
+
+.expandingArea textarea {
+	min-height: 30px;
+	resize: none;
+	padding: 5px;
+}
+
+.ui table .btn_actions {
+	text-align: center;
+}
+
+.button_remove_case {
+	cursor: pointer;
+	padding: 3px;
+}
+
+.ui.button_add_case {
+	margin-top: 10px;
+}
+.accordion {
+	margin: auto;
+}
+
+.global_container:hover, 
+.variable_container:hover {
+	border: 2px solid gray;
+	padding-left: 8px;
+	padding-right: 8px;
+	padding-top: 5px;
+	padding-bottom: 4px;
+}
+
+.ui.label.function_name_parameter:hover {
+	border: 2px solid gray;
+	padding: 5px 6px 5px 6px;
+}
+
+.ui.label.function_name_parameter {
+	padding: 7px 8px 7px 8px;
+}
+
+.global_container:hover,  .variable_container:hover {
+	margin-bottom:  4px !important;
+}
+
+.global_container .global_type, .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable,
+.ui.dropdown.function_return, div.function_name_div_updated,
+.ui.dropdown.parameter_type, .parameter_div_edit {
+	background: #cecece;
+	border-radius: 5px;
+	padding: 4px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+.parameter_div_edit {
+	padding-bottom: 2px;
+	padding-top: 2px;
+}
+.ui.dropdown.parameter_type {
+
+}
+div.function_name_div_updated {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	margin-right: 10px;
+}
+.function_name_div_updated .name_function_updated {
+	padding-left: 10px;
+    padding-right: 10px;
+}
+.variable_container .variable_type {
+	padding: 5px;
+	margin-left: 0;
+	margin-right: 3px;
+}
+
+.global_container .global_type:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover, .variable_container .span_value_variable:hover,
+.ui.dropdown.function_return:hover, div.function_name_div_updated:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
+	background: #848484;
+	color: #fff;
+	z-index: 999999;
+}
+
+.editing_name_var {
+	min-width: 40px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+
+.global_container .global_type:active, 
+.variable_container .variable_type:active,
+.ui.dropdown.function_return:active, 
+div.function_name_div_updated:active,
+.ui.dropdown.parameter_type:active {
+	background: #636363;
+	color: #fff;
+}
+
+.global_container i {
+	cursor: pointer;
+}
+
+.global_container .ui.icon.plus.square.outline, .global_container .ui.icon.minus.square.outline {
+	font-size: 120%;
+}
+
+.character_equals {
+	vertical-align: sub;
+    font-size: 150%;
+}
+
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable,
+.yellow.icon.times.remove_parameter {
+	float: right;
+    margin-right: -1px;
+    margin-left: 8px;
+    opacity: 0;
+}
+
+.global_container:hover > .yellow.icon.times.remove_global, .variable_container:hover > .yellow.icon.times.remove_variable,
+.function_name_parameter:hover > .yellow.icon.times.remove_parameter {
+	opacity: 1;
+}
+
+.tr_manage_lines {
+	padding-top: 10px;
+}
+
+.ui.icon.button.add-globalVar-button.add_global_button {
+	padding: 7px;
+    margin-bottom: 4px;
+    padding-bottom: 9px;
+}
+.all_functions {
+	margin-top: -5px;
+}
+.only_in_frame {
+	position: absolute;
+    z-index: 9999;
+    width: 90px;
+    top: 5px;
+    left: 5px;
+    opacity: .6;
+}
+.only_in_frame:hover {
+	opacity: 1;
+}
+.only_in_frame:hover span {
+	display: block;
+}
+.only_in_frame span {
+	display: none;
+	margin-top: -5px;
+}
+.ui.container.main_title {
+	width: 85px;
+}
+.ui.label.global_container {
+	margin-bottom: 3px;
+}
+.ui.label.variable_container {
+	margin-bottom: 3px;
+}
+.created_div_valor_var {
+	display: inline-block;
+}
+.ui.dropdown.function_return {
+	padding-left: 15px;
+    padding-right: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+.parethesis_function {
+	font-size: 120%;
+}
+
+.var_value_menu_div,
+.attribution .var_attributed,
+.component_element,
+.conditional_expression .expression_element,
+.menu_start_rendered,
+.attribution_expression .variable_attribution,
+.render_style_param,
+.attribution_expression .div_expression_st:not(:empty),
+.incrementation_field .incrementation_variable,
+.incrementation_field .first_operand:not(:empty),
+.incrementation_field .operator:not(:empty),
+.incrementation_field .second_operand:not(:empty) {
+	background: #e8e8e8;
+	border-radius: 5px;
+	min-width: 40px;
+	padding: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 1px solid gray;
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
+    color: black;
+}
+.menu_start_rendered {
+	padding-left: 12px;
+}
+.menu_start_rendered i {
+	width: 1.5em;
+    margin-right: -1em;
+}
+.row_container:hover, .column_container:hover {
+	background: #cecece;
+}
+
+.column_container, .row_container {
+	border-radius: 4px;
+    border: 1px solid gray;
+    padding: 1px 2px 1px 2px;
+    background: #e8e8e8;
+
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
+}
+
+.var_value_menu_div div i {
+	color: black;
+}
+
+.span_command_spec {
+	color: black;
+	font-weight: bold;
+	font-size: 110%;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	display: inline-block;
+	width: 93%;
+}
+
+.ui.comment.command_container .var_value_menu_div .variable_rendered,
+.ui.comment.command_container .var_value_menu_div .value_rendered {
+    width: 100%;
+    cursor: text;
+    font-style: italic;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	cursor: text;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	background: none;
+	border-radius: 0;
+    border: 0px solid gray;
+    box-shadow: none;
+    padding: 0px;
+    font-size: 110%;
+}
+.ui.comment.command_container .var_name,
+.ui.comment.command_container .value_rendered {
+	color: rgba(0,0,0,.6);
+}
+.ui.comment.command_container .var_value_menu_div input {
+    width: 100%;
+    display: inline-block;
+    font-style: italic;
+}
+.ui.dropdown.menu_start_rendered .text i {
+    padding-right: 8px;
+}
+
+* {
+	font-family: 'Roboto', sans-serif;
+}
+
+.add_global_button i {
+	font-size: 130%;
+}
+
+.global_var .circle.add_global_button, .global_var i.back,
+.ui.add_var_context .icon.plus.circle, .ui.add_var_context .icon.circle.back,
+.ui.inline_add_command .icon.plus.circle, .ui.inline_add_command .icon.circle.back {
+	position: absolute;
+}
+.global_var .circle.add_global_button,
+.ui.add_var_context .icon.plus.circle,
+.inline_add_command .icon.plus.circle {
+	z-index: 10;
+	color: #bf80d4!important;
+	cursor: pointer;
+	font-style: 120%;
+}
+.global_var i.back,
+.ui.add_var_context .icon.circle.back,
+.inline_add_command .icon.circle.back {
+	z-index: 9;
+	color: white !important;
+}
+.ui.add_var_context{
+	margin-left: -4px;
+}
+.inline_add_command {
+	color: #ab0054 !important;
+}
+
+.ui.add_var_context .icon.superscript {
+	font-size: 110%;
+}
+.ui.add_var_context .ui.icon.button.purple {
+	padding: 8px;
+}
+
+.global_container .global_const, .global_container .global_type,
+.variable_container .variable_type {
+	font-size: 114%;
+}
+.global_container .editing_name_var,
+.variable_container .editing_name_var {
+	font-size: 108%;
+}
+.global_container .global_const i {
+	font-size: 120%;
+}
+.global_container .span_value_variable,
+.variable_container .span_value_variable {
+    font-size: 110%;
+}
+.global_container .global_type, .global_container .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable, .variable_container .editing_name_var,
+.ui.dropdown.parameter_type, .parameter_div_edit {
+	background: black;
+	border-radius: 5px;
+	padding: 4px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.global_container .global_type:hover, .global_container .editing_name_var:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover,  .variable_container .span_value_variable:hover, .variable_container .editing_name_var:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
+	background-color: #545353;
+}
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable {
+	color: yellow;
+	font-size: 125%;
+}
+.inline_add_command .icon.plus.circle {
+	color: #ec9962 !important;
+}
+.inline_add_command .icon.plus.circle, 
+.inline_add_command .icon.circle.back,
+.ui.add_var_context .icon.plus.circle, 
+.ui.add_var_context .icon.circle.back,
+.global_var .icon.plus.circle, 
+.global_var .icon.circle.back {
+	left: 1.8em !important;
+	margin-top: 1.5em !important;
+}
+.ui.icon.button.dropdown.menu_commands {
+    float: left;
+    color: white;
+    margin-left: -4px;
+    padding: 8px;
+    margin-top: 0.3em;
+}
+
+.ui.dropdown.variable_type {
+	padding: 5px;
+}
+
+.global_var .global_container .ellipsis,
+.variable_container .ui.icon.ellipsis.vertical.inverted,
+.ui.label.function_name_parameter.pink .ui.icon.ellipsis.vertical.inverted {
+	position: relative;
+    margin-left: -3px;
+    margin-right: 4px;
+    opacity: 0;
+    cursor: move;
+    font-size: 120%;
+}
+
+.global_container:hover > .ellipsis,
+.variable_container:hover > .ui.icon.ellipsis.vertical.inverted {
+	opacity: 1;
+}
+
+.glyphicon.glyphicon-move.move_function i {
+	font-size: 130%;
+}
+
+.span_name_parameter.label_enable_name_parameter {
+	font-size: 94%;
+    font-weight: 700;
+}
+
+.ui.dropdown.parameter_type {
+	font-size: 96%;
+}
+.ui.label.function_name_parameter .ellipsis {
+	font-size: 96% !important;
+	margin-left: .05em !important;
+}
+.ui.label.function_name_parameter:hover > .ellipsis {
+	opacity: 1 !important;
+}
+
+.command_container {
+    background: #e9dede !important;
+	border: 2px solid #e76060 !important;
+    border-radius: 0.25em !important;
+}
+.command_drag {
+	cursor: move;
+}
+.command_container.over_command_drag {
+	border: 3px dotted blue !important;
+	padding: 0.315em !important;
+}
+.commands_list_div.over_command_drag {
+	border: 3px dotted blue !important;
+	padding: 0.2em !important;
+}

css/ivprog-visual-1.0.css

@@ -10,15 +10,22 @@ body {
   height: 92%;
   padding: 10px;
   padding-left: 6px;
-  padding-right: 6px;
+	padding-right: 6px;
+	background-color: #1279c6;
 }
 
-.ivprog_visual_panel {
+.ivprog_visual_panel, .ivprog_tab {
 	height: 96%;
 	overflow: auto;
 	overflow-x: auto;
 }
 
+.ivprog_functions_tab_panel {
+	height: 80%;
+	overflow: auto;
+	overflow-x: auto;
+}
+
 .ivprog_textual_code {
 	width: 100%;
 	min-height: 500px;
@@ -28,6 +35,7 @@ body {
 
 .main_title h2 {
 	margin: 0;
+	color: white;
 }
 .main_title span {
 	font-size: 80%;
@@ -37,7 +45,7 @@ body {
 	cursor: pointer;
 	margin-left: 10px;
 }
-.ivprog_visual_panel {
+.ivprog_visual_panel, .ivprog_tab {
 	border: 2px solid #A0A0A0;
 	background-color: red;
 }
@@ -152,7 +160,7 @@ body {
 .expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
 .expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
 .incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit,
-.all_elements_write, .container_var_element_control {
+.all_elements_write, .container_var_element_control, .inline_add_command {
 	display: inline;
 }
 
@@ -176,16 +184,17 @@ body {
 	background: white;
 }
 
-.ui.segment.ivprog_visual_panel {
+.ui.segment.ivprog_visual_panel, .ui.segment.ivprog_tab {
 	padding: 3px;
 	margin-top: -5px;
-	background: #edf4ff;
+	background: white;
 }
 
-.ui.segment.function_div {
+.ui.segment.function_div, .ui.segment.menu_segment {
 	padding: 5px;
 	margin: 0;
 	margin-bottom: 5px;
+	background-color: #bddbff;
 }
 
 .ui.button.add_function_button,
@@ -438,8 +447,8 @@ div.function_name_div_updated {
 	margin-right: 3px;
 }
 
-.global_container .global_type:hover, .editing_name_var:hover, .global_container .span_value_variable:hover,
-.variable_container .variable_type:hover, .variable_container .span_name_variable:hover, .variable_container .span_value_variable:hover,
+.global_container .global_type:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover, .variable_container .span_value_variable:hover,
 .ui.dropdown.function_return:hover, div.function_name_div_updated:hover,
 .ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
 	background: #848484;
@@ -475,17 +484,17 @@ div.function_name_div_updated:active,
     font-size: 150%;
 }
 
-.red.icon.times.remove_global,
-.red.icon.times.remove_variable,
-.red.icon.times.remove_parameter {
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable,
+.yellow.icon.times.remove_parameter {
 	float: right;
     margin-right: -1px;
     margin-left: 8px;
     opacity: 0;
 }
 
-.global_container:hover > .red.icon.times.remove_global, .variable_container:hover > .red.icon.times.remove_variable,
-.function_name_parameter:hover > .red.icon.times.remove_parameter {
+.global_container:hover > .yellow.icon.times.remove_global, .variable_container:hover > .yellow.icon.times.remove_variable,
+.function_name_parameter:hover > .yellow.icon.times.remove_parameter {
 	opacity: 1;
 }
 
@@ -494,8 +503,9 @@ div.function_name_div_updated:active,
 }
 
 .ui.icon.button.add-globalVar-button.add_global_button {
-	padding: 8px;
-	margin-bottom: 4px;
+	padding: 7px;
+    margin-bottom: 4px;
+    padding-bottom: 9px;
 }
 .all_functions {
 	margin-top: -5px;
@@ -646,4 +656,163 @@ button.ui.segment, .global_container.ui {
 .global_container.ui {
 	padding-bottom: 0.5em;
 	padding-top: 0.5em;
+}
+
+
+* {
+	font-family: 'Roboto', sans-serif;
+}
+
+.add_global_button i {
+	font-size: 130%;
+}
+
+.global_var .circle.add_global_button, .global_var i.back,
+.ui.add_var_context .icon.plus.circle, .ui.add_var_context .icon.circle.back,
+.ui.inline_add_command .icon.plus.circle, .ui.inline_add_command .icon.circle.back {
+	position: absolute;
+}
+.global_var .circle.add_global_button,
+.ui.add_var_context .icon.plus.circle,
+.inline_add_command .icon.plus.circle {
+	z-index: 10;
+	color: #bf80d4!important;
+	cursor: pointer;
+	font-style: 120%;
+}
+.global_var i.back,
+.ui.add_var_context .icon.circle.back,
+.inline_add_command .icon.circle.back {
+	z-index: 9;
+	color: white !important;
+}
+.ui.add_var_context{
+	margin-left: -4px;
+}
+.inline_add_command {
+	color: #ab0054 !important;
+}
+
+.ui.add_var_context .icon.superscript {
+	font-size: 110%;
+}
+.ui.add_var_context .ui.icon.button.purple {
+	padding: 8px;
+}
+
+.global_container .global_const, .global_container .global_type,
+.variable_container .variable_type {
+	font-size: 114%;
+}
+.global_container .editing_name_var,
+.variable_container .editing_name_var {
+	font-size: 108%;
+}
+.global_container .global_const i {
+	font-size: 120%;
+}
+.global_container .span_value_variable,
+.variable_container .span_value_variable {
+    font-size: 110%;
+}
+.global_container .global_type, .global_container .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable, .variable_container .editing_name_var,
+.ui.dropdown.parameter_type, .parameter_div_edit {
+	background: black;
+	border-radius: 5px;
+	padding: 4px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.global_container .global_type:hover, .global_container .editing_name_var:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover,  .variable_container .span_value_variable:hover, .variable_container .editing_name_var:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
+	background-color: #545353;
+}
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable {
+	color: yellow;
+	font-size: 125%;
+}
+.inline_add_command .icon.plus.circle {
+	color: #ec9962 !important;
+}
+.inline_add_command .icon.plus.circle, 
+.inline_add_command .icon.circle.back,
+.ui.add_var_context .icon.plus.circle, 
+.ui.add_var_context .icon.circle.back,
+.global_var .icon.plus.circle, 
+.global_var .icon.circle.back {
+	left: 1.8em !important;
+	margin-top: 1.5em !important;
+}
+.ui.icon.button.dropdown.menu_commands {
+    float: left;
+    color: white;
+    margin-left: -4px;
+    padding: 8px;
+    margin-top: 0.3em;
+}
+
+.ui.dropdown.variable_type {
+	padding: 5px;
+}
+
+.global_var .global_container .ellipsis,
+.variable_container .ui.icon.ellipsis.vertical.inverted,
+.ui.label.function_name_parameter.pink .ui.icon.ellipsis.vertical.inverted,
+.list_globals .ellipsis {
+	position: relative;
+    margin-left: -3px;
+    margin-right: 4px;
+    opacity: 0;
+    cursor: move;
+    font-size: 120%;
+}
+
+.global_container:hover > .ellipsis,
+.variable_container:hover > .ui.icon.ellipsis.vertical.inverted {
+	opacity: 1;
+}
+
+.glyphicon.glyphicon-move.move_function i {
+	font-size: 130%;
+}
+
+.span_name_parameter.label_enable_name_parameter {
+	font-size: 94%;
+    font-weight: 700;
+}
+
+.ui.dropdown.parameter_type {
+	font-size: 96%;
+}
+.ui.label.function_name_parameter .ellipsis {
+	font-size: 96% !important;
+	margin-left: .05em !important;
+}
+.ui.label.function_name_parameter:hover > .ellipsis {
+	opacity: 1 !important;
+}
+
+.command_container {
+    background: #e9dede !important;
+	border: 2px solid #e76060 !important;
+    border-radius: 0.25em !important;
+}
+.command_drag {
+	cursor: move;
+}
+.command_container.over_command_drag {
+	border: 3px dotted blue !important;
+	padding: 0.315em !important;
+}
+.commands_list_div.over_command_drag {
+	border: 3px dotted blue !important;
+	padding: 0.2em !important;
+}
+
+.tabular > .item:not(.active) {
+	color: white !important;
 }

grammar/en/langFunctions.js

@@ -4,21 +4,21 @@ export default {
   main_function: "start",
   $read: "read",
   $write: "write",
-  $numElements: "numero_elementos",
-  $matrixLines: "matriz_linhas",
-  $matrixColumns: "matriz_colunas",
+  $numElements: "total_of_elements",
+  $matrixLines: "total_of_lines",
+  $matrixColumns: "total_of_columns",
   $substring: "subcadeia",
   $length: "comprimento",
   $uppercase: "caixa_alta",
   $lowercase: "caixa_baixa",
   $charAt: "char_at",
-  $isReal: "e_real",
-  $isInt: "e_inteiro",
-  $isBool: "e_logico",
-  $castReal: "como_real",
-  $castInt: "como_inteiro",
-  $castBool: "como_logico",
-  $castString: "como_cadeia",
+  $isReal: "is_real",
+  $isInt: "is_integer",
+  $isBool: "is_logic",
+  $castReal: "to_real",
+  $castInt: "to_integer",
+  $castBool: "to_logic",
+  $castString: "to_string",
   $sin: "sin",
   $cos: "cos",
   $tan: "tan",
@@ -30,4 +30,5 @@ export default {
   $invert: "invert",
   $max: "maximum",
   $min: "minimum"
+
 }

grammar/en/langLibs.js

@@ -6,5 +6,5 @@ export default {
   $ioLib: "ES",
   $strLib: "Texto",
   $arrayLib: "Arranjo",
-  $langLib: "IV"
+  $langLib: "Conversion"
 }

grammar/es/langFunctions.js

@@ -4,21 +4,21 @@ export default {
   main_function: "inicio",
   $read: "leia",
   $write: "escreva",
-  $numElements: "numero_elementos",
-  $matrixLines: "matriz_linhas",
-  $matrixColumns: "matriz_colunas",
+  $numElements: "total_of_elements",
+  $matrixLines: "total_of_lines",
+  $matrixColumns: "total_of_columns",
   $substring: "subcadeia",
   $length: "comprimento",
   $uppercase: "caixa_alta",
   $lowercase: "caixa_baixa",
   $charAt: "char_at",
-  $isReal: "e_real",
-  $isInt: "e_inteiro",
-  $isBool: "e_logico",
-  $castReal: "como_real",
-  $castInt: "como_inteiro",
-  $castBool: "como_logico",
-  $castString: "como_cadeia",
+  $isReal: "is_real",
+  $isInt: "is_integer",
+  $isBool: "is_logic",
+  $castReal: "to_real",
+  $castInt: "to_integer",
+  $castBool: "to_logic",
+  $castString: "to_string",
   $sin: "sin",
   $cos: "cos",
   $tan: "tan",

grammar/es/langLibs.js

@@ -6,5 +6,5 @@ export default {
   $ioLib: "ES",
   $strLib: "Texto",
   $arrayLib: "Arranjo",
-  $langLib: "IV"
+  $langLib: "Conversion"
 }

grammar/pt/langFunctions.js

@@ -4,9 +4,9 @@ export default {
   main_function: "inicio",
   $read: "leia",
   $write: "escreva",
-  $numElements: "numero_elementos",
-  $matrixLines: "matriz_linhas",
-  $matrixColumns: "matriz_colunas",
+  $numElements: "total_de_elementos",
+  $matrixLines: "total_de_linhas",
+  $matrixColumns: "total_de_colunas",
   $substring: "subcadeia",
   $length: "comprimento",
   $uppercase: "caixa_alta",

grammar/pt/langLibs.js

@@ -6,5 +6,5 @@ export default {
   $ioLib: "ES",
   $strLib: "Texto",
   $arrayLib: "Arranjo",
-  $langLib: "IV"
+  $langLib: "Conversao"
 }

i18n/en/ui.json

@@ -14,7 +14,7 @@
   "integer": "integer",
   "real": "real",
   "program": "program",
-  "text": "text",
+  "text": "string",
   "text_start": "text",
   "boolean": "boolean",
   "true": "true",
@@ -76,6 +76,8 @@
   "text_menu_functions_text":"Text",
   "text_menu_functions_arrangement":"Arrangement",
   "text_menu_functions_conversion":"Conversion",
+  "text_none_variable":"There is no declared variable",
+  "text_none_variable_instruction":"Create a new variable to use it",
   "tooltip_visual": "Visual programming",
   "tooltip_textual": "Textual programming",
   "tooltip_upload": "Upload code file",
@@ -93,7 +95,7 @@
   "var_menu_select_function": "Select a function",
   "expression_menu_select": "Select an expression",
   "math": "Mathematic",
-  "text": "Text",
+  "text_t": "Text",
   "arrangement": "Arrangement",
   "conversion": "Conversion",
   "$sin": "sin",
@@ -106,5 +108,20 @@
   "$negate": "negate",
   "$invert": "invert",
   "$max": "maximum",
-  "$min": "minimum"
+  "$min": "minimum",
+  "$substring": "substring",
+  "$length": "length",
+  "$uppercase": "uppercase",
+  "$lowercase": "lowercase",
+  "$charAt": "char_at",
+  "$numElements": "total_of_elements",
+  "$matrixLines": "total_of_lines",
+  "$matrixColumns": "total_of_columns",
+  "$isReal": "is_real",
+  "$isInt": "is_integer",
+  "$isBool": "is_logic",
+  "$castReal": "to_real",
+  "$castInt": "to_integer",
+  "$castBool": "to_logic",
+  "$castString": "to_string"
 }

i18n/es/ui.json

@@ -14,7 +14,7 @@
   "integer": "integer",
   "real": "real",
   "program": "program",
-  "text": "text",
+  "text": "string",
   "text_start": "text",
   "boolean": "boolean",
   "true": "true",
@@ -76,6 +76,8 @@
   "text_menu_functions_text":"Text",
   "text_menu_functions_arrangement":"Arrangement",
   "text_menu_functions_conversion":"Conversion",
+  "text_none_variable":"There is no declared variable",
+  "text_none_variable_instruction":"Create a new variable to use it",
   "tooltip_visual": "Visual programming",
   "tooltip_textual": "Textual programming",
   "tooltip_upload": "Upload code file",
@@ -98,7 +100,7 @@
   "arrangement": "Arrangement",
   "conversion": "Conversion",
   "math": "Mathematic",
-  "text": "Text",
+  "text_t": "Text",
   "arrangement": "Arrangement",
   "conversion": "Conversion",
   "$sin": "sin",
@@ -111,5 +113,20 @@
   "$negate": "negate",
   "$invert": "invert",
   "$max": "maximum",
-  "$min": "minimum"
+  "$min": "minimum",
+  "$substring": "substring",
+  "$length": "length",
+  "$uppercase": "uppercase",
+  "$lowercase": "lowercase",
+  "$charAt": "char_at",
+  "$numElements": "total_of_elements",
+  "$matrixLines": "total_of_lines",
+  "$matrixColumns": "total_of_columns",
+  "$isReal": "is_real",
+  "$isInt": "is_integer",
+  "$isBool": "is_logic",
+  "$castReal": "to_real",
+  "$castInt": "to_integer",
+  "$castBool": "to_logic",
+  "$castString": "to_string"
 }

i18n/pt/error.json

@@ -17,21 +17,69 @@
   "invalid_global_var": "Erro crítico: Chamada inválida da função initGlobal fora do contexto BASE",
   "not_implemented": "Erro interno crítico: A função definida pelo sistema $0 não foi implementada.",
   "function_missing": "A função $0 não foi encontrada",
-  "invalid_parameters_size": "A quantidade de parâmetros fornecidos está incorreta. Esperava-se $0, encontrou-se $1",
-  "invalid_ref": "Você deve fornecer apenas um identificador como parâmetro",
-  "invalid_parameter_type": "O valor fornecido como parâmetro é do tipo $0, mas o tipo esperado é $1",
-  "unknown_command": "Erro interno crítico: Comando desconhecido encontrado",
+  "function_missing_full": "A função $0 na linha: $1, coluna: $2 não foi encontrada",
+  "invalid_parameters_size_full": "Erro na linha $0: a quantidade de parâmetros fornecidos à função $1 está incorreta. Esperava-se $2, encontrou-se $3.",
+  "invalid_parameters_size": "A quantidade de parâmetros fornecidos à função $0 está incorreta. Esperava-se $1, encontrou-se $2",
+  "invalid_ref_full": "A expressão $0 fornecida como parâmetro para a função $1 na linha $2 não é válida para esta função. Use uma variável ou posição de vetor.",
+  "invalid_ref": "A expressão $0 fornecida como parâmetro para a função $1 não é válida para esta função. Use uma variável ou posição de vetor.",
+  "invalid_parameter_type_full": "A expressão $0 fornecida como parâmetro para a função $1 na linha $2 não é compatível com o tipo esperado.",
+  "invalid_parameter_type": "A expressão $0 fornecida como parâmetro para a função $1 não é compatível com o tipo esperado.",
+  "unknown_command_full": "Erro interno crítico: comando desconhecido encontrado na linha $0",
+  "unknown_command": "Erro interno crítico: comando desconhecido encontrado!",
+  "loop_condition_type_full": "Erro na linha: $0, coluna $1: a condição dos laços de repetição deve ser do tipo lógico",
   "loop_condition_type": "A condição dos laços de repetição deve ser do tipo lógico",
+  "endless_loop_full": "Possível laço infinito detectado no seu código. Verifique a linha $0",
+  "endless_loop": "Possível laço infinito detectado no seu código.",
+  "for_condition_type_full": "Erro na linha: $0, coluna $1: a condição de parada do comando para(...) deve ser do tipo lógico",
+  "for_condition_type": "A condição de parada do comando para(...) deve ser do tipo lógico",
+  "if_condition_type_full": "Erro na linha: $0, coluna $1: a condição de um comando se...senao deve ser do tipo lógico",
   "if_condition_type": "A condição de um comando se...senao deve ser do tipo lógico",
-  "invalid_return_type": "A função $0 deve retornar um tipo $1, ao invés de $1",
-  "unexpected_break_command": "Erro interno crítico: Comando pare encontrado fora do contexto de um laço/escolha..caso",
+  "invalid_return_type_full": "Erro na linha $0: a expressão não produz um tipo compatível com a função $1. Tipo esperado: $2.",
+  "invalid_return_type": "A expressão não produz um tipo compatível com a função $0. Tipo esperado: $1.",
+  "invalid_void_return_full": "Erro na linha $0: a função $1 não pode retornar uma expressão vazia, use uma espressão do tipo $2",
+  "invalid_void_return": "A função $0 não pode retornar uma expressão vazia, use uma espressão do tipo $1",
+  "unexpected_break_command_full": "Erro interno crítico: comando pare encontrado fora do contexto de um laço/escolha..caso na linha $0",
+  "unexpected_break_command": "Erro interno crítico: comando pare encontrado fora do contexto de um laço/escolha..caso",
   "invalid_dimension": "As dimensões de um vetor/matriz devem ser do tipo inteiro",
-  "void_in_expression": "A função $0 não pode ser utilizada aqui pois seu tipo de retorno é vazio",
-  "invalid_array": "Expressão literal de Vetor/Mariz inválida",
+  "void_in_expression_full": "Erro na linha: $0, coluna: $1: a função $2 não pode ser utilizada em uma expressão pois seu tipo de retorno é vazio",
+  "void_in_expression": "A função $0 não pode ser utilizada em uma expressão pois seu tipo de retorno é vazio",
+  "invalid_array_access_full": "Identificador $0 na linha: $1, coluna: $2 não se refere a um vetor/matriz válido",
   "invalid_array_access": "Identificador $0 não se refere a um vetor/matriz válido",
-  "column_outbounds": "Número de colunas $0 é inválido para a matriz $1 que possui $2 colunas",
-  "line_outbounds": "Número de linhas $0 é invaálido para a matriz $1 que possui $2 linhas",
+  "invalid_matrix_access_full": "Identificador $0 na linha: $1, coluna: $2 não se refere a uma matriz válida",
+  "invalid_matrix_access": "Identificador $0 não se refere a uma matriz válida",
+  "matrix_column_outbounds_full": "Erro na linha $0: número de colunas $1 é inválido para a matriz $2 que possui $3 colunas",
+  "matrix_column_outbounds": "Número de colunas $0 é inválido para a matriz $1 que possui $2 colunas",
+  "matrix_line_outbounds_full": "Erro na linha $0: número de linhas $1 é inválido para a matriz $2 que possui $3 linhas",
+  "matrix_line_outbounds": "Número de linhas $0 é inválido para a matriz $1 que possui $2 linhas",
+  "vector_line_outbounds_full": "Erro na linha $0: número de linhas $1 é inválido para a matriz $2 que possui $3 linhas",
+  "vector_line_outbounds": "Número de linhas $0 é inválido para a matriz $1 que possui $2 linhas",
+  "vector_not_matrix_full": "Erro na linha $0: $1 não é uma matriz",
+  "vector_not_matrix": "$1 não é uma matriz",
+  "invalid_infix_op_full": "Erro na linha $0: não é possível aplicar a operação $1 entre os tipos $2 e $3",
   "invalid_infix_op": "Não é possível aplicar a operação $0 entre os tipos $1 e $2",
+  "invalid_unary_op_full": "Erro na linha $0: não é possível aplicar a operação $1 ao tipo $2",
   "invalid_unary_op": "Não é possível aplicar a operação $0 ao tipo $1",
-  "unknown_op": "Erro interno crítico: Operação $0 desconhecida"
+  "unknown_op": "Erro interno crítico: Operação $0 desconhecida",
+  "duplicate_function": "A função $0 na linha: $1, coluna: $2 já foi definida anteriormente.",
+  "duplicate_variable": "A variável $0 na linha: $1, coluna: $2 já foi declarada anteriormente.",
+  "main_parameters": "A função inicio não pode ter parâmetros.",
+  "symbol_not_found_full": "A variável $0 na linha: $1, coluna: $2 não foi declarada",
+  "symbol_not_found": "A variável $0 não foi declarada",
+  "array_dimension_not_int_full": "As dimensões de um vetor/matriz na linha: $0 devem ser do tipo inteiro.",
+  "array_dimension_not_int": "As dimensões de um vetor/matriz devem ser do tipo inteiro.",
+  "array_dimension_not_positive_full": "As dimensões de um vetor/matriz na linha: $0 devem ser valores positivos.",
+  "array_dimension_not_positive": "As dimensões de um vetor/matriz devem ser valores positivos.",
+  "incompatible_types_full": "O tipo $0 não é compatível com o tipo resultante da expressão na linha $1",
+  "incompatible_types": "O tipo $0 não é compatível com o tipo resultante da expressão fornecida.",
+  "incompatible_types_array_full": "A expressão $0 é incompatível com o tipo $1 na linha: $2, coluna: $3.",
+  "incompatible_types_array": "A expressão $0 é incompatível com o tipo $1.",
+  "invalid_case_type_full": "O caso $0 na linha $1 é incompatível com o tipo $2.",
+  "invalid_case_type": "O caso $0 é incompatível com o tipo $1.",
+  "function_no_return": "A função $0 não possui um retorno acessível. Toda função deve ter ao menos um retorno no seu corpo principal.",
+  "invalid_array_literal_type_full": "Erro na linha $0: a expressão $1 não resulta em um tipo compatível.",
+  "invalid_array_literal_type": "A expressão $0 não resulta em um tipo compatível.",
+  "invalid_array_literal_line_full": "Erro na linha $0: esperava-se $1 linhas mas encontrou $2.",
+  "invalid_array_literal_line": "Esperava-se $0 linhas mas encontrou $1.",
+  "invalid_array_literal_column_full": "Erro na linha $0: esperava-se $1 colunas mas encontrou $2.",
+  "invalid_array_literal_column": "Esperava-se $0 colunas mas encontrou $1."
 }

i18n/pt/ui.json

@@ -12,6 +12,9 @@
   "start": "inicio",
   "void": "vazio",
   "integer": "inteiro",
+  "and": "E",
+  "or": "OU",
+  "not": "nao",
   "real": "real",
   "program": "programa",
   "text": "cadeia",
@@ -36,6 +39,8 @@
   "text_btn_return":"Retorno",
   "text_comment": "Comentário",
   "join_or": "ou",
+  "matrix_string": "matriz de $0",
+  "vector_string": "vetor de $0",
   "text_attribution": "Atribuição",
   "text_if":"se",
   "text_break":"pare",
@@ -77,6 +82,8 @@
   "text_menu_functions_text":"Texto",
   "text_menu_functions_arrangement":"Arranjo",
   "text_menu_functions_conversion":"Conversão",
+  "text_none_variable":"Nenhuma variável declarada",
+  "text_none_variable_instruction":"Antes de utilizar uma variável, é necessário criá-la",
   "tooltip_visual": "Programação visual",
   "tooltip_textual": "Programação textual",
   "tooltip_upload": "Upload de código fonte",
@@ -95,7 +102,7 @@
   "expression_menu_select": "Selecione uma expressão",
   "$sin": "sen",
   "math": "Matematica",
-  "text": "Texto",
+  "text_t": "Texto",
   "arrangement": "Arranjo",
   "conversion": "Conversao",
   "$sin": "seno",
@@ -108,5 +115,20 @@
   "$negate": "trocar_sinal",
   "$invert": "inverter_valor",
   "$max": "maximo",
-  "$min": "minimo"
+  "$min": "minimo",
+  "$substring": "subcadeia",
+  "$length": "comprimento",
+  "$uppercase": "caixa_alta",
+  "$lowercase": "caixa_baixa",
+  "$charAt": "texto_na_posicao",
+  "$numElements": "total_de_elementos",
+  "$matrixLines": "total_de_linhas",
+  "$matrixColumns": "total_de_colunas",
+  "$isReal": "e_real",
+  "$isInt": "e_inteiro",
+  "$isBool": "e_logico",
+  "$castReal": "como_real",
+  "$castInt": "como_inteiro",
+  "$castBool": "como_logico",
+  "$castString": "como_cadeia"
 }

index.html

@@ -1,187 +1,204 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title></title>
-    <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
-    <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
-    <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
-    <script src="js/jquery-3.3.1.min.js"></script>
-
-    <script src="build/ivprog.bundle.js"></script>
-
-    <script src="js/iassign-integration-functions.js"></script>
-    <script src="i18n/i18n-engine.js"></script>
-
-    <script src="js/jquery-ui.js"></script>
-    <script src="js/Sortable.js"></script>
-
-  </head>
-  <body>
-
-    <div class="ui one column doubling stackable grid container">
-      <div class="column">
-        <div class="ui container main_title">
-          <h2>iVProg</h2>
-          <span>interactive coding</span>
-        </div>
 
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta http-equiv="cache-control" content="no-cache">
+  <meta http-equiv="cache-control" content="no-store">
+  <meta http-equiv="cache-control" content="max-age=0">
+  <meta http-equiv="expires" content="-1">
+  <meta http-equiv="pragma" content="no-cache">
+  <title></title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
+  <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
+  <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
+  <script src="js/jquery-3.3.1.min.js"></script>
+  <script src="js/iassign-integration-functions.js"></script>
+  <script src="build/ivprog.bundle.js"></script>
+  <script src="js/semantic/semantic.min.js"></script>
+  <script src="js/semantic/semantic-buttons.js"></script>
+
+  <script src="js/jquery-ui.js"></script>
+  <script src="js/Sortable.js"></script>
+  <script src="i18n/i18n-engine.js"></script>
+
+</head>
+
+<body>
+
+  <div class="ui one column doubling stackable grid container">
+    <div class="column">
+      <!-- <div class="ui container main_title">
+        <h2>iVProg</h2>
+        <span>interactive coding</span>
+      </div>
 
 
-        <div class="ui container content_margin">
-          <div class="content_sub_margin">
-              <div class="blue ui ivprog_format buttons">
-                <button class="ui button active visual_coding_button">Visual</button>
-                <button class="ui button textual_coding_button">Textual</button>
-              </div>
 
-              <a class="ivprog_format_info">
-                <i class="circular inverted some-wrapping-div teal info icon small label ivprog_format_info popup"></i>
-              </a>
-              <div class="ui custom popup">
-                Choice how you prefer to develop. If disabled, teacher doesn't allow this change. <a href="#">See documentation about it.</a>
-              </div>
-            </div>
+      <div class="ui container content_margin">
+        <div class="content_sub_margin">
+          <div class="blue ui ivprog_format buttons">
+            <button class="ui button active visual_coding_button">Visual</button>
+            <button class="ui button textual_coding_button">Textual</button>
           </div>
 
+          <a class="ivprog_format_info">
+            <i class="circular inverted some-wrapping-div teal info icon small label ivprog_format_info popup"></i>
+          </a>
+          <div class="ui custom popup">
+            Choice how you prefer to develop. If disabled, teacher doesn't allow this change. <a href="#">See
+              documentation about it.</a>
+          </div>
+        </div>
+      </div> -->
 
-      </div>
 
     </div>
 
-    <div class="ui equal height stretched  centered grid">
-      <div class="five wide column">
-        <div class="ui raised container segment div_to_menu">
+  </div>
 
-          <div class="ui top attached tabular menu">
-            <a class="item" data-tab="variaveis">Vari&aacute;veis</a>
-            <a class="item active" data-tab="comandos">Comandos</a>
-            <a class="item" data-tab="funcoes">Fun&ccedil;&otilde;es</a>
-          </div>
-          <div class="ui bottom attached tab segment" data-tab="variaveis">
-            <div class="ui one column container segment ivprog_visual_panel loading">
-              <div class="global_var">
-                <div class="ui icon button add-globalVar-button add_global_button"><i class="icon superscript"></i></div>
-              </div>
-              <div class="ui container list_globals list-group"></div>
+  <div class="ui equal height stretched centered grid general-grid">
+    <div class="four wide column">
+      <div class="ui raised container segment div_to_menu div_to_body tabs">
+
+        <div class="ui top attached tabular menu">
+          <a class="item" data-tab="variaveis">Vari&aacute;veis</a>
+          <a class="item active" data-tab="comandos">Comandos</a>
+          <a class="item" data-tab="funcoes">Fun&ccedil;&otilde;es</a>
+        </div>
+        <div class="ui bottom attached tab segment ivprog_tab" data-tab="variaveis">
+          <div class="ui one column container segment ivprog_tab menu_segment">
+            <div class="global_var">
+                <i class="icon plus circle purple add_global_button"></i>
+                <i class="icon circle white back"></i>
+                <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
             </div>
+            <div class="ui container list_globals list-group" id="listGlobalsHandle"></div>
           </div>
-          <div class="ui bottom attached tab segment active" data-tab="comandos">
-            <div class="ui one column container segment ivprog_visual_panel loading">
-                <!--mudar-->
-                <!-- <div class="ui teal small labeled icon button add_function_button" draggable="true">
+        </div>
+        <div class="ui bottom attached tab segment ivprog_tab active" data-tab="comandos">
+          <div class="ui one column container segment ivprog_tab menu_segment">
+            <!--mudar-->
+            <!-- <div class="ui teal small labeled icon button add_function_button" draggable="true">
                   <data class="i18n" value="Function">Function</data>
                   <i class="add icon"></i>
                   </div> -->
 
-              <div class="ui container list-group list-commands">
-              </div>
-
+            <div class="ui container list-group list-commands">
             </div>
+
           </div>
-          <div class="ui bottom attached tab segment" data-tab="funcoes">
-            <div class="ui one column container segment ivprog_visual_panel loading">
-                <!--mudar-->
-                <!-- <div class="ui teal small labeled icon button add_function_button" draggable="true">
+        </div>
+        <div class="ui bottom attached tab segment ivprog_tab" data-tab="funcoes">
+          <div class="ui one column container segment menu_segment ">
+            <!--mudar-->
+            <!-- <div class="ui teal small labeled icon button add_function_button" draggable="true">
                   <data class="i18n" value="Function">Function</data>
                   <i class="add icon"></i>
                   </div> -->
 
-              <div class="ui container list-group functions_labels">
-              </div>
-
+            <div class="ui container list-group functions_labels">
             </div>
-            <div class="ui one column container segment ivprog_visual_panel loading">
-              <div class="ui container list-group library_labels">
-              </div>
+
+          </div>
+          <div class="ui one column container segment ivprog_tab">
+            <div class="ui container list-group library_labels">
             </div>
           </div>
-
         </div>
+
       </div>
-      <div class="ten wide column">
-        <div class="ui raised container segment div_to_body">
-
-      <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -10px;">
-        <a class="item">
-          <i class="file icon"></i>
-        </a>
-        <a class="item">
-          <i class="save icon"></i>
-        </a>
-        <a class="item">
-          <i class="upload icon"></i>
-        </a>
-        <a class="item">
-          <i class="download icon"></i>
-        </a>
-        <a class="item undo_button disabled">
-          <i class="undo icon"></i>
-        </a>
-        <a class="item">
-          <i class="redo icon"></i>
-        </a>
-        <a class="item run_button">
-          <i class="play icon"></i>
-        </a>
-        <a class="item">
-          <i class="stop icon"></i>
-        </a>
-        <a class="item">
-          <i class="help icon"></i>
-        </a>
-      </div>
+    </div>
+    <div class="ten wide column">
+      <div class="ui raised container segment div_to_body">
+        <div class="ui container main_title only_in_frame">
+          <h2>iVProg</h2>
+        </div>
+        <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
+          <a class="item active visual_coding_button">
+            <i class="window maximize outline icon"></i>
+          </a>
+          <a class="item textual_coding_button">
+            <i class="code icon"></i>
+          </a>
+          <a class="item upload_file_button disabled">
+            <i class="upload icon"></i>
+          </a>
+          <a class="item download_file_button disabled">
+            <i class="download icon"></i>
+          </a>
+          <a class="item undo_button disabled">
+            <i class="undo icon"></i>
+          </a>
+          <a class="item redo_button disabled">
+            <i class="redo icon"></i>
+          </a>
+          <a class="item run_button">
+            <i class="play icon"></i>
+          </a>
+          <a class="item assessment assessment_button">
+            <i class="check icon"></i>
+          </a>
+          <!--<a class="item expand_button">
+            <i class="expand arrows alternate icon"></i>
+          </a>-->
+          <a class="item help_button">
+            <i class="help icon"></i>
+          </a>
+        </div>
 
-      <div class="ui one column container segment ivprog_visual_panel loading">
-        <div class="program_signature"><data class="i18n" value="ui:program">program</data> { </div>
+        <div class="ui one column container segment ivprog_visual_panel loading">
 
 
+          <div class="all_functions list-group" id="listWithHandle">
 
-        <div class="all_functions list-group" id="listWithHandle">
+          </div>
 
-        </div>
 
+          <div class="ui teal small labeled icon button add_function_button">
+            <data class="i18n" value="ui:btn_function">Function</data>
+            <i class="add icon"></i>
+          </div>
+          <div class="program_final"></div>
 
-        <div class="ui teal small labeled icon button add_function_button">
-          <data class="i18n" value="ui:btn_function">Function</data>
-          <i class="add icon"></i>
         </div>
-        <div class="program_final">}</div>
 
-      </div>
 
+        <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
+          <textarea class="ivprog_textual_code" readonly></textarea>
+        </div>
 
-      <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
-        <textarea class="ivprog_textual_code" disabled></textarea>
-      </div>
-      <div id='ivprog-term' class="six column wide" style="display: none">
-      </div>
-
-    </div>
+        <div id='ivprog-term' class="six column wide">
+          <div class="div_toggle_console"><i class="inverted terminal icon green button_toggle_console"></i></div>
+        </div>
       </div>
     </div>
+  </div>
 
 
 
 
-    <script>
-      $(document).ready(() => {
-        ivprogCore.initVisualUI();
+  <script>
+    $(document).ready(() => {
+      ivprogCore.initVisualUI();
 
-        $('.menu .item')
-          .tab();    ;
-/*
-        document.querySelectorAll('.button.menu-item').forEach(function(element, index, array) {
-          element.addEventListener('dragstart', function(e) {
-              console.log(this);
+      $('.menu .item')
+        .tab();
+      /*
+              document.querySelectorAll('.button.menu-item').forEach(function(element, index, array) {
+                element.addEventListener('dragstart', function(e) {
+                    console.log(this);
+      
+                }, false);
+              });*/
+    });
+  </script>
 
-          }, false);
-        });*/
-      });
-    </script>
 
+  <script src="js/semantic/semantic.min.js"></script>
+  <script src="js/semantic/semantic-buttons.js"></script>
 
-    <script src="js/semantic/semantic.min.js"></script>
-    <script src="js/semantic/semantic-buttons.js"></script>
+</body>
 
-  </body>
-</html>
+</html>

js/visualUI/commands (cópia)/attribution.js

@@ -0,0 +1,488 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as VariableValueMenuManagement from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui attribution created_element"> <i class="ui icon small arrow left"></i> <span> x = 1 + 1 </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	
+	var el = $('<div class="ui attribution command_container"><i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_attributed"></div> <span class="text_attr_receives span_command_spec">'+LocalizedStrings.getUI('text_receives')+'</span> '
+		 + '<div class="expression_elements"></div> </div>');
+	el.data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);
+
+	if (!command.expression || command.expression.length < 1) {
+		var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
+		new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+		command.expression.push(exp);
+	}
+
+	addHandlers(command, function_obj, el);
+
+	renderExpressionElements(command, function_obj, el);
+
+	return el;
+
+}
+
+export function manageExpressionElements (command, ref_object, dom_object, menu_var_or_value, function_obj, selectedItem, expression_element) {
+	
+	var index_to_move = expression_element.itens.indexOf(ref_object);
+
+	switch (selectedItem.data('exp')) {
+		case Models.EXPRESSION_ELEMENTS.exp_op_exp:
+
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, [expression_element.itens[index_to_move],
+	     		Models.ARITHMETIC_TYPES.plus, 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_element.itens[index_to_move] = exp;
+
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.op_exp:
+
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.plus, 
+				expression_element.itens[index_to_move] ]);
+
+			expression_element.itens[index_to_move] = exp;
+
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.par_exp_par:
+
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.par_exp_par, [expression_element.itens[index_to_move]]);
+
+			expression_element.itens[index_to_move] = exp;
+
+			break;
+	}
+
+	renderExpressionElements(command, function_obj, dom_object);
+
+}
+
+function renderExpressionElements (command, function_obj, el) {
+	var expression_div = el.find('.expression_elements');
+	var command_container;
+
+	if (el.hasClass("command_container") == false) {
+		var hier = el.parentsUntil(".command_container");
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass("command_container")) {
+				command_container = $(hier[i]);
+				break;
+			}
+			if ($(hier[i]).hasClass("expression_elements")) {
+				expression_div = $(hier[i]);
+				break;
+			}
+		}
+	}
+
+	if (command_container) {
+		expression_div = command_container.find('.expression_elements');
+	}
+
+	expression_div.text('');
+
+	for (var i = 0; i < command.expression.length; i++) {
+
+		var temp = $('<div class="expression_element"></div>');
+		temp.data('ref_element', command.expression[i]);
+		temp.data('ref_index', i);
+
+		expression_div.append(temp);
+
+		renderElement(command, function_obj, temp, command.expression[i]);
+	}
+}
+
+function renderOperator (command, function_obj, temp_op, expression_element, index_op) {
+
+	var context_menu = '<div class="ui dropdown"><div class="text">';
+
+	switch (expression_element.itens[index_op]) {
+		case Models.ARITHMETIC_TYPES.plus:
+			context_menu += '+';
+			break;
+
+		case Models.ARITHMETIC_TYPES.minus:
+			context_menu += '-';
+			break;
+
+		case Models.ARITHMETIC_TYPES.multiplication:
+			context_menu += '*';
+			break;
+
+		case Models.ARITHMETIC_TYPES.division:
+			context_menu += '/';
+			break;
+
+		case Models.ARITHMETIC_TYPES.module:
+			context_menu += '%';
+			break;
+
+		case Models.ARITHMETIC_TYPES.none:
+			context_menu += '...';
+			break;
+	}
+	
+	context_menu += '</div><div class="menu">';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.plus+'">+</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.minus+'">-</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.multiplication+'">*</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.division+'">/</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.module+'">%</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.none+'" data-text="...">Nenhum</div>';
+	context_menu += '</div></div>';
+
+	context_menu = $(context_menu);
+
+	temp_op.append(context_menu);
+
+	context_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+	     expression_element.itens[index_op] = value;
+      }
+	});
+
+}
+
+function renderMenuAddExpression (command, function_obj, el, dom_append_menu, expression_append_new_expression) {
+
+	if (el.hasClass("command_container") == false) {
+		var hier = el.parentsUntil(".commands_list_div");
+
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass("command_container")) {
+				el = $(hier[i]);
+				break;
+			}
+		}
+	}
+
+	if (dom_append_menu.hasClass("expression_elements") == false) {
+		var hier = el.parentsUntil(".commands_list_div");
+
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass("expression_elements")) {
+				dom_append_menu = $(hier[i]);
+				break;
+			}
+		}
+	}
+
+	var context_menu = '<div class="ui dropdown"><div class="text"></div><i class="ui icon arrow alternate circle right outline"></i><div class="menu">';
+	context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+	context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+	context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+	context_menu += '</div></div>';
+
+	context_menu = $(context_menu);
+
+	dom_append_menu.append(context_menu);
+
+	context_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+	     switch (value) {
+	     	case Models.EXPRESSION_ELEMENTS.exp_op_exp:
+
+	     	var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, [new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true),
+	     		Models.ARITHMETIC_TYPES.plus, 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_append_new_expression.push(exp);
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.op_exp:
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.plus, 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_append_new_expression.push(exp);
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.par_exp_par:
+
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.par_exp_par, [new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_append_new_expression.push(exp);
+
+			break;
+		}
+		
+		renderExpressionElements(command, function_obj, el);
+      }
+	});
+
+}
+
+function renderElement (command, function_obj, el, expression_element) {
+
+	switch (expression_element.type_exp) {
+		case Models.EXPRESSION_ELEMENTS.exp_op_exp:
+
+			var temp_op = $('<div class="component_element"></div>');
+			var temp_exp_1 = $('<div class="component_element"></div>');
+			var temp_exp_2 = $('<div class="component_element"></div>');
+
+			el.append(temp_exp_1);
+			el.append(temp_op);
+			el.append(temp_exp_2);
+			
+			if (expression_element.itens[0].type) {
+				VariableValueMenu.renderMenu(command, expression_element.itens[0], temp_exp_1, function_obj, 2, expression_element);
+			} else {
+				renderElement(command, function_obj, temp_exp_1, expression_element.itens[0]);
+			}
+
+			renderOperator(command, function_obj, temp_op, expression_element, 1);
+
+			if (expression_element.itens[2].type) {
+				VariableValueMenu.renderMenu(command, expression_element.itens[2], temp_exp_2, function_obj, 2, expression_element);
+			} else {
+				renderElement(command, function_obj, temp_exp_2, expression_element.itens[2]);
+			}
+
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.op_exp:
+			var temp_op = $('<div class="component_element"></div>');
+			var temp_exp = $('<div class="component_element"></div>');
+
+			el.append(temp_op);
+			el.append(temp_exp);
+
+			renderOperator(command, function_obj, temp_op, expression_element, 0);
+
+			if (expression_element.itens[1].type) {
+				VariableValueMenu.renderMenu(command, expression_element.itens[1], temp_exp, function_obj, 2, expression_element);
+			} else {
+				renderElement(command, function_obj, temp_exp, expression_element.itens[1]);
+			}
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.par_exp_par:
+
+			var temp_par_1 = $('<div class="component_element"> ( </div>');
+			var temp_exp = $('<div class="component_element"></div>');
+			var temp_par_2 = $('<div class="component_element"> ) </div>');
+
+			el.append(temp_par_1);
+			el.append(temp_exp);
+
+			for (var j = 0; j < expression_element.itens.length; j++) {
+				if (expression_element.itens[j].type) {
+					VariableValueMenu.renderMenu(command, expression_element.itens[j], temp_exp, function_obj, 2, expression_element);
+				} else {
+					renderElement(command, function_obj, temp_exp, expression_element.itens[j]);
+				}
+			}
+			
+
+			//renderMenuAddExpression(command, function_obj, el, el, expression_element.itens);
+
+			el.append(temp_par_2);
+
+			break;
+	}
+
+}
+
+
+function renderExpression (command, function_obj, el) {
+
+	var expression_div = el.find('.expression_elements');
+	expression_div.text('');
+
+	var menu_add_item = $('<div class="menu_add_item"></div>');
+	menu_add_item.data('index_add', 0);
+
+	expression_div.append(menu_add_item);
+	
+	for (var i = 0; i < command.expression.length; i++) {
+
+		if (command.expression[i].type) {
+
+			var temp = $('<div class="expression_element"></div>');
+			temp.data('ref_element', command.expression[i]);
+			temp.data('ref_index', i);
+
+			expression_div.append(temp);
+
+			VariableValueMenu.renderMenu(command, command.expression[i], temp, function_obj);
+
+		} else if (command.expression[i] == "(" || command.expression[i] == ")") {
+
+			var temp = $('<div class="expression_element">'+command.expression[i]+'</div>');
+			temp.data('ref_element', command.expression[i]);
+			temp.data('ref_index', i);
+
+			expression_div.append(temp);
+
+		} else {
+
+			var temp = '<div class="expression_element">';
+
+			switch(command.expression[i]) {
+				case Models.ARITHMETIC_TYPES.plus:
+					temp += '+';
+					break;
+				case Models.ARITHMETIC_TYPES.minus:
+					temp += '-';
+					break;
+				case Models.ARITHMETIC_TYPES.multiplication:
+					temp += '*';
+					break;
+				case Models.ARITHMETIC_TYPES.division:
+					temp += '/';
+					break;
+				case Models.ARITHMETIC_TYPES.module:
+					temp += '%';
+					break;
+			}
+
+			temp += '</div>';
+			temp = $(temp);
+			temp.data('ref_element', command.expression[i]);
+			temp.data('ref_index', i);
+
+			expression_div.append(temp);
+
+		}
+		
+		var menu_add_item_seq = $('<div class="menu_add_item"></div>');
+		var index_temp = (i + 1);
+		menu_add_item_seq.data('index_add', index_temp);
+		expression_div.append(menu_add_item_seq);
+
+	}
+
+	addMenuItens(command, function_obj, el);
+
+}
+
+function addMenuItens (command, function_obj, expression_div) {
+	var divs_expression = expression_div.find('.menu_add_item');
+
+	for (var i = 0; i < divs_expression.length; i++) {
+
+		var temp = $(divs_expression[i]).data('index_add');
+
+		var context_menu = '<div class="ui dropdown context_menu_clear"><i class="ui icon plus square outline"></i><div class="menu">';
+		context_menu += '<div class="item" data-option="value" data-index="'+temp+'">'+LocalizedStrings.getUI('text_value')+'</div>';
+		context_menu += '<div class="item" data-option="operator" data-index="'+temp+'">'+LocalizedStrings.getUI('text_operator')+'</div>';
+		context_menu += '<div class="item" data-option="parentheses" data-index="'+temp+'">'+LocalizedStrings.getUI('text_parentheses')+'</div>';
+		context_menu += '</div></div>';
+
+		context_menu = $(context_menu);
+
+		$(divs_expression[i]).append(context_menu);
+
+		context_menu.dropdown({
+	      on: 'hover',
+	      onChange: function(value, text, $selectedItem) {
+    		switch ($selectedItem.data('option')) {
+    			case "value":
+    				command.expression.splice($selectedItem.data('index'), 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+    				renderExpression(command, function_obj, expression_div);
+    				break;
+    			case "operator":
+    				command.expression.splice($selectedItem.data('index'), 0, Models.ARITHMETIC_TYPES.plus);
+    				renderExpression(command, function_obj, expression_div);
+    				break;
+    			case "parentheses":
+    				command.expression.splice($selectedItem.data('index'), 0, "(");
+    				command.expression.splice($selectedItem.data('index') + 1, 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+    				command.expression.splice($selectedItem.data('index') + 2, 0, ")");
+    				renderExpression(command, function_obj, expression_div);
+    				break;
+    		 }
+        	}
+	    });
+
+	}
+}
+
+
+function addHandlers (command, function_obj, attribution_dom) {
+
+	attribution_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, attribution_dom)) {
+			attribution_dom.remove();
+		}
+	});
+
+	attribution_dom.find('.button_refresh_attribution').on('click', function() {
+		renderExpressionElements(command, function_obj, attribution_dom);
+	});
+}
+
+export function renderMenuOperations (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+
+	/*console.log("recebido o seguinte DOM: ");
+	console.log(dom_object);
+
+	if (dom_object.hasClass('var_attributed')) {
+		return;
+	} else {
+		var hier = dom_object.parentsUntil(".command_container");
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass('var_attributed') || $(hier[i]).hasClass('parameters_function_called')) {
+				return;
+			}
+		}
+
+
+		
+	}
+
+	dom_object.find('.context_menu_clear').remove();
+
+
+	var menu_operations = '<div class="ui dropdown menu_operations"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+
+	for (var tm in Models.ARITHMETIC_TYPES) {
+
+		menu_operations += '<div class="item" data-option="'+tm+'">'+LocalizedStrings.getUI('btn_arithmetic_' + tm)+'</div>';
+    }
+    menu_operations += '<div class="item" data-option="clear">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+	
+    menu_operations += '</div></div>';
+
+    menu_operations = $(menu_operations);
+
+    dom_object.append(menu_operations);
+
+    menu_operations.dropdown({
+    	onChange: function(value, text, $selectedItem) {
+    		switch ($($selectedItem).data('option')) {
+    			case "clear":
+	    			$(dom_object).text('');
+		     	 	VariableValueMenu.renderMenu(command, ref_object, dom_object, function_obj);
+    				break;
+    			default:
+    				createExpressionAround(command, ref_object, dom_object, function_obj);
+    				menu_operations.find('.text').text('');
+    		}
+        }
+    });*/
+}
+
+function createExpressionAround (command, ref_object, dom_object, function_obj) {
+	$('<span> ( </span>').insertBefore(dom_object);
+	$('<span> ) </span>').insertAfter(dom_object);
+
+	VariableValueMenu.renderMenu(command, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), dom_object, function_obj);
+}
+

js/visualUI/commands (cópia)/break.js

@@ -0,0 +1,27 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui comment created_element"> <i class="ui icon small quote left"></i> <span> '+LocalizedStrings.getUI('text_break')+' </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_break')+'</span> </div>');
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, break_dom) {
+
+	break_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, break_dom)) {
+			break_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/comment.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui comment created_element"> <i class="ui icon small quote left"></i> <span class="span_comment_text" "> '+LocalizedStrings.getUI('text_comment')+' </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+'</div> </div>');
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	renderTextComment(command, function_obj, el);
+
+	return el;
+}
+
+function renderTextComment (command, function_obj, el) {
+	VariableValueMenu.renderMenu(command, command.comment_text, el.find('.var_value_menu_div'), function_obj, 20);
+}
+
+function addHandlers (command, function_obj, comment_dom) {
+
+	comment_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, comment_dom)) {
+			comment_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/conditional_expression.js

@@ -0,0 +1,231 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenuManagement from './variable_value_menu';
+
+
+export function renderExpression (command, expression, function_obj, initial_el_to_render) {
+
+	if (expression.expression == null || expression.expression.length < 1) {
+
+		renderStartMenu(command, expression, function_obj, initial_el_to_render);
+
+	} else {
+		
+		var main_div = $('<div class="expression_elements"></div>');
+
+		switch (expression.expression.type) {
+			case Models.EXPRESSION_TYPES.exp_logic:
+				renderLogicExpression(command, expression, expression.expression, function_obj, main_div, initial_el_to_render);
+				break;
+			case Models.EXPRESSION_TYPES.exp_arithmetic:
+				renderArithmeticExpression(command, expression, expression.expression, function_obj, main_div);
+				break;
+		}
+
+		initial_el_to_render.append(main_div);	
+	}
+}
+
+function renderArithmeticOperator (command, all_expression, expression_arithmetic, arithmetic_operator, function_obj, element_to_append) {
+
+	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
+	menu_operator.dropdown({
+	    values: [
+	      {
+	        name     : '>',
+	        value    : Models.ARITHMETIC_COMPARISON.greater_than,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.greater_than)
+	      },
+	      {
+	        name     : '<',
+	        value    : Models.ARITHMETIC_COMPARISON.less_than,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.less_than)
+	      },
+	      {
+	        name     : '==',
+	        value    : Models.ARITHMETIC_COMPARISON.equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.equals_to)
+	      },
+	      {
+	        name     : '!=',
+	        value    : Models.ARITHMETIC_COMPARISON.not_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.not_equals_to)
+	      },
+	      {
+	        name     : '>=',
+	        value    : Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to)
+	      },
+	      {
+	        name     : '<=',
+	        value    : Models.ARITHMETIC_COMPARISON.less_than_or_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.less_than_or_equals_to)
+	      }
+	    ],
+	    onChange: function(value, text, $selectedItem) {
+	    	expression_arithmetic.operator = value;
+	    }
+	  })
+	;
+
+	element_to_append.append(menu_operator);
+}
+
+function renderLogicOperator (command, all_expression, expression_logic, logic_operator, function_obj, element_to_append, initial_el_to_render) {
+
+	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
+	menu_operator.dropdown({
+	    values: [
+	      {
+	        name     : '==',
+	        value    : Models.LOGIC_COMPARISON.equals_to,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.equals_to)
+	      },
+	      {
+	        name     : '!=',
+	        value    : Models.LOGIC_COMPARISON.not_equals_to,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.not_equals_to)
+	      },
+	      {
+	        name     : '&&',
+	        value    : Models.LOGIC_COMPARISON.and,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.and)
+	      },
+	      {
+	        name     : '||',
+	        value    : Models.LOGIC_COMPARISON.or,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.or)
+	      }
+	    ],
+	    onChange: function(value, text, $selectedItem) {
+	    	if ($selectedItem) {
+		    	expression_logic.operator = value;
+		    	if (expression_logic.second_operand == null) {
+		    		expression_logic.second_operand = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+		    		initial_el_to_render.empty();
+		    		renderExpression(command, all_expression, function_obj, initial_el_to_render);
+		    	}
+	    	}
+	    }
+	  });
+
+	element_to_append.append(menu_operator);
+
+}
+
+
+function renderLogicExpression (command, all_expression, expression_logic, function_obj, element_to_append, initial_el_to_render) {
+
+	var exp_el_par_1 = $(' <span class="span_command_spec"> </span> ');
+	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
+	var exp_el_expr_operand = $('<div class="expression_element"></div>');
+	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
+	var exp_el_par_2 = $(' <span class="span_command_spec"> </span> ');
+
+	if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
+	} else if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_logic.first_operand, exp_el_expr_el_1, function_obj);
+	}
+
+	element_to_append.append(exp_el_par_1);
+	element_to_append.append(exp_el_expr_el_1);
+
+	renderLogicOperator(command, all_expression, expression_logic, expression_logic.operator, function_obj, exp_el_expr_operand, initial_el_to_render);
+
+	element_to_append.append(exp_el_expr_operand);
+
+	if (expression_logic.second_operand) {
+		if (expression_logic.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+			renderLogicExpression(command, all_expression, expression_logic.second_operand, function_obj, exp_el_expr_el_2);
+		} else if (expression_logic.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+			renderArithmeticExpression(command, all_expression, expression_logic.second_operand, function_obj, exp_el_expr_el_2);
+		} else {
+			VariableValueMenuManagement.renderMenu(command, expression_logic.second_operand, exp_el_expr_el_2, function_obj);
+		}
+
+		element_to_append.append(exp_el_expr_el_2);
+	}
+
+	element_to_append.append(exp_el_par_2);
+
+}
+
+function renderArithmeticExpression (command, all_expression, expression_arithmetic, function_obj, element_to_append) {
+
+	var exp_el_par_1 = $(' <span class="span_command_spec"> </span> ');
+	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
+	var exp_el_expr_operand = $('<div class="expression_element"></div>');
+	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
+	var exp_el_par_2 = $(' <span class="span_command_spec"> </span> ');
+
+
+	if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_arithmetic.first_operand, function_obj, exp_el_expr_el_1);
+	} else if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_arithmetic.first_operand, function_obj, exp_el_expr_el_1);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_arithmetic.first_operand, exp_el_expr_el_1, function_obj);
+	}
+
+	if (expression_arithmetic.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_arithmetic.second_operand, function_obj, exp_el_expr_el_2);
+	} else if (expression_arithmetic.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_arithmetic.second_operand, function_obj, exp_el_expr_el_2);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_arithmetic.second_operand, exp_el_expr_el_2, function_obj);
+	}
+
+	renderArithmeticOperator(command, all_expression, expression_arithmetic, expression_arithmetic.operator, function_obj, exp_el_expr_operand);
+
+	element_to_append.append(exp_el_par_1);
+	element_to_append.append(exp_el_expr_el_1);
+	element_to_append.append(exp_el_expr_operand);
+	element_to_append.append(exp_el_expr_el_2);
+	element_to_append.append(exp_el_par_2);
+}
+
+function renderStartMenu (command, expression, function_obj, initial_el_to_render) {
+	var start_menu = '';
+	start_menu += '<div class="ui dropdown menu_start_rendered"><div class="text"><i>'+LocalizedStrings.getUI('expression_menu_select')+'</i></div><i class="dropdown icon"></i><div class="menu">';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_logic+'">'+LocalizedStrings.getUI('text_logic_expression')+'</div>';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_arithmetic+'">'+LocalizedStrings.getUI('text_arithmetic_expression')+'</div>';
+	start_menu += '</div></div>';
+	start_menu = $(start_menu);
+
+	start_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+			switch ($selectedItem.data('exp')) {
+				case Models.EXPRESSION_TYPES.exp_logic:
+					expression.expression = 
+						new Models.LogicExpression(false, 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+					break;
+				case Models.EXPRESSION_TYPES.exp_arithmetic:
+					expression.expression = 
+						new Models.ArithmeticExpression(
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							Models.ARITHMETIC_COMPARISON.less_than);
+					break;
+			}
+
+			initial_el_to_render.html('');
+
+			renderExpression(command, expression, function_obj, initial_el_to_render);
+
+    	}
+	});
+
+	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');
+	
+	initial_el_to_render.append(start_menu);
+
+	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');
+}

js/visualUI/commands (cópia)/contextualized_menu.js

@@ -0,0 +1,94 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as CommandsManagement from '../commands';
+import * as VariableValueMenuManagement from './variable_value_menu';
+import * as SwitchManagement from './switch';
+
+import * as RepeatNTimesManagement from './repeatNtimes';
+
+export function renderMenu (command, dom_where_render, function_obj, dom_command) {
+
+	var menu_div = '<div class="ui dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
+
+	if ((command.type == Models.COMMAND_TYPES.repeatNtimes) 
+		|| (command.type == Models.COMMAND_TYPES.whiletrue) 
+		|| (command.type == Models.COMMAND_TYPES.dowhiletrue)) {
+
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
+
+	} else {
+
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
+
+	}
+
+	menu_div += '</div></div>';
+
+	menu_div = $(menu_div);
+  	
+	dom_where_render.append(menu_div);
+
+	addHandlers(command, dom_where_render, function_obj, dom_command);
+}
+
+function addHandlers (command, dom_where_render, function_obj, dom_command) {
+
+	dom_where_render.find('.menu_commands').dropdown({
+      on: 'hover'
+    });
+	
+	dom_where_render.find('.menu_commands a').on('click', function(evt){
+
+		if ((command.type == Models.COMMAND_TYPES.repeatNtimes) 
+			|| (command.type == Models.COMMAND_TYPES.whiletrue) 
+			|| (command.type == Models.COMMAND_TYPES.dowhiletrue)) {
+
+				if (command.commands_block == null || command.commands_block.length == 0) {
+
+			      command.commands_block = [];
+
+			      var new_cmd = CommandsManagement.genericCreateCommand($(this).data('command'));
+			      command.commands_block.push(new_cmd);
+
+			      CommandsManagement.renderCommand(new_cmd, dom_command.find('.block_commands'), 3, function_obj);
+
+			    } else {
+			      CommandsManagement.createFloatingCommand(function_obj, dom_command.find('.block_commands'), $(this).data('command'), evt);
+			    }
+
+		} else {
+
+			switch ($(this).data('command')) {
+				case Models.COMMAND_TYPES.break:
+					CommandsManagement.createFloatingCommand(function_obj, null, $(this).data('command'), evt);
+					break;
+
+				case Models.COMMAND_TYPES.switchcase:
+					addCaseToSwitch(command, dom_where_render, function_obj, dom_command);
+					break;
+			}
+
+		}
+
+	});
+}
+
+function addCaseToSwitch (command, dom_where_render, function_obj, dom_command) {
+	
+	if ((command.cases == null)) {
+		command.cases = [];
+	}
+	
+	var sc = new Models.SwitchCase(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+
+	command.cases.push(sc);
+
+	SwitchManagement.renderCase(sc, command, function_obj, dom_command.find('.all_cases_div'));
+
+}
+
+
+

js/visualUI/commands (cópia)/dowhiletrue.js

@@ -0,0 +1,49 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
+import * as ContextualizedMenu from './contextualized_menu';
+
+export function createFloatingCommand () {
+	return $('<div class="ui dowhiletrue created_element"> <i class="ui icon small sync"></i> <span> '+ LocalizedStrings.getUI('text_command_do') +' {<br>} ' + LocalizedStrings.getUI('text_code_while') +'(x < 10) </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var ret = '';
+	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
+	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
+	ret += '</div>';
+	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), function_obj, el);
+
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
+	if (command.commands_block) {
+		for (var j = 0; j < command.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.block_commands')[0]), 3, function_obj);
+		}
+	}
+
+	return el;
+}
+
+
+function addHandlers (command, function_obj, dowhiletrue_dom) {
+
+	dowhiletrue_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, dowhiletrue_dom)) {
+			dowhiletrue_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/functioncall-sidebar.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements_sidebar';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui functioncall created_element"> <i class="hand point right icon"></i> <span> funcao() </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui functioncall command_container"> <i class="hand point right icon command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> </div>');
+	el.data('command', command);
+
+	if (command.function_called) {
+		console.log("command.function_called");
+	}
+
+	VariableValueMenu.renderMenu(command, command.function_called, el.find('.var_value_menu_div'), function_obj);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, functioncall_dom) {
+
+	functioncall_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, functioncall_dom)) {
+			functioncall_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/functioncall.js

@@ -0,0 +1,32 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui functioncall created_element"> <i class="hand point right icon"></i> <span> funcao() </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui functioncall command_container"> <i class="hand point right icon command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> </div>');
+	el.data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.function_called, el.find('.var_value_menu_div'), function_obj);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, functioncall_dom) {
+
+	functioncall_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, functioncall_dom)) {
+			functioncall_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/iftrue.js

@@ -0,0 +1,60 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
+
+export function createFloatingCommand () {
+	return $('<div class="ui iftrue created_element"> <i class="ui icon small random"></i> <span> if (x < 1) { } </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var ret = '';
+	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i>';
+	ret += '<span class="span_command_spec"> ' + LocalizedStrings.getUI('text_if') + '</span>';
+	ret += ' <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += '<span> </span> ';
+	ret += '<div class="ui block_commands commands_if conditional_comands_block" data-if="true">';
+ 	ret += '</div></div>';
+	ret += '<div class="ui data_block_else" data-else="true"> <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_else') + ' </span>';
+	ret += '<div class="ui block_commands commands_else conditional_comands_block" data-else="true">';
+	ret += '</div>';
+	ret += '<span></span></div>';
+	ret += '</div>';
+
+	var el = $(ret);
+	el.data('command', command);
+	el.find('.block_commands').data('command', command);
+	el.find('.data_block_if').data('command', command);
+	el.find('.data_block_else').data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
+	if (command.commands_block) {
+		for (var j = 0; j < command.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.commands_if')[0]), 3, function_obj);
+		}
+	}
+	if (command.commands_else) {
+		for (var j = 0; j < command.commands_else.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_else[j], $(el.find('.commands_else')[0]), 3, function_obj);
+		}
+	}
+
+	return el;
+}
+
+
+function addHandlers (command, function_obj, iftrue_dom) {
+
+	iftrue_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, iftrue_dom)) {
+			iftrue_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/reader.js

@@ -0,0 +1,34 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui reader created_element"> <i class="ui icon small download"></i> <span> '+LocalizedStrings.getUI('text_command_read')+' var </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = '<div class="ui reader command_container"> <i class="ui icon small download command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec">'+LocalizedStrings.getUI('text_command_read')+' ( </span> <div class="var_value_menu_div"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
+	
+	el = $(el);
+	el.data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.variable_value_menu, el.find('.var_value_menu_div'), function_obj);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, reader_dom) {
+
+	reader_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, reader_dom)) {
+			reader_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/return.js

@@ -0,0 +1,32 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui return created_element"> <i class="ui icon small reply"></i> <span> '+LocalizedStrings.getUI('text_return')+' </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui return command_container"> <i class="ui icon small reply"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="var_value_menu_div"></div></div>');
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	VariableValueMenu.renderMenu(command, command.variable_value_menu, el.find('.var_value_menu_div'), function_obj);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, return_dom) {
+
+	return_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, return_dom)) {
+			return_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/switch.js

@@ -0,0 +1,75 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as CommandsManagement from '../commands';
+import * as VariableValueMenu from './variable_value_menu';
+import * as ContextualizedMenu from './contextualized_menu';
+
+export function createFloatingCommand () {
+	return $('<div class="ui switch created_element"> <i class="ui icon small random"></i> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( x ) { <br> '+LocalizedStrings.getUI('text_code_case')+' 1: <br> '+LocalizedStrings.getUI('text_code_case')+' 2: <br> } </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var ret = '';
+	ret += '<div class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( <div class="ui variable_to_switch"></div> ) <div class="ui all_cases_div"></div></span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), function_obj, el);
+
+	VariableValueMenu.renderMenu(command, command.variable, el.find('.variable_to_switch'), function_obj);
+
+	if (command.cases) {
+		for (var i = 0; i < command.cases.length; i++) {
+			renderCase(command.cases[i], command, function_obj, el.find('.all_cases_div'));
+		}
+	}
+
+	return el;
+}
+
+export function renderCase (switchcase, command, function_obj, el) {
+
+	var casediv = $('<div class="ui case_div"><i class="ui icon times red button_remove_command"></i><span>'+LocalizedStrings.getUI('text_code_case')+'</span> <div class="ui variable_case"></div>: <div class="case_commands_block"></div></div>');
+
+	VariableValueMenu.renderMenu(command, switchcase.variable_value_menu, casediv.find('.variable_case'), function_obj);
+
+	casediv.data('switchcase', switchcase);
+	casediv.find('.case_commands_block').data('switchcase', switchcase);
+
+	el.append(casediv);
+
+	if (switchcase.commands_block) {
+		for (var j = 0; j < switchcase.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(switchcase.commands_block[j], $(casediv.find('.case_commands_block')[0]), 3, function_obj);
+		}
+	}
+
+	casediv.find('.button_remove_command').on('click', function() {
+		for (var i = 0; i < command.cases.length; i++) {
+			if (switchcase == command.cases[i]) {
+				delete command.cases[i];
+				command.cases.splice(i, 1);
+				casediv.remove();
+				break;
+			}
+		}
+	});
+
+}
+
+function addHandlers (command, function_obj, switch_dom) {
+
+	switch_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, switch_dom)) {
+			switch_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/whiletrue.js

@@ -0,0 +1,50 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
+import * as ContextualizedMenu from './contextualized_menu';
+
+export function createFloatingCommand () {
+	return $('<div class="ui whiletrue created_element"> <i class="ui icon small sync"></i> <span> ' + LocalizedStrings.getUI('text_code_while') + ' ( x < 10 ) { } </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var ret = '';
+	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span>';
+	ret += '<span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += ' </span>';
+	ret += '<div class="ui block_commands">';
+	ret += '</div>';
+	ret += '<span> </span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), function_obj, el);
+
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
+	if (command.commands_block) {
+		for (var j = 0; j < command.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.block_commands')[0]), 3, function_obj);
+		}
+	}
+
+	return el;
+}
+
+function addHandlers (command, function_obj, whiletrue_dom) {
+
+	whiletrue_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, whiletrue_dom)) {
+			whiletrue_dom.remove();
+		}
+	});
+}

js/visualUI/commands (cópia)/writer.js

@@ -0,0 +1,86 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as VariableValueMenuManagement from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui writer created_element"> <i class="ui icon small upload"></i> <span> '+LocalizedStrings.getUI('text_command_write')+' var </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var ret = '';
+	ret += '<div class="ui writer command_container"> <i class="ui icon small upload command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec">'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="all_elements_write"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
+
+	var el = $(ret);
+	el.data('command', command);
+
+	for (var i = 0; i < command.content.length; i ++) {
+		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
+		el.find('.all_elements_write').append(new_div_item);
+		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
+
+		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
+	}
+	addHandlers(command, function_obj, el);
+	return el;
+}
+
+function addHandlers (command, function_obj, writer_dom) {
+
+	writer_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, writer_dom)) {
+			writer_dom.remove();
+		}
+	});
+}
+
+function addHandlerIconAdd (dom_object, command, function_obj, insert_after = false, after_which = null) {
+	var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
+	if (!insert_after) {
+		dom_object.append(icon_add_item);
+	} else {
+		icon_add_item.insertAfter(after_which);
+	}
+	
+	icon_add_item.on('click', function(e) {
+		var new_div_item = $( '<div class="var_value_menu_div" style="display:none;"></div>' );
+		new_div_item.insertAfter(icon_add_item);
+		var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+
+		VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
+
+		addHandlerIconAdd(dom_object, command, function_obj, true, new_div_item);
+		var pos = 1;
+		dom_object.find('.icon_add_item_to_writer').each(function() {
+			if ($(this).get(0) === icon_add_item.get(0)) {
+				command.content.splice(pos, 0, new_related_menu);
+			} else {
+				pos ++;
+			}
+		});
+		new_div_item.fadeIn();
+	});
+}
+
+export function addContent (command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object_content) {
+	
+	if (dom_object.hasClass('var_value_menu_div')) {
+		var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
+		icon_add_item.insertAfter(dom_object);
+
+		icon_add_item.on('click', function(e) {
+			var new_div_item = $( '<div class="var_value_menu_div"></div>' );
+			new_div_item.insertAfter(icon_add_item);
+			var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+
+			VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
+
+			command.content.push(new_related_menu);
+		});
+	}
+}

js/visualUI/commands/attribution.js

@@ -419,7 +419,7 @@ function addHandlers (command, function_obj, attribution_dom) {
 
 	attribution_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, attribution_dom)) {
-			attribution_dom.remove();
+			attribution_dom.fadeOut();
 		}
 	});
 

js/visualUI/commands/break.js

@@ -21,7 +21,7 @@ function addHandlers (command, function_obj, break_dom) {
 
 	break_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, break_dom)) {
-			break_dom.remove();
+			break_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/comment.js

@@ -12,7 +12,7 @@ export function createFloatingCommand () {
 }
 
 export function renderCommand (command, function_obj) {
-	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+'</div> </div>');
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+'</div> </div>');
 	el.data('command', command);
 
 	addHandlers(command, function_obj, el);
@@ -30,7 +30,7 @@ function addHandlers (command, function_obj, comment_dom) {
 
 	comment_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, comment_dom)) {
-			comment_dom.remove();
+			comment_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/dowhiletrue.js

@@ -43,7 +43,7 @@ function addHandlers (command, function_obj, dowhiletrue_dom) {
 
 	dowhiletrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, dowhiletrue_dom)) {
-			dowhiletrue_dom.remove();
+			dowhiletrue_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/functioncall.js

@@ -26,7 +26,7 @@ function addHandlers (command, function_obj, functioncall_dom) {
 
 	functioncall_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, functioncall_dom)) {
-			functioncall_dom.remove();
+			functioncall_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/iftrue.js

@@ -54,7 +54,7 @@ function addHandlers (command, function_obj, iftrue_dom) {
 
 	iftrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, iftrue_dom)) {
-			iftrue_dom.remove();
+			iftrue_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/reader.js

@@ -25,10 +25,9 @@ export function renderCommand (command, function_obj) {
 }
 
 function addHandlers (command, function_obj, reader_dom) {
-
 	reader_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, reader_dom)) {
-			reader_dom.remove();
+			reader_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/repeatNtimes.js

@@ -126,7 +126,7 @@ function addHandlers (command, function_obj, repeatNtimes_dom) {
 
 	repeatNtimes_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, repeatNtimes_dom)) {
-			repeatNtimes_dom.remove();
+			repeatNtimes_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/return.js

@@ -12,7 +12,7 @@ export function createFloatingCommand () {
 }
 
 export function renderCommand (command, function_obj) {
-	var el = $('<div class="ui return command_container"> <i class="ui icon small reply"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="var_value_menu_div"></div></div>');
+	var el = $('<div class="ui return command_container"> <i class="ui icon small reply command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="var_value_menu_div"></div></div>');
 	el.data('command', command);
 
 	addHandlers(command, function_obj, el);
@@ -26,7 +26,7 @@ function addHandlers (command, function_obj, return_dom) {
 
 	return_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, return_dom)) {
-			return_dom.remove();
+			return_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/switch.js

@@ -69,7 +69,7 @@ function addHandlers (command, function_obj, switch_dom) {
 
 	switch_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, switch_dom)) {
-			switch_dom.remove();
+			switch_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/variable_value_menu.js

@@ -12,19 +12,11 @@ export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2
 	value_and_function: 6, all: 7});
 
 export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2, expression_element) {
-	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-algo="12"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
-
 	// Verificar se o objeto atual trata-se de uma chamada de função e conferir se possui a quantidade correta de parâmetros
 	// Caso não possua, tem que adicionar as variáveis que servirão de parâmetros:
-
-
 	if (ref_object.function_called) {
 		if (ref_object.function_called.parameters_list) {
 
-			if (!ref_object.parameters_list) {
-				ref_object.parameters_list = [];
-			}
-
 			while (ref_object.function_called.parameters_list.length != ref_object.parameters_list.length) {
 				if (ref_object.parameters_list.length > ref_object.function_called.parameters_list.length) {
 					ref_object.parameters_list.pop();
@@ -35,11 +27,13 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 		}
 	}
 
+	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-algo="12"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+
 	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) {
 
 		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_vars">';
 		menu_var_or_value += '</div>';
-	} 
+	}
 
 	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_value_opt) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
 		
@@ -97,17 +91,36 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 	addIVProgFunctionsToMenu(function_obj, menu_var_or_value, ref_object, expression_element);
 
     if (ref_object.content || ref_object.function_called) {
-    	// Verificar se a variável ainda existe:
-    	if (isVarInProgram(ref_object.content, function_obj)) {
-    		renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
-    	} else {
-    		if (ref_object.content && ref_object.content.type) {
+    	if (ref_object.content) {
+    		// Verificar se a variável ainda existe:
+    		var variable_fun = isVarInProgram(ref_object.content, function_obj);
+    		if (variable_fun) {
+    			ref_object.content = variable_fun;
+    			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
+	    	} else {
+	    		if (ref_object.content && ref_object.content.type) {
+	    			ref_object.content = null;
+	    			appendSelectText(ref_object, menu_var_or_value);
+	    		} else {
+	    			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
+	    		}
+	    	}
+    	} else if (ref_object.function_called) {
+    		// Verificar se a função ainda existe:
+    		var ret_function = isFunctionInProgram(ref_object.function_called);
+    		if (ret_function) {
+    			ref_object.function_called = ret_function;
+    			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
+    		} else {
     			ref_object.content = null;
+		     	ref_object.row = null;
+		     	ref_object.column = null;
+		     	delete ref_object.function_called;
+		     	delete ref_object.parameters_list;
     			appendSelectText(ref_object, menu_var_or_value);
-    		} else {
-    			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
     		}
     	}
+
     } else {
     	appendSelectText(ref_object, menu_var_or_value);
     }
@@ -131,20 +144,37 @@ function appendSelectText (ref_object, menu_var_or_value) {
 	}
 }
 
-function isVarInProgram (var_obj, function_obj) {
-	// Verify in globals:
-	if (window.program_obj.globals) {
-		for (var i = 0; i < window.program_obj.globals.length; i++) {
-			if (window.program_obj.globals[i] == var_obj) {
-				return true;
+function isFunctionInProgram (function_called_obj) {
+	if (function_called_obj.name) {
+		if (window.program_obj.functions) {
+			for (var i = 0; i < window.program_obj.functions.length; i++) {
+				if (window.program_obj.functions[i] == function_called_obj) {
+					return window.program_obj.functions[i];
+				}
+			}
+			for (var i = 0; i < window.program_obj.functions.length; i++) {
+				if (window.program_obj.functions[i].name == function_called_obj.name) {
+					return window.program_obj.functions[i];
+				}
+			}
+		}
+	} else if (function_called_obj.identifier) {
+		for (var i = 0; i < window.system_functions.length; i++) {
+			if (window.system_functions[i].identifier == function_called_obj.identifier) {
+				return window.system_functions[i];
 			}
 		}
 	}
+	
+	return null;
+}
+
+function isVarInProgram (var_obj, function_obj) {
 	// Verify in locals:
 	if (function_obj.variables_list) {
 		for (var i = 0; i < function_obj.variables_list.length; i++) {
 			if (function_obj.variables_list[i] == var_obj) {
-				return true;
+				return function_obj.variables_list[i];
 			}
 		}
 	}
@@ -152,11 +182,45 @@ function isVarInProgram (var_obj, function_obj) {
 	if (function_obj.parameters_list) {
 		for (var i = 0; i < function_obj.parameters_list.length; i++) {
 			if (function_obj.parameters_list[i] == var_obj) {
-				return true;
+				return function_obj.parameters_list[i];
+			}
+		}
+	}
+	// Verify in globals:
+	if (window.program_obj.globals) {
+		for (var i = 0; i < window.program_obj.globals.length; i++) {
+			if (window.program_obj.globals[i] == var_obj) {
+				return window.program_obj.globals[i];
 			}
 		}
 	}
-	return false;
+
+	// If not found, verify if the reference was lost
+	if (var_obj) {
+		if (function_obj.variables_list) {
+			for (var i = 0; i < function_obj.variables_list.length; i++) {
+				if (function_obj.variables_list[i].name == var_obj.name) {
+					return function_obj.variables_list[i];
+				}
+			}
+		}
+		if (function_obj.parameters_list) {
+			for (var i = 0; i < function_obj.parameters_list.length; i++) {
+				if (function_obj.parameters_list[i].name == var_obj.name) {
+					return function_obj.parameters_list[i];
+				}
+			}
+		}
+		if (window.program_obj.globals) {
+			for (var i = 0; i < window.program_obj.globals.length; i++) {
+				if (window.program_obj.globals[i].name == var_obj.name) {
+					return window.program_obj.globals[i];
+				}
+			}
+		}
+	}
+
+	return null;
 }
 
 export function refreshMenu (menu_var_or_value_dom) {
@@ -193,8 +257,10 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 	
 	if (variable_obj.content || variable_obj.function_called) {
     	// Verificar se a variável ainda existe:
-    	if (isVarInProgram(variable_obj.content, function_obj)) {
-    		
+    	var var_fun = isVarInProgram(variable_obj.content, function_obj);
+
+    	if (var_fun) {
+	    	variable_obj.content = var_fun;
     	} else {
     		if (variable_obj.content && variable_obj.content.type) {
     			variable_obj.content = null;
@@ -296,11 +362,8 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			dom_object.append(parameters_menu);
 
-			console.log("\nvariable_obj:");
-			console.log(variable_obj);
-
 			for (var j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
-				renderMenu(command, new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true), parameters_menu.find('.parameter_'+j), function_obj, 2, expression_element);
+				renderMenu(command, variable_obj.parameters_list[j], parameters_menu.find('.parameter_'+j), function_obj, 2, expression_element);
 			}
 
 
@@ -616,6 +679,15 @@ function addIVProgFunctionsToMenu (function_obj, menu_var_or_value, ref_object,
 			case Models.SYSTEM_FUNCTIONS_CATEGORIES.math:
 				sub_menu.find('.menu_math_functions').append(t);
 				break;
+			case Models.SYSTEM_FUNCTIONS_CATEGORIES.text:
+				sub_menu.find('.menu_text_functions').append(t);
+				break;
+			case Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement:
+				sub_menu.find('.menu_arrangement_functions').append(t);
+				break;
+			case Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion:
+				sub_menu.find('.menu_conversion_functions').append(t);
+				break;
 		}	
 	}
 }
@@ -635,6 +707,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 
 	var sub_menu = menu_var_or_value.find('.menu_only_vars');
 	sub_menu.text('');
+	var is_there = false;
 
 	if (window.program_obj.globals) {
 
@@ -643,6 +716,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 				var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
 				temp.data('variable_reference', window.program_obj.globals[i]);
 				sub_menu.append(temp);
+				is_there = true;
 			}
 		} else {
 			for (var i = 0; i < window.program_obj.globals.length; i++) {
@@ -650,6 +724,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 					var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
 					temp.data('variable_reference', window.program_obj.globals[i]);
 					sub_menu.append(temp);
+					is_there = true;
 				}
 			}
 		}
@@ -660,6 +735,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.parameters_list[i].name + ' </div>');
 			temp.data('variable_reference', function_obj.parameters_list[i]);
 			sub_menu.append(temp);
+			is_there = true;
 		}
 	}
 
@@ -668,8 +744,13 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.variables_list[i].name + ' </div>');
 			temp.data('variable_reference', function_obj.variables_list[i]);
 			sub_menu.append(temp);
+			is_there = true;
 		}
 	}
+	if (!is_there) {
+		sub_menu.append($('<div class="header">'+LocalizedStrings.getUI('text_none_variable')+'</div>'));
+		sub_menu.append($('<div class="item disabled">'+LocalizedStrings.getUI('text_none_variable_instruction')+'</div>'));
+	}
 
 }
 
@@ -678,10 +759,7 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
 		menu_var_or_value.dropdown({
 		  onChange: function(value, text, $selectedItem) {
-				console.log('S7');
-				console.log(value);
-				console.log(text);
-				console.log($selectedItem);
+		  	console.log('S7');
 		  	dom_object.find('.var_name').remove();
 		     switch ($selectedItem.data('option')) {
 		     	case VAR_OR_VALUE_TYPES.only_function:
@@ -793,7 +871,6 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
 				console.log('S8');
-				console.log($selectedItem);
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP7');
 		     	dom_object.text('');

js/visualUI/commands/whiletrue.js

@@ -44,7 +44,7 @@ function addHandlers (command, function_obj, whiletrue_dom) {
 
 	whiletrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, whiletrue_dom)) {
-			whiletrue_dom.remove();
+			whiletrue_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands/writer.js

@@ -34,7 +34,7 @@ function addHandlers (command, function_obj, writer_dom) {
 
 	writer_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, writer_dom)) {
-			writer_dom.remove();
+			writer_dom.fadeOut();
 		}
 	});
 }

js/visualUI/commands_sidebar.js

@@ -202,10 +202,13 @@ export function renderCommand (command, element_reference, before_after_inside,
 			element_reference.append(createdElement);
 			break;
 	}
-	if (command.type == Models.COMMAND_TYPES.functioncall && function_called != null) {
+	console.log("typeof")
+	console.log(typeof(function_called));
+	if ((command.type == Models.COMMAND_TYPES.functioncall || command.type == Models.COMMAND_TYPES.attribution) && function_called != null && function_called.type == 'function') {
 		var $div_items = createdElement.find('div.item');
 		for (var i = 0; i < $div_items.length; i++) {
-			if ($($div_items[i]).text().trim() == function_called.name) {
+			var flag = (function_called.identifier) ? LocalizedStrings.getUI(function_called.identifier) : function_called.name;
+			if ($($div_items[i]).text().trim() == flag) {
 				$($div_items[i]).trigger('click');
 				break;
 			}
@@ -267,16 +270,17 @@ function preCreateCommand(command_type, function_called) {
 		return genericCreateCommand(command_type);
 	else if (command_type == 'functioncall') {
 		if (function_called.return_type != Types.VOID) {
-			var var_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+			/*var var_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
 			var_menu.function_called = function_called;
 			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
 				var_menu]);
 			exp.function_called = function_called;
 			return new Models.Attribution(new Models.VariableValueMenu(
-				VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false),[exp]);
+				VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false),[exp]);*/
+				command_type = 'attribution';
 		}
 		return genericCreateCommand(command_type);
-		var varM = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false);
+		/*var varM = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false);
 		varM.function_called = function_called;
 		var parameters = [];
 		for (var i = 0; i < function_called.parameters_list.length; i++) {
@@ -284,7 +288,7 @@ function preCreateCommand(command_type, function_called) {
 		}
 		//var functionCall = new Models.FunctionCall(varM, parameters);
 		var functionCall = new Models.FunctionCall(varM, null);
-		return functionCall;
+		return functionCall;*/
 	} else if (command_type == 'attribution') {
 		var var_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
 		//var_menu.function_called = function_called;
@@ -476,7 +480,7 @@ function insertCommandInBlockHierar(el, event, function_obj, command_type, hier_
 
 		} else {
 			// QUANDO FOR BLOCO DO TIPO IF OU SWITCH/CASE:
-			addCommandToSwitchCase(event, function_obj, command_type);
+			addCommandToSwitchCase(event, function_obj, command_type, function_called);
 		}
 
 	} else {
@@ -828,7 +832,7 @@ function insertCommandInBlock(el, event, function_obj, command_type, function_ca
 	}
 }
 
-function addCommandToSwitchCase(event, function_obj, command_type) {
+function addCommandToSwitchCase(event, function_obj, command_type, function_called) {
 
 	var el = $(document.elementFromPoint(event.clientX, event.clientY));
 

js/visualUI/functions.js

@@ -26,6 +26,7 @@ window.studentGrade = null;
 const program = new Models.Program();
 
 window.system_functions = [];
+// Adding math functions:
 window.system_functions.push(new Models.SystemFunction('$sin', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
   null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
 window.system_functions.push(new Models.SystemFunction('$cos', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
@@ -48,6 +49,40 @@ window.system_functions.push(new Models.SystemFunction('$max', Types.REAL, 0, [n
   null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
 window.system_functions.push(new Models.SystemFunction('$min', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
   null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+// Adding text functions:
+window.system_functions.push(new Models.SystemFunction('$substring', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true),
+new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$length', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$uppercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$lowercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$charAt', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+// Adding arrangement functions:
+window.system_functions.push(new Models.SystemFunction('$numElements', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
+window.system_functions.push(new Models.SystemFunction('$matrixLines', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
+window.system_functions.push(new Models.SystemFunction('$matrixColumns', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
+// Adding conversion functions:
+window.system_functions.push(new Models.SystemFunction('$isReal', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$isInt', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$isBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castReal', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castInt', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castString', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
 /*const variable1 = new Models.Variable(Types.INTEGER, "a", 1);
 const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);
 const command1 = new Models.Comment(new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.only_value, "Testing rendering commands"));
@@ -69,74 +104,100 @@ window.program_obj = program;
 window.generator = CodeManagement.generate;
 window.runCodeAssessment = runCodeAssessment;
 window.renderAlgorithm = AlgorithmManagement.renderAlgorithm;
+window.insertContext = false;
+window.watchW = WatchJS;
 
-WatchJS.watch(program.globals, function(){
-  AlgorithmManagement.renderAlgorithm();
+WatchJS.watch(window.program_obj.globals, function () {
+  if (window.insertContext) {
+    setTimeout(function () { AlgorithmManagement.renderAlgorithm(); }, 300);
+    window.insertContext = false;
+  } else {
+    AlgorithmManagement.renderAlgorithm();
+  }
+}, 1);
+
+WatchJS.watch(window.program_obj.functions, function () {
+  if (window.insertContext) {
+    setTimeout(function () { AlgorithmManagement.renderAlgorithm(); }, 300);
+    window.insertContext = false;
+  } else {
+    AlgorithmManagement.renderAlgorithm();
+  }
 }, 1);
 
-function addFunctionHandler () {
+function addFunctionHandler() {
 
-	var new_function = new Models.Function(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, [], false, false, [], new Models.Comment(LocalizedStrings.getUI('text_comment_start')));
-	program.addFunction(new_function);
+  var new_function = new Models.Function(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, [], false, false, [], new Models.Comment(LocalizedStrings.getUI('text_comment_start')));
+  program.addFunction(new_function);
 
-	counter_new_functions ++;
+  counter_new_functions++;
 
-  renderFunction(new_function);
+  window.insertContext = true;
+
+  var newe = renderFunction(new_function);
+
+  newe.css('display', 'none');
+  newe.fadeIn();
 }
 
-function addParameter (function_obj, function_container) {
+function addParameter(function_obj, function_container, is_from_click = false) {
   if (function_obj.parameters_list == null) {
     function_obj.parameters_list = [];
   }
   var new_parameter = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI("new_parameter") + "_" + counter_new_parameters);
   function_obj.parameters_list.push(new_parameter);
-  counter_new_parameters ++;
+  counter_new_parameters++;
+
+  var newe = renderParameter(function_obj, new_parameter, function_container);
 
-  renderParameter(function_obj, new_parameter, function_container);
+  if (is_from_click) {
+    newe.css('display', 'none');
+    newe.fadeIn();
+  }
 }
 
-function updateReturnType (function_obj, new_type, new_dimensions = 0) {
+function updateReturnType(function_obj, new_type, new_dimensions = 0) {
   function_obj.return_type = new_type;
   function_obj.return_dimensions = new_dimensions;
 }
 
-function removeFunction (function_obj) {
-  
+function removeFunction(function_obj) {
   var index = program.functions.indexOf(function_obj);
   if (index > -1) {
     program.functions.splice(index, 1);
   }
 }
 
-function minimizeFunction (function_obj) {
+function minimizeFunction(function_obj) {
   function_obj.is_hidden = !function_obj.is_hidden;
 }
 
-function addHandlers (function_obj, function_container) {
+function addHandlers(function_obj, function_container) {
 
   function_container.find('.ui.dropdown.function_return').dropdown({
-      onChange: function(value, text, $selectedItem) {
-        if ($selectedItem.data('dimensions')) {
-          updateReturnType(function_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
-        } else {
-          updateReturnType(function_obj, Types[$selectedItem.data('type')]);
-        }
+    onChange: function (value, text, $selectedItem) {
+      if ($selectedItem.data('dimensions')) {
+        updateReturnType(function_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
+      } else {
+        updateReturnType(function_obj, Types[$selectedItem.data('type')]);
       }
+    }
   });
 
-  function_container.find( ".name_function_updated" ).on('click', function(e){
+  function_container.find(".name_function_updated").on('click', function (e) {
     enableNameFunctionUpdate(function_obj, function_container);
   });
 
-  function_container.find( ".add_parameter_button" ).on('click', function(e){
-    addParameter(function_obj, function_container);
+  function_container.find(".add_parameter_button").on('click', function (e) {
+    window.insertContext = true;
+    addParameter(function_obj, function_container, true);
   });
 
   function_container.find('.menu_commands').dropdown({
-      on: 'hover'
-    });
+    on: 'hover'
+  });
 
-  function_container.find('.menu_commands a').on('click', function(evt){
+  function_container.find('.menu_commands a').on('click', function (evt) {
     if (function_obj.commands == null || function_obj.commands.length == 0) {
       function_obj.commands = [];
       var new_cmd = CommandsManagement.genericCreateCommand($(this).data('command'));
@@ -149,122 +210,127 @@ function addHandlers (function_obj, function_container) {
 
   });
 
-  function_container.find('.add_var_button_function').on('click', function(e){
-    VariablesManagement.addVariable(function_obj, function_container);
+  function_container.find('.add_var_button_function').on('click', function (e) {
+    window.insertContext = true;
+    VariablesManagement.addVariable(function_obj, function_container, true);
   });
 
-  function_container.find('.remove_function_button').on('click', function(e){
+  function_container.find('.remove_function_button').on('click', function (e) {
     removeFunction(function_obj);
-    function_container.slideUp(400);
+    function_container.fadeOut();
   });
 
-  function_container.find('.minimize_function_button').on('click', function(e){
+  function_container.find('.minimize_function_button').on('click', function (e) {
     minimizeFunction(function_obj);
-    function_container.find(".function_area").toggle();
-    function_container.find(".add_var_top_button").toggle();
+    if (function_obj.is_hidden) {
+      function_container.find(".add_var_button_function").toggle();
+      function_container.find(".inline_add_command").toggle();
+      function_container.find(".function_area").slideToggle();
+    } else {
+      function_container.find(".function_area").slideToggle(function () {
+        function_container.find(".add_var_button_function").toggle();
+        function_container.find(".inline_add_command").toggle();
+      });
+    }
+
   });
 }
 
 // Essa função imprime o tipo de retorno da função e cria o menu do tipo 'select' para alteração
-function renderFunctionReturn (function_obj, function_element) {
+function renderFunctionReturn(function_obj, function_element) {
 
   var ret = '<div class="ui dropdown function_return">';
-    
-    if (function_obj.return_dimensions > 0) {
-      ret += '<div class="text">'+ LocalizedStrings.getUI("vector") +':'+ LocalizedStrings.getUI(function_obj.return_type);
-      if (function_obj.return_dimensions == 1) {
-        ret += ' [ ] ';
-      } else {
-        ret += ' [ ] [ ] ';
-      }
-      ret += '</div>';
+
+  if (function_obj.return_dimensions > 0) {
+    ret += '<div class="text">' + LocalizedStrings.getUI("vector") + ':' + LocalizedStrings.getUI(function_obj.return_type);
+    if (function_obj.return_dimensions == 1) {
+      ret += ' [ ] ';
     } else {
-      ret += '<div class="text">'+LocalizedStrings.getUI(function_obj.return_type)+'</div>';
+      ret += ' [ ] [ ] ';
     }
+    ret += '</div>';
+  } else {
+    ret += '<div class="text">' + LocalizedStrings.getUI(function_obj.return_type) + '</div>';
+  }
 
-    ret += '<div class="menu">';
+  ret += '<div class="menu">';
 
 
-    for (var tm in Types) {
-      ret += '<div class="item ' + (function_obj.return_type == tm.toLowerCase()  && function_obj.return_dimensions < 1 ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
-    }
+  for (var tm in Types) {
+    ret += '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions < 1 ? ' selected ' : '') + '" data-type="' + tm + '" >' + LocalizedStrings.getUI(tm.toLowerCase()) + '</div>';
+  }
 
-    for (var tm in Types) {
-      if (tm == Types.VOID.toUpperCase()) {
-        continue;
-      }
-      ret += '<div class="item">'
-        + '<i class="dropdown icon"></i>'
-        +  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
-          +  '<div class="menu">'
-            + '<div class="item '+(function_obj.return_type == tm.toLowerCase()  && function_obj.return_dimensions > 0 ? ' selected ' : '')+'" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
-            + '<div class="item '+(function_obj.return_type == tm.toLowerCase()  && function_obj.return_dimensions > 0 ? ' selected ' : '')+'" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
-          +  '</div>'
-        + '</div>'; 
+  for (var tm in Types) {
+    if (tm == Types.VOID.toUpperCase()) {
+      continue;
     }
+    ret += '<div class="item">'
+      + '<i class="dropdown icon"></i>'
+      + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase())
+      + '<div class="menu">'
+      + '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions > 0 ? ' selected ' : '') + '" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] " data-type="' + tm + '" data-dimensions="1">[ ]</div>'
+      + '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions > 0 ? ' selected ' : '') + '" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] [ ] " data-type="' + tm + '" data-dimensions="2">[ ] [ ] </div>'
+      + '</div>'
+      + '</div>';
+  }
 
-    ret += '</div></div>';
+  ret += '</div></div>';
+
+  ret = $(ret);
 
-    ret = $(ret);
-    
-    function_element.find('.function_return').append(ret);
+  function_element.find('.function_return').append(ret);
 }
 
 
-export function renderFunction (function_obj) {
+export function renderFunction(function_obj) {
 
   var appender = '<div class="ui secondary segment function_div list-group-item">';
 
   if (function_obj.function_comment) {
     //appender += renderComment(function_obj.function_comment, sequence, true, -1);
   }
-    
+
   appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
 
   appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
     + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
 
-  appender += '<div class="ui small icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
-  
-  appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
-  appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.functioncall+'"><i class="hand point right icon"></i> '+LocalizedStrings.getUI('text_functioncall')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.iftrue+'" ><i class="random icon"></i> '+LocalizedStrings.getUI('text_iftrue')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.repeatNtimes+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_repeatNtimes')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.whiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_whiletrue')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.return+'"><i class="reply icon"></i> '+LocalizedStrings.getUI('text_btn_return')+'</a>'
-        + '</div></div></div>';
-
-  appender += '<div class="function_signature_div">'+LocalizedStrings.getUI("function")+' ';
+  appender += '<div class="function_signature_div">' + LocalizedStrings.getUI("function") + ' ';
 
   if (function_obj.is_main) {
-      appender += '<div class="function_name_div">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >'+function_obj.name+'</span> </div> '
-        + ' <span class="parethesis_function">( </span> <div class="ui large labels parameters_list">';
+    appender += '<div class="function_name_div">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >' + function_obj.name + '</span> </div> '
+      + ' <span class="parethesis_function">( </span> <div class="ui large labels parameters_list">';
   } else {
-      appender += '<div class="ui function_return"></div>';
+    appender += '<div class="ui function_return"></div>';
 
-      appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">'+function_obj.name+'</span> </div> ' 
-        + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
+    appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">' + function_obj.name + '</span> </div> '
+      + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
   }
-    
+
   appender += '</div> <span class="parethesis_function"> ) </span> </div>'
-    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
+    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ');
+
+  appender += '<div class="ui add_var_context add_var_button_function" style="float: left;"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button purple"><i class="icon superscript"></i></div></div>';
 
-    + '<div class="ui top attached segment variables_list_div">'
-    + '</div>'
+  appender += '<div class="ui top attached segment variables_list_div"></div>';
 
-    + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
+  appender += '<div class="ui inline_add_command"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button dropdown menu_commands orange" style="float: left;" ><i class="icon code"></i> <div class="menu"> ';
+  appender += '<a class="item" data-command="' + Models.COMMAND_TYPES.reader + '"><i class="download icon"></i> ' + LocalizedStrings.getUI('text_read_var') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.writer + '"><i class="upload icon"></i> ' + LocalizedStrings.getUI('text_write_var') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.comment + '"><i class="quote left icon"></i> ' + LocalizedStrings.getUI('text_comment') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.attribution + '"><i class="arrow left icon"></i> ' + LocalizedStrings.getUI('text_attribution') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
+    + '</div></div></div>';
 
-  appender += '</div>';
+  appender += '<div class="ui bottom attached segment commands_list_div"></div>';
 
-  appender += '<div class="function_close_div"></div>'
-    + '</div>'
-    + '</div>';
+  appender += '</div></div>';
 
   appender = $(appender);
 
@@ -277,7 +343,6 @@ export function renderFunction (function_obj) {
 
   addHandlers(function_obj, appender);
 
-
   // Rendering parameters: 
   for (var j = 0; j < function_obj.parameters_list.length; j++) {
     renderParameter(function_obj, function_obj.parameters_list[j], appender);
@@ -287,24 +352,53 @@ export function renderFunction (function_obj) {
   for (var j = 0; j < function_obj.variables_list.length; j++) {
     VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
   }
-
   // Rendering commands:
   for (var j = 0; j < function_obj.commands.length; j++) {
     CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
   }
-
-
   $('.minimize_function_button').popup({
-    content : LocalizedStrings.getUI("tooltip_minimize"),
+    content: LocalizedStrings.getUI("tooltip_minimize"),
     delay: {
       show: 750,
       hide: 0
     }
   });
-}
 
+  Sortable.create(appender.find(".variables_list_div")[0], {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'local_vars_drag_' + program.functions.indexOf(function_obj),
+    onEnd: function (evt) {
+      updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
+    }
+  });
+
+  Sortable.create(appender.find(".commands_list_div")[0], {
+    handle: '.command_drag',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'commands_drag_' + program.functions.indexOf(function_obj),
+    onEnd: function (evt) {
+      //updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
+    }
+  });
+
+  if (!function_obj.is_main) {
+    Sortable.create(appender.find(".container_parameters_list")[0], {
+      handle: '.ellipsis',
+      animation: 100,
+      ghostClass: 'ghost',
+      group: 'parameters_drag_' + program.functions.indexOf(function_obj),
+      onEnd: function (evt) {
+        updateSequenceParameters(evt.oldIndex, evt.newIndex, function_obj);
+      }
+    });
+  }
+  return appender;
+}
 
-export function initVisualUI () {
+export function initVisualUI() {
   // MUST USE CONST, LET, OR VAR !!!!!!
   const mainDiv = $('#visual-main-div');
   // fill mainDiv with functions and globals...
@@ -313,7 +407,8 @@ export function initVisualUI () {
     addFunctionHandler();
   });
   $('.add_global_button').on('click', () => {
-    GlobalsManagement.addGlobal(program);
+    window.insertContext = true;
+    GlobalsManagement.addGlobal(program, true);
   });
 
   $('.run_button').on('click', () => {
@@ -336,11 +431,14 @@ export function initVisualUI () {
   $('.div_toggle_console').on('click', () => {
     toggleConsole();
   });
+  $('.expand_button').on('click', () => {
+    full_screen();
+  });
 }
 
 var is_iassign = false;
 
-$( document ).ready(function() {
+$(document).ready(function () {
 
   for (var i = 0; i < program.functions.length; i++) {
     renderFunction(program.functions[i]);
@@ -348,77 +446,77 @@ $( document ).ready(function() {
 
   var time_show = 750;
   $('.visual_coding_button').popup({
-    content : LocalizedStrings.getUI("tooltip_visual"),
+    content: LocalizedStrings.getUI("tooltip_visual"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.textual_coding_button').popup({
-    content : LocalizedStrings.getUI("tooltip_textual"),
+    content: LocalizedStrings.getUI("tooltip_textual"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.upload_file_button').popup({
-    content : LocalizedStrings.getUI("tooltip_upload"),
+    content: LocalizedStrings.getUI("tooltip_upload"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.download_file_button').popup({
-    content : LocalizedStrings.getUI("tooltip_download"),
+    content: LocalizedStrings.getUI("tooltip_download"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.undo_button').popup({
-    content : LocalizedStrings.getUI("tooltip_undo"),
+    content: LocalizedStrings.getUI("tooltip_undo"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.redo_button').popup({
-    content : LocalizedStrings.getUI("tooltip_redo"),
+    content: LocalizedStrings.getUI("tooltip_redo"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.run_button').popup({
-    content : LocalizedStrings.getUI("tooltip_run"),
+    content: LocalizedStrings.getUI("tooltip_run"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.assessment_button').popup({
-    content : LocalizedStrings.getUI("tooltip_evaluate"),
+    content: LocalizedStrings.getUI("tooltip_evaluate"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.help_button').popup({
-    content : LocalizedStrings.getUI("tooltip_help"),
+    content: LocalizedStrings.getUI("tooltip_help"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.add_global_button').popup({
-    content : LocalizedStrings.getUI("tooltip_add_global"),
+    content: LocalizedStrings.getUI("tooltip_add_global"),
     delay: {
       show: time_show,
       hide: 0
     }
   });
   $('.div_toggle_console').popup({
-    content : LocalizedStrings.getUI("tooltip_console"),
+    content: LocalizedStrings.getUI("tooltip_console"),
     delay: {
       show: time_show,
       hide: 0
@@ -431,17 +529,40 @@ $( document ).ready(function() {
     ghostClass: 'ghost',
     group: 'functions_divs_drag',
     onEnd: function (evt) {
-       updateSequenceFunction(evt.oldIndex, evt.newIndex);
+      updateSequenceFunction(evt.oldIndex, evt.newIndex);
+    }
+  });
+
+  var listGlobalsHandle = document.getElementById("listGlobalsHandle");
+  Sortable.create(listGlobalsHandle, {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'globals_divs_drag',
+    onEnd: function (evt) {
+      updateSequenceGlobals(evt.oldIndex, evt.newIndex);
     }
   });
 
 });
 
-function updateSequenceFunction (oldIndex, newIndex) {
+function updateSequenceParameters(oldIndex, newIndex, function_obj) {
+  function_obj.parameters_list.splice(newIndex, 0, function_obj.parameters_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceLocals(oldIndex, newIndex, function_obj) {
+  function_obj.variables_list.splice(newIndex, 0, function_obj.variables_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceGlobals(oldIndex, newIndex) {
+  program_obj.globals.splice(newIndex, 0, program_obj.globals.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceFunction(oldIndex, newIndex) {
   program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
 }
 
-function runCodeAssessment () {
+function runCodeAssessment() {
   toggleConsole(true);
 
   window.studentGrade = null;
@@ -450,7 +571,7 @@ function runCodeAssessment () {
   if (strCode == null) {
     return;
   }
-  if(domConsole == null)
+  if (domConsole == null)
     domConsole = new DOMConsole("#ivprog-term");
   $("#ivprog-term").slideDown(500);
   const runner = new IVProgAssessment(strCode, testCases, domConsole);
@@ -461,18 +582,18 @@ function runCodeAssessment () {
     } else {
       is_iassign = false;
     }
-  }).catch( err => domConsole.err(err.message));
-  
+  }).catch(err => domConsole.err(err.message));
+
 }
 
-function runCode () {
+function runCode() {
   toggleConsole(true);
 
   const strCode = CodeManagement.generate();
   if (strCode == null) {
     return;
   }
-  if(domConsole == null)
+  if (domConsole == null)
     domConsole = new DOMConsole("#ivprog-term");
   $("#ivprog-term").slideDown(500);
   try {
@@ -484,21 +605,21 @@ function runCode () {
     proc.registerOutput(domConsole);
     $("#ivprog-term").addClass('ivprog-term-active');
 
-    proc.interpretAST().then( _ => {
+    proc.interpretAST().then(_ => {
       domConsole.info("Programa executado com sucesso!");
       $("#ivprog-term").removeClass('ivprog-term-active');
     }).catch(err => {
       domConsole.err(err.message);
       $("#ivprog-term").removeClass('ivprog-term-active');
-    }) 
+    })
   } catch (error) {
     domConsole.err(error.message);
     console.log(error);
   }
-  
+
 }
 
-function toggleConsole (is_running) {
+function toggleConsole(is_running) {
 
   if (is_running) {
     $('.ivprog-term-div').css('display', 'block');
@@ -521,19 +642,19 @@ function toggleConsole (is_running) {
   }
 }
 
-function waitToCloseConsole () {
+function waitToCloseConsole() {
   domConsole.info("Aperte qualquer tecla para fechar...");
   const p = new Promise((resolve, _) => {
     domConsole.requestInput(resolve, true);
   });
-  p.then( _ => {
+  p.then(_ => {
     domConsole.dispose();
     domConsole = null;
     $("#ivprog-term").hide();
   })
 }
 
-function toggleTextualCoding () {
+function toggleTextualCoding() {
   var code = CodeManagement.generate();
   $('.ivprog_visual_panel').css('display', 'none');
   $('.ivprog_textual_panel').css('display', 'block');
@@ -544,7 +665,7 @@ function toggleTextualCoding () {
   $('.textual_coding_button').addClass('active');
 }
 
-function toggleVisualCoding () {
+function toggleVisualCoding() {
   $('.ivprog_textual_panel').addClass('loading');
   $('.ivprog_textual_panel').css('display', 'none');
   $('.ivprog_visual_panel').css('display', 'block');
@@ -553,12 +674,13 @@ function toggleVisualCoding () {
   $('.visual_coding_button').addClass('active');
 }
 
-function removeParameter (function_obj, parameter_obj, parameter_container) {
+function removeParameter(function_obj, parameter_obj, parameter_container) {
   var index = function_obj.parameters_list.indexOf(parameter_obj);
   if (index > -1) {
+    window.insertContext = true;
     function_obj.parameters_list.splice(index, 1);
   }
-  $(parameter_container).remove();
+  $(parameter_container).fadeOut();
 }
 
 function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
@@ -572,15 +694,15 @@ function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
 
 }
 
-function renderParameter (function_obj, parameter_obj, function_container) {
+function renderParameter(function_obj, parameter_obj, function_container) {
   var ret = "";
 
-  ret += '<div class="ui label function_name_parameter">';
+  ret += '<div class="ui label function_name_parameter pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
   ret += '<div class="ui dropdown parameter_type">';
 
   if (parameter_obj.dimensions > 0) {
-    ret += '<div class="text">'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
+    ret += '<div class="text">' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(parameter_obj.type);
     if (parameter_obj.dimensions == 1) {
       ret += ' [ ] ';
     } else {
@@ -588,17 +710,17 @@ function renderParameter (function_obj, parameter_obj, function_container) {
     }
     ret += '</div>';
   } else {
-    ret += '<div class="text">'+LocalizedStrings.getUI(parameter_obj.type)+'</div>';
+    ret += '<div class="text">' + LocalizedStrings.getUI(parameter_obj.type) + '</div>';
   }
 
   ret += '<div class="menu">';
 
-  
+
   for (var tm in Types) {
-      if (tm == Types.VOID.toUpperCase()) {
-        continue;
-      }
-      ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
+    if (tm == Types.VOID.toUpperCase()) {
+      continue;
+    }
+    ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="' + tm + '" >' + LocalizedStrings.getUI(tm.toLowerCase()) + '</div>';
   }
 
   for (var tm in Types) {
@@ -607,30 +729,30 @@ function renderParameter (function_obj, parameter_obj, function_container) {
     }
     ret += '<div class="item">'
       + '<i class="dropdown icon"></i>'
-      +  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
-        +  '<div class="menu">'
-          + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
-          + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
-        +  '</div>'
-      + '</div>'; 
+      + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase())
+      + '<div class="menu">'
+      + '<div class="item" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] " data-type="' + tm + '" data-dimensions="1">[ ]</div>'
+      + '<div class="item" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] [ ] " data-type="' + tm + '" data-dimensions="2">[ ] [ ] </div>'
+      + '</div>'
+      + '</div>';
   }
 
   ret += '</div></div>';
 
-  ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span></div> ';
+  ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">' + parameter_obj.name + '</span></div> ';
 
-  ret += ' <i class="red icon times remove_parameter"></i></div>';
+  ret += ' <i class="yellow inverted icon times remove_parameter"></i></div>';
 
   ret = $(ret);
-  
+
   function_container.find('.container_parameters_list').append(ret);
 
-  ret.find('.remove_parameter').on('click', function(e){
+  ret.find('.remove_parameter').on('click', function (e) {
     removeParameter(function_obj, parameter_obj, ret);
   });
-  
+
   ret.find('.ui.dropdown.parameter_type').dropdown({
-    onChange: function(value, text, $selectedItem) {
+    onChange: function (value, text, $selectedItem) {
       if ($selectedItem.data('dimensions')) {
         updateParameterType(parameter_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
       } else {
@@ -639,15 +761,16 @@ function renderParameter (function_obj, parameter_obj, function_container) {
     }
   });
 
-  ret.find('.label_enable_name_parameter').on('click', function(e){
+  ret.find('.label_enable_name_parameter').on('click', function (e) {
     enableNameParameterUpdate(parameter_obj, ret);
   });
 
+  return ret;
 }
 
 var opened_name_parameter = false;
 var opened_input_parameter = null;
-function enableNameParameterUpdate (parameter_obj, parent_node) {
+function enableNameParameterUpdate(parameter_obj, parent_node) {
   if (opened_name_parameter) {
     opened_input_parameter.focus();
     return;
@@ -658,11 +781,11 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
   var input_field;
 
   parent_node.find('.span_name_parameter').text('');
-  input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+parameter_obj.name+"' />" );
+  input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='" + parameter_obj.name + "' />");
   input_field.insertBefore(parent_node.find('.span_name_parameter'));
 
-  input_field.on('input', function() {
-    var inputWidth = input_field.textWidth()+10;
+  input_field.on('input', function () {
+    var inputWidth = input_field.textWidth() + 10;
     opened_input_parameter = input_field;
     input_field.focus();
 
@@ -671,11 +794,11 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
     input_field.val(tmpStr);
 
     input_field.css({
-        width: inputWidth
+      width: inputWidth
     })
   }).trigger('input');
 
-  input_field.focusout(function() {
+  input_field.focusout(function () {
     /// update array:
     if (input_field.val().trim()) {
       parameter_obj.name = input_field.val().trim();
@@ -689,9 +812,9 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
     opened_input_parameter = false;
   });
 
-  input_field.on('keydown', function(e) {
+  input_field.on('keydown', function (e) {
     var code = e.keyCode || e.which;
-    if(code == 13) {
+    if (code == 13) {
       if (input_field.val().trim()) {
         parameter_obj.name = input_field.val().trim();
         parent_node.find('.span_name_parameter').text(parameter_obj.name);
@@ -704,7 +827,7 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
       opened_input_parameter = false;
 
     }
-    if(code == 27) {
+    if (code == 27) {
       parent_node.find('.span_name_parameter').text(parameter_obj.name);
       input_field.off();
       input_field.remove();
@@ -720,7 +843,7 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
 var opened_name_function = false;
 var opened_input = null;
 var previousPadding = null;
-function enableNameFunctionUpdate (function_obj, parent_node) {
+function enableNameFunctionUpdate(function_obj, parent_node) {
   if (opened_name_function) {
     opened_input.focus();
     return;
@@ -733,12 +856,12 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
   }
   parent_node.find('.span_name_function').css('padding-left', '0');
   parent_node.find('.span_name_function').css('padding-right', '0');
-  
-  input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+function_obj.name+"' />" );
+
+  input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='" + function_obj.name + "' />");
   input_field.insertBefore(parent_node.find('.span_name_function'));
 
-  input_field.on('input', function() {
-    var inputWidth = input_field.textWidth()+10;
+  input_field.on('input', function () {
+    var inputWidth = input_field.textWidth() + 10;
     opened_input = input_field;
     input_field.focus();
 
@@ -747,11 +870,11 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
     input_field.val(tmpStr);
 
     input_field.css({
-        width: inputWidth
+      width: inputWidth
     })
   }).trigger('input');
 
-  input_field.focusout(function() {
+  input_field.focusout(function () {
     /// update array:
     if (input_field.val().trim()) {
       function_obj.name = input_field.val().trim();
@@ -767,9 +890,9 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
     opened_input = false;
   });
 
-  input_field.on('keydown', function(e) {
+  input_field.on('keydown', function (e) {
     var code = e.keyCode || e.which;
-    if(code == 13) {
+    if (code == 13) {
       if (input_field.val().trim()) {
         function_obj.name = input_field.val().trim();
       }
@@ -783,7 +906,7 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
       opened_name_function = false;
       opened_input = false;
     }
-    if(code == 27) {
+    if (code == 27) {
 
       input_field.off();
       input_field.remove();
@@ -797,5 +920,5 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
     }
   });
   input_field.select();
-  
+
 }

js/visualUI/functions_sidebar.js

@@ -26,6 +26,7 @@ window.studentGrade = null;
 const program = new Models.Program();
 
 window.system_functions = [];
+// Adding math functions:
 window.system_functions.push(new Models.SystemFunction('$sin', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
   null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
 window.system_functions.push(new Models.SystemFunction('$cos', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
@@ -48,6 +49,40 @@ window.system_functions.push(new Models.SystemFunction('$max', Types.REAL, 0, [n
   null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
 window.system_functions.push(new Models.SystemFunction('$min', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
   null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+// Adding text functions:
+window.system_functions.push(new Models.SystemFunction('$substring', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true),
+new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$length', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$uppercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$lowercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+window.system_functions.push(new Models.SystemFunction('$charAt', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
+// Adding arrangement functions:
+window.system_functions.push(new Models.SystemFunction('$numElements', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
+window.system_functions.push(new Models.SystemFunction('$matrixLines', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
+window.system_functions.push(new Models.SystemFunction('$matrixColumns', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
+// Adding conversion functions:
+window.system_functions.push(new Models.SystemFunction('$isReal', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$isInt', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$isBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castReal', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castInt', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
+window.system_functions.push(new Models.SystemFunction('$castString', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
 /*const variable1 = new Models.Variable(Types.INTEGER, "a", 1);
 const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);
 const command1 = new Models.Comment(new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.only_value, "Testing rendering commands"));
@@ -69,9 +104,25 @@ window.program_obj = program;
 window.generator = CodeManagement.generate;
 window.runCodeAssessment = runCodeAssessment;
 window.renderAlgorithm = AlgorithmManagement.renderAlgorithm;
+window.insertContext = false;
+window.watchW = WatchJS;
 
-WatchJS.watch(program.globals, function () {
-  AlgorithmManagement.renderAlgorithm();
+WatchJS.watch(window.program_obj.globals, function () {
+  if (window.insertContext) {
+    setTimeout(function () { AlgorithmManagement.renderAlgorithm(); }, 300);
+    window.insertContext = false;
+  } else {
+    AlgorithmManagement.renderAlgorithm();
+  }
+}, 1);
+
+WatchJS.watch(window.program_obj.functions, function () {
+  if (window.insertContext) {
+    setTimeout(function () { AlgorithmManagement.renderAlgorithm(); }, 300);
+    window.insertContext = false;
+  } else {
+    AlgorithmManagement.renderAlgorithm();
+  }
 }, 1);
 
 function addFunctionHandler() {
@@ -81,10 +132,15 @@ function addFunctionHandler() {
 
   counter_new_functions++;
 
-  renderFunction(new_function);
+  window.insertContext = true;
+
+  var newe = renderFunction(new_function);
+
+  newe.css('display', 'none');
+  newe.fadeIn();
 }
 
-function addParameter(function_obj, function_container) {
+function addParameter(function_obj, function_container, is_from_click = false) {
   if (function_obj.parameters_list == null) {
     function_obj.parameters_list = [];
   }
@@ -92,7 +148,12 @@ function addParameter(function_obj, function_container) {
   function_obj.parameters_list.push(new_parameter);
   counter_new_parameters++;
 
-  renderParameter(function_obj, new_parameter, function_container);
+  var newe = renderParameter(function_obj, new_parameter, function_container);
+
+  if (is_from_click) {
+    newe.css('display', 'none');
+    newe.fadeIn();
+  }
 }
 
 function updateReturnType(function_obj, new_type, new_dimensions = 0) {
@@ -101,7 +162,6 @@ function updateReturnType(function_obj, new_type, new_dimensions = 0) {
 }
 
 function removeFunction(function_obj) {
-
   var index = program.functions.indexOf(function_obj);
   if (index > -1) {
     program.functions.splice(index, 1);
@@ -129,7 +189,8 @@ function addHandlers(function_obj, function_container) {
   });
 
   function_container.find(".add_parameter_button").on('click', function (e) {
-    addParameter(function_obj, function_container);
+    window.insertContext = true;
+    addParameter(function_obj, function_container, true);
   });
 
   function_container.find('.menu_commands').dropdown({
@@ -150,18 +211,28 @@ function addHandlers(function_obj, function_container) {
   });
 
   function_container.find('.add_var_button_function').on('click', function (e) {
-    VariablesManagement.addVariable(function_obj, function_container);
+    window.insertContext = true;
+    VariablesManagement.addVariable(function_obj, function_container, true);
   });
 
   function_container.find('.remove_function_button').on('click', function (e) {
     removeFunction(function_obj);
-    function_container.slideUp(400);
+    function_container.fadeOut();
   });
 
   function_container.find('.minimize_function_button').on('click', function (e) {
     minimizeFunction(function_obj);
-    function_container.find(".function_area").toggle();
-    function_container.find(".add_var_top_button").toggle();
+    if (function_obj.is_hidden) {
+      function_container.find(".add_var_button_function").toggle();
+      function_container.find(".inline_add_command").toggle();
+      function_container.find(".function_area").slideToggle();
+    } else {
+      function_container.find(".function_area").slideToggle(function () {
+        function_container.find(".add_var_button_function").toggle();
+        function_container.find(".inline_add_command").toggle();
+      });
+    }
+
   });
 }
 
@@ -224,22 +295,6 @@ export function renderFunction(function_obj) {
   appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
     + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
 
-  appender += '<div class="ui small icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
-
-  appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
-  appender += '<a class="item" data-command="' + Models.COMMAND_TYPES.reader + '"><i class="download icon"></i> ' + LocalizedStrings.getUI('text_read_var') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.writer + '"><i class="upload icon"></i> ' + LocalizedStrings.getUI('text_write_var') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.comment + '"><i class="quote left icon"></i> ' + LocalizedStrings.getUI('text_comment') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.attribution + '"><i class="arrow left icon"></i> ' + LocalizedStrings.getUI('text_attribution') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
-    + '</div></div></div>';
-
   appender += '<div class="function_signature_div">' + LocalizedStrings.getUI("function") + ' ';
 
   if (function_obj.is_main) {
@@ -250,35 +305,115 @@ export function renderFunction(function_obj) {
 
     appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">' + function_obj.name + '</span> </div> '
       + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
+    var menu_func = generateMenuButton(function_obj);
+    /*menu_func.css("display","none")
+    $('.functions_labels').append(menu_func);
+    menu_func.fadeIn();*/
+    $('.functions_labels').append(menu_func);
   }
 
   appender += '</div> <span class="parethesis_function"> ) </span> </div>'
-    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
+    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ');
+
+  appender += '<div class="ui add_var_context add_var_button_function" style="float: left;"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button purple"><i class="icon superscript"></i></div></div>';
 
-    + '<div class="ui top attached segment variables_list_div">'
-    + '</div>'
+  appender += '<div class="ui top attached segment variables_list_div"></div>';
 
-    + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
+  appender += '<div class="ui inline_add_command"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button dropdown menu_commands orange" style="float: left;" ><i class="icon code"></i> <div class="menu"> ';
+  appender += '<a class="item" data-command="' + Models.COMMAND_TYPES.reader + '"><i class="download icon"></i> ' + LocalizedStrings.getUI('text_read_var') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.writer + '"><i class="upload icon"></i> ' + LocalizedStrings.getUI('text_write_var') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.comment + '"><i class="quote left icon"></i> ' + LocalizedStrings.getUI('text_comment') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.attribution + '"><i class="arrow left icon"></i> ' + LocalizedStrings.getUI('text_attribution') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
+    + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
+    + '</div></div></div>';
 
-  appender += '</div>';
+  appender += '<div class="ui bottom attached segment commands_list_div"></div>';
 
-  appender += '<div class="function_close_div"></div>'
-    + '</div>'
-    + '</div>';
+  appender += '</div></div>';
 
   appender = $(appender);
 
   $('.all_functions').append(appender);
 
   appender.data('fun', function_obj);
-  appender.find('.commands_list_div').data('fun', function_obj);
+  appender.find('.commands_list_div')
+    .data('fun', function_obj)
+    .attr('droppable', true)
+    .on('dragenter', function (e) {
+      e.preventDefault();
+      console.log('dragenter');
+      console.log(e.target)
+      $(e.target).addClass('div-over')
+      //e.stopPropagation();
+    }).on('dragover', function (e) {
+      e.preventDefault();
+    })
+    .on('dragleave', function (e) {
+      e.preventDefault();
+      //e.stopPropagation();
+      console.log("dragleave")
+      $(e.target).removeClass('div-over')
+      console.log(e.target)
+    })
+    .on('drop', function (e, bundle) {
+      e.preventDefault();
+      if (bundle) {
+        e.clientX = bundle.clientX;
+        e.clientY = bundle.clientY;
+      }
+      //console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"));
+      console.log(e)
+      $(e.target).removeClass('div-over')
+      //var data = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
+      var data = program_obj.dataTransfer;
+      if (data.type == 'command')
+        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, data.content);
+      else if (data.type == 'var')
+        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "attribution", data.content);
+      else {
+        if (!data.content.parameters_list)
+          data.content.parameters_list = [];
+        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "functioncall", data.content);
+      }
+      //program_obj.dataTransfer;
+    }).on('click', function (e) {
+      if (window.ghostNode) {
+        console.log("drop click");
+        $(document).off('mousemove').off('mousedown').off('keyup');
+        $(window.ghostNode).remove();
+        delete window.ghostNode;
+        $(this).trigger('drop', [e]);
+        $('.div-over').removeClass('div-over');
+      }
+    })
+    .on('mouseover', function (evt) {
+      if (window.ghostNode) {
+        evt.type = 'dragenter';
+        //$(this).trigger('dragenter');
+        console.log('mouseover');
+        $(this).trigger(evt);
+      }
+    })
+    .on('mouseout', function (evt) {
+      //$(this).trigger('dragleave');
+      if (window.ghostNode) {
+        evt.type = 'dragleave';
+        console.log('mouseout');
+        $(this).trigger(evt);
+      }
+    });
 
   renderFunctionReturn(function_obj, appender);
 
   addHandlers(function_obj, appender);
 
-
-  // Rendering parameters: 
+  // Rendering parameters:
   for (var j = 0; j < function_obj.parameters_list.length; j++) {
     renderParameter(function_obj, function_obj.parameters_list[j], appender);
   }
@@ -287,13 +422,10 @@ export function renderFunction(function_obj) {
   for (var j = 0; j < function_obj.variables_list.length; j++) {
     VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
   }
-
   // Rendering commands:
   for (var j = 0; j < function_obj.commands.length; j++) {
     CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
   }
-
-
   $('.minimize_function_button').popup({
     content: LocalizedStrings.getUI("tooltip_minimize"),
     delay: {
@@ -301,8 +433,40 @@ export function renderFunction(function_obj) {
       hide: 0
     }
   });
-}
 
+  Sortable.create(appender.find(".variables_list_div")[0], {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'local_vars_drag_' + program.functions.indexOf(function_obj),
+    onEnd: function (evt) {
+      updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
+    }
+  });
+
+  Sortable.create(appender.find(".commands_list_div")[0], {
+    handle: '.command_drag',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'commands_drag_' + program.functions.indexOf(function_obj),
+    onEnd: function (evt) {
+      //updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
+    }
+  });
+
+  if (!function_obj.is_main) {
+    Sortable.create(appender.find(".container_parameters_list")[0], {
+      handle: '.ellipsis',
+      animation: 100,
+      ghostClass: 'ghost',
+      group: 'parameters_drag_' + program.functions.indexOf(function_obj),
+      onEnd: function (evt) {
+        updateSequenceParameters(evt.oldIndex, evt.newIndex, function_obj);
+      }
+    });
+  }
+  return appender;
+}
 
 export function initVisualUI() {
   // MUST USE CONST, LET, OR VAR !!!!!!
@@ -313,7 +477,8 @@ export function initVisualUI() {
     addFunctionHandler();
   });
   $('.add_global_button').on('click', () => {
-    GlobalsManagement.addGlobal(program);
+    window.insertContext = true;
+    GlobalsManagement.addGlobal(program, true);
   });
 
   $('.run_button').on('click', () => {
@@ -336,6 +501,9 @@ export function initVisualUI() {
   $('.div_toggle_console').on('click', () => {
     toggleConsole();
   });
+  $('.expand_button').on('click', () => {
+    full_screen();
+  });
 }
 
 var is_iassign = false;
@@ -435,8 +603,31 @@ $(document).ready(function () {
     }
   });
 
+  var listGlobalsHandle = document.getElementById("listGlobalsHandle");
+  Sortable.create(listGlobalsHandle, {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'globals_divs_drag',
+    onEnd: function (evt) {
+      updateSequenceGlobals(evt.oldIndex, evt.newIndex);
+    }
+  });
+
 });
 
+function updateSequenceParameters(oldIndex, newIndex, function_obj) {
+  function_obj.parameters_list.splice(newIndex, 0, function_obj.parameters_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceLocals(oldIndex, newIndex, function_obj) {
+  function_obj.variables_list.splice(newIndex, 0, function_obj.variables_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceGlobals(oldIndex, newIndex) {
+  program_obj.globals.splice(newIndex, 0, program_obj.globals.splice(oldIndex, 1)[0]);
+}
+
 function updateSequenceFunction(oldIndex, newIndex) {
   program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
 }
@@ -542,6 +733,7 @@ function toggleTextualCoding() {
 
   $('.visual_coding_button').removeClass('active');
   $('.textual_coding_button').addClass('active');
+  $('.tabs').addClass('loading')
 }
 
 function toggleVisualCoding() {
@@ -551,14 +743,17 @@ function toggleVisualCoding() {
 
   $('.textual_coding_button').removeClass('active');
   $('.visual_coding_button').addClass('active');
+  $('.menu .item').tab();
+  $('.tabs').removeClass('loading')
 }
 
 function removeParameter(function_obj, parameter_obj, parameter_container) {
   var index = function_obj.parameters_list.indexOf(parameter_obj);
   if (index > -1) {
+    window.insertContext = true;
     function_obj.parameters_list.splice(index, 1);
   }
-  $(parameter_container).remove();
+  $(parameter_container).fadeOut();
 }
 
 function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
@@ -575,7 +770,7 @@ function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
 function renderParameter(function_obj, parameter_obj, function_container) {
   var ret = "";
 
-  ret += '<div class="ui label function_name_parameter">';
+  ret += '<div class="ui label function_name_parameter pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
   ret += '<div class="ui dropdown parameter_type">';
 
@@ -619,7 +814,7 @@ function renderParameter(function_obj, parameter_obj, function_container) {
 
   ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">' + parameter_obj.name + '</span></div> ';
 
-  ret += ' <i class="red icon times remove_parameter"></i></div>';
+  ret += ' <i class="yellow inverted icon times remove_parameter"></i></div>';
 
   ret = $(ret);
 
@@ -643,6 +838,7 @@ function renderParameter(function_obj, parameter_obj, function_container) {
     enableNameParameterUpdate(parameter_obj, ret);
   });
 
+  return ret;
 }
 
 var opened_name_parameter = false;
@@ -797,6 +993,7 @@ function enableNameFunctionUpdate(function_obj, parent_node) {
     }
   });
   input_field.select();
+
 }
 
 /****************************************************
@@ -805,10 +1002,10 @@ function enableNameFunctionUpdate(function_obj, parent_node) {
 
 export function generateMenuButton(function_obj) {
   if (function_obj.identifier) {
-    var identifier = LocalizedStrings.getUI(system_functions[0].identifier);
-    var menu_button = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true" data-function="' + identifier + '"><i class="list icon"></i> <span class="function_name">' + identifier + '</span> (<span class="function_params"></span>) : <span class="function_return_type">' + LocalizedStrings.getUI(function_obj.return_type) + '</span></button>';
+    var identifier = LocalizedStrings.getUI(function_obj.identifier);
+    var menu_button = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true" data-function="' + identifier + '"><i class="code icon"></i> <span class="function_name">' + identifier + '</span> (<span class="function_params"></span>) : <span class="function_return_type">' + LocalizedStrings.getUI(function_obj.return_type) + '</span></button>';
   } else {
-    var menu_button = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true" data-function="' + function_obj.name + '"><i class="list icon"></i> <span class="function_name">' + function_obj.name + '</span> (<span class="function_params"></span>) : <span class="function_return_type">' + LocalizedStrings.getUI(function_obj.return_type) + '</span></button>';
+    var menu_button = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true" data-function="' + function_obj.name + '"><i class="code icon"></i> <span class="function_name">' + function_obj.name + '</span> (<span class="function_params"></span>) : <span class="function_return_type">' + LocalizedStrings.getUI(function_obj.return_type) + '</span></button>';
   }
   var params = "";
   menu_button = $(menu_button);
@@ -835,7 +1032,7 @@ export function generateMenuButton(function_obj) {
   menu_button
     .on('click', function (evt) {
       $(this).trigger('dragstart');
-      if(window.ghostNode) {
+      if (window.ghostNode) {
         $(window.ghostNode).remove();
         $(document).off('mousemove');
       }
@@ -852,6 +1049,29 @@ export function generateMenuButton(function_obj) {
         ghostNode.css('left', evt.pageX);
         ghostNode.css('top', evt.pageY);
       });
+      $(document).on('mousedown', function (evt) {
+        console.log("length ===");
+        console.log($(evt.target).closest(".commands_list_div"))
+        if ($(evt.target).closest(".commands_list_div").length <= 0) {
+          if (window.ghostNode) {
+            console.log("drop click");
+            $('.div-over').removeClass('div-over');
+            $(window.ghostNode).remove();
+            delete window.ghostNode;
+            $(document).off('mousemove').off('mousedown').off('keyup');
+          }
+        }
+      });
+      $(document).keyup(function (e) {
+        console.log("KeyUp")
+        if (e.key === "Escape") {
+          console.log("escape");
+          $('.div-over').removeClass('div-over');
+          $(window.ghostNode).remove();
+          delete window.ghostNode;
+          $(document).off('mousemove').off('mousedown').off('keyup');
+        }
+      });
     });
   return menu_button;
 }
@@ -865,164 +1085,164 @@ removeFunction = function (function_obj) {
   $('.functions_labels > [data-function=' + function_obj.name + ']').remove();
 }
 
-renderFunction = function (function_obj) {
-
-  var appender = '<div class="ui secondary segment function_div list-group-item">';
-
-  if (function_obj.function_comment) {
-    //appender += renderComment(function_obj.function_comment, sequence, true, -1);
-  }
-
-  appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
-
-  appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
-    + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
-
-  appender += '<div class="ui small icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
-
-  appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
-  appender += '<a class="item" data-command="' + Models.COMMAND_TYPES.reader + '"><i class="download icon"></i> ' + LocalizedStrings.getUI('text_read_var') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.writer + '"><i class="upload icon"></i> ' + LocalizedStrings.getUI('text_write_var') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.comment + '"><i class="quote left icon"></i> ' + LocalizedStrings.getUI('text_comment') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.attribution + '"><i class="arrow left icon"></i> ' + LocalizedStrings.getUI('text_attribution') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
-    + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
-    + '</div></div></div>';
-
-  appender += '<div class="function_signature_div">' + LocalizedStrings.getUI("function") + ' ';
-
-  if (function_obj.is_main) {
-    appender += '<div class="function_name_div">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >' + function_obj.name + '</span> </div> '
-      + '( <div class="ui large labels parameters_list">';
-  } else {
-    appender += '<div class="ui function_return"></div>';
-
-    appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">' + function_obj.name + '</span> </div> '
-      + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
-
-    $('.functions_labels').append(generateMenuButton(function_obj));
-    console.log("aqui");
-
-    //var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
-    //var params = "";
-    //menu_button
-
-  }
-
-  appender += '</div> ) </div>'
-    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
-
-    + '<div class="ui top attached segment variables_list_div">'
-    /*+ renderVariables(function_obj, sequence)*/
-    + '</div>'
-    + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
-
-  appender += '</div>';
-
-  appender += '<div class="function_close_div"></div>'
-    + '</div>'
-    + '</div>';
-
-  appender = $(appender);
-
-  $('.all_functions').append(appender);
-
-  appender.data('fun', function_obj);
-  appender.find('.commands_list_div')
-    .data('fun', function_obj)
-    .attr('droppable', true)
-    .on('dragenter', function (e) {
-      e.preventDefault();
-      console.log('dragenter');
-      console.log(e.target)
-      $(e.target).addClass('div-over')
-      //e.stopPropagation();
-    }).on('dragover', function (e) {
-      e.preventDefault();
-    })
-    .on('dragleave', function (e) {
-      e.preventDefault();
-      //e.stopPropagation();
-      console.log("dragleave")
-      $(e.target).removeClass('div-over')
-      console.log(e.target)
-    })
-    .on('drop', function (e, bundle) {
-      e.preventDefault();
-      if (bundle) {
-        e.clientX = bundle.clientX;
-        e.clientY = bundle.clientY;
-      }
-      //console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"));
-      console.log(e)
-      $(e.target).removeClass('div-over')
-      //var data = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
-      var data = program_obj.dataTransfer;
-      if (data.type == 'command')
-        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, data.content);
-      else if (data.type == 'var')
-        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "attribution", data.content);
-      else {
-        if (!data.content.parameters_list)
-          data.content.parameters_list = [];
-        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "functioncall", data.content);
-      }
-      //program_obj.dataTransfer;
-    }).on('click', function (e) {
-      if (window.ghostNode) {
-        console.log("drop click");
-        $(document).off('mousemove');
-        $(window.ghostNode).remove();
-        $(this).trigger('drop', [e]);
-        $('.div-over').removeClass('div-over');
-        delete window.ghostNode;
-      }
-    })
-    .on('mouseover', function (evt) {
-      if (window.ghostNode) {
-        evt.type = 'dragenter';
-        //$(this).trigger('dragenter');
-        console.log('mouseover');
-        $(this).trigger(evt);
-      }
-    })
-    .on('mouseout', function (evt) {
-      //$(this).trigger('dragleave');
-      if (window.ghostNode) {
-        evt.type = 'dragleave';
-        console.log('mouseout');
-        $(this).trigger(evt);
-      }
-    });
-
-  renderFunctionReturn(function_obj, appender);
-
-  addHandlers(function_obj, appender);
-
-  // Rendering parameters:
-  for (var j = 0; j < function_obj.parameters_list.length; j++) {
-    renderParameter(function_obj, function_obj.parameters_list[j], appender);
-  }
-
-  // Rendering variables:
-  for (var j = 0; j < function_obj.variables_list.length; j++) {
-    VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
-  }
-
-  // Rendering commands:
-  for (var j = 0; j < function_obj.commands.length; j++) {
-    CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
-  }
-  console.log('kk')
-  console.log($($('.function_div')[0]).data('fun'))
-  console.log(appender.data('fun'))
-
-}
+// renderFunction = function (function_obj) {
+
+//   var appender = '<div class="ui secondary segment function_div list-group-item">';
+
+//   if (function_obj.function_comment) {
+//     //appender += renderComment(function_obj.function_comment, sequence, true, -1);
+//   }
+
+//   appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
+
+//   appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
+//     + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
+
+//   appender += '<div class="ui small icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
+
+//   appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
+//   appender += '<a class="item" data-command="' + Models.COMMAND_TYPES.reader + '"><i class="download icon"></i> ' + LocalizedStrings.getUI('text_read_var') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.writer + '"><i class="upload icon"></i> ' + LocalizedStrings.getUI('text_write_var') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.comment + '"><i class="quote left icon"></i> ' + LocalizedStrings.getUI('text_comment') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.attribution + '"><i class="arrow left icon"></i> ' + LocalizedStrings.getUI('text_attribution') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
+//     + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
+//     + '</div></div></div>';
+
+//   appender += '<div class="function_signature_div">' + LocalizedStrings.getUI("function") + ' ';
+
+//   if (function_obj.is_main) {
+//     appender += '<div class="function_name_div">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >' + function_obj.name + '</span> </div> '
+//       + '( <div class="ui large labels parameters_list">';
+//   } else {
+//     appender += '<div class="ui function_return"></div>';
+
+//     appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">' + function_obj.name + '</span> </div> '
+//       + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
+
+//     $('.functions_labels').append(generateMenuButton(function_obj));
+//     console.log("aqui");
+
+//     //var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
+//     //var params = "";
+//     //menu_button
+
+//   }
+
+//   appender += '</div> ) </div>'
+//     + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
+
+//     + '<div class="ui top attached segment variables_list_div">'
+//     /*+ renderVariables(function_obj, sequence)*/
+//     + '</div>'
+//     + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
+
+//   appender += '</div>';
+
+//   appender += '<div class="function_close_div"></div>'
+//     + '</div>'
+//     + '</div>';
+
+//   appender = $(appender);
+
+//   $('.all_functions').append(appender);
+
+//   appender.data('fun', function_obj);
+//   appender.find('.commands_list_div')
+//     .data('fun', function_obj)
+//     .attr('droppable', true)
+//     .on('dragenter', function (e) {
+//       e.preventDefault();
+//       console.log('dragenter');
+//       console.log(e.target)
+//       $(e.target).addClass('div-over')
+//       //e.stopPropagation();
+//     }).on('dragover', function (e) {
+//       e.preventDefault();
+//     })
+//     .on('dragleave', function (e) {
+//       e.preventDefault();
+//       //e.stopPropagation();
+//       console.log("dragleave")
+//       $(e.target).removeClass('div-over')
+//       console.log(e.target)
+//     })
+//     .on('drop', function (e, bundle) {
+//       e.preventDefault();
+//       if (bundle) {
+//         e.clientX = bundle.clientX;
+//         e.clientY = bundle.clientY;
+//       }
+//       //console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"));
+//       console.log(e)
+//       $(e.target).removeClass('div-over')
+//       //var data = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
+//       var data = program_obj.dataTransfer;
+//       if (data.type == 'command')
+//         CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, data.content);
+//       else if (data.type == 'var')
+//         CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "attribution", data.content);
+//       else {
+//         if (!data.content.parameters_list)
+//           data.content.parameters_list = [];
+//         CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "functioncall", data.content);
+//       }
+//       //program_obj.dataTransfer;
+//     }).on('click', function (e) {
+//       if (window.ghostNode) {
+//         console.log("drop click");
+//         $(document).off('mousemove').off('mousedown').off('keyup');
+//         $(window.ghostNode).remove();
+//         delete window.ghostNode;
+//         $(this).trigger('drop', [e]);
+//         $('.div-over').removeClass('div-over');
+//       }
+//     })
+//     .on('mouseover', function (evt) {
+//       if (window.ghostNode) {
+//         evt.type = 'dragenter';
+//         //$(this).trigger('dragenter');
+//         console.log('mouseover');
+//         $(this).trigger(evt);
+//       }
+//     })
+//     .on('mouseout', function (evt) {
+//       //$(this).trigger('dragleave');
+//       if (window.ghostNode) {
+//         evt.type = 'dragleave';
+//         console.log('mouseout');
+//         $(this).trigger(evt);
+//       }
+//     });
+
+//   renderFunctionReturn(function_obj, appender);
+
+//   addHandlers(function_obj, appender);
+
+//   // Rendering parameters:
+//   for (var j = 0; j < function_obj.parameters_list.length; j++) {
+//     renderParameter(function_obj, function_obj.parameters_list[j], appender);
+//   }
+
+//   // Rendering variables:
+//   for (var j = 0; j < function_obj.variables_list.length; j++) {
+//     VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
+//   }
+
+//   // Rendering commands:
+//   for (var j = 0; j < function_obj.commands.length; j++) {
+//     CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
+//   }
+//   console.log('kk')
+//   console.log($($('.function_div')[0]).data('fun'))
+//   console.log(appender.data('fun'))
+
+// }
 
 initVisualUI = function () {
   // MUST USE CONST, LET, OR VAR !!!!!!
@@ -1058,20 +1278,21 @@ initVisualUI = function () {
   });
 
   var commands = [
-    { type: Models.COMMAND_TYPES.break, icon: "stop", text: LocalizedStrings.getUI('text_break') },
     { type: Models.COMMAND_TYPES.reader, icon: "download", text: LocalizedStrings.getUI('text_read_var') },
     { type: Models.COMMAND_TYPES.writer, icon: "upload", text: LocalizedStrings.getUI('text_write_var') },
     { type: Models.COMMAND_TYPES.comment, icon: "quote left", text: LocalizedStrings.getUI('text_comment') },
     { type: Models.COMMAND_TYPES.attribution, icon: "arrow left", text: LocalizedStrings.getUI('text_attribution') },
-    //{type: Models.COMMAND_TYPES.functioncall, icon: "hand point right", text: LocalizedStrings.getUI('text_functioncall')},
     { type: Models.COMMAND_TYPES.iftrue, icon: "random", text: LocalizedStrings.getUI('text_iftrue') },
     { type: Models.COMMAND_TYPES.repeatNtimes, icon: "sync", text: LocalizedStrings.getUI('text_repeatNtimes') },
     { type: Models.COMMAND_TYPES.whiletrue, icon: "sync", text: LocalizedStrings.getUI('text_whiletrue') },
     { type: Models.COMMAND_TYPES.dowhiletrue, icon: "sync", text: LocalizedStrings.getUI('text_dowhiletrue') },
-    { type: Models.COMMAND_TYPES.switch, icon: "list", text: LocalizedStrings.getUI('text_switch') }
+    { type: Models.COMMAND_TYPES.switch, icon: "list", text: LocalizedStrings.getUI('text_switch') },
+    { type: Models.COMMAND_TYPES.return, icon: "reply", text: LocalizedStrings.getUI('text_btn_return') },
+    //{ type: Models.COMMAND_TYPES.break, icon: "stop", text: LocalizedStrings.getUI('text_break') },
+    //{type: Models.COMMAND_TYPES.functioncall, icon: "hand point right", text: LocalizedStrings.getUI('text_functioncall')},
   ];
 
-  for (var i = 0; i < commands.length; i++) {
+  for (var i = commands.length-1; i >= 0; i--) {
     var command = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true"  data-command="' + commands[i].type + '"><i class="' + commands[i].icon + ' icon"></i> ' + commands[i].text + '</button>';
     command = $(command);
     command.on('dragstart', function (evt) {
@@ -1084,7 +1305,7 @@ initVisualUI = function () {
     });
     command.on('click', function (evt) {
       $(this).trigger('dragstart');
-      if(window.ghostNode) {
+      if (window.ghostNode) {
         $(window.ghostNode).remove();
         $(document).off('mousemove');
       }
@@ -1101,6 +1322,29 @@ initVisualUI = function () {
         ghostNode.css('left', evt.pageX);
         ghostNode.css('top', evt.pageY);
       });
+      $(document).on('mousedown', function (evt) {
+        console.log("length ===");
+        console.log($(evt.target).closest(".commands_list_div"))
+        if ($(evt.target).closest(".commands_list_div").length <= 0) {
+          if (window.ghostNode) {
+            console.log("drop click");
+            $('.div-over').removeClass('div-over');
+            $(window.ghostNode).remove();
+            delete window.ghostNode;
+            $(document).off('mousemove').off('mousedown').off('keyup');
+          }
+        }
+      });
+      $(document).keyup(function (e) {
+        console.log("KeyUp")
+        if (e.key === "Escape") {
+          console.log("escape");
+          $('.div-over').removeClass('div-over');
+          $(window.ghostNode).remove();
+          delete window.ghostNode;
+          $(document).off('mousemove').off('mousedown').off('keyup');
+        }
+      });
     });
     $('.list-commands').prepend(command);
   }
@@ -1134,6 +1378,8 @@ initVisualUI = function () {
 
   $('.accordion').accordion();
 
+
+
 }
 /*
 renderParameter = function(function_obj, parameter_obj, function_container) {

js/visualUI/globals.js

@@ -11,26 +11,31 @@ import '../semantic/semantic.min.js';
 
 var counter_new_globals = 0;
 
-export function addGlobal (program) {
+export function addGlobal(program, is_from_click = false) {
 
 	var new_global = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI('new_global') + '_' + counter_new_globals, 1);
-	counter_new_globals ++;
+	counter_new_globals++;
 
 	program.addGlobal(new_global);
 
-	renderGlobal(new_global);
+	var newe = renderGlobal(new_global);
+
+	if (is_from_click) {
+		newe.css('display', 'none');
+		newe.fadeIn();
+	}
 
 }
 
-function toggleConstant (global_var) {
+function toggleConstant(global_var) {
 	global_var.is_constant = !global_var.is_constant;
 }
 
-function updateName (global_var, new_name) {
+function updateName(global_var, new_name) {
 	global_var.name = new_name;
 }
 
-function updateType (global_var, new_type, new_dimensions = 0) {
+function updateType(global_var, new_type, new_dimensions = 0) {
 	global_var.type = new_type;
 	global_var.dimensions = new_dimensions;
 
@@ -42,17 +47,18 @@ function updateType (global_var, new_type, new_dimensions = 0) {
 	updateInitialValues(global_var);
 }
 
-function removeGlobal (global_var, global_container) {
+function removeGlobal(global_var, global_container) {
 	var index = window.program_obj.globals.indexOf(global_var);
 	if (index > -1) {
-	  window.program_obj.globals.splice(index, 1);
+		window.insertContext = true;
+		window.program_obj.globals.splice(index, 1);
 	}
 	global_container.children().off();
 	global_container.off();
-	global_container.remove();
+	global_container.fadeOut();
 }
 
-function updateInitialValues (global_var) {
+function updateInitialValues(global_var) {
 	if (global_var.type == Types.INTEGER) {
 		if (global_var.dimensions == 0) {
 			global_var.value = 1;
@@ -85,8 +91,8 @@ function updateInitialValues (global_var) {
 			global_var.value = [LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')];
 		}
 		if (global_var.dimensions == 2) {
-			global_var.value = [[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')], 
-									[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')]];
+			global_var.value = [[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')],
+			[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')]];
 		}
 	}
 
@@ -103,27 +109,27 @@ function updateInitialValues (global_var) {
 	}
 }
 
-function alternateBooleanGlobalValue (global_var, value_container) {
+function alternateBooleanGlobalValue(global_var, value_container) {
 	global_var.value = !global_var.value;
 	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(global_var.value));
 }
 
-function alternateBooleanGlobalVectorValue (global_var, index, value_container) {
+function alternateBooleanGlobalVectorValue(global_var, index, value_container) {
 	global_var.value[index] = !global_var.value[index];
 	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(global_var.value[index]));
 }
 
-function removeGlobalColumnVector (global_var) {
+function removeGlobalColumnVector(global_var) {
 	if (global_var.columns == 0) {
 		return;
 	}
 
-	global_var.columns --;
+	global_var.columns--;
 	global_var.value.splice(global_var.value.length - 1, 1);
 }
 
-function addGlobalColumnVector (global_var) {
-	global_var.columns ++;
+function addGlobalColumnVector(global_var) {
+	global_var.columns++;
 
 	if (global_var.type == Types.INTEGER) {
 		global_var.value.push(1);
@@ -139,20 +145,20 @@ function addGlobalColumnVector (global_var) {
 	}
 }
 
-function removeColumnGlobalMatrix (global_var) {
+function removeColumnGlobalMatrix(global_var) {
 	if (global_var.columns == 0) {
 		return;
 	}
 
-	global_var.columns --;
+	global_var.columns--;
 
 	for (var i = 0; i < global_var.rows; i++) {
 		global_var.value[i].splice(global_var.value[i].length - 1, 1);
 	}
 }
 
-function addColumnGlobalMatrix (global_var) {
-	global_var.columns ++;
+function addColumnGlobalMatrix(global_var) {
+	global_var.columns++;
 
 	if (global_var.type == Types.INTEGER) {
 		for (var i = 0; i < global_var.rows; i++) {
@@ -176,17 +182,17 @@ function addColumnGlobalMatrix (global_var) {
 	}
 }
 
-function removeLineGlobalMatrix (global_var) {
+function removeLineGlobalMatrix(global_var) {
 	if (global_var.rows == 0) {
 		return;
 	}
 
-	global_var.rows --;
+	global_var.rows--;
 	global_var.value.splice(global_var.value.length - 1, 1);
 }
 
-function addLineGlobalMatrix (global_var) {
-	global_var.rows ++;
+function addLineGlobalMatrix(global_var) {
+	global_var.rows++;
 
 	if (global_var.type == Types.INTEGER) {
 		var n_l = [];
@@ -220,24 +226,24 @@ function addLineGlobalMatrix (global_var) {
 	}
 }
 
-function alternateBooleanGlobalMatrixValue (global_var, row, index, value_container) {
+function alternateBooleanGlobalMatrixValue(global_var, row, index, value_container) {
 	global_var.value[row][index] = !global_var.value[row][index];
 	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(global_var.value[row][index]));
 }
 
-function renderValues (global_var, global_container) {
+function renderValues(global_var, global_container) {
 
 	var ret = "";
 	var j = 0;
 
 	if (global_var.dimensions == 0) {
 		if (global_var.type == Types.REAL) {
-			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value.toFixed(1)+'</span>  </div> ';
+			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">' + global_var.value.toFixed(1) + '</span>  </div> ';
 		} else {
 			if (global_var.type == Types.BOOLEAN) {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+LocalizedStrings.getUI(global_var.value)+'</span>  </div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">' + LocalizedStrings.getUI(global_var.value) + '</span>  </div> ';
 			} else {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value+'</span>  </div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">' + global_var.value + '</span>  </div> ';
 			}
 		}
 	} else {
@@ -247,163 +253,163 @@ function renderValues (global_var, global_container) {
 			ret += '<tr>';
 			if (global_var.type == Types.REAL) {
 				for (var k = 0; k < global_var.columns; k++) {
-					ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+global_var.value[k].toFixed(1)+'</span></td>';
+					ret += '<td><span class="span_value_variable vector_var" data-index="' + k + '">' + global_var.value[k].toFixed(1) + '</span></td>';
 				}
 			} else {
 				for (var k = 0; k < global_var.columns; k++) {
 					if (global_var.type == Types.BOOLEAN) {
-						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+LocalizedStrings.getUI(global_var.value[k])+'</span></td>';
+						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="' + k + '">' + LocalizedStrings.getUI(global_var.value[k]) + '</span></td>';
 					} else {
-						ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+global_var.value[k]+'</span>'+'</td>';
+						ret += '<td><span class="span_value_variable vector_var" data-index="' + k + '">' + global_var.value[k] + '</span>' + '</td>';
 					}
 				}
 			}
-			
+
 			ret += '</tr>';
 			ret += '</table>';
 
 			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_vector_column"></i>'
-		    	+ ' <i class="ui icon plus square outline add_global_vector_column"></i></div>';
+				+ ' <i class="ui icon plus square outline add_global_vector_column"></i></div>';
 		}
 
 		if (global_var.dimensions == 2) {
 			if (global_var.type == Types.REAL) {
 				for (var l = 0; l < global_var.rows; l++) {
-    				ret += '<tr>';
-    				for (var k = 0; k < global_var.columns; k++) {
-    					ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k].toFixed(1)+'</span>'+'</td>';
-    				} 
-    				ret += '</tr>';
+					ret += '<tr>';
+					for (var k = 0; k < global_var.columns; k++) {
+						ret += '<td><span class="span_value_variable matrix_var" data-index="' + k + '" data-row="' + l + '">' + global_var.value[l][k].toFixed(1) + '</span>' + '</td>';
+					}
+					ret += '</tr>';
 				}
 			} else {
 				for (var l = 0; l < global_var.rows; l++) {
-    				ret += '<tr>';
-    				for (var k = 0; k < global_var.columns; k++) {
-    					if (global_var.type == Types.BOOLEAN) { 
-    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+LocalizedStrings.getUI(global_var.value[l][k])+'</span></td>';
-    					} else {
-    						ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
-    					}
-    				} 
-    				ret += '</tr>';
+					ret += '<tr>';
+					for (var k = 0; k < global_var.columns; k++) {
+						if (global_var.type == Types.BOOLEAN) {
+							ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="' + k + '" data-row="' + l + '">' + LocalizedStrings.getUI(global_var.value[l][k]) + '</span></td>';
+						} else {
+							ret += '<td><span class="span_value_variable matrix_var" data-index="' + k + '" data-row="' + l + '">' + global_var.value[l][k] + '</span></td>';
+						}
+					}
+					ret += '</tr>';
 				}
 			}
 			if (global_var.rows == 0) {
 				ret += '<tr><td></td></tr>';
 			}
-			ret += '<tr><td colspan="'+global_var.columns+'" class="tr_manage_lines"><i class="ui icon minus square outline remove_global_matrix_line"></i>'
-		    	+ ' <i class="ui icon plus square outline add_global_matrix_line"></i></td></tr>';
+			ret += '<tr><td colspan="' + global_var.columns + '" class="tr_manage_lines"><i class="ui icon minus square outline remove_global_matrix_line"></i>'
+				+ ' <i class="ui icon plus square outline add_global_matrix_line"></i></td></tr>';
 			ret += '</table>';
 
 			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_matrix_column"></i>'
-		    	+ ' <i class="ui icon plus square outline add_global_matrix_column"></i></div>';
+				+ ' <i class="ui icon plus square outline add_global_matrix_column"></i></div>';
 		}
-		
+
 	}
 
-	global_container.find( ".div_valor_var" ).html('');
+	global_container.find(".div_valor_var").html('');
 
 	ret = $(ret);
 
 	ret.find('.span_value_variable').data('associatedOject', global_var);
 
-	ret.find( ".boolean_simple_type" ).on('click', function(e){
+	ret.find(".boolean_simple_type").on('click', function (e) {
 		alternateBooleanGlobalValue(global_var, this.parentNode);
 	});
-	ret.find( ".simple_var" ).on('click', function(e){
+	ret.find(".simple_var").on('click', function (e) {
 		enableGlobalValueUpdate(global_var, this.parentNode);
 	});
 
-	ret.find( ".boolean_vector_var" ).on('click', function(e){
+	ret.find(".boolean_vector_var").on('click', function (e) {
 		alternateBooleanGlobalVectorValue(global_var, $(this).data('index'), this.parentNode);
 	});
-	ret.find( ".vector_var" ).on('click', function(e){
+	ret.find(".vector_var").on('click', function (e) {
 		enableGlobalVectorValueUpdate(global_var, $(this).data('index'), this.parentNode);
 	});
-	ret.find( ".remove_global_vector_column" ).on('click', function(e){
+	ret.find(".remove_global_vector_column").on('click', function (e) {
 		removeGlobalColumnVector(global_var);
-		global_container.find( ".div_valor_var" ).html('');
+		global_container.find(".div_valor_var").html('');
 		renderValues(global_var, global_container);
 	});
-	ret.find( ".add_global_vector_column" ).on('click', function(e){
+	ret.find(".add_global_vector_column").on('click', function (e) {
 		addGlobalColumnVector(global_var);
-		global_container.find( ".div_valor_var" ).html('');
+		global_container.find(".div_valor_var").html('');
 		renderValues(global_var, global_container);
 	});
-	ret.find( ".remove_global_matrix_column" ).on('click', function(e){
+	ret.find(".remove_global_matrix_column").on('click', function (e) {
 		removeColumnGlobalMatrix(global_var);
-		global_container.find( ".div_valor_var" ).html('');
+		global_container.find(".div_valor_var").html('');
 		renderValues(global_var, global_container);
 	});
-	ret.find( ".add_global_matrix_column" ).on('click', function(e){
+	ret.find(".add_global_matrix_column").on('click', function (e) {
 		addColumnGlobalMatrix(global_var);
-		global_container.find( ".div_valor_var" ).html('');
+		global_container.find(".div_valor_var").html('');
 		renderValues(global_var, global_container);
 	});
-	ret.find( ".remove_global_matrix_line" ).on('click', function(e){
+	ret.find(".remove_global_matrix_line").on('click', function (e) {
 		removeLineGlobalMatrix(global_var);
-		global_container.find( ".div_valor_var" ).html('');
+		global_container.find(".div_valor_var").html('');
 		renderValues(global_var, global_container);
 	});
-	ret.find( ".add_global_matrix_line" ).on('click', function(e){
+	ret.find(".add_global_matrix_line").on('click', function (e) {
 		addLineGlobalMatrix(global_var);
-		global_container.find( ".div_valor_var" ).html('');
+		global_container.find(".div_valor_var").html('');
 		renderValues(global_var, global_container);
 	});
-	ret.find( ".boolean_matrix_var" ).on('click', function(e){
+	ret.find(".boolean_matrix_var").on('click', function (e) {
 		alternateBooleanGlobalMatrixValue(global_var, $(this).data('row'), $(this).data('index'), this.parentNode);
 	});
-	ret.find( ".matrix_var" ).on('click', function(e){
+	ret.find(".matrix_var").on('click', function (e) {
 		enableGlobalMatrixValueUpdate(global_var, $(this).data('row'), $(this).data('index'), this.parentNode);
 	});
-	global_container.find( ".div_valor_var" ).append(ret);
+	global_container.find(".div_valor_var").append(ret);
 
 
 	updateColumnsAndRowsText(global_container, global_var);
 
 }
 
-function addHandlers (global_container) {
-	var global_var = global_container.data('associatedOject'); 
+function addHandlers(global_container) {
+	var global_var = global_container.data('associatedOject');
 	// Manage constant option:
-	global_container.find( ".alternate_constant" ).on('click', function(e){
+	global_container.find(".alternate_constant").on('click', function (e) {
 		toggleConstant(global_var);
 
-		$( this ).removeClass( "on off" );
+		$(this).removeClass("on off");
 		if (global_var.is_constant) {
-			$( this ).addClass( "on" );
+			$(this).addClass("on");
 		} else {
-			$( this ).addClass( "off" );
+			$(this).addClass("off");
 		}
 	});
 
 	// Manage global name: 
-	global_container.find( ".enable_edit_name_parameter" ).on('click', function(e){
+	global_container.find(".enable_edit_name_parameter").on('click', function (e) {
 		enableNameUpdate(global_container);
 	});
 
 	// Menu to change type:
 	global_container.find('.ui.dropdown.global_type').dropdown({
-	    onChange: function(value, text, $selectedItem) {
-	    	if ($selectedItem.data('dimensions')) {
-	    		updateType(global_var, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
-	    	} else {
-	    		updateType(global_var, Types[$selectedItem.data('type')]);
-	    	}
+		onChange: function (value, text, $selectedItem) {
+			if ($selectedItem.data('dimensions')) {
+				updateType(global_var, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
+			} else {
+				updateType(global_var, Types[$selectedItem.data('type')]);
+			}
 
-	    	renderValues(global_var, global_container);
+			renderValues(global_var, global_container);
 
-	    }
+		}
 	});
 
 	// Remove global: 
-	global_container.find( ".remove_global" ).on('click', function(e){
+	global_container.find(".remove_global").on('click', function (e) {
 		removeGlobal(global_var, global_container);
 	});
 
 }
 
-function updateColumnsAndRowsText (global_container, global_var) {
+function updateColumnsAndRowsText(global_container, global_var) {
 	var prev = global_container.find('.text').text().split('[');
 	if (prev.length == 2) {
 		var ff = prev[0] + '[ ' + global_var.columns + ' ] ';
@@ -417,51 +423,51 @@ function updateColumnsAndRowsText (global_container, global_var) {
 	}
 }
 
-export function renderGlobal (global_var) {
+export function renderGlobal(global_var) {
+
+	var element = '<div class="ui label global_container pink"><i class="ui icon ellipsis vertical inverted"></i><div class="global_const">const: ';
 
-	var element = '<div class="ui label global_container"><div class="global_const">const: ';
+	element += '<i class="ui icon toggle ' + (global_var.is_constant ? "on" : "off") + ' alternate_constant"></i></div>';
 
-	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div>';
- 	
- 	element += '<div class="ui dropdown global_type">';
+	element += '<div class="ui dropdown global_type">';
 
-  	if (global_var.dimensions > 0) {
-  		element += '<div class="text">'+ i18n('ui:vector') + ':' + LocalizedStrings.getUI(global_var.type);
-  		for (var i = 0; i < global_var.dimensions; i ++) {
-  			element += ' [ <span class="dimensions_'+i+'"></span> ] ';
-  		}
-  		element += '</div>';
-  	} else {
-  		element += '<div class="text">' + LocalizedStrings.getUI(global_var.type.toLowerCase()) + '</div>';
-  	}
+	if (global_var.dimensions > 0) {
+		element += '<div class="text">' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(global_var.type);
+		for (var i = 0; i < global_var.dimensions; i++) {
+			element += ' [ <span class="dimensions_' + i + '"></span> ] ';
+		}
+		element += '</div>';
+	} else {
+		element += '<div class="text">' + LocalizedStrings.getUI(global_var.type.toLowerCase()) + '</div>';
+	}
 	element += '<div class="menu">';
 
 	for (var tm in Types) {
-  		if (tm == Types.VOID.toUpperCase()) {
-  			continue;
-  		}
-  		element += '<div class="item ' + (global_var.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
+		if (tm == Types.VOID.toUpperCase()) {
+			continue;
+		}
+		element += '<div class="item ' + (global_var.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="' + tm + '" >' + LocalizedStrings.getUI(tm.toLowerCase()) + '</div>';
 	}
 
-  	for (var tm in Types) {
-  		if (tm == Types.VOID.toUpperCase()) {
-  			continue;
-  		}
-  		element += '<div class="item">'
-	    	+ '<i class="dropdown icon"></i>'
-	    	+  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
-	      	+  '<div class="menu">'
-		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
-		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
-	      	+  '</div>'
-	    	+ '</div>';	
-  	}
+	for (var tm in Types) {
+		if (tm == Types.VOID.toUpperCase()) {
+			continue;
+		}
+		element += '<div class="item">'
+			+ '<i class="dropdown icon"></i>'
+			+ LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase())
+			+ '<div class="menu">'
+			+ '<div class="item" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] " data-type="' + tm + '" data-dimensions="1">[ ]</div>'
+			+ '<div class="item" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] [ ] " data-type="' + tm + '" data-dimensions="2">[ ] [ ] </div>'
+			+ '</div>'
+			+ '</div>';
+	}
 
-    element += '</div></div> <div class="editing_name_var"> <span class="span_name_variable enable_edit_name_parameter">'+global_var.name+'</span> </div> <span class="character_equals"> = </span> ';
+	element += '</div></div> <div class="editing_name_var"> <span class="span_name_variable enable_edit_name_parameter">' + global_var.name + '</span> </div> <span class="character_equals"> = </span> ';
 
-	element += '<div class="ui div_valor_var">'+global_var.value+'</div>';    
+	element += '<div class="ui div_valor_var">' + global_var.value + '</div>';
 
-	element += ' <i class="red icon times remove_global"></i></div>';
+	element += ' <i class="yellow inverted icon times remove_global"></i></div>';
 
 	var complete_element = $(element);
 
@@ -480,11 +486,13 @@ export function renderGlobal (global_var) {
 		complete_element.find('.dimensions_0').text(global_var.columns);
 		complete_element.find('.dimensions_1').text(global_var.rows);
 	}
+
+	return complete_element;
 }
 
 var opened_name_value_matrix_global_v = false;
 var opened_input_value_matrix_global_v = null;
-function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
+function enableGlobalMatrixValueUpdate(global_var, row, index, parent_node) {
 	if (opened_name_value_matrix_global_v) {
 		opened_input_value_matrix_global_v.focus();
 		return;
@@ -497,30 +505,30 @@ function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
 	var input_field;
 
 	if (global_var.type == Types.REAL) {
-		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[row][index].toFixed(1) + "' />" );
+		input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[row][index].toFixed(1) + "' />");
 		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[row][index] + "' />" );
+		input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[row][index] + "' />");
 		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	input_field.on('input', function() {
-	    var inputWidth = input_field.textWidth()+10;
-	    opened_input_value_matrix_global_v = input_field;
-	    input_field.focus();
+	input_field.on('input', function () {
+		var inputWidth = input_field.textWidth() + 10;
+		opened_input_value_matrix_global_v = input_field;
+		input_field.focus();
 
-	    var tmpStr = input_field.val();
+		var tmpStr = input_field.val();
 		input_field.val('');
 		input_field.val(tmpStr);
 
-	    input_field.css({
-	        width: inputWidth
-	    })
+		input_field.css({
+			width: inputWidth
+		})
 	}).trigger('input');
 
-	input_field.focusout(function() {
+	input_field.focusout(function () {
 		/// update array:
 		if (input_field.val().trim()) {
 			if (global_var.type == Types.REAL) {
@@ -554,9 +562,9 @@ function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
 		opened_input_value_matrix_global_v = false;
 	});
 
-	input_field.on('keydown', function(e) {
+	input_field.on('keydown', function (e) {
 		var code = e.keyCode || e.which;
-		if(code == 13) {
+		if (code == 13) {
 			if (input_field.val().trim()) {
 				if (global_var.type == Types.REAL) {
 					global_var.value[row][index] = parseFloat(input_field.val().trim());
@@ -588,7 +596,7 @@ function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
 			opened_name_value_matrix_global_v = false;
 			opened_input_value_matrix_global_v = false;
 		}
-		if(code == 27) {
+		if (code == 27) {
 			if (global_var.type == Types.REAL) {
 				parent_node.find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
 			} else {
@@ -607,7 +615,7 @@ function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
 
 var opened_name_value_global_var = false;
 var opened_input_value_global_ar = null;
-function enableGlobalValueUpdate (global_var, parent_node) {
+function enableGlobalValueUpdate(global_var, parent_node) {
 	if (opened_name_value_global_var) {
 		opened_input_value_global_ar.focus();
 		return;
@@ -620,43 +628,43 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 	var input_field;
 
 	if (global_var.type == Types.REAL) {
-		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value.toFixed(1) + "' />" );
+		input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value.toFixed(1) + "' />");
 		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value + "' />" );
+		input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value + "' />");
 		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	input_field.on('input', function() {
-	    var inputWidth = input_field.textWidth()+10;
-	    opened_input_value_global_ar = input_field;
-	    input_field.focus();
+	input_field.on('input', function () {
+		var inputWidth = input_field.textWidth() + 10;
+		opened_input_value_global_ar = input_field;
+		input_field.focus();
 
-	    var tmpStr = input_field.val();
+		var tmpStr = input_field.val();
 		input_field.val('');
 		input_field.val(tmpStr);
 
-	    input_field.css({
-	        width: inputWidth
-	    })
+		input_field.css({
+			width: inputWidth
+		})
 	}).trigger('input');
 
-	input_field.focusout(function() {
+	input_field.focusout(function () {
 		/// update array:
 		if (input_field.val().trim()) {
 			if (global_var.type == Types.REAL) {
 				global_var.value = parseFloat(input_field.val().trim());
 				parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
-			} else{
+			} else {
 				if (global_var.type == Types.INTEGER) {
 					global_var.value = parseInt(input_field.val().trim());
 				} else {
 					global_var.value = input_field.val().trim();
 				}
 				parent_node.find('.span_value_variable').text(global_var.value);
-				
+
 			}
 		} else {
 			if (global_var.type == Types.REAL) {
@@ -678,9 +686,9 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 
 	});
 
-	input_field.on('keydown', function(e) {
+	input_field.on('keydown', function (e) {
 		var code = e.keyCode || e.which;
-		if(code == 13) {
+		if (code == 13) {
 			if (input_field.val().trim()) {
 				if (global_var.type == Types.REAL) {
 					global_var.value = parseFloat(input_field.val().trim());
@@ -712,10 +720,10 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 			opened_input_value_global_ar = false;
 
 		}
-		if(code == 27) {
+		if (code == 27) {
 			if (global_var.type == Types.REAL) {
 				parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
-			} else{
+			} else {
 				parent_node.find('.span_value_variable').text(global_var.value);
 			}
 			input_field.off();
@@ -733,9 +741,9 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 
 var opened_name_global = false;
 var opened_input_global = null;
-function enableNameUpdate (global_container) {
+function enableNameUpdate(global_container) {
 
-	var global_var = global_container.data('associatedOject'); 
+	var global_var = global_container.data('associatedOject');
 
 	if (opened_name_global) {
 		opened_input_global.focus();
@@ -744,20 +752,20 @@ function enableNameUpdate (global_container) {
 	opened_name_global = true;
 
 	global_container.find('.span_name_variable').text('');
-	var input_name = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+global_var.name+"' />" );
+	var input_name = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='" + global_var.name + "' />");
 	input_name.insertBefore(global_container.find('.span_name_variable'));
 
-	input_name.on('input', function() {
-	    var inputWidth = input_name.textWidth()+10;
-	    opened_input_global = input_name;
-	    opened_input_global.focus();
+	input_name.on('input', function () {
+		var inputWidth = input_name.textWidth() + 10;
+		opened_input_global = input_name;
+		opened_input_global.focus();
 
-	    opened_input_global.css({
-	        width: inputWidth
-	    })
+		opened_input_global.css({
+			width: inputWidth
+		})
 	}).trigger('input');
 
-	input_name.focusout(function() {
+	input_name.focusout(function () {
 		/// update array:
 		if (input_name.val().trim().length > 0) {
 			updateName(global_var, input_name.val().trim());
@@ -773,9 +781,9 @@ function enableNameUpdate (global_container) {
 		opened_input_global = false;
 	});
 
-	input_name.on('keydown', function(e) {
+	input_name.on('keydown', function (e) {
 		var code = e.keyCode || e.which;
-		if(code == 13) {
+		if (code == 13) {
 			if (input_name.val().trim()) {
 				updateName(global_var, input_name.val().trim());
 				global_container.find('.span_name_variable').text(global_var.name);
@@ -789,7 +797,7 @@ function enableNameUpdate (global_container) {
 			opened_name_global = false;
 			opened_input_global = false;
 		}
-		if(code == 27) {
+		if (code == 27) {
 
 			global_container.find('.span_name_variable').text(global_var.name);
 			input_name.off();
@@ -802,13 +810,13 @@ function enableNameUpdate (global_container) {
 	});
 
 	input_name.select();
-	
+
 }
 
 
 var opened_name_value_vector_global_ = false;
 var opened_input_value_vector_global_ = null;
-function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
+function enableGlobalVectorValueUpdate(global_var, index, parent_node) {
 	if (opened_name_value_vector_global_) {
 		opened_input_value_vector_global_.focus();
 		return;
@@ -821,30 +829,30 @@ function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 	var input_field;
 
 	if (global_var.type == Types.REAL) {
-		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[index].toFixed(1) + "' />" );
+		input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[index].toFixed(1) + "' />");
 		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[index] + "' />" );
+		input_field = $("<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[index] + "' />");
 		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	input_field.on('input', function() {
-	    var inputWidth = input_field.textWidth()+10;
-	    opened_input_value_vector_global_ = input_field;
-	    input_field.focus();
+	input_field.on('input', function () {
+		var inputWidth = input_field.textWidth() + 10;
+		opened_input_value_vector_global_ = input_field;
+		input_field.focus();
 
-	    var tmpStr = input_field.val();
+		var tmpStr = input_field.val();
 		input_field.val('');
 		input_field.val(tmpStr);
 
-	    input_field.css({
-	        width: inputWidth
-	    })
+		input_field.css({
+			width: inputWidth
+		})
 	}).trigger('input');
 
-	input_field.focusout(function() {
+	input_field.focusout(function () {
 		/// update array:
 		if (input_field.val().trim()) {
 			if (global_var.type == Types.REAL) {
@@ -881,9 +889,9 @@ function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 		opened_input_value_vector_global_ = false;
 	});
 
-	input_field.on('keydown', function(e) {
+	input_field.on('keydown', function (e) {
 		var code = e.keyCode || e.which;
-		if(code == 13) {
+		if (code == 13) {
 			if (input_field.val().trim()) {
 				if (global_var.type == Types.REAL) {
 					global_var.value[index] = parseFloat(input_field.val().trim());
@@ -918,7 +926,7 @@ function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 			opened_name_value_vector_global_ = false;
 			opened_input_value_vector_global_ = false;
 		}
-		if(code == 27) {
+		if (code == 27) {
 			if (global_var.type == Types.REAL) {
 				parent_node.find('.span_value_variable').text(global_var.value[index].toFixed(1));
 			} else {
@@ -937,11 +945,11 @@ function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 }
 
 
-$.fn.textWidth = function(text, font) {
-    
-    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
-    
-    $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));
-    
-    return $.fn.textWidth.fakeEl.width();
+$.fn.textWidth = function (text, font) {
+
+	if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
+
+	$.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));
+
+	return $.fn.textWidth.fakeEl.width();
 };

js/visualUI/variables.js

@@ -11,7 +11,7 @@ import '../semantic/semantic.min.js';
 
 var counter_new_variables = 0;
 
-export function addVariable (function_obj, function_container) {
+export function addVariable (function_obj, function_container, is_in_click = false) {
 	var new_var = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI('new_variable') + '_' + counter_new_variables, 1);
 	if (function_obj.variables_list == null) {
 		function_obj.variables_list = [];
@@ -20,7 +20,12 @@ export function addVariable (function_obj, function_container) {
 
 	counter_new_variables ++;
 
-	renderVariable(function_container, new_var, function_obj);
+	var newe = renderVariable(function_container, new_var, function_obj);
+
+	if (is_in_click) {
+		newe.css('display', 'none');
+		newe.fadeIn();
+	}
 }
 
 function updateName (variable_obj, new_name) {
@@ -28,13 +33,17 @@ function updateName (variable_obj, new_name) {
 }
 
 function removeVariable (variable_obj, variable_container) {
-	var function_associated = $(variable_container).data('associatedFunction');
+	var function_associated = variable_container.data('associatedFunction');
 
 	var index = function_associated.variables_list.indexOf(variable_obj);
 	if (index > -1) {
+	  window.insertContext = true;
+	  delete function_associated.variables_list[index];
 	  function_associated.variables_list.splice(index, 1);
 	}
-	$(variable_container).remove();
+	variable_container.children().off();
+	variable_container.off();
+	variable_container.fadeOut();
 }
 
 function updateType (variable_obj, new_type, new_dimensions = 0) {
@@ -52,25 +61,25 @@ function updateType (variable_obj, new_type, new_dimensions = 0) {
 function addHandlers (variable_obj, variable_container) {
 
 	// Manage variable name: 
-	$( variable_container ).find( ".enable_edit_name_variable" ).on('click', function(e){
+	variable_container.find( ".enable_edit_name_variable" ).on('click', function(e){
 		enableNameUpdate(variable_obj, variable_container);
 	});
 
 	// Menu to change type:
-	$( variable_container ).find('.ui.dropdown.variable_type').dropdown({
+	variable_container.find('.ui.dropdown.variable_type').dropdown({
 	    onChange: function(value, text, $selectedItem) {
-	    	if ($($selectedItem).data('dimensions')) {
-	    		updateType(variable_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+	    	if ($selectedItem.data('dimensions')) {
+	    		updateType(variable_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
 	    	} else {
-	    		updateType(variable_obj, Types[$($selectedItem).data('type')]);
+	    		updateType(variable_obj, Types[$selectedItem.data('type')]);
 	    	}
 
 	    	renderValues(variable_obj, variable_container);
 	    }
 	});
 
-	// Remove global: 
-	$( variable_container ).find( ".remove_variable" ).on('click', function(e){
+	// Remove variable: 
+	variable_container.find( ".remove_variable" ).on('click', function(e){
 		removeVariable(variable_obj, variable_container);
 	});
 
@@ -79,7 +88,7 @@ function addHandlers (variable_obj, variable_container) {
 
 export function renderVariable (function_container, new_var, function_obj) {
 
-	var element = '<div class="ui label variable_container">';
+	var element = '<div class="ui label variable_container pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
 	element += '<div class="ui dropdown variable_type">';
 
@@ -92,7 +101,7 @@ export function renderVariable (function_container, new_var, function_obj) {
   	} else {
   		element += '<div class="text">' + LocalizedStrings.getUI(new_var.type.toLowerCase()) + '</div>';
   	}
-	element += '<i class="dropdown icon"></i><div class="menu">';
+	element += '<div class="menu">';
 
 	for (var tm in Types) {
   		if (tm == Types.VOID.toUpperCase()) {
@@ -106,7 +115,7 @@ export function renderVariable (function_container, new_var, function_obj) {
   			continue;
   		}
   		element += '<div class="item">'
-	    	+ '<i class="dropdown icon"></i>'
+  			+ '<i class="dropdown icon"></i>'
 	    	+  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
 	      	+  '<div class="menu">'
 		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
@@ -117,21 +126,37 @@ export function renderVariable (function_container, new_var, function_obj) {
 
     element += '</div></div> ';
 
-    element += '<span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_variable"></i>';
+    element += '<div class="editing_name_var"><span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> </div>';
 
-	element += ' = <div class="ui div_valor_var">'+new_var.value+'</div>';    
+	element += ' <span class="character_equals"> = </span> <div class="ui div_valor_var">'+new_var.value+'</div>';    
 
-	element += ' <i class="red icon times remove_variable"></i></div>';
+	element += ' <i class="yellow inverted icon times remove_variable"></i></div>';
 
 	element = $(element);
 
-	$(element).data('associatedFunction', function_obj);
+	element.data('associatedFunction', function_obj);
 
-	$(function_container).find('.variables_list_div').append(element);
+	function_container.find('.variables_list_div').append(element);
 
 	addHandlers(new_var, element);
 
 	renderValues(new_var, element);
+
+	return element;
+}
+
+function updateColumnsAndRowsText (variable_container, variable_var) {
+	var prev = variable_container.find('.text').text().split('[');
+	if (prev.length == 2) {
+		var ff = prev[0] + '[ ' + variable_var.columns + ' ] ';
+		variable_container.find('.text').empty();
+		variable_container.find('.text').text(ff);
+	}
+	if (prev.length == 3) {
+		var ff = prev[0] + '[ ' + variable_var.columns + ' ] [ ' + variable_var.rows + ' ] ';
+		variable_container.find('.text').empty();
+		variable_container.find('.text').text(ff);
+	}
 }
 
 function renderValues (new_var, variable_container) {
@@ -141,12 +166,12 @@ function renderValues (new_var, variable_container) {
 
 	if (new_var.dimensions == 0) {
 		if (new_var.type == Types.REAL) {
-			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+new_var.value.toFixed(1)+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+new_var.value.toFixed(1)+'</span> </div> ';
 		} else {
 			if (new_var.type == Types.BOOLEAN) {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+new_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function boolean_simple_type"></i></div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+LocalizedStrings.getUI(new_var.value)+'</span> </div> ';
 			} else {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+new_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+new_var.value+'</span> </div> ';
 			}
 		}
 	} else {
@@ -161,7 +186,7 @@ function renderValues (new_var, variable_container) {
 			} else {
 				for (var k = 0; k < new_var.columns; k++) {
 					if (new_var.type == Types.BOOLEAN) {
-						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+new_var.value[k]+'</span></td>';
+						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+LocalizedStrings.getUI(new_var.value[k])+'</span></td>';
 					} else {
 						ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+new_var.value[k]+'</span>'+'</td>';
 					}
@@ -189,7 +214,7 @@ function renderValues (new_var, variable_container) {
     				ret += '<tr>';
     				for (var k = 0; k < new_var.columns; k++) {
     					if (new_var.type == Types.BOOLEAN) { 
-    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+new_var.value[l][k]+'</span></td>';
+    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+LocalizedStrings.getUI(new_var.value[l][k])+'</span></td>';
     					} else {
     						ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+new_var.value[l][k]+'</span></td>';
     					}
@@ -267,11 +292,13 @@ function renderValues (new_var, variable_container) {
 	});
 	$( variable_container ).find( ".div_valor_var" ).append(ret);
 
+	updateColumnsAndRowsText(variable_container, new_var);
+
 }
 
 function alternateBooleanMatrixValue (var_obj, row, index, value_container) {
 	var_obj.value[row][index] = !var_obj.value[row][index];
-	$(value_container).find('.span_value_variable').text(var_obj.value[row][index]);
+	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(var_obj.value[row][index]));
 }
 
 function addLineMatrix (var_obj) {
@@ -383,12 +410,12 @@ function removeColumnVector (var_obj) {
 
 function alternateBooleanValue (var_obj, value_container) {
 	var_obj.value = !var_obj.value;
-	$(value_container).find('.span_value_variable').text(var_obj.value);
+	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(var_obj.value));
 }
 
 function alternateBooleanVectorValue (var_obj, index, value_container) {
 	var_obj.value[index] = !var_obj.value[index];
-	$(value_container).find('.span_value_variable').text(var_obj.value[index]);
+	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(var_obj.value[index]));
 }
 
 function updateInitialValues (variable_obj) {
@@ -446,152 +473,197 @@ var opened_name_value_vector_global_ = false;
 var opened_input_value_vector_global_ = null;
 function enableVectorValueUpdate (var_obj, index, parent_node) {
 	if (opened_name_value_vector_global_) {
-		$(opened_input_value_vector_global_).focus();
+		opened_input_value_vector_global_.focus();
 		return;
 	}
+	parent_node = $(parent_node);
 	opened_name_value_vector_global_ = true;
 
-	$(parent_node).find('.span_value_variable').text('');
+	parent_node.find('.span_value_variable').text('');
+
+	var input_field;
 
 	if (var_obj.type == Types.REAL) {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ var_obj.value[index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[index].toFixed(1) + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ var_obj.value[index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[index] + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_value_vector_global_ = this;
-	    $(this).focus();
+	input_field.on('input', function() {
+	    var inputWidth = input_field.textWidth()+10;
+	    opened_input_value_vector_global_ = input_field;
+	    input_field.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	    var tmpStr = input_field.val();
+		input_field.val('');
+		input_field.val(tmpStr);
 
-	    $(this).css({
+	    input_field.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_field.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if (input_field.val().trim()) {
 			if (var_obj.type == Types.REAL) {
-				var_obj.value[index] = parseFloat($(this).val().trim());
+				var_obj.value[index] = parseFloat(input_field.val().trim());
 
-				$(parent_node).find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+				parent_node.find('.span_value_variable').text(var_obj.value[index].toFixed(1));
 			} else {
 
 				if (var_obj.type == Types.INTEGER) {
-					var_obj.value[index] = parseInt($(this).val().trim());
+					var_obj.value[index] = parseInt(input_field.val().trim());
 				} else {
-					var_obj.value[index] = $(this).val().trim();
+					var_obj.value[index] = input_field.val().trim();
 				}
 
-				$(parent_node).find('.span_value_variable').text(var_obj.value[index]);
+				parent_node.find('.span_value_variable').text(var_obj.value[index]);
 
 			}
+		} else {
+			if (var_obj.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+			} else {
+				parent_node.find('.span_value_variable').text(var_obj.value[index]);
+			}
+		}
+		if (var_obj.type == Types.TEXT) {
+			var_obj.value[index] = input_field.val();
+			parent_node.find('.span_value_variable').text(var_obj.value[index]);
 		}
-		$(this).remove();
+		input_field.off();
+		input_field.remove();
 
 		/// update elements:
 		opened_name_value_vector_global_ = false;
 		opened_input_value_vector_global_ = false;
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_field.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
+			if (input_field.val().trim()) {
 				if (var_obj.type == Types.REAL) {
-					var_obj.value[index] = parseFloat($(this).val().trim());
+					var_obj.value[index] = parseFloat(input_field.val().trim());
 
-					$(parent_node).find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+					parent_node.find('.span_value_variable').text(var_obj.value[index].toFixed(1));
 				} else {
 
 					if (var_obj.type == Types.INTEGER) {
-						var_obj.value[index] = parseInt($(this).val().trim());
+						var_obj.value[index] = parseInt(input_field.val().trim());
 					} else {
-						var_obj.value[index] = $(this).val().trim();
+						var_obj.value[index] = input_field.val().trim();
 					}
 
-					$(parent_node).find('.span_value_variable').text(var_obj.value[index]);
+					parent_node.find('.span_value_variable').text(var_obj.value[index]);
 
 				}
+			} else {
+				if (var_obj.type == Types.REAL) {
+					parent_node.find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+				} else {
+					parent_node.find('.span_value_variable').text(var_obj.value[index]);
+				}
 			}
-			$(this).remove();
+			if (var_obj.type == Types.TEXT) {
+				var_obj.value[index] = input_field.val();
+				parent_node.find('.span_value_variable').text(var_obj.value[index]);
+			}
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_vector_global_ = false;
 			opened_input_value_vector_global_ = false;
 		}
 		if(code == 27) {
-			if (global_var.type == Types.REAL) {
-				$(parent_node).find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+			if (var_obj.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(var_obj.value[index].toFixed(1));
 			} else {
-				$(parent_node).find('.span_value_variable').text(var_obj.value[index]);
+				parent_node.find('.span_value_variable').text(var_obj.value[index]);
 			}
-
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_vector_global_ = false;
 			opened_input_value_vector_global_ = false;
 		}
 	});
+
+	input_field.select();
 }
 
 var opened_name_value_global_var = false;
 var opened_input_value_global_ar = null;
 function enableValueUpdate (var_obj, parent_node) {
 	if (opened_name_value_global_var) {
-		$(opened_input_value_global_ar).focus();
+		opened_input_value_global_ar.focus();
 		return;
 	}
+	parent_node = $(parent_node);
 	opened_name_value_global_var = true;
 
-	$(parent_node).find('.span_value_variable').text('');
+	var input_field;
+
+	parent_node.find('.span_value_variable').text('');
 	if (var_obj.type == Types.REAL) {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ var_obj.value.toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value.toFixed(1) + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ var_obj.value + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_value_global_ar = this;
-	    $(this).focus();
+	input_field.on('input', function() {
+	    var inputWidth = input_field.textWidth()+10;
+	    opened_input_value_global_ar = input_field;
+	    input_field.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	    var tmpStr = input_field.val();
+		input_field.val('');
+		input_field.val(tmpStr);
 
-	    $(this).css({
+	    input_field.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_field.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if (input_field.val().trim()) {
 			if (var_obj.type == Types.REAL) {
-				var_obj.value = parseFloat($(this).val().trim());
-				$(parent_node).find('.span_value_variable').text(var_obj.value.toFixed(1));
+				var_obj.value = parseFloat(input_field.val().trim());
+				parent_node.find('.span_value_variable').text(var_obj.value.toFixed(1));
 			} else{
 				if (var_obj.type == Types.INTEGER) {
-					var_obj.value = parseInt($(this).val().trim());
+					var_obj.value = parseInt(input_field.val().trim());
 				} else {
-					var_obj.value = $(this).val().trim();
+					var_obj.value = input_field.val().trim();
 				}
-				$(parent_node).find('.span_value_variable').text(var_obj.value);
+				parent_node.find('.span_value_variable').text(var_obj.value);
 				
 			}
+		} else {
+			if (var_obj.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(var_obj.value.toFixed(1));
+			} else {
+				parent_node.find('.span_value_variable').text(var_obj.value);
+			}
 		}
-		$(this).remove();
+		if (var_obj.type == Types.TEXT) {
+			var_obj.value = input_field.val();
+			parent_node.find('.span_value_variable').text(var_obj.value);
+		}
+		input_field.off();
+		input_field.remove();
 
 		/// update elements:
 		opened_name_value_global_var = false;
@@ -599,23 +671,34 @@ function enableValueUpdate (var_obj, parent_node) {
 
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_field.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
+			if (input_field.val().trim()) {
 				if (var_obj.type == Types.REAL) {
-					var_obj.value = parseFloat($(this).val().trim());
-					$(parent_node).find('.span_value_variable').text(var_obj.value.toFixed(1));
+					var_obj.value = parseFloat(input_field.val().trim());
+					parent_node.find('.span_value_variable').text(var_obj.value.toFixed(1));
 				} else{
 					if (var_obj.type == Types.INTEGER) {
-						var_obj.value = parseInt($(this).val().trim());
+						var_obj.value = parseInt(input_field.val().trim());
 					} else {
-						var_obj.value = $(this).val().trim();
+						var_obj.value = input_field.val().trim();
 					}
-					$(parent_node).find('.span_value_variable').text(var_obj.value);
+					parent_node.find('.span_value_variable').text(var_obj.value);
 				}
+			} else {
+				if (var_obj.type == Types.REAL) {
+					parent_node.find('.span_value_variable').text(var_obj.value.toFixed(1));
+				} else {
+					parent_node.find('.span_value_variable').text(var_obj.value);
+				}
+			}
+			if (var_obj.type == Types.TEXT) {
+				var_obj.value = input_field.val();
+				parent_node.find('.span_value_variable').text(var_obj.value);
 			}
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_global_var = false;
@@ -624,18 +707,20 @@ function enableValueUpdate (var_obj, parent_node) {
 		}
 		if(code == 27) {
 			if (var_obj.type == Types.REAL) {
-				$(parent_node).find('.span_value_variable').text(var_obj.value.toFixed(1));
+				parent_node.find('.span_value_variable').text(var_obj.value.toFixed(1));
 			} else{
-				$(parent_node).find('.span_value_variable').text(var_obj.value);
+				parent_node.find('.span_value_variable').text(var_obj.value);
 			}
-
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_global_var = false;
 			opened_input_value_global_ar = false;
 		}
 	});
+
+	input_field.select();
 }
 
 var opened_name_global = false;
@@ -643,49 +728,59 @@ var opened_input_global = null;
 function enableNameUpdate (variable_obj, variable_container) {
 
 	if (opened_name_global) {
-		$(opened_input_global).focus();
+		opened_input_global.focus();
 		return;
 	}
 	opened_name_global = true;
 
-	$( variable_container ).find('.span_name_variable').text('');
-	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+variable_obj.name+"' />" ).insertBefore($(variable_container).find('.span_name_variable'));
+	variable_container.find('.span_name_variable').text('');
+
+	var input_name;
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_global = this;
-	    $(this).focus();
+	input_name = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+variable_obj.name+"' />" );
+	input_name.insertBefore(variable_container.find('.span_name_variable'));
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	input_name.on('input', function() {
+	    var inputWidth = input_name.textWidth()+10;
+	    opened_input_global = input_name;
+	    input_name.focus();
 
-	    $(this).css({
+	    var tmpStr = input_name.val();
+		input_name.val('');
+		input_name.val(tmpStr);
+
+	    input_name.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_name.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
-			updateName(variable_obj, $(this).val().trim());
-			$(variable_container).find('.span_name_variable').text(variable_obj.name);
+		if (input_name.val().trim().length > 0) {
+			updateName(variable_obj, input_name.val().trim());
+			variable_container.find('.span_name_variable').text(variable_obj.name);
+		} else {
+			variable_container.find('.span_name_variable').text(variable_obj.name);
 		}
-		$(this).remove();
+		input_name.off();
+		input_name.remove();
 
 		/// update elements:
 		opened_name_global = false;
 		opened_input_global = false;
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_name.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
-				updateName(variable_obj, $(this).val().trim());
-				$(variable_container).find('.span_name_variable').text(variable_obj.name);
+			if (input_name.val().trim().length > 0) {
+				updateName(variable_obj, input_name.val().trim());
+				variable_container.find('.span_name_variable').text(variable_obj.name);
+			} else {
+				variable_container.find('.span_name_variable').text(variable_obj.name);
 			}
-			$(this).remove();
+			input_name.off();
+			input_name.remove();
 
 			/// update elements:
 			opened_name_global = false;
@@ -693,15 +788,17 @@ function enableNameUpdate (variable_obj, variable_container) {
 		}
 		if(code == 27) {
 
-			$(variable_container).find('.span_name_variable').text(variable_obj.name);
-
-			$(this).remove();
+			variable_container.find('.span_name_variable').text(variable_obj.name);
+			input_name.off();
+			input_name.remove();
 
 			/// update elements:
 			opened_name_global = false;
 			opened_input_global = false;
 		}
 	});
+
+	input_name.select();
 	
 }
 
@@ -710,76 +807,103 @@ var opened_name_value_matrix_global_v = false;
 var opened_input_value_matrix_global_v = null;
 function enableMatrixValueUpdate (var_obj, row, index, parent_node) {
 	if (opened_name_value_matrix_global_v) {
-		$(opened_input_value_matrix_global_v).focus();
+		opened_input_value_matrix_global_v.focus();
 		return;
 	}
+	parent_node = $(parent_node);
 	opened_name_value_matrix_global_v = true;
 
-	$(parent_node).find('.span_value_variable').text('');
+	parent_node.find('.span_value_variable').text('');
+
+	var input_field;
 
 	if (var_obj.type == Types.REAL) {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ var_obj.value[row][index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[row][index].toFixed(1) + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ var_obj.value[row][index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[row][index] + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_value_matrix_global_v = this;
-	    $(this).focus();
+	input_field.on('input', function() {
+	    var inputWidth = input_field.textWidth()+10;
+	    opened_input_value_matrix_global_v = input_field;
+	    input_field.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	    var tmpStr = input_field.val();
+		input_field.val('');
+		input_field.val(tmpStr);
 
-	    $(this).css({
+	    input_field.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_field.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if (input_field.val().trim()) {
 			if (var_obj.type == Types.REAL) {
-				var_obj.value[row][index] = parseFloat($(this).val().trim());
+				var_obj.value[row][index] = parseFloat(input_field.val().trim());
 
-				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
 			} else {
 				if (var_obj.type == Types.INTEGER) {
-					var_obj.value[row][index] = parseInt($(this).val().trim());
+					var_obj.value[row][index] = parseInt(input_field.val().trim());
 				} else {
-					var_obj.value[row][index] = $(this).val().trim();
+					var_obj.value[row][index] = input_field.val().trim();
 				}
-				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index]);
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
 			}
+		} else {
+			if (var_obj.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+			} else {
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
+			}
+		}
+		if (var_obj.type == Types.TEXT) {
+			var_obj.value[row][index] = input_field.val();
+			parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
 		}
-		$(this).remove();
+		input_field.off();
+		input_field.remove();
 
 		/// update elements:
 		opened_name_value_matrix_global_v = false;
 		opened_input_value_matrix_global_v = false;
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_field.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
+			if (input_field.val().trim()) {
 				if (var_obj.type == Types.REAL) {
-					var_obj.value[row][index] = parseFloat($(this).val().trim());
+					var_obj.value[row][index] = parseFloat(input_field.val().trim());
 
-					$(parent_node).find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+					parent_node.find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
 				} else {
 					if (var_obj.type == Types.INTEGER) {
-						var_obj.value[row][index] = parseInt($(this).val().trim());
+						var_obj.value[row][index] = parseInt(input_field.val().trim());
 					} else {
-						var_obj.value[row][index] = $(this).val().trim();
+						var_obj.value[row][index] = input_field.val().trim();
 					}
-					$(parent_node).find('.span_value_variable').text(var_obj.value[row][index]);
+					parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
+				}
+			} else {
+				if (var_obj.type == Types.REAL) {
+					parent_node.find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+				} else {
+					parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
 				}
 			}
-			$(this).remove();
+			if (var_obj.type == Types.TEXT) {
+				var_obj.value[row][index] = input_field.val();
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
+			}
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_matrix_global_v = false;
@@ -787,16 +911,18 @@ function enableMatrixValueUpdate (var_obj, row, index, parent_node) {
 		}
 		if(code == 27) {
 			if (var_obj.type == Types.REAL) {
-				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
 			} else {
-				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index]);
+				parent_node.find('.span_value_variable').text(var_obj.value[row][index]);
 			}
-
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_matrix_global_v = false;
 			opened_input_value_matrix_global_v = false;
 		}
 	});
+
+	input_field.select();
 }

~index.html

@@ -1,131 +1,127 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title></title>
-    <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
-    <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
-    <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
-    <script src="js/jquery-3.3.1.min.js"></script>
-
-    <script src="build/ivprog.bundle.js"></script>
-
-    <script src="js/iassign-integration-functions.js"></script>
-    <script src="i18n/i18n-engine.js"></script>
-
-    <script src="js/jquery-ui.js"></script>
-    <script src="js/Sortable.js"></script>
-    
-  </head>
-  <body>
-   
-    <div class="ui one column doubling stackable grid container">
-      <div class="column">
-        <div class="ui container main_title">
-          <h2>iVProg</h2>
-          <span>interactive coding</span>
-        </div>
 
-        
-
-        <div class="ui container content_margin">
-          <div class="content_sub_margin">
-              <div class="blue ui ivprog_format buttons">
-                <button class="ui button active visual_coding_button">Visual</button>
-                <button class="ui button textual_coding_button">Textual</button>
-              </div>
-
-              <a class="ivprog_format_info">
-                <i class="circular inverted some-wrapping-div teal info icon small label ivprog_format_info popup"></i>
-              </a>
-              <div class="ui custom popup">
-                Choice how you prefer to develop. If disabled, teacher doesn't allow this change. <a href="#">See documentation about it.</a>
-              </div>
-            </div>
-          </div>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta http-equiv="cache-control" content="no-cache">
+  <meta http-equiv="cache-control" content="no-store">
+  <meta http-equiv="cache-control" content="max-age=0">
+  <meta http-equiv="expires" content="-1">
+  <meta http-equiv="pragma" content="no-cache">
+  <title></title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
+  <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
+  <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
+  <script src="js/jquery-3.3.1.min.js"></script>
+  <script src="js/iassign-integration-functions.js"></script>
+  <script src="build/ivprog.bundle.js"></script>
+  <script src="js/semantic/semantic.min.js"></script>
+  <script src="js/semantic/semantic-buttons.js"></script>
 
+  <script src="js/jquery-ui.js"></script>
+  <script src="js/Sortable.js"></script>
+
+</head>
+
+<body>
+
+  <div class="ui height_100 add_accordion" id="ui_main_div">
+
+    <div class="title default_visual_title">
+      <i class="dropdown icon"></i>
 
-      </div>
-      
     </div>
 
-    
-
-    
-
-    <div class="ui raised container segment div_to_body">
-
-      <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -10px;">
-        <a class="item">
-          <i class="file icon"></i>
-        </a>
-        <a class="item">
-          <i class="save icon"></i>
-        </a>
-        <a class="item">
-          <i class="upload icon"></i>
-        </a>
-        <a class="item">
-          <i class="download icon"></i>
-        </a>
-        <a class="item undo_button disabled">
-          <i class="undo icon"></i>
-        </a>
-        <a class="item">
-          <i class="redo icon"></i>
-        </a>
-        <a class="item run_button">
-          <i class="play icon"></i>
-        </a>
-        <a class="item">
-          <i class="stop icon"></i>
-        </a>
-        <a class="item">
-          <i class="help icon"></i>
-        </a>
+    <div class="content height_100">
+
+      <div class="ui container main_title only_in_frame">
+        <h2>iVProg</h2>
+        <span class="subtext" style="display: inline;">interactive coding</span>
       </div>
 
-      <div class="ui one column container segment ivprog_visual_panel loading">
-        <div class="program_signature"><data class="i18n" value="ui:program">program</data> { </div>
+      <div class="ui raised container segment div_to_body">
+
+        <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
+          <a class="item active visual_coding_button">
+            <i class="window maximize outline icon"></i>
+          </a>
+          <a class="item textual_coding_button">
+            <i class="code icon"></i>
+          </a>
+          <a class="item upload_file_button disabled">
+            <i class="upload icon"></i>
+          </a>
+          <a class="item download_file_button disabled">
+            <i class="download icon"></i>
+          </a>
+          <a class="item undo_button disabled">
+            <i class="undo icon"></i>
+          </a>
+          <a class="item redo_button disabled">
+            <i class="redo icon"></i>
+          </a>
+          <a class="item run_button">
+            <i class="play icon"></i>
+          </a>
+          <a class="item assessment assessment_button">
+            <i class="check icon"></i>
+          </a>
+          <!--<a class="item expand_button">
+          <i class="expand arrows alternate icon"></i>
+        </a>-->
+          <a class="item help_button">
+            <i class="help icon"></i>
+          </a>
+        </div>
 
-        <div class="global_var">
-          
-          <div class="ui icon button add-globalVar-button add_global_button"><i class="icon superscript"></i></div>
+        <div class="ui one column container segment ivprog_visual_panel loading">
 
-          <div class="list_globals"></div>
+          <div class="global_var">
+            <i class="icon plus circle purple add_global_button"></i>
+            <i class="icon circle white back"></i>
 
-        </div>
+            <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
 
-        <div class="all_functions list-group" id="listWithHandle">
+            <div class="list_globals" id="listGlobalsHandle"></div>
+
+          </div>
+
+          <div class="all_functions list-group" id="listWithHandle">
+
+          </div>
 
-        </div>
 
+          <div class="ui teal small labeled icon button add_function_button">
+            <data class="i18n" value="ui:btn_function">Function</data>
+            <i class="add icon"></i>
+          </div>
+          <div class="program_final"></div>
 
-        <div class="ui teal small labeled icon button add_function_button">
-          <data class="i18n" value="ui:btn_function">Function</data>
-          <i class="add icon"></i>
         </div>
-        <div class="program_final">}</div>
 
-      </div>
 
+        <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
+          <textarea class="ivprog_textual_code" readonly></textarea>
+        </div>
 
-      <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
-        <textarea class="ivprog_textual_code" disabled></textarea>
-      </div>
-      <div id='ivprog-term' class="six column wide" style="display: none">
+        <div id='ivprog-term' class="six column wide">
+          <div class="div_toggle_console"><i class="inverted terminal icon green button_toggle_console"></i></div>
+        </div>
       </div>
-      
+
     </div>
 
-    <script>
-      $(document).ready(() => {
-        ivprogCore.initVisualUI();
-      });
-    </script>
+  </div>
 
+  <script>
+    $(document).ready(() => {
+      ivprogCore.LocalizedStrings.updateTagText();
+      ivprogCore.initVisualUI();
+      prepareEnvironment();
+    });
+  </script>
 
-    <script src="js/semantic/semantic.min.js"></script>
-    <script src="js/semantic/semantic-buttons.js"></script>
+</body>
 
-  </body>
 </html>