package e4s.tutorial;

import e4s.html.DIV;
import e4s.html.E4CgiParams;
import e4s.html.E4Color;
import e4s.html.E4HtmlElement_Intf;
import e4s.html.E4JavaScript;
import e4s.html.E4Message;
import e4s.html.E4Method;
import e4s.html.FORM;
import e4s.html.HTML;
import e4s.html.input.extended.E4EventHandlerInputField;
import e4s.html.input.extended.E4Fieldset;
import e4s.html.input.extended.E4InputFieldName;
import e4s.html.input.extended.E4SelectValues;
import e4s.html.input.extended.SELECT;
import e4s.html.input.extended.TEXTFIELD;
import e4s.html.input.extended.E4SelectValues.OPTION;
import e4s.servlet.E4ModuleImplementation;
import e4s.servlet.E4ServletImplementation_Intf;
import e4s.translate.E4LabelApp;
import e4s.translate.E4Label_Intf;

public class Example_SelectAndText extends E4ModuleImplementation
{
   public static E4Method start = null;
   public static E4Method submitted = null;
   
   public final static E4InputFieldName PARAM_PLANET = new E4InputFieldName("PLANET");

   private final static String[] PLANETS = new String[]{"Mercury","Venus","Earth","Mars","Jupiter","Saturn","Uranus","Neptune"};

   private static class SelectAndText extends DIV implements E4HtmlElement_Intf
   {
      final static String POSTFIX_FIELD = "_SEL";
      
      private SELECT m_SELECT = null;
      private TEXTFIELD m_TEXT = null;
      private E4EventHandlerInputField m_evt = null;

      private static E4JavaScript ms_jsChange = null;
      
      private SelectAndText(E4Label_Intf label, E4InputFieldName fieldname, String sel[], int textlength, String defVal, FORM form)
      {
         this(label,fieldname,new E4SelectValues(sel),textlength,defVal,form);
      }
        
      private SelectAndText(E4Label_Intf label, E4InputFieldName fieldname, E4SelectValues sel, int textlength, String defVal, FORM form)
      {
         E4SelectValues sel2 = new E4SelectValues(sel);
         OPTION oOther = sel2.addElement("",new E4LabelApp("Other (please specify)"));
         oOther.Style().setColor(E4Color.WHITE);
         oOther.Style().setBackgroundColor(E4Color.DARK_GRAY);
         
         if (ms_jsChange == null)
         {
            ms_jsChange = new E4JavaScript("e4sSelectAndTextChange");
            ms_jsChange.appendln("function " + ms_jsChange.getName() + "(formname,fieldname)");
            ms_jsChange.appendln("{");
            ms_jsChange.appendln("   var frm = document.forms[formname];");
            ms_jsChange.appendln("   var fSel = frm.elements[fieldname + '" + POSTFIX_FIELD + "'];");
            ms_jsChange.appendln("   var selVal = fSel.value;");
            ms_jsChange.appendln("   var fTxt = frm.elements[fieldname];");
            ms_jsChange.appendln("   if (selVal == '')");
            ms_jsChange.appendln("   {");
            ms_jsChange.appendln("      fTxt.style.display = 'block';");
            ms_jsChange.appendln("      fTxt.value = '';");
            ms_jsChange.appendln("   }");
            ms_jsChange.appendln("   else");
            ms_jsChange.appendln("   {");
            ms_jsChange.appendln("      fTxt.style.display = 'none';");
            ms_jsChange.appendln("      fTxt.value = selVal;");
            ms_jsChange.appendln("   }");
            ms_jsChange.appendln("}");
         }
         
         addScript(ms_jsChange);
         
         //m_jsChange = new E4JavaScript();
         //m_jsChange.appendln("   " + ms_jsChange.getName() + "('" + form.getName() + "','" + fieldname + "');");
         
         m_SELECT = new SELECT(new E4InputFieldName(fieldname.getName() + POSTFIX_FIELD),(String)null,sel2);
         m_SELECT.Style().setWidth(200);
         
         m_TEXT = new TEXTFIELD(fieldname,(String)null,textlength);
         m_TEXT.Style().setWidth(200);
         
         if (sel.findOption(defVal) == null)
         {
            m_TEXT.Style().setDisplay("block");
         }
         else
         {
            m_TEXT.Style().setDisplay("none");
         }

         m_TEXT.setValue(defVal);
         m_SELECT.setValue(defVal);
         
         if (label != null)
         {
            println(label);
            BR();
         }
         
         addElement(m_SELECT);
         BR();
         addElement(m_TEXT);
         
         m_evt = new E4EventHandlerInputField(E4EventHandlerInputField._EVENT_ONCHANGE,ms_jsChange.getName());
         m_evt.setParam(form.getName());
         m_evt.setParam(fieldname.getHtmlParamName());
 
         m_SELECT.setEventHandler(m_evt);
      }

      /**
       * DO NOT CALL THIS, NOT POSSIBLE WITH THIS ARCHITECTURE RIGHT NOW
       * @throws error - in any case
       */
      public void setValue( E4CgiParams params )
      {      
         throw new Error("INTERNAL ERROR");
      }

      /**
       * DO NOT CALL THIS, NOT POSSIBLE WITH THIS ARCHITECTURE RIGHT NOW
       * @throws error - in any case
       */
      public boolean validate( E4CgiParams params, E4ServletImplementation_Intf servlet )
      {      
         throw new Error("INTERNAL ERROR");
      }
   }
   
   public void start( HTML html )
   {
      html.Message(E4Message.QUESTION,"What is your planet of residence?");
      html.P();

      paintForm(html,"Earth");
   }
      
   private void paintForm( HTML html, String defValue )
   {
      // create a form and a fieldset where the two <SELECT> fields shall appear
      FORM form = html.FORM("MAINFORM",submitted);
      E4Fieldset fieldset = form.FIELDSET();

      SelectAndText fSELTEXT = new SelectAndText(new E4LabelApp("Where do you live?"),PARAM_PLANET,PLANETS,25,defValue,form);
      fieldset.addElement(fSELTEXT);
      
      // finally, add a submit button to our form
      form.P();
      form.BUTTON_Submit("Continue");
   }

   /**
    * This function has nothing to do with Ajax integration, it is just the submit of the form.
    */
   public void submitted( HTML html, E4CgiParams params )
   {
      // note here, we do not have to distinct right here if that was the SELECT or the TEXTFIELD
      String planet = params.get(PARAM_PLANET);

      html.B().print("Your choice or input: " + planet);
      html.P();
         
      paintForm( html, planet );
   }
}