// -----------------------------------------------------------
// - jquery.finder.js
// -
// - Extensie die het mogelijk maakt om een "snel lijstje"
// - te maken in een formulier
// - Maakt gebruik van jqGrid
// - BHE 20100308
// -----------------------------------------------------------

// GEBRUIK:
//  Maak <input> tag. Plaats daarin de ID van het geselecteerde item.
//  Roep daarna op de input tag de finder extensie aan.
//
// AANROEP:
//  var exampleFinderSettings =
//    {
//     Width: 250,                              // Breedte van het uiteindelijke element
//     ServiceName: "BoatService",              // De naam van de service die de data levert
//     MethodName: "loadAllFiltered",           // De naam van de methode die de data laadt
//     FilterArgument: "filterText",            // De naam van het argument voor deze methode
//     ColumnHeaders: ["Naam", "HT nr"],        // De titels van de kolommen in de grid
//     ColumnProperties: ["Name", "HTNumber"],  // De namen van de kolommen in de grid
//     TextProperty: "Name",                    // De eigenschap van het domeinobject die in het tekstveld getoond moet worden.
//     ShowText: <Naam van het geselecteerde item>
//    }
//
//  $("#mijnInput").finder(exampleFinderSettings);

jQuery.fn.finder = function(settings)
{
  try
  {
    var controlID = $(this).attr("id");

    //$(this).attr("type", "hidden");

    var containerDiv = $("<div></div>");
    containerDiv.attr("id", controlID+"_finder");
    containerDiv.css("position", "relative");
    containerDiv.css("vertical-align", "middle");
    containerDiv.addClass("ui-widget");
    containerDiv.addClass("ui-widget-content");
    containerDiv.addClass("ui-corner-all");
    containerDiv.attr("in-refresh", "0");
    containerDiv.attr("is-dirty", "0");
    containerDiv.attr("filter-argument", settings.FilterArgument);
    containerDiv.attr("method-name", settings.MethodName);
    containerDiv.attr("service-name", settings.ServiceName);
    containerDiv.attr("text-property", settings.TextProperty);
    containerDiv.click(finder_containerclick);

    containerDiv.width(settings.Width);
    containerDiv.height(18);

    $(this).after(containerDiv);

    var textNode = $("<span></span>");
    textNode.attr("id", controlID+"_finder_text");
    textNode.css("left", "2px");
    textNode.css("position", "absolute");
    textNode.addClass("findertext");
    textNode.text(settings.ShowText);

    containerDiv.append(textNode);

    var textBoxNode = $("<input></input>");
    textBoxNode.attr("id", controlID+"_finder_textbox");
    textBoxNode.css("border", "none");
    textBoxNode.css("background-color", "white");
    textBoxNode.css("position", "absolute");
    textBoxNode.css("top", textNode.position().top);
    textBoxNode.css("left", textNode.position().left);
    textBoxNode.css("width", containerDiv.width() - 25);
    textBoxNode.css("height", textNode.height());
    containerDiv.append(textBoxNode);
    textBoxNode.hide();
    textBoxNode.keyup(finder_refreshgrid);

    var buttonNode = $("<a></a>");
    buttonNode.css("position", "absolute");
    buttonNode.css("right", "0px");
    buttonNode.css("top", "0px");
    textNode.after(buttonNode);
    buttonNode.button({icons: {primary: "ui-icon-search"}});

    buttonNode.click(finder_buttonclick);

    var gridDiv = $("<div></div>");
    gridDiv.css("z-index", "1000");
    gridDiv.css("position", "absolute");
    gridDiv.css("top", containerDiv.height() + 1);
    gridDiv.css("left", 0);
    gridDiv.css("height", 200);
    gridDiv.css("width", containerDiv.width());
    gridDiv.css("background-color", "white");
    gridDiv.attr("id", controlID+"_finder_griddiv");
    containerDiv.append(gridDiv);
    gridDiv.hide();

    var gridTable = $("<table></table>");
    gridTable.attr("id", controlID + "_finder_gridtable");
    gridDiv.append(gridTable);

    // Prepare the column names array
    var colNames = settings.ColumnHeaders;
    colNames.unshift('ID');

    var colModel = [];
    // ID column
    colModel.push({name: 'ID', hidden: true});

    for(i in settings.ColumnProperties)
    {
      colModel.push({name: settings.ColumnProperties[i], sortable: true});
    }

    gridTable.jqGrid
      ({
        datatype: 'local',
        colNames: colNames,
        autowidth: true,
        height: gridDiv.height(),
        colModel: colModel,
        onSelectRow: finder_select
      });
  }
  catch(e)
  {
    alert(e);
  }
}

function finder_buttonclick(event)
{
  var controlID = $(this).parent().attr("id").replace("_finder", "");
  var containerDiv = $("#" + controlID + "_finder");
  var textNode = $("#" + controlID + "_finder_text");
  var textBoxNode = $("#" + controlID + "_finder_textbox");
  var gridDiv = $("#" + controlID + "_finder_griddiv");

  textBoxNode.show();
  textBoxNode.val(textNode.text());

  textBoxNode.select();
  gridDiv.show();

  $('body').bind("click", finder_bodyclick);
  event.stopPropagation();

  textBoxNode.keyup();
}

function finder_refreshgrid()
{
  var textBoxNode = $(this);
  var controlID = $(this).attr("id").replace("_finder_textbox", "");
  var containerDiv = $("#" + controlID + "_finder");
  var serviceName = containerDiv.attr("service-name");
  var methodName = containerDiv.attr("method-name");
  var filterArgument = containerDiv.attr("filter-argument");
  var isDirty = containerDiv.attr("is-dirty");
  var inRefresh = containerDiv.attr("in-refresh");

  if(inRefresh == "0")
  {
    try
    {
      containerDiv.attr("in-refresh", "1");
      containerDiv.attr("is-dirty", "0");

      var paramArray = {};
      paramArray[filterArgument] = textBoxNode.val();

      ServiceProxy.Call(serviceName, methodName, paramArray, function(data){finder_afterloaddata(data,controlID)});
    }
    catch(e)
    {
      alert(e);
    }
  }
  else
  {
    containerDiv.attr("is-dirty", "1");
  }
}

function finder_afterloaddata(data,controlID)
{
  var gridControl = $("#"+controlID+"_finder_gridtable");
  var containerDiv = $("#" + controlID + "_finder");
  
  gridControl.clearGridData();

  for(i in data)
  {
    gridControl.addRowData(data[i].ID, data[i]);
  }

  containerDiv.attr("in-refresh", "0");
  if(containerDiv.attr("is-dirty") == "1")
  {
    var textBoxNode = $("#" + controlID + "_finder_textbox");
    textBoxNode.keyup();
  }
}

function finder_select(id)
{
  var gridControl = $(this);
  var controlID = gridControl.attr("id").replace("_finder_gridtable", "");
  var containerDiv = $("#" + controlID + "_finder");
  var textProperty = containerDiv.attr("text-property");
  var textNode = $("#" + controlID + "_finder_text");

  var rowObject = gridControl.jqGrid('getRowData', id);
  var text = rowObject[textProperty];
  textNode.text(text);

  $("#"+controlID).val(id);
  finder_bodyclick();

}

function finder_containerclick(event)
{
  event.stopPropagation();
}

function finder_bodyclick()
{
  $("div [id$='_finder_griddiv']").hide();
  $("div [id$='_finder_textbox']").hide();

  $('body').unbind("click", finder_bodyclick);
}