// JavaScript Document

  function toggleSection( theElement )
  {
    var sClkId = theElement.id;
    if ( sClkId )
    {
      var sId = sClkId.replace( /^clk/, '' );
      var sDivId = 'div' + sId;
      var theDiv = getElement( sDivId );
      if ( theDiv )
      {
        var sClass = theDiv.className;
        var sDisplay = theDiv.style.display;
        var fShown = hasStyle( theDiv, 'expanded' )
        swapStyle( theDiv,
                   fShown ? 'expanded'  : 'collapsed',
                   fShown ? 'collapsed' : 'expanded', '' );
        sClass = theDiv.className;
        sDisplay = theDiv.style.display;
        swapStyle( theElement,
                   fShown ? 'collapser' : 'expander',
                   fShown ? 'expander'  : 'collapser', '' );
      }
    }
  }

  function showMail( theAddress, sText )
  {
    var sAddress = [ theAddress['name'],   '&#64;',
                     theAddress['domain'], '&#46;',
                     theAddress['extension'] ].join('');
    if ( ! sText ) sText = '%A%';
    var sLabel = sText.replace( /%A%/g, sAddress );
    if (   theAddress['image']
        && theAddress['width']
        && theAddress['height'] )
    {
      var sImgTag = '<img src="'
                  + theAddress['image']
                  + '" width="'
                  + theAddress['width']
                  + '" height="'
                  + theAddress['height']
                  + '" alt="e-mail" />'
      sLabel = sLabel.replace( /%I%/g, sImgTag );
    }
    if ( theAddress['args'] ) sAddress += '&#63'+ theAddress['args'];
    var sClass  = theAddress['class'] ? ( ' class="' + theAddress['class'] + '"' ) : '';  
    var sAnchor = '<a href="mailto:' + sAddress + '"' + sClass + '>' + sLabel + '</a>';
    document.write( sAnchor );
  }

  // JavaScript to show pictures in a separate window.
  // 
  function putThumb( sName ) // ToDo: Implement as a PHP function
  {
    document.write('<a href="javascript:showPicture(\'Pictures\',\''+sName+'\',\''+sName+'\');">');
    document.write('<img src="Thumbs/'+sName+'.gif" hspace="0" vspace="0"');
    document.write(' title="klik hier voor vergroting" alt="klik hier voor vergroting" /></a>');
  }

  function showPicture( sDir, sName, sTitle )
  {
    var sPath = sDir != '' ? sDir + '/' + sName + '.jpg'
                           :              sName + '.jpg';

    var sContent  = '<html><head><title>' + sTitle + '</title></head>';
        sContent += '<body style="margin: 0 0 0 0;">';
        sContent += '<img name="theImage" src="'+sPath+'"';
        sContent += ' title="Klik om te sluiten\nClick to close"';
        sContent += ' onLoad="window.resizeTo(document.theImage.width+20,document.theImage.height+80);window.focus();"';
        sContent += ' onClick="window.close();" alt="' + sTitle + '" />';
        sContent += '</body></html>';

    var sParam  = 'width=200,height=200,left=0,top=0,resizable=yes,';
        sParam += 'toolbar=no,location=no,directories=no,status=no,menuBar=no,scrollbars=no,copyhistory=no';

    var popupImage = window.open( '', 'MezWarezPicture', config=sParam );
    popupImage.document.open();
    popupImage.document.write( sContent );
    popupImage.document.close();
  }
  
  // DatePicker code
  var g_datePickers = new Array();
  /*
   * Every element of this array is an object with the following members:
   *   { 'id'         : Value of the id="" attribute of the <input> field in the <form>
   *     'element'    : HTML <input> element inside the <form>
   *     'opts'       : Creation options in JSON notation
   *     'rangeBegin' : This is the end date of a range,
   *                    the value is the Id if the field containing the begin date.        
   *     'rangeEnd'   : This is the begin date of a range,
   *                    the value is the Id if the field containing the end date.        
   *   }   
   */     
  function initDatePickers()
  {
    var iCount = g_datePickers.length;
    if ( iCount < 1 ) return; // Nothing to do.

    // Create the datepickers:
    for ( var iPicker = 0; iPicker < iCount; ++iPicker )
    {
      var aPicker = g_datePickers[iPicker];
      aPicker.element = getElement( aPicker.id );
      datePickerController.createDatePicker( aPicker.opts );
    }
    // Now all datepickers are present, set dependent ranges:
    for ( var iPicker = 0; iPicker < iCount; ++iPicker )
    {
      var aPicker = g_datePickers[iPicker];
      if ( isRangeBegin( aPicker.id )) updateEndDates(   aPicker.id );
      if ( isRangeEnd(   aPicker.id )) updateStartDates( aPicker.id );
    }
  }
  
  function newDate( args )
  {
    if ( isRangeBegin( args.id )) updateEndDates(   args.id );
    if ( isRangeEnd(   args.id )) updateStartDates( args.id );
  }
  
  function updateEndDates( sStartElem )
  {
    var iCount = g_datePickers.length;
    if ( iCount < 1 ) return; // Nothing to do.

    // Grab the start date
    var startDate = datePickerController.getSelectedDate( sStartElem );
    // If the input's value cannot be parsed as a valid date then do nothing
    if ( startDate )
    {
      var sStartDate = makeDatePickerDate( startDate ); // Defined in dynamic.js
      for ( var iPicker = 0; iPicker < iCount; ++iPicker )
      {
        var aPicker = g_datePickers[iPicker];
        if ( aPicker.rangeBegin == sStartElem ) updateEndDate( sStartDate, aPicker.id );
      }
    }
  }
  
  function updateStartDates( sEndElem )
  {
    var iCount = g_datePickers.length;
    if ( iCount < 1 ) return; // Nothing to do.

    // Grab the end date
    var endDate = datePickerController.getSelectedDate( sEndElem );
    // If the input's value cannot be parsed as a valid date then do nothing
    if ( endDate )
    {
      var sEndDate = makeDatePickerDate( endDate ); // Defined in dynamic.js
      for ( var iPicker = 0; iPicker < iCount; ++iPicker )
      {
        var aPicker = g_datePickers[iPicker];
        if ( aPicker.rangeEnd == sEndElem ) updateStartDate( sEndDate, aPicker.id );
      }
    }
  }

  function updateEndDate( sStartDate, sEndElemId )
  {
    // Grab the end date
    var endDate  = datePickerController.getSelectedDate( sEndElemId );
    var sEndDate = endDate ? makeDatePickerDate( endDate ) : '00000000'; // Defined in dynamic.js

    datePickerController.setRangeLow( sEndElemId, sStartDate );

    // If there's a value already present within the end date input and it's smaller than the start date
    // then clear the end date value
    if ( sEndDate < sStartDate ) setElementValue( sEndElemId, '' );
  }

  function updateStartDate( sEndDate, sBeginElemId )
  {
    // Grab the end date
    var startDate  = datePickerController.getSelectedDate( sBeginElemId );
    var sStartDate = startDate ? makeDatePickerDate( startDate ) : '99999999'; // Defined in dynamic.js

    datePickerController.setRangeLow( sEndElemId, sStartDate );

    // If there's a value already present within the begindate input and it's greater than the end date
    // then clear the begin date value
    if ( sStartDate > sEndDate ) setElementValue( sBeginElemId, '' );
  }

  function isRangeBegin( sElemId )
  {
    var iCount = g_datePickers.length;
    for ( var iPicker = 0; iPicker < iCount; ++iPicker )
    {
      var aPicker = g_datePickers[iPicker];
      if ( aPicker.rangeBegin == sElemId ) return true;
    }
    return false;
  }

  function isRangeEnd( sElemId )
  {
    var iCount = g_datePickers.length;
    for ( var iPicker = 0; iPicker < iCount; ++iPicker )
    {
      var aPicker = g_datePickers[iPicker];
      if ( aPicker.rangeEnd == sElemId ) return true;
    }
    return false;
  }

  
  // SiteMap code:
  var g_siteMapTimer = null;
  function siteMapTimedHide( iSecs )
  {
    if ( g_siteMapTimer ) clearTimeout( g_siteMapTimer );

    g_siteMapTimer = setTimeout( 'hideSiteMap()', iSecs * 1000 );
  }
  function hideSiteMap()
  {
    showToolbox( null, '', '' );
    g_siteMapTimer = null;
  }

  // FrameTab code:
  function frameTabClicked( theElement, sActiveClass, sHyperClass, sHoverClass )
  {
    toggleTabContent( theElement, sActiveClass, sHyperClass, sHoverClass );
    var sTabName = theElement.id.replace( /^clk/, '' );;
    setFieldValue( 'activeTab', sTabName );
  }

