
<public:component>

	<public:attach for="window" event="onload" onevent="onLoad()" />
	<public:attach event="ondocumentready" onevent="onDocumentReady()" />
	<public:property name="noteDOM" id="_noteDOM" GET="getNoteDOM" PUT="setNoteDOM" />
	<public:property name="noteCount" id="_noteCount" GET="getNoteCount" />
	<public:property name="outputParentTitles" id="_outputparenttitles" GET="getOutputParentTitles" PUT="setOutputParentTitles" />
	<public:event name="onNoteSelected" id="_evtNoteSelected" />
	<public:event name="onNoteNoneChecked" id="_evtNoteNoneChecked" />
	<public:event name="onNoteAllChecked" id="_evtNoteAllChecked" />
	<public:method name="doCheckAllToggle" />
	<public:method name="getSelectedNoteItemIDs" />

<script language="jscript" type="text/jscript" src="dependencies.js"></script>
<script language="jscript" type="text/jscript" src="keycodes.js"></script>
<script language="jscript" type="text/jscript" src="appart.js"></script>

<script language="javascript">

var m_oNoteDOM			= null;
var m_bExpands			= true;
var m_bShowGridLines		= false;
var m_bShowTopicHeadings	= false;
var m_iLineSize 		= 21;
var m_bOutputParentTitles	= true;
var NOTE_TAG_NAME		= "Item";
var TITLE_TAG_NAME 		= "Text";
var ITEM_ATT_NAME 		= "ID";
var ITEM_ATT_HASNOTE 		= "hasNote";
var ITEM_ATT_ISAVAILABLE	= "isAvailable";
var g_iNoteCount		= 0;

var m_aImgs	= null;
var b_IsBidiLang =  new Boolean( false );

var g_SelectedNote = null;

var DEPTH_MODULE	= 0;
var DEPTH_LESSON	= 1;
var DEPTH_TOPIC		= 2;
var DEPTH_TOPIC_HEADING	= 100;

//------------------------------------------------------------------------------
//	Get for the noteCount of the tree
//
//
function getNoteCount(){
	return g_iNoteCount;
}

//------------------------------------------------------------------------------
//	Get/Set( s ) for bool option of printing/exporting a notes parent title(s)
//
//
function getOutputParentTitles(){
	return m_bOutputParentTitles;
}

function setOutputParentTitles( value ){

	if ( m_bOutputParentTitles == value )	return;       
	if ( typeof value == "boolean" )	m_bOutputParentTitles = value;

}

//------------------------------------------------------------------------
//	Get/Set( s ) for xmldom for reading - pass in a pre-loaded xmldom object
//
//
function getNoteDOM(){
	return m_oNoteDOM;
}

function setNoteDOM( value ){

	if ( m_oNoteDOM == value )	return;       
	if ( typeof value == "object" ){
		m_oNoteDOM = value;
		var parents = new Array();
		if ( m_oNoteDOM != null ){
			if ( m_oNoteDOM.documentElement ){
				applyNoteNode( m_oNoteDOM.documentElement, element, parents );
			}
		}

	}
}




//------------------------------------------------------------------------
//	Event handler for the form dialog window on load handler
//
//
function onLoad(){
	b_IsBidiLang = parent.g_IsBidiLang;
	if ( parent.g_IsBidiLang == true )	document.dir = "rtl";
}

//------------------------------------------------------------------------
//	Event handler for the form doc ready state
//
function onDocumentReady(){
	b_IsBidiLang = parent.g_IsBidiLang;
	if ( parent.g_IsBidiLang == true )	document.dir = "rtl";
	cacheImages();	
}


