var cDropDownChecklistContainers = null;
var cDropDownChecklists = null;
var eActiveDropDownChecklist = null;
var iTest = 0;

var appVersion = null;

function InitializeDropdownChecklists()
{
   if ( window.event && navigator.userAgent.toLowerCase().indexOf('chrome') == -1 )
   {
      appVersion = navigator.appVersion.split( 'MSIE ' );
      appVersion = appVersion[ 1 ].split( ';' )[ 0 ];
      appVersion = parseInt( appVersion.replace( '.', '' ) ) / 10;
   }
   
   cDropDownChecklists = document.getElementsByClassName( "DropdownChecklist" );
   cDropDownChecklistContainers = document.getElementsByClassName( "DropdownChecklistContainer" );
   for ( var i=0; i<cDropDownChecklists.length; i++ )
   {
      // Show select element
      var eSelectElement = cDropDownChecklistContainers[ i ].getElementsByTagName( "SELECT" )[ 0 ];
      eSelectElement.style.display = '';
      
      // Create an A element floating over the link
      CreateDropdownSelectOverlayElement( eSelectElement );
      
      // Synchronize widths
      if ( window.event && navigator.userAgent.toLowerCase().indexOf('chrome') == -1 )
         cDropDownChecklists[ i ].style.width = eSelectElement.clientWidth + 8 + 'px';
      else
         cDropDownChecklists[ i ].style.width = eSelectElement.clientWidth - 14 + 'px';
      
      // Set list style
      var eList = cDropDownChecklistContainers[ i ].getElementsByTagName( "DIV" )[ 0 ];
      eList.style.display = 'none';
      eList.style.position = 'absolute';
            
      // Get list foot
      var eListFoot = eList.nextSibling;
      while ( eListFoot.tagName == null )
         eListFoot = eListFoot.nextSibling;
         
      // Set list foot style
      eListFoot.style.position = 'absolute';
      
      // Set onclick event on checkboxes
      SetEventOnDropdownChecklistCheckboxes( eList.parentNode );
   }
   
}

function CreateDropdownSelectOverlayElement( eSelectElement )
{
   // Create element
   var eSelectOverlayElement = document.createElement( "A" );
   eSelectOverlayElement.href = "javascript: void(0)";
   eSelectOverlayElement.style.display = "block";
   eSelectOverlayElement.style.position = "absolute";
   eSelectOverlayElement.style.outline = "none";
   eSelectOverlayElement.style.color = "#000";
   eSelectOverlayElement.style.textIndent = "6px";
   eSelectOverlayElement.style.zIndex = "3";
   
   // Insert overlay element
   eSelectElement.parentNode.insertBefore( eSelectOverlayElement, eSelectElement );
   
   // Set styles after rendering
   if ( window.event && navigator.userAgent.toLowerCase().indexOf('chrome') == -1 )
   {
      // IE
      eSelectOverlayElement.style.width = eSelectElement.clientWidth + 22 + 'px';
      eSelectOverlayElement.style.height = eSelectElement.clientHeight + 6 + 'px';
      
      // Create IFrame to make sure select overlay beats selectbox
      var eIFrameElement = document.createElement( "IFRAME" );
      
      if ( appVersion < 7 )
      {
         eSelectOverlayElement.style.width = eSelectElement.clientWidth - 2 + 'px';
         eSelectOverlayElement.style.height = eSelectElement.clientHeight - 2 + 'px';
         eSelectOverlayElement.style.border = "1px solid ThreeDShadow";

         eIFrameElement.style.width = eSelectElement.clientWidth + 'px';
         eIFrameElement.style.height = eSelectElement.clientHeight + 'px';
      }
      else
      {
         eIFrameElement.style.width = eSelectElement.clientWidth + 22 + 'px';
         eIFrameElement.style.height = eSelectElement.clientHeight + 6 + 'px';
      }
      
      eIFrameElement.style.position = "absolute";
      eIFrameElement.scrolling = "no";
      eIFrameElement.src = "Empty.htm";
      eIFrameElement.style.zIndex = "1";
      
      if ( appVersion >= 7 )
         eIFrameElement.style.filter = "alpha(opacity=0)";
         
      eSelectOverlayElement.parentNode.insertBefore( eIFrameElement, eSelectOverlayElement );
      
      // DO NOT REMOVE BACKGROUND IMAGE TYVM KTHXBIE
      eSelectOverlayElement.style.backgroundImage = "url()";
   }
   else
   {
      // Decent browsers
      eSelectOverlayElement.style.width = eSelectElement.clientWidth + 'px';
      eSelectOverlayElement.style.height = eSelectElement.clientHeight + 8 + 'px';
   }
   
   eSelectOverlayElement.style.lineHeight = eSelectOverlayElement.clientHeight + 'px';
   
   // Set onmousedown event
   eSelectOverlayElement.onmousedown = SelectOverlayMousedownHandler;
   
   // Get and strip text value from selectbox
   var sTextValue = eSelectElement.getElementsByTagName( "OPTION" )[ 0 ].innerHTML;
   eSelectElement.innerHTML = "";
   
   // Set text to overlay element
   eSelectOverlayElement.innerHTML = sTextValue;
}

