Microsoft Picture It! 7.0/PI2_CD1.ISO/pip/pi7/1033/256.chm/help_script_pi7.js

JavaScript | 2002-07-09 | 16.8 KB | 694 lines

/**********************************************************************
    Javascript functions for HTML Help for Picture It! Publishing
    Author: Chris Sanders (csand)
    Microsoft Corporation, All Rights Reserved, 1999-2002

    Note: These functions are designed for PROC topics which have
    subtopic_choice radio buttons.

    Note: These functions are for IE4+ browsers.

    Note: Cannot use less-than or greater-than symbols
    in the javascript or the MSXML2.5 parser will screw up.
    (this may not be true for MSXML3.0, but I have not checked)
**********************************************************************/

// Global variables
var g_strSubtopicChoiceContext = ""
var g_strCurrentContext = ""
var g_arrContextElements = new Array('INSTRUCTIONS','MORE_INFO','LINK','MOVIE_LINK') // the classNames of the elements that may have context
var g_strCurrentIdeaNum = ""
var g_arrIdeaArrow = new Array('arrowrightblue.gif','arrowdownred.gif')


//************************************************************
//  Functions for PROC pages
//************************************************************

function onPageLoad( strTemplate )
{
    if (strTemplate == 'PROC')
    {
        hideContextContent() //start with all context content is hidden

        if ( existsSubtopicChoiceForm() )
        {
            resetSubtopicChoiceForm()
        }

        showContextContent() //always show content appropriate for the context
    }
}
function setCurrentContext()
{
    g_strCurrentContext = getSubtopicChoiceContext()
}
function getCurrentContext()
{
    setCurrentContext()
    return g_strCurrentContext
}

function setSubtopicChoiceContext( strContext )
{
    g_strSubtopicChoiceContext = strContext
}
function getSubtopicChoiceContext()
{
    return g_strSubtopicChoiceContext
}
function existsSubtopicChoiceForm()
{
    return document.SubtopicChoiceForm
}
function hasTheContext( strElementContext, strCurrentContext )
{
    // Does this element have the current context

    var arrElementContext = strElementContext.split(",")

    for (var i = 0; i < arrElementContext.length; i++)
    {
        if ( arrElementContext[i] == strCurrentContext )
        {
            return true
        }
    }
    return false
}
function getElementContext( oElement )
{
    //The context is contained in the id attribute
    var strContext = ( oElement.id ) ? oElement.id : ""
    return strContext
}
function clickedSubtopicChoice( strContext )
{
    setSubtopicChoiceContext( strContext ) // remember the context
    hideContextContent()  // first, hide all context content
    showContextContent()  // then, show all context content dependent on the new context
}
function resetSubtopicChoiceForm()
{
    //set the subtopic_choice context to nothing
     setSubtopicChoiceContext( "" )

     if ( existsSubtopicChoiceForm() )
     {
         //uncheck all subtopic_choice radio elements
         var oRadioGroup = document.SubtopicChoiceForm.SUBTOPIC_CHOICE
         for (var i = 0; i < oRadioGroup.length; i++)
         {
             oRadioGroup[i].checked = false
         }
     }
}

function isContextElement(oElement)
{
    // Is oElement an element that has context
    for (var i=0; i < g_arrContextElements.length; i++)
    {
        if ( oElement.className == g_arrContextElements[i] )
        {
            return true
        }
    }
    return false
}
function showContextContent()
{
    // Display all elements appropriate for the context
    var oElement
    var oLinksElement
    var oMovieLinksElement

    //First, make sure that the current context is up-to-date
    setCurrentContext()

    //Loop through all of the elements on the page
    for (var i = 0; i != document.all.length; i++)
    {
        oElement = document.all[i]

        if (oElement.className == 'LINKS')
            oLinksElement = oElement
        else if (oElement.className == 'MOVIE_LINKS')
            oMovieLinksElement = oElement

        if (isContextElement(oElement))
        {
            if (hasTheContext(getElementContext(oElement),g_strCurrentContext))
            {
                if (oElement.className == 'LINK')
                {
                    oLinksElement.style.display = '' // display the related LINKS container
                }
                else if (oElement.className == 'MOVIE_LINK')
                {
                    oMovieLinksElement.style.display = '' // display the related MOVIE_LINKS container
                }
                oElement.style.display = '' // display the element
            }
            else
            {
                oElement.style.display = 'none' // hide the element
            }
        }
    }
}
function hideContextContent()
{
    // Hide all elements that have context
    var oElement

    //First, make sure that the current context is up-to-date
    setCurrentContext()

    //Loop through all of the elements on the page
    for (var i = 0; i != document.all.length; i++)
    {
        oElement = document.all[i]

        if ( (isContextElement(oElement)) || (oElement.className == 'LINKS') || (oElement.className == 'MOVIE_LINKS') )
        {
            oElement.style.display = 'none' // hide the element
        }
    }
}