//------------------------------------------------------------------------
//	Method to get a list of selected itemIDs from the tree
//
function getSelectedNoteItemIDs(){

	var aRet = new Array();
	
	var notes = element.all( "parentNoteNodeId" );
	if ( notes == null ) return aRet;

	var sItemID = "";
	var hasNote = false;
	var aNotes = new Array();

	//Force array. Take care here cause aNotes may not be the exact same type of Array object
	if ( notes.length )	aNotes = notes;	
	else			aNotes[aNotes.length] = notes;

	for( var i = 0; i < notes.length; i++ ){
		sItemID = notes[i].dataNode.getAttribute( ITEM_ATT_NAME );
		hasNote = notes[i].dataNode.getAttribute( ITEM_ATT_HASNOTE );
		if ( typeof sItemID == "string" ){
			if ( typeof hasNote == "string" ){
				if ( hasNote == "1" ){
					if ( notes[i].checkBoxButton.state == "on" )	aRet[aRet.length] = sItemID;
				}
			}
		}
	}

	return aRet;
}


//------------------------------------------------------------------------
//	Preen stray none elements from sibling elements
//
function preen( oNode ){
	try {
		oNode.parentNode.removeChild( oNode );
	} catch ( e ){
alert( 'error' );
	}
}

function copyArray( inArray ){
	var a = new Array();
	try {
		for( var i = 0; i < inArray.length; i++ )	a[a.length] = inArray[i];
	} catch( e ) {}
	return a;
}

//------------------------------------------------------------------------
//	Applys a table line to simululate a tree structure, the number and type of branch visuals
//	change to sync up on a grid layout - showing parent/child relationships.
//	As well an actual tree structure using divs is applied ( which are made to show no visual effects )
//	which enable hiding and showing of the structure
//
function applyNoteNode( oXMLNode, oHTMLNode, aParents ){

	if ( oXMLNode.ownerDocument.documentElement == oXMLNode ){
		for( var i = 0; i < oXMLNode.childNodes.length; i++ ){
			if ( oXMLNode.childNodes[i].nodeName != NOTE_TAG_NAME ){
				preen( oXMLNode.childNodes[i] );
				i--;
				continue;
			}

			applyNoteNode( oXMLNode.childNodes[i], oHTMLNode, aParents );
		}
	} else {

		var oDiv = document.createElement( "div" );
		oDiv.className = "NoteTreeNoteContainer";

		var oDivParent = document.createElement( "div" );
		oDivParent.className = "NoteTreeParentContainer";
		oDivParent.id = "parentNoteNodeId";

		var oDivChildren = document.createElement( "div" );
		oDivChildren.className = "NoteTreeChildContainer";

		var depth = DEPTH_MODULE;
		if ( aParents.length == 1 )	depth = DEPTH_LESSON;
		if ( aParents.length > 1 )	depth = DEPTH_TOPIC;

		applyTreeLine( oXMLNode, oDivParent, aParents, depth );

		oDiv.appendChild( oDivParent );

		//hookup the relationships we'll need
		oDiv.innerParentContainer = oDivParent;
		oDivParent.dataNode = oXMLNode;
		oDivParent.container = oDiv;
		oDivParent.childContainer = oDivChildren;
		oDivParent.checkCount = 0;
		oDivChildren.parentContainer = oDivParent;
		oDivChildren.container = oDiv;
		oDivParent.ownerTreeNode = null;
		oDivChildren.ownerTreeNode = null;

		if ( oHTMLNode.className == "NoteTreeChildContainer" ){
			oDivParent.ownerTreeNode = oHTMLNode.container.innerParentContainer;
			oDivChildren.ownerTreeNode = oHTMLNode.container.innerParentContainer;
		}

		if ( oXMLNode.childNodes.length > 0 ){

			var bSet = false;
			
			for( var i = 0; i < oXMLNode.childNodes.length; i++ ){
				if ( oXMLNode.childNodes[i].nodeName != NOTE_TAG_NAME ){
					preen( oXMLNode.childNodes[i] );
					i--;
					continue;
				}

				if ( !bSet ){
					var childsParents = copyArray( aParents );
					childsParents[childsParents.length] = oXMLNode;
					bSet = true;
				}
				applyNoteNode( oXMLNode.childNodes[i], oDivChildren, childsParents );
			}

			if ( bSet )	oDiv.appendChild( oDivChildren );

		}
		
		oHTMLNode.appendChild( oDiv );

	}
}


