diff --git a/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts b/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts
index f0418ad543c4971e936584707039f2de3845184e..4a4c1e801ac3f8f9082fae82682204a34a57e5b5 100755
--- a/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts	
+++ b/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts	
@@ -4,7 +4,7 @@ import { AuthenticationService } from '../../shared/services/authentication.serv
 import { HaskellService } from '../../shared/services/haskell.service';
 import { SessionService } from '../../shared/services/session.service';
 import { NotificacionService } from '../../shared/services/notificacion.service';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { NuevoArchivo } from './nuevoArchivo.component';
 import { VerCalificacionComponent } from './verCalificacion.component';
 import { CompartirArchivoComponent } from './compartirArchivo.component';
@@ -16,6 +16,7 @@ import { CodemirrorComponent } from 'ng2-codemirror';
 import { NgbPopoverConfig, NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { TitleCasePipe } from '../../shared/pipes/titlecase.pipe';
+import { map }                from 'rxjs/operators';
 
 import 'codemirror/mode/haskell/haskell';
 import 'codemirror/addon/display/panel';
@@ -54,7 +55,8 @@ export class ArchivosComponent {
 		private haskellService: HaskellService,
 		private sessionService: SessionService,
 		private dialogService:DialogService,
-		public translate: TranslateService
+		public translate: TranslateService,
+		private route: ActivatedRoute
 		){
 		this.translateService = translate;
 		this.titlecasePipe = new TitleCasePipe();
@@ -76,7 +78,6 @@ export class ArchivosComponent {
 				this.archivos = archivos;
 				this.loading = false;
 				this.buildTreeFromList();
-
 			}, 
 			error => console.log(error) 
 			);
diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/functions_definition_EN.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/functions_definition_EN.js
new file mode 100644
index 0000000000000000000000000000000000000000..f27a7f3dbb0367e6b9bc69856afa190eb8eddc43
--- /dev/null
+++ b/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/functions_definition_EN.js	
@@ -0,0 +1,501 @@
+var mac = /Mac/.test(navigator.platform);
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("codemirror/lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["codemirror/lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+  
+  const hintWords = require('./hint_words');
+
+  var HINT_ELEMENT_CLASS = "CodeMirror-function-definition";
+  
+  function parseOptions(cm, pos, options) {
+    var editor = cm.options.hintOptions;
+    var out = {};
+    for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
+    if (editor) for (var prop in editor)
+      if (editor[prop] !== undefined) out[prop] = editor[prop];
+    if (options) for (var prop in options)
+      if (options[prop] !== undefined) out[prop] = options[prop];
+    if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
+    return out;
+  }
+  
+  function Completion(cm, options, filename, archivos) {
+    this.filename = filename;
+    this.archivos = archivos;
+    this.cm = cm;
+    this.options = options;
+    this.widget = null;
+    this.debounce = 0;
+    this.tick = 0;
+    this.startPos = this.cm.getCursor("start");
+    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
+  
+    var self = this;
+    cm.on("cursorActivity", this.activityFunc = function() { self.cursorActivity(); });
+  }
+  
+  var requestAnimationFrame = window.requestAnimationFrame || function(fn) {
+    return setTimeout(fn, 1000/60);
+  };
+  var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+  
+  Completion.prototype = {
+    close: function() {
+      if (!this.active()) return;
+      this.cm.state.completionActive = null;
+      this.tick = null;
+      this.cm.off("cursorActivity", this.activityFunc);
+  
+      if (this.widget && this.data) CodeMirror.signal(this.data, "close");
+      if (this.widget) this.widget.close();
+      CodeMirror.signal(this.cm, "endFunctionDefinition", this.cm);
+    },
+  
+    active: function() {
+      return this.cm.state.completionActive == this;
+    },
+  
+    pick: function(data, i) {
+      var completion = data.list[i];
+      if (completion.hint) completion.hint(this.cm, data, completion);
+      else this.cm.replaceRange(getText(completion), completion.from || data.from,
+                                completion.to || data.to, "complete");
+      CodeMirror.signal(data, "pick", completion);
+      this.close();
+    },
+  
+    cursorActivity: function() {
+      if (this.debounce) {
+        cancelAnimationFrame(this.debounce);
+        this.debounce = 0;
+      }
+  
+      var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
+      if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
+          pos.ch < this.startPos.ch || this.cm.somethingSelected() ||
+          (!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
+        this.close();
+      } else {
+        var self = this;
+        this.debounce = requestAnimationFrame(function() {self.update();});
+        if (this.widget) this.widget.disable();
+      }
+    },
+  
+    update: function(first) {
+      if (this.tick == null) return
+      var self = this, myTick = ++this.tick
+      fetchHints(this.options.hint, this.cm, this.options, function(data) {
+        if (self.tick == myTick) self.finishUpdate(data, first)
+      })
+    },
+  
+    finishUpdate: function(data, first) {
+      if (this.data) CodeMirror.signal(this.data, "update");
+  
+      var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
+      if (this.widget) this.widget.close();
+  
+      this.data = data;
+  
+      if (data && data.list.length) {
+        if (picked && data.list.length == 1) {
+          this.pick(data, 0);
+        } else {
+          this.widget = new Widget(this, data);
+          CodeMirror.signal(data, "shown");
+        }
+      }
+    }
+  };
+  
+  function getText(completion) {
+    if (typeof completion == "string") return completion;
+    else return completion.text;
+  }
+  
+  function buildKeyMap(completion, handle) {
+    var baseMap = {
+      Up: function() {handle.moveFocus(-1);},
+      Down: function() {handle.moveFocus(1);},
+      PageUp: function() {handle.moveFocus(-handle.menuSize() + 1, true);},
+      PageDown: function() {handle.moveFocus(handle.menuSize() - 1, true);},
+      Home: function() {handle.setFocus(0);},
+      End: function() {handle.setFocus(handle.length - 1);},
+      Enter: handle.pick,
+      Tab: handle.pick,
+      Esc: handle.close
+    };
+  
+    if (mac) {
+      baseMap["Ctrl-P"] = function() {handle.moveFocus(-1);};
+      baseMap["Ctrl-N"] = function() {handle.moveFocus(1);};
+    }
+  
+    var custom = completion.options.customKeys;
+    var ourMap = custom ? {} : baseMap;
+    function addBinding(key, val) {
+      var bound;
+      if (typeof val != "string")
+        bound = function(cm) { return val(cm, handle); };
+      // This mechanism is deprecated
+      else if (baseMap.hasOwnProperty(val))
+        bound = baseMap[val];
+      else
+        bound = val;
+      ourMap[key] = bound;
+    }
+    if (custom)
+      for (var key in custom) if (custom.hasOwnProperty(key))
+        addBinding(key, custom[key]);
+    var extra = completion.options.extraKeys;
+    if (extra)
+      for (var key in extra) if (extra.hasOwnProperty(key))
+        addBinding(key, extra[key]);
+    return ourMap;
+  }
+  
+  function getHintElement(hintsElement, el) {
+    while (el && el != hintsElement) {
+      if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
+      el = el.parentNode;
+    }
+  }
+  
+  function Widget(completion, data) {
+    this.completion = completion;
+    this.data = data;
+    this.picked = false;
+    var widget = this, cm = completion.cm;
+    var ownerDocument = cm.getInputField().ownerDocument;
+    var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
+  
+    var hints = this.hints = ownerDocument.createElement("ul");
+    var theme = completion.cm.options.theme;
+    hints.className = "CodeMirror-hints " + theme;
+    this.selectedHint = data.selectedHint || 0;
+  
+    var completions = data.list;
+    for (var i = 0; i < completions.length; ++i) {
+      var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
+      var className = HINT_ELEMENT_CLASS;
+      if (cur.className != null) className = cur.className + " " + className;
+      elt.className = className;
+      if (cur.render) cur.render(elt, data, cur);
+      else { 
+        var rexp_name = new RegExp(/(.*\:\:)(.*)/.source, "g");
+        var m = rexp_name.exec(cur.displayText || getText(cur));
+        var b_elem = ownerDocument.createElement("b"); 
+        b_elem.appendChild(ownerDocument.createTextNode(m[1]));
+        elt.appendChild(b_elem); 
+        elt.appendChild(ownerDocument.createTextNode(m[2])); 
+      }
+      elt.hintId = i;
+    }
+  
+    var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
+    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
+    var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
+    var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
+    (completion.options.container || ownerDocument.body).appendChild(hints);
+    var box = hints.getBoundingClientRect(), overlapY = box.bottom - winH;
+    var scrolls = hints.scrollHeight > hints.clientHeight + 1
+    var startScroll = cm.getScrollInfo();
+  
+    var height = box.bottom - box.top;
+    var left = pos.left - 1;
+    hints.style.left = left + "px";
+    hints.style.top = (pos.top - height) + "px";
+    var below = false;
+
+    if (overlapY > 0 && height > winH) {
+      hints.style.height = (winH - 5) + "px";
+      hints.style.top = (top = pos.bottom - box.top) + "px";
+      var cursor = cm.getCursor();
+      if (data.from.ch != cursor.ch) {
+        pos = cm.cursorCoords(cursor);
+        hints.style.left = (left = pos.left) + "px";
+        box = hints.getBoundingClientRect();
+      }
+    }
+    var overlapX = box.right - winW;
+    if (overlapX > 0) {
+      if (box.right - box.left > winW) {
+        hints.style.width = (winW - 5) + "px";
+        overlapX -= (box.right - box.left) - winW;
+      }
+      hints.style.left = (left = pos.left - overlapX) + "px";
+    }
+    if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
+      node.style.paddingRight = cm.display.nativeBarWidth + "px"
+  
+    cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
+      moveFocus: function(n, avoidWrap) { widget.changeActive(widget.selectedHint + n, avoidWrap); },
+      setFocus: function(n) { widget.changeActive(n); },
+      menuSize: function() { return widget.screenAmount(); },
+      length: completions.length,
+      close: function() { completion.close(); },
+      pick: function() { widget.pick(); },
+      data: data
+    }));
+  
+    if (completion.options.closeOnUnfocus) {
+      var closingOnBlur;
+      cm.on("blur", this.onBlur = function() { closingOnBlur = setTimeout(function() { completion.close(); }, 100); });
+      cm.on("focus", this.onFocus = function() { clearTimeout(closingOnBlur); });
+    }
+  
+    cm.on("scroll", this.onScroll = function() {
+      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
+      var newTop = top + startScroll.top - curScroll.top;
+      var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
+      if (!below) point += hints.offsetHeight;
+      if (point <= editor.top || point >= editor.bottom) return completion.close();
+      hints.style.top = newTop + "px";
+      hints.style.left = (left + startScroll.left - curScroll.left) + "px";
+    });
+  
+    CodeMirror.on(hints, "dblclick", function(e) {
+      completion.close();
+    });
+  
+    CodeMirror.on(hints, "click", function(e) {
+      completion.close();
+    });
+  
+    CodeMirror.on(hints, "mousedown", function() {
+      setTimeout(function(){cm.focus();}, 20);
+    });
+  
+    CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
+    return true;
+  }
+  
+  Widget.prototype = {
+    close: function() {
+      if (this.completion.widget != this) return;
+      this.completion.widget = null;
+      this.hints.parentNode.removeChild(this.hints);
+      this.completion.cm.removeKeyMap(this.keyMap);
+  
+      var cm = this.completion.cm;
+      if (this.completion.options.closeOnUnfocus) {
+        cm.off("blur", this.onBlur);
+        cm.off("focus", this.onFocus);
+      }
+      cm.off("scroll", this.onScroll);
+    },
+  
+    disable: function() {
+      this.completion.cm.removeKeyMap(this.keyMap);
+      var widget = this;
+      this.keyMap = {Enter: function() { widget.picked = true; }};
+      this.completion.cm.addKeyMap(this.keyMap);
+    },
+  
+    pick: function() {
+      this.completion.pick(this.data, this.selectedHint);
+    },
+  
+    changeActive: function(i, avoidWrap) {
+      if (i >= this.data.list.length)
+        i = avoidWrap ? this.data.list.length - 1 : 0;
+      else if (i < 0)
+        i = avoidWrap ? 0  : this.data.list.length - 1;
+      if (this.selectedHint == i) return;
+      var node = this.hints.childNodes[this.selectedHint];
+      if (node) node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
+      node = this.hints.childNodes[this.selectedHint = i];
+      node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
+      if (node.offsetTop < this.hints.scrollTop)
+        this.hints.scrollTop = node.offsetTop - 3;
+      else if (node.offsetTop + node.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
+        this.hints.scrollTop = node.offsetTop + node.offsetHeight - this.hints.clientHeight + 3;
+      CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
+    },
+  
+    screenAmount: function() {
+      return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
+    }
+  };
+  
+  function applicableHelpers(cm, helpers) {
+    if (!cm.somethingSelected()) return helpers
+    var result = []
+    for (var i = 0; i < helpers.length; i++)
+      if (helpers[i].supportsSelection) result.push(helpers[i])
+    return result
+  }
+  
+  function fetchHints(hint, cm, options, callback) {
+    if (hint.async) {
+      functionDefinition(cm, callback, options)
+    } else {
+      var result = functionDefinition(cm, options)
+      if (result && result.then) result.then(callback)
+      else callback(result)
+    }
+  }
+  
+  function resolveAutoHints(cm, pos) {
+    var helpers = cm.getHelpers(pos, "functionDefinitionEN"), words
+    if (helpers.length) {
+      var resolved = function(cm, callback, options) {
+        var app = applicableHelpers(cm, helpers);
+        function run(i) {
+          if (i == app.length) return callback(null)
+          fetchHints(app[i], cm, options, function(result) {
+            if (result && result.list.length > 0) callback(result)
+            else run(i + 1)
+          })
+        }
+        run(0)
+      }
+      resolved.async = true
+      resolved.supportsSelection = true
+      return resolved
+    } else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
+      return function(cm) { return CodeMirror.functionDefinition.fromList(cm, {words: words}) }
+    } else if (CodeMirror.functionDefinition.anyword) {
+      return function(cm, options) { return CodeMirror.functionDefinition.anyword(cm, options) }
+    } else {
+      return function() {}
+    }
+  }
+  
+  CodeMirror.registerHelper("functionDefinitionEN", "auto", {
+    resolve: resolveAutoHints
+  });
+  
+  CodeMirror.registerHelper("functionDefinitionEN", "fromList", function(cm, options) {
+    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
+    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+    if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
+      term = token.string.substr(0, cur.ch - token.start)
+    } else {
+      term = ""
+      from = cur
+    }
+    var found = [];
+    for (var i = 0; i < options.words.length; i++) {
+      var word = options.words[i];
+      if (word.slice(0, term.length) == term)
+        found.push(word);
+    }
+  
+    if (found.length) return {list: found, from: from, to: to};
+  });
+  
+  var defaultOptions = {
+    hint: CodeMirror.hint.auto,
+    completeSingle: true,
+    alignWithWord: true,
+    closeCharacters: /./,
+    closeOnUnfocus: true,
+    completeOnSingleClick: true,
+    container: null,
+    customKeys: null,
+    extraKeys: null
+  };
+
+  var WORD = /[\w$]+/;
+  var RANGE = 500;
+
+  var COMPLETE_FUNS = /([\w\_\d\-]+)(\s+\:\:.*)/;
+  
+  // functions definitions
+
+  CodeMirror.defineExtension("functionDefinitionEN", function(filename, archivos, options) {
+    if (options.mode.name == "matefun-EN"){
+      options = parseOptions(this, this.getCursor("start"), options);
+      if (this.state.completionActive) this.state.completionActive.close();
+      var completion = this.state.completionActive = new Completion(this, options, filename, archivos);
+
+      CodeMirror.signal(this, "startFunctionDefinition", this);
+      completion.update(true);
+    }
+  });
+
+  CodeMirror.defineExtension("closeFunctionDefinition", function() {
+    if (this.state.completionActive) this.state.completionActive.close()
+  })
+
+  var INCLUIR = /include\s+([\w\_\d]+)/;
+
+  function functionDefinition(editor, options) {
+    var word = options && options.word || WORD;
+    var range = options && options.range || RANGE;
+    var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
+    var end = cur.ch, start = end;
+    while (start && word.test(curLine.charAt(start - 1))) --start;
+    while (end && word.test(curLine.charAt(end + 1))) ++end;
+    var curWord = start != end && curLine.slice(start, end + 1);
+
+    if (curWord.length > 0){
+      var includes = new RegExp(INCLUIR.source, "g");
+      var content = editor.getValue();
+
+      var list = [];
+
+      var file;
+      while (file = includes.exec(content)) {
+        var files = editor.state.completionActive.archivos.filter(
+          function(a){
+              return a.nombre === file[1];
+          });
+        for (var f = 0; f < files.length; f++){
+          var seen = {};
+          var re_digits = new RegExp(/^\d+$/, "g");
+          var re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+          var m;
+          
+          var file_content = files[f].contenido;
+
+          while (m = re_funs.exec(file_content)) {
+            if (!re_digits.exec(m[1]) && (!curWord || m[1] == curWord) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+              seen[m[1]] = true;
+              list.push(files[f].nombre + "." + m[1] + m[2]);
+            }
+          }
+        }
+      }
+
+      // current file
+      var seen = {};
+      var re_digits = new RegExp(/^\d+$/, "g");
+
+      var re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+      for (var dir = -1; dir <= 1; dir += 2) {
+        var line = cur.line, endLine = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
+        for (; line != endLine; line += dir) {
+          var text = editor.getLine(line), m;
+          while (m = re_funs.exec(text)) {
+            if (!re_digits.exec(m[1]) && (!curWord || m[1] == curWord) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+              seen[m[1]] = true;
+              list.push(editor.state.completionActive.filename + "." + m[1] + m[2]);
+            }
+          }
+        }
+      }
+
+      // add default functions
+      var default_functions = hintWords.EN_typed_functions();
+      for (var i = 0; i < default_functions.length; i++) {
+        re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+        var m = re_funs.exec(default_functions[i]);
+        if (m[1] == curWord) {
+          list.push(m[1] + m[2]);
+        }
+      } 
+
+      return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
+    }
+  };
+});
diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/functions_definition_ES.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/functions_definition_ES.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e8c0442c6b4ada82af4d854ec2d730bc73507d5
--- /dev/null
+++ b/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/functions_definition_ES.js	
@@ -0,0 +1,501 @@
+var mac = /Mac/.test(navigator.platform);
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("codemirror/lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["codemirror/lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+  
+  const hintWords = require('./hint_words');
+
+  var HINT_ELEMENT_CLASS = "CodeMirror-function-definition";
+  
+  function parseOptions(cm, pos, options) {
+    var editor = cm.options.hintOptions;
+    var out = {};
+    for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
+    if (editor) for (var prop in editor)
+      if (editor[prop] !== undefined) out[prop] = editor[prop];
+    if (options) for (var prop in options)
+      if (options[prop] !== undefined) out[prop] = options[prop];
+    if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
+    return out;
+  }
+  
+  function Completion(cm, options, filename, archivos) {
+    this.filename = filename;
+    this.archivos = archivos;
+    this.cm = cm;
+    this.options = options;
+    this.widget = null;
+    this.debounce = 0;
+    this.tick = 0;
+    this.startPos = this.cm.getCursor("start");
+    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
+  
+    var self = this;
+    cm.on("cursorActivity", this.activityFunc = function() { self.cursorActivity(); });
+  }
+  
+  var requestAnimationFrame = window.requestAnimationFrame || function(fn) {
+    return setTimeout(fn, 1000/60);
+  };
+  var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+  
+  Completion.prototype = {
+    close: function() {
+      if (!this.active()) return;
+      this.cm.state.completionActive = null;
+      this.tick = null;
+      this.cm.off("cursorActivity", this.activityFunc);
+  
+      if (this.widget && this.data) CodeMirror.signal(this.data, "close");
+      if (this.widget) this.widget.close();
+      CodeMirror.signal(this.cm, "endFunctionDefinition", this.cm);
+    },
+  
+    active: function() {
+      return this.cm.state.completionActive == this;
+    },
+  
+    pick: function(data, i) {
+      var completion = data.list[i];
+      if (completion.hint) completion.hint(this.cm, data, completion);
+      else this.cm.replaceRange(getText(completion), completion.from || data.from,
+                                completion.to || data.to, "complete");
+      CodeMirror.signal(data, "pick", completion);
+      this.close();
+    },
+  
+    cursorActivity: function() {
+      if (this.debounce) {
+        cancelAnimationFrame(this.debounce);
+        this.debounce = 0;
+      }
+  
+      var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
+      if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
+          pos.ch < this.startPos.ch || this.cm.somethingSelected() ||
+          (!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
+        this.close();
+      } else {
+        var self = this;
+        this.debounce = requestAnimationFrame(function() {self.update();});
+        if (this.widget) this.widget.disable();
+      }
+    },
+  
+    update: function(first) {
+      if (this.tick == null) return
+      var self = this, myTick = ++this.tick
+      fetchHints(this.options.hint, this.cm, this.options, function(data) {
+        if (self.tick == myTick) self.finishUpdate(data, first)
+      })
+    },
+  
+    finishUpdate: function(data, first) {
+      if (this.data) CodeMirror.signal(this.data, "update");
+  
+      var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
+      if (this.widget) this.widget.close();
+  
+      this.data = data;
+  
+      if (data && data.list.length) {
+        if (picked && data.list.length == 1) {
+          this.pick(data, 0);
+        } else {
+          this.widget = new Widget(this, data);
+          CodeMirror.signal(data, "shown");
+        }
+      }
+    }
+  };
+  
+  function getText(completion) {
+    if (typeof completion == "string") return completion;
+    else return completion.text;
+  }
+  
+  function buildKeyMap(completion, handle) {
+    var baseMap = {
+      Up: function() {handle.moveFocus(-1);},
+      Down: function() {handle.moveFocus(1);},
+      PageUp: function() {handle.moveFocus(-handle.menuSize() + 1, true);},
+      PageDown: function() {handle.moveFocus(handle.menuSize() - 1, true);},
+      Home: function() {handle.setFocus(0);},
+      End: function() {handle.setFocus(handle.length - 1);},
+      Enter: handle.pick,
+      Tab: handle.pick,
+      Esc: handle.close
+    };
+  
+    if (mac) {
+      baseMap["Ctrl-P"] = function() {handle.moveFocus(-1);};
+      baseMap["Ctrl-N"] = function() {handle.moveFocus(1);};
+    }
+  
+    var custom = completion.options.customKeys;
+    var ourMap = custom ? {} : baseMap;
+    function addBinding(key, val) {
+      var bound;
+      if (typeof val != "string")
+        bound = function(cm) { return val(cm, handle); };
+      // This mechanism is deprecated
+      else if (baseMap.hasOwnProperty(val))
+        bound = baseMap[val];
+      else
+        bound = val;
+      ourMap[key] = bound;
+    }
+    if (custom)
+      for (var key in custom) if (custom.hasOwnProperty(key))
+        addBinding(key, custom[key]);
+    var extra = completion.options.extraKeys;
+    if (extra)
+      for (var key in extra) if (extra.hasOwnProperty(key))
+        addBinding(key, extra[key]);
+    return ourMap;
+  }
+  
+  function getHintElement(hintsElement, el) {
+    while (el && el != hintsElement) {
+      if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
+      el = el.parentNode;
+    }
+  }
+  
+  function Widget(completion, data) {
+    this.completion = completion;
+    this.data = data;
+    this.picked = false;
+    var widget = this, cm = completion.cm;
+    var ownerDocument = cm.getInputField().ownerDocument;
+    var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
+  
+    var hints = this.hints = ownerDocument.createElement("ul");
+    var theme = completion.cm.options.theme;
+    hints.className = "CodeMirror-hints " + theme;
+    this.selectedHint = data.selectedHint || 0;
+  
+    var completions = data.list;
+    for (var i = 0; i < completions.length; ++i) {
+      var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
+      var className = HINT_ELEMENT_CLASS;
+      if (cur.className != null) className = cur.className + " " + className;
+      elt.className = className;
+      if (cur.render) cur.render(elt, data, cur);
+      else { 
+        var rexp_name = new RegExp(/(.*\:\:)(.*)/.source, "g");
+        var m = rexp_name.exec(cur.displayText || getText(cur));
+        var b_elem = ownerDocument.createElement("b"); 
+        b_elem.appendChild(ownerDocument.createTextNode(m[1]));
+        elt.appendChild(b_elem); 
+        elt.appendChild(ownerDocument.createTextNode(m[2])); 
+      }
+      elt.hintId = i;
+    }
+  
+    var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
+    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
+    var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
+    var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
+    (completion.options.container || ownerDocument.body).appendChild(hints);
+    var box = hints.getBoundingClientRect(), overlapY = box.bottom - winH;
+    var scrolls = hints.scrollHeight > hints.clientHeight + 1
+    var startScroll = cm.getScrollInfo();
+  
+    var height = box.bottom - box.top;
+    var left = pos.left - 1;
+    hints.style.left = left + "px";
+    hints.style.top = (pos.top - height) + "px";
+    var below = false;
+
+    if (overlapY > 0 && height > winH) {
+      hints.style.height = (winH - 5) + "px";
+      hints.style.top = (top = pos.bottom - box.top) + "px";
+      var cursor = cm.getCursor();
+      if (data.from.ch != cursor.ch) {
+        pos = cm.cursorCoords(cursor);
+        hints.style.left = (left = pos.left) + "px";
+        box = hints.getBoundingClientRect();
+      }
+    }
+    var overlapX = box.right - winW;
+    if (overlapX > 0) {
+      if (box.right - box.left > winW) {
+        hints.style.width = (winW - 5) + "px";
+        overlapX -= (box.right - box.left) - winW;
+      }
+      hints.style.left = (left = pos.left - overlapX) + "px";
+    }
+    if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
+      node.style.paddingRight = cm.display.nativeBarWidth + "px"
+  
+    cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
+      moveFocus: function(n, avoidWrap) { widget.changeActive(widget.selectedHint + n, avoidWrap); },
+      setFocus: function(n) { widget.changeActive(n); },
+      menuSize: function() { return widget.screenAmount(); },
+      length: completions.length,
+      close: function() { completion.close(); },
+      pick: function() { widget.pick(); },
+      data: data
+    }));
+  
+    if (completion.options.closeOnUnfocus) {
+      var closingOnBlur;
+      cm.on("blur", this.onBlur = function() { closingOnBlur = setTimeout(function() { completion.close(); }, 100); });
+      cm.on("focus", this.onFocus = function() { clearTimeout(closingOnBlur); });
+    }
+  
+    cm.on("scroll", this.onScroll = function() {
+      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
+      var newTop = top + startScroll.top - curScroll.top;
+      var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
+      if (!below) point += hints.offsetHeight;
+      if (point <= editor.top || point >= editor.bottom) return completion.close();
+      hints.style.top = newTop + "px";
+      hints.style.left = (left + startScroll.left - curScroll.left) + "px";
+    });
+  
+    CodeMirror.on(hints, "dblclick", function(e) {
+      completion.close();
+    });
+  
+    CodeMirror.on(hints, "click", function(e) {
+      completion.close();
+    });
+  
+    CodeMirror.on(hints, "mousedown", function() {
+      setTimeout(function(){cm.focus();}, 20);
+    });
+  
+    CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
+    return true;
+  }
+  
+  Widget.prototype = {
+    close: function() {
+      if (this.completion.widget != this) return;
+      this.completion.widget = null;
+      this.hints.parentNode.removeChild(this.hints);
+      this.completion.cm.removeKeyMap(this.keyMap);
+  
+      var cm = this.completion.cm;
+      if (this.completion.options.closeOnUnfocus) {
+        cm.off("blur", this.onBlur);
+        cm.off("focus", this.onFocus);
+      }
+      cm.off("scroll", this.onScroll);
+    },
+  
+    disable: function() {
+      this.completion.cm.removeKeyMap(this.keyMap);
+      var widget = this;
+      this.keyMap = {Enter: function() { widget.picked = true; }};
+      this.completion.cm.addKeyMap(this.keyMap);
+    },
+  
+    pick: function() {
+      this.completion.pick(this.data, this.selectedHint);
+    },
+  
+    changeActive: function(i, avoidWrap) {
+      if (i >= this.data.list.length)
+        i = avoidWrap ? this.data.list.length - 1 : 0;
+      else if (i < 0)
+        i = avoidWrap ? 0  : this.data.list.length - 1;
+      if (this.selectedHint == i) return;
+      var node = this.hints.childNodes[this.selectedHint];
+      if (node) node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
+      node = this.hints.childNodes[this.selectedHint = i];
+      node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
+      if (node.offsetTop < this.hints.scrollTop)
+        this.hints.scrollTop = node.offsetTop - 3;
+      else if (node.offsetTop + node.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
+        this.hints.scrollTop = node.offsetTop + node.offsetHeight - this.hints.clientHeight + 3;
+      CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
+    },
+  
+    screenAmount: function() {
+      return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
+    }
+  };
+  
+  function applicableHelpers(cm, helpers) {
+    if (!cm.somethingSelected()) return helpers
+    var result = []
+    for (var i = 0; i < helpers.length; i++)
+      if (helpers[i].supportsSelection) result.push(helpers[i])
+    return result
+  }
+  
+  function fetchHints(hint, cm, options, callback) {
+    if (hint.async) {
+      functionDefinition(cm, callback, options)
+    } else {
+      var result = functionDefinition(cm, options)
+      if (result && result.then) result.then(callback)
+      else callback(result)
+    }
+  }
+  
+  function resolveAutoHints(cm, pos) {
+    var helpers = cm.getHelpers(pos, "functionDefinitionES"), words
+    if (helpers.length) {
+      var resolved = function(cm, callback, options) {
+        var app = applicableHelpers(cm, helpers);
+        function run(i) {
+          if (i == app.length) return callback(null)
+          fetchHints(app[i], cm, options, function(result) {
+            if (result && result.list.length > 0) callback(result)
+            else run(i + 1)
+          })
+        }
+        run(0)
+      }
+      resolved.async = true
+      resolved.supportsSelection = true
+      return resolved
+    } else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
+      return function(cm) { return CodeMirror.functionDefinition.fromList(cm, {words: words}) }
+    } else if (CodeMirror.functionDefinition.anyword) {
+      return function(cm, options) { return CodeMirror.functionDefinition.anyword(cm, options) }
+    } else {
+      return function() {}
+    }
+  }
+  
+  CodeMirror.registerHelper("functionDefinitionES", "auto", {
+    resolve: resolveAutoHints
+  });
+  
+  CodeMirror.registerHelper("functionDefinitionES", "fromList", function(cm, options) {
+    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
+    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+    if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
+      term = token.string.substr(0, cur.ch - token.start)
+    } else {
+      term = ""
+      from = cur
+    }
+    var found = [];
+    for (var i = 0; i < options.words.length; i++) {
+      var word = options.words[i];
+      if (word.slice(0, term.length) == term)
+        found.push(word);
+    }
+  
+    if (found.length) return {list: found, from: from, to: to};
+  });
+  
+  var defaultOptions = {
+    hint: CodeMirror.hint.auto,
+    completeSingle: true,
+    alignWithWord: true,
+    closeCharacters: /./,
+    closeOnUnfocus: true,
+    completeOnSingleClick: true,
+    container: null,
+    customKeys: null,
+    extraKeys: null
+  };
+
+  var WORD = /[\w$]+/;
+  var RANGE = 500;
+
+  var COMPLETE_FUNS = /([\w\_\d\-]+)(\s+\:\:.*)/;
+  
+  // functions definitions
+
+  CodeMirror.defineExtension("functionDefinitionES", function(filename, archivos, options) {
+    if (options.mode.name == "matefun-ES"){
+      options = parseOptions(this, this.getCursor("start"), options);
+      if (this.state.completionActive) this.state.completionActive.close();
+      var completion = this.state.completionActive = new Completion(this, options, filename, archivos);
+
+      CodeMirror.signal(this, "startFunctionDefinition", this);
+      completion.update(true);
+    }
+  });
+
+  CodeMirror.defineExtension("closeFunctionDefinition", function() {
+    if (this.state.completionActive) this.state.completionActive.close()
+  })
+
+  var INCLUIR = /incluir\s+([\w\_\d]+)/;
+
+  function functionDefinition(editor, options) {
+    var word = options && options.word || WORD;
+    var range = options && options.range || RANGE;
+    var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
+    var end = cur.ch, start = end;
+    while (start && word.test(curLine.charAt(start - 1))) --start;
+    while (end && word.test(curLine.charAt(end + 1))) ++end;
+    var curWord = start != end && curLine.slice(start, end + 1);
+
+    if (curWord.length > 0){
+      var includes = new RegExp(INCLUIR.source, "g");
+      var content = editor.getValue();
+
+      var list = [];
+
+      var file;
+      while (file = includes.exec(content)) {
+        var files = editor.state.completionActive.archivos.filter(
+          function(a){
+              return a.nombre === file[1];
+          });
+        for (var f = 0; f < files.length; f++){
+          var seen = {};
+          var re_digits = new RegExp(/^\d+$/, "g");
+          var re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+          var m;
+          
+          var file_content = files[f].contenido;
+
+          while (m = re_funs.exec(file_content)) {
+            if (!re_digits.exec(m[1]) && (!curWord || m[1] == curWord) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+              seen[m[1]] = true;
+              list.push(files[f].nombre + "." + m[1] + m[2]);
+            }
+          }
+        }
+      }
+
+      // current file
+      var seen = {};
+      var re_digits = new RegExp(/^\d+$/, "g");
+
+      var re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+      for (var dir = -1; dir <= 1; dir += 2) {
+        var line = cur.line, endLine = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
+        for (; line != endLine; line += dir) {
+          var text = editor.getLine(line), m;
+          while (m = re_funs.exec(text)) {
+            if (!re_digits.exec(m[1]) && (!curWord || m[1] == curWord) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+              seen[m[1]] = true;
+              list.push(editor.state.completionActive.filename + "." + m[1] + m[2]);
+            }
+          }
+        }
+      }
+
+      // add default functions
+      var default_functions = hintWords.ES_typed_functions();
+      for (var i = 0; i < default_functions.length; i++) {
+        re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+        var m = re_funs.exec(default_functions[i]);
+        if (m[1] == curWord) {
+          list.push(m[1] + m[2]);
+        }
+      } 
+
+      return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
+    }
+  };
+});
diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/hint_words.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/hint_words.js
new file mode 100644
index 0000000000000000000000000000000000000000..55be4f5fc6f84d3bc9c077fca5cedf2e7063ef9a
--- /dev/null
+++ b/Frontend Angular 4/src/app/layout/matefun/codemirror/addons/hint_words.js	
@@ -0,0 +1,63 @@
+// English words
+
+let EN_functions = [
+  '-', 'round', 'sin', 'cos', 'squareroot', 'rgb', 'rect', 'circ', 'line', 'poli', 'join', 'color', 'move', 'rotate', 'scale', 'toFig', 'line3D', 'sphere', 'cylinder', 'cube', 'ring', 'join3D', 'color3D', 'move3D', 'rotate3D', 'scale3D', 'range', 'first', 'rest'
+]
+
+let EN_default_sets = [
+  'R', 'Color', 'Fig', 'A', 'Fig3D'
+]
+
+let EN_typed_functions = [
+  '- :: R -> R', 'round :: R -> R', 'sin :: R -> R', 'cos :: R -> R', 'squareroot :: R -> R',
+  'rgb :: (R X R X R) -> Color', 'rect :: (R X R) -> Fig', 'circ :: R -> Fig', 'line :: ((R X R) X (R X R)) -> Fig',
+  'poli :: (R X R)* -> Fig', 'join :: (Fig X Fig) -> Fig', 'color :: (Fig X Color) -> Fig', 'move :: (Fig X (R X R)) -> Fig', 
+  'rotate :: (Fig X R) -> Fig', 'scale :: (Fig X R) -> Fig', 'toFig :: A -> Fig', 'line3D :: ((R X R X R) X (R X R X R)) -> Fig3D', 
+  'sphere :: R -> Fig3D', 'cylinder :: (R X R X R) -> Fig3D', 'cube :: (R X R X R) -> Fig3D', 'ring :: (R X R X R) -> Fig3D', 
+  'join3D :: (Fig3D X Fig3D) -> Fig3D', 'color3D :: (Fig3D X Color) -> Fig3D', 'move3D :: (Fig3D X (R X R X R)) -> Fig3D', 
+  'rotate3D :: (Fig3D X (R X R X R)) -> Fig3D', 'scale3D :: (Fig3D X R) -> Fig3D', 'range :: (R X R X R) -> R*', 
+  'first :: A* -> A', 'rest :: A* -> A*'
+]
+
+// Spanish words
+
+let ES_functions = [
+  '-', 'red', 'sen', 'cos', 'raizcuad', 'rgb', 'rect', 'circ', 'linea', 'poli', 'juntar', 'color', 'mover', 'rotar', 'escalar', 'aFig', 'linea3D', 'esfera', 'cilindro', 'cubo', 'anillo', 'juntar3D', 'color3D', 'mover3D', 'rotar3D', 'escalar3D', 'rango', 'primero', 'resto'
+]
+
+let ES_default_sets = [
+  'R', 'Color', 'Fig', 'A', 'Fig3D'
+]
+
+let ES_typed_functions = [
+  '- :: R -> R', 'red :: R -> R', 'sen :: R -> R', 'cos :: R -> R', 'raizcuad :: R -> R', 
+  'rgb :: (R X R X R) -> Color', 'rect :: (R X R) -> Fig', 'circ :: R -> Fig', 'linea :: ((R X R) X (R X R)) -> Fig', 
+  'poli :: (R X R)* -> Fig', 'juntar :: (Fig X Fig) -> Fig', 'color :: (Fig X Color) -> Fig', 
+  'mover :: (Fig X (R X R)) -> Fig', 'rotar :: (Fig X R) -> Fig', 'escalar :: (Fig X R) -> Fig', 
+  'aFig :: A -> Fig', 'linea3D :: ((R X R X R) X (R X R X R)) -> Fig3D', 'esfera :: R -> Fig3D', 'cilindro :: (R X R X R) -> Fig3D', 
+  'cubo :: (R X R X R) -> Fig3D', 'anillo :: (R X R X R) -> Fig3D', 'juntar3D :: (Fig3D X Fig3D) -> Fig3D', 
+  'color3D :: (Fig3D X Color) -> Fig3D', 'mover3D :: (Fig3D X (R X R X R)) -> Fig3D', 
+  'rotar3D :: (Fig3D X (R X R X R)) -> Fig3D', 'escalar3D :: (Fig3D X R) -> Fig3D', 'rango :: (R X R X R) -> R*', 
+  'primero :: A* -> A', 'resto :: A* -> A*'
+]
+
+module.exports = {
+  EN_default_sets: function() {
+    return EN_default_sets;
+  },
+  EN_functions: function() {
+    return EN_functions;
+  },
+  EN_typed_functions: function() {
+    return EN_typed_functions;
+  },
+  ES_default_sets: function() {
+    return ES_default_sets;
+  },
+  ES_functions: function() {
+    return ES_functions;
+  },
+  ES_typed_functions: function() {
+    return ES_typed_functions;
+  }
+}
diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/hint_words.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/hint_words.js
deleted file mode 100644
index 43a436e4ac1a68c65da4c402995eba3a6fcc96c9..0000000000000000000000000000000000000000
--- a/Frontend Angular 4/src/app/layout/matefun/codemirror/hint_words.js	
+++ /dev/null
@@ -1,34 +0,0 @@
-// English words
-
-let EN_functions = [
-  '-', 'round', 'sin', 'cos', 'squareroot', 'rgb', 'rect', 'circ', 'line', 'poli', 'join', 'color', 'move', 'rotate', 'scale', 'toFig', 'line3D', 'sphere', 'cylinder', 'cube', 'ring', 'join3D', 'color3D', 'move3D', 'rotate3D', 'scale3D', 'range', 'first', 'rest'
-]
-
-let EN_default_sets = [
-  'R', 'Color', 'Fig', 'A', 'Fig3D'
-]
-
-// Spanish words
-
-let ES_functions = [
-  '-', 'red', 'sen', 'cos', 'raizcuad', 'rgb', 'rect', 'circ', 'linea', 'poli', 'juntar', 'color', 'mover', 'rotar', 'escalar', 'aFig', 'linea3D', 'esfera', 'cilindro', 'cubo', 'anillo', 'juntar3D', 'color3D', 'mover3D', 'rotar3D', 'escalar3D', 'rango', 'primero', 'resto'
-]
-
-let ES_default_sets = [
-  'R', 'Color', 'Fig', 'A', 'Fig3D'
-]
-
-module.exports = {
-  EN_default_sets: function() {
-    return EN_default_sets;
-  },
-  EN_functions: function() {
-    return EN_functions;
-  },
-  ES_default_sets: function() {
-    return ES_default_sets;
-  },
-  ES_functions: function() {
-    return ES_functions;
-  }
-}
diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js
index 91d3f599cda20f105b1c6dd4993c1e7a534c7691..3fc45a4683e2c1ebe0e9f8b4a88af45571a9c163 100644
--- a/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js	
+++ b/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js	
@@ -25,19 +25,125 @@
     var specialRE = /[(),;[\]`{}]/;
   var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
 
-  const hintWords = require('./hint_words');
+  var INCLUIR = /include\s+([\w\_\d]+)/;
+
+  // jump to definition
+
+  var COMPLETE_FUNS = /([\w\_\d\-]+)(\s+\:\:.*)/;
+
+  CodeMirror.defineExtension("jumpToDefinition", function(all_files, editor, options) {
+    var word = options && options.word || WORD;
+    var range = options && options.range || RANGE;
+    var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
+    var end = cur.ch, start = end;
+    while (start && word.test(curLine.charAt(start - 1))) --start;
+    while (end && word.test(curLine.charAt(end + 1))) ++end;
+    var curWord = start != end && curLine.slice(start, end + 1);
+
+    if (curWord.length > 0){
+      var list = [], seen = {};
+      var re_digits = new RegExp(/^\d+$/, "g");
+
+      var found = false;
+
+      var re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+      for (var dir = -1; dir <= 1; dir += 2) {
+        var line = cur.line, endLine = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
+        for (; line != endLine && !found; line += dir) {
+          var text = editor.getLine(line), m;
+          while (m = re_funs.exec(text)) {
+            if (!re_digits.exec(m[1]) && (!curWord || m[1] == curWord) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+              seen[m[1]] = true;
+              found = true;
+              
+              var newCursor = editor.getCursor();
+              newCursor.line = line;
+              newCursor.ch = text.indexOf(m[1]);
+              editor.setCursor(newCursor);
+
+              editor.cm.closeFunctionDefinition();
+            }
+          }
+        }
+      }
+
+      if (!found){
+        var file_found = null;
+
+        var re_digits = new RegExp(/^\d+$/, "g");
+        var includes = new RegExp(INCLUIR.source, "g");
+        var content = editor.getValue();
+
+        var file;
+        while ((file = includes.exec(content)) && !found) {
+          var files = all_files.archivos.filter(
+            function(a){
+                return a.nombre === file[1];
+            });
+          for (var f = 0; f < files.length && !found; f++){
+            var seen = {};
+            var m;
+            var re_funs = new RegExp(FUNS.source, "g");
+
+            var file_content = files[f].contenido;
+
+            while ((m = re_funs.exec(file_content)) && !found) {
+              if (!re_digits.exec(m[1]) && (!curWord || m[1].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+                seen[m[1]] = true;
+                found = true;
+                file_found = files[f];
+              }
+            }
+          }
+        }
+
+        if (file_found !== null){
+          editor.cm.closeFunctionDefinition();          
+          window.matefunComponent.component.goToFilesPreview(file_found, curWord);
+        }
+      }
+    }
+  });
+
+  const hintWords = require('./addons/hint_words');
 
   var WORD = /[\w$]+/;
+  var RANGE = 500;
 
   var SET = /set\s+([\w\_\d]+)\s*\=/;
   var DOM = /\:\:/;
   var FUNS = /([\w\_\d]+)\s+\:\:/;
+  var COMPLETE_FUNS = /([\w\_\d\-]+)(\s+\:\:.*)/;
   var FUN = /([\w\_\d]+)\s*\(([\,\w\_\s\d]*)\)\s*\=/;
   var ENUMS = /set\s+[\w\_\d]+\s*\=\s*\{(.*?)\}/;
   var WRITING_SET = /set\s/;
   var WRITING_COMMENT = /\{\-/;
 
-  var RANGE = 500;
+  CodeMirror.defineExtension("jumpToDefinitionByWord", function(editor, word){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var re_funs = new RegExp(FUNS.source, "g");
+    var seen = {};
+    var found = false;
+    for (var dir = -1; dir <= 1 && !found; dir += 2) {
+      var line = editor.firstLine(), endLine = Math.min(Math.max(line + dir * RANGE, editor.firstLine()), editor.lastLine()) + dir;
+      for (; line != endLine && !found; line += dir) {
+        var text = editor.getLine(line), m;
+        while ((m = re_funs.exec(text)) && !found) {
+          if (!re_digits.exec(m[1]) && (!word || m[1].lastIndexOf(word, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+            seen[m[1]] = true;
+            found = true;
+            
+            var newCursor = editor.getCursor();
+            newCursor.line = line;
+            newCursor.ch = text.indexOf(word);
+            editor.setCursor(newCursor);
+          }
+        }
+      }
+    }
+  });
+  
+  // hints
 
   CodeMirror.registerHelper("hint", "anyword", function(editor, options) {
     var word = options && options.word || WORD;
@@ -108,6 +214,9 @@
               list.push(default_sets[i]);
             }
           }
+
+          // included sets
+          hintsSetsFromIncludedFiles(editor.options.files, editor, curWord, list);
         }else{
           // get variables of function
           var previous_block = "";
@@ -153,6 +262,8 @@
                   }
                 }
               }
+              // included enums
+              hintsEnumsFromIncludedFiles(editor.options.files, editor, curWord, list);
               // get functions
               var re_funs = new RegExp(FUNS.source, "g");
               for (var dir = -1; dir <= 1; dir += 2) {
@@ -167,6 +278,8 @@
                   }
                 }
               }
+              // included functions
+              hintsFunctionsFromIncludedFiles(editor.options.files, editor, curWord, list);
               // add default functions
               var default_functions = hintWords.EN_functions();
               for (var i = 0; i < default_functions.length; i++) {
@@ -183,6 +296,93 @@
     return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
   });
 
+  function hintsFunctionsFromIncludedFiles(all_files, editor, curWord, list){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var includes = new RegExp(INCLUIR.source, "g");
+    var content = editor.getValue();
+
+    var file;
+    while (file = includes.exec(content)) {
+      var files = all_files.archivos.filter(
+        function(a){
+            return a.nombre === file[1];
+        });
+      for (var f = 0; f < files.length; f++){
+        var seen = {};
+        var m;
+        var re_funs = new RegExp(FUNS.source, "g");
+
+        var file_content = files[f].contenido;
+
+        while (m = re_funs.exec(file_content)) {
+          if (!re_digits.exec(m[1]) && (!curWord || m[1].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+            seen[m[1]] = true;
+            list.push(m[1]);
+          }
+        }
+      }
+    }
+  }
+
+  function hintsSetsFromIncludedFiles(all_files, editor, curWord, list){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var includes = new RegExp(INCLUIR.source, "g");
+    var content = editor.getValue();
+
+    var file;
+    while (file = includes.exec(content)) {
+      var files = all_files.archivos.filter(
+        function(a){
+            return a.nombre === file[1];
+        });
+      for (var f = 0; f < files.length; f++){
+        var seen = {};
+        var m;
+        var re_sets = new RegExp(SET.source, "g");
+
+        var file_content = files[f].contenido;
+
+        while (m = re_sets.exec(file_content)) {
+          if (!re_digits.exec(m[1]) && (!curWord || m[1].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+            seen[m[1]] = true;
+            list.push(m[1]);
+          }
+        }
+      }
+    }
+  }
+
+  function hintsEnumsFromIncludedFiles(all_files, editor, curWord, list){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var includes = new RegExp(INCLUIR.source, "g");
+    var content = editor.getValue();
+
+    var file;
+    while (file = includes.exec(content)) {
+      var files = all_files.archivos.filter(
+        function(a){
+            return a.nombre === file[1];
+        });
+      for (var f = 0; f < files.length; f++){
+        var seen = {};
+        var m;
+        var re_enums = new RegExp(ENUMS.source, "g");
+
+        var file_content = files[f].contenido;
+
+        while (m = re_enums.exec(file_content)) {
+          var enums = m[1].replace(/\s/g,'').split(',');
+          for (var i = 0; i < enums.length; i++) {
+            if (!re_digits.exec(enums[i]) && (!curWord || enums[i].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, enums[i])) {
+              seen[enums[i]] = true;
+              list.push(enums[i]);
+            }
+          }
+        }
+      }
+    }
+  }
+
   function normal(source, setState) {
     if (source.eatWhile(whiteCharRE)) {
       return null;
diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-ES.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-ES.js
index 9be81767470a4ae36f1c1c1dad216ce0d0eab8a1..2d1d7a85292ae9c3b9cfceeab505993e2b6cf9fd 100755
--- a/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-ES.js	
+++ b/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-ES.js	
@@ -25,7 +25,87 @@
     var specialRE = /[(),;[\]`{}]/;
   var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
 
