<?php 

class MultiSelect3 {
  private $scope;
  private $fKeyId;
  private $left;
  private $middle;
  private $right;
  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->fKeyId  = $entry->fKeyId;
      $this->left    = $entry->left;
      $this->middle  = $entry->middle;
      $this->right   = $entry->right;
      $this->size    = $entry->size;
    }
    $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:32%'>
      <label for='$this->leftUI'>Available Crew</label>
      <select multiple id='$this->leftUI' size='$this->size' name='$this->leftUI[]'>
    ";


    foreach ($this->left as $option) {
      $layout .= "
        <option value=$option->id>$option->text</option>
      ";
    } 
    
    $layout .= "
      </select>
    </td>
    <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:32%'>

      <label for='$this->middleUI'>Assigned Crew</label>
      <select multiple id='$this->middleUI' size='$this->size' name='$this->middleUI[]'>
    ";    

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

      $layout .= "
        <option value=$option->id>$option->text</option>
      ";
    }

    $layout .= "
      </select>
    </td>
    <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:32%'>

      <label for='$this->rightUI'>Absent</label>
      <select multiple id='$this->rightUI' size='$this->size' name='$this->rightUI[]'>
    ";

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

      $layout .= "
        <option value=$option->id>$option->text</option>
      ";
    }  

   $layout .= "
      </select>
    </td>
  </tr>
</table>      
   ";
   
    return $layout;

  }	

  public function outputScript() {

    $script = "
    
function $this->moveAllUI (from, to) {
  var values = '';
  var fk_id = '$this->fKeyId';
  $('#'+from+' option').each(function(){
    values += $(this).val() + ',';
  });
  values += from + ',' + to + ',' + fk_id;
  $this->putDBUI (values);
  $('#'+from+' option').remove().appendTo('#'+to);
}

function $this->moveSelUI (from, to) {
  var values = '';
  var fk_id = '$this->fKeyId';
  $('#'+from+' option:selected').each(function(){
    values += $(this).val() + ',';
  });
  values += from + ',' + to + ',' + fk_id;
  $this->putDBUI (values);
  $('#'+from+' option:selected').remove().appendTo('#'+to); 
}

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

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

  for (var i=0; i<options.length; i++) {
    val = options[i].id;
    inner = options[i].text
   
    layout += '<option value=' + val +'>' + inner + '</option>';
  }
  return layout;
} 
	  
function $this->putDBUI (str) {

  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)
      document.getElementById('$this->leftUI').innerHTML=layout$this->scope(response);
      document.getElementById('$this->leftUI').focus();
    }
  }  
  xhr.send();
}  
    "; 
    return $script;
  }
}

?>