//------------------------------------------------------------------------
//	Test for child notes
//
function getChildNotes( oXMLNode ){
	var oNodes = oXMLNode.selectNodes( NOTE_TAG_NAME );
	if ( oNodes == null )		return null;
	if ( oNodes.length < 1 )	return null;
	return oNodes;
}


//------------------------------------------------------------------------
//	Applys a line of the tree the flattened div hierarchy
//
function applyTreeLine( oXMLNode, oHTMLNode, aParents, depth ){
	
	var t  = document.createElement( "table" );
	t.className = "NoteTreeTableLine";

	var tr = t.insertRow();
	tr.style.pixelHeight = m_iLineSize;
	tr.className = "NoteTreeTableLineRow";

	t.border = 0;
	t.cellPadding = 0;
	t.cellSpacing = 0;
	t.rules = "none";
	t.frame = "void";
	t.style.pixelHeight = m_iLineSize;
	t.width = "100%";

    //do the BranchArt ...
	var td = tr.insertCell();
	td.style.pixelHeight = m_iLineSize;
	td.className = "NoteTreeTableLineCellBranchArt";
	td.width = applyBranchTable( oXMLNode, td, aParents, oHTMLNode /*, depth */ );

    //do text area...
	td = tr.insertCell();
	td.style.pixelHeight = m_iLineSize;
	td.className = "NoteTreeTableLineTextArea"; 
	td.noWrap = true;

    //do the Label Text ...
	span = document.createElement( "span" );
	span.className = "NoteTreeTableLineLabel";
	sText = "ERROR";
	try {
		if ( depth == DEPTH_TOPIC_HEADING )
			sText  = LBL_NOTES_HEADING_TOPICS;
		else 
			sText = oXMLNode.selectSingleNode( TITLE_TAG_NAME ).text;
	} catch( e ){}


	span.innerText    = sText;
	span.linknode     = oHTMLNode;
	oHTMLNode.labelArea = span;

	var oElm = null;

	var sHasNote = "1";
	try {
		oElm = oXMLNode;
		if ( oElm != null )	sHasNote = oElm.getAttribute( ITEM_ATT_HASNOTE );
		if ( sHasNote != "0" )	sHasNote = "1";

	} catch ( e ){}

	if ( sHasNote == "1" ){

		g_iNoteCount++;

		span.style.cursor	= "hand";
		span.tabIndex 		= 0;
		span.onmouseover 	= onLabelHover;
		span.onmouseout 	= onLabelLeave;
		span.onclick 		= onLabelClick;
		span.onkeypress 	= onLabelKeyPress;
	}


	var sIsAvailable = "1";
	var bIsAvailable = true;
	try {
		oElm = oXMLNode;
		if ( oElm != null )	sIsAvailable = oElm.getAttribute( ITEM_ATT_ISAVAILABLE );
		if ( sIsAvailable == "0" )	bIsAvailable = false;

	} catch ( e ){}

	oHTMLNode.isAvailable = bIsAvailable;

	td.appendChild( span );

	oHTMLNode.appendChild( t );

}


