 <?php 

class AddonFnSelSel  {
  private $scope;
  private $label;
  private $tblRows;
  private $control;

  public function __construct($entry) {

    if (isset($entry)) {
      $this->size = $entry->size;
      $this->scope = $entry->scope;
      $this->form  = $entry->form;
      $this->label = $entry->label;
      $this->added = $entry->added;
      $this->leftSide = $entry->leftSide;

      if (isset($entry->functions))
        $this->functions = json_encode($entry->functions);
      else 
        $this->functions = "";

      if (isset($entry->selOptions1))
        $this->selOptions1 = json_encode($entry->selOptions1);
      else 
        $this->selOptions1 = "";

      if (isset($entry->selOptions2))
        $this->selOptions2 = json_encode($entry->selOptions2);
      else 
        $this->selOptions2 = "";        
    }    
  }
  
  public function outputLayout() {

    $layout = "
<div id='outer-container'>
  <div id='scrollable' style='height:" . $this->size . "em;'>
    <table class='table table-condensed'>
      <thead><tr>
        <th colspan='3'>$this->label</th>
      </tr></thead>    
      <tbody id='frm$this->scope'>
      </tbody>
    </table>
  </div>
  <button id='put$this->scope' class='btn btn-inverse' 
    onclick='put$this->scope();'>Enter</button>
</div>
    ";
    return $layout;
  }	

  public function outputScript() {

	  $script = "
// INPUT-SELECTS
var selectId$this->scope = 0;

$(document).ready(function() {
  document.getElementById('put$this->scope').style.display= 'none';
 });

$(document).on('change', '.func$this->scope', function (e) {
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'field$this->form');
}); 

$(document).on('change', '.sel1$this->scope', function (e) {
  var rowId = $(this).closest('tr').prop('id');
  var filter = $(this).val();
//alert (rowId + '-' + filter);
  $('#' + rowId).find('.sel2$this->scope option:selected').prop('selected', false);
  $('[class^=seltwo]').hide();
  $('.seltwo' + rowId + '-' + filter + '').show();

  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'field$this->form');
}); 

$(document).on('change', '.sel2$this->scope', function (e) {
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'field$this->form');
}); 

function com$this->scope (message) {
  $('#valmsg$this->scope').html('');
  var key = Object.keys(message); 

  if (key == 'selectId') {
    selectId$this->scope = message[key][0];
    get$this->scope (selectId$this->scope);
    if (selectId$this->scope == 0)
      document.getElementById('put$this->scope').style.display= 'none';
    else
      document.getElementById('put$this->scope').style.display= 'block';
  }    
}

multiFunction['com$this->scope'] = {
  com$this->scope: com$this->scope
}; 

