package e4s.tutorial;

import e4s.html.HTML;
import e4s.html.IMG;
import e4s.html.E4JavaScript;
import e4s.html.E4Method;
import e4s.servlet.E4ModuleImplementation;

/**
 * Image-MAP Example. 
 * 
 * Defines an image with different areas (rectangle, cirlce and polygon) and shows hoe
 * to combine an area with a E4Method or a E4JavaScript call.
 * 
 * {@tutorial Example_IMAP}
 */
public class Example_IMAP extends E4ModuleImplementation
{
   public static E4Method start = null;
   public static E4Method green = null;
   public static E4Method red = null;
   
   public void start( HTML html )
   {
      // prepare a E4JavaScript
      E4JavaScript jsPoly = new E4JavaScript();
      jsPoly.JSBODY().appendln("alert('you clicked on the polygon');");
      
      final int polygon_x[] = {184,212,233,202,178};
      final int polygon_y[] = {22,19,44,63,50};

      // this is the image which will be displayed within the HTML tag
      IMG img = html.IMG("images/tutorial/example_IMAP.gif");

      // get (create) the image map for this image
      IMG.IMAP imap = img.getIMAP();
         
      // add a rectangle (left upper to right lower corner)
      // associated with method green
      imap.add(green,"Rectangle",40,20,100,60);
      
      // add a circle (center-point, radius)
      // associated with method red
      imap.add(red,"Circle",140,40,20);
      
      // add a polygon (array of coord-pairs)
      // associated with a E4JavaScript function
      imap.add(jsPoly,"Polygon",polygon_x,polygon_y);
   }
   
   public void green( HTML html )
   {
      html.B().print("You clicked on the rectangle");
      html.BR();
      
      start(html);
   }
   
   public void red( HTML html )
   {
      html.B().print("You clicked on the circle");
      html.BR();
      
      start(html);
   }
}