/*
  File        : grid.js
  Author      : DS
  Date        : 2005-02-10
  Description : JavaScript for grid
*/

/************************************************************

    Necessary files
    ---------------
         auto.js
         grid.js

    State diagram
    -------------

       +---------+ FOCUS +--------+
       |         |------>|        |
       | Playing |       | Paused |
       |         |<------|        |
       +---------+ BLUR  +--------+


    Description
    -----------

         The following HTML code shows a typical use of this module. Note that the DHTML function
initGrids() is called once the page is loaded in order to create and attach the Grid
objects.


<html>
	<head>
		<script src="dhtml.js"></script>
		<script src="auto.js"></script>
		<script src="grid.js"></script>
	</head>
	<body onload="InitDhtml()">
		<span id="gridDefinition" class="grid" hold="500" targetIds="grid1,grid2,grid3,grid4" colors="red,blue"/>
			<table>
				<tr>
					<td id="grid1" style="background-color:blue">&nbsp;</td>
					<td id="grid2" style="background-color:blue">&nbsp;</td>
				</tr>
				<tr>
					<td id="grid3" style="background-color:blue">&nbsp;</td>
					<td id="grid4" style="background-color:blue">&nbsp;</td>
				</tr>
			</table>
		</span>
	</body>
</html>

************************************************************/

RegisterInitFunction(InitGrids);

/*** DHTML function to initialize grids ***/
function InitGrids()
{
	/* Two-step initialization */
	var gridControls = new Array();
	/* Create Grid controls */
	var spans = document.getElementsByTagName('span');
	for (var i=0; i<spans.length; i++)
	{
		var cl = spans[i].className;
		if (cl != null && cl == 'grid')
		{
			var grid     = spans[i];
			grid.control = new Grid(grid);
			gridControls.push(grid.control);
		}
	}
	/* Initialize in reverse order */
	while (gridControls.length)
	{
		var gridControl = gridControls.shift();
		gridControl.event("CONTROL_INIT");
	}
}

/*** Create a new grid ***/
function Grid(element)
{
	/* Call base class constructor */
	Auto.call(this);
	this.id         = element.id;
	this.element    = element;
	this.hold       = element.getAttribute("hold");
	var targetIds   = element.getAttribute("targetIds").split(",");
	this.targets    = new Array();
	for (var i=0; i<targetIds.length; i++)
	{
		this.targets[i] = document.getElementById(targetIds[i]);
	}
	this.colors     = element.getAttribute("colors").split(",");

	/* Set up the event handlers */
	this.element.onmouseover   = this.EventControlFocus;
	this.element.onmouseout    = this.EventControlBlur;
}

/* Inherit from Auto */
Grid.prototype = new Auto();

/*** Define transition table for class ***/
var Grid_StateCounter  = 0;
var Grid_StateReady    = Grid_StateCounter++;
var Grid_StatePlaying  = Grid_StateCounter++;
var Grid_StatePaused   = Grid_StateCounter++;
var Grid_nb            = Grid_StateCounter;
var Grid_trans         = new Array(Grid_nb);
/* State Ready */
Grid_trans[Grid_StateReady] = new Array
	(
		new Array("CONTROL_INIT"     , "this.init()"   , Grid_StatePlaying)
	);
/* State Playing */
Grid_trans[Grid_StatePlaying] = new Array
	(
		new Array("CONTROL_FOCUS"    , "this.pause()"  , Grid_StatePaused),
		new Array("TIMEOUT"          , "this.next()"   , Grid_StatePlaying)
	);
/* State Paused */
Grid_trans[Grid_StatePaused] = new Array
	(
		new Array("CONTROL_BLUR"     , "this.play()"   , Grid_StatePlaying)
	);

/*** Transition definitions ***/
function Grid_init()
{
	for (var i=0; i<this.targets.length; i++)
	{
		this.set(i, i % this.colors.length);
	}
	this.next();
}

function Grid_play()
{
	this.timer = new Timer(this.id, 'TIMEOUT', this.hold);
	this.timer.set();
}

function Grid_next()
{
	var targetIndex = Math.floor(this.targets.length * Math.random());
	this.set(targetIndex, (this.get(targetIndex)+1) % this.colors.length);
	this.timer = new Timer(this.id, 'TIMEOUT', this.hold);
	this.timer.set();
}

function Grid_pause()
{
	this.timer.clear();
}

function Grid_getTargetColor(targetIndex)
{
	var target = this.targets[targetIndex];
	return target.colorIndex;
}

function Grid_setTargetColor(targetIndex, colorIndex)
{
	var target                   = this.targets[targetIndex];
	target.style.backgroundColor = this.colors[colorIndex];
	target.colorIndex            = colorIndex;
}

/* Over-ride the base class transition table Auto.trans */
Grid.prototype.trans = Grid_trans;
Grid.prototype.init  = Grid_init;
Grid.prototype.play  = Grid_play;
Grid.prototype.next  = Grid_next;
Grid.prototype.pause = Grid_pause;
Grid.prototype.set   = Grid_setTargetColor;
Grid.prototype.get   = Grid_getTargetColor;

/*** Event handlers ***/
function Grid_eventControlFocus() { this.control.event("CONTROL_FOCUS"); }
function Grid_eventControlBlur()  { this.control.event("CONTROL_BLUR"); }

Grid.prototype.EventControlFocus = Grid_eventControlFocus;
Grid.prototype.EventControlBlur  = Grid_eventControlBlur;

