/* exported
    doLoad addRowToGrid
  */

var raphael, structure, cols_items, errors = [],
  m_bError = false,
  m_bUpdated = false;

var col_width = 0,
  row_height = 0,
  hgap = 20,
  wgap = 8,
  td_margin = 0,
  tot_rows = 0,
  tot_cols = 0;

function doLoad() {
  /*creazione dell'elemento per Raphael*/
  raphael = Raphael(document.getElementById('backcanvas'), document.body.clientWidth, document.body.clientHeight - document.getElementById('topbar').getBoundingClientRect().height);

  LibJavascript.Events.addEvent(document.getElementById('toolbar_ok'), 'click', function() {
    parent.window.RowViewLayer.close();
    parent.viewrowopen = false;
  });
  LibJavascript.Events.addEvent(document.getElementById('toolbar_cancel'), 'click', function() {
    if(m_bUpdated) {
      if(confirm("Do you want to save new position of columns ?\n\nClick OK to save\nClick Cancel to ignore changes"))
        SaveAndClose()
      else {
        parent.window.RowViewLayer.close();
      }
    } else {
      parent.window.RowViewLayer.close();
    }
  });
  Load();
    function hide_loader(evt) {
      var target = (evt.target||evt.srcElement);
      target.style.display = 'none';
      target.removeEventListener('transitionend', hide_loader);
    }
    document.getElementById('loader').addEventListener('transitionend', hide_loader);
    LibJavascript.CssClassNameUtils.addClass(document.getElementById('container'), 'visible');
    LibJavascript.CssClassNameUtils.addClass(document.getElementById('loader'), 'hidden');
  LibJavascript.Events.addEvent(document.body, 'keydown', function(event) {
    var keyCode=(event.which || event.keyCode);
    if(event.ctrlKey && keyCode == 83) {
      if(Save()) {
        parent.save();
      }
      event.cancelBubble=true
      if(event.stopPropagation) event.stopPropagation();
      if(event.preventDefault) event.preventDefault(true);
      event.returnValue=false

    } //CTRL-S
  });
  LibJavascript.Events.addEvent(window, 'resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(ResizeEditor, 50);
  });
}

function SaveAndClose() {
  if(Save()) {
    parent.window.RowViewLayer.close();
    parent.viewrowopen = false;
  }
}

function Save() {
  var i;
  if(m_bError) {
    alert('You cannot have empty zones or zones with double or more fields.');
    return false;
  }
  structure.sort(function(a, b) {
    if(a.row != b.row) {
      return a.row - b.row;
    } else {
      return a.col - b.col;
    }
  });

  var newCols = new Array(structure.length);
  var curRow = 0;
  for(i = 0; i < structure.length; i++) {
    newCols[i] = {
      id: structure[i].id,
      field: structure[i].field,
      title: structure[i].title,
      col_span: structure[i].width + "",
      row_span: structure[i].height + "",
      new_line: (structure[i].row > curRow ? true : false)
    }
    curRow = structure[i].row;
  }
  var _cols = parent.columnsObj;
  for(i = 0; i < newCols.length; i++) {
    var idx = LibJavascript.Array.indexOf(_cols, newCols[i].id, function(el, tocompare) {
      return el.id == tocompare
    });
    var c = _cols.splice(idx, 1);
    c = c[0];
    c.col_span = newCols[i].col_span;
    c.row_span = newCols[i].row_span;
    c.new_line = newCols[i].new_line;
    _cols.splice(i, 0, c);
  }
  parent.columnsList.ReplaceList(parent.columnsObj);
  return true;
}

function Load() {
  var gridfill = [];
  var _cols = parent.columnsObj;
  structure = [];
  var col = 0,
    row = 0,
    last_width = 1;
  tot_rows = 1;
  for(var i = 0; i < _cols.length; i++) {
    if(_cols[i].new_line) {
      row++;
      tot_cols = Math.max(tot_cols, col + last_width);
      col = 0;
      tot_rows = row + 1;
    }
    if(gridfill[col] == null) gridfill[col] = [];
    while(gridfill[col][row] == 1) {
      col++;
      if(gridfill[col] == null) gridfill[col] = [];
    }
    for(var j = col; j < (col + parseInt(_cols[i].col_span) || 1); j++) {
      if(gridfill[j] == null) gridfill[j] = []
      for(var k = row; k < (row + parseInt(_cols[i].row_span) || 1); k++) {
        gridfill[j][k] = 1;
      }
    }
    var el = {
      id: _cols[i].id,
      field: _cols[i].field,
      title: _cols[i].title,
      width: parseInt(_cols[i].col_span) || 1,
      height: parseInt(_cols[i].row_span) || 1,
      row: row,
      col: col
    };
    structure.push(el);
    col++;
    last_width = el.width;
  }
  tot_rows++; //visualizzo spazio per una riga in piu'
  tot_cols = Math.max(tot_cols, col); //e' gia' stato fatto il +1 alla fine del ciclo
  // writeHTML()
  // clearTimeout(resizeTimer);
}

