<?php 

class SelectInputs  {
  private $scope;
  private $scopeId;
  private $select;
  private $inputs;
  private $moveAll;
  private $moveSel;
  private $selAll;
  private $putDBUI;
  
  public function __construct($entry) {

    if (isset($entry)) {
      $this->scope   = $entry->scope;
      $this->scopeId = $entry->scopeId;
      $this->size    = $entry->size;
    }
    
    $this->select  = "select" . $this->scope;
    $this->inputs  = "inputs" . $this->scope;
    $this->moveAll = "moveAll" . $this->scope;
    $this->moveSel = "moveSel" . $this->scope;
    $this->selAll  = "selAll" . $this->scope;

    $this->selectTemplate = " \
    <tr id=0 class='listrow$this->select'> \
      <td nowrap> \
        <label for='chk0$this->select' class='highlight' style='margin-bottom:0px'> \
          <input type='checkbox' id='chk0$this->select' class='$this->select' value=0> \
        </label> \
      </td> \
    </tr> \
    ";   
    $this->inputsTemplate = " \
    <tr id=0 class='listrow$this->inputs'> \
      <td nowrap> \
        <label for='chk0$this->inputs' class='highlight' style='margin-bottom:0px'> \
          <input type='checkbox' id='chk0$this->inputs' class='$this->inputs' value=0> \
        </label> \
      </td> \
      <td nowrap> \
        <input type='text' id=0 class='text$this->inputs' name='location' value=0> \
      </td> \
    </tr> \
    ";   
    

    
  }
  
  public function outputLayout() {

    $layout = "
<table class='table table-condensed'>
  <tr>
    <td style='width:40%;'>
      <label for='$this->leftUI' style='margin-bottom:0px;'>Defined Features</label><br>
      <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
        <table>
          <tbody  id='list$this->select'>
          </tbody>
        </table> 
        </div>     
      </td>
      <td style='width:5%'>
        <div class='arrows'> 
          <a href=\"javascript:moveSel$this->scope('$this->inputs', '$this->select', 'all')\">&lt;&lt;</a> 
          <a href=\"javascript:moveSel$this->scope('$this->inputs', '$this->select', 'sel')\">&lt;</a> 
          <a href=\"javascript:moveSel$this->scope('$this->select', '$this->inputs', 'sel')\">&gt;</a> 
          <a href=\"javascript:moveSel$this->scope('$this->select', '$this->inputs', 'all')\">&gt;&gt;</a>
        </div>	
      </td>
      <td style='width:55%'>
        <label for='$this->inputs' style='margin-bottom:0px;'>Pertinent to Part</label><br>
        <div style='border:1px solid #ccc;height:172px;overflow-x:auto;'>
          <table>
            <tbody id='list$this->inputs'>
            </tbody>
          </table> 
        </div>     
      </td>
    </tr>
  </tbody>
</table>
<div id=err$this->scope style='color:red'></div>  
   ";
    return $layout;

  }	

