function AllStylesObj(id, readXMLAsStringFlag) {
    this.parent(id, readXMLAsStringFlag);
};
AllStylesObj.prototype = new AjaxHelperListener();
AllStylesObj.prototype.constructor = AllStylesObj;
AllStylesObj.prototype.parent = AjaxHelperListener.prototype.constructor;
AllStylesObj.prototype.initValue = function() {
    var styles = [];
    for (var i = 0; i < YAHOO.edmunds.myip.data.length - 1; i++) {
        var style = YAHOO.edmunds.myip.data[i];
        if (style.isSelected == "selected") {
            styles.push(style.id) ;
        }
    }
    return styles.join(",");
}
AllStylesObj.prototype.notify = function(responseEle, callbackParam) {
    // reset selected & available style list
    var selectedIds = responseEle.split(",");
    YAHOO.edmunds.myip.selectedStyleList = [];
    YAHOO.edmunds.myip.availableStyleList = [];
    // go through the initial data set and
    for (var i = 0; i < YAHOO.edmunds.myip.data.length - 1; i++) {
        var found = false;
        var style = YAHOO.edmunds.myip.data[i];
        for (var j = 0; j < selectedIds.length && !found; j++) {
            if (selectedIds[j] == style.id) {
                found = true;
            }
        }
        if (found) {
            YAHOO.edmunds.myip.selectedStyleList.push(style);
        } else {
            YAHOO.edmunds.myip.availableStyleList.push(style);
        }
    }
    this.rebuildPageContent();
};

/**
 * Set the datasource to be used by selected section & available section
 */
AllStylesObj.prototype.setDataSource = function() {
    for (var i = 0; i < YAHOO.edmunds.myip.data.length - 1; i++) {
        var style = YAHOO.edmunds.myip.data[i];
        if (style.isSelected == "selected") {
            YAHOO.edmunds.myip.selectedStyleList.push(style);
        } else if (style.isSelected == "available") {
            YAHOO.edmunds.myip.availableStyleList.push(style);
        }
    }
};

/**
 * Called by AllStylesObj#buildStyleContent to create a TD element that contains either a link or span text
 * @param clazz is the CSS class for the TD element
 * @param href is the URL of the <a> in TD element
 * @param tid is the Tracking ID of the <a>
 * @param txt is the body text of the <a>
 * @param valign is the alginment attribute of the TD element
 * @param colspan is the colspan attribute of the TD element
 * @return returns the <TD> with <A> inside
 */
AllStylesObj.prototype.makeSimpleTd = function (clazz, href, tid, txt, valign, colspan, styleId) {
    var attrMap = {};
    if (clazz) { attrMap["class"] = clazz; }
    if (colspan) { attrMap["colspan"] = colspan; }
    if (valign) { attrMap["valign"] = valign; }

    var tdTag = this.createElement("td", false, attrMap);
    if (href) { // td contains a link (txt is string)
        var oStr = "s_objectID='" + tid + "';setTID('" + tid + "');";
        var aTag = this.createElement("a", false, {"class":"style-link", "href":href, "onclick":oStr}, txt)
        tdTag.appendChild(aTag);
    } else { // create a txt element (txt is array now)
        for (var i = 0; i < txt.length; i++) {
            var t = txt[i];
            var txtTag = document.createTextNode(t);

            if(i != 0){
            var brTag  = document.createElement("br");           
            tdTag.appendChild(brTag);
            }
            tdTag.appendChild(txtTag);
        }
    }                      
    return tdTag;
};

/**
 * Called by AllStyles#rebuildPageContent
 * Rebuild the table based on styleList, call by rebuildPageContent
 * Given array of Style and table element id. this will create TD element for each style, group them by their trim
 * @param styleList is the list of oStyle
 * @param tableId is the document element id where style will be displayed
 * @param spacerClazz is the CSS class to be use for each section (for selectedContent table, its "spacer", otherwise "spacer other"
 * @return TRUE to indicate there are styles to display, FALSE otherwise
 */