function writeHTML() {
  console.log('writehtml')
  raphael.clear();
  cols_items = [];
  errors = [];
  createGrid(cols_items, tot_cols + (tot_cols == structure.length ? 0 : 1));
  for(var i = 0; i < structure.length; i++) {
    drawItem(structure[i]);
  }
}

function createGrid(cols_items, cols_n) {
  var o_line, v_line, columns, i;
  var tot_width = document.getElementById('backcanvas').getBoundingClientRect().width;
  var tot_height = document.getElementById('backcanvas').getBoundingClientRect().height;
  var td_width = 0,
    point_top = 0;
  row_height = Math.min((tot_height - hgap) / tot_rows, 65);
  td_margin = 0;

  col_width = Math.min(Math.floor(tot_width / cols_n), 250);
  td_margin = Math.ceil(col_width * 0.05); // i margini sono il 5%
  td_width = col_width - (td_margin * 2);

  point_top = tot_height / 3 - 10;
  if(document.getElementById('o-line') && document.getElementById('columns')) {
    document.querySelectorAll('.o-line-element').forEach(function(el, index) {
      el.style.left = (col_width * index + wgap) + 'px';
    });
    document.querySelectorAll('.v-line-element').forEach(function(el, index) {
      el.style.top = (point_top * index + hgap) + 'px';
    });
    document.querySelectorAll('.col').forEach(function(el, index) {
      el.style.left = (col_width * index + wgap) + 'px';
      el.style.width = td_width + 'px';
    });
  } else {
    o_line = raphael.path("M" + wgap + ",0H" + (tot_width));
    o_line.attr('stroke', '#454545');
    v_line = raphael.path("M0, " + hgap + "V" + (tot_height));
    v_line.attr('stroke', '#454545');

    for(i = 0; i < cols_n; i++) {
      raphael.path("M" + (col_width * i + wgap) + ",0V3");
      cols_items.push(columns = raphael.rect((col_width * i + wgap) + td_margin, hgap, col_width - (td_margin * 2), tot_height - hgap));
      columns.node.setAttribute("class", "rect-container");
      columns.text = raphael.text(col_width * i + wgap + col_width / 2, 8, i);
      columns.text.node.setAttribute("class", "number");
      columns.text.node.setAttribute("style", "");
    }

    for(i = 0; i < tot_rows + 1; i++) {
      raphael.path("M0, " + (row_height * i + hgap) + ",0H3");
      var rows_txt = raphael.text(10, row_height * i + hgap + row_height / 2, i);
      rows_txt.node.setAttribute("class", "number");
      rows_txt.node.setAttribute("style", "");
    }

    // raphael.safari();
  }
}

function addRowToGrid(howmuch) {
  tot_rows += howmuch;
  writeHTML();
}

