/**
	THIS DOWNLOAD INCLUDES:

	1) This html and swf file
	2) The DataGrid.extensions.as file

	To get these DataGrid extensions working, all you need to do is
	drag an instance of the DataGrid component, as provided by
	Macromedia, to the stage. Then, attach the following onClipEvent
	code to the DataGrid instance, and put the #include reference and
	any callbacks that you need in _root frame 1.

	The download does NOT include the actual DataGrid component, or
	any .fla files (sorry, it would violate the Macromedia license)

	ACKNOWLEDGEMENTS:

	Special thanks goes out to Eugene (eugene_minsk@inbox.ru) for his
	great coding assistance	in these DataGrid modifications!
*/

/** CODE ATTACHED TO THE DATAGRID INSTANCE */

onClipEvent( load )
{
	this.setColumns( "website", "name", "addr", "salary" );

	var dataArray = new Array();

	// populate the DataGrid with sample data

	dataArray[0] = { website:"tufat.com", name:"Darren", addr:"123 St.", salary:"43212" };
	dataArray[1] = { website:"cnn.com", name:"Ted", addr:"456 Ave.", salary:"23454" };
	dataArray[2] = { website:"(none)", name:"Gordon", addr:"789 St.", salary:"199898" };
	dataArray[3] = { website:"(none)", name:"Eugene", addr:"876 St.", salary:"76543" };
	dataArray[4] = { website:"microsoft.com", name:"Bill", addr:"112 Blvd.", salary:"98765" };
	dataArray[5] = { website:"(none)", name:"Sam", addr:"984 St.", salary:"17676" };

	this.setDataProvider( dataArray );

	// these four methods come with the DataGrid component already
	this.setEditable( true );
	this.setRowHeight( 32 )
	this.alternateRowColors( "0xFFFFFF", "0xFFFF88" );
	this.spaceColumnsEqually();
	this.setStyleProperty( "header", "0xFFFF00" );

	// make the items in column 0, rows 2 & 3 bold
	// (e.g. to emphasize that there is no url associated with them)
	this.setCellStyle( 0, 2, "textbold", true );
	this.setCellStyle( 0, 3, "textbold", true );
	this.setCellStyle( 0, 5, "textbold", true );

	// make the item in column 3, row 2 italicized
	// (e.g. to emphasize that this person makes the highest salary)
	this.setCellStyle( 3, 2, "textitalic", true );

	// make the item in column 3, row 5 slightly larger
	// (e.g. to emphasize that this person makes the lowest salary)
	this.setCellStyle( 3, 5, "textsize", 16 );

	// set the background color of cell 0,3 (column 0, row 3) to bright yellow
	this.setCellStyle( 0, 3, "background", "0xFFFF00" );

	// hide alternating row colors for column 2
	// NOTE: This MUST be set before headerBG or column background is set
	this.getColumnAt(2).setStyleProperty( "isRowAlternationVisible", false );

	// set the header background color of column 2 to bright red
	// NOTE: You MUST set isRowAlternationVisible to false for these to work
	this.getColumnAt(2).setStyleProperty( "headerBG", "0xFF0000" );
	this.getColumnAt(2).setStyleProperty( "background", "0xFF0099" );

	// right align column 0, row 3
	// to align entire column, use a loop through all rows
	this.setCellStyle( 0, 3, "textalign", "right" );

	// the prefix to display in all cells of column 3
	this.getColumnAt(3).setStyleProperty( "displayPrefix", "$" );

	// multiply the values in column 3 by 0.01 - e.g. if you want to
	// format the values according to currency or percentage
	this.getColumnAt(3).setStyleProperty( "displayFactor", 0.01 );

	// callback function that should be invoked when any cell in column 2 is clicked
	this.getColumnAt(2).setStyleProperty( "displayConverter", "advanced_converter" );

	// vertically align all headers at the bottom of their cells
	this.setStyleProperty( "headerVertAlign", "bottom" );

	// make the text in column 3 vertically aligned with the bottom of the cell
	this.getColumnAt(3).setStyleProperty( "vertAlign", "bottom" );

	// change the background color of row 2 to bright blue
	// (e.g. if I want to emphasize which row has the highest salary value)
	this.setRowStyle( 2, "background", "0x8888FF" );

	// associate an email link with column 1, row 3
	this.setCellStyle( 1, 3, "texturl", "mailto:eugene_minsk@inbox.ru" );

	// display the horizontal gridlines for this grid
	this.showHorizGridLines( true );

	// create a 2-pixel blue line at column 0
	this.getColumnAt(0).setStyleProperty( "lineThick", 2 );
	this.getColumnAt(0).setStyleProperty( "lineColor", "0x0000FF" );

	// create a 2-pixel red line at column 0
	this.setRowStyle( 0, "lineThick", 2 );
	this.setRowStyle( 0, "lineColor", "0xFF5555" );

	// set link handlers for a few cells
	// parameters: column, row, link type, link url
	this.setCellStyle( 0, 0, "texturl", "http://www.tufat.com/" );
	this.setCellStyle( 0, 1, "texturl", "http://www.cnn.com/" );
	this.setCellStyle( 0, 4, "texturl", "http://www.microsoft.com/" );

	// set click handler for every row of column 3 that has data
	var numRows = this.getLength();

	for ( var row = 0; row < numRows; row++ )
	{
		this.setCellClickHandler( 3, row, _root, "cell_mouse_down" );
	}

	// make column 3 (as a whole) non-editable
	this.getColumnAt(3).setEditable( false );

	// enabled editing just for the second & fifth rows of column 3
	// (all other cells in col 3 are non-editable)
	this.setCellStyle( 3, 2, "editable", true );
	this.setCellStyle( 3, 5, "editable", true );
}


/** CODE ATTACHED TO FRAME 1 OF _ROOT */

#include "DataGrid.extensions.as"

function advanced_converter( native_value )
{
	var str = substring( String( native_value ), 5, 10 ) + substring( String( native_value ), 0, 3 );
	return str;
}

// note: need some way to determine which row/col was clicked, and what the value is
// setCellClickHandler must be set for the cell is question for this to work
function cell_mouse_down()
{
	result = "click handler called for " + this.colIndex + "," + this.rowIndex + "\n";
	result += "cell data: " + this.labelField.text;
}

stop();