Added collab highlight implementation to Sidney's clean collaboration pr/46

- Move div creation in a class function

- Eliminate redundant:
  - Creation of highlight divs
  - Reassignment of constants variables

Reflects the current data structure

Removes highlight when peers leave.
E.g. exit browser without deselecting the text.

Collab Highlight was originally built on an older commit. When collab highlight
code was copied to commit cb48ab, some code were altered as a side-effect.

In this commit, commit cb48ab (base) and 5e6c9d1 (head) was diff-ed
to find and restore altered code.

Restoring code from

1.
commit cb48ab8
Author: libing wang <libingw@ca.ibm.com>
Date:   Thu Jun 22 15:04:33 2017 -0400
Subj:   Bug 514792 - AnnotationStyler to merge html and DOM node style in com...

Side-effect:    Around line `create: function(_parent, div, drawing) {`,
                all instance of 'drawing' was removed
In this commit: restored 'drawing'

2.
commit c81fb19
Author: Sidney <xinyij@ca.ibm.com>
Date:   Thu Jun 15 16:53:04 2017 -0400
Subj:   cleaned 50% garbage code

Side-effect:    '/file/' came back.
In this commit: removed '/file/'

Collab highlight width was inconsistent across different browsers.
The width would vary on different browsers as peers select long texts
on the same line. This is due to the use of a calculated constant in the code
rather than using environment variables that we were unaware of at the time.
Thanks to Silenio, we found a variable to fixes this issue.