-  const hintWords = require('./hint_words');
+  var INCLUIR = /incluir\s+([\w\_\d]+)/;
+  
+  // jump to definition
+
+  var COMPLETE_FUNS = /([\w\_\d\-]+)(\s+\:\:.*)/;
+  
+  CodeMirror.defineExtension("jumpToDefinition", function(all_files, editor, options) {
+    var word = options && options.word || WORD;
+    var range = options && options.range || RANGE;
+    var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
+    var end = cur.ch, start = end;
+    while (start && word.test(curLine.charAt(start - 1))) --start;
+    while (end && word.test(curLine.charAt(end + 1))) ++end;
+    var curWord = start != end && curLine.slice(start, end + 1);
+
+    if (curWord.length > 0){
+      var list = [], seen = {};
+      var re_digits = new RegExp(/^\d+$/, "g");
+
+      var found = false;
+
+      var re_funs = new RegExp(COMPLETE_FUNS.source, "g");
+      for (var dir = -1; dir <= 1; dir += 2) {
+        var line = cur.line, endLine = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
+        for (; line != endLine && !found; line += dir) {
+          var text = editor.getLine(line), m;
+          while (m = re_funs.exec(text)) {
+            if (!re_digits.exec(m[1]) && (!curWord || m[1] == curWord) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+              seen[m[1]] = true;
+              found = true;
+              
+              var newCursor = editor.getCursor();
+              newCursor.line = line;
+              newCursor.ch = text.indexOf(m[1]);
+              editor.setCursor(newCursor);
+
+              editor.cm.closeFunctionDefinition();
+            }
+          }
+        }
+      }
+    }
+
+    if (!found){ 
+      var file_found = null; 
+
+      var re_digits = new RegExp(/^\d+$/, "g"); 
+      var includes = new RegExp(INCLUIR.source, "g"); 
+      var content = editor.getValue(); 
+
+      var file; 
+      while ((file = includes.exec(content)) && !found) { 
+        var files = all_files.archivos.filter( 
+          function(a){ 
+              return a.nombre === file[1]; 
+          }); 
+        for (var f = 0; f < files.length && !found; f++){ 
+          var seen = {}; 
+          var m; 
+          var re_funs = new RegExp(FUNS.source, "g"); 
+
+          var file_content = files[f].contenido; 
+
+          while ((m = re_funs.exec(file_content)) && !found) { 
+            if (!re_digits.exec(m[1]) && (!curWord || m[1].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) { 
+              seen[m[1]] = true; 
+              found = true; 
+              file_found = files[f]; 
+            } 
+          } 
+        } 
+      } 
+
+      if (file_found !== null){ 
+        editor.cm.closeFunctionDefinition();           
+        window.matefunComponent.component.goToFilesPreview(file_found, curWord); 
+      } 
+    } 
+  });
+
+  const hintWords = require('./addons/hint_words');
 
   var WORD = /[\w$]+/;
 
@@ -39,6 +119,30 @@
 
   var RANGE = 500;
 
+  CodeMirror.defineExtension("jumpToDefinitionByWord", function(editor, word){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var re_funs = new RegExp(FUNS.source, "g");
+    var seen = {};
+    var found = false;
+    for (var dir = -1; dir <= 1 && !found; dir += 2) {
+      var line = editor.firstLine(), endLine = Math.min(Math.max(line + dir * RANGE, editor.firstLine()), editor.lastLine()) + dir;
+      for (; line != endLine && !found; line += dir) {
+        var text = editor.getLine(line), m;
+        while ((m = re_funs.exec(text)) && !found) {
+          if (!re_digits.exec(m[1]) && (!word || m[1].lastIndexOf(word, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+            seen[m[1]] = true;
+            found = true;
+            
+            var newCursor = editor.getCursor();
+            newCursor.line = line;
+            newCursor.ch = text.indexOf(word);
+            editor.setCursor(newCursor);
+          }
+        }
+      }
+    }
+  });
+
   CodeMirror.registerHelper("hint", "anyword", function(editor, options) {
     var word = options && options.word || WORD;
     var range = options && options.range || RANGE;
@@ -107,6 +211,9 @@
               list.push(default_sets[i]);
             }
           }
+          
+          // included sets 
+          hintsSetsFromIncludedFiles(editor.options.files, editor, curWord, list); 
         }else{
           // get variables of function
           var previous_block = "";
@@ -152,6 +259,8 @@
                   }
                 }
               }
