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.
In general, we try to use descriptive variable names. You could have something like ```totalSegments``` or ```segmentsCount``` or I guess ```segmentsLength```, but at that point why not just use ```segments.length```. I introduce a new variable if calling ```.length``` for example would be a costly function (for example we always do it with jQuery selectors). 

In this particular case you use ```l``` only once below, so just substitute the full ```segments.length``` there.