//------------------------------------------------------------------------
//	Applys the Branching artwork to the input object
//
//
function applyBranchTable( oXMLNode, oHTMLNode, aParents, oLinkNode, depth ){
	
	var t  = document.createElement( "table" );
	t.className = "NoteTreeBranchTable";
	t.border = 0;
	t.cellPadding = 0;
	t.cellSpacing = 0;
	t.rules = "none";
	t.frame = "void";
	t.style.pixelHeight = m_iLineSize;

	var tr = t.insertRow();
	tr.style.pixelHeight = m_iLineSize;
	tr.className = "NoteTreeBranchTableRow";

	var iCounter = 0;
	if ( aParents.length > 0 ){

		for( var i = 0; i < aParents.length; i++ ){

			applyBranchImage( tr, "clear", null, aParents );


			if ( i == aParents.length-1 ){

				var bKids = false;
				if ( getChildNotes( oXMLNode ) != null ) bKids = true;
				iCounter+=2;

				var bHasSibItem = false;
				var oSib = oXMLNode.nextSibling;
				while( oSib != null ){
					if ( oSib.tagName == NOTE_TAG_NAME ){
						bHasSibItem = true;
						break;
					}
					oSib = oSib.nextSibling;
				}

				if ( bHasSibItem )
						applyBranchImage( tr, "gridother", null, aParents );
				else		applyBranchImage( tr, "gridend", null, aParents );

				if ( bKids ){
					applyBranchImage( tr, "selectoffmiddle", oLinkNode, aParents );
					iCounter++;
					applyBranchImage( tr, "folderopen", oLinkNode, aParents );

				} else	applyBranchImage( tr, "selectoffchild", oLinkNode, aParents );

			} else {
				iCounter++;
				if ( aParents[i+1].nextSibling )	applyBranchImage( tr, "gridline", null, aParents );
				else					applyBranchImage( tr, "clear", null, aParents );
			}
		}
	} else {

		applyBranchImage( tr, "selectoffroot", oLinkNode, aParents );

		iCounter++;
		if ( getChildNotes( oXMLNode ) != null )	applyBranchImage( tr, "folderopen", oLinkNode, aParents );

	}

	oHTMLNode.appendChild( t );

	return iCounter * m_iLineSize;
}


//------------------------------------------------------------------------
//	Automate the image insertion for branch images
//
function applyBranchImage( oTR, sName, oLinkNode, aParents ){

	var td, img;
	var td = oTR.insertCell();
	td.style.pixelHeight = m_iLineSize;
	td.className = "NoteTreeBranchTableCell";

	var img = document.createElement( "img" );
	img.style.pixelHeight = m_iLineSize;
	img.src = m_aImgs[sName].src;
	img.className = "NoteTreeBranchTableCellImage";

	//do common stuff for feature buttons
	if (	( sName != "gridend" )	&&
		( sName != "gridline" )	&&
		( sName != "gridother" ) &&
		( sName != "clear" )	){
		img.style.cursor = "hand";
		img.tabIndex = 0;
		img.linknode = oLinkNode;
		img.originalImage = sName;
		img.isFirstLevel = false;
		if ( aParents.length < 1 )	img.isFirstLevel = true;
	}

	if (	( sName == "folderclosed" )	||
		( sName == "folderopen" )	){

		oLinkNode.folderButton = img;
		img.onclick = onExpanderClick;
		img.onkeypress = onExpanderKeyPress;
	}

	if (	( sName == "selectoffroot" )	||
		( sName == "selectoffchild" )	||
		( sName == "selectoffmiddle" )	||
		( sName == "selectonchild" )	||
		( sName == "selectonmiddle" )	||
		( sName == "selectonroot" ) 	){
		
		img.state = "off";
		oLinkNode.checkBoxButton = img;
		img.onclick = onCheckBoxClick;
		img.onkeypress = onCheckBoxKeyPress;
	}

	td.appendChild( img );
}



//------------------------------------------------------------------------
//	Handle the expander show hide
//
function onExpanderClick(){
	expandHTMLNode( event );
}
//------------------------------------------------------------------------
//	Handle the expander enter key
//
function onExpanderKeyPress(){
	if ( event.keyCode == ASCII_KEYCODE_ENTER )	expandHTMLNode( event );
}
//------------------------------------------------------------------------
//	Handle the expanding
//
function expandHTMLNode( oEvent ){

	if ( oEvent.srcElement.linknode == null ) return;

	var oChildContainer = oEvent.srcElement.linknode.childContainer;

	if ( m_bExpands ){
		if (	( oChildContainer.style.display == "") || 
			( oChildContainer.style.display == "block")){
			oChildContainer.style.display = "none";
			oEvent.srcElement.src = m_aImgs["folderclosed"].src;
		} else {
			oChildContainer.style.display = "block";
			oEvent.srcElement.src = m_aImgs[oEvent.srcElement.originalImage].src;
		}
	}

}




