text: /*
  Scripts to create interactive comboboxes in SVG using ECMA script
  Copyright (C) <2006>  <Andreas Neumann>
  Version 1.2.1, 2006-10-03
  neumann@karto.baug.ethz.ch
  http://www.carto.net/
  http://www.carto.net/neumann/
  
  Credits:
  
  ----
  
  current version: 1.2.1
  
  version history:
  1.0 (2006-02-20)
  initial version
  
  1.1 (2006-05-17)
  decoupled styling from this file, fixes event handling so people can scroll outside scroller if mouse is down (events now added to root element)
  
  1.2 (2006-10-02)
  changed internally "groupId" to "id" to make it consistent with other GUI elements, introduced "parentId" as a new constructor parameter for the same reason, introduced new methods "resize()" and "moveTo()"
  
  1.2.1 (2006-10-03)
  corrected a slight bug regarding DOM hierarchy of created elements
  
  -------
  
  
  This ECMA script library is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 2.1 of the License, or (at your option) any later version.
  
  This library is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
  
  You should have received a copy of the GNU Lesser General Public
  License along with this library (lesser_gpl.txt); if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  
  ----
  
  original document site: http://www.carto.net/papers/svg/gui/combobox/
  Please contact the author in case you want to use code or ideas commercially.
  If you use this code, please include this copyright header, the included full
  LGPL 2.1 text and read the terms provided in the LGPL 2.1 license
  (http://www.gnu.org/copyleft/lesser.txt)
  
  -------------------------------
  
  If you wish, you can modify parameters (such as "look and feel") in the function "combobox" (constructor).
  You can adapt colors, fonts, cellpaddings, etc.
  
  -------------------------------
  
  Please report bugs and send improvements to neumann@karto.baug.ethz.ch
  If you use this control, please link to the original (http://www.carto.net/papers/svg/gui/combobox/)
  somewhere in the source-code-comment or the "about" of your project and give credits, thanks!
  
  */
  
  function combobox(id,parentNode,elementsArray,width,xOffset,yOffset,cellHeight,textPadding,heightNrElements,multiple,offsetValue,textStyles,boxStyles,scrollbarStyles,smallrectStyles,highlightStyles,triangleStyles,functionToCall) {
      var nrArguments = 18;
      var createCombobox= true;
      if (arguments.length == nrArguments) {
          //get constructor variables
          this.id = id;
          this.parentNode = parentNode;
          this.elementsArray = elementsArray;
          this.width = width;
          this.xOffset = xOffset;
          this.yOffset = yOffset;
          this.cellHeight = cellHeight; //cellHeight in viewBox coordinates
          this.textPadding = textPadding; //this is relative to the left of the cell
          this.heightNrElements = heightNrElements;
          //check if heightNrElements is bigger than elements in the array
          if (this.heightNrElements > this.elementsArray.length) {
              this.heightNrElements = this.elementsArray.length;
          }
          this.multiple = multiple;
          this.curLowerIndex = offsetValue;
          //check if curLowIndex is within range
          if (this.curLowerIndex > (this.elementsArray.length - this.heightNrElements)) {
              this.curLowerIndex = this.elementsArray.length - this.heightNrElements;
          }
          this.textStyles = textStyles; //array of literals containing presentation attributes for text
          if (!this.textStyles["font-size"]) {
              this.textStyles["font-size"] = "11";
          }
          this.boxStyles = boxStyles; //array of literals containing presentation attributes for the sel box
          if (!this.boxStyles["fill"]) {
              this.boxStyles["fill"] = "white"; //this fill value is also used for boxes under indiv. text elements (unselected status)
          }    
          if (!this.boxStyles["stroke"]) {
              this.boxStyles["stroke"] = "dimgray";
          }    
          if (!this.boxStyles["stroke-width"]) {
              this.boxStyles["stroke-width"] = 1;
          }
          this.scrollbarStyles = scrollbarStyles; //array of literals containing presentation attributes for the scrollbar
          this.smallrectStyles = smallrectStyles; //array of literals containing presentation attributes for the small rectangle next to selectbox
          this.highlightStyles = highlightStyles; //array of literals containing presentation attributes for the highlighted rectangles
          this.triangleStyles = triangleStyles; //array of literals containing presentation attributes for the triangle in the selectionList, also applies to fill of scroller
          this.functionToCall = functionToCall;
          
          //calculate other values
          this.triangleFourth = Math.round(this.cellHeight / 4); //this is only used internally
          this.textPadding = textPadding; //this is relative to the left of the cell
          this.textPaddingVertical = this.cellHeight - (this.cellHeight - this.textStyles["font-size"]) * 0.7; //this is relative to the top of the cell
          this.scrollerMinHeight = this.cellHeight * 0.5; //minimal height of the scroller rect
  
          //status variables
          this.scrollStep = 0; //y-value to go for one element
          this.scrollerHeight = 0; //height of dragable scroller bar
          this.scrollActive = false; //determines if scrolling per up/down button is active
          this.panY = false; //stores the y value of event
          this.scrollCumulus = 0; //if value is less than a scrollstep we need to accumulate scroll values
          this.scrollDir = ""; //later holds "up" and "down"
          this.exists = true; //true means it exists, gets value false if method "removeSelectionList" is called
          this.mouseDownStatus = false; //status that specifies if mouse is down or up on individual elements
          this.pressedKeys = ""; //stores key events (pressed char values)
          this.keyTimer = undefined;
          this.svgRootHasEventListener = false; //status variable to define if svg root has key and mouseover listener or not
      }
      else {
          createCombobox = false;
          alert("Error ("+id+"): wrong nr of arguments! You have to pass over "+nrArguments+" parameters.");
      }
      if (createCombobox) {
          //timer stuff
          this.timer = new Timer(this); //a Timer instance for calling the functionToCall
          this.timerMs = 200; //a constant of this object that is used in conjunction with the timer - functionToCall is called after 200 ms
  
          //create combobox
          var result = this.testParent();
          if (result) {
              //this.parentGroup = document.getElementById(this.id);
              this.createOrUpdateCombobox();
          }
          else {
              alert("could not create or reference 'parentNode' of combobox with id '"+this.id+"'");
          }            
      }
      else {
          alert("Could not create combobox with id '"+id+"' due to errors in the constructor parameters");    
      }    
  }
  
  //test if parent group exists or create a new group at the end of the file
  combobox.prototype.testParent = function() {
      //test if of type object
      var nodeValid = false;
      if (typeof(this.parentNode) == "object") {
          if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g") {
              this.parentGroup = this.parentNode;
              nodeValid = true;
          }
      }
      else if (typeof(this.parentNode) == "string") { 
          //first test if Windows group exists
          if (!document.getElementById(this.parentNode)) {
              this.parentGroup = document.createElementNS(svgNS,"g");
              this.parentGroup.setAttributeNS(null,"id",this.parentNode);
              document.documentElement.appendChild(this.parentGroup);
              nodeValid = true;
             }
             else {
                 this.parentGroup = document.getElementById(this.parentNode);
                 nodeValid = true;
             }
         }
         return nodeValid;
  }
  
  combobox.prototype.createOrUpdateCombobox = function() {
      //check if there are more elements in the array than heightNrElements
      if (this.heightNrElements < this.elementsArray.length) {
          nrSelections = this.heightNrElements;
      }
      else {
          nrSelections = this.elementsArray.length;
      }
      //calculate height
      var comboboxHeight = this.cellHeight * nrSelections;
      //rectangle below (only fill, stroke is added at a separate rect)
      var created = true;
      if (!this.rectBelowBox) {
          this.rectBelowBox = document.createElementNS(svgNS,"rect");
          this.rectBelowBox.setAttributeNS(null,"stroke","none");
          created = false;
      }
      this.rectBelowBox.setAttributeNS(null,"x",this.xOffset);
      this.rectBelowBox.setAttributeNS(null,"y",this.yOffset);
      this.rectBelowBox.setAttributeNS(null,"width",this.width - this.cellHeight);
      this.rectBelowBox.setAttributeNS(null,"height",comboboxHeight);
      for (var attrib in this.boxStyles) {
          if (attrib != "stroke" && attrib != "stroke-width") {
              this.rectBelowBox.setAttributeNS(null,attrib,this.boxStyles[attrib]);
          }
      }        
      if (!created) {
          this.parentGroup.appendChild(this.rectBelowBox);
      }
      //create temporary group for indiv. combo elements
      var comboElementsGroupCreated = false;
      if (this.comboElementsGroup) {
          this.parentGroup.removeChild(this.comboElementsGroup);
          comboElementsGroupCreated = true;
      }
      this.comboElementsGroup = document.createElementNS(svgNS,"g");
      if (comboElementsGroupCreated) {
          this.parentGroup.insertBefore(this.comboElementsGroup,this.rectAboveBox);
      }
      else {
          this.parentGroup.appendChild(this.comboElementsGroup);        
      }
  
      //create rectangle above combobox (only stroke)
      created = true;
      if (!this.rectAboveBox) {
          this.rectAboveBox = document.createElementNS(svgNS,"rect");
          this.rectAboveBox.setAttributeNS(null,"fill","none");
          created = false;
      }
      this.rectAboveBox.setAttributeNS(null,"x",this.xOffset);
      this.rectAboveBox.setAttributeNS(null,"y",this.yOffset);
      this.rectAboveBox.setAttributeNS(null,"width",this.width - this.cellHeight);
      this.rectAboveBox.setAttributeNS(null,"height",comboboxHeight);
      for (var attrib in this.boxStyles) {
          if (attrib != "fill") {
              this.rectAboveBox.setAttributeNS(null,attrib,this.boxStyles[attrib]);
          }
      }        
      if (!created) {
          this.parentGroup.appendChild(this.rectAboveBox);
      }
      //build textElements from array
      //hold currentSelection Index to unroll list at new offset
      for (var i=0;i<nrSelections;i++) {
          //add rectangles to capture events
          var node = document.createElementNS(svgNS,"rect");
          node.setAttributeNS(null,"x",this.xOffset + this.textPadding / 2);
          node.setAttributeNS(null,"y",this.yOffset + this.cellHeight * i);
          node.setAttributeNS(null,"width",this.width - this.cellHeight - this.textPadding);
          node.setAttributeNS(null,"height",this.cellHeight);
          if (this.elementsArray[this.curLowerIndex + i].value) {
              for (var attrib in this.highlightStyles) {
                  node.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
              }        
          }
          else {
              node.setAttributeNS(null,"fill",this.boxStyles["fill"]);
          }
          node.setAttributeNS(null,"id","selHighlightSelection_" + this.id + "_" + (i + this.curLowerIndex));
          //add event-handler
          node.addEventListener("mousedown", this, false);
          node.addEventListener("mouseover", this, false);
          node.addEventListener("mouseup", this, false);
          this.comboElementsGroup.appendChild(node);
          //add text-elements
          var node = document.createElementNS(svgNS,"text");
          node.setAttributeNS(null,"id","selTexts_" + this.id + "_" + (i + this.curLowerIndex));
          node.setAttributeNS(null,"x",this.xOffset + this.textPadding);
          node.setAttributeNS(null,"y",this.yOffset + this.textPaddingVertical + this.cellHeight * i);
          node.setAttributeNS(null,"pointer-events","none");
          var value = "";
          for (var attrib in this.textStyles) {
              value = this.textStyles[attrib];
              if (attrib == "font-size") {
                  value += "px";
              }
              node.setAttributeNS(null,attrib,value);
          }        
          var selectionText = document.createTextNode(this.elementsArray[this.curLowerIndex + i].key);
          node.appendChild(selectionText);
          this.comboElementsGroup.appendChild(node);
      }
  
      //create Scrollbar
      if (this.heightNrElements < this.elementsArray.length) {
          //calculate scrollstep
          this.scrollerHeight = (this.heightNrElements / this.elementsArray.length) * (comboboxHeight - 2 * this.cellHeight);
          if (this.scrollerHeight < this.scrollerMinHeight) {
              this.scrollerHeight = this.scrollerMinHeight;
          }
          this.scrollStep = (comboboxHeight - 2 * this.cellHeight - this.scrollerHeight) / (this.elementsArray.length - this.heightNrElements);
          //scrollbar
          created = true;
          if (!this.scrollbarRect) {
              this.scrollbarRect = document.createElementNS(svgNS,"rect");
              this.scrollbarRect.addEventListener("mousedown", this, false);
              this.scrollbarRect.setAttributeNS(null,"id","selScrollbarRect_"+this.id);
              created = false;
          }
          this.scrollbarRect.setAttributeNS(null,"x",this.xOffset + this.width - this.cellHeight);
          this.scrollbarRect.setAttributeNS(null,"y",this.yOffset + this.cellHeight);
          this.scrollbarRect.setAttributeNS(null,"width",this.cellHeight);
          this.scrollbarRect.setAttributeNS(null,"height",comboboxHeight - this.cellHeight * 2);
          for (var attrib in this.scrollbarStyles) {
              this.scrollbarRect.setAttributeNS(null,attrib,this.scrollbarStyles[attrib]);
          }        
          if (!created) {
              this.parentGroup.appendChild(this.scrollbarRect);
          }
          //upper rectangle
          created = true;
          if (!this.scrollUpperRect) {
              this.scrollUpperRect = document.createElementNS(svgNS,"rect");
              this.scrollUpperRect.setAttributeNS(null,"id","selScrollUpperRect_"+this.id);
              this.scrollUpperRect.addEventListener("mousedown", this, false);
              this.scrollUpperRect.addEventListener("mouseup", this, false);
              created = false;
          }
          this.scrollUpperRect.setAttributeNS(null,"x",this.xOffset + this.width - this.cellHeight);
          this.scrollUpperRect.setAttributeNS(null,"y",this.yOffset);
          this.scrollUpperRect.setAttributeNS(null,"width",this.cellHeight);
          this.scrollUpperRect.setAttributeNS(null,"height",this.cellHeight);
          for (var attrib in this.smallrectStyles) {
              this.scrollUpperRect.setAttributeNS(null,attrib,this.smallrectStyles[attrib]);
          }        
          if (!created) {
              this.parentGroup.appendChild(this.scrollUpperRect);
          }
          //upper triangle
          created = true;
          if (!this.upperTriangle) {
              this.upperTriangle = document.createElementNS(svgNS,"path");
              this.upperTriangle.setAttributeNS(null,"pointer-events","none");
              created = false;
          }
          var myPath = "M"+(this.xOffset + this.width - 3 * this.triangleFourth)+" "+(this.yOffset + 3 * this.triangleFourth)+" L"+(this.xOffset + this.width - this.triangleFourth)+" "+(this.yOffset + 3 * this.triangleFourth)+" L"+(this.xOffset + this.width - 2 * this.triangleFourth)+" "+(this.yOffset + this.triangleFourth)+" Z";
          this.upperTriangle.setAttributeNS(null,"d",myPath);
          for (var attrib in this.triangleStyles) {
              this.upperTriangle.setAttributeNS(null,attrib,this.triangleStyles[attrib]);
          }        
          if (!this.created) {
              this.parentGroup.appendChild(this.upperTriangle);
          }
          //lower rectangle
          created = true;
          if (!this.scrollLowerRect) {
              this.scrollLowerRect = document.createElementNS(svgNS,"rect");
              this.scrollLowerRect.setAttributeNS(null,"id","selScrollLowerRect_" + this.id);
              this.scrollLowerRect.addEventListener("mousedown", this, false);
              this.scrollLowerRect.addEventListener("mouseup", this, false);
              created = false;
          }
          this.scrollLowerRect.setAttributeNS(null,"x",this.xOffset + this.width - this.cellHeight);
          this.scrollLowerRect.setAttributeNS(null,"y",this.yOffset + comboboxHeight - this.cellHeight);
          this.scrollLowerRect.setAttributeNS(null,"width",this.cellHeight);
          this.scrollLowerRect.setAttributeNS(null,"height",this.cellHeight);
          for (var attrib in this.smallrectStyles) {
              this.scrollLowerRect.setAttributeNS(null,attrib,this.smallrectStyles[attrib]);
          }        
          if (!created) {
              this.parentGroup.appendChild(this.scrollLowerRect);
          }
          //lower triangle
          created = true;
          if (!this.lowerTriangle) {
              this.lowerTriangle = document.createElementNS(svgNS,"path");
              this.lowerTriangle.setAttributeNS(null,"pointer-events","none");
              created = false;
          }
          var myPath = "M"+(this.xOffset + this.width - 3 * this.triangleFourth)+" "+(this.yOffset + comboboxHeight - this.cellHeight + this.triangleFourth)+" L"+(this.xOffset + this.width - this.triangleFourth)+" "+(this.yOffset + comboboxHeight - this.cellHeight + this.triangleFourth)+" L"+(this.xOffset + this.width - 2 * this.triangleFourth)+" "+(this.yOffset + comboboxHeight - this.cellHeight + 3 * this.triangleFourth)+" Z";
          this.lowerTriangle.setAttributeNS(null,"d",myPath);
          for (var attrib in this.triangleStyles) {
              this.lowerTriangle.setAttributeNS(null,attrib,this.triangleStyles[attrib]);
          }        
          if (!created) {
              this.parentGroup.appendChild(this.lowerTriangle);
          }
          //scrollerRect
          created = true;
          if (!this.scroller) {
              this.scroller = document.createElementNS(svgNS,"rect");
              this.scroller.setAttributeNS(null,"pointer-events","none");
              this.scroller.setAttributeNS(null,"id","selScroller_"+this.id);
              created = false;
          }
          this.scroller.setAttributeNS(null,"x",this.xOffset + this.width - this.cellHeight);
          this.scroller.setAttributeNS(null,"y",this.yOffset + this.cellHeight + this.scrollStep * this.curLowerIndex);
          this.scroller.setAttributeNS(null,"width",this.cellHeight);
          this.scroller.setAttributeNS(null,"height",this.scrollerHeight);
          for (var attrib in this.smallrectStyles) {
              this.scroller.setAttributeNS(null,attrib,this.smallrectStyles[attrib]);
          }        
          if (!created) {
              this.parentGroup.appendChild(this.scroller);
          }
      }
  }
  
  combobox.prototype.handleEvent = function(evt) {
      var el = evt.currentTarget;
      var callerId = el.getAttributeNS(null,"id");
      var myRegExp = new RegExp(this.id);
      if (evt.type == "mouseover") {
          if (myRegExp.test(callerId)) {
              if (callerId.match(/\bselHighlightSelection_/)) {
                  if (this.mouseDownStatus) {
                      this.selectOrUnselect(evt);
                      evt.stopPropagation();
                  }
                  else {
                      if (!this.svgRootHasEventListener) {
                          document.documentElement.addEventListener("mouseover",this,false);
                          document.documentElement.addEventListener("keypress",this,false);
                          this.svgRootHasEventListener = true;
                      }
                  }
              }
          }
          if (!myRegExp.test(evt.target.getAttributeNS(null,"id"))) {
              //case that the event comes from the documentRoot element
              //but not from the combobox itself
              this.mouseDownStatus = false;
              document.documentElement.removeEventListener("mouseover",this,false);
              document.documentElement.removeEventListener("keypress",this,false);
              this.svgRootHasEventListener = false;
          }
      }
      if (evt.type == "mousedown") {
          if (myRegExp.test(callerId)) {
              if (callerId.match(/\bselHighlightSelection_/)) {
                  this.selectOrUnselect(evt);
                  this.mouseDownStatus = true;
                  document.documentElement.addEventListener("mouseup",this,false);
                  evt.stopPropagation();
              }
          }
          if (callerId.match(/\bselScrollUpperRect_|\bselScrollLowerRect/)) {
              this.scrollDir = "down";
              this.scrollActive = true;
              document.documentElement.addEventListener("mouseup",this,false);
              if (callerId.match(/UpperRect/)) {
                  this.scrollDir = "up";
              }
              this.scroll(this.scrollDir,1,true); //1 is one element to scroll, true says that we should move scrollbar
              this.timer.setTimeout("scrollPerButton",400)
          }
          if (callerId.match(/\bselScrollbarRect_/)) {
              this.scrollBarMove(evt);
          }
      }
      if (evt.type == "mouseup") {
          if (myRegExp.test(callerId)) {
              if (callerId.match(/\bselHighlightSelection_/)) {
                  this.mouseDownStatus = false;
                  if (this.panStatus) {
                      this.scrollBarMove(evt);                    
                  }
                  if (this.scrollActive) {
                      this.scrollActive = false;
                      document.documentElement.removeEventListener("mouseup",this,false);
                  }
                  evt.stopPropagation();
              }
              if (callerId.match(/\bselScrollUpperRect_|\bselScrollLowerRect/)) {
                  this.scrollActive = false;
              }
          }
          if (el.nodeName == "svg") {
              if (this.panStatus) {
                  //stop scroll mode
                  this.scrollBarMove(evt);                
              }
              if (this.scrollActive) {
                  this.scrollActive = false;
                  document.documentElement.removeEventListener("mouseup",this,false);                
              }
          }
      }
      if (evt.type == "mousemove") {
          if (el.nodeName == "svg") {
              this.scrollBarMove(evt);
          }
      }    //add keypress event
      if (evt.type == "keypress") {
          if (evt.charCode) {
              var character = String.fromCharCode(evt.charCode).toLowerCase();
          }
          else {
              //case opera and others
              var character = String.fromCharCode(evt.keyCode).toLowerCase();
              if (evt.keyCode == 0 || evt.keyCode == 16 || evt.keyCode == 17 || evt.keyCode == 18) {
                  //shift key
                  character = "";
              }
          }
  
          this.pressedKeys += character;
  
          if (character.length > 0) {
                  if (this.keyTimer) {
                      this.timer.clearTimeout(this.keyTimer);
                  }
                  this.keyTimer = this.timer.setTimeout("resetPressedKeys",1000);
                  this.scrollToKey();
          }
      }
  }
  
  combobox.prototype.moveTo = function(moveX,moveY) {
      this.xOffset = moveX;
      this.yOffset = moveY;
      this.createOrUpdateCombobox();
  }
  
  combobox.prototype.resize = function(newWidth) {
      this.width = newWidth;
      this.createOrUpdateCombobox();
  }
  
  combobox.prototype.resetPressedKeys = function() {
       this.keyTimer = undefined;
       this.pressedKeys = "";
  }
  
  combobox.prototype.selectOrUnselect = function(evt) {
      var mySelEl = evt.target;
      var result = mySelEl.getAttributeNS(null,"id").split("_");
      var idNr = result[2]; //the numerical id in the array
      if (this.multiple) {
          //multiple selections are allowed
          if (evt.type == "mousedown") {
              if (evt.ctrlKey) {
                  if (this.elementsArray[idNr].value) {
                      mySelEl.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                      if (mySelEl.hasAttributeNS(null,"fill-opacity")) {
                          mySelEl.removeAttributeNS(null,"fill-opacity");
                      }
                      this.elementsArray[idNr].value = false;
                  }
                  else {
                      for (var attrib in this.highlightStyles) {
                          mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                      }        
                      this.elementsArray[idNr].value = true;
                  }
              }
              else {
                  if (evt.shiftKey) {
                      var selectedArray = new Array();
                      for (var i=0;i<this.elementsArray.length;i++) {
                          //see how many and where elements are already selected
                          if (this.elementsArray[i].value) {
                              selectedArray.push(i);
                          }
                      }
                      if (selectedArray.length == 0) {
                          //if no element was selected we select the given element
                          for (var attrib in this.highlightStyles) {
                              mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                          }        
                          this.elementsArray[idNr].value = true;
                      }
                      else {
                          //now we need to calculate the distances to other
                          var distance = this.elementsArray.length;
                          var nearestElement = 0;
                          for (var i=0;i<selectedArray.length;i++) {
                              var tempDist = Math.abs(idNr - selectedArray[i]);
                              if (tempDist < distance) {
                                  distance = tempDist;
                                  nearestElement = selectedArray[i];
                              }
                          }
                          if (nearestElement < idNr) {
                              var lowerIndex = nearestElement;
                              var upperIndex = idNr;
                          }
                          else {
                              var lowerIndex = idNr;
                              var upperIndex = nearestElement;
                          }
                          for (var i=lowerIndex;i<=upperIndex;i++) {
                              var mySelEl = document.getElementById("selHighlightSelection_" + this.id + "_" + i);
                              for (var attrib in this.highlightStyles) {
                                  mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                              }        
                              this.elementsArray[i].value = true;
                          }
                      }
                  }
                  else {
                      this.deselectAll(false);
                      for (var attrib in this.highlightStyles) {
                          mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                      }        
                      this.elementsArray[idNr].value = true;
                  }
              }
          }
          if (evt.type == "mouseover") {
              for (var attrib in this.highlightStyles) {
                  mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
              }        
              this.elementsArray[idNr].value = true;
          }
      }
      else {
          //only one selection is allowed at the time
          this.deselectAll(false);
          for (var attrib in this.highlightStyles) {
              mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
          }        
          this.elementsArray[idNr].value = true;
      }
      if (this.functionToCall) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.deselectAll = function(fireFunction) {
      for (var i=0;i<this.elementsArray.length;i++) {
          if (this.elementsArray[i].value) {
              this.elementsArray[i].value = false;
              if (i >= this.curLowerIndex && i < (this.curLowerIndex + this.heightNrElements)) {
                  var mySelEl = document.getElementById("selHighlightSelection_" + this.id + "_" + i);
                  mySelEl.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                  if (mySelEl.hasAttributeNS(null,"fill-opacity")) {
                      mySelEl.removeAttributeNS(null,"fill-opacity");
                  }
              }
          }
      }
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.selectAll = function(fireFunction) {
      for (var i=0;i<this.elementsArray.length;i++) {
          if (!this.elementsArray[i].value) {
              this.elementsArray[i].value = true;
              if (i >= this.curLowerIndex && i < (this.curLowerIndex + this.heightNrElements)) {
                  var mySelEl = document.getElementById("selHighlightSelection_" + this.id + "_" + i);
                  for (var attrib in this.highlightStyles) {
                      mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                  }        
              }
          }
      }
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.invertSelection = function(fireFunction) {
      for (var i=0;i<this.elementsArray.length;i++) {
          if (this.elementsArray[i].value) {
              this.elementsArray[i].value = false;
              if (i >= this.curLowerIndex && i < (this.curLowerIndex + this.heightNrElements)) {
                  var mySelEl = document.getElementById("selHighlightSelection_" + this.id + "_" + i);
                  mySelEl.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                  if (mySelEl.hasAttributeNS(null,"fill-opacity")) {
                      mySelEl.removeAttributeNS(null,"fill-opacity");
                  }
              }
          }
          else {
              this.elementsArray[i].value = true;
              if (i >= this.curLowerIndex && i < (this.curLowerIndex + this.heightNrElements)) {
                  var mySelEl = document.getElementById("selHighlightSelection_" + this.id + "_" + i);
                  for (var attrib in this.highlightStyles) {
                      mySelEl.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                  }        
              }
          }
      }
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.fireFunction = function() {
      var selectedArray = new Array();
      var selectedArrayIndizes = new Array();
      for (var i=0;i<this.elementsArray.length;i++) {
          //see how many and where elements are already selected
          if (this.elementsArray[i].value) {
              selectedArray.push(this.elementsArray[i].key);
              selectedArrayIndizes.push(i);
          }
      }
      if (typeof(this.functionToCall) == "function") {
          this.functionToCall(this.id,selectedArray,selectedArrayIndizes);
      }
      if (typeof(this.functionToCall) == "object") {
          this.functionToCall.getComboboxVals(this.id,selectedArray,selectedArrayIndizes);
      }
      if (typeof(this.functionToCall) == undefined) {
          return;
      }
  }
  
  combobox.prototype.scrollPerButton = function() {
      if (this.scrollActive == true) {
          this.scroll(this.scrollDir,1,true); //1 is one element to scroll, true says that we should move scrollbar
          this.timer.setTimeout("scrollPerButton",100)
      }
  }
  
  combobox.prototype.scroll = function(scrollDir,scrollNr,scrollBool) {
      if (scrollNr < this.heightNrElements) {
          if ((this.curLowerIndex > 0) && (scrollDir == "up")) {
              if (scrollNr > this.curLowerIndex) {
                  scrollNr = this.curLowerIndex;
              }
              //decrement current index
              this.curLowerIndex = this.curLowerIndex - scrollNr;
              //move scroller
              if (scrollBool == true) {
                  this.scroller.setAttributeNS(null,"y",parseFloat(this.scroller.getAttributeNS(null,"y"))+ this.scrollStep * -1);
              }
              //add upper rect elements
              for (var i=0;i<scrollNr;i++) {
                  var node = document.createElementNS(svgNS,"rect");
                  node.setAttributeNS(null,"x",this.xOffset + this.textPadding / 2);
                  node.setAttributeNS(null,"y",this.yOffset + this.cellHeight * i);
                  node.setAttributeNS(null,"width",this.width - this.cellHeight - this.textPadding);
                  node.setAttributeNS(null,"height",this.cellHeight);
                  if (this.elementsArray[this.curLowerIndex + i].value) {
                      for (var attrib in this.highlightStyles) {
                          node.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                      }        
                  }
                  else {
                      node.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                      if (node.hasAttributeNS(null,"fill-opacity")) {
                          node.removeAttributeNS(null,"fill-opacity");
                      }
                  }
                  node.setAttributeNS(null,"id","selHighlightSelection_" + this.id + "_" + (i + this.curLowerIndex));
                  //add event-handler
                  node.addEventListener("mousedown", this, false);
                  node.addEventListener("mouseover", this, false);
                  node.addEventListener("mouseup", this, false);
                  this.comboElementsGroup.appendChild(node);
                  //add text-nodes
                  var node = document.createElementNS(svgNS,"text");
                  node.setAttributeNS(null,"id","selTexts_" + this.id + "_" + (i + this.curLowerIndex));
                  node.setAttributeNS(null,"x",this.xOffset + this.textPadding);
                  node.setAttributeNS(null,"y",this.yOffset + this.textPaddingVertical + this.cellHeight * i);
                  node.setAttributeNS(null,"pointer-events","none");
                  var value = "";
                  for (var attrib in this.textStyles) {
                      value = this.textStyles[attrib];
                      if (attrib == "font-size") {
                          value += "px";
                      }
                      node.setAttributeNS(null,attrib,value);
                  }        
                  var selectionText = document.createTextNode(this.elementsArray[this.curLowerIndex + i].key);
                  node.appendChild(selectionText);
                  this.comboElementsGroup.appendChild(node);
              }
              //move middle elements
              for (var j=i;j<this.heightNrElements;j++) {
                  var node = document.getElementById("selTexts_" + this.id + "_" + (j + this.curLowerIndex));
                  node.setAttributeNS(null,"y",parseFloat(node.getAttributeNS(null,"y")) + (this.cellHeight * scrollNr));
                  var node = document.getElementById("selHighlightSelection_" + this.id + "_" + (j + this.curLowerIndex));
                  node.setAttributeNS(null,"y",parseFloat(node.getAttributeNS(null,"y")) + (this.cellHeight * scrollNr));
              }
              //remove lower elements
              for (var k=j;k<(j+scrollNr);k++) {
                  var node = document.getElementById("selTexts_" + this.id + "_" + (k + this.curLowerIndex));
                  this.comboElementsGroup.removeChild(node);
                  var node = document.getElementById("selHighlightSelection_" + this.id +"_" + (k + this.curLowerIndex));
                  this.comboElementsGroup.removeChild(node);
              }
          }
          else if ((this.curLowerIndex < (this.elementsArray.length - this.heightNrElements)) && (scrollDir == "down")) {
              //move Scroller
              if (scrollBool == true) {
                  this.scroller.setAttributeNS(null,"y",parseFloat(this.scroller.getAttributeNS(null,"y")) + this.scrollStep);
              }
              //remove most upper element
              for (var i=0;i<scrollNr;i++) {
                  var node = document.getElementById("selTexts_" + this.id + "_" + (this.curLowerIndex + i));
                  this.comboElementsGroup.removeChild(node);
                  var node = document.getElementById("selHighlightSelection_" + this.id + "_" + (this.curLowerIndex + i));
                  this.comboElementsGroup.removeChild(node);
              }
              //move middle elements
              for (var j=i;j<this.heightNrElements;j++) {
                  var node = document.getElementById("selTexts_" + this.id + "_" + (j + this.curLowerIndex));
                  node.setAttributeNS(null,"y",parseFloat(node.getAttributeNS(null,"y")) - (this.cellHeight * scrollNr));
                  var node = document.getElementById("selHighlightSelection_" + this.id + "_" + (j + this.curLowerIndex));
                  node.setAttributeNS(null,"y",parseFloat(node.getAttributeNS(null,"y")) - (this.cellHeight * scrollNr));
              }
              //add most lower element
              for (var k=j;k<(j+scrollNr);k++) {
                  var node = document.createElementNS(svgNS,"rect");
                  node.setAttributeNS(null,"x",this.xOffset + this.textPadding / 2);
                  node.setAttributeNS(null,"y",this.yOffset + this.cellHeight * (k - scrollNr));
                  node.setAttributeNS(null,"width",this.width - this.cellHeight - this.textPadding);
                  node.setAttributeNS(null,"height",this.cellHeight);
                  if (this.elementsArray[this.curLowerIndex + k].value) {
                      for (var attrib in this.highlightStyles) {
                          node.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                      }        
                  }
                  else {
                      node.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                      if (node.hasAttributeNS(null,"fill-opacity")) {
                          node.removeAttributeNS(null,"fill-opacity");
                      }
                  }
                  node.setAttribute("id","selHighlightSelection_" + this.id + "_" + (k + this.curLowerIndex));
                  //add event-handler
                  node.addEventListener("mousedown", this, false);
                  node.addEventListener("mouseover", this, false);
                  node.addEventListener("mouseup", this, false);
                  this.comboElementsGroup.appendChild(node);
                  //add text-nodes
                  var node = document.createElementNS(svgNS,"text");
                  node.setAttributeNS(null,"id","selTexts_" + this.id + "_" + (k + this.curLowerIndex));
                  node.setAttributeNS(null,"x",this.xOffset + this.textPadding);
                  node.setAttributeNS(null,"y",this.yOffset + this.textPaddingVertical + this.cellHeight * (k - scrollNr));
                  node.setAttributeNS(null,"pointer-events","none");
                  var value = "";
                  for (var attrib in this.textStyles) {
                      value = this.textStyles[attrib];
                      if (attrib == "font-size") {
                          value += "px";
                      }
                      node.setAttributeNS(null,attrib,value);
                  }        
                  var selectionText = document.createTextNode(this.elementsArray[this.curLowerIndex + k].key);
                  node.appendChild(selectionText);
                  this.comboElementsGroup.appendChild(node);
              }
              //increment current index
              this.curLowerIndex = this.curLowerIndex + scrollNr;
          }
      }
      else {
              //remove lower elements
              for (var i=0;i<this.heightNrElements;i++) {
                  var node = document.getElementById("selTexts_" + this.id + "_" + (i + this.curLowerIndex));
                  this.comboElementsGroup.removeChild(node);
                  var node = document.getElementById("selHighlightSelection_" + this.id +"_" + (i + this.curLowerIndex));
                  this.comboElementsGroup.removeChild(node);
              }
              if (scrollDir == "down") {
                  this.curLowerIndex = this.curLowerIndex + scrollNr;
              }
              else {
                  this.curLowerIndex = this.curLowerIndex - scrollNr;
              }
              for (var i=0;i<this.heightNrElements;i++) {
                  var node = document.createElementNS(svgNS,"rect");
                  node.setAttributeNS(null,"x",this.xOffset + this.textPadding / 2);
                  node.setAttributeNS(null,"y",this.yOffset + this.cellHeight * i);
                  node.setAttributeNS(null,"width",this.width - this.cellHeight - this.textPadding);
                  node.setAttributeNS(null,"height",this.cellHeight);
                  if (this.elementsArray[this.curLowerIndex + i].value) {
                      for (var attrib in this.highlightStyles) {
                          node.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                      }
                  }
                  else {
                      node.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                      if (node.hasAttributeNS(null,"fill-opacity")) {
                          node.removeAttributeNS(null,"fill-opacity");
                      }
                  }
                  node.setAttributeNS(null,"id","selHighlightSelection_" + this.id + "_" + (i + this.curLowerIndex));
                  //add event-handler
                  node.addEventListener("mousedown", this, false);
                  node.addEventListener("mouseover", this, false);
                  node.addEventListener("mouseup", this, false);
                  this.comboElementsGroup.appendChild(node);
                  //add text-nodes
                  var node = document.createElementNS(svgNS,"text");
                  node.setAttributeNS(null,"id","selTexts_" + this.id + "_" + (i + this.curLowerIndex));
                  node.setAttributeNS(null,"x",this.xOffset + this.textPadding);
                  node.setAttributeNS(null,"y",this.yOffset + this.textPaddingVertical + this.cellHeight * i);
                  node.setAttributeNS(null,"pointer-events","none");
                  var value = "";
                  for (var attrib in this.textStyles) {
                      value = this.textStyles[attrib];
                      if (attrib == "font-size") {
                          value += "px";
                      }
                      node.setAttributeNS(null,attrib,value);
                  }        
                  var selectionText = document.createTextNode(this.elementsArray[this.curLowerIndex + i].key);
                  node.appendChild(selectionText);
                  this.comboElementsGroup.appendChild(node);
              }
      }
  }
  
  //event listener for Scrollbar element
  combobox.prototype.scrollBarMove = function(evt) {
      var scrollerMinY = parseFloat(this.scrollbarRect.getAttributeNS(null,"y"));
      var scrollerMaxY = parseFloat(this.scrollbarRect.getAttributeNS(null,"y")) + parseFloat(this.scrollbarRect.getAttributeNS(null,"height")) - parseFloat(this.scroller.getAttributeNS(null,"height"));
      if (evt.type == "mousedown") {
          this.panStatus = true;
          //add event listeners to root element
          var svgroot = document.documentElement;
          svgroot.addEventListener("mousemove", this, false);
          svgroot.addEventListener("mouseup", this, false);
          for (var attrib in this.triangleStyles) {
              this.scroller.setAttributeNS(null,attrib,this.triangleStyles[attrib]);
          }        
          var coordPoint = myMapApp.calcCoord(evt,this.parentGroup);
          this.panY = coordPoint.y;
          var oldY = parseFloat(this.scroller.getAttributeNS(null,"y"));
          var newY = this.panY - parseFloat(this.scroller.getAttributeNS(null,"height")) / 2;
          if (newY < scrollerMinY) {
              newY = scrollerMinY;
              //maybe recalculate this.panY ??
          }
          if (newY > scrollerMaxY) {
              newY = scrollerMaxY;
          }
          var panDiffY = newY - oldY;
          var scrollDir = "down";
          this.scrollCumulus = 0;
          if(Math.abs(panDiffY) > this.scrollStep) {
              var scrollNr = Math.abs(Math.round(panDiffY / this.scrollStep));
              if (panDiffY > 0) {
                  this.scrollCumulus = panDiffY - this.scrollStep * scrollNr;
              }
              else {
                  this.scrollCumulus = panDiffY + this.scrollStep * scrollNr;
                  scrollDir = "up";
              }
              newY = oldY + panDiffY;
              this.scroller.setAttributeNS(null,"y",newY);
              this.scroll(scrollDir,scrollNr,false);
          }
      }
      if (evt.type == "mouseup") {
          if (this.panStatus == true) {
              var newY = parseFloat(this.scroller.getAttributeNS(null,"y"));
              for (var attrib in this.smallrectStyles) {
                  this.scroller.setAttributeNS(null,attrib,this.smallrectStyles[attrib]);
              }        
              this.scroller.setAttributeNS(null,"y",this.yOffset + this.cellHeight + this.scrollStep * this.curLowerIndex);
          }
          var svgroot = document.documentElement;
          svgroot.removeEventListener("mousemove", this, false);
          svgroot.removeEventListener("mouseup", this, false);
          this.panStatus = false;
      }
      if (evt.type == "mousemove") {
          if (this.panStatus == true) {
              var coordPoint = myMapApp.calcCoord(evt,this.parentGroup);
              var panNewEvtY = coordPoint.y;
              var panDiffY = panNewEvtY - this.panY;
              var oldY = parseFloat(this.scroller.getAttributeNS(null,"y"));
              var newY = oldY + panDiffY;
              if (newY < scrollerMinY) {
                  newY = scrollerMinY;
              }
              if (newY > scrollerMaxY) {
                  newY = scrollerMaxY;
              }
              var panDiffY = newY - oldY;
              this.scrollCumulus += panDiffY;
              var scrollDir = "down";
              var scrollNr = 0;
              if(Math.abs(this.scrollCumulus) >= this.scrollStep) {
                  scrollNr = Math.abs(Math.round(this.scrollCumulus / this.scrollStep));
                  if (this.scrollCumulus > 0) {
                      this.scrollCumulus = this.scrollCumulus - this.scrollStep * scrollNr;
                  }
                  else {
                      this.scrollCumulus = this.scrollCumulus + this.scrollStep * scrollNr;
                      scrollDir = "up";
                  }
                  this.scroll(scrollDir,scrollNr,false);
              }
              else {
                  if (Math.abs(this.scrollCumulus) > this.scrollStep) {
                      scrollNr = 1;
                      if (panDiffY < 0) {
                          scrollDir = "up";
                          this.scrollCumulus = this.scrollCumulus + this.scrollStep;
                      }
                      else {
                          this.scrollCumulus = this.scrollCumulus - this.scrollStep;
                      }
                      panDiffY = this.scrollCumulus;
                      this.scroll(scrollDir,scrollNr,false);
                  }
                  else {
                      if (newY == scrollerMinY && this.curLowerIndex != 0) {
                          this.scroll("up",1,false);
                      }
                      else if (newY == scrollerMaxY && this.curLowerIndex != (this.elementsArray.length -     this.heightNrElements)) {
                          this.scroll("down",1,false);
                      }
                  }
              }
              newY = oldY + panDiffY;
              this.scroller.setAttributeNS(null,"y",newY);
              this.panY = panNewEvtY;
          }
      }
  }
  
  combobox.prototype.scrollToKey = function() {
      for (var i=0;i<this.elementsArray.length;i++) {
          if (this.elementsArray[i].key.toLowerCase().substr(0,this.pressedKeys.length) == this.pressedKeys) {
              this.curLowerIndex = i;
              if (this.curLowerIndex > (this.elementsArray.length - this.heightNrElements)) {
                  this.curLowerIndex = this.elementsArray.length - this.heightNrElements;
              }
              this.createOrUpdateCombobox();
              break;
          }
      }
  }
  
  combobox.prototype.elementExists = function(elementName) {
      var result = -1;
      for (i=0;i<this.elementsArray.length;i++) {
          if (this.elementsArray[i].key == elementName) {
              result = i;
          }
      }
      return result;
  }
  
  combobox.prototype.selectElementsByName = function(elementNames,fireFunction) {
      var idsToSelect = new Array();
      for (var i=0;i<elementNames.length;i++) {
          var indexNr = this.elementExists(elementNames[i].key);
          if (indexNr != -1) {
              idsToSelect.push({index:indexNr,value:elementNames[i].value});
          }
      }
      if (idsToSelect.length > 0) {
          this.selectElementsByPosition(idsToSelect,fireFunction);
      }
  }
  
  combobox.prototype.selectElementsByPosition = function(positionArray,fireFunction) {
      for (var i=0;i<positionArray.length;i++) {
          if (positionArray[i].index < this.elementsArray.length) {
              if (positionArray[i].index >= this.curLowerIndex && positionArray[i].index < (this.curLowerIndex + this.heightNrElements)) {
                  var node = document.getElementById("selHighlightSelection_" + this.id + "_" + positionArray[i].index);
                  if (positionArray[i].value) {
                      for (var attrib in this.highlightStyles) {
                          node.setAttributeNS(null,attrib,this.highlightStyles[attrib]);
                      }        
                  }
                  else {
                      node.setAttributeNS(null,"fill",this.boxStyles["fill"]);
                      if (node.hasAttributeNS(null,"fill-opacity")) {
                          node.removeAttributeNS(null,"fill-opacity");
                      }
                  }
              }
              this.elementsArray[positionArray[i].index].value = positionArray[i].value;
          }
      }
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.sortList = function(direction) {
      //direction: asc|desc, for ascending or descending
      var mySelElementString = this.elementsArray[this.activeSelection];
      this.elementsArray.sort(function mySort(a,b) {
          if (a.key > b.key) {
              return 1;
          }
          else {
              return -1;
          }
      });
      if (direction == "desc") {
          this.elementsArray.reverse();
      }
      this.createOrUpdateCombobox();
  }
  
  combobox.prototype.deleteElementsByName = function(elementNames,fireFunction) {
      for (var i=0;i<elementNames.length;i++) {
          existsPosition = this.elementExists(elementNames[i]);
          if (existsPosition != -1) {
              var tempArray = new Array;
              tempArray = tempArray.concat(this.elementsArray.slice(0,existsPosition),this.elementsArray.slice(existsPosition + 1,this.elementsArray.length));
              this.elementsArray = tempArray;
              if (existsPosition < this.curLowerIndex) {
                  this.curLowerIndex--;
              }
          }
      }
      this.createOrUpdateCombobox();
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.deleteElementByPosition = function(elementPosition,fireFunction) {
      if (elementPosition < this.elementsArray.length) {
          var tempArray = new Array;
          tempArray = tempArray.concat(this.elementsArray.slice(0,elementPosition),this.elementsArray.slice(elementPosition + 1,this.elementsArray.length));
          this.elementsArray = tempArray;
          if (elementPosition < this.curLowerIndex) {
              this.curLowerIndex -= 1;
          }
      }
      this.createOrUpdateCombobox();
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.addElementAtPosition = function(element,position,fireFunction) {
      if (position > this.elementsArray.length) {
          this.elementsArray.push(element);
          position = this.elementsArray.length - 1;
      }
      else {
          var tempArray = new Array;
          tempArray = tempArray.concat(this.elementsArray.slice(0,position),element,this.elementsArray.slice(position,this.elementsArray.length));
          this.elementsArray = tempArray;
      }
      if (position < this.curLowerIndex) {
          this.curLowerIndex += 1;
      }
      this.createOrUpdateCombobox();
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.addElementsAlphabetically = function(elementsArr,direction,fireFunction) {
      this.elementsArray = this.elementsArray.concat(elementsArr);
      this.sortList(direction);
      if (fireFunction) {
          this.timer.setTimeout("fireFunction",this.timerMs);
      }
  }
  
  combobox.prototype.getCurrentSelections = function() {
      var selectedArray = new Array();
      for (var i=0;i<this.elementsArray.length;i++) {
          //see how many and where elements are already selected
          if (this.elementsArray[i].value) {
              selectedArray.push(this.elementsArray[i].key);
          }
      }
      return selectedArray;
  }
  
  combobox.prototype.getCurrentSelectionsIndex = function() {
      var selectedArrayIndizes = new Array();
      for (var i=0;i<this.elementsArray.length;i++) {
          //see how many and where elements are already selected
          if (this.elementsArray[i].value) {
              selectedArrayIndizes.push(i);
          }
      }
      return selectedArrayIndizes;
  }
  
  combobox.prototype.removeCombobox = function() {
      //remove all Elements of combobox
      this.exists = false;
      while (this.parentGroup.hasChildNodes()) {
          this.parentGroup.removeChild(this.parentGroup.firstChild);
      }
  }
  