SelectOverlayMousedownHandler = function( e )
{
   // Blur to remove ugly outline
   // (should already be handled by CSS outline: none, but just in case)
   this.blur();
   
   // Get list
   var eList = this.nextSibling;
   while ( eList.tagName == null || eList.tagName == "SELECT" )
      eList = eList.nextSibling;
      
   // Get list foot
   var eListFoot = eList.nextSibling;
   while ( eListFoot.tagName == null )
      eListFoot = eListFoot.nextSibling;
      
   // Hide active list
   var eActiveList = eActiveDropDownChecklist;
   HideActiveDropDownChecklist();
   if ( eActiveList == eList.parentNode )
      return;

   // Toggle list visibility
   if ( eList.style.display == 'none' )
   {
      // Show list
      eList.style.display = 'block';
 
      // Set top margin for list and list foot
      if ( window.event && navigator.userAgent.toLowerCase().indexOf('chrome') == -1 )
      {
         if ( appVersion < 7 )
         {
            eListFoot.style.marginTop = eList.clientHeight + 22 + 'px';
            eList.style.marginTop = this.clientHeight + 2 + 'px';
            eList.style.marginLeft = '-' + eList.clientWidth + 'px';
            eListFoot.style.marginLeft = '-' + eList.clientWidth + 'px';
         }
         else
         {
            eListFoot.style.marginTop = eList.clientHeight - 4 + 'px';
         }
      }
      else
      {
         eListFoot.style.marginTop = eList.clientHeight + 'px';
      }
         
      // Set list foot width
      eListFoot.style.width = eList.clientWidth + 6 + 'px';
      
      // Show list foot
      eListFoot.style.display = 'block';
      
      // Set active list to current
      eActiveDropDownChecklist = eList.parentNode;
   }
   else
   {
      // Hide list and foot
      eList.style.display = 'none';
      eListFoot.style.display = 'none';
      
      // Unset active list
      eActiveDropDownChecklist = null;
   }
}

function HideActiveDropDownChecklist()
{
   if ( eActiveDropDownChecklist == null )
      return;
        
   // Get list
   var eList = eActiveDropDownChecklist.getElementsByTagName( "DIV" )[ 0 ];
            
   // Get list foot
   var eListFoot = eList.nextSibling;
   while ( eListFoot.tagName == null )
      eListFoot = eListFoot.nextSibling;
      
   // Hide list
   eList.style.display = 'none';
   eListFoot.style.display = 'none';
   eActiveDropDownChecklist = null;
}

function SetEventOnDropdownChecklistCheckboxes( eList )
{
   if ( eActiveDropDownChecklist == null && eList == null )
      return;

   // Get array with checkboxes
   var aCheckboxes = null;
   if ( eList != null )
      aCheckboxes = eList.getElementsByTagName( "INPUT" );
   else
      aCheckboxes = eActiveDropDownChecklist.getElementsByTagName( "INPUT" );

   // Loop through checkboxes
   for ( var i=0; i<aCheckboxes.length; i++ )
   {
      if ( aCheckboxes[ i ].type == "checkbox" )
      {
         // Call Toggle function to update the count within selectbox
         ToggleDropdownChecklistCheckbox( aCheckboxes[ i ] );
         
         // Set event
         aCheckboxes[ i ].onclick = function()
         {
            ToggleDropdownChecklistCheckbox( this );
         }
      }
   }
}