//************************************************************
//  Functions for other pages
//************************************************************

function toggleNext(oElement, strClassName)
{
    if (strClassName == 'GLOSSARY_DEF')
    {
        toggleGlossary(oElement)
    }
    else
    {
        //find the strClassName element associated with oElement
        //(it should be the next strClassName element in the source index hierarchy)
        //and toggle it
        for (var i = oElement.sourceIndex; i != document.all.length; i++)
        {
            oElement = document.all[i]

            if (oElement.tagName == "img")
            {
                toggleArrow(oElement.sourceIndex)
            }
            if (oElement.className == strClassName)
            {
                toggleSI(oElement.sourceIndex)
                break
            }
        }
    }
}
function toggleSI(intSI) {
    //toggle the element at this source index

    if (document.all[intSI].style.display == 'none')
    {
        document.all[intSI].style.display = ''
    }
    else
    {
        document.all[intSI].style.display = 'none'
    }
}
function toggleArrow(intSI) {
    //toggle the img element at this source index

    var strCurrentImg, intCursor
    strCurrentImg = document.all[intSI].src
    intCursor = strCurrentImg.lastIndexOf('/')

    if (intCursor != -1)
    {
        strCurrentImg = strCurrentImg.substr(intCursor+1)
    }

    if (strCurrentImg == g_arrIdeaArrow[0])
    {
        document.all[intSI].src = g_arrIdeaArrow[1]
    }
    else if (strCurrentImg == g_arrIdeaArrow[1])
    {
        document.all[intSI].src = g_arrIdeaArrow[0]
    }
}
function toggleIdea(oElement)
{
    // oElement is the IDEA_CATEGORY SPAN element that contains first an <IMG> element and then Text
    // First, hide any open IDEAS DIV element
    // Second, the IMG for the clicked IDEA_CATEGORY must be changed to the clicked state
    // Third, the corresponding IDEAS DIV must be shown

    var intSI
    var oElem

    // close any open IDEAS
    if (g_strCurrentIdeaNum != "")
    {
        // there is an IDEA_CATEGORY currently selected
        intSI = document.all[getCurrentIcatID()].sourceIndex + 1  // the source index of the associated IMG element
        toggleArrow(intSI)  // toggle the IMG to the unselected state
        oElem = eval( "document.all." + getCurrentIdeasID() )
        oElem.style.display = 'none'  // close the associated IDEA
    }

    // open new IDEAS as appropriate
    if (g_strCurrentIdeaNum != getIdeaNumber(oElement.id))
    {
        // a new IDEA_CATEGORY was selected
        setCurrentIdea(oElement.id)  // remember this new idea number
        intSI = oElement.sourceIndex + 1  // the source index of the associated IMG element
        toggleArrow(intSI)  // toggle the image to the selected state
        oElem = eval( "document.all." + getCurrentIdeasID() )
        oElem.style.display = ''  // open the associated IDEAS
    }
    else
    {
        // the open IDEA_CATEGORY was reselected
        g_strCurrentIdeaNum = "" // remember that there are no ideas currently selected
    }
}
function getCurrentIdeasID()
{
    return ('ideas_' + g_strCurrentIdeaNum)
}
function getCurrentIcatID()
{
    return ('icat_' + g_strCurrentIdeaNum)
}
function getIdeaNumber(strID)
{
    return strID.substring( strID.indexOf('_')+1, strID.length )
}
function setCurrentIdea(strID)
{
    g_strCurrentIdeaNum = getIdeaNumber(strID)
}
function doLearnMore(strHREF)
{
    // jump to the help topic page indicated by the HREF
    if (strHREF != '')
    {
        window.location = strHREF;
    }

}
function openMovieWindow(fn)
{
    var X, Y, sl, a, ra, link, filename;
    var subDir = "movies/";

    filename = fn;
    ra = /:/;
    a = location.href.search(ra);
    if (a == 2)
        X = 14;
    else
        X = 7;
    sl = "\\";
    Y = location.href.lastIndexOf(sl) + 1;

    do {
        link = 'file:///' + location.href.substring(X, Y) + subDir + filename;
        filename = window.showModalDialog(link,'',"dialogWidth:570px;dialogHeight:530px;center=yes");
    } while (filename.indexOf('.htm') != -1)

}
function openLocalFile(fn)
{
    var X, Y, sl, a, ra, link, oWindow;

    ra = /:/;
    a = location.href.search(ra);
    if (a == 2)
        X = 14;
    else
        X = 7;
    sl = "\\";
    Y = location.href.lastIndexOf(sl) + 1;

    link = 'file:///' + location.href.substring(X, Y) + fn;
    oWindow = window.open(link,'LocalWin','width=500,height=500,resizable');

}

