docs: function Segment(id, parentElement)
  {
  	this.id = id;
  	this.htmlElement = document.createElement('div');
  	this.htmlElement.id = id;
  	this.htmlElement.style.position = 'absolute';
  	this.htmlElement.style.overflow = 'hidden';
  	parentElement.appendChild(this.htmlElement);
  
  	this.startX;
  	this.startY;
  	this.length;
  	this.thickness;
  	this.orientation;
  	this.nextSegment;
  	this.visible = true;
  	
  	/**
  	 * draw the segment. This operation is cascaded to next segment if any.
  	 */
  	this.draw = function()
  	{
  		// set properties to next segment
  		if(this.nextSegment)
  		{
  			this.nextSegment.startX = this.getEndX();
  			this.nextSegment.startY = this.getEndY();
  		}
  		
  		this.htmlElement.style.display = this.visible?'block':'none';
  	
  		switch (this.orientation) {
  		case LEFT:
  			this.htmlElement.style.left = (this.startX - this.length) + "px";				
  			this.htmlElement.style.top = this.startY + "px";
  			this.htmlElement.style.width = this.length + "px";
  			this.htmlElement.style.height = this.thickness + "px";
  			break;
  		case RIGHT:
  			this.htmlElement.style.left = this.startX + "px";
  			this.htmlElement.style.top = this.startY + "px";
  			if(this.nextSegment)
  				this.htmlElement.style.width = this.length + this.thickness + "px";
  			else
  				this.htmlElement.style.width = this.length + "px";
  			this.htmlElement.style.height = this.thickness + "px";
  			break;
  		case UP:
  			this.htmlElement.style.left = this.startX + "px";
  			this.htmlElement.style.top = (this.startY - this.length) + "px";
  			this.htmlElement.style.width = this.thickness + "px";
  			this.htmlElement.style.height = this.length + "px";
  			break;
  		case DOWN:
  			this.htmlElement.style.left = this.startX + "px";
  			this.htmlElement.style.top = this.startY + "px";
  			this.htmlElement.style.width = this.thickness + "px";
  			if(this.nextSegment)
  				this.htmlElement.style.height = this.length + this.thickness + "px";
  			else
  				this.htmlElement.style.height = this.length + "px";
  			break;
  		}
  		
  		if(this.nextSegment)
  			this.nextSegment.draw();
  	}
  	
  	/**
  	 * Returns the "left" coordinate of the end point of this segment
  	 */
  	this.getEndX = function()
  	{		
  		switch(this.orientation)
  		{
  			case LEFT: return this.startX - this.length;
  			case RIGHT: return this.startX + this.length;
  			case DOWN: return this.startX;
  			case UP: return this.startX;
  		}
  	}
  	
  	/**
  	 * Returns the "top" coordinate of the end point of this segment
  	 */
  	this.getEndY = function() {		
  		switch (this.orientation) {
  		case LEFT: return this.startY;
  		case RIGHT: return this.startY;
  		case DOWN: return this.startY + this.length;
  		case UP: return this.startY - this.length;
  		}
  	}
  		
  	/**
  	 * Append another segment to the end point of this.
  	 * If another segment is already appended to this, cascades the operation so
  	 * the given next segment will be appended to the tail of the segments chain.
  	 */
  	this.append = function(nextSegment) {
  		if(!nextSegment)
  			return;
  		if(!this.nextSegment) {
  			this.nextSegment = nextSegment;
  			this.nextSegment.startX = this.getEndX();
  			this.nextSegment.startY = this.getEndY();
  		} else this.nextSegment.append(nextSegment);
  	}
  	
  	this.detach = function() {
  		var s = this.nextSegment;
  		this.nextSegment = null;
  		return s;
  	}
  	
  	/**
  	 * hides this segment and all the following
  	 */
  	this.cascadeHide = function() {
  		this.visible = false;
  		if(this.nextSegment)
  			this.nextSegment.cascadeHide();
  	}
  }