<?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->iterator = $entry->iterator;
      $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->relSelUI    = "relSel"  . $this->scope;
    $this->genLayoutUI = "layout"  . $this->scope; 
    $this->putDBUI     = "put"     . $this->scope;
    $this->refresh     = "refresh" . $this->scope;
    $this->release     = "release" . $this->scope;
    $this->addon      = "addon"  . $this->scope;

    if (isset($entry->setTimeModal)) 
      $this->setTimeModal = $entry->setTimeModal;
    else
      $this->setTimeModal = "";

  }
  
  public function outputLayout() {

    $layout .= "
<table class='table'>  
  <tr>
    <td style='width:32%'>
      <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$this->leftUI$input->id' class='highlight' style='margin-bottom:0px'>$input->text
                 <input type='checkbox' id='chk$this->leftUI$input->id' class='$this->leftUI' value='$input->id'></label>
              </td>
            </tr>
      "; 
    }  

   $layout .= "
          </tbody>
        </table> 
      </div>
    </td>  
    <td style='width:2%'>
      <div class='arrows'> 
        <a href=\"javascript:$this->moveSelUI('$this->leftUI', '$this->middleUI', '00:00')\"><span class='glyphicon glyphicon-chevron-right'></span></a> 
        <a href=\"javascript:$this->moveSelUI('$this->middleUI', '$this->leftUI', '00:00')\"><span class='glyphicon glyphicon-chevron-left'></span></a> 
        <a href=\"javascript:$this->refresh()\">
          <span class='glyphicon glyphicon-refresh'></span>
        </a> 
      </div>
    </td>
    <td style='width:32%'>
      <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$this->middleUI$input->id' class='highlight' style='margin-bottom:0px'>$input->text
                 <input type='checkbox' id='chk$this->middleUI$input->id' class='$this->middleUI' value='$input->id'></label>
              </td>
            </tr>
      "; 
    }  

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

      <div class='arrows'> 
        <a href=\"javascript:$this->moveSelUI('$this->middleUI', '$this->rightUI', '00:00')\">&gt;</a> 
        <a href=\"javascript:$this->moveSelUI('$this->rightUI', '$this->middleUI', '00:00')\">&lt;</a> 
      </div>
    </td>
    <td style='width:32%'>
      <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$this->rightUI$input->id' class='highlight' style='margin-bottom:0px'>$input->text
                 <input type='checkbox' id='chk$this->rightUI$input->id' class='$this->rightUI' value='$input->id'></label>
              </td>
            </tr>
      "; 
    }  

   $layout .= "
            <tr>
              <td>
              </td>
            </tr>
          </tbody>
        </table> 
      </div>     
    </td>
  </tr>
  <tr>
    <td style='width:32%'>
    </td>
    <td style='width:2%'>
    </td>
    <td style='width:32%'>
      <button class='btn btn-inverse'
        onclick='modal$this->scope()'>
        <span class='glyphicon glyphicon-chevron-left'></span>Release
      </button> 
    </td>    
    <td style='width:2%'>
    </td>
    <td style='width:32%'>
    </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 confirm$this->iterator (time) {
  if (time != '00:00')
    $this->moveSelUI('$this->middleUI', '$this->leftUI', time)
} 

function modal$this->scope () {
  if ($('.$this->middleUI:checkbox:checked').length > 0)
    show$this->setTimeModal('Release');
}

function $this->moveSelUI (from, to, time) {
  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, time);
}

// 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 (string, adjustTime) {
  var trto_id = $('#selto_vehicle').val();
  var trfrom_id = $('#selfrom_vehicle').val();
  string += ',' + trto_id + ',' + trfrom_id;

  var params = 'arg1=' + string + '&' + 'adjusttime=' + adjustTime ;
  
  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;
  }
}

?>