_$outerTableStartTemplate:[
        "<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 ID='",         // 0
        ,                                                           // 1 [ID for outer table]
        // We'll apply the 'cellStyle' for the item to the outer table as styles won't
        // be inherited by sub elements of the table.
        // Explicitly avoid getting doubled borders etc.
        "' STYLE='" + isc.Canvas._$noStyleDoublingCSS,              // 2
        ,                                                           // 3 [css to override class attrs]
        "' CLASS='",                                                // 4
        ,                                                           // 5 [pick up the cellStyle css class]
        
        "'><TR>",                                                   // 6
        undefined                                                   // 7 Potential first cell for 
                                                                    //   error on left...       
    ],

    _$outerTableEnd:"</TR></TABLE>",
    
    _$controlTableTemplate:[
       // Control table
       "<TABLE ID='",        // 0
       ,                     // 1 [ID for the table] this._getControlTablID()

       // By marking the control table with the 'itemPart' attributes we simplify determining
       // what "part" of the item recieved the event.
       "' " + isc.DynamicForm._containsItem + "='",                // 2
       ,                                                           // 3 [formItem ID]
       "' " + isc.DynamicForm._itemPart + "='" + isc.DynamicForm._controlTableString,       // 4
       "' CELLPADDING=0 CELLSPACING=0 STYLE='",                     // 5
       ,                    // 6 [css text for the control table]
       "' CLASS='",         // 7
       ,                    // 8 [control table className]
       "'><TR>"             // 9
    ],

    _$outherControlTemplate:[
       "<TD style='",       // 0
       ,                    // 1 [css text for textBox cell]
        "' VALIGN=",        // 2 
                
       ,                    // 3   [v align]
       "'>",                // 4

       // Text
       undefined             // 5 [textBox html]
    ],

    _$outherControlEndTemplate: "</TD>",

    _$pickerIconTemplate:[
       "<TD ID='",          // 0
       ,                    // 1 [picker icon cell ID]
       "' CLASS='",         // 2
       ,                    // 3 [Picker Icon className]
       "' STYLE='",         // 4
       ,                    // 5 [picker icon css]
       "'>",                // 6
       ,                    // 7 [Picker Icon HTML]                
       "</TD>"
    ],

    _$iconsCellTemplate:[
        "<TD VALIGN=",          // 0
        ,                       // 1 [v align property for icons]
        
        
        " WIDTH=",              // 2
        ,                       // 3 [total icons width]
        " style='" + isc.Canvas._$noStyleDoublingCSS + "' class='", // 4
        ,                       // 5 Apply standard cell style to the item
        "'><NOBR>",             // 6
        ,                       // 7 [icons HTML]
        "</NOBR></TD>"
    ],

    _$hintCellTemplate : ["</TD><TD ID='", // 0
                            ,              // 1 this._getHintCellID()
                            "' CLASS='",   // 2
                            ,              // 3 this.getHintStyle() 
                            "'>"           // 4
                            ,              // 5 hint
                            "</TD>"
    ],
    // helper method to return the HTML for the form item's outer element.
    
    
    // Returns an array of strings that form the appropriate HTML.
    
    _getTableHTML : function (value, includeHint, includeErrors) {
        
        
        var errorOrientation = this.getErrorOrientation(),
            showErrors,
            errorOnLeft = errorOrientation == isc.Canvas.LEFT,
            errorHTML;
        if (includeErrors && 
            (errorOnLeft || errorOrientation == isc.Canvas.RIGHT)) 
        {
            var errors = this.getErrors();
            if (errors) {
                showErrors = true;
                errorHTML = this.getErrorHTML(errors);
            }
        }
        
        var vAlign = this.iconVAlign,
            displayValue = this.mapValueToDisplay(value),
            writeOuterTable = this._writeOuterTable(includeHint, showErrors),
            writeControlTable = this.showPickerIcon;
        ;
        
        var template = writeOuterTable ? this._$outerTableStartTemplate : [];
        if (writeOuterTable) {
            template.length = 8;

            template[1] = this._getOuterTableID();
            template[3] = this.getOuterTableCSS();
            // Apply the cell style to the outer table so (EG) font color / weight get inherited
            // Note that we don't write out the 'cellStyle' at all unless the item is
            // written into a DF cell
            if (this.containerWidget == this.form && !this._absPos()) {            
                template[5] = this.getCellStyle();
            } else {
                template[5] = null;
            }

            // If we show the error on the left this is where we output it...
            if (showErrors && errorOnLeft) {
                template[7] = isc.StringBuffer.concat("<TD STYLE='",
                                isc.Canvas._$noStyleDoublingCSS, "' CLASS='", 
                                this.getCellStyle(), "'>", errorHTML, "</TD>");
            } else template[7] = null;
 
            if (this._hasExternalIcons() && this.iconsOnLeft) {
            
                var iconsTemplate = this._$iconsCellTemplate;
                iconsTemplate[1] = vAlign;
                iconsTemplate[3] = this.getTotalIconsWidth();
                iconsTemplate[5] = this.getCellStyle();
                iconsTemplate[7] = this.getIconsHTML();
                
                for (var i = 0; i < iconsTemplate.length; i++) {
                    template[template.length] = iconsTemplate[i];
                }
            }
        }
        
        
        // Logic is quite different for showing a picker icon vs not showing a picker icon.
        if (!writeControlTable) {

            // write the element HTML (text box) directly into the outer table's first cell
            
            // Note - if we are showing a valueIcon, it will be included in the HTML returned
            // from getElementHTML()
            var textBoxTemplate = this._$outherControlTemplate;
            textBoxTemplate[1] = this.getTextBoxCellCSS();
            textBoxTemplate[3] = vAlign;
            textBoxTemplate[5] = this.getElementHTML(displayValue);

            for (var i = 0; i < textBoxTemplate.length; i++) {
                template[template.length] = textBoxTemplate[i];
            }
        } else {
            
            var textBoxTemplate = this._$outherControlTemplate;
            textBoxTemplate[1] = isc.Canvas._$noStyleDoublingCSS;
            textBoxTemplate[3] = vAlign;

            for (var i = 0; i < iconsTemplate.length; i++) {
                template[template.length] = iconsTemplate[i];
            }

            var pickerIconStyle = this.getPickerIconStyle(),
                itemID = this.getID(),
                controlStyle = this.getControlStyle(),
                controlTemplate = this._$controlTableTemplate,
                controlHandleID = this._getControlTableID(),
                textBoxID = this._getTextBoxID(),
                pickerCellID = this._getPickerIconCellID()
            ;

            controlTemplate[1] = controlHandleID;
            controlTemplate[3] = itemID;
            controlTemplate[6] = this.getControlTableCSS();
            // If no control table style was explicitly specified, pick up the style for the
            // DF cell containing this item (as it will not cascade up through the table element
            
            if (controlStyle == null && this.containerWidget == this.form && !this._absPos()) {
                controlTemplate[8] = this.getCellStyle();
                controlTemplate[6] += isc.Canvas._$noStyleDoublingCSS;
            } else {
            	controlTemplate[8] = controlStyle
            }
            controlTemplate[10] = this.getTextBoxCellCSS();
            controlTemplate[12] = this.getElementHTML(displayValue);
            controlTemplate[14] = pickerCellID;
            controlTemplate[16] = pickerIconStyle;
            controlTemplate[18] = this.getPickerIconCellCSS();
            var PI = this.getPickerIcon(),
                showPIFocus = PI && this.hasFocus && this.showFocusedPickerIcon &&
                                (PI.showFocusedWithItem != false); 
            controlTemplate[20] = this.getIconHTML(this.getPickerIcon(), showPIFocus);
            
            // Actually write out the control table in the cell
            for (var i = 0; i < controlTemplate.length; i++) {
                template[template.length] = controlTemplate[i];
            }
        }
        template[template.length] = this._$outherControlEndTemplate;
        
                
        if (writeOuterTable) {

            if (this._hasExternalIcons() && !this.iconsOnLeft) {
            
                var iconsTemplate = this._$iconsCellTemplate;
                iconsTemplate[1] = vAlign;
                iconsTemplate[3] = this.getTotalIconsWidth();
                iconsTemplate[5] = this.getCellStyle();
                iconsTemplate[7] = this.getIconsHTML();
                
                for (var i = 0; i < iconsTemplate.length; i++) {
                    template[template.length] = iconsTemplate[i];
                }
            }

            var showRightError = (showErrors && !errorOnLeft);
            var hint;
            if (includeHint) {
                hint = this.getHint();
                if (isc.isA.emptyString(hint)) hint = null;
            }
            if (hint || showRightError) {
                var hintCellTemplate = this._$hintCellTemplate;
                hintCellTemplate[1] = this._getHintCellID();
                hintCellTemplate[3] = hint ? this.getHintStyle() : null;
                hintCellTemplate[5] = (hint || "") + (showRightError ? errorHTML || "" : "");
                for (var i = 0; i < hintCellTemplate.length; i++) {
                    template[template.length] = this._$hintCellTemplate[i];
                }
            }
            // close the table
            template[template.length] = this._$outerTableEnd;
        }
        
        return template;
	}