<?php 

class MultiSelect3 {
  private $field;
  private $left;
  private $middle;
  private $right;
  private $moveAll;
  private $moveSel;

  public function __construct($field) {
    if (isset($field)) {
      $this->field    = $field->field;
      $this->form     = $field->form;
      $this->size     = $field->size;
    }

    if (isset($field->leftLabel)) 
      $this->leftLabel = $field->leftLabel;
    else
      $this->leftLabel = "Left";

    if (isset($field->middleLabel)) 
      $this->middleLabel = $field->middleLabel;
    else
      $this->middleLabel = "Middle";
    if (isset($field->rightLabel)) 
      $this->rightLabel = $field->rightLabel;
    else
      $this->rightLabel = "Right";

    $this->left    = "left"    . $this->field;
    $this->middle  = "middle"  . $this->field;
    $this->right   = "right"   . $this->field;
    $this->moveAll = "moveAll" . $this->field;
    $this->moveSel = "moveSel" . $this->field;

  }
  
  public function outputLayout() {

    $layout = "
<table class='table'>  
  <tr>
    <td style='width:32%'>
      <label for='$this->left' style='margin-bottom:0px;'>$this->leftLabel</label><br>
      <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
        <table id='$this->left'>
          <tbody  id='col$this->left'>
          </tbody>
        </table> 
      </div>
    </td>  
    <td style='width:2%;padding-top:50px;'>
      <div class='arrows'> 
        <a href=\"javascript:mov$this->field('$this->left', '$this->middle')\"><span class='glyphicon glyphicon-chevron-right'></span></a> 
        <a href=\"javascript:mov$this->field('$this->middle', '$this->left')\"><span class='glyphicon glyphicon-chevron-left'></span></a> 
        </a> 
      </div>
    </td>
    <td style='width:32%'>
      <label for='$this->middle' style='margin-bottom:0px;'>$this->middleLabel</label><br>
      <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
        <table id='$this->middle'>
          <tbody id='col$this->middle'>
          </tbody>
        </table> 
      </div>    
    </td>  
    <td style='width:2%;padding-top:50px;'>

      <div class='arrows'> 
        <a href=\"javascript:mov$this->field('$this->middle', '$this->right')\"><span class='glyphicon glyphicon-chevron-right'></span></a> 
        <a href=\"javascript:mov$this->field('$this->right', '$this->middle')\"><span class='glyphicon glyphicon-chevron-left'></span></a> 
      </div>
    </td>
    <td style='width:32%'>
      <label for='$this->right' style='margin-bottom:0px;'>$this->rightLabel</label><br>
      <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
        <table id='$this->right' >
          <tbody id='col$this->right'>
            <tr>
              <td>
              </td>
            </tr>
          </tbody>
        </table> 
      </div>     
    </td>
  </tr>
</table> 
<div id=msg$this->field style='color:red'></div>      
   ";
   
    return $layout;

  }	

  public function outputScript() {

    $script = "

var selectId$this->field = 0;

function set$this->form (selectId) {
  selectId$this->field = selectId;
  get$this->field (selectId$this->field, 'left');
  get$this->field (selectId$this->field, 'middle');
  get$this->field (selectId$this->field, 'right');
}

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

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

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

function mov$this->field (from, to) {
  document.getElementById('msg$this->field').innerHTML = '';
  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');
    $('.col'+to).append($(this).closest('label'));
    $(this).closest('label').wrap('<tr><td nowrap></td></tr>');    
  });

  if (selectId$this->field == 0)
    document.getElementById('msg$this->field').innerHTML = 'Select a country to set up';
  else if (values.length > 0) {
    values += from + ',' + to + ',' + selectId$this->field;
    put$this->field (values);
  }
  else
    document.getElementById('msg$this->field').innerHTML = 'Select items to move in left or right column';
}

function gen$this->field (cells, column) {
  var layout='';

  for (var i=0; i<cells.length; i++) {
    var cellValue = cells[i].id;
    var cellText  = cells[i].text;
    var idVal     = column + 'chk$this->field' + cellValue;
    var classVal  = column + '$this->field';
//alert (cellValue + ' ' + cellText);
    
    layout +=
'            <tr>' +
'              <td nowrap>' +
'                 <label for=' + idVal + ' class=highlight style=margin-bottom:0px>' + cellText +
'                 <input type=checkbox id=' + idVal + ' class=' + classVal + ' value=' + cellValue + '></label> ' +
'              </td>' +
'            </tr>'; 

  }
  return layout;
} 
	  
function get$this->field (selectId, column) {

  var idVal = 'col' + column + '$this->field';
  var classVal = column + '$this->field';
// alert (idVal); 

  var params = 'selectid=' + selectId + '&' + 'column=' + column;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/get$this->field.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(idVal).innerHTML = gen$this->field (response, column);

      // Hide column checkboxes leaving labels visible
      $('.' + classVal).hide();

      // Toggle off the class selector for highlight
      $('.' + classVal).each(function(){
//alert ('left');  
        $(this).closest('label').toggleClass('highlight', this.checked);
      });

    }
  }  
  xhr.send(params);
}

function put$this->field (fromTo) {
  var params = 'fromto=' + fromTo;
  var xhr = new XMLHttpRequest();

  xhr.open('POST', 'ajax/put$this->field.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)
      if (response & 100)
        get$this->field (selectId$this->field, 'left');
      if (response & 010)
        get$this->field (selectId$this->field, 'middle');
      if (response & 001)
        get$this->field (selectId$this->field, 'right');

    }
  }  
  xhr.send(params);
}

function rer$this->field () {
  var params = '';
  var xhr = new XMLHttpRequest();

  xhr.open('POST', 'ajax/rer$this->field.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)
      selectId$this->field = 0;
      setselWorkday (selectId$this->field)
      get$this->field (selectId$this->field, 'left');
      get$this->field (selectId$this->field, 'middle');
      get$this->field (selectId$this->field, 'right');
    }
  }  
  xhr.send(params);
}


    "; 
    return $script;
  }
}
?>