<?php 

class MultiSelectOne  {
  private $scope;
  private $label;
  private $size;

  public function __construct($entry) {

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

      if (isset($entry->entryRows)) 
        $this->entryRows = $entry->entryRows; 
      else 
        $this->entryRows = [];
    }    
  }
  
  public function outputLayout() {

    $layout = "
<label for='$this->scope' style='margin-bottom:0px;'>$this->label</label><br>
<div id='outer-container'>
  <div id='scrollable' style='height:" . $this->size . "em;'>
    <table class='table table-condensed'>
      <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() {
  setup$this->scope ();
  document.getElementById('put$this->scope').style.display= 'none';
});

$(document).on('click', '.chk$this->scope', function (e) {
  if ($(this).val() == 0) {
    $(this).val(selectId$this->scope);
    $(this).closest('label').toggleClass('highlight', true);
  }
  else {
    $(this).val(0);
    $(this).closest('label').toggleClass('highlight', false);
//    $(this).closest('tr').removeAttr('class');
//    $(this).closest('td').removeAttr('class');
  }    
  $(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 setup$this->scope () {

  // Hide list checkboxes leaving labels visible
  $('.chk$this->scope').hide();

  // Toggle off the class selector for highlight
//  $('.chk$this->scope').each(function(){
//    $( this ).closest('label').toggleClass( 'highlight', this.checked );
//  });
}


function gen$this->scope(rows) {
  var layout = '';

  for (var i=0; i<rows.length; i++) {
    var rowid = rows[i].rowid
    var text  = rows[i].text;
    var setid = rows[i].setid;
    var selid = rows[i].selid;
    var hilight = (selid > 0) ? 'class=highlight' : ''; 
    layout += '<tr id=' + rowid + '>' +
              '<td id=' + setid + '>' + 
              '<label ' + hilight + '>' + text + 
              '<input type=checkbox class=chk$this->scope value=' + selid + '>' +
              '</label></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);
        setup$this->scope ();
      }
    }  
    xhr.send(params);
  }    
}

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

  $('.$this->form').each(function() {
    values += comma + $(this).prop('id') + ':' + $(this).find('input').val() +
                     ':' + $(this).find('td').prop('id');
    comma = ',';
  });
  
  if (comma == ',') {
    var params = 'selectid=' + selectId$this->scope + '&' + 
                 '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;
  }
}

?>