<?php 

class MultiChoose2  {
  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 = "<label>$entry->leftLabel</label>";
    }  
    else
      $this->leftLabel = "";
    
    if (isset($entry->rightLabel))
      $this->rightLabel = "<label>$entry->rightLabel</label>";
    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%;'>
        $this->leftLabel
        <div id='outer-container'>
          <div id='scrollable' style='height:" . $this->size . "em;border-style:inset;border-width:5px'>
            <table id='$this->leftCtrl'>
              <tbody class='list$this->leftCtrl'>
              </tbody>
            </table>
          </div>    
        </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%'>
        $this->rightLabel
        <div id='outer-container'>
          <div id='scrollable' style='height:" . $this->size . "em;border-style:inset;border-width:5px'>
            <table id='$this->rightCtrl'>
              <tbody class='list$this->rightCtrl'>
              </tbody>
            </table> 
          </div>
        </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 com$this->scope (msgId) {
//alert (msgId);
  $('#msg$this->scope').html('');
  selid$this->scope = msgId;
  gno$this->scope (selid$this->scope);
  gin$this->scope (selid$this->scope);
}

multiFunction['com$this->scope'] = {
  com$this->scope: com$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) {
alert (here);
  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 gno$this->scope (id) {

  if (id == 0)
    document.getElementById('list$this->leftCtrl').innerHTML = '';
  
  else {
    var params = 'selid=' + id;
    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)
        document.getElementById('list$this->leftCtrl').innerHTML = 
          (gen$this->scope(response, '$this->leftCtrl'));
        $('#$this->leftCtrl').hide();
        $('#$this->leftCtrl').each(function(){
          $( this ).closest('label').toggleClass( 'highlight', this.checked );
        });
      }
    }  
    xhr.send(params);
  }
}  

function gin$this->scope (id) {

  if (id == 0)
    document.getElementById('list$this->leftCtrl').innerHTML = '';

  else {
    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)
        document.getElementById('list$this->leftCtrl').innerHTML = 
            (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;
  }
}

?>