+              // included enums 
+              hintsEnumsFromIncludedFiles(editor.options.files, editor, curWord, list); 
               // get functions
               var re_funs = new RegExp(FUNS.source, "g");
               for (var dir = -1; dir <= 1; dir += 2) {
@@ -166,6 +275,8 @@
                   }
                 }
               }
+              // included functions 
+              hintsFunctionsFromIncludedFiles(editor.options.files, editor, curWord, list); 
               // add default functions
               var default_functions = hintWords.ES_functions();
               for (var i = 0; i < default_functions.length; i++) {
@@ -182,6 +293,93 @@
     return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
   });
 
+  function hintsFunctionsFromIncludedFiles(all_files, editor, curWord, list){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var includes = new RegExp(INCLUIR.source, "g");
+    var content = editor.getValue();
+
+    var file;
+    while (file = includes.exec(content)) {
+      var files = all_files.archivos.filter(
+        function(a){
+            return a.nombre === file[1];
+        });
+      for (var f = 0; f < files.length; f++){
+        var seen = {};
+        var m;
+        var re_funs = new RegExp(FUNS.source, "g");
+
+        var file_content = files[f].contenido;
+
+        while (m = re_funs.exec(file_content)) {
+          if (!re_digits.exec(m[1]) && (!curWord || m[1].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+            seen[m[1]] = true;
+            list.push(m[1]);
+          }
+        }
+      }
+    }
+  }
+
+  function hintsSetsFromIncludedFiles(all_files, editor, curWord, list){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var includes = new RegExp(INCLUIR.source, "g");
+    var content = editor.getValue();
+
+    var file;
+    while (file = includes.exec(content)) {
+      var files = all_files.archivos.filter(
+        function(a){
+            return a.nombre === file[1];
+        });
+      for (var f = 0; f < files.length; f++){
+        var seen = {};
+        var m;
+        var re_sets = new RegExp(SET.source, "g");
+
+        var file_content = files[f].contenido;
+
+        while (m = re_sets.exec(file_content)) {
+          if (!re_digits.exec(m[1]) && (!curWord || m[1].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[1])) {
+            seen[m[1]] = true;
+            list.push(m[1]);
+          }
+        }
+      }
+    }
+  }
+
+  function hintsEnumsFromIncludedFiles(all_files, editor, curWord, list){
+    var re_digits = new RegExp(/^\d+$/, "g");
+    var includes = new RegExp(INCLUIR.source, "g");
+    var content = editor.getValue();
+
+    var file;
+    while (file = includes.exec(content)) {
+      var files = all_files.archivos.filter(
+        function(a){
+            return a.nombre === file[1];
+        });
+      for (var f = 0; f < files.length; f++){
+        var seen = {};
+        var m;
+        var re_enums = new RegExp(ENUMS.source, "g");
+
+        var file_content = files[f].contenido;
+
+        while (m = re_enums.exec(file_content)) {
+          var enums = m[1].replace(/\s/g,'').split(',');
+          for (var i = 0; i < enums.length; i++) {
+            if (!re_digits.exec(enums[i]) && (!curWord || enums[i].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, enums[i])) {
+              seen[enums[i]] = true;
+              list.push(enums[i]);
+            }
+          }
+        }
+      }
+    }
+  }
+
   function normal(source, setState) {
     if (source.eatWhile(whiteCharRE)) {
       return null;
@@ -410,7 +608,6 @@
     blockCommentEnd: "-}",
     lineComment: "--"
   };
-
 });
 
 CodeMirror.defineMIME("text/x-matefun", "matefun-ES");
diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
index be31779d5a40203b252915f26ed41f741ad59b92..a4b29eba9269bc53b34200cc1ffcbc66ffd1407a 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html	
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html	
@@ -56,7 +56,7 @@
                         </div>
                         <button
                             style="margin-left: 5px; float: right;"
-                            (click)="reiniciarInterprete()"
+                            (click)="mostrandoDefinicion = false; reiniciarInterprete()"
                             class="btn btn-sm btn-secondary"
                             ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)'
                             triggers="mouseenter:mouseleave"
@@ -65,7 +65,7 @@
                         </button>
                         <button
                             style="margin-left: 5px; float: right;"
-                            (click)="runCode()"
+                            (click)="mostrandoDefinicion = false; runCode()"
                             class="btn btn-sm btn-secondary"
                             ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)'
                             triggers="mouseenter:mouseleave"
@@ -113,9 +113,14 @@
                                         <input type="checkbox" style="width: 15px; display: inline-block;" name="hintsCheck" class="form-control form-control-sm" [(ngModel)]=hintsCheck>
                                         {{ "i18n.msg.codemirror.showHints" | translate }}
                                     </label>
+                                    <br>
+                                    <label>
+                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="typingCheck" class="form-control form-control-sm" [(ngModel)]=typingCheck>
+                                        {{ "i18n.msg.codemirror.functionTyping" | translate }}
+                                    </label>
                                 </div>
                                 <div class="form-group">
