<?php 

class Multi2Inputs  {
  private $scope;
  private $scopeId;
  private $selectId;
  

  public function __construct($entry) {

    if (isset($entry)) {
      $this->scope    = $entry->scope;
      $this->filterId  = $entry->filterId;
      $this->leftLabel   = $entry->leftLabel;
      $this->middleLabel = $entry->middleLabel;
      $this->rightLabel  = $entry->rightLabel;
      $this->size     = $entry->size;

      if (isset($entry->selectId)) 
        $this->selectId = $entry->selectId;
      else
        $this->selectId = 0;
    
      foreach ($this->elements as $item) {
  
        $readOnly = '';
        if ($item->input != '') {
          $this->right .= " 
            <tr id='row$this->scope$item->value'>
              <td style='width:5%;'>
              </td>
              <td style='width:95%;'>
                <label for='chk$this->scope$item->value' class='highlight' style='margin-bottom:0px;'>$item->text 
                <input type='checkbox' id='chkleft$this->scope$item->value' class='right$this->scope' value='$item->value'></label>
              </td>
            </tr>
          ";        
          $readlOnly = 'readonly';     
        }

        $this->left .= "
            <tr id='row$this->scope$item->value'>
              <td style='width:5%;'>
              </td>
              <td style='width:95%;'>
                <label for='chk$this->scope$item->value' class='highlight' style='margin-bottom:0px;'>$item->text 
                <input type='checkbox' id='chkright$this->scope$item->value' class='right$this->scope' value='$item->value' $readOnly></label>
              </td>
            </tr>
        ";      
      }
    }
  }
  
  public function outputLayout() {



    $layout = "
    
<table class='table table-condensed'>
  <tbody>    
    <tr>
      <td style='width:47%;'>
        <label for='$this->leftCtrl' style='margin-bottom:0px;'>$this->leftLabel</label><br>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='tblleft$this->scope' class='mulleft$this->scope' style=width:100%;>
            <tbody id='left$this->scope'>
      $this->left        
          </tbody>
        </table> 
        </div>     
      </td>
      <td style='width:6%'>
        <div class='arrows'> 
          <a href=\"javascript:moveSel$this->scope ('left$this->scope', 'right$this->scope')\">&gt;</a><br> 
          <a href=\"javascript:moveSel$this->scope ('right$this->scope', 'left$this->scope')\">&lt;</a> 
        </div>	
      </td>
      <td style='width:47%'>
        <label for='$this->rightCtrl' style='margin-bottom:0px;'>$this->rightLabel</label><br>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='tblright$this->scope' class='mulright$this->scope' style=width:100%;>
            <tbody id='right$this->scope'>
      $this->right
          </tbody>
        </table> 
        </div>     
      </td>
    </tr>
  </tbody>
</table>
<div id=valmsg$this->scope style='color:red'></div>  
   ";
    return $layout;

  }	

    public function outputScript() {

	  $script = "

// Scope Id for the list    
var selid$this->scope = 0;
var selRole = '';

$(document).ready(function() {

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

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

  // Set entry selected id
  selid$this->scope = $this->selectId ;

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

  $('.right$this->scope').each(function(){
    $( this ).closest('label').toggleClass( 'highlight', this.checked );
  });
  
  // Set option to selected  
  $('.sel$this->scope').each(function(){
    var selOpt= $(this).prev('input').val(); // Value from the database (hidden) 
    $(this).find('option[value='+selOpt+']').prop('selected', true);
  });

});

$(document).on('click', '.left$this->scope', function (e) {
 

  $(this).closest('label').toggleClass('highlight', this.checked);
  
});

$(document).on('click', '.right$this->scope', function (e) {

  $( this ).closest('label').toggleClass( 'highlight', this.checked );
  
});

$(document).on('change', '.sel$this->scope', function (e) {
  var value = $(this).val();
  var text  = $('.sel$this->scope option:selected').html();
  var id    = $(this).prop('id');
  var update = true;

  $('.sel$this->scope').each(function() {

    if (value != '$this->roleDef' && id != $(this).prop('id') && $(this).val() == value )
      update = false;
  });    

});

function refresh$this->scope () {
  getno$this->scope (selid$this->scope)
  getin$this->scope (selid$this->scope);
}

function com$this->scope (message) {
  var key = Object.keys(message); 
  if (key == 'selectId') {
    $('#msg$this->scope').html('');
    selid$this->scope = message[key][0];
    get$this->scope (selid$this->scope);
  }    
}
 
multiFunction['com$this->scope'] = {
  com$this->scope: com$this->scope
}; 

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

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

function gen$this->scope(items) {
  var right = '';
  var left = '';

  for (var i=0; i<items.length; i++) {  
    var value = items[i].id;
    var text = items[i].text;
    var input = items[i].input;
    var readOnly = '';
    var check = '';

//alert (value + ' ' + text + ' ' + input + ' ' + used);    
    
    if (items[i].part == 'SF') {
      right += '<tr id=row$this->scope'+ value + '><td style=width:5%;>' + check + '</td><td style=width:95%;>' +
               '<label for=chkright$this->scope' + value + ' class=highlight style=margin-bottom:0px>' + text + 
               '<input type=checkbox id=chkright$this->scope' + value + ' class=right$this->scope' + ' value=' + value + '></label></td>';
      check = '&#10004';
      readOnly = ' disabled';   
    }

    left += '<tr id=row$this->scope'+ value + '><td style=width:5%;>' + check + '</td><td style=width:95%;>' +
            '<label for=chkleft$this->scope' + value + ' class=highlight style=margin-bottom:0px>' + text + 
            '<input type=checkbox id=chkleft$this->scope' + value + ' class=left$this->scope' + ' value=' + value + readOnly + '></label></td></tr>';
  }
  
  document.getElementById('left$this->scope').innerHTML = left;
  document.getElementById('right$this->scope').innerHTML = right;
//  $('#left$this->scope').focus();
  $('.left$this->scope').hide();
  $('.right$this->scope').hide();
  $('.left$this->scope').each(function(){
    $( this ).closest('label').toggleClass( 'highlight', this.checked );
  });
  $('.right$this->scope').each(function(){
    $( this ).closest('label').toggleClass( 'highlight', this.checked );
  });

} 

function get$this->scope (id) {

  var params = 'filterid=$this->filterId';
  
  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() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      gen$this->scope(response);
    }
  }  
  xhr.send(params);
}

function mov$this->scope (values) {

  var params = 'move=' + values;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/mov$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 (0)
  }  
  xhr.send(params);
}


    "; 
    return $script;
  }
}

?>