Titanium Expand Collapse Tableview

/*
 * An example of how to enable accordion style collapse and expanding
 * using a table view with sections.
 *
 * Created November 2012 by Trevor Ward (thewarpedcoder)
 *
 */
var tableDataLoad = [{
    sectionNum:  1,
    sectionTitle:  'Section 1',
    data:  [{
        level:  1,
        title:  'Section 1 Level 1 Item 1',
        child:  true
    }, {
        level:  2,
        title:  '  Section 1 Level 2 Item 1',
        child:  true
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 1',
        child:  true
    }, {
        level:  4,
        title:  '     Section 1 Level 4 Item 1',
        child:  false
    }, {
        level:  4,
        title:  '     Section 1 Level 4 Item 2',
        child:  false
    }, {
        level:  4,
        title:  '     Section 1 Level 4 Item 3',
        child:  false
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 2',
        child:  false
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 3',
        child:  true
    }, {
        level:  4,
        title:  '   Section 1 Level 4 Item 1',
        child:  false
    }, {
        level:  4,
        title:  '   Section 1 Level 4 Item 2',
        child:  false
    }, {
        level:  2,
        title:  '   Section 1 Level 2 Item 2',
        child:  false
    }, {
        level:  2,
        title:  '   Section 1 Level 2 Item 3',
        child:  true
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 1',
        child:  false
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 2',
        child:  false
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 3',
        child:  false
    }, {
        level:  2,
        title:  '   Section 1 Level 2 Item 4',
        child:  false
    }, {
        level:  1,
        title:  'Section 1 Level 1 Item 2',
        child:  true
    }, {
        level:  2,
        title:  '  Section 1 Level 2 Item 1',
        child:  true
    }, {
        level:  3,
        title:  '   Section 1 Level 3 Item 1',
        child:  true
    }, {
        level:  4,
        title:  '     Section 1 Level 4 Item 1',
        child:  false
    }, {
        level:  4,
        title:  '     Section 1 Level 4 Item 2',
        child:  false
    }, {
        level:  4,
        title:  '     Section 1 Level 4 Item 3',
        child:  false
    }]
}, {
    sectionNum:  2,
    sectionTitle:  'Section 2',
    data:  [{
        level:  1,
        title:  'Section 2 Level 1 Item 1',
        child:  true
    }, {
        level:  2,
        title:  '  Section 2 Level 2 Item 1',
        child:  true
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 1',
        child:  true
    }, {
        level:  4,
        title:  '     Section 2 Level 4 Item 1',
        child:  false
    }, {
        level:  4,
        title:  '     Section 2 Level 4 Item 2',
        child:  false
    }, {
        level:  4,
        title:  '     Section 2 Level 4 Item 3',
        child:  false
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 2',
        child:  false
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 3',
        child:  true
    }, {
        level:  4,
        title:  '   Section 2 Level 4 Item 1',
        child:  false
    }, {
        level:  4,
        title:  '   Section 2 Level 4 Item 2',
        child:  false
    }, {
        level:  2,
        title:  '   Section 2 Level 2 Item 2',
        child:  true
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 1',
        child:  false
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 2',
        child:  false
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 3',
        child:  false
    }, {
        level:  2,
        title:  '   Section 2 Level 2 Item 3',
        child:  false
    }, {
        level:  2,
        title:  '   Section 2 Level 2 Item 4',
        child:  true
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 1',
        child:  false
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 2',
        child:  false
    }, {
        level:  3,
        title:  '   Section 2 Level 3 Item 3',
        child:  true
    }, {
        level:  4,
        title:  '   Section 2 Level 4 Item 1',
        child:  false
    }, {
        level:  4,
        title:  '   Section 2 Level 4 Item 2',
        child:  false
    }, {
        level:  4,
        title:  '   Section 2 Level 4 Item 3',
        child:  false
    }, {
        level:  4,
        title:  '   Section 2 Level 4 Item 4',
        child:  false
    }]
}];

var win = null;
var viewTable = null;
var viewheight = 33;
var imageheight = 18;
var tableData = null;
var sectionsData = [];

var minusImg = '/minus.png';
var plusImg = '/plus.png';