AllStylesObj.prototype.rebuildStyleContent = function (styleList, tableId, spacerClazz) {
    var tTag = document.getElementById(tableId);
    // remove all the current trim content in the table. (skip childNodes[0] because it will be the header)
    if (tTag.hasChildNodes()) {
        for (var cnt = 0; cnt < tTag.childNodes.length; cnt++) {
            if (tTag.childNodes[cnt].nodeName.toLowerCase() == "tbody") {
                var oAttris = tTag.childNodes[cnt].attributes;
                var oAttriId = oAttris.getNamedItem("id");
                //Remove all tbody in table[selectedContent] except for tbody[selectedContentHeader]
                if (oAttriId != null && oAttriId.nodeValue.indexOf("ContentHeader") == -1) {
                    tTag.removeChild(tTag.childNodes[cnt]);
                    // keep removing the second element because using forloop on length will not work
                    cnt = 0;
                }
            }
        }
    }

    if (styleList.length > 0) {
        var bTag;
        var curTrim = '';
        var count = 0;
        for (var i = 0; i < styleList.length; i++) {
            var style = styleList[i];
            if (curTrim != style.trim) {
                curTrim = style.trim;
                bTag = this.createElement("tbody", curTrim);

                // add a Spacer between different trims, excluding first one
                if (count != 0){
                    var trTag = this.createElement("tr");
                    var tdTag = this.makeSimpleTd(spacerClazz, false, false, false, false, "9", false);
                    trTag.appendChild(tdTag);
                    bTag.appendChild(trTag);
                }

                var trTag = this.createElement("tr");
                var tdTag = this.makeSimpleTd("title", style.href, style.tid, curTrim, false, "8", style.id);
                trTag.appendChild(tdTag);
                bTag.appendChild(trTag);
                tTag.appendChild(bTag);
            }

            // add value "last" to the class attribute of the last <tr> tag inside each <tbody></tbody> tags
            count = count + 1;
            var attrMap = {};
            if (count == styleList.length || curTrim != styleList[i+1].trim || count == styleList)
            {
              attrMap["class"] = "last";
            }

            var trTag = this.createElement("tr", false, attrMap);

            // Create TD for style name, drive train, engine, transmission, fuel economy & price
            trTag.appendChild(this.makeSimpleTd("col0", false, false, false, false, false, false));
            trTag.appendChild(this.makeSimpleTd("col1", style.href, style.tid, style.name, false, false, style.id));
            trTag.appendChild(this.makeSimpleTd("col2", false, false, style.drivetrain, false, false, style.id));
            trTag.appendChild(this.makeSimpleTd("col3", false, false, style.engine, false, false, style.id));
            trTag.appendChild(this.makeSimpleTd("col4", false, false, style.transmission, false, false, style.id));
            trTag.appendChild(this.makeSimpleTd("col5", false, false, style.fueleconomy, false, false, style.id));
            trTag.appendChild(this.makeSimpleTd("col6", false, false, style.price, false, false, style.id));
            trTag.appendChild(this.makeSimpleTd("col7", false, false, false, false, false, false));
            bTag.appendChild(trTag);
        }
        return true;
    }
    return false;
};

/**
 * Rebuild the table content for selected & available styles. if no styles exist for the section, display will be turned off
 */
AllStylesObj.prototype.rebuildPageContent = function () {
    if (this.rebuildStyleContent(YAHOO.edmunds.myip.selectedStyleList, "selectedContent", "spacer")) {
        document.getElementById("selectedContent").style.display = '';
       //document.getElementById("selectedCaption").innerHTML = YAHOO.edmunds.myip.selectedStyleList.length + " vehicles matched your selection";
    } else {
        document.getElementById("selectedContent").style.display = 'none';
        //document.getElementById("selectedCaption").innerHTML = '';
    }
    if (this.rebuildStyleContent(YAHOO.edmunds.myip.availableStyleList, "parentVehicleChart", "spacer other")) {
        document.getElementById("parentVehicleChart").style.display = '';
        document.getElementById("availableCaption").innerHTML = YAHOO.edmunds.myip.availableStyleList.length + " Styles do not match your selection";
    } else {
        document.getElementById("parentVehicleChart").style.display = 'none';
        document.getElementById("availableCaption").innerHTML = '';
    }
    addTrLinks();
};

 function addTrLinks() {
    var myip_links = YAHOO.util.Dom.getElementsByClassName('style-link','a');
    var j = myip_links.length;
    for (var i=0; i < j; i++) {
        var href = myip_links[i].getAttribute('href');
        var obj = YAHOO.util.Dom.getAncestorByTagName(myip_links[i], 'tr');
        YAHOO.util.Event.addListener(obj, 'mouseover', function trOver() {
            YAHOO.util.Dom.addClass(this, 'hover');
        });
        YAHOO.util.Event.addListener(obj, 'mouseout', function trOut() {
            YAHOO.util.Dom.removeClass(this, 'hover');
        });
        YAHOO.util.Event.addListener(obj, 'click', function trClick(e, href) {
            window.location = href;
        }, href);
    };
     };