package e4s.tutorial;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;

import e4s.html.*;
import e4s.html.ajax.E4AjaxData;
import e4s.html.ajax.E4AjaxData_Intf;
import e4s.html.input.extended.E4Fieldset;
import e4s.html.input.extended.E4InputFieldName;
import e4s.html.input.extended.LONGFIELD;
import e4s.servlet.E4ModuleImplementation;
import e4s.servlet.E4ServletImplementation_Intf;
import e4s.servlet.E4ServletImplementation_Servlet;
import e4s.translate.E4LabelApp;
import e4s.util.E4StringBufferHtml;


/**
 * Draw a circle diagram based on some dynamic input values using Ajax activation.
 *
 * {@tutorial Example_Ajax_Diagram}
 */
public class Example_Ajax_Diagram extends E4ModuleImplementation
{
   public static E4Method start = null;
   public static E4Method createimg = null;
 
   private final static int NUMFIELDS = 5;
   private final static int WIDTH = 200;
   private final static int HEIGHT = 200;
   
   /**
    * This is our Ajax output, it is involved after a change on the form
    * but just places an image on the screen, that image is rendered in 
    * a function "createimg".
    */
   private static class AjaxOutput extends E4AjaxData implements E4AjaxData_Intf
   {
      /**
       * Get an identification for this Ajax data object, for the case that more
       * instances of this object are used within the same session, then a unique
       * identifier is required. 
       */
      public String getDivId()
      {
         return getClass().getName();
      }
      
      public void toHtml( E4StringBufferHtml buf, E4CgiParams params, E4ServletImplementation_Intf servlet, boolean initial ) 
      {
         try
         {
            // Construct an URL that contains of the E4Method associated with function "createimg"
            // and additionally place the parameters received to that URL
            String url = createimg.constructUrl(servlet) + params.toCgiCall();
   
            // Create an image with that URL, use no documentbase as this is included complete in the url.
            IMG img = new IMG(url,E4DocumentBase.EMPTY);
            
            // Set width and height of the image
            img.setWidth(WIDTH);
            img.setHeight(HEIGHT);
   
            // render the image
            img.toHtml(buf,servlet);
         }
         catch( Error e )
         {
            TRACE(e);
         }
         catch( Exception e )
         {
            TRACE(e);
         }
      }
   }

   public void start( HTML html )
   {
      BODY body = html.BODY();
      body.Message(E4Message.CAPTION,"Ajax dynamic image example");
      body.P();
      
      TR tr = body.TABLE().TR();
      
      AjaxOutput ajaxout = new AjaxOutput();
      
      // this is the Ajax Element, compatible with the E4S framework and
      // cab be integrated into e.g. the FORM element. Basically, the ae element
      // is a DIV tag with a specified - or in this case - unique generic 
      // identification.
      E4AjaxElement ajaxelem = new E4AjaxElement(ajaxout,WIDTH,HEIGHT,getServlet());
      //ajaxelem.setShowOnLoad(true);
       
      // create a box, this will later contain the Input Form 
      E4BoxRoundCorners boxInput = tr.TD(VAlign.TOP).BoxRoundCorners();
      boxInput.setCaption("Values");
      boxInput.setBorderColor(E4Color.ORANGE);
      
      // create an input form and add it to the E4BoxRoundCorners element in HTML
      FORM form = new FORM();
      boxInput.addElement(form);

      // create a fieldset within that form (this is a layout issue only)
      E4Fieldset fieldset = form.FIELDSET();
      
      for( int i = 1; i <= NUMFIELDS; i++ )
      {
         LONGFIELD fInput = fieldset.LONGFIELD(new E4InputFieldName("F" + i),new E4LabelApp("Field #",i),4);
         fInput.setEventHandler(ajaxelem.getOnChange(form));
         fInput.setValue( (int) (Math.random() * 1000));
      }

      tr.Spacer(10);
      
      // create a box, this will later contain the Ajax-HTML element
      E4BoxRoundCorners boxOutput = tr.TD(VAlign.TOP).BoxRoundCorners();
      boxOutput.setCaption("Diagram");
      boxOutput.setWidth(WIDTH + 5);
      //boxOutput.setAlign(Align.CENTER);
      //boxOutput.setHeight(HEIGHT + 20);
      boxOutput.setBorderColor(E4Color.ORANGE);
      
      boxOutput.addElement(ajaxelem);

      // the body tag requires preperation (never forget this when using Ajax)
      ajaxelem.prepare(body);
      
      E4EventHandlerBODY evt = body.onLoad();
      evt.JSBODY().appendln(ajaxelem.getOnChange(form).getName() + "();");
   }
   
   public void createimg( HTML html, E4CgiParams params ) 
   throws Exception
   {
      try
      {
         int values[] = new int[NUMFIELDS];
      
         for( int i = 1; i <= NUMFIELDS; i++ )
         {
            if (params.checkInt("F" + i) == null)
               values[i - 1] = params.getInt("F" + i);
         }
         
         // create an image (this is awt stuff, it has nothing to do with servlet or E4S programming)
         BufferedImage bufferedImage = drawDiagramImage(values);
         
         // get our servlet's context
         E4ServletImplementation_Servlet servlet = (E4ServletImplementation_Servlet)getServlet();
         
         // write out the image
         servlet.writePng(bufferedImage);
      }
      catch( Exception e )
      {
         TRACE(e);
      }
   }

   private BufferedImage drawDiagramImage(int[] values)
   {
      final Color colors[] = {Color.RED,Color.BLUE,Color.GREEN,Color.MAGENTA,Color.YELLOW};
      final int OFFSET = 3;
      
      BufferedImage res = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
      
      Graphics g = res.getGraphics();
      g.setColor(Color.white);
      g.fillRect(0,0,WIDTH,HEIGHT);
      
      int sum = 0; 
      for( int i = 0; i < values.length; i++ )
      {
         if (values[i] > 0)
            sum += values[i];
      }
      
      if (sum > 0)
      {
         g.setColor(Color.GRAY);
         g.fillOval(OFFSET,OFFSET,WIDTH - OFFSET - 1,HEIGHT - OFFSET - 1);
         
         int sofar = 0;
         
         for( int i = 0; i < values.length; i++ )
         {
            if (values[i] > 0)
            {
               int angel = (int)((360.0 * (float)values[i] / (float)sum) + 0.5f);
               
               g.setColor(colors[i % colors.length]);
               g.fillArc(0, 0, WIDTH - OFFSET - 1, HEIGHT - OFFSET - 1, sofar, angel);
               
               sofar += angel;
            }
         }
      }

      return res;
   }
}