function sectionProcess(inParam) {'use strict';
    var iCnt = 0;
    var tCnt = 0;
    var baseLevel = 0;
    var rowStart = 0;

    var secTableData = viewTable.getData();
    var sectionData = secTableData[inParam.source.secValue - 1];
    var rowData = sectionData.rows;
    var setViewHeight = (inParam.source.EXPANDED)  ?  0  :  viewheight;
    var setImgHeight = (inParam.source.EXPANDED)  ?  0  :  imageheight;
    var childLevelChk = {};
    var keyChk = 'AA0';

    inParam.source.EXPANDED = (inParam.source.EXPANDED)  ?  false  :  true;

    while(iCnt < rowData.length) {
        var setRowHeight = setViewHeight;
        var setImgRowHeight = setImgHeight;

        if (setRowHeight > 0) {
            if (rowData[iCnt].LEVEL === 1) {
                baseLevel += 1;
                keyChk = 'AA' + baseLevel;
                childLevelChk[keyChk] = [];
                childLevelChk[keyChk][1] = rowData[iCnt].CHILDEXPANDED;
            } else {
                var currLevel = rowData[iCnt].LEVEL;
                var prevLevel = currLevel - 1;

                childLevelChk[keyChk][currLevel] = (childLevelChk[keyChk][prevLevel]) ? rowData[iCnt].CHILDEXPANDED : false;

                setRowHeight = (childLevelChk[keyChk][prevLevel])  ?  setViewHeight  :  0;
                setImgRowHeight = (childLevelChk[keyChk][prevLevel])  ?  setImgHeight  :  0;
            }
        }
        if (rowData[iCnt].EXPANDED) {
            rowData[iCnt].height = setRowHeight;
            rowData[iCnt].children[0].height = setImgRowHeight;
        }
        iCnt += 1;
    }
    return;
}
function expandCollapseView(inParam) {'use strict';
    var inLevel = inParam.rowData.LEVEL;
    var inExpanded = inParam.rowData.CHILDEXPANDED;
    var rowTableData = viewTable.data;

    // need to find the section of the row ...
    var secLevel = 0;
    var totalRowCnt = 0;
    var sectionRows = null;
    var sectionStartRow = 0;
    var currentSectionRow = 0;
    var childLevelChk = [];

    for ( secLevel = 0; secLevel < rowTableData.length; secLevel += 1) {
        totalRowCnt = totalRowCnt + rowTableData[secLevel].rows.length;

        if (totalRowCnt >= (inParam.index + 1)) {
            sectionRows = rowTableData[secLevel].rows;
            sectionStartRow = totalRowCnt - sectionRows.length;
            currentSectionRow = inParam.index - sectionStartRow;
            break;
        }
    }
    var setViewHeight = (inExpanded)  ?  0  :  viewheight;
    var setImgHeight = (inExpanded)  ?  0  :  imageheight;
    var tCnt = 0;
    var tmpLevel = 0;
    var bCnt = 0;

    tCnt = currentSectionRow + 1;

    childLevelChk[inLevel] = (inExpanded)  ?  false  :  true;

    while (tCnt < sectionRows.length) {
        tmpLevel = sectionRows[tCnt].LEVEL;

        if (tmpLevel <= inLevel) {
            break;
        }
        childLevelChk[tmpLevel] = (childLevelChk[tmpLevel - 1])  ?  sectionRows[tCnt].CHILDEXPANDED  :  false;

        sectionRows[tCnt].height = setViewHeight;
        sectionRows[tCnt].children[0].height = setImgHeight;
        sectionRows[tCnt].EXPANDED = (inExpanded)  ?  false  :  true;
        bCnt = tCnt + 1;

        if (bCnt < sectionRows.length) {
            while (sectionRows[bCnt].LEVEL > tmpLevel) {
                // here is the complex one.... A child level can be expanded but a parent level can be collapsed so need to validate which it is ...
                childLevelChk[sectionRows[bCnt].LEVEL] = (childLevelChk[sectionRows[bCnt].LEVEL - 1])  ?  sectionRows[bCnt].CHILDEXPANDED  :  false;
                var setRowHeight = (childLevelChk[sectionRows[bCnt].LEVEL - 1])  ?  setViewHeight  :  0;
                var setImgRowHeight = (childLevelChk[sectionRows[bCnt].LEVEL - 1])  ?  setImgHeight  :  0;

                if (sectionRows[bCnt].EXPANDED) {
                    sectionRows[bCnt].height = setRowHeight;
                    sectionRows[bCnt].children[0].height = setImgRowHeight;
                }
                bCnt += 1;

                if (bCnt >= sectionRows.length) {
                    break;
                }
            }
        }
        tCnt = bCnt;
    }
    inParam.rowData.CHILDEXPANDED = (inExpanded)  ?  false  :  true;
    inParam.rowData.children[0].image = (inExpanded)  ?  plusImg  :  minusImg;

    return;
}
function buildTableRow(inParam) {'use strict';
    var row = Ti.UI.createTableViewRow({
        title:  inParam.title,
        height:  viewheight,
        indentionLevel:  inParam.level,
        backgroundGradient: {
            type:  'linear',
            colors:  [{
                color:  '#414141',
                offset:  0.0
            }, {
                color:  '#B2B2B2',
                offset:  0.12
            }, {
                color:  '#A1A1F1',
                offset:  0.85
            }]
        },
        color:  '#ffffff',
        font: {
            fontSize:  14,
            fontWeight:  'normal'
        },
        LEVEL:  inParam.level,
        EXPANDED:  (inParam.level < 2)  ?  true  :  false,
        CHILDEXPANDED:  (inParam.level < 1)  ?  true  :  false,
        CHILD:  inParam.child
    });
    var rowImg = Ti.UI.createImageView({
        right:  30,
        height:  18,
        width:  18,
        top:  7,
        image:  (inParam.child)  ?  plusImg  :  ''
    });
    var clickView = Ti.UI.createView({
        top:  0,
        left:  0,
        right:  0,
        bottom:  0,
        backgroundColor:  'transparent'
    });
    row.add(rowImg);
    row.add(clickView);

    row.height = (inParam.level < 2)  ?  viewheight  :  0;
    rowImg.height = (inParam.level < 2)  ?  imageheight  :  0;

    return row;
}
function processData() {'use strict';
    var dCnt = 0;

    for ( dCnt = 0; dCnt < tableDataLoad.length; dCnt += 1) {
        var sectionView = Ti.UI.createView({
            top:  0,
            left:  0,
            right:  0,
            height:  33,
            backgroundGradient: {
                type:  'linear',
                colors:  [{
                    color:  '#818181',
                    offset:  0.0
                }, {
                    color:  '#B2B2B2',
                    offset:  0.12
                }, {
                    color:  '#C3C3C3',
                    offset:  0.85
                }]
            }
        });
        var sectionViewLabel = Ti.UI.createLabel({
            top:  0,
            left:  0,
            width:  '100%',
            height:  '100%',
            text:  '  ' + tableDataLoad[dCnt].sectionTitle,
            textAlign:  'left',
            color:  "#ffffff",
            font: {
                fontSize:  14,
                fontWeight:  'bold'
            },
            secValue:  tableDataLoad[dCnt].sectionNum,
            EXPANDED:  true
        });
        sectionView.add(sectionViewLabel);
        sectionView.addEventListener('touchend', sectionProcess);

        var section = Ti.UI.createTableViewSection({
            headerView:  sectionView
        });
        var rCnt = 0;

        while (rCnt < tableDataLoad[dCnt].data.length) {
            section.add(buildTableRow(tableDataLoad[dCnt].data[rCnt]));
            rCnt += 1;
        }
        sectionsData.push(section);
    }
    viewTable.setData(sectionsData);

    return;
}
function displayWindow() {'use strict';
    win = Ti.UI.createWindow({
        backgroundColor:  '#3333FF'
    });
    var screenTitle = Ti.UI.createLabel({
        top:  10,
        left:  10,
        right:  10,
        height:  50,
        text:  'Table View Accordion',
        textAlign:  'center',
        color:  '#ffffff',
        font: {
            fontSize:  18,
            fontWeight:  'bold'
        }
    });
    viewTable = Ti.UI.createTableView({
        top:  65,
        left:  20,
        right:  20,
        bottom:  50,
        rowHeight:  0,
        backgroundColor:  'transparent',
        separatorColor:  '#000000',
        separatorStyle:  0
    });
    viewTable.addEventListener('touchend', expandCollapseView);

    win.add(screenTitle);
    win.add(viewTable);

    processData();

    win.open();

    return;
}
function startApp() {'use strict';
    displayWindow();
}
startApp();