function checkView(forceWrite) {
  var i, j, k, b, w, el;
  var gridfill = [];
  for(i = 0; i < structure.length; i++) {
    gridfill.push([]);
    for(j = 0; j < structure.length; j++) {
      gridfill[i].push(0);
    }
  }

  var rowfilled = new Array(structure.length + 1).join('0').split('').map(function(e) {
    return parseInt(e, 10);
  });

  var colfilled = new Array(structure.length + 1).join('0').split('').map(function(e) {
    return parseInt(e, 10);
  });

  var rows = 0,
    cols = 0;

  for(i = 0; i < structure.length; i++) {
    for(j = structure[i].col; j < structure[i].col + structure[i].width; j++) {
      colfilled[j]++;
    }
    for(j = structure[i].row; j < structure[i].row + structure[i].height; j++) {
      rowfilled[j]++;
    }
    for(j = structure[i].col; j < structure[i].col + structure[i].width; j++) {
      for(k = structure[i].row; k < structure[i].row + structure[i].height; k++) {
        gridfill[j][k]++;
      }
    }
    cols = Math.max(structure[i].col + structure[i].width, cols);
    rows = Math.max(structure[i].row + structure[i].height, rows);
  }

  if(rows < structure.length) rows++;

  while(colfilled.length > 0 && colfilled[colfilled.length - 1] === 0) {
    gridfill.pop();
    colfilled.pop();

  }

  while(rowfilled.length > 0 && rowfilled[rowfilled.length - 1] === 0) {
    for(i = 0; i < gridfill.length; i++) {
      gridfill[i].pop();
    }
    rowfilled.pop();
  }

  var blankrow = rowfilled.indexOf(0);
  var blankcol = colfilled.indexOf(0);

  if(blankrow > -1) {
    for(i = 0; i < structure.length; i++) {
      if(structure[i].row > blankrow)
        structure[i].row--;
    }
    checkView(true);
    return;
  } else if(blankcol > -1) {
    for(i = 0; i < structure.length; i++) {
      if(structure[i].col > blankcol)
        structure[i].col--;
    }
    checkView(true);
    return;
  } else if(cols != tot_cols || rows != tot_rows || forceWrite) {
    tot_rows = rows;
    tot_cols = cols;
    writeHTML();
  }

  for(i = 0; i < errors.length; i++) {
    if(errors[i].text)
      errors[i].text.remove();
    errors[i].remove();
  }

  errors = [];
  m_bError = false;

  for(i = 0; i < gridfill.length; i++) {
    for(j = 0; j < gridfill[i].length; j++) {
      if(gridfill[i][j] === 0) { //spazio vuoto
        b = cols_items[i].getBBox();
        w = cols_items[i].getBBox().x - b.x;
        el = raphael.rect(b.x, j * row_height + hgap, w + b.width, (row_height) - hgap / 2, 1);
        el.node.setAttribute("class", "rect-empty");
        el.text = raphael.text(el.getBBox().x + 10, el.getBBox().y + 10, 'empty')
        el.text.attr('x', el.getBBox().x + (el.getBBox().width - el.text.getBBox().width) / 2)
        el.text.attr('y', el.getBBox().y + el.getBBox().height - (el.text.getBBox().height + 10))
        el.text.node.setAttribute("class", "text-empty");
        el.text.node.setAttribute("style", "");
        errors.push(el);
        m_bError = true;
      } else if(gridfill[i][j] > 1) { //due campi nella stessa posizione
        b = cols_items[i].getBBox();
        w = cols_items[i].getBBox().x - b.x;
        el = raphael.rect(b.x, j * row_height + hgap, w + b.width, (row_height) - hgap / 2, 1);
        el.node.setAttribute("class", "rect-error");
        el.text = raphael.text(el.getBBox().x + 10, el.getBBox().y + 10, 'two or more fields')
        el.text.attr('x', el.getBBox().x + (el.getBBox().width - el.text.getBBox().width) / 2)
        el.text.attr('y', el.getBBox().y + el.getBBox().height - (el.text.getBBox().height + 10))
        el.text.node.setAttribute("class", "text-error");
        el.text.node.setAttribute("style", "");
        el.insertAfter(cols_items);
        errors.push(el);
        m_bError = true;
      }
    }
  }
}

