/**
 * Adds colorful highlighting to an anchor when clicked.
 * Also removes highlighting to other anchors when clicked.
 */
function highlightAnchorPlaying(anchorId) {
    if (document.getElementById(anchorId)) {
        var anchors = getElementsByClassName(document, "a", "tocAnchor");
        for (var i = 0; i < anchors.length; i++) {
            anchors[i].style.color = '';
            // Assigning null doesn't work in IE
        }

        document.getElementById(anchorId).style.color = '#FFE491';
        replaceText("transcriptTitle", document.getElementById(anchorId).getAttribute("title"), "transcriptTitleText");
        curAnchor = anchorId;
    }
}

function highlightIndexPlaying(anchorId) {
    if (document.getElementById(anchorId)) {
        var anchors = getElementsByClassName(document, "a", "segmentAnchor");
        for (var i = 0; i < anchors.length; i++) {
            anchors[i].style.color = '';
            // Assigning null doesn't work in IE
        }

        document.getElementById(anchorId).style.color = '#FFE491';

    }
}


function highlightAnchorComposing(anchor) {
    if (anchor != null) {
        if ("note" == anchor.getAttribute("tag")) {
            // set visual indicator that we're editing a note
            replaceText("noteMode", "Editing...", "noteModeText");

            document.getElementById("composeNoteTitle").value = anchor.getAttribute("title");
            document.getElementById("composeNoteInput").value = anchor.getAttribute("text");

            // we know we're editing a note
            document.getElementById("newOrEdit").value = 'edit';

            document.getElementById("composeNoteId").value = anchor.getAttribute("noteid");
        } else {
            // set visual indicator that we're creating a new note attached to an index anchor
            replaceText("noteMode", "Composing new...", "noteModeText");

            // we know we're creating a new note
            document.getElementById("newOrEdit").value = 'new';

            document.getElementById("composeNoteId").value = '';
        }

        var anchors = getElementsByClassName(document, "a", "anchorCompose");
        for (var i = 0; i < anchors.length; i++) {
            anchors[i].style.color = '';
            // Assigning null doesn't work in IE
        }

        var anchors = getElementsByClassName(document, "a", "anchorNoteCompose");
        for (var i = 0; i < anchors.length; i++) {
            anchors[i].style.color = '';
            // Assigning null doesn't work in IE
        }

        anchor.style.color = '#FFE491';

        document.getElementById("composeNoteType").value = 'toc';
        document.getElementById("composeNoteXmlId").value = anchor.getAttribute("xmlid");

    }
}

function clearAnchorHighlights() {
    var anchors = getElementsByClassName(document, "a", "tocAnchor");
    for (var i = 0; i < anchors.length; i++) {
        anchors[i].style.backgroundColor = '';
        // Assigning null doesn't work in IE
    }
}

/**
 * AJAX calls or table of contents anchors
 */
function ajaxRequestToc(pid, segId, contentModel, coid) {
    if (!xhr) {
        setTimeout("ajaxRequestToc(" + pid + "," + segId + "," + contentModel + "," + coid + ")", 500);
        return;
    }
    var xhri = xhrRequest();
    xhr[xhri].open('GET', addRandomSeed("toc.metaInfo?pid=" + pid + "&id=" + segId + "&contentModel=" + contentModel + "&coid=" + coid), true);
    xhr[xhri].onreadystatechange = function() {
        if (xhr[xhri].readyState == 4 && xhr[xhri].status == 200) {
            savedResponseXML = xhr[xhri].responseXML;
            activateLinks = false;
            ajaxProcessToc(savedResponseXML);
            xi[xhri] = 1;
            xhr[xhri] = null;
        }
    };
    xhr[xhri].send(null);
}


function clearAnchors() {
    /*el = document.getElementById("anchors");
    nEl = el.cloneNode(false);
    el.parentNode.insertBefore(nEl, el);
    el.parentNode.removeChild(el);*/
    el = document.getElementById("anchors");
    el.innerHTML = "";
}

/**
 * Create the anchors as a JavaScript array
 */
function ajaxProcessToc(responseXML) {
    // first add expanding divs for navigating, if there are any segments before the current one
    for (var i = 0; i < curIndex; i++) {
        div = document.createElement("div");
        div.setAttribute("className", "segmentDivClosed");
        div.setAttribute("class", "segmentDivClosed");
        div.style.background = segmentBackground;

        anchor = document.createElement("a");
        anchor.setAttribute("id", "anchor" + i);
        anchor.setAttribute("href", "javascript:void(0);");
        anchor.setAttribute("className", "segmentAnchor");
        // IE specific
        anchor.setAttribute("class", "segmentAnchor");
        // everything else

        // The following seems to work in all but Internet Explorer
        anchor.setAttribute("onclick", "javascript:switchToSegment(" + i + ")");
        anchor.onclick = function() {
            anchorId = this.id;
            //grab anchorId
            index = leaveDigits(this.id);
            // remove all characters except anchor index
            switchToSegment(index);
        }

        anchor.appendChild(document.createTextNode("+ Part " + leaveDigits(transcriptIndex[i].key)));

        document.getElementById("anchors").appendChild(div);
        document.getElementById("anchors").lastChild.appendChild(anchor);
    }


    var xmldoc = responseXML;

    anchors = new Array();

    var toc = xmldoc.getElementsByTagName("toc")[0].childNodes;

    for (var i = 0; i < toc.length; i++) {
        if (toc[i].tagName == "index") { // it's an index item, like chapter
            anchors[i] = {
                tag  : toc[i].tagName,
                type : toc[i].getAttribute("type"),
                time : toc[i].getAttribute("timecode"),
                xmlid: toc[i].getAttribute("xmlid"),
                title : toc[i].firstChild.data
            };
        } else { // it's a note
            anchors[i] = {
                tag    : toc[i].tagName,
                noteid : toc[i].getAttribute("id"),
                type   : toc[i].getAttribute("type"),
                time   : toc[i].getAttribute("timecode"),
                xmlid  : toc[i].getAttribute("xmlid"),
                title  : toc[i].getElementsByTagName("title").item(0).firstChild.data,
                text   : toc[i].getElementsByTagName("body")[0].firstChild.data
            };
        }
    }

    // create the segment header div (expanded)
    div = document.createElement("div");
    div.setAttribute("className", "segmentDivOpen");
    div.setAttribute("class", "segmentDivOpen");
    div.style.background = segmentBackground;

    anchor = document.createElement("a");
    anchor.setAttribute("id", "anchor" + curIndex);
    anchor.setAttribute("href", "javascript:void(0);");
    anchor.setAttribute("className", "segmentAnchor");
    // IE specific
    anchor.setAttribute("class", "segmentAnchor");
    // everything else
    anchor.appendChild(document.createTextNode("- Part " + leaveDigits(transcriptIndex[curIndex].key)));

    document.getElementById("anchors").appendChild(div);
    document.getElementById("anchors").lastChild.appendChild(anchor);


    // set the last segment anchor id
    lastSegmentAnchor = anchors[anchors.length-1].xmlid;
    //alert("last segment anchor " + lastSegmentAnchor);//DEBUG
    
    for (var i = 0; i < anchors.length; i++) { //setup the current segment anchors
        anchor = document.createElement("a");
        //		anchor.setAttribute("id", "anchor" + i);
        anchor.setAttribute("id", anchors[i].xmlid);
        anchor.setAttribute("href", "javascript:void(0);");

        anchor.setAttribute("noteid", anchors[i].noteid);

        if (anchors[i].noteid == null) {
            anchor.setAttribute("className", "tocAnchor");
            // IE specific
            anchor.setAttribute("class", "tocAnchor");
            //anchor.setAttribute("style","font-weight: bold;");
            //anchor.style.cssText = "font-weight: bold;";
            // everything else
        } else {
            anchor.setAttribute("className", "anchorNote");
            // IE specific
            anchor.setAttribute("class", "anchorNote");
            // everything else
        }

        anchor.setAttribute("tag", anchors[i].tag);
        anchor.setAttribute("title", anchors[i].title);
        anchor.setAttribute("text", anchors[i].text);

        anchor.setAttribute("xmlid", anchors[i].xmlid);
        anchor.setAttribute("index", i);
        // The following seems to work in all but Internet Explorer
        
        if (activateLinks) {
          anchor.setAttribute("onclick", "javascript:seekToAndPlay(" + anchors[i].time + ")");
        }

        // The following is a work around to assign an onclick event to Internet Explorer
        anchor.onclick = function() {
            index = this.getAttribute("index")
            time = anchors[index].time;
            // get the time using the anchor index and anchor array

            if (activateLinks) {
                seekToAndPlay(time);
            }
        }

        anchor.appendChild(document.createTextNode(anchors[i].title));

        div = document.createElement("div");

        if (anchors[i].noteid == null) {
            div.setAttribute("className", "anchorDiv");
            div.setAttribute("class", "anchorDiv");
        } else {
            div.setAttribute("className", "anchorNoteDiv");
            div.setAttribute("class", "anchorNoteDiv");
        }

        document.getElementById("anchors").appendChild(div);

        if (anchors[i].noteid != null) {
            img = document.createElement("img");
            img.setAttribute("src", starView);
            img.setAttribute("className", "starImg");
            img.setAttribute("class", "starImg");
            document.getElementById("anchors").lastChild.appendChild(img);
        }

        document.getElementById("anchors").lastChild.appendChild(anchor);
    }

    div = document.createElement("div");
    div.setAttribute("className", "segmentDivSpacer");
    div.setAttribute("class", "segmentDivSpacer");
    document.getElementById("anchors").appendChild(div);

    // last add expanding divs for navigating, if there are any segments after the current one
    for (var i = curIndex + 1; i < transcriptIndex.length; i++) { // +1 to skip the current one
        div = document.createElement("div");
        div.setAttribute("className", "segmentDivClosed");
        div.setAttribute("class", "segmentDivClosed");
        div.style.background = segmentBackground;

        anchor = document.createElement("a");
        anchor.setAttribute("id", "anchor" + i);
        anchor.setAttribute("href", "javascript:void(0);");
        anchor.setAttribute("className", "segmentAnchor");
        // IE specific
        anchor.setAttribute("class", "segmentAnchor");
        // everything else

        // The following seems to work in all but Internet Explorer
        anchor.setAttribute("onclick", "javascript:switchToSegment(" + i + ")");
        anchor.onclick = function() {
            anchorId = this.id;
            //grab anchorId
            index = leaveDigits(this.id);
            // remove all characters except anchor index
            switchToSegment(index);
        }
        anchor.appendChild(document.createTextNode("+ Part " + leaveDigits(transcriptIndex[i].key)));

        document.getElementById("anchors").appendChild(div);
        document.getElementById("anchors").lastChild.appendChild(anchor);
    }


    tocDone = true;
    highlightIndexPlaying("anchor" + curIndex);
    synchronizeSelection();
    //	if (anchors.length > 0)
    //		{
    //		highlightAnchorPlaying("anchor0");
    //		}
}

function addPlayingAnchors() {
    ajaxRequestToc(pid, segId, contentModel, coid);
}