package e4s.tutorial;

import e4s.util.E4Images;
import e4s.html.*;
import e4s.servlet.E4ModuleImplementation;
import e4s.servlet.E4ServletImplementation_Intf;
import e4s.util.E4UniqueIdentifier;


/**
 * This example demonstrates a combination of elements that are reusable and offer a show/hide button 
 * to change the visibility of a DIV element. It also illustrates the usage of E4JavaScript in combination
 * with the 'onClick' event handler.
 *
 * {@tutorial Example_DIV_2}
 */
public class Example_DIV_2 extends E4ModuleImplementation
{
   public static E4Method start = null;
   
   public static String EXAMPLE_NAME = "Own E4HtmlElement_Intf based on DIV";
   
   /**
    * Define a class that is inheritated from DIV, displays an image and something else in the caption.
    * The image can be clicked on and will show/hide that element. 
    */
   private static class MyPane extends DIV implements E4HtmlElement_Intf
   {
      private TD m_td_caption = null;
      
      /**
       * Make a new instance.
       * 
       * @param element the suronding element where the new created object will be linked to.
       * @param servlet the servlet's context, use getServlet() function
       * @param visible true if the element shall be hidden initially
       * 
       * @return the new created and added element
       */
      public static MyPane newInstance( E4HtmlElement element, E4ServletImplementation_Intf servlet, boolean visible )
      {
         // make a new instance of the MyPane object
         MyPane res = new MyPane();

         // at this very early point, define if it will be displayed or not
         res.setStyleHide(! visible);
         
         // get the scripts provided (and added allready) by the DIV element
         E4JavaScript jsShow = res.jsShow();
         E4JavaScript jsHide = res.jsHide();
         E4JavaScript jsIsShown = res.jsIsOpen();

         // prepare a name for the image using a generic name provided by class UniqueIdentifier
         String imgname = E4UniqueIdentifier.get("IMG");
         
         // create an event handler for the A-tag  
         E4EventHandlerA evt = new E4EventHandlerA(E4EventHandlerA._EVENT_ONCLICK);
         evt.appendln("function " + evt.getName() + "()");
         evt.appendln("{");
         // check if DIV element is shown
         evt.appendln("   if (" + jsIsShown.getName() + "())");
         evt.appendln("   {");
         // if DIV is shown, call the E4JavaScript hide function (provided by the DIV) and change the image
         evt.appendln("      " + jsHide.getName() + "();");
         evt.appendln("      document.images['" + imgname + "'].src = '" + E4Images.marker_0.constructUrl(servlet) + "';");
         evt.appendln("   }");
         evt.appendln("   else");
         evt.appendln("   {");
         // if DIV is not shown, call the E4JavaScript show function (provided by the DIV) and change the image
         evt.appendln("      " + jsShow.getName() + "();");
         evt.appendln("      document.images['" + imgname + "'].src = '" + E4Images.marker_1.constructUrl(servlet) + "';");
         evt.appendln("   }");
         evt.appendln("}");
         
         // create a TABLE and add it to the surounding element
         TABLE table = new TABLE();
         element.addElement(table);
         
         // make a TR
         TR tr = table.TR();
         
         // make a TD and an A tag based on the event-handler 
         TD td = tr.TD();
         A href = td.A(evt);
         
         // place the image in the A tag, depending which one is depending on initially open or not
         // give the image an name so that it can be changed using our script
         IMG img = href.IMG(visible ? E4Images.marker_1 : E4Images.marker_0);
         img.setName(imgname);
         
         // reserve and create a new TD for later caption output
         res.m_td_caption = tr.TD();

         // add the new created object to the surounding element and return it. So the element at this
         // point contains a TABLE and the DIV element now.
         element.addElement(res);
         return res;
      }

      /**
       * Print a caption in a prepared TD element that comes right beside the image.
       */
      public void setCaption( String caption )
      {
         m_td_caption.B().print(caption);
      }
   }
   
   
   
   public void start( HTML html )
   {
      html.Message(E4Message.CAPTION,"Create own elements based on DIV elements that can hide themselves");
      html.P();
      
      // get our servlet (it will be required later for initializing the MyPane elements
      E4ServletImplementation_Intf servlet = getServlet();

      // add a table to our HTML but get the TR only for further constructions
      TR tr = html.TABLE().TR();
      
      // create 3 table cells in that TR, make them TOP aligned
      TD td[] = tr.TD(3,null,VAlign.TOP);

      // now create 3 MyPane elements constructed within the 3 TD elements allready created and added
      // note that the second will be initially hidden
      MyPane paneX = MyPane.newInstance(td[0],servlet,true);
      MyPane paneY = MyPane.newInstance(td[1],servlet,false);
      MyPane paneZ = MyPane.newInstance(td[2],servlet,true);
      
      // set the caption of each of the three elements
      paneX.setCaption("This is pane X");
      paneY.setCaption("This is pane Y");
      paneZ.setCaption("This is pane Z");
      
      // make some content for the first element (a link in a window)
      A href = paneX.A("http://www.google.com");
      href.B().print("Click here for google!");
      href.openInNewWindow("GOOGLE",A.WINDOW_PARAM_RESIZE|A.WINDOW_PARAM_RESIZE,640,480);

      // make some content for the second element (a simple text in a box)
      paneY.BoxRoundCorners().I().SMALL().print("Text in a Box!");
      
      // make some content for the third element (a simple text)
      paneZ.println("To be or not to be - that is here the question!");
   }   
}