-                                    <button class="btn btn-secondary" (click)="saveConfig()">{{ "i18n.action.save" | translate | titleCase }}</button>
+                                    <button class="btn btn-secondary" (click)="saveConfig(); popover.close();">{{ "i18n.action.save" | translate | titleCase }}</button>
                                 </div>
                             </div>
                         </ng-template>
@@ -130,12 +135,13 @@
                                     <label><b>Ctrl+G</b> {{ "i18n.shortcuts.saveFile" | translate }}</label>
                                     <label><b>Ctrl+{{ "i18n.shortcuts.space" | translate }}</b> {{ "i18n.shortcuts.autocomplete" | translate }}</label>
                                     <label><b>Ctrl+Shift+K</b> {{ "i18n.shortcuts.comment" | translate }}</label>
+                                    <label><b>Alt+.</b> {{ "i18n.shortcuts.functionNavigation" | translate }}</label>
                                 </div>
                             </div>
                         </ng-template>
                     </form>
                 </div>
-                <codemirror class="codemirrorPrograma" [(ngModel)]="archivo.contenido" (keyup)="archivoModificado($event)" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
+                <codemirror class="codemirrorPrograma" [(ngModel)]="archivo.contenido" (keyup)="archivoModificado($event)" (click)="clickEnEditor($event)" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
                 </codemirror>
             </div>
 