    public function outputScript() {

	  $script = "

// Scope Id for the list    
var current$this->scope = 0;

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

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

$(document).on('change', '.text$this->inputs', function (e) {
  var rowid = $(this).prop('id');
  var value = $(this).prop('value');
  putinput$this->scope (rowid, value);  
});

function notify$this->scope (msgId) {
  $('#err$this->scope').html('');
  current$this->scope = msgId;
  getselect$this->scope (msgId)
}

function moveSel$this->scope (from, to, move) {
  var rowid;
  var name;
  var inputId;
  var checked = '';

  if (move == 'sel')
    checked = ':checkbox:checked';
  
  if (from == '$this->select') {
    
    $('.'+from+checked).each(function(){
      rowid = $(this).val();
      name  = $(this).prev('span').html();
      putmove$this->scope ('insert', rowid, current$this->scope, name);
      $('#'+rowid+'.listrow$this->select input:first').prop('checked', false);
      $('#'+rowid+'.listrow$this->select label').toggleClass( 'highlight', this.checked );
    });  
  }
  else {
    $('.'+from+checked).each(function(){
      rowid = $(this).val();
      putmove$this->scope ('delete', rowid, current$this->scope, '');
    });  
  }
}
  
function genselect$this->scope(rows) {
  var rowid;
  var name;
  var template = \"$this->selectTemplate\";

  $('#list$this->select').html('');

  for (var i=0; i<rows.length; i++) {  
    rowid = rows[i].id;
    name = rows[i].name;

    $('#list$this->select').append(template);
    $('#0.listrow$this->select').prop('id', rowid);
    $('#'+rowid+'.listrow$this->select label').prepend('<span>'+name+'</span>');
    $('#'+rowid+'.listrow$this->select label').prop('for', 'chk'+rowid+'$this->select');
    $('#'+rowid+'.listrow$this->select input').prop('id', 'chk'+rowid+'$this->select');
    $('#'+rowid+'.listrow$this->select input').prop('value', rowid);
  } 
  $('.$this->select').hide();
  $('.$this->select').closest('label').toggleClass( 'highlight', this.checked );
} 

function geninputs$this->scope (rows) {
  var rowid;
  var name;
  var location;
  var template = \"$this->inputsTemplate\";

  $('#list$this->inputs').html('');

  for (var i=0; i<rows.length; i++) {  
    rowid = rows[i].id;
    name  = rows[i].name;
    location = rows[i].location;
 
    $('#list$this->inputs').append(template);
    $('#0.listrow$this->inputs').prop('id', rowid);
    $('#'+rowid+'.listrow$this->inputs label').prepend(name);
    $('#'+rowid+'.listrow$this->inputs label').prop('for', 'chk'+rowid+'$this->inputs');
    $('#'+rowid+'.listrow$this->inputs input:first').prop('id', 'chk'+rowid+'$this->inputs');
    $('#'+rowid+'.listrow$this->inputs input:first').prop('value', rowid);
    $('#'+rowid+'.listrow$this->inputs input[name='+'location'+']').prop('id', rowid);
    $('#'+rowid+'.listrow$this->inputs input[name='+'location'+']').prop('value', location);
  } 
  $('.$this->inputs').hide();
  $('.$this->inputs').closest('label').toggleClass( 'highlight', this.checked );

} 

function getselect$this->scope () {

  var params = 'currid=' + current$this->scope + '&' + 'scopeid=$this->scopeId';
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/getselect$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);
      genselect$this->scope(response);

      getinputs$this->scope ();
    }
  }  
  xhr.send(params);
}

function putinput$this->scope (rowid, value) {

  var params = 'rowid=' + rowid + '&' + 'value=' + value; 

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/putinput$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)
    }
  }  
  xhr.send(params);
}

function putmove$this->scope (action, rowid, currid, name) {

  var template = \"$this->inputsTemplate\";
  var params = 'action=' + action + '&' + 'rowid=' + rowid + '&' + 'currid=' + currid; 

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/putmove$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 inputid = JSON.parse(xhr.responseText)

      if (inputid > 0) {
        $('#list$this->inputs').append(template)
        $('#0.listrow$this->inputs').prop('id', inputid);
        $('#'+inputid+'.listrow$this->inputs label').prepend(name);
        $('#'+inputid+'.listrow$this->inputs label').prop('for', 'chk'+inputid+'$this->inputs');
        $('#'+inputid+'.listrow$this->inputs input:first').prop('id', 'chk'+inputid+'$this->inputs');
        $('#'+inputid+'.listrow$this->inputs input:first').prop('value', inputid);
        $('#'+inputid+'.listrow$this->inputs input[name='+'location'+']').prop('id', inputid);
        $('#'+inputid+'.listrow$this->inputs input:first').hide();
        $('#'+inputid+'.listrow$this->inputs label').toggleClass( 'highlight', this.checked );
      }
      else
        $('#'+rowid+'.listrow$this->inputs').remove();
    }
  }  
  xhr.send(params);
}

function getinputs$this->scope () {

  var params = 'currid=' + current$this->scope;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/getinputs$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)
      geninputs$this->scope(response);
    }
  }  
  xhr.send(params);
  
}
	  
    "; 
    return $script;
  }
}

?>