function gen$this->scope(dbRows) {
  var functions = JSON.parse('$this->functions');
  var selOptions1 = JSON.parse('$this->selOptions1');
  var selOptions2 = JSON.parse('$this->selOptions2');
  var functions0 = '';
  var functions1 = '';
  var selections1 = '';
  var selections2 = '';

  for (var i=0; i<functions.length; i++) {
    if (functions[i].type == 0) {
      var value = functions[i].id;
      var text  = functions[i].text;
      functions0 += '<option value=' + value + '>' + text + '</option>';
    }  
    else if (functions[i].type == 1) {
      var value = functions[i].id;
      var text  = functions[i].text;
      functions1 += '<option value=' + value + '>' + text + '</option>';
    }  
  }    
  for (var j=0; j<selOptions1.length; j++) {
    var value = selOptions1[j].id;
    var text  = selOptions1[j].id + '-' + selOptions1[j].text;
    selections1 += '<option value=' + value + '>' + text + '</option>';
  }    
  for (var k=0; k<selOptions2.length; k++) {
    var value  = selOptions2[k].id;
    var text   = selOptions2[k].filter + '-' + selOptions2[k].text;
    var filter = selOptions2[k].filter;
    selections2 += '<option  class=seltwo0-' + filter + ' value=' + value + '>' + text + '</option>';
  } 

  var layout = 
    '<tr id=0>' +
      '<td data-element=function class=field$this->scope style=width:20%;>' +
        '<select class=func$this->scope>' + functions0 + '</select>' +
      '</td>' +
      '<td data-element=select1 style=width:40%;>' + 
        '<select class=sel1$this->scope>' + selections1 + '</select>' +
      '</td>' +
      '<td data-element=select2 style=width:40%;>' + 
        '<select class=sel2$this->scope>' + selections2 + '</select>' +
      '</td>' +
    '</tr>';

  for (var l=0; l<dbRows.length; l++) {
    var filterId  = 0
    var rowId     = dbRows[l].id
    var selValue1 = dbRows[l].selvalue1;
    var selValue2 = dbRows[l].selvalue2;
    selections1 = '';
    selections2 = '';
    
    for (var m=0; m<selOptions1.length; m++) {
      var selected = '';
      var value = selOptions1[m].id;
      var text  = selOptions1[m].id + '-' + selOptions1[m].text;

      if (selValue1 == value) {
        selected = ' selected';
        filterId = value;
      }        
      selections1 += '<option value=' + value + selected + '>' + text + '</option>';
    }    

    for (var n=0; n<selOptions2.length; n++) {
      var selected = '';
      var display = '';
      var value = selOptions2[n].id;
      var text  = selOptions2[n].filter + '-' + selOptions2[n].text;
      var filter = selOptions2[n].filter;

      if (filterId != filter) 
        display = ' style=display:none;';
      if (selValue2 == value && filterId == filter)
        selected = ' selected';
  
      selections2 += '<option class=seltwo' + rowId + '-' + filter + ' value=' + value + selected + display + '>' + text + '</option>';
    }    

    layout += 
      '<tr id=' + rowId + '>' +
      '<td data-element=function class=field$this->scope style=width:20%;>' +
        '<select class=func$this->scope>' + functions1 + '</select>' +
      '</td>' +
      '<td data-element=select1 style=width:40%;>' + 
        '<select class=sel1$this->scope>' + selections1 + '</select>' +
      '</td>' +
      '<td data-element=select2 style=width:40%;>' + 
        '<select class=sel2$this->scope>' + selections2 + '</select>' +
      '</td>' +
      '</tr>';
  }  
             
  return layout;
} 

function get$this->scope (selectId) {
  document.getElementById ('frm$this->scope').innerHTML = '';
  
  if (selectId > 0) {
    var params = 'selectid=' + selectId;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/get$this->scope.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText)
        document.getElementById('frm$this->scope').innerHTML = gen$this->scope(response);
//        $('[class^=seltwo]').hide();
      }
    }  
    xhr.send(params);
  }    
}

function put$this->scope () {
  var comma    = '';
  var colon    = '';
  var rowIds   = '';
  var elements = '';
  var values   = '';

  $('.$this->form').each(function() {
    rowIds  += comma + $(this).prop('id');
    colon = '';

    $(this).children('.field$this->form').each(function(){
      var element = $(this).attr('data-element');
      elements  += comma + colon + element;
      if (element == 'function')
        values += comma + colon + $(this).find('.func$this->scope option:selected').val();
      else if (element == 'select1')
        values += comma + colon + $(this).find('.sel1$this->scope option:selected').val();
      else if (element == 'select2')
        values += comma + colon + $(this).find('.sel2$this->scope option:selected').val();

      colon = ':';    
      comma = '';
    });
    comma = ',';
  });
  
  var params = 'selectid=' + selectId$this->scope + '&' + 
               'rowids=' + rowIds + '&' + 'elements=' + elements + '&' +
               'values=' + values + '&' ;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/put$this->scope.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      get$this->scope (response);
    }
  }  
  xhr.send(params);
}

    "; 
    return $script;
  }
}

?>