<?php 

class MultiControl  {
  private $scope;
  private $scopeId;
  private $left;
  private $right;
  private $leftLabel;
  private $rightLabel;
  private $leftCtrl;
  private $rightCtrl;
  private $noSelMsg;

  public function __construct($entry) {

    if (isset($entry)) {
      $this->scope    = $entry->scope;
      $this->scopeId  = $entry->scopeId;
      $this->left     = $entry->left;
      $this->right    = $entry->right;
      $this->size     = $entry->size;
      $this->noSelMsg = $entry->noSelMsg;
    }

    if (isset($entry->leftLabel)) {
      $this->leftLabel = $entry->leftLabel;
    }  
    else
      $this->leftLabel = "";
    
    if (isset($entry->rightLabel))
      $this->rightLabel = $entry->rightLabel;
    else
      $this->rightLabel = "";
    
    $this->leftCtrl      = "left" . $this->scope;
    $this->rightCtrl     = "right" . $this->scope;

  }
  
  public function outputLayout() {

    $layout = "
<table class='table table-condensed'>
  <tbody>    
    <tr>
      <td style='width:45%;'>
        <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='$this->leftCtrl'>
            <tbody class='list$this->leftCtrl'>
    ";    
    
    foreach ($this->left as $input) {
    
      $layout .= "
              <tr>
                <td>
                  <label for='chk$this->scope$input->id' class='highlight' style='margin-bottom:0px'>$input->text
                  <input type='checkbox' id='chk$this->scope$input->id' class='$this->leftCtrl' value='$input->id'></label>
                </td>
              </tr>
      "; 
    }
                      
    $layout .= "
            </tbody>
          </table> 
        </div>     
      </td>
      <td style='width:10%'>
        <div class='arrows'> 
          <a href=\"javascript:moveAll$this->scope ('$this->leftCtrl', '$this->rightCtrl')\">&gt;&gt;</a>
          <a href=\"javascript:moveSel$this->scope ('$this->leftCtrl', '$this->rightCtrl')\">&gt;</a> 
          <a href=\"javascript:moveSel$this->scope ('$this->rightCtrl', '$this->leftCtrl')\">&lt;</a> 
          <a href=\"javascript:moveAll$this->scope ('$this->rightCtrl', '$this->leftCtrl')\">&lt;&lt;</a> 
        </div>	
      </td>
      <td style='width:45%'>
        <label for='$this->right' style='margin-bottom:0px;'>$this->rightLabel</label>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='$this->rightCtrl'>
            <tbody class='list$this->rightCtrl'>
    ";    
    
    foreach ($this->right as $input) {
    
      $layout .= "
              <tr>
                <td>
                   <label for='chk$this->scope$input->id' class='highlight' style='margin-bottom:0px'>$input->text
                   <input type='checkbox' id='chk$this->scope$input->id' class='$this->rightCtrl' value='$input->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 selid$this->scope = 0;
$(document).ready(function() {

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

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

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

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

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

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

function notify$this->scope (msgId) {
//alert (msgId);
  $('#msg$this->scope').html('');
  selid$this->scope = msgId;
  getno$this->scope (selid$this->scope);
  getin$this->scope (selid$this->scope);
}
      
function moveAll$this->scope (from, to) {
  if (selid$this->scope > 0) {
    var values = '';

    $('.'+from).each(function(){
      values += $(this).val() + ',';
      $(this).prop('class', to);
      $('.list'+to).append($(this).closest('tr'));
    });

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

function moveSel$this->scope (from, to) {
  if (selid$this->scope > 0) {
    var values = '';

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

      $(this).prop('class', to);
      $(this).prop('checked', false);
      $(this).closest('label').toggleClass( 'highlight')
      $(this).parentsUntil('tr').unwrap('tr');
      $(this).parentsUntil('td').unwrap('td');
      $('.list'+to).append($(this).closest('label'));
      $(this).closest('label').wrap('<tr><td></td></tr>');    
    });

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

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

  for (var i=0; i<options.length; i++) {  
    value = options[i].id;
    text = options[i].text;

    inner += '<tr><td><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 put$this->scope (str) {

  var params = 'values=' + str;
  
  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);
}

function getno$this->scope (id) {

  var params = 'selid=' + id + '&' + 'scopeid=$this->scopeId';
  
  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->leftCtrl').html(gen$this->scope(response, '$this->leftCtrl'));
      $('.$this->leftCtrl').hide();
      $('.$this->leftCtrl').each(function(){
        $( this ).closest('label').toggleClass( 'highlight', this.checked );
      });
    }
  }  
  xhr.send(params);
}

function getin$this->scope (id) {

  var params = 'selid=' + id;
  
  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 a function when the state changes.

    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      $('.list$this->rightCtrl').html(gen$this->scope(response, '$this->rightCtrl'));
      $('.$this->rightCtrl').hide();
      $('.$this->rightCtrl').each(function(){
        $( this ).closest('label').toggleClass( 'highlight', this.checked );
      });
    }
  }  
  xhr.send(params);
}
	  
    "; 
    return $script;
  }
}

?>