//------------------------------------------------------------------------
//	Handle the checkbox click
//
function onCheckBoxClick(){
	toggleCheckBox( event.srcElement, false, false, true );
}
//------------------------------------------------------------------------
//	Handle the check box enter key
//
function onCheckBoxKeyPress(){
	if ( event.keyCode == ASCII_KEYCODE_ENTER ) toggleCheckBox( event.srcElement, false, false, true );
}
//------------------------------------------------------------------------
//	Do the Check box procedure
//
function toggleCheckBox( oCheckBox, bOverride, bValue, bRecurse ){

	if ( oCheckBox.linknode == null ) return;

	var bRet = toggleSingleCheckBoxImage( oCheckBox, bOverride, bValue );

	//Set the XML date in live DOM
	var oXmlNode = oCheckBox.linknode.dataNode;
	oXmlNode.setAttribute( "datastate", bRet.toString() );

	if ( bRecurse == true ){
		var oChildContainer = oCheckBox.linknode.childContainer;
		if( oChildContainer.children.length > 0 ){
			for( var i = 0; i < oChildContainer.children.length; i++ ){
				var oOuterContainer = oChildContainer.children[i];
				var oParent = oOuterContainer.innerParentContainer;
				var oChildCheckBox = oParent.checkBoxButton;
				toggleCheckBox( oChildCheckBox, true, bRet, true );
			}
		}
	}
}

function doCheckAllToggle( sValue ){

	var bToggle = new Boolean( false );

	if ( typeof sValue == "string" ){
		var s = sValue.toLowerCase();
		if ( ( s == "on"  ) ||
		     ( s == "yes"  ) ||
		     ( s == "true" ) ||
		     ( s == "1"    ) )
			bToggle = true;
		else	bToggle = false;
	}	

	//toggle overide each first level checkbox(s)...
	for( var i = 0; i < element.children.length; i++ ){
		var elm = element.children[i];
		toggleCheckBox( elm.innerParentContainer.checkBoxButton, true, bToggle, true );
	}

}

//------------------------------------------------------------------------
//	Handle the Label Hover
//
function onLabelHover(){
	if ( event.srcElement.className != "NoteTreeTableLineLabelSelected" )
		event.srcElement.className = "NoteTreeTableLineLabelHover";
}
//------------------------------------------------------------------------
//	Handle the Label Mouse Out
//
function onLabelLeave(){
	if ( event.srcElement.className != "NoteTreeTableLineLabelSelected" )
		event.srcElement.className = "NoteTreeTableLineLabel";
}
//------------------------------------------------------------------------
//	Handle the Label click
//
function onLabelClick(){
	makeNoteSelectEvent( event );
}
//------------------------------------------------------------------------
//	Handle the Label enter key
//
function onLabelKeyPress(){
	if ( event.keyCode == ASCII_KEYCODE_ENTER )	makeNoteSelectEvent( event );
}
//------------------------------------------------------------------------
//	make a note select event
//
function makeNoteSelectEvent( event ){

	var oElm = null;
	var sid = null;
	var evt = createEventObject();

	try {
		oElm = event.srcElement.linknode.dataNode;
		if ( oElm == null )	return;
		sid = oElm.getAttribute( ITEM_ATT_NAME );
		if ( sid == "" )	return;
		if ( g_SelectedNote != null )	g_SelectedNote.labelArea.className = "NoteTreeTableLineLabel";
		g_SelectedNote = event.srcElement.linknode;
		g_SelectedNote.labelArea.className = "NoteTreeTableLineLabelSelected";
		evt.isAvailable = g_SelectedNote.isAvailable;
		evt.result = sid;

	} catch ( e ){	return;	}

	if ( sid == null ) return;

        _evtNoteSelected.fire( evt );
	oSelectedNote = oElm;

}