function drawItem(item) {
  var width = item.width;
  var height = item.height;
  var b = cols_items[item.col].getBBox();
  var w = cols_items[item.col + width - 1].getBBox().x - b.x;
  item.pict = raphael.rect(b.x, item.row * row_height + hgap, w + b.width, (row_height * height) - hgap / 2, 1);
  item.pict.data = item;
  item.pict.node.setAttribute("class", "rect-standard");
  item.pict.attr('title', item.title || item.field)
  item.pict.text = raphael.text(item.pict.getBBox().x + 10, item.pict.getBBox().y + 10, item.title || item.field)
  item.pict.text.attr('x', item.pict.getBBox().x + (item.pict.getBBox().width - item.pict.text.getBBox().width) / 2)
  item.pict.text.node.setAttribute("class", "text-standard");
  item.pict.text.node.setAttribute("style", "");
  item.pict.resize_handle = raphael.image('../portalstudio/images/ps-editor-resize.png', (item.pict.getBBox().x + item.pict.getBBox().width) - 12, (item.pict.getBBox().y + item.pict.getBBox().height) - 12, 12, 12)
  item.pict.resize_handle.attr('cursor', 'se-resize')
  item.pict.resize_handle.parent = item.pict;

  var col = 0,
    row = 0;
  var delta = {};
  item.pict.drag( //DRAG
    function(dx, dy, x, y/*, event*/) { /* onmove */
      var backcanvas = document.getElementById('backcanvas');
      var bcbcr = backcanvas.getBoundingClientRect();
      if(y > bcbcr.y &&
        y < bcbcr.y + bcbcr.height &&
        x > bcbcr.x &&
        x < bcbcr.x + bcbcr.width) {
        var pos = {
          'x': (x - bcbcr.x),
          'y': (y - bcbcr.y)
        }
        col = Math.round(dx / (col_width + td_margin));
        this.attr('x', pos.x - delta.x);
        this.resize_handle.attr('x', (this.getBBox().x + this.getBBox().width) - 12)
        this.text.attr('x', this.getBBox().x + (this.getBBox().width - this.text.getBBox().width) / 2)
        row = Math.round(dy / row_height);
        this.attr('y', pos.y - delta.y);
        this.resize_handle.attr('y', (this.getBBox().y + this.getBBox().height) - 12)
        this.text.attr('y', this.getBBox().y + 10)
      }
    },
    function(x, y/*, event*/) { /* onstart */
      delta = {
        'x': (x - (document.getElementById('backcanvas').getBoundingClientRect().x + this.getBBox().x)),
        'y': (y - (document.getElementById('backcanvas').getBoundingClientRect().y + this.getBBox().y))
      }
    },
    function() { /* onend */
      this.data.col = col + this.data.col > 0 ? (col + this.data.col + this.data.width < structure.length ? col + this.data.col : structure.length - this.data.width) : 0;
      this.data.row = (this.data.row + row > 0 ? this.data.row + row : 0);
      if(this.data.col > cols_items.length - 1)
        this.data.col = cols_items.length - 1;
      this.attr('x', cols_items[this.data.col].getBBox().x)
      this.attr('y', this.data.row * row_height + hgap)
      this.resize_handle.attr('x', (this.getBBox().x + this.getBBox().width) - 12)
      this.text.attr('x', this.getBBox().x + (this.getBBox().width - this.text.getBBox().width) / 2)
      this.resize_handle.attr('y', (this.getBBox().y + this.getBBox().height) - 12)
      this.text.attr('y', this.getBBox().y + 10)
      checkView();
      m_bUpdated = true;
      row = 0;
      col = 0;
    }
  )
  item.pict.resize_handle.drag( //RESIZE
    function(dx, dy, x, y/*, event*/) { /* onmove */
      var backcanvas = document.getElementById('backcanvas');
      var bcbcr = backcanvas.getBoundingClientRect();
      if(y > bcbcr.y &&
        y < bcbcr.y + bcbcr.height &&
        x > bcbcr.x &&
        x < bcbcr.x + bcbcr.width) {
        cols_items.forEach(function(c, i) {
          var pos = {
            'x': (x - bcbcr.x),
            'y': (y - bcbcr.y)
          }
          var b = c.getBBox();
          if(pos.x < (b.x + b.width) && pos.x > b.x) {
            var new_w = (b.x + b.width) - this.parent.getBBox().x;
            this.parent.attr('width', (new_w > b.width ? new_w : b.width))
            this.attr('x', (this.parent.getBBox().x + this.parent.getBBox().width) - 12)
            this.parent.text.attr('x', this.parent.getBBox().x + (this.parent.getBBox().width - this.parent.text.getBBox().width) / 2)
            this.parent.data.width = (i - this.parent.data.col) + 1;
          }
          if((pos.y > this.parent.getBBox().y) && pos.y < bcbcr.height) {
            var new_h = ((Math.floor(pos.y / row_height) + 1) * row_height) - (this.parent.getBBox().y - hgap / 2)
            this.parent.attr('height', (new_h > row_height ? new_h : row_height - hgap / 2))
            this.attr('y', (this.parent.getBBox().y + this.parent.getBBox().height) - 12)
            this.parent.data.height = Math.floor(this.parent.getBBox().height / row_height) + 1;
          }
        }, this)
      }
    },
    function(/*x, y, event*/) { /* onstart */ },
    function() { /* onend */
      m_bUpdated = true;
      checkView();
    }
  )

  item.pict.click(function(event) {
    event.stopPropagation();
  })
}

var resizeTimer=-1;
function ResizeEditor() {
  clearTimeout(resizeTimer);
  raphael.setSize(document.body.clientWidth, document.body.clientHeight - document.getElementById('topbar').getBoundingClientRect().height);
  checkView(true);
}