function _initGrid() {

  document.write('<style type="text/css"> .row_ { position:	 fixed; '+
  'z-index: 999; left: 0; display: none; width: 100%;' +
  'border-top: 1px dashed; }' +
  '* html .row_ {position: absolute; }');
  document.write('.column_ { position: fixed; '+
  'z-index: 999; top: 0; display: none; height: 100%;' +
  'border-right: 1px dashed; }' +
  '* html .column_ {position: absolute; } </style>');

}

function _hideShowGrid() {
  _showGrid = !_showGrid;
  if (_showGrid)
  $('span.column_, span.row_').css({'display': 'block'});
  else
  $('span.column_, span.row_').css({'display': 'none'});

}

FDevGrid = function(){
  this.addColumn = function(a, unit, color) {
    for (var i = 0, l = a.length; i < l; i++) {
      if (a[i][1] == null)
      {
        a[i][1] = 0;
      }
      if (unit == null)
      {
        unit = '%';
      }
      if (color == null)
      {
        color = '#4affff';
      }
      $('body').prepend('<span class="column_" style="left: ' + a[i][0] + unit + '; margin-left: ' + a[i][1]+ 'px; border-color: ' + color + ';"></span>');
    }
  }
  this.addRow = function(a, unit, color) {
    for (var i = 0, l = a.length; i < l; i++) {
      if (a[i][1] == null)
      {
        a[i][1] = 0;
      }
      if (unit == null)
      {
        unit = '%';
      }
      if (color == null)
      {
        color = '#4affff';
      }
      $('body').prepend('<span class="row_" style="top: ' + a[i][0] + unit + '; margin-top: ' + a[i][1]+ 'px; border-color: ' + color + ';"></span>');
    }
  }
}
var _showGrid = false;
//document.write('<div style="position:absolute; top:20px; left:0px; cursor:pointer;" onclick="_hideShowGrid();">сетка</div>');

_initGrid();

DevGrid = new FDevGrid();