function SpacerView() 
{
    /**
     * render the inner part of the spacer as div - this inner part goes into a
     * table cell (renderd by call to {@link SpacerView#render} or 
     * {@link SpacerView#renderAsHTML})
     * <p>
     * The inner content is saved in a hold area and used later during render)
     *
     * @param {boolean} wholeAsHTML	(IGNORED) are we generating the whole 
     *					cell (as opposed to just inner 
     *					contents) as HTML?
     * @param {int}  nCols	 the column span of the spacer (used later
     *				 when render is called)
     * @return NOTHING MEANINGFUL
     */
    this.renderInner = function( wholeAsHTML, nCols ) {
	this.fInnerHTML = '<div class="spacer" style="width:100%;height:100%;"></div>';
	this.fNCols = nCols;
	return this.fInnerHTML;
    }

    /**
     * progressive-rendering - render the spacer as a table cell (Note: assumes
     * renderInner is already called)
     *
     * @param {SwaraLyricRowView } rowview the row view
     * @param {int} partInRow		   n, as in the nth tala part in the 
     *					   row to which this belongsto
     * @param {int} cellidx		   (optional) index of cell in row; if 
     *					   not provided added at end	 
     * @return the table-cell element representing the view contents
     * @type DOMElement_TD
     */
    this.render = function(row, partInRow, cellidx) {
	if(!partInRow) partInRow = 0;

	// hold area is non-empty => renderInner not called
	if( !this.fInnerHTML ) return null;	

	ret = row.addDOMCell(false, partInRow, null, this.fNCols, cellidx);
	var td = ret.td;
	cellidx = ret.cellidx;
	this.fTableCell = td;
	td.id          = Utils.getNewId("sw"); Utils.addToIdMap(td, this);
	this.domid     = td.id;

	// set inner content
	td.innerHTML = this.fInnerHTML;
	this.fInnerHTML = null;

	this.attach(td,cellidx);

	// add ourselves to the row
	row.addPart(this);
	return td;
    }

    /**
     * (non-progressive rendering) generate HTML content for entire spacer 
     * view (table-cell) - assumes renderInner is already called
     * @param {SwaraLyricRowView} row		the row to which we belong
     * @param {int}		  partInRow	n, as in nth tala part in row
     */
    this.renderAsHTML = function( row, partInRow ) {
	var s = new Array();
	var i = 0;
	s[i++] = '<td colspan="';
	s[i++] = this.fNCols;
	s[i++] = '">';
	s[i++] = this.fInnerHTML;
	s[i++] = '</td>';
	row.addDOMCellAsHTML(false, partInRow, s.join(""));
	this.fInnerHTML = null;	// clear hold area
	
	// add ourselves to the row
	row.addPart(this);
    }

    /**
     * attach ourselves to a table-cell whose HTML content we generated earlier
     */
    this.attach = function(td, cellidx) {
	this.fCellIdx = cellidx;
	this.fInner = Utils._findNodeByClass(td,"spacer");
	if(!this.fInner) return false;
	this.fOuter = td;
	this.fInnerHTML = null;	// clear hold area (if any)
	return true;
    }

    /**
     * @ignore
     */
    this.fPartType = ROWVIEWPART_SPACER;

    /**
     * the inner content (div) of the lyric view, which goes into
     * the outer content
     * @type DOMElement_DIV
     * @private
     */
    this.fInner = null;

    /**
     * Hold area for inner HTML content - populated by 
     * {@link SpacerView#renderInner} and later used during rendering
     *
     * @type String
     * @private
     */
    this.fInnerHTML = null;
}
/**
 * @class
 * represent a spacer (occupies space) within a swara or lyric row {@link SwaraLyricRowView}
 * <p>
 * The view is a table-cell (td) in a row represented by {@link SwaraLyricRowView}
 * <p>
 * <b>Rendering</b>: There are 2 kinds of rendering 
 * <ul>
 * <li> the progressive rendering used in WYSIWYG mode where rendering creates 
 * the actual DOM elements for the heading - done by {@link SpacerView#render} 
 * <li> non-progressive rendering used in start-up where render simply generates
 * the HTML content in a string. This is done by {@link SpacerView#renderAsHTML}
 * </ul>
 *
 * In <u>both</u> cases, the <i>inner</i> (i.e. whats inside the table cell that
 * represents the heading) content is always generated as HTML content in
 * {@link SpacerView#renderInner} which <b>must</b> called first and it stores 
 * the HTML content in the hold area {@link SpacerView#fInnerHTML}. Once this is 
 * done, in the progressive rendering case we render it by doing td.innerHTML 
 * (where td is the DOM table-cell). In the non-progressive case, we generate 
 * the HTML content of td, and stick the inner HTML content inside and return  
 * the entire content
 *
 * Since in both cases, inner content is generated as a whole and rendered, both
 * cases need a call to {@link SpacerView#attach} to associate the DOM with
 * the view. In case of progressive rendering, this is automatic. In case of
 * non-progressive, an separate call to attach is expected later.
 */
