package e4s.tutorial;

import e4s.db.E4DBException;
import e4s.html.*;
import e4s.html.input.extended.CHECKBOX;
import e4s.html.input.extended.E4EventHandlerInputField;
import e4s.html.input.extended.E4InputFieldName;
import e4s.html.input.extended.TEXTFIELD;
import e4s.servlet.E4ModuleImplementation;
import e4s.translate.E4LabelNone;

/**
 * Multiple Pickup example, demonstrates how to open a window and select one or multiple values (e.g. out of a 
 * CHECKBOX) and instantially overtake the values to the calling input field. This mechanism is useful to implement
 * user selections out of a variety of possibilities.
 *
 * {@tutorial Example_PickupMultiple}
 */
public class Example_PickupMultiple extends E4ModuleImplementation
{
   final static long WINDOW_PARAMETERS = A.WINDOW_PARAM_RESIZE|A.WINDOW_PARAM_SCROLL;
   final static int WINDOW_WIDTH = 100;
   final static int WINDOW_HEIGHT = 250;
   
   public static E4Method        start = null;
   public static E4MethodPickup selectMultipleColors = new E4MethodPickup(WINDOW_PARAMETERS,WINDOW_WIDTH,WINDOW_HEIGHT);

   public void start( HTML html )
   {
      BODY body = html.BODY();

      FORM form = body.FORM();

      form.Message(E4Message.CAPTION,"Multiple Selection Pickup Example");
      form.P();
      
      // Define a TEXTFIELD and do your own pickup selection here (this field has no specified name)
      TEXTFIELD colorsA = form.TEXTFIELD(E4InputFieldName.ANY(),"Which colors do you love most?",60,255);
      colorsA.setValue("red,green");
      colorsA.definePickupList(selectMultipleColors); 
      
      form.BR();
  
      // Define another TEXTFIELD with a specified name 
      TEXTFIELD colorsB = form.TEXTFIELD(new E4InputFieldName("HATE"),"Which colors do you hate most?",60,255);
      colorsB.setValue("black");
      colorsB.definePickupList(selectMultipleColors); 
      
      form.P();
      form.I().SMALL().print("Click the symbol beside the input fields, you can select more values which will be overtaken");
   }   

   
   /**
    * You can use this pickup callback on multiple fields, as the fieldname is communicated within the
    * parameters.
    */
   public void selectMultipleColors( HTML html, E4CgiParams params ) throws E4DBException
   {
      final String COLORS[] = {"red","green","blue","magenta","yellow","brown","black","white","cyan"};
      final E4Color RGB[] = {E4Color.RED,E4Color.GREEN,E4Color.BLUE,E4Color.MAGENTA,E4Color.YELLOW,E4Color.BROWN,E4Color.BLACK,E4Color.WHITE,E4Color.CYAN};
      
      // this is the current default value in the underlaying field
      String defval = params.get(E4MethodPickup._PARAM_INIT_VALUE);

      // this is the current field's label
      String label = params.get(E4MethodPickup._PARAM_LABEL);

      // we use the field's label as title for our window
      html.setTitle(label);

      BODY body = html.BODY();
      FORM form = body.FORM();
      TABLE table = form.CENTER().TABLE(TABLE.E4S_DEFAULT_TABLE());
      
      // create a E4JavaScript which is bound to the BODY tag
      E4JavaScript js = body.createScript();
      js.appendln("function " + js.getName() + "(cb_name)");
      js.appendln("{");
      js.appendln("   var s = '';");
      js.appendln("   var currentform = document.forms[0];");
     
      for( int i = 0; i < COLORS.length; i++ )
      {
         // create a checkbox, use any name for the input field
         CHECKBOX cb = new CHECKBOX(new E4InputFieldName("F" + i));
         
         E4EventHandlerInputField evt = new E4EventHandlerInputField(E4EventHandlerInputField._EVENT_ONCLICK,js.getName());
         evt.setParam(cb.getHtmlParamName(),true);
         cb.setEventHandler(evt);

         if (defval.indexOf(COLORS[i]) >= 0)
            cb.setValue(true);
         
         js.appendln("   if (currentform.elements['" + cb.getHtmlParamName() + "'].checked)");
         js.appendln("      s += '," + COLORS[i] + "'");

         // make a new table row
         TR tr = table.TR();
         
         // add the checkbox to the table row
         tr.TD(Align.CENTER,VAlign.MIDDLE).addElement(cb);
         
         // add the name of the color to the table row
         tr.TD(Align.CENTER,VAlign.MIDDLE).print(COLORS[i]);
         
         // add a color field to the table row
         TD tdExample = tr.TD();
         tdExample.print(NBSP);
         tdExample.setBgColor(RGB[i]);
         tdExample.setWidth(20);
         tdExample.setHeight(20);
      }
 
      // finalize our script
      js.appendln("   if (s != '')");
      js.appendln("   {");
      js.appendln("      s = s.substr(1);");
      js.appendln("      if (s.length > 255)");
      js.appendln("         alert('too many entries');");
      js.appendln("   }");

      // get the standard return script, but do not close the window
      E4JavaScript jsReturn = A_ReturnValue.createReturnScript(params,false,false);
      
      // add the return script (otherwise it would not be included in our HTML page)
      js.addScript(jsReturn);
      
      // call the return script with the value prepared in our script
      js.appendln("   " + jsReturn.getName() + "(s);");
      js.appendln("}");
   }

}