/**
 * @file HTML Highlighter example.
 * @copyright 2015 Diffeo
 *
 * Comments:
 *
 */


require( [ 'jquery', 'src/html_highlighter' ], function ($, hh) {
  return MainModule(window, $, hh);
} );


var MainModule = function (window, $, hh, undefined) {

  var dataBaseUrl = 'data/',
      dataSources = [ {
        name: 'Viber hacked',
        url: 'viber-attacked-by-syrian-electronic-army.json'
      }, {
        name: 'Simple',
        url: 'simple.json'
      }, {
        name: 'One paragraph',
        url: 'one-para.json'
      } ];

  var elSelector = $('#filter-data'),
      elDocument = $('#document'),
      elWidgetSelection = $('#widget-selection'),
      elWidgetMain = $('#widget-main'),
      elSearch = $('#search'),
      elAdd = $('#add');

  var count = 0,
      mouseDown = 0,
      highlighter;


  function init()
  {
    /* Set-up sequence
     * --
     * UI */
    elSelector.change(function () {
      highlighter.clear();
      elDocument.html(dataSources[parseInt($(this).val())]
                      .content.body.clean_html);
      highlighter.refresh();
      elSearch.focus();
    } );

    elSearch.keyup(function () {
      elAdd.attr('disabled', elSearch.val().trim().length === 0);
    } );
    elSearch.val('').trigger('keyup').focus();

    elAdd.click(function () {
      var name = elSearch.val();
      highlighter.add(name, [ name ]);
      elSearch.select().focus();
    } );

    elSelector
      .children().remove()
      .change(function () {
        load(parseInt(elSelector.val()));
      } );

    var timeout = null;
    $(window).on( {
      mouseup: function () {
        -- mouseDown;

        /* Process text selection with a delay to ensure accurate results. */
        if(timeout !== null) window.clearTimeout(timeout);
        timeout = window.setTimeout(function () {
          timeout = null;
          if(mouseDown !== 0) return;

          var range = highlighter.getSelectedRange();
          if(range !== null) {
            elWidgetSelection.find('.offset').text(
              range.start.marker.offset
                + '(' + range.start.offset + ')'
                + ':' + range.end.marker.offset
                + '(' + range.end.offset + ')');

            var xpath = range.computeXpath(elDocument);
            elWidgetSelection.find('.xpath')
              .text(xpath)
              .attr('title', xpath);
            new hh.HtmlRangeHighlighter(5).do(range);
            elWidgetSelection.addClass('enabled');
          } else
            elWidgetSelection.removeClass('enabled');
        }, 150);
      },
      mousedown: function () {
        ++ mouseDown;
      }
    } );

    /* Done setting up.  Now load mock data. */
    var next = function (i) {
      if(i >= dataSources.length) {
        load(0);

        highlighter = new hh.HtmlHighlighter( {
          container: elDocument,
          widget: elWidgetMain,
          maxHighlight: 5
        } );
        return;
      }

      var d = dataSources[i];
      require( [ dataBaseUrl + d.url + '?' ], function (result) {
        /* Note: due to obvious constraints imposed on loading of local system
         * resources (via file://), data source files are required to export the
         * global variable `g_descriptor´. */
        if(g_descriptor !== undefined) {
          elSelector.append($('<option/>').attr('value', i).html(d.name));
          d.content = g_descriptor;
          g_descriptor = null;
          ++i;
        } else
          dataSources.splice(i, 1);

        next(i);
      } );
    };

    next(0);
  }

  function load(index)
  {
    elDocument.html(dataSources[index].content.body.clean_html);
  }


  /* Initialise module */
  init();

};
@@ -1964,17 +1964,17 @@
 f(range 
-!
+=
 == null)
@@ -1974,24 +1974,109 @@
 = null) %7B%0A  
+          elWidgetSelection.removeClass('enabled');%0A            return;%0A          %7D%0A%0A
           el
@@ -2113,18 +2113,16 @@
 ).text(%0A
-  
         
@@ -2143,34 +2143,32 @@
 t.marker.offset%0A
-  
               + 
@@ -2212,18 +2212,16 @@
         
-  
 + ':' + 
@@ -2236,34 +2236,32 @@
 d.marker.offset%0A
-  
               + 
@@ -2302,22 +2302,39 @@
         
-  
 var 
+hit,%0A              
 xpath = 
@@ -2363,20 +2363,94 @@
 ocument)
-;
+,
 %0A  
+            finder = new hh.HtmlXpathFinder(highlighter.content, xpath);%0A%0A
         
@@ -2496,18 +2496,16 @@
         
-  
 .text(xp
@@ -2511,46 +2511,101 @@
 path
-)%0A              .attr('title', xpath);
+.xpath + ':' + xpath.start + ':' + xpath.end);%0A%0A          if((hit = finder.next()) !== false)
 %0A   
@@ -2651,16 +2651,15 @@
 .do(
-range
+hit
 );%0A
+%0A
     
@@ -2668,68 +2668,42 @@
     
-  elWidgetSelection.addClass('enabled');%0A          %7D else%0A  
+highlighter.clearSelectedRange();%0A
     
@@ -2718,38 +2718,35 @@
 WidgetSelection.
-remove
+add
 Class('enabled')

use improved API