<html>

    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        body        {margin: 0; font: icon; color: windowtext; background:window; overflow:none}
        span        {font:icon;}
        #FolderIcon {height:expression(TaskpadName.clientHeight + 10); width:100%;}
        #TaskpadName {font: caption; color:captiontext;  margin-left:0; margin-right:0; margin-top: 0; width:100%; border:0; padding-left:3; padding-top:5; padding-bottom:7;}
        #DisplayNameElem {font:icon; padding-left:5px; padding-top:5px; padding-bottom:3px; padding-right:5px}
        #Details    {padding-left: 12px; margin-top: 8px; overflow:auto}
        #DescriptionElem    {padding-left: 12px; margin-top: 8px; overflow-y:scroll; overflow:auto}
        A:visited   {color:expression(document.linkColor);}
        A:hover     {color:expression(document.linkColor);}
    </style>

    <script language="JavaScript" for="MMCEvents" EVENT="OnSelectionChange(V, N)">UpdateState();</script>
    <script language="JavaScript" for="MMCEvents" EVENT="OnContextMenuExecuted(MI)">UpdateState();</script>
    <script language="JavaScript" for="MMCEvents" EVENT="OnViewChange(V, N)">UpdateState();</script>
    <script language="JavaScript" for="MMCEvents" EVENT="OnToolbarButtonClicked()">UpdateState();</script>
    <script language="JavaScript" for="MMCEvents" EVENT="OnListUpdated(V)">UpdateState();</script>
    <script language="JavaScript">

        var L_strNoItemSelected_Text        = "Select an item to view its description.";
        var L_strDescription_Text           = "\nDescription:\n";
        var L_strMultipleItemsSelected_Text = "Multiple items selected.";

        function OnLoad()
        {
           ViewPanel.addBehavior("#default#mmcview");
           MMCEvents.ConnectTo(external.Document.Application);
           UpdateState();
        }

        // Prevent text from being selected and messing up the UI.
        function document.onselectstart()
        {
            event.returnValue = false;
        }

        function UpdateState()
        {
           var strDetails     = "";
           var strDisplayName = "";
           var strDescription = "";
           var i;
           var curnode;
           var strNodeType;

           N = external.Selection;


           switch(N.count)
           {
           case 0:
              DisplayNameElem.style.fontWeight="normal";
              strDetails = "";
              strDisplayName = L_strNoItemSelected_Text;
              break;

           case 1:
              DisplayNameElem.style.fontWeight="bold";
              strDetails = "";
              curNode = N(1);

             // got the selected node
             strNodeType    = curNode.Nodetype;
             strDisplayName = external.CellContents(curNode, 1);
             strDescription = curNode.Property("CCF_DESCRIPTION");
             strDetails     = curNode.Property("CCF_HTML_DETAILS");

             break;

           default: // multiselect
             DisplayNameElem.style.fontWeight="normal";
             strDetails = L_strMultipleItemsSelected_Text;
             break;
           }

           TaskpadName.innerHTML = "<NOBR>" + external.ActiveScopeNode.Name + "</NOBR>";
           DisplayNameElem.innerHTML = strDisplayName + "<BR>";

           if (strDetails != "")
           {
              strDetails = "<BR>" + strDetails + "<BR>"
           }

           DetailsElem.innerHTML = strDetails;

           if (strDescription != "")
           {
              strDescription =   L_strDescription_Text  +  strDescription;
           }

           DescriptionElem.innerText = strDescription;
        }


        function OnUnload()
        {
           MMCEvents.Disconnect;
        }
    </script>

    </head>

    <body scroll=no onload=OnLoad()>

        <DIV style="position:absolute; top:0; left:0">
			<TABLE WIDTH="100%" cellspacing="0" cellpadding="0" COLS="2">
				<TR>
					<TD><SPAN style="width:32px"></SPAN></TD>
					<TD id="TaskpadName"></TD>
				</TR>
			</TABLE>
        </DIV>
        <TABLE WIDTH="100%" HEIGHT="100%" cellspacing="0" cellpadding="0" COLS="2">
            <TR>
                <TD id="LeftPanel" ROWSPAN="2" WIDTH="212px">
                    <object id='FolderIcon' classid="clsid:B0395DA5-6A15-4E44-9F36-9A9DC7A2F341" tabIndex='-1'></object>
                </TD>
                <TD ID="RightPanel" bgColor="activecaption" VALIGN="TOP" WIDTH="100%" style="height:expression(TaskpadName.clientHeight);">
                </TD>
            </TR>
            <TR>
                <TD HEIGHT="10"></TD>
            </TR>
            <TR>
                <TD>
                    <DIV id="DisplayNameElem">
                    </DIV>
                </TD>
                <TD height="100%"  ROWSPAN="2" id="ViewPanel"></TD>
            </TR>
            <TR>
                <TD HEIGHT="100%">
                    <DIV STYLE="overflow: auto; height:100%; padding-left:5; padding-right:5; word-wrap:break-word">
                        <SPAN id="DetailsElem"></SPAN>
                        <span id=DescriptionElem></span>
                    </DIV>
                </TD>
            </TR>
        </TABLE>
        <object id=MMCEvents classid="clsid:ADE6444B-C91F-4e37-92A4-5BB430A33340"></object>
    </body>
</html>