function OnLoad()
{
	   vid = document.getElementById( "video1" );
   addEvent( vid, "click", divClickHandler );
	
	   timerInit();
	
}
function SeekTime( Time )
{   
   if( document.realplayer == undefined || document.realplayer == null )
   {
      return;
   }
   
   if ( document.realplayer.GetPlayState() == 0 || document.realplayer.GetPlayState() == 4 ) 
   {
      document.realplayer.DoPlay();
   }
   else 
   {
      MSTime = Time * 1000;
      document.realplayer.SetPosition( MSTime );
   }
}


function ScrollToIndex( DivID, destIndex ) 
{
   var nDestYCoord = destIndex.offsetTop; 
   var thisNode    = destIndex; 
   
   while ( thisNode.offsetParent && ( thisNode.offsetParent !=  document.body) ) 
   { 
      thisNode     = thisNode.offsetParent; 
      nDestYCoord += thisNode.offsetTop; 
   }

   nCurWindowYPos = GetCurrentScrollYPos( DivID.id );

   //Only scroll if it's needed..
   if( destIndex.offsetTop + destIndex.offsetHeight > DivID.clientHeight )
   {      
      nDestYCoord -= DivID.clientHeight;
      
      if( nDestYCoord > DivID.scrollTop )
      {
         DivID.scrollTop = nDestYCoord;
      }
   }
}

function GetCurrentScrollYPos( DivID ) 
{ 
   var aDivs = document.body.getElementsByTagName("DIV");

   for ( var i=0; i < aDivs.length; i++ ) 
   { 
      var Div = aDivs[i]; 

      if ( Div.id == DivID ) 
      { 
         return Div.scrollTop
      }
   }

   return 0;
}


function timerInit() 
{
   //Sets the timer to check every .1 second
   window.setInterval("timer()", 100);
}

function timer() 
{  
   if( document.realplayer == undefined || document.realplayer == null )
   {
      return;
   }
      
   if( document.realplayer.GetPlayState() == 3 ) 
   {
      var destIndex = null;
      
      var curTime = document.realplayer.GetPosition() / 1000;
      if( curTime >= 0.000000 && curTime < 380.000000 )
      {
         document.getElementById('Index0').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index0');
      }
      else
      {
         document.getElementById('Index0').style.backgroundColor = '';
      }
      if( curTime >= 380.000000 && curTime < 504.933000 )
      {
         document.getElementById('Index1').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index1');
      }
      else
      {
         document.getElementById('Index1').style.backgroundColor = '';
      }
      if( curTime >= 504.933000 && curTime < 629.333000 )
      {
         document.getElementById('Index2').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index2');
      }
      else
      {
         document.getElementById('Index2').style.backgroundColor = '';
      }
      if( curTime >= 629.333000 && curTime < 778.200000 )
      {
         document.getElementById('Index3').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index3');
      }
      else
      {
         document.getElementById('Index3').style.backgroundColor = '';
      }
      if( curTime >= 778.200000 && curTime < 1171.400000 )
      {
         document.getElementById('Index4').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index4');
      }
      else
      {
         document.getElementById('Index4').style.backgroundColor = '';
      }
      if( curTime >= 1171.400000 && curTime < 1480.600000 )
      {
         document.getElementById('Index5').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index5');
      }
      else
      {
         document.getElementById('Index5').style.backgroundColor = '';
      }

      
      if( destIndex != null )
      {
         ScrollToIndex( document.getElementById('indexlinks'), destIndex );
      }
   }
}

   var toc1     = null;
   var toc2     = null;
   var vid      = null;
     
   //adds and event listener across major browser versions
   function addEvent( obj, type, fn )
   {
	   if ( obj.addEventListener )
	   {
		   obj.addEventListener( type, fn, true );
	   }
	   else if ( obj.attachEvent )
	   {
		   obj.attachEvent( "on" + type, fn );
	   }
	   else
	   {
		   obj["on" + type] = fn;
	   }
   }

   //removes event listeners across major browser versions
   function removeEvent( obj, type, fn )
   {
      if ( obj.removeEventListener )
	   {
	      obj.removeEventListener( type, fn, true );	
	   }
	   else if ( obj.detachEvent )
	   {
	     obj.detachEvent( "on" + type, fn );
	   }
	   else
	   {
		   delete obj["on" + type];	
	   }
   }
   
   function divClickHandler()
   {
      SwitchPlayer( 'video1', 'video2', 'Systems.rm', '509', '417', '381', 'Systems_media/', 'realplayer', 'audio/x-pn-realaudio-plugin',  'audio/x-pn-realaudio-plugin', 'http://www.real.com/realplayer.html', 'false', 'imagewindow', 'One', 'true', '509', '36', 'ControlPanel', toc1, toc2 );
      
      removeEvent( vid, 'click', divClickHandler );
   } 
   toc1 = 
               '<table id="CsEmdPlr">'
             + '   <tr>'
             + '      <td class="top_center_clr">'
             + '         <div class="contentWrapper_left">'
             + '            <div class="content_left">'
             + '               <img src="Systems_media/images/top_left_corner.jpg" alt=" " class="borderTL" />'
             + '               <img src="Systems_media/images/top_right_corner.jpg" alt=" " class="borderTR" />'
             + '               <div id="indexlinks" class="indexlinks"><br/>'
             + '                  <h3></h3>'
+ '                  <p id="Index0"><a href="javascript:SeekTime(0.000000);" title="4-4-2"> 1. 4-4-2</a></p>'
+ '                  <p id="Index1"><a href="javascript:SeekTime(380.000000);" title="5-3-2"> 2. 5-3-2</a></p>'
+ '                  <p id="Index2"><a href="javascript:SeekTime(504.933000);" title="4-5-1"> 3. 4-5-1</a></p>'
+ '                  <p id="Index3"><a href="javascript:SeekTime(629.333000);" title="3-4-3"> 4. 3-4-3</a></p>'
+ '                  <p id="Index4"><a href="javascript:SeekTime(778.200000);" title="4-3-3"> 5. 4-3-3</a></p>'
+ '                  <p id="Index5"><a href="javascript:SeekTime(1171.400000);" title="3-5-2"> 6. 3-5-2</a></p>'

             + '               </div>'
             + '            </div>'
             + '         </div>'
             + '         <div id="menuBottom"></div>'
             + '      </td>'
             + '      <td class="top_center">'
             + '         <div class="contentWrapper">'
             + '            <div class="content">'
             + '               <img src="Systems_media/images/top_left_corner.jpg" alt=" " class="borderTL" />'
             + '               <img src="Systems_media/images/top_right_corner.jpg" alt=" " class="borderTR" /><br/><br/>';          

   toc2 = 
               '               <br/>  '
             + '            </div>'
             + '         </div>'
             + '      </td>'
             + '   </tr>'
             + '   <tr>'
             + '      <td></td>'
             + '      <td class="bottom_center">'
             + '         <div class="contentWrapper">'
             + '            <div class="content">'
             + '               <img src="Systems_media/images/bottom_left.jpg" alt=" " class="borderBL"  />'
             + '               <img src="Systems_media/images/bottom_right.jpg" alt=" " class="borderBR" />'
             + '             </div>'
             + '         </div>'
             + '      </td>'
             + '   </tr>'
             + '</table>';