//------------------------------------------------------------------------
//	Changes the checkbox image to either on or off.
//
//
function toggleSingleCheckBoxImage( oElm, bOverride, bValue ){

	var bTurnOn = true;
	var sOrig = new String( oElm.state );
	var sToggleSrc = "selectoffchild";
	
	if ( !bOverride ){
		
		if ( oElm.src == m_aImgs["selectoffchild"].src )	sToggleSrc = "selectonchild";
		if ( oElm.src == m_aImgs["selectoffmiddle"].src )	sToggleSrc = "selectonmiddle";
		if ( oElm.src == m_aImgs["selectoffroot"].src )		sToggleSrc = "selectonroot";
		if ( oElm.src == m_aImgs["selectonchild"].src )		sToggleSrc = "selectoffchild";
		if ( oElm.src == m_aImgs["selectonmiddle"].src )	sToggleSrc = "selectoffmiddle";
		if ( oElm.src == m_aImgs["selectonroot"].src )		sToggleSrc = "selectoffroot";

		if (	( sToggleSrc == "selectoffchild" ) ||
			( sToggleSrc == "selectoffmiddle" ) ||
			( sToggleSrc == "selectoffroot" ) ){
			bTurnOn    = false;
		}

	} else {
		if ( !bValue ){
			if ( oElm.src == m_aImgs["selectonchild"].src )		sToggleSrc = "selectoffchild";
			if ( oElm.src == m_aImgs["selectonmiddle"].src )	sToggleSrc = "selectoffmiddle";
			if ( oElm.src == m_aImgs["selectonroot"].src )		sToggleSrc = "selectoffroot";
			if ( oElm.src == m_aImgs["selectoffchild"].src )	sToggleSrc = "selectoffchild";
			if ( oElm.src == m_aImgs["selectoffmiddle"].src )	sToggleSrc = "selectoffmiddle";
			if ( oElm.src == m_aImgs["selectoffroot"].src )		sToggleSrc = "selectoffroot";

		} else {
			if ( oElm.src == m_aImgs["selectonchild"].src )		sToggleSrc = "selectonchild";
			if ( oElm.src == m_aImgs["selectonmiddle"].src )	sToggleSrc = "selectonmiddle";
			if ( oElm.src == m_aImgs["selectonroot"].src )		sToggleSrc = "selectonroot";
			if ( oElm.src == m_aImgs["selectoffchild"].src )	sToggleSrc = "selectonchild";
			if ( oElm.src == m_aImgs["selectoffmiddle"].src )	sToggleSrc = "selectonmiddle";
			if ( oElm.src == m_aImgs["selectoffroot"].src )		sToggleSrc = "selectonroot";
		}

		bTurnOn    = bValue;
	}

	var sSetState = "on";
	if ( bTurnOn == true )	sSetState = "on";
	else			sSetState = "off";

	if ( oElm.linknode.ownerTreeNode ){

		if ( sOrig != sSetState ){
			if ( bTurnOn == true ){
				if ( oElm.linknode.ownerTreeNode.checkCount < oElm.linknode.ownerTreeNode.childContainer.children.length )
					oElm.linknode.ownerTreeNode.checkCount++;
			} else {
				if ( oElm.linknode.ownerTreeNode.checkCount > 0 ) oElm.linknode.ownerTreeNode.checkCount--;
			}
		}

		if (( oElm.linknode.ownerTreeNode.checkCount == oElm.linknode.ownerTreeNode.childContainer.children.length ) &&
		    ( oElm.state == "off" ) )
			toggleCheckBox( oElm.linknode.ownerTreeNode.checkBoxButton, true, true, false );

		if (( oElm.linknode.ownerTreeNode.checkCount == 0 ) &&
		    ( oElm.state == "on" ) )
			toggleCheckBox( oElm.linknode.ownerTreeNode.checkBoxButton, true, false, false );
		
	} else {

		var bAllValuesAre;

		for( var i = 0; i < element.children.length; i++ ){
			var e = element.children[i];
			var oCheckBox = e.innerParentContainer.checkBoxButton;
			var thisValue;
			if ( oCheckBox == oElm )	thisValue = sSetState;
			else				thisValue = oCheckBox.state;
			if ( i == 0 )			bAllValuesAre = thisValue;
			else {
				if ( thisValue != bAllValuesAre )	break;
			}
			if ( i == element.children.length-1 ){
				//fire the event...
				var evt = createEventObject();
			        evt.result = bAllValuesAre;        
				if ( bAllValuesAre == "on" )	_evtNoteAllChecked.fire( evt );
				else				_evtNoteNoneChecked.fire( evt );
			}
		}
	}
	
	oElm.src = m_aImgs[sToggleSrc].src;
	oElm.state = sSetState;
	return bTurnOn;
}

