// load the button images
stylingImg = new Image();
stylingImg.src = "../images/styling-button.jpg";
stylingSelImg = new Image();
stylingSelImg.src = "../images/styling-selected-button.jpg";
interiorImg = new Image();
interiorImg.src = "../images/interior-button.jpg";
interiorSelImg = new Image();
interiorSelImg.src = "../images/interior-selected-button.jpg";
protectionImg = new Image();
protectionImg.src = "../images/protection-button.jpg";
protectionSelImg = new Image();
protectionSelImg.src = "../images/protection-selected-button.jpg";
lifestyleImg = new Image();
lifestyleImg.src = "../images/lifestyle-button.jpg";
lifestyleSelImg = new Image();
lifestyleSelImg.src = "../images/lifestyle-selected-button.jpg";
loadingImg = new Image();
loadingImg.src = "../images/loading.gif";

// global flag
var isIE = false;

// global request and XML document objects
var req;

// retrieve XML document (reusable generic function);
// parameter is URL string (relative or complete) to
// an .xml file whose Content-Type is a valid XML
// type, such as text/xml; XML source must be from
// same domain as HTML file
function loadXMLDoc(url) {
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        isIE = true;
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

// handle onreadystatechange event of req object
function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            buildItemList();
         } else {
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
         }
    }
}

function clearSelectedState() {
    document.getElementById("styling-button").src = "../images/styling-button.jpg";
    document.getElementById("interior-button").src = "../images/interior-button.jpg";
    document.getElementById("protection-button").src = "../images/protection-button.jpg";
    document.getElementById("lifestyle-button").src = "../images/lifestyle-button.jpg";
}

// loads chosen XML document
function loadDoc(elem) {
    try {
        if (elem.id) {
            clearSelectedState();
            // clear listing display
            document.getElementById("accessory-listing").innerHTML = "<div style='height: 200px; text-align: center;'><h3 style='color: #999; margin-top: 50px;'>Loading</h3><img src='../images/loading.gif' alt='' /></div>";
            loadXMLDoc(elem.id + ".xml");
            document.getElementById(elem.id + "-button").src = "../images/" + elem.id + "-selected-button.jpg";
        }
    } catch(e) {
        var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
        alert("Unable to get XML data:\n" + msg);
        return;
    }
}

// retrieve text of an XML document element, including
// elements using namespaces
function getElementTextNS(prefix, local, parentElem, index) {
    var result = "";
    if (prefix && isIE) {
        // IE/Windows way of handling namespaces
        result = parentElem.getElementsByTagName(prefix + ":" + local)[index];
    } else {
        // the namespace versions of this method
        // (getElementsByTagNameNS()) operate
        // differently in Safari and Mozilla, but both
        // return value with just local name, provided
        // there aren't conflicts with non-namespace element
        // names
        result = parentElem.getElementsByTagName(local)[index];
    }
    if (result) {
        // get text, accounting for possible
        // whitespace (carriage return) text nodes
        if (result.childNodes.length > 1) {
            return result.childNodes[1].nodeValue;
        } else {
            if (result.firstChild) {
                return result.firstChild.nodeValue;
            } else {
                return null;
            }
        }
    } else {
        return "n/a";
    }
}

// fill with items from
// the current XML document
function buildItemList() {
    var listdiv = document.getElementById("accessory-listing");
    listdiv.innerHTML = "";
    var items = req.responseXML.getElementsByTagName("Item");
    // loop through <Item> elements, and add each nested
    // <title> element to Topics select element
    for (var i = 0; i < items.length; i++) {
        var div = document.createElement("div");

        var category = getElementTextNS("", "Category", items[i], 0);
        var name = getElementTextNS("", "Name", items[i], 0);
        var image = getElementTextNS("", "Image", items[i], 0);
        var desc = getElementTextNS("", "Description", items[i], 0);

        var text = "";
        if (category) {
            text += "<h3>" + category + "</h3>";
        }

        text += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td valign=\"top\">";
        if (image) {
            text += "<img src=\"../images/accessories/" + image + "\" alt=\"\" style=\"margin-right: 10px;\" />";
        } else {
            text += "<img src=\"../images/accessories/blank.jpg\" alt=\"\" style=\"margin-right: 10px;\" />";
        }

        text += "</td><td style=\"font-size: 11px;\" valign=\"top\">";
        text += "<strong>" + name + "</strong><br />";
        text += desc;
        text += "</td></tr></table>";
        text += "<div style=\"clear: both;\"><div style=\"background: url(../images/dotted.jpg) repeat-x;\">&nbsp;</div></div>";

        div.innerHTML = text;
        listdiv.appendChild(div);
    }
}