<?php 

class MultiSelect3 {
  private $scope;
  private $scopeId;
  private $left;
  private $middle;
  private $right;
  private $refList;
  private $leftUI;
  private $middleUI;
  private $rightUI;
  private $moveAllUI;
  private $moveSelUI;
  private $selAllUI;
  private $genLayoutUI; 
  private $updateDBUI;
    
  public function __construct($entry) {
    if (isset($entry)) {
      $this->scope   = $entry->scope;
      $this->scopeId  = $entry->scopeId;
      $this->left    = $entry->left;
      $this->middle  = $entry->middle;
      $this->right   = $entry->right;
      $this->size    = $entry->size;
      $this->refList = "";
      if (null !== $entry-refresh) {
        $refreshes = explode(",", $entry->refresh);
        for ($i=0; $i<count($refreshes); $i++) {
          $this->refList .= "refresh" . $refreshes[$i] . "(); ";
        }
      }
    }
    $this->leftUI      = "left"      . $this->scope;
    $this->middleUI    = "middle"    . $this->scope;
    $this->rightUI     = "right"     . $this->scope;
    $this->moveAllUI   = "moveAll"   . $this->scope;
    $this->moveSelUI   = "moveSel"   . $this->scope;
    $this->selAllUI    = "selAll"    . $this->scope;
    $this->genLayoutUI = "layout"    . $this->scope; 
    $this->putDBUI     = "put"       . $this->scope;
    $this->refresh     = "refresh"   . $this->scope;
  }
  
  public function outputLayout() {

    $layout .= "
<table class='table'>  
  <tr>
      <td style='width:40%'>
        <label for='$this->leftUI' style='margin-bottom:0px;'>Available Crew</label><br>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='$this->leftUI'>
            <tbody  class='list$this->leftUI'>
    ";

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

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

   $layout .= "
          </tbody>
        </table> 
        </div>     
    <td style='width:2%'>
      <div class='arrows'> 
        <a href=\"javascript:$this->moveAllUI('$this->leftUI', '$this->middleUI')\">&gt;&gt;</a>
        <a href=\"javascript:$this->moveSelUI('$this->leftUI', '$this->middleUI')\">&gt;</a> 
        <a href=\"javascript:$this->moveSelUI('$this->middleUI', '$this->leftUI')\">&lt;</a> 
        <a href=\"javascript:$this->moveAllUI('$this->middleUI', '$this->leftUI')\">&lt;&lt;</a> 
        <a href=\"javascript:$this->refresh()\">
          <span class='glyphicon glyphicon-refresh'></span>
        </a> 
      </div>
    </td>
      <td style='width:40%'>
        <label for='$this->middleUI' style='margin-bottom:0px;'>Assigned Crew</label><br>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='$this->middleUI'>
            <tbody class='list$this->middleUI'>
    ";

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

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

   $layout .= "
          </tbody>
        </table> 
        </div>     
    <td style='width:2%'>

      <div class='arrows'> 
        <a href=\"javascript:$this->moveAllUI('$this->middleUI', '$this->rightUI')\">&gt;&gt;</a> 
        <a href=\"javascript:$this->moveSelUI('$this->middleUI', '$this->rightUI')\">&gt;</a> 
        <a href=\"javascript:$this->moveSelUI('$this->rightUI', '$this->middleUI')\">&lt;</a> 
        <a href=\"javascript:$this->moveAllUI('$this->rightUI', '$this->middleUI')\" href=\"#\">&lt;&lt;</a>
      </div>
    </td>
      <td style='width:40%'>
        <label for='$this->rightUI' style='margin-bottom:0px;'>Absent</label><br>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table id='$this->rightUI' >
            <tbody class='list$this->rightUI'>
    ";

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

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

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

  }	

  public function outputScript() {

    $script = "
 
var curr$this->scope = '';
$(document).ready(function() {

  curr$this->scope = $this->scopeId;

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

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

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

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

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

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

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

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

$(document).on('click', '.$this->rightUI', function (e) {
  $( this ).closest('label').toggleClass( 'highlight', this.checked );
});
   
    
function $this->moveAllUI (from, to) {
  if (curr$this->scope > 0) {
    var values = '';
    $('.'+from).each(function(){
  
      values += $(this).val() + ',';

      $(this).prop('class', to);
      $(this).parentsUntil('tr').parent().appendTo($('#'+to)); 
    });
    values += from + ',' + to + ',' + curr$this->scope;
    $this->putDBUI (values);
  }
  else
    $('#msg$this->scope').html('Select or create a Project');
}

function $this->moveSelUI (from, to) {
  if (curr$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 nowrap></td></tr>');    
    
    });
    values += from + ',' + to + ',' + curr$this->scope;
    $this->putDBUI (values);
  }
  else
    $('#msg$this->scope').html('Select or create a Project');
}

// Required for POST
//function $this->selAllUI () {
//  $('select option').attr('selected','selected');
//}

function $this->genLayoutUI(options) {
  var layout='';
  var value;
  var value;
  var inner = '';

  for (var i=0; i<options.length; i++) {  
    value = options[i].id;
    text = options[i].text;
    inner += '<tr><td nowrap><label for=chk$rightUI' + value + ' class=highlight style=margin-bottom:0px>' + text + 
             '<input type=checkbox id=chk$rightUI' + value + ' class=$this->rightUI value=' + value + '></label></td>';
  }
  return inner;
} 
	  
function $this->putDBUI (str) {
  var trto_id = $('#selto_vehicle').val();
  var trfrom_id = $('#selfrom_vehicle').val();
  str += ',' + trto_id + ',' + trfrom_id;

  var params = 'arg1=' + str;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/$this->putDBUI.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 $this->refresh () {
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/$this->refresh.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->leftUI').html=layout$this->scope(response);
      $('.list$this->leftUI').focus();
      // Hide list checkboxes leaving labels visible
      $('.$this->leftUI').hide();

      $('.$this->leftUI').each(function(){
        $( this ).closest('label').toggleClass( 'highlight', this.checked );
      });
      $this->refList;
    }
  }  
  xhr.send();
}  
    "; 
    return $script;
  }
}

?>