<?php 

class MultiSelect2  {
  private $scope;
  private $scopeId;
  private $left;
  private $right;
  private $leftUI;
  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->right   = $entry->right;
      $this->size    = $entry->size;
    }
    
    $this->leftUI      = "left" . $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->updateDBUI  = "update" . $this->scope;
  }
  
  public function outputLayout() {

    $layout .= "
<table class='table table-condensed'>
  <tbody>    
    <tr>
      <td style='width:45%'>
      <label for='$this->leftUI'>Occupants</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:10%'>
        <div class='arrows'> 
          <a href=\"javascript:$this->moveAllUI ('$this->rightUI', '$this->leftUI')\">&lt;&lt;</a> 
          <a href=\"javascript:$this->moveSelUI ('$this->rightUI', '$this->leftUI')\">&lt;</a> 
          <a href=\"javascript:$this->moveSelUI ('$this->leftUI', '$this->rightUI')\">&gt;</a> 
          <a href=\"javascript:$this->moveAllUI ('$this->leftUI', '$this->rightUI')\" href=\"#\">&gt;&gt;</a>
        </div>	
      </td>
      <td style='width:45%'>
        <label for='$this->right'>Crew</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>
  </tbody>
</table>
<div id=msg$this->scope style='color:red'></div>  
   ";
    return $layout;

  }	

    public function outputScript() {

	  $script = "

var left_id$this->scope = $this->scopeId ;

function notify$this->scope (msgId) {
  $('#msg$this->scope').html('');
  left_id$this->scope = msgId;
  select$this->scope (msgId)
}
      
function $this->moveAllUI (from, to) {
  if (left_id$this->scope > 0) {
    var values = '';
    // Get ids of each moved item 
    $('#'+from+' option').each(function(){
      values += $(this).val() + ',';
    });
  
    values += from + ',' + to + ',' + left_id$this->scope;
    $this->updateDBUI (values);
    $('#'+from+' option').remove().appendTo('#'+to);
  }  
  else
    $('#msg$this->scope').html('Add vehicle');
}
    
function $this->moveSelUI (from, to) {
  if (left_id$this->scope > 0) {
    var values = '';
    $('#'+from+' option:selected').each(function(){
      values += $(this).val() + ',';
    });
    values += from + ',' + to + ',' + left_id$this->scope;
    $this->updateDBUI (values);
    $('#'+from+' option:selected').remove().appendTo('#'+to); 
  }
  else
    $('#msg$this->scope').html('Add vehicle');
}

// Include 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 select$this->scope (id) {

  var params = 'arg1=' + id;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/select$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('$this->leftUI').innerHTML=layout$this->scope(response);
      document.getElementById('$this->leftUI').focus();
    }
  }  
  xhr.send(params);
}

function $this->updateDBUI (str) {

  var params = 'arg1=' + str;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/$this->updateDBUI.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;
  }
}

?>