<?
class frmEvents extends MForm
{
    function __construct()
    {   
        parent::__construct('Events');
        $this->eventHandler();
	}

    public function createFields()
	{
        $handlers = <<< HERE
window.sampleHandler = function(event)
{
    console.log("Event(" + event.type + ") on target " + event.target.id + "; currentTarget= " + event.currentTarget.id);
}

window.changeColor = function(event)
{
    element = miolo.getElementById(event.target.id);
    color = dojo.style(element, "backgroundColor");
    if ((color == "rgb(255, 0, 0)") || (color == "red")) dojo.style(element, "backgroundColor", "blue");
    if ((color == "rgb(0, 0, 255)") || (color == "blue")) dojo.style(element, "backgroundColor", "red");
}

HERE;
        $this->page->addJsCode($handlers);

        $label = new MLabel('Click here!','red',true);
        $label->addEvent('click',"window.sampleHandler(event);");

        $ajax = new MLabel('Click to generate a AJAX event!','green',true);
        $ajax->addEvent('click',":doAjaxEvent;10:20:30");

        $fields = Array(
            new MSpacer('10px'),
            new MLabel('DOM Events - Messages on Firebug console','black',true),
            new MSeparator('click event on a div element'),
            new MDiv('div1'), 
            new MSpacer('10px'),
            new MSeparator('click event on a element'),
            $label,
            new MSpacer('10px'),
            new MSeparator('mouseover event on a div element'),
            new MDiv('div2'), 
            new MSpacer('20px'),
            new MLabel("AJAX Events - using the ':' syntax",'black',true),
            new MSeparator('ajax event on a div element'),
            array(
                $ajax,
                new MDiv('div3'), 
            ),
            new MSpacer('10px'),
            new MSeparator('ajax event on a button'),
            array(
                new MButton('btnAjax','Ajax Button'),
                new MDiv('div4'), 
            ),
            new MSpacer('10px'),
            new MSeparator('ajax event on a selection'),
            array(
                new MSelection('selAjax','','Ajax Selection',array("A"=>"Option A","B"=>"Option B","C"=>"Option C")),
                new MDiv('div5'), 
            ),
            new MSpacer('10px'),
        );
        $this->setFields($fields);

        $this->div1->width = '20px';
        $this->div1->height = '20px';
        $this->div1->backgroundColor = 'blue';
        $this->div1->addEvent('click',"window.sampleHandler(event);");

        $this->div2->width = '20px';
        $this->div2->height = '20px';
        $this->div2->backgroundColor = 'blue';
        $this->div2->addEvent('mouseover',"window.changeColor(event);");
        
        $this->btnAjax->addEvent('click',':doAjaxButton');

        $this->selAjax->addEvent('change',':doAjaxSelection');

        $this->defaultButton = false;
	}


    public function doAjaxEvent($args)
    {
        $label = new MLabel($args);
        $this->manager->ajax->setResponseControls($label,'div3');
    }

    public function doAjaxButton($args)
    {
        $label = new MLabel('Ajax Event from button click');
        $this->manager->ajax->setResponseControls($label,'div4');
    }

    public function doAjaxSelection($args)
    {
        $choice = $args->selAjax;
        $label = new MLabel('Ajax Event from Selection Change - choice: '. $choice);
        $this->manager->ajax->setResponseControls($label,'div5');
    }

}

?>