//------------------------------------------------------------------------
//	Initializes an associative array of status images.
//
//
function cacheImages(){

	m_aImgs = new Array();

	m_aImgs["clear"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["clear"].src		= IMG_NOTES_CLEAR;
	m_aImgs["folderclosed"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["folderclosed"].src	= IMG_NOTES_FOLDER_CLOSED;
	m_aImgs["folderopen"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["folderopen"].src	= IMG_NOTES_FOLDER_OPEN;
	m_aImgs["gridend"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["gridend"].src		= IMG_NOTES_GRID_END;
	m_aImgs["gridother"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["gridother"].src	= IMG_NOTES_GRID_OTHER;
	m_aImgs["gridline"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["gridline"].src		= IMG_NOTES_GRID_LINE;
	m_aImgs["selectoffchild"]	= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectoffchild"].src	= IMG_NOTES_SEL_OFF_CHILD;
	m_aImgs["selectoffmiddle"]	= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectoffmiddle"].src	= IMG_NOTES_SEL_OFF_MIDDLE;
	m_aImgs["selectoffchild"]	= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectoffchild"].src	= IMG_NOTES_SEL_OFF_CHILD;
	m_aImgs["selectoffroot"]	= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectoffroot"].src	= IMG_NOTES_SEL_OFF_ROOT;
	m_aImgs["selectonchild"]	= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectonchild"].src	= IMG_NOTES_SEL_ON_CHILD;
	m_aImgs["selectonmiddle"]	= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectonmiddle"].src	= IMG_NOTES_SEL_ON_MIDDLE;
	m_aImgs["selectonroot"]		= new Image(m_iLineSize,m_iLineSize);
	m_aImgs["selectonroot"].src	= IMG_NOTES_SEL_ON_ROOT;

	if ( b_IsBidiLang == true ){
		m_aImgs["folderclosed"].src	= IMG_NOTES_FOLDER_CLOSED_RTL;
		m_aImgs["folderopen"].src	= IMG_NOTES_FOLDER_OPEN_RTL;
		m_aImgs["gridend"].src		= IMG_NOTES_GRID_END_RTL;
		m_aImgs["gridother"].src	= IMG_NOTES_GRID_OTHER_RTL;
		m_aImgs["gridline"].src		= IMG_NOTES_GRID_LINE_RTL;
		m_aImgs["selectoffchild"].src	= IMG_NOTES_SEL_OFF_CHILD_RTL;
		m_aImgs["selectoffroot"].src	= IMG_NOTES_SEL_OFF_ROOT_RTL;
		m_aImgs["selectonchild"].src	= IMG_NOTES_SEL_ON_CHILD_RTL;
		m_aImgs["selectonmiddle"].src	= IMG_NOTES_SEL_ON_MIDDLE_RTL;
		m_aImgs["selectonroot"].src	= IMG_NOTES_SEL_ON_ROOT_RTL;
	}

	if ( !m_bShowGridLines  )	removeGridLineImages();
}


//------------------------------------------------------------------------
//	Initializes an image array to something without gridlines
//
//
function removeGridLineImages(){

	//TODO blank out all the gridline images - swap some around... yadda yadda

}


</script>
</public:component>