<?php 

class MultiSelect1  {
  private $field;
  private $label;
  private $size;

  public function __construct($field) {

    if (isset($field)) {
      $this->field = $field->field;
      $this->form  = $field->form;
      $this->label = $field->label;
      $this->size  = $field->size;
      
      if (isset($field->size))
        $this->size = $field->size . "em";
      else
        $this->size ="10em";
    }    
  }
  
  public function outputLayout() {

    $layout = "
<label for='$this->field' style='margin-bottom:0px;'>$this->label</label><br>
<div id='outer-container'>
  <div id='scrollable' style='height:$this->size;'>
    <table class='table table-condensed'>
      <tbody id='frm$this->field'>
      </tbody>
    </table>
  </div>
  <button id='put$this->field' class='btn btn-inverse' onclick='put$this->field();'>Enter</button>
</div>
    ";
    return $layout;
  }	

  public function outputScript() {

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

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

$(document).on('click', '.chk$this->field', function (e) {
  if ($(this).val() == 0) {
    $(this).val(selectId$this->field);
    $(this).closest('label').toggleClass('highlight', true);
  }
  else {
    $(this).val(0);
    $(this).closest('label').toggleClass('highlight', false);
  }    
  
});

function set$this->form (selectId) {
  selectId$this->field = selectId;
  get$this->field (selectId$this->field);
}


function setup$this->field () {

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

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

  // Set option to selected  
  $('.mul$this->field').each(function(){
    if ($(this).find('input').val() > 0) 
    $(this).find('label').toggleClass( 'highlight', this.checked );
  });
}


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

  for (var i=0; i<rows.length; i++) {
    var id = rows[i].id
    var selid = rows[i].selid;
    var text = rows[i].text;
    layout += '<tr id=' + id + ' class=mul$this->field><td>' +
              '<label class=highlight>' + text + 
              '<input type=checkbox class=chk$this->field value=' + selid + '>' +
              '</label></td></tr>';
  }
  return layout;
} 

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

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/get$this->field.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->field').innerHTML =
            gen$this->field(response);
        setup$this->field ();
      }
    }  
    xhr.send(params);
  }    
}

function put$this->field () {
  var comma  = '';
  var rowIds    = '';
  var chkIds = '';

  $('.mul$this->field').each(function() {
    rowIds += comma + $(this).prop('id');
    chkIds += comma + $(this).find('input').val();
    comma = ',';
  });
  
  var params = 'selectid=' + selectId$this->field + '&' + 
               'rowids=' + rowIds + '&' + 'chkids=' + chkIds;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/put$this->field.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->field (response);
    }
  }  
  xhr.send(params);
}

function rer$this->field () {
  var params = '';
  var xhr = new XMLHttpRequest();

  xhr.open('POST', 'ajax/rer$this->field.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)
      selectId$this->field = 0;
      setselVehicle (selectId$this->field)
      get$this->field (selectId$this->field);
    }
  }  
  xhr.send(params);
}

    "; 
    return $script;
  }
}

?>