@class
represent a spacer (occupies space) within a swara or lyric row  SwaraLyricRowView

The view is a table-cell (td) in a row represented by  SwaraLyricRowView

Rendering: There are 2 kinds of rendering

 the progressive rendering used in WYSIWYG mode where rendering creates
the actual DOM elements for the heading - done by  SpacerView#render
 non-progressive rendering used in start-up where render simply generates
the HTML content in a string.

In both cases, the inner  content is always generated as HTML content in
SpacerView#renderInner which must called first and it stores
the HTML content in the hold area  SpacerView#fInnerHTML. Once this is
done, in the progressive rendering case we render it by doing td.innerHTML
(where td is the DOM table-cell). In the non-progressive case, we generate
the HTML content of td, and stick the inner HTML content inside and return
the entire content

Since in both cases, inner content is generated as a whole and rendered, both
cases need a call to  SpacerView#attach to associate the DOM with
the view. In case of progressive rendering, this is automatic. In case of
non-progressive, an separate call to attach is expected later.
@class represent a spacer ( occupies space ) within a swara or lyric row SwaraLyricRowView The view is a table - cell ( td ) in a row represented by SwaraLyricRowView Rendering : There are 2 kinds of rendering the progressive rendering used in WYSIWYG mode where rendering creates the actual DOM elements for the heading - done by SpacerView#render non - progressive rendering used in start - up where render simply generates the HTML content in a string . In both cases the inner content is always generated as HTML content in SpacerView#renderInner which must called first and it stores the HTML content in the hold area SpacerView#fInnerHTML . Once this is done in the progressive rendering case we render it by doing td . innerHTML ( where td is the DOM table - cell ) . In the non - progressive case we generate the HTML content of td and stick the inner HTML content inside and return the entire content Since in both cases inner content is generated as a whole and rendered both cases need a call to SpacerView#attach to associate the DOM with the view . In case of progressive rendering this is automatic . In case of non - progressive an separate call to attach is expected later .
function SpacerView() 
{
    this.renderInner = function( wholeAsHTML, nCols ) {
	this.fInnerHTML = '<div class="spacer" style="width:100%;height:100%;"></div>';
	this.fNCols = nCols;
	return this.fInnerHTML;
    }
    this.render = function(row, partInRow, cellidx) {
	if(!partInRow) partInRow = 0;
	if( !this.fInnerHTML ) return null;	
	ret = row.addDOMCell(false, partInRow, null, this.fNCols, cellidx);
	var td = ret.td;
	cellidx = ret.cellidx;
	this.fTableCell = td;
	td.id          = Utils.getNewId("sw"); Utils.addToIdMap(td, this);
	this.domid     = td.id;
	td.innerHTML = this.fInnerHTML;
	this.fInnerHTML = null;
	this.attach(td,cellidx);
	row.addPart(this);
	return td;
    }
    this.renderAsHTML = function( row, partInRow ) {
	var s = new Array();
	var i = 0;
	s[i++] = '<td colspan="';
	s[i++] = this.fNCols;
	s[i++] = '">';
	s[i++] = this.fInnerHTML;
	s[i++] = '</td>';
	row.addDOMCellAsHTML(false, partInRow, s.join(""));
	this.fInnerHTML = null;	
	row.addPart(this);
    }
    this.attach = function(td, cellidx) {
	this.fCellIdx = cellidx;
	this.fInner = Utils._findNodeByClass(td,"spacer");
	if(!this.fInner) return false;
	this.fOuter = td;
	this.fInnerHTML = null;	
	return true;
    }
    this.fPartType = ROWVIEWPART_SPACER;
    this.fInner = null;
    this.fInnerHTML = null;
}
function SpacerView ( ) { this . renderInner = function ( wholeAsHTML , nCols ) { this . fInnerHTML = '<div class="spacer" style="width:100%;height:100%;"></div>' ; this . fNCols = nCols ; return this . fInnerHTML ; } this . render = function ( row , partInRow , cellidx ) { if ( ! partInRow ) partInRow = 0 ; if ( ! this . fInnerHTML ) return null ; ret = row . addDOMCell ( false , partInRow , null , this . fNCols , cellidx ) ; var td = ret . td ; cellidx = ret . cellidx ; this . fTableCell = td ; td . id = Utils . getNewId ( "sw" ) ; Utils . addToIdMap ( td , this ) ; this . domid = td . id ; td . innerHTML = this . fInnerHTML ; this . fInnerHTML = null ; this . attach ( td , cellidx ) ; row . addPart ( this ) ; return td ; } this . renderAsHTML = function ( row , partInRow ) { var s = new Array ( ) ; var i = 0 ; s [ i ++ ] = '<td colspan="' ; s [ i ++ ] = this . fNCols ; s [ i ++ ] = '">' ; s [ i ++ ] = this . fInnerHTML ; s [ i ++ ] = '</td>' ; row . addDOMCellAsHTML ( false , partInRow , s . join ( "" ) ) ; this . fInnerHTML = null ; row . addPart ( this ) ; } this . attach = function ( td , cellidx ) { this . fCellIdx = cellidx ; this . fInner = Utils . _findNodeByClass ( td , "spacer" ) ; if ( ! this . fInner ) return false ; this . fOuter = td ; this . fInnerHTML = null ; return true ; } this . fPartType = ROWVIEWPART_SPACER ; this . fInner = null ; this . fInnerHTML = null ; }
@class
 represent a spacer (occupies space) within a swara or lyric row {@link SwaraLyricRowView}
 <p>
 The view is a table-cell (td) in a row represented by {@link SwaraLyricRowView}
 <p>
 <b>Rendering</b>: There are 2 kinds of rendering
 <ul>
 <li> the progressive rendering used in WYSIWYG mode where rendering creates
 the actual DOM elements for the heading - done by {@link SpacerView#render}
 <li> non-progressive rendering used in start-up where render simply generates
 the HTML content in a string.
@class represent a spacer ( occupies space ) within a swara or lyric row { @link SwaraLyricRowView } <p > The view is a table - cell ( td ) in a row represented by { @link SwaraLyricRowView } <p > <b > Rendering< / b > : There are 2 kinds of rendering <ul > <li > the progressive rendering used in WYSIWYG mode where rendering creates the actual DOM elements for the heading - done by { @link SpacerView#render } <li > non - progressive rendering used in start - up where render simply generates the HTML content in a string .
/**
     * render the inner part of the spacer as div - this inner part goes into a
     * table cell (renderd by call to {@link SpacerView#render} or 
     * {@link SpacerView#renderAsHTML})
     * <p>
     * The inner content is saved in a hold area and used later during render)
     *
     * @param {boolean} wholeAsHTML	(IGNORED) are we generating the whole 
     *					cell (as opposed to just inner 
     *					contents) as HTML?
     * @param {int}  nCols	 the column span of the spacer (used later
     *				 when render is called)
     * @return NOTHING MEANINGFUL
     */ /**
     * progressive-rendering - render the spacer as a table cell (Note: assumes
     * renderInner is already called)
     *
     * @param {SwaraLyricRowView } rowview the row view
     * @param {int} partInRow		   n, as in the nth tala part in the 
     *					   row to which this belongsto
     * @param {int} cellidx		   (optional) index of cell in row; if 
     *					   not provided added at end	 
     * @return the table-cell element representing the view contents
     * @type DOMElement_TD
     */ // hold area is non-empty => renderInner not called
 // set inner content
 // add ourselves to the row
 /**
     * (non-progressive rendering) generate HTML content for entire spacer 
     * view (table-cell) - assumes renderInner is already called
     * @param {SwaraLyricRowView} row		the row to which we belong
     * @param {int}		  partInRow	n, as in nth tala part in row
     */ // clear hold area
 // add ourselves to the row
 /**
     * attach ourselves to a table-cell whose HTML content we generated earlier
     */ // clear hold area (if any)
 /**
     * @ignore
     */ /**
     * the inner content (div) of the lyric view, which goes into
     * the outer content
     * @type DOMElement_DIV
     * @private
     */ /**
     * Hold area for inner HTML content - populated by 
     * {@link SpacerView#renderInner} and later used during rendering
     *
     * @type String
     * @private
     */