function IncrementDropdownChecklistSelectboxCount( eSelect )
{
   // Get overlay element
   var eOverlay = eSelect.previousSibling;
   
   // Get count
   var originalCount = eOverlay.innerHTML.split( ' ' );
   originalCount = originalCount[ originalCount.length - 1 ];

   // Check if count has been set
   if ( originalCount.indexOf( '(' ) < 0 )
      originalCount = 0;
   else
   {
      // Fetch number from "(0)"
      originalCount = originalCount.substring( 1 );
      originalCount = originalCount.substring( 0, originalCount.length - 1 );
   }
   
   // Set count to + 1
   SetDropdownChecklistSelectboxCount( eSelect, parseInt( originalCount ) + 1 );
}

function DecrementDropdownChecklistSelectboxCount( eSelect )
{
   // Get overlay element
   var eOverlay = eSelect.previousSibling;
   
   // Get count from option HTML
   var originalCount = eOverlay.innerHTML.split( ' ' );
   originalCount = originalCount[ originalCount.length - 1 ];
   
   // Check if count has been set
   if ( originalCount.indexOf( '(' ) < 0 )
      originalCount = 0;
   else
   {
      // Fetch number from "(0)"
      originalCount = originalCount.substring( 1 );
      originalCount = originalCount.substring( 0, originalCount.length - 1 );
   }
   
   // Set count to - 1
   SetDropdownChecklistSelectboxCount( eSelect, parseInt( originalCount ) - 1 );
}

function SetDropdownChecklistSelectboxCount( eSelect, iCount )
{
   // Guard for negative numbers
   if ( iCount < 0 )
      iCount = 0;

   // Get overlay element
   var eOverlay = eSelect.previousSibling;
   
   // Get original count
   var originalCount = eOverlay.innerHTML.split( ' ' );
   originalCount = originalCount[ originalCount.length - 1 ];
   
   // Check if count has been set
   if ( originalCount.indexOf( '(' ) < 0 )
      originalCount = 0;
   else
   {
      // Strip count
      originalCount = originalCount.substring( 1 );
      originalCount = originalCount.substring( 0, originalCount.length - 1 );
      eOverlay.innerHTML = eOverlay.innerHTML.substring( 
         0, 
         ( eOverlay.innerHTML.length - 3 ) - originalCount.toString().length 
      );
   }
   
   // Build new option html
   var newInnerHTML = eOverlay.innerHTML;
   newInnerHTML = newInnerHTML + " (" + iCount + ")";
   eOverlay.innerHTML = newInnerHTML;
}

function ToggleDropdownChecklistCheckboxes( eLink )
{
   if ( eActiveDropDownChecklist == null )
      return;
   
   // Blur link to remove ugly outline
   eLink.blur();

   // Set vars
   var bNewChecked = true;
        
   // Get array of checkboxes
   var aCheckboxes = eActiveDropDownChecklist.getElementsByTagName( "DIV" )[ 0 ].getElementsByTagName( "INPUT" );

   // Set text / checked status
   if ( eLink.innerHTML == "Selecteer alles" )
   {
      eLink.innerHTML = "Deselecteer alles";
      bNewChecked = false;
   }
   else
   {
      eLink.innerHTML = "Selecteer alles";
      bNewChecked = true;
   }

   // Loop through checkboxes
   SetDropdownChecklistSelectboxCount( eActiveDropDownChecklist.getElementsByTagName( "SELECT" )[ 0 ], 0 );
   for ( var i=0; i<aCheckboxes.length; i++ )
   {
      if ( aCheckboxes[ i ].type == "checkbox" )
      {
         // Set new checked status
         aCheckboxes[ i ].checked = !bNewChecked;
         ToggleDropdownChecklistCheckbox( aCheckboxes[ i ] );
      }
   }
}

function ToggleDropdownChecklistCheckbox( eCheckbox )
{
   // Get selectbox
   var eSelect = eCheckbox.parentNode.parentNode.parentNode.getElementsByTagName( "SELECT" )[ 0 ];
   
   // Increment or decrement selectbox count depending on checked status
   if ( eCheckbox.checked )
      IncrementDropdownChecklistSelectboxCount( eSelect );
   else
      DecrementDropdownChecklistSelectboxCount( eSelect );
}