@@ -161,7 +167,7 @@
 
         </div>
 
-        <div class="col-md-6">
+        <div class="col-md-6" [hidden]="mostrandoDefinicion">
             <!--  
             <ngb-tabset [destroyOnHide]=false>
                 <ngb-tab title="Programa">
@@ -195,6 +201,31 @@
             </div> -->
 
         </div>
+
+        <div class="col-md-6" [hidden]="!mostrandoDefinicion" style="top: 42px">
+            <div class="card">
+                <div class="card-header" style="height: 52.22px">
+                    <form>
+                        <div class="pull-left" *ngIf="archivoDefinicion">
+                            {{ "i18n.object.name" | translate | titleCase }}:
+                            {{archivoDefinicion?.nombre}}
+                            &nbsp;-&nbsp;
+                            {{ "i18n.action.created" | translate | titleCase }}:
+                            {{archivoDefinicion?.fechaCreacion | date}}
+                        </div>
+                        <button style="float: right;" (click)="mostrandoDefinicion = !mostrandoDefinicion">
+                            <i class="fa fa-times"></i>
+                        </button>
+                    </form>
+                </div>
+                <codemirror
+                    class="codemirrorPrograma"
+                    [(ngModel)]="archivoDefinicion.contenido"
+                    [config]="configCodeMirrorDefinicion"
+                    [ngStyle]="{'font-size': configCodeMirrorDefinicion.fontSize+'px'}">
+                </codemirror>
+            </div>
+        </div>
     </div>
     <span class="version">v{{version}}</span>
 </div>
diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts
index 3a0a6ac503cb4914134a9686858fabf424f4c4e7..92cbfd0d1ef3d71baf5db34071e4ac1305d6461f 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts	
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts	
@@ -1,4 +1,4 @@
-import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef } from '@angular/core';
+import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef, QueryList, ViewChildren } from '@angular/core';
 import { CanvasModule} from '../canvas/canvas.module';
 import { CanvasComponent } from '../canvas/canvas.component';
 import { Http, JsonpModule } from '@angular/http';
@@ -24,6 +24,7 @@ import { Graph2DComponent } from '../plotter/graph2D/graph2D.component';
 import { Graph3DComponent } from '../plotter/graph3D/graph3D.component';
 import { TranslateService } from '@ngx-translate/core';
 import { TitleCasePipe } from '../../shared/pipes/titlecase.pipe';
+import { Router, NavigationExtras } from '@angular/router';
 
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
@@ -44,8 +45,10 @@ import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/comment/comment.js';
 
-import './codemirror/matefun-mode-ES.js'
-import './codemirror/matefun-mode-EN.js'
+import './codemirror/matefun-mode-ES.js';
+import './codemirror/matefun-mode-EN.js';
+import './codemirror/addons/functions_definition_EN.js';
+import './codemirror/addons/functions_definition_ES.js';
 
 import * as npm from './../../../../package.json'
 
