package e4s.tutorial;

import e4s.html.*;
import e4s.html.input.extended.E4EventHandlerInputField;
import e4s.html.input.extended.E4InputFieldName;
import e4s.html.input.extended.SELECT;
import e4s.html.input.extended.E4SelectValues;
import e4s.servlet.E4ModuleImplementation;



/**
 * Show/Hide DIV elements based on a SELECT field using the onChange() function.
 * 
 * A selection is performed, giving a value of 1,2 or 3. In a E4JavaScript, depending on these values when
 * the select changes - using an event handler associated with the onChange() function - different DIV elements
 * will be switched hidden or visible. Please note, that a DIV element does provide this as basically E4JavaScript
 * functionality, all you have to do is call the functions in your event-handler script.
 * 
 * {@tutorial Example_DIV_3}
 */
public class Example_DIV_3 extends E4ModuleImplementation
{
   public static E4Method start = null;
   
   public void start( HTML html )
   {
      html.Message(E4Message.CAPTION,"Show/Hide DIV elements based on a SELECT field using the onChange() function");
      html.P();

      // Create a FORM where our SELECT field will appear later
      FORM form = html.FORM("MYFORM");

      // Define some select values (used later on construction of the SELECT field)
      E4SelectValues sValues = new E4SelectValues();
      sValues.addElement(0,"");
      sValues.addElement(1,"Mercury");
      sValues.addElement(2,"Venus");
      sValues.addElement(3,"Mars");
      
      // create a SELECT input element on our form, don't caring about the name
      SELECT fSELECT = form.SELECT(E4InputFieldName.ANY(),"Please Select",sValues);
      fSELECT.setValue(0);

      form.BR();

      // Create 2 "anonymous" DIV elements
      DIV divMercury = html.DIV();
      divMercury.setStyleHide(true);
      write(divMercury,"Mercury (0.4 AU) is the closest planet to the Sun and the smallest planet (0.055 Earth masses). Mercury has no natural satellites, and its only known geological features besides impact craters are \"wrinkle-ridges\", probably produced by a period of contraction early in its history. Mercury's almost negligible atmosphere consists of atoms blasted off its surface by the solar wind.[37] Its relatively large iron core and thin mantle have not yet been adequately explained. Hypotheses include that its outer layers were stripped off by a giant impact, and that it was prevented from fully accreting by the young Sun's energy.");
      
      DIV divVenus = html.DIV();
      divVenus.setStyleHide(true);
      write(divVenus,"Venus (0.7 AU) is close in size to Earth (0.815 Earth masses) and, like Earth, has a thick silicate mantle around an iron core, a substantial atmosphere and evidence of internal geological activity. However, it is much drier than Earth and its atmosphere is ninety times as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures over 400 °C, most likely due to the amount of greenhouse gases in the atmosphere. No definitive evidence of current geological activity has been detected on Venus, but it has no magnetic field that would prevent depletion of its substantial atmosphere, which suggests that its atmosphere is regularly replenished by volcanic eruptions.");
      
      // Create 1 named DIV elements
      DIV divMars = html.DIV("Mars");
      divMars.setStyleHide(true);
      write(divMars,"Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity, and the only planet known to have life. Its liquid hydrosphere is unique among the terrestrial planets, and it is also the only planet where plate tectonics has been observed. Earth's atmosphere is radically different from those of the other planets, having been altered by the presence of life to contain 21% free oxygen. It has one satellite, the Moon, the only large satellite of a terrestrial planet in the Solar System.");
      
      // Create an E4EventHandler, associated and bound to our SELECT input with the onChange() trigger
      E4EventHandlerInputField evt = fSELECT.onChange();
      evt.appendln("function " + evt.getName() + "()");
      evt.appendln("{");
      // get the form, this will be the name we gave on declaration
      evt.appendln("   var frm = document.forms['" + form.getName() + "'];");

      // get the value for our selection field
      evt.appendln("   var i = frm." + fSELECT.getHtmlParamName() + ".value;");

      // now, call the provided E4JavaScript functions for hiding our 3 DIV elements
      evt.appendln("   " + divMercury.jsHide().getName() + "();");
      evt.appendln("   " + divVenus.jsHide().getName() + "();");
      evt.appendln("   " + divMars.jsHide().getName() + "();");

      // now, based on that value we received call the provided E4JavaScript functions for showing onw of the DIV elements
      evt.appendln("        if (i == 1) " + divMercury.jsShow().getName() + "();");
      evt.appendln("   else if (i == 2) " + divVenus.jsShow().getName() + "();");
      evt.appendln("   else if (i == 3) " + divMars.jsShow().getName() + "();");
      evt.appendln("}");
   }

   /**
    * This is a helper function that does somehow table-structured output of text in a DIV element.
    */
   private void write(DIV div, String txt)
   {
      TABLE table = div.TABLE(TABLE.E4S_DEFAULT_TABLE());
      table.setWidth(320);
      table.TR().TD().SMALL().print(txt);
      div.BR();
      A href = div.A("http://www.wikipedia.org");
      href.setTarget(new E4FrameName("wiki"));
      href.FONT(E4Color.GRAY,-2).I().println("Source: www.wikipedia.org");
   }   
}