$(document).ready(function () {
  var lib = hsp;
  var ie6 = lib.ie6;
  var inspect = false;
  var current;
  // this plugin is for ie6 only, so do nothing on other browsers:
  if (!ie6) {
    return;
  }
  $(document).keyup(function(e){
    if (e.keyCode === 73)
    {
      if (inspect) {
        inspect= false;
        console.log('inspect disabled');
        $('#inspect-div').fadeOut();
      } else {
        inspect = true;
        console.log('inspect enabled');
        $('*').hover(hoverIn, hoverOut);
        addDiv();
        $('#inspect-div').fadeIn();
      }
    }
    else if (e.keyCode === 80) {
      if (current) {

        if (current.nodeName.toLowerCase() == 'html') {
          return;
        }
        $(current).css('border','none');
        current = current.parentNode;
        show(current);
      }
    }
  });
  var addDiv = function() {
  if ($('#inspect-div').length) return;
  $('body').append(
    '<div id="inspect-div">'+
    '<div id="inspect-tag"></div>'+
    '<div id="inspect-id"></div>'+
    '<div id="inspect-position"></div>'+
    '<div id="inspect-width"></div>'+
    '<div id="inspect-height"></div>'+
    '<div id="inspect-margin-left"></div>'+
    '<div id="inspect-padding-top"></div>'+
    '<div id="inspect-style"></div>'+
    '</div>'
    );
  $('#inspect-div').css({
    display: 'block',
    position: 'absolute',
    zIndex: 10000,
    backgroundColor: '#eeeeee',
    border: '1px solid black',
    opacity: '0.7'
  });
  }

  var $i = $('#inspect-div');
  var set = function(id,txt) {
    var div = $('#inspect-'+id);
    if (txt) {
      div.show().html(txt);
    }
    else {
      div.hide();
    }
  }
  var show = function (elem) {

    var $t = $(elem);
    var id = $t.attr('id');
    var i = id.indexOf('inspect');
    if (i != -1) {
      return;
    }
    var offset = $t.offset();
    $i.css({
      top : offset.top,
      left : offset.left
    });
    if (id) {
      $('#inspect-id').show().html('Id: '+id);
    }
    if (!id) {
      $('#inspect-id').hide();
    }
    var tag = elem.nodeName.toLowerCase();
    $('#inspect-tag').html('Tag: '+tag);

    var pos = $t.css('position');
    if (pos) {
      $('#inspect-position').show().html('Position: '+pos);
    } else {
      $('#inspect-position').hide();
    }
    var width = $t.css('width');
    if (width) {
      $('#inspect-width').show().html('Width: '+width);
    } else {
      $('#inspect-width').hide();
    }
    var height = $t.height();
    if (height) {
      $('#inspect-height').show().html('Height: '+height);
    } else {
      $('#inspect-height').hide();
    }
    var ml = $t.css('margin-left');
    if (ml) {
      $('#inspect-margin-left').show().html('Margin-left: '+ml);
    } else {
      $('#inspect-margin-left').hide();
    }
    var style = $t.attr('style');
    set('style','style='+style);
    // set red border
    $t.css('border','red solid 2px');
  }

  var hoverIn = function (ev) {
    current = ev.target;
    if (!inspect) return;
    show(current);
  };
  var hoverOut = function (ev) {
    var t = ev.target;
    $(t).css('border','none');
  };


}); // end of document.ready()