@@ -78,11 +81,16 @@ export class MateFunComponent {
     argumentoI = false;
     argumentoF = false;
     hintsCheck = true;
+    typingCheck = true;
     editableLoaded = false;
     editDialogFired = false;
     archivosTree :any;
     idRecorridos: any;
     code: string ='';
+    mostrandoDefinicion = false;
+    archivoDefinicion = "";
+    jump = false;
+    jump_word = "";
     configCodeMirror = {
         readOnly: false,
         lineNumbers: true,
@@ -100,8 +108,10 @@ export class MateFunComponent {
         hintOptions: {
             completeSingle: false,
             closeCharacters: /[^\d\w\_]/
-        }
+        },
+        files: null
     };
+    configCodeMirrorDefinicion = {};
     themes = ['3024-day', '3024-night', 'abcdef', 'ambiance-mobile', 'ambiance', 'base16-dark', 'base16-light', 'bespin', 'blackboard', 'cobalt', 'colorforth', 'dracula', 'duotone-dark', 'duotone-light', 'eclipse', 'elegant', 'erlang-dark', 'hopscotch', 'icecoder', 'isotope', 'lesser-dark', 'liquibyte', 'material', 'mbo', 'mdn-like', 'midnight', 'monokai', 'neat', 'neo', 'night', 'panda-syntax', 'paraiso-dark', 'paraiso-light', 'pastel-on-dark', 'railscasts', 'rubyblue', 'seti', 'solarized', 'the-matrix', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'ttcn', 'twilight', 'vibrant-ink', 'xq-dark', 'xq-light', 'yeti', 'zenburn']
     version: string = npm.version;
 
@@ -114,7 +124,8 @@ export class MateFunComponent {
         private sessionService: SessionService,
         private dialogService:DialogService,
         private usuarioService: UsuarioService,
-        public translate: TranslateService) {
+        public translate: TranslateService,
+        private router: Router) {
 
         // i18n
         this.translateService = translate;
@@ -143,16 +154,20 @@ export class MateFunComponent {
         this.code = "my code";
         let svg : string = '';
 
+        for (var key in this.configCodeMirror){
+            this.configCodeMirrorDefinicion[key] = this.configCodeMirror[key];
+        }
+        this.configCodeMirrorDefinicion['readOnly'] = true;
     }
 
 
-    @ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent;
+    @ViewChildren(CodemirrorComponent) codemirror: QueryList<CodemirrorComponent>;
     // @ViewChild(NgbPopover) popover: NgbPopover;
     @ViewChild('popover') popover: NgbPopover;
 
     updateConfig(theme){
         this.configCodeMirror.theme = theme;
-        this.codemirror.instance.setOption('theme', theme); 
+        this.codemirror.first.instance.setOption('theme', theme); 
         sessionStorage.setItem('codeMirrorConfig',JSON.stringify(this.configCodeMirror));
     }
 
@@ -183,7 +198,7 @@ export class MateFunComponent {
         node.id = "cursorpos-panel";
         node.className = "panel bottom";
         this.cursorPanelLabel = node.appendChild(document.createElement("span"));
-        var cm = this.codemirror.instance;
+        var cm = this.codemirror.first.instance;
         var x = cm.getCursor().line;
         var y = cm.getCursor().ch; 
         x = (Number(x) + 1).toString();
@@ -192,10 +207,10 @@ export class MateFunComponent {
         this.cursorPanelLabel.textContent = cursorPositionTranslate + ": (" + x + "," + y + ")";    
 
 
-        this.cursorPanel = this.codemirror.instance.addPanel(node, {position: "bottom", stable: true});
+        this.cursorPanel = this.codemirror.first.instance.addPanel(node, {position: "bottom", stable: true});
         var that = this;
         //agregamos el evento que setea la posición
-        this.codemirror.instance.on("cursorActivity",function(cm){
+        this.codemirror.first.instance.on("cursorActivity",function(cm){
             var x = cm.getCursor().line;
             var y = cm.getCursor().ch; 
             x = (Number(x) + 1).toString();
@@ -203,7 +218,7 @@ export class MateFunComponent {
             that.cursorPanel.node.innerText = cursorPositionTranslate + ": (" + x + "," + y + ")";    
         });
 
-        this.codemirror.instance.on("keyHandled",function(cm,name,evt){
+        this.codemirror.first.instance.on("keyHandled",function(cm,name,evt){
             if(name.code==="Digit1" && name.ctrlKey && name.shiftKey){
                 that.seleccionarDirectorio();
             } else if(name.code==="Digit2" && name.ctrlKey && name.shiftKey){
@@ -211,10 +226,10 @@ export class MateFunComponent {
             }
         });
 
-        this.codemirror.instance.on("keypress",function(cm,name,evt){
+        this.codemirror.first.instance.on("keypress",function(cm,name,evt){
 
             if(!that.editDialogFired && JSON.parse(sessionStorage.currentUser).tipo === "docente" && cm.options.readOnly){
-                codeMirrorRef = that.codemirror.instance;
+                codeMirrorRef = that.codemirror.first.instance;
                 componentRef = that;
                 that.showConfirm(); 
             }
@@ -286,6 +301,7 @@ export class MateFunComponent {
     }
 
     ngOnInit() {
+        window['matefunComponent'] = { component: this };
 
         this.ghciService.rendered(); 
 
@@ -325,9 +341,9 @@ export class MateFunComponent {
                 document.getElementById("ProgramBtn").click();
                 var that  = componentRef;
                 setTimeout(function() {
-                    that.codemirror.instance.focus();
+                    that.codemirror.first.instance.focus();
                 },250);
-                componentRef.codemirror.instance.focus();
+                componentRef.codemirror.first.instance.focus();
                 focus ="program";
                 return false;
             }  else if(evtobj.ctrlKey && evtobj.altKey && evtobj.key.toLowerCase() ==="c"){
@@ -356,16 +372,20 @@ export class MateFunComponent {
     }
 
     ngAfterViewInit() {
+        this.codemirror.last.instance.on('change', () => {
+            this.makeAJump();
+        });
+
         componentRef = this;
-        if(this.codemirror.instance!=null && !this.cursorLabelInit){
+        if(this.codemirror.first.instance!=null && !this.cursorLabelInit){
             this.cursorLabelInit = true;
-            this.codemirror.instance.setOption('theme', this.configCodeMirror.theme);
+            this.codemirror.first.instance.setOption('theme', this.configCodeMirror.theme);
             this.makePanel();    
         }
-        if(!this.editableLoaded && this.codemirror.instance!=null &&(this.sessionService.archivo.editable!==undefined)){
+        if(!this.editableLoaded && this.codemirror.first.instance!=null &&(this.sessionService.archivo.editable!==undefined)){
             try{
                 var editable = this.sessionService.archivo.editable && (this.sessionService.archivo.estado == 'Edicion' || this.sessionService.archivo.estado == 'Devuelto');
-                this.codemirror.instance.options.readOnly = !editable;
+                this.codemirror.first.instance.options.readOnly = !editable;
                 this.editableLoaded = true;
 
 
@@ -377,6 +397,13 @@ export class MateFunComponent {
 
     }
     
+    makeAJump(){
+        if (this.jump){
+            this.jump = false;
+            this.jumpExternalFile(this.jump_word);
+        }
+    }
+    
     htmlEncode(value:string){
         return value
         .replace('Prelude> ','')
@@ -444,16 +471,44 @@ export class MateFunComponent {
 
     archivoModificado(event){
         if (this.hintsCheck && !event.ctrlKey && !event.altKey){
-            if (/^[\w\_\d]$/.test(event.key) || event.key == 'Enter')
-                this.codemirror.instance.showHint(event);
+            if (/^[\w\_\d]$/.test(event.key) || event.key == 'Enter'){
+                this.codemirror.first.instance.options.files = this.archivosTree;
+                this.codemirror.first.instance.showHint(event);
+            }
             if(this.copiaNombreArchivo!=this.archivo.nombre || this.copiaContenidoArchivo != this.archivo.contenido){
                 this.modificado = true;
             }else{
                 this.modificado = false;
             }
+        }else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.first.instance.toggleComment();
+        else if (event.altKey && event.key == '.') this.codemirror.first.instance.jumpToDefinition(this.archivosTree, this.codemirror.first.instance.doc, event);
+    }
+
+    goToFilesPreview(file_found, word){
+        this.mostrandoDefinicion = true;
+        for (var key in this.configCodeMirror){
+            this.configCodeMirrorDefinicion[key] = this.configCodeMirror[key];
         }
-        if (event.ctrlKey && event.shiftKey && event.key == 'K')
-            this.codemirror.instance.toggleComment();
+        this.configCodeMirrorDefinicion['readOnly'] = true;
+        this.archivoDefinicion = this.archivosTree.archivos.filter(a => a.id == parseInt(file_found.id))[0];
+        this.jump = true;  
+        this.jump_word = word;
+        this.jumpExternalFile(word);
+    }
+
+    jumpExternalFile(word){
+        this.codemirror.last.instance.jumpToDefinitionByWord(this.codemirror.last.instance.doc, word);
+    }
+
+    clickEnEditor(event){
+        if (this.typingCheck){
+            let currentSession = sessionStorage.getItem("currentUser"); 
+            let langCode = currentSession ? JSON.parse(currentSession).language : 'es';
+            if (langCode == 'en')
+                this.codemirror.first.instance.functionDefinitionEN(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.first.instance.doc, event);
+            else if (langCode == 'es')
+                this.codemirror.first.instance.functionDefinitionES(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.first.instance.doc, event);
+    }
     }
 
     guardarArchivo(){
@@ -490,8 +545,7 @@ export class MateFunComponent {
         }
     }
     runCode(){
-
-        this.ghciService.setCodemirrorRef(this.codemirror.instance);
+        this.ghciService.setCodemirrorRef(this.codemirror.first.instance);
         this.ghciService.resetGutters();
         var regex = /^[A-Z]/
         if(this.archivo.nombre.trim() == ""){
diff --git a/Frontend Angular 4/src/assets/i18n/en.json b/Frontend Angular 4/src/assets/i18n/en.json
index 2e3194ff602ff7290895ffa004b1ee3567a835be..f8d6d324b50a310317566da41ebf971cc2e949bb 100644
--- a/Frontend Angular 4/src/assets/i18n/en.json	
+++ b/Frontend Angular 4/src/assets/i18n/en.json	
@@ -73,7 +73,8 @@
                 "functionWarnings": "Show warnings of use of functions",
                 "infixOperatorsWarnings" : "Show warnings of use of infix operators",
                 "cursorPosition" : "Cursor position",
-                "showHints" : "Show autocomplete hints"
+                "showHints" : "Show autocomplete hints",
+                "functionTyping" : "Show functions typing"
             },
             "figure" : {
                 "multiPlot" : "Multi graph",
@@ -128,7 +129,8 @@
             "saveFile" : "Save File",
             "autocomplete" : "Autocomplete",
             "space" : "Space",
-            "comment" : "Comment/Uncomment"
+            "comment" : "Comment/Uncomment",
+            "functionNavigation" : "Jump to the definition"
         }
     }
 }
diff --git a/Frontend Angular 4/src/assets/i18n/es.json b/Frontend Angular 4/src/assets/i18n/es.json
index 62e28832691e8c4019ab6a9b1f12a76c51a687ae..f13b7b154cf12586d9cbb17af726f6b6b6bfbd43 100644
--- a/Frontend Angular 4/src/assets/i18n/es.json	
+++ b/Frontend Angular 4/src/assets/i18n/es.json	
@@ -73,7 +73,8 @@
                 "functionWarnings": "Mostrar advertencias de uso de funciones",
                 "infixOperatorsWarnings" : "Mostrar advertencias de uso de operadores infijos",
                 "cursorPosition" : "Posición del cursor",
-                "showHints" : "Mostrar sugerencias de autocompletar"
+                "showHints" : "Mostrar sugerencias de autocompletar",
+                "functionTyping" : "Mostrar tipado de funciones"
             },
             "figure" : {
                 "multiPlot" : "Multi gráfica",
@@ -128,7 +129,8 @@
             "saveFile" : "Guardar archivo",
             "autocomplete" : "Autocompletar",
             "space" : "Espacio",
-            "comment" : "Comentar/Descomentar"
+            "comment" : "Comentar/Descomentar",
+            "functionNavigation" : "Saltar a la definición"
         }
     }
 }
diff --git a/Frontend Angular 4/src/styles/hints.css b/Frontend Angular 4/src/styles/hints.css
index e533fc2863ba89cdfa3a9e7686ed8be3d5062353..c036deffd842d4fad397d54f4cd1a4bc40bd2e94 100644
--- a/Frontend Angular 4/src/styles/hints.css	
+++ b/Frontend Angular 4/src/styles/hints.css	
@@ -9,7 +9,7 @@
   box-shadow: 2px 3px 5px rgba(0,0,0,.2);
   border-radius: 3px;
   border: 1px solid rgb(43, 43, 43) !important;
-  background: black !important;
+  background: rgb(43, 43, 43) !important;
   font-size: 90%;
   font-family: monospace;
   
@@ -24,9 +24,22 @@
   white-space: pre;
   color: white !important;
   cursor: pointer;
+} 
+
+.CodeMirror-function-definition {
+  margin: 5px;
+  padding: 0 4px;
+  border-radius: 2px;
+  white-space: pre;
+  color: white !important;
+  cursor: default;
+}
+
+.function-definition-title {
+  color: goldenrod;
 }
 
 li.CodeMirror-hint-active {
   background: rgb(21, 117, 226) !important;
   color: white;
-}
+}