<?php 

class MultiSelect2  {
  private $scope;
  private $scopeId;
  private $selectId;
  private $left;
  private $right;
  private $select;
  private $leftCtrl;
  private $rightCtrl;
  private $roleDef;
  private $rightSelect;
  private $leftSelect;
  private $rightLabel;
  private $leftLabel;
  private $noSelMsg;

  public function __construct($entry) {

    if (isset($entry)) {
      $this->scope    = $entry->scope;
      $this->scopeId  = $entry->scopeId;
      $this->selectId = $entry->selectId;
      $this->left     = $entry->left;
      $this->right    = $entry->right;
      $this->size     = $entry->size;
      $this->roleOpt  = $entry->roleOpt;
      $this->roleDef  = $entry->roleDef;
      $this->noSelMsg = $entry->noSelMsg;
    }
//print_r ($entry->roleOpt);
    $this->leftCtrl      = "left" . $this->scope;
    $this->rightCtrl     = "right" . $this->scope;

//    $options = explode (",", $entry->roleOpt);
    foreach ($entry->roleOpt as $option) {
       $id = $option->id;
       $text = $option->text;
//print_r ("text:$entry->roleDef ");

       $selected = '';
       if ($id == $entry->roleDef)
         $selected = "selected";

       $this->selections .= "<option value=$id $selected>$text</option> ";
}


    if (isset($entry->selectSide) && $entry->selectSide == "right") {
      $this->noSide = $this->leftCtrl;
      $this->inSide = $this->rightCtrl;
      $this->rightSelect = true;
      $this->leftSelect = false;
    }
    else {
      $this->inSide = $this->leftCtrl;
      $this->noSide = $this->rightCtrl;
      $this->leftSelect = true;
      $this->rightSelect = false;
    }  

    if (isset($entry->leftLabel)) 
      $this->leftLabel = $entry->leftLabel;
    else
      $this->leftLabel = "";
    
    if (isset($entry->rightLabel))
      $this->rightLabel = $entry->rightLabel;
    else
      $this->rightLabel = "";
  }
  
  public function outputLayout() {

    $layout = "
<table class='table table-condensed'>
  <tbody>    
    <tr>
      <td style='width:50%;'>
        <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' class='multi$this->scope' >
            <tbody  id='list$this->leftCtrl'>
    ";    
    
    foreach ($this->left as $input) {

      $layout .= "
            <tr id='row$this->scope$input->id'>
              <td nowrap>
                 <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>
      ";
      if ($this->leftSelect)
        $layout .= "
              <td>
                <input type='hidden' id='opt$this->scope$input->id' value='$input->role_id'>
                <select id='$input->id' class='sel$this->scope' style='margin-bottom:0px;height:23px;width:100px;'>
                  $this->selections
                </select>
              </td>
        "; 
      $layout .= "        
            </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:40%'>
        <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='$this->rightCtrl' class='multi$this->scope' >
            <tbody id='list$this->rightCtrl'>
    ";

    foreach ($this->right as $input) {

      $layout .= "
            <tr id='row$this->scope$input->id'>
              <td nowrap>
                 <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>
      ";
      if ($this->rightSelect)
        $layout .= "
              <td>
                <input type='hidden' id='opt$this->scope$input->id' value='$input->role_id'>
                <select id='$input->id' class='sel$this->scope' style='margin-bottom:0px;height:23px;width:100px;'>
                  $this->selections
                </select>
              </td>
        "; 
      $layout .= "        
            </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;
var selRole = '';

$(document).ready(function() {

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

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

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

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

  $('.$this->rightCtrl').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', '.$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 );
  
});

$(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;
  });    
  
  if (update) {
    putrole$this->scope (value, id, selid$this->scope);
    $('#msg$this->scope').html('');     
  }  
  else 
    $('#msg$this->scope').html(text + ' already selected');     
  
});

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

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 = '';
    var value;

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

      $(this).prop('class', to);
      $(this).prop('checked', false);
      $(this).closest('label').toggleClass( 'highlight')
      if (from == '$this->inSide')
        $(this).closest('td').next('td').remove();
      $('#list'+to).append($('#row$this->scope'+value));

      if (to == '$this->inSide') {
        selRole = '<td><input type=hidden id=opt$this->scope' + value + ' value=$this->roleDef>' +
              '<select id=' + value + ' class=sel$this->scope style=margin-bottom:0px;height:17px;width:100px;>' +
              '$this->selections</select></td>';

        $('#row$this->scope'+value).append(selRole);    
        var selOpt= '$this->roleDef';
        $('#'+value+'.sel$this->scope').find('option[value='+selOpt+']').prop('selected', true);
      }
    });

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

function moveSel$this->scope (from, to) {
  if (selid$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')
      if (from == '$this->inSide')
        $(this).closest('td').next('td').remove();
      $('#list'+to).append($('#row$this->scope'+value));

      if (to == '$this->inSide') {
         selRole = '<td><input type=hidden id=opt$this->scope' + value + ' value=$this->roleDef>' +
              '<select id=' + value + ' class=sel$this->scope style=margin-bottom:0px;height:17px;width:100px;>' +
              '$this->selections</select></td>';

       $('#row$this->scope'+value).append(selRole);    
        var selOpt= '$this->roleDef';
        $('#'+value+'.sel$this->scope').find('option[value='+selOpt+']').prop('selected', true);
      }
    });

    if (values != '') {
      values += from + ',' + to + ',' + selid$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_id;
    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>';
    if (side == '$this->inSide') 
      inner += '<td><input type=hidden id=opt$this->scope' + value + ' value=' + role + '>' +
               '<select id=' + value + ' class=sel$this->scope style=margin-bottom:0px;height:17px;width:100px;>' +
               '$this->selections</select></td>';
    inner += '</tr>';
  }
  return inner;
} 

function getin$this->scope (id) {

  var params = 'selid=' + id + '&' + 'scopeid=$this->scopeId';
  
  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->inSide').html(gen$this->scope(response, '$this->inSide'));
      $('#list$this->inSide').focus();
      $('.$this->inSide').hide();
      $('.$this->inSide').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);
      });
    }
  }  
  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->noSide').html(gen$this->scope(response, '$this->noSide'));
      $('#list$this->noSide').focus();
      // Hide list checkboxes leaving labels visible
      $('.$this->noSide').hide();

      $('.$this->noSide').each(function(){
        $( this ).closest('label').toggleClass( 'highlight', this.checked );
      });
      $('.sel$this->noSide').each(function(){
        var selOpt= $(this).prev('input').val(); // Value from the database (hidden) 
        $(this).find('option[value='+selOpt+']').prop('selected', true);
      });
    }
  }  
  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);
}

function putrole$this->scope (role, id, selid) {

  var params = 'role=' + role + '&' + 'id=' + id + '&' + 'selid=' + selid;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/putrole$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;
  }
}

?>