function escapeHtml(text) {
  var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

function djb2(str){
  var hash = 5381;
  for (var i = 0; i < str.length; i++) {
    hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
  }
  return hash;
}

function hashStringToColor(str) {
  var hash = djb2(str);
  var r = (hash & 0xFF0000) >> 16;
  var g = (hash & 0x00FF00) >> 8;
  var b = hash & 0x0000FF;
  return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
}

$('.element').on('click', function(e){
  e.preventDefault();
  $.ajax({
    url:'/ajax/element',
    method:'POST',
    success:function(result){
//        $('#viewer_table .type').html(result.type);
//        $('#viewer_table .name').html(result.name);
//        reg = /\b([a-f0-9]{40})\b/g;
//        $('#viewer_table .data').html(nl2br(result.data.replace(reg, '<a href="#" class="sha1">$1</a>')));
        $('.viewer').html('');
        panelManager.add(0, result.type, result.name, result.data, result.path)
    },
    data:{path:$(this).data('path')}
  })
})

$(document).on('click', '.sha1', function(e){
      e.preventDefault();
      var _object = $(this).text();
      var _parent = $(this).parents('.panel');
      $.ajax({
        url:'/ajax/object',
        method:'POST',
        success:function(result){
            _parent.nextAll().remove()
            panelManager.add(_parent.data('panel_id'), result.type, result.name, result.data)
        },
        data:{object:_object}
      })
})
function Panel(){
    this.panel_id = 0;
    this.panels = []
}
Panel.nl2br = function(str, is_xhtml) {
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>'; // Adjust comment to avoid issue on phpjs.org display
  return (str + '')
    .replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
Panel.prototype.template = function(id, type, name, data, path){
    if(path)
      var color = hashStringToColor(path);
    else
      var color = 'gray';
    var tag = $('<div class="panel panel-default" data-panel_id="'+id+'" style="border-left:solid 2px '+color+'">\
              <div class="panel-heading">['+type+'] '+name+'</div>\
                <table id="viewer_table2" class="table">\
                    <tr>\
                        <td class="data"><pre class="prettyprint">'+data+'</pre></td>\
                    </tr>\
                </table>\
            </div>')
    return tag;
}
Panel.prototype.add = function(caller_panel_id, type, name, data, path){
    reg = /\b([a-f0-9]{40})\b/g;
    data = escapeHtml(data);
    data = Panel.nl2br(data.replace(reg, '<a href="#" class="sha1">$1</a>'));
    var new_panel = this.template(caller_panel_id+1, type, name, data, path);
    this.panels.push(new_panel);
    $('.viewer').append(new_panel)
}
panelManager = new Panel()

$('.list-group a').each(function(){
  var $this = $(this);
  var path = $this.data('path');
  var color = hashStringToColor(path);
  //$this.css('background-color', color);
  $this.css('border-left', "5px solid "+color);
})