//************************************************************
//  Glossary Popup
//************************************************************

function toggleGlossary(oElement)
{
    //IE4+ browsers only

    var strGlossaryPopupDIV = "<div id='popupWindow' style='visibility:hidden; position:absolute; " +
        "top:0px; left:0px; background-color:#FFFFFF; " +
        "border:solid 1 #325580'></div>";

    if (!(document.all.popupWindow))
    {
        //insert the popup div in the doc body
        document.body.insertAdjacentHTML('beforeEnd', strGlossaryPopupDIV);
    }

    if (document.all.popupWindow.style.visibility == 'hidden')
    {
        //let's make it visible with the proper content and in the proper position
        showGlossary(oElement)

        //allow click in doc body to hide the glossary
        document.body.onmousedown = hideGlossary
    }
    else
    {
        //it is visible so this must be a call to hide it
        hideGlossary()
    }
}
function hideGlossary()
{
    document.all.popupWindow.style.visibility = 'hidden';
    document.body.onclick = doNothing
}
function doNothing()
{}
function showGlossary(oElement)
{
    //IE4+ browsers only

    var oPopup = document.all.popupWindow;

    oPopup.style.height = 0;
    oPopup.style.width = 200;
     oPopup.style.padding = 4;
    oPopup.style.fontsize = 10;
    oPopup.innerHTML = '\t'+ getGlossaryText(oElement);

    oPopup.style.backgroundColor="#FFFF99";

    positionGlossaryPopup(oElement);

    oPopup.style.visibility = "visible";

}
function positionGlossaryPopup(oElement)
{
    //IE4+ browsers only

    var popupWindow = document.all.popupWindow

    var pageBottom = document.body.scrollTop + document.body.clientHeight;
    var popHeight = popupWindow.offsetHeight;

    var ieX;
    var ieY;

    if (oElement.offsetParent.tagName.toLowerCase() == 'body')
    {
        ieX = oElement.offsetLeft;
        ieY = ((oElement.offsetTop) + (oElement.offsetHeight) + 1);
    }
    else if (oElement.offsetParent.offsetParent.tagName.toLowerCase() == 'body')
    {
        ieX = ((oElement.offsetLeft) + (oElement.offsetParent.offsetLeft));
        ieY = ((oElement.offsetHeight) + (oElement.offsetTop) + (oElement.offsetParent.offsetTop) + (1));
    }
    else if (oElement.offsetParent.offsetParent.offsetParent.tagName.toLowerCase() == 'body')
    {
        ieX = ((oElement.offsetLeft) + (oElement.offsetParent.offsetLeft) + (oElement.offsetParent.offsetParent.offsetLeft));
        ieY = ((oElement.offsetHeight) + (oElement.offsetTop) + (oElement.offsetParent.offsetTop) + (oElement.offsetParent.offsetParent.offsetTop) + (1));
    }
    else
    {
        ieX = window.event.clientX;
        ieY = window.event.clientY + document.body.scrollTop;
    }

     var rightlimit = ieX + popupWindow.offsetWidth;
    if (rightlimit >= document.body.clientWidth)
    {
        ieX -= (rightlimit - document.body.clientWidth);
    }

    try{
        popupWindow.style.height = popHeight - 2 * (parseInt(popupWindow.style.borderWidth));
    }
    catch (e) {}

    if (popHeight + ieY >= pageBottom)
    {
        if (popHeight <= pageBottom)
        {
            ieY = pageBottom - popHeight;
        }
        else
        {
            ieY = 0;
        }
    }
    popupWindow.style.left = ieX;
    popupWindow.style.top = ieY;

}
function getGlossaryText(oClickedElement)
{
    //IE4+ browsers only

    //find the strClassName element associated with oElement
    //(it should be the next strClassName element in the source index hierarchy)
    //and get its content

    var oElement
    var strText
    var strHTML

    strHTML = "<b>" + oClickedElement.innerText + "</b>"
    strHTML += "<p>"

    for (var i = oClickedElement.sourceIndex; i != document.all.length; i++)
    {
        oElement = document.all[i]

        if (oElement.className == 'GLOSSARY_DEF')
        {
            strText = oElement.innerText
            break
        }
    }

    //capitalize the first alphabetic char
    var strFirstChar
    for (var i = 0; i != strText.length; i++)
    {
        var strFirstChar = strText.substr(i,1)
        if (strFirstChar != " ")
        {
            var strRest = strText.substr(i+1)
            strText = strFirstChar.toUpperCase() + strRest
            break
        }
    }

    strHTML += strText + "</p>"

    return strHTML
}
//************************************************************

