Highlights design

Continuation of #257, just that it is a pull request against development branch. This pull request is addressing #256. Instead of each highlight being one big rectangle area, find smaller reasonable sections and draw border around only them.
Shorten to something like:
```
_.each temp2, (segment, index, list) ->
  temp3.push [_.clone(segment[0]), index] #[segment, group number]
```
or if you go the descriptive object way (you don't need comments to describe things that variable names can)
```
_.each temp2, (segment, index, list) ->
  temp3.push 
    segment: _.clone(segment[0])
    groupNumber: index
```