Event.observe(window, 'load', function() {
  if($('search-params')){
    $('search-params').observe('keyup', searchForPlayers);
  }

  if($('player-search-results')){
    $('player-search-results').hide();
  }
});

function searchForPlayers(event){
  /**
   * var node  = event.element();
   * var value = node.options[node.selectedIndex].value;
   * var text  = node.options[node.selectedIndex].text;
   */

  var node  = event.element();
  var param = $F(node);
    
  if ( param != '' )
  {
    var url = 'xml/webservice.php';
    var service    = 'player-search';
    var parameters = 'service=' + service + '&username=' + param;

    var requestObj = new Ajax.Request(
      url,
      {
        method: 'get',
        parameters: parameters,
        requestHeaders : {Accept: 'application/json'},
        onSuccess: searchForPlayersSuccess,
        asynchronous: true
      }
    );
  }
}

function searchForPlayersSuccess(transport, json){
  /**
   * Could do either
   *
   *   var data = transport.responseText.evalJSON(true);
   *   console.log(data);
   *
   *   OR
   *
   *   json
   *   console.log(json);
   *
   * because of the optional second parameter
   * which passes in a evaluated json object
   * ----IF AND ONLY IF---- json was passed back
   * in the response header.
   */


  var body = '<table cellspacing="1" cellpadding="1" width="95%">';
  body += '<tr><td><b>Name</b></td>';
  body += '<td align="center"><b>Username</b></td></tr>';

  var data = transport.responseText.evalJSON(true);
  for(var i = 0; i < data.length; i++){
    body += '<tr>';
    body += '<td>&nbsp;&gt; <a href="javascript:void(0);" class="profile-options" id="' + data[i]['user_id'] + '">' + data[i]['last_name'] + ', '+data[i]['first_name'] +'</a></td>';
    body += '<td align="center">(' + data[i]['username'] + ')</td>';
    body += '</tr>';   
    body += '<tr>';
    body += '<td colspan="2" style="padding: 1px; background-color: #000; color: #FFF; width: 95%;"><div id="player-options-'+data[i]['user_id']+'">';
    body += '<a class="employee" id="em-'+data[i]['user_id']+'" style="color: #FFF;" href="javascript:void(0);">Employee</a>|';
    body += '<a class="expert" id="ex-'+data[i]['user_id']+'" style="color: #FFF;" href="javascript:void(0);">Expert</a>|';
    body += '<a class="admin" id="ad-'+data[i]['user_id']+'" style="color: #FFF;" href="javascript:void(0);">Admin</a>|';
    body += '<a class="none" id="na-'+data[i]['user_id']+'" style="color: #FFF;" href="javascript:void(0);">None</a>&nbsp;&nbsp;&nbsp;';
    body += '</div></td>';
        
  }

	$body = '</table>';

  // clear out our container
  $('player-search-results').innerHTML = '';
  $('player-search-results').innerHTML += body;

  for(var i = 0; i < data.length; i++){
     $('player-options-'+data[i]['user_id']).hide();
  }

  $$('.profile-options').each(function(item){
     Event.observe(item, 'click', showOptions);
  });
  $$('.employee').each(function(item){
     Event.observe(item, 'click', makeEmployee);
  });
  $$('.expert').each(function(item){
     Event.observe(item, 'click', makeExpert);
  });
  $$('.admin').each(function(item){
     Event.observe(item, 'click', makeAdmin);
  });
  $$('.none').each(function(item){
     Event.observe(item, 'click', makeNone);
  });
  
  $('player-search-results').show();

}

function makeEmployee(event){
  var node = event.element();
  var id = node.identify();

    var url = 'xml/webservice.php';
    var service    = 'make-employee';
    var parameters = 'service=' + service + '&user_id=' + id;

    var requestObj = new Ajax.Request(
      url,
      {
        method: 'get',
        parameters: parameters,
        requestHeaders : {Accept: 'application/json'},
        onSuccess: makeSuccess,
        asynchronous: true
      }
    );
}

function makeExpert(event){
  var node = event.element();
  var id = node.identify();
 
    var url = 'xml/webservice.php';
    var service    = 'make-expert';
    var parameters = 'service=' + service + '&user_id=' + id;

    var requestObj = new Ajax.Request(
      url,
      {
        method: 'get',
        parameters: parameters,
        requestHeaders : {Accept: 'application/json'},
        onSuccess: makeSuccess,
        asynchronous: true
      }
    );
}

function makeAdmin(event){
  var node = event.element();
  var id = node.identify();

    var url = 'xml/webservice.php';
    var service    = 'make-admin';
    var parameters = 'service=' + service + '&user_id=' + id;

    var requestObj = new Ajax.Request(
      url,
      {
        method: 'get',
        parameters: parameters,
        requestHeaders : {Accept: 'application/json'},
        onSuccess: makeSuccess,
        asynchronous: true
      }
    );
}

function makeNone(event){
  var node = event.element();
  var id = node.identify();

    var url = 'xml/webservice.php';
    var service    = 'make-none';
    var parameters = 'service=' + service + '&user_id=' + id;

    var requestObj = new Ajax.Request(
      url,
      {
        method: 'get',
        parameters: parameters,
        requestHeaders : {Accept: 'application/json'},
        onSuccess: makeSuccess,
        asynchronous: true
      }
    );
}

function makeSuccess( transport, json ){
    var data = transport.responseText.evalJSON(true);
    if ( data['action'] == 'na' )
    {
    	document.getElementById( 'em-'+data['user_id'] ).style.color = "#FFFFFF";
    	document.getElementById( 'ex-'+data['user_id'] ).style.color = "#FFFFFF";
   		document.getElementById( 'ad-'+data['user_id'] ).style.color = "#FFFFFF";
   	}
	document.getElementById(data['div']).style.color = "#FFFF00";
}

function showOptions(event){
  var node = event.element();
  var id = node.identify();

  $('player-options-'+id).show();
}