/**********************************************************************
    Generic Cross Browser Code
**********************************************************************/

var isIE4 = true;
var isNav4 = false;
var isNav6 = false;

function blur( oElement )
{
    oElement.blur()
}

function existsForm( name )
{
    if ( typeof document.forms[name] == "object" )
        return true
    else
        return false
}
function getElementById( strId )
{
    if (isNav6)
    {
        return document.getElementById( strId );
    }
    else if (isIE4)
    {
        return document.all[strId]
    }
    else
    {
        return null
    }
}

function getStyleBySelector( selector )
{
    if (!isNav6)
    {
        return null;
    }
    var sheetList = document.styleSheets;
    var ruleList;
    var i, j;

    /* look through stylesheets in reverse order that
       they appear in the document */
    for (i=sheetList.length-1; i >= 0; i--)
    {
        ruleList = sheetList[i].cssRules;
        for (j=0; j<ruleList.length; j++)
        {
            if (ruleList[j].type == CSSRule.STYLE_RULE && ruleList[j].selectorText == selector)
            {
                return ruleList[j].style;
            }
        }
    }
    return null;
}
function getStylePropertyById( strId, strProperty )
{
    if (isNav6)
    {
        var styleObject = document.getElementById( strId );
        if (styleObject != null)
        {
            styleObject = styleObject.style;
            if (styleObject[strProperty])
            {
                return styleObject[ strProperty ];
            }
        }
        styleObject = getStyleBySelector( "#" + strId );
        return (styleObject != null) ?
            styleObject[strProperty] :
            null;
    }
    else if (isIE4)
    {
        return document.all[strId].style[strProperty];
    }
    else
    {
        return ""
    }
}

function setStylePropertyById( strId, strProperty, strValue )
{
    if (isNav6)
    {
        var styleObject = document.getElementById( strId );
        if (styleObject != null)
        {
            styleObject = styleObject.style;
            styleObject[ strProperty ] = strValue;
        }
    }
    else if (isIE4)
    {
         document.all[strId].style[strProperty] = strValue;
    }
    else
    {}    //so Nav4 won't return error
}

function setStylePropertyByElement( oElement, strProperty, strValue )
{
    if (isNav6)
    {
        var styleObject = oElement;
        if (styleObject != null)
        {
            styleObject = styleObject.style;
            styleObject[ strProperty ] = strValue;
        }
    }
    else if (isIE4)
    {
         oElement.style[strProperty] = strValue;
    }
    else
    {}    //so Nav4 won't return error
}

function toggleElementDisplay( element, strStyle )
{
    var strID

    //get the element id
    if (typeof element == "object")
    {
        strID = element.id
    }
    else if (typeof element == "string")
    {
        strID = element
    }

    if ((strID != "") && (strID != null))
    {
        if (isIE4 || isNav6)
        {
            if ( getStylePropertyById( strID,'display')=='none' )
            {
                setStylePropertyById( strID, 'display', strStyle ) //show the element
            }
            else
            {
                setStylePropertyById( strID, 'display', 'none' ) //hide the element
            }
        }
    }
}

function toggleImg( element, strImg1, strImg2 )
{
    var oElement;

    //get the element id
    if (typeof element == "object")
    {
        oElement = element;
    }
    else if (typeof element == "string")
    {
        oElement = getElementById( element );
    }

    if (oElement != null)
    {
        var strSrc = oElement.src;
        if ( strSrc.indexOf(strImg1) > -1 )
        {
            oElement.src = strImg2;
        }
        else
        {
            oElement.src = strImg1;
        }
    }
}

/**********************************************************************
    End Generic Cross-Browser Code
**********************************************************************/