<?php 

class MultList2List {
  private $scope;
  private $selectId;
  private $leftList;
  private $rightList;
  private $leftLabel;
  private $rightLabel;

  public function __construct($entry) {

    if (isset($entry)) {
      $this->scope    = $entry->scope;
      $this->selectId = $entry->selectId;
      $this->size     = $entry->size;
    }
    
    $this->leftList = "left$this->scope";
    $this->rightList = "right$this->scope";

    if (isset($entry->parentId))
      $this->parentId = $entry->parentId;
    else
      $this->parentId = 1;

    if (isset($entry->fkeyId))
      $this->fkeyId = $entry->fkeyId;
    else
      $this->fkeyId = 0;

    if (isset($entry->leftLabel)) 
      $this->leftLabel = "<label>$entry->leftLabel</label><br>";
    else
      $this->leftLabel = "";

    if (isset($entry->rightLabel))
      $this->rightLabel = "<label>$entry->rightLabel</label><br>";
    else
      $this->rightLabel = "";

    if (isset($entry->leftItems))
      $this->leftItems = $entry->leftItems;
    else
      $this->leftItems = [];

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

    $layout = "
<table class='table table-condensed'>
  <tbody>    
    <tr>
      <td style='width:45%;'>
    $this->leftLabel
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='$this->leftList' class='multi$this->scope' >
            <tbody  id='list$this->leftList'>
    ";    
    
    foreach ($this->leftItems as $item) {

      $layout .= "
            <tr id='row$this->scope$item->id'>
              <td nowrap>
                 <label for='chk$this->scope$item->id' class='highlight' style='margin-bottom:0px'>$item->text
                 <input type='checkbox' id='chk$this->scope$item->id' class='$this->leftList' value='$item->id'></label>
              </td>
            </tr>
      ";
    }
                      
    $layout .= "
          </tbody>
        </table> 
        </div>     
      </td>
      <td style='width:5%'>
        <div class='arrows'> 
          <a href=\"javascript:moveAll$this->scope ('$this->leftList', '$this->rightList')\">&gt;&gt;</a>
          <a href=\"javascript:moveSel$this->scope ('$this->leftList', '$this->rightList')\">&gt;</a> 
          <a href=\"javascript:moveSel$this->scope ('$this->rightList', '$this->leftList')\">&lt;</a> 
          <a href=\"javascript:moveAll$this->scope ('$this->rightList', '$this->leftList')\">&lt;&lt;</a> 
        </div>	
      </td>
      <td style='width:50%'>
    $this->rightLabel
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='$this->rightList' class='multi$this->scope' >
            <tbody id='list$this->rightList'>
    ";

    foreach ($this->rightItems as $item) {

      $layout .= "
            <tr id='row$this->scope$item->id'>
              <td nowrap>
                 <label for='chk$this->scope$item->id' class='highlight' style='margin-bottom:0px'>$item->text
                 <input type='checkbox' id='chk$this->scope$item->id' class='$this->rightList' value='$item->id'></label>
              </td>
            </tr>
      ";
      
    }  

   $layout .= "
          </tbody>
        </table> 
        </div>     
      </td>
    </tr>
  </tbody>
</table>
<div id=msg$this->scope style='color:red'></div>  
   ";
    return $layout;

  }	

    public function outputScript() {

	  $script = "

// Scope Id for the list    
var fkeyId$this->scope = $this->fkeyId;
var parentId$this->scope = $this->parentId;
var selectId$this->scope = 0;

$(document).ready(function() {

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

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

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

  $('.$this->rightList').each(function(){
    $( this ).closest('label').toggleClass( 'highlight', this.checked );
  });
});

$(document).on('click', '.$this->leftList', function (e) {
  $( this ).closest('label').toggleClass( 'highlight', this.checked );
});

$(document).on('click', '.$this->rightList', function (e) {
  $( this ).closest('label').toggleClass( 'highlight', this.checked );
});

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

//alert ('$this->scope:' + key + message[key][0]);  

  if (key == 'fkeyId') {
    fkeyId$this->scope = message[key][0];
    if (selectId$this->scope > 0) {
      getno$this->scope (selectId$this->scope)
      getin$this->scope (selectId$this->scope)
    }  
  } 
  else if (key == 'selectId') {
    selectId$this->scope = message[key][0];
    if (parentId$this->scope > 0) {
      getno$this->scope (selectId$this->scope)
      getin$this->scope (selectId$this->scope)
    }  
  }
}  

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


function moveAll$this->scope (from, to) {
  if (selectId$this->scope > 0) {
 
    var values = '';
    var value;

    $('.'+from).each(function(){
      value = $(this).val();
      values += $(this).val() + ',';

      $(this).prop('class', to);
      $(this).prop('checked', false);
      $(this).closest('label').toggleClass( 'highlight')
      $('#list'+to).append($('#row$this->scope'+value));
    });

    if (values != '') {
      values += from + ',' + to + ',' + selectId$this->scope;
      put$this->scope (values);
    }  
  }
  else
    $('#msgr$this->scope').html('$this->noSelMsg');
}

function moveSel$this->scope (from, to) {
  if (selectId$this->scope > 0) {
    var value;
    var values = '';
   
    $('.'+from+':checkbox:checked').each(function(){
      value = $(this).val();
      values += $(this).val() + ',';

      $(this).prop('class', to);
      $(this).prop('checked', false);
      $(this).closest('label').toggleClass( 'highlight')
      $('#list'+to).append($('#row$this->scope'+value));

    });

    if (values != '') {
      values += from + ',' + to + ',' + selectId$this->scope;
      put$this->scope (values);
    }  
  }
  else
    $('#msg$this->scope').html('$this->noSelMsg');
}

function gen$this->scope(options, side) {
  var select = ''; 
  var text;
  var value;
  var inner = '';

  for (var i=0; i<options.length; i++) {  
    value = options[i].id;
    text = options[i].text;
    role = options[i].role;
    inner += '<tr id=row$this->scope'+ value + '><td nowrap>' +
             '<label for=chk$this->scope' + value + ' class=highlight style=margin-bottom:0px>' + text + 
             '<input type=checkbox id=chk$this->scope' + value + ' class=' + side + ' value=' + value + '></label></td></tr>';
  }
  return inner;
} 

function getin$this->scope (id) {
  if (id == 0) {
    $('#list$this->rightList').html('');  
  }

  else {
    var params = 'selectid=' + id + '&' + 'fkeyid=' + fkeyId$this->scope +
                 '&'+ 'parentid=' + parentId$this->scope;
  
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/getin$this->scope.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {//Call function when state changes.
      if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText)
        $('#list$this->rightList').html(gen$this->scope(response, '$this->rightList'));
        $('#list$this->rightList').focus();
        $('.$this->rightList').hide();
        $('.$this->rightList').each(function(){
          $( this ).closest('label').toggleClass( 'highlight', this.checked );
        });
      }
    }
    xhr.send(params);
  }    
}

function getno$this->scope (id) {
  if (id == 0) {
    $('#list$this->leftList').html('');  
  }

  else {
    var params = 'selectid=' + id + '&' + 'fkeyid=' + fkeyId$this->scope +
                 '&'+ 'parentid=' + parentId$this->scope;
  
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/getno$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)
        $('#list$this->leftList').html(gen$this->scope(response, '$this->leftList'));
        $('#list$this->leftList').focus();
        // Hide list checkboxes leaving labels visible
        $('.$this->leftList').hide();

        $('.$this->leftList').each(function(){
          $( this ).closest('label').toggleClass( 'highlight', this.checked );
        });
      }
    }  
    xhr.send(params);
  }    
}

function put$this->scope (values) {

  var params = 'move=' + 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)
    }
  }  
  xhr.send(params);
}

    "; 
    return $script;
  }
}

?>