/**
 * Dynamic select list options
 * Example:
 * LIST 1 Values 'a','b','c'
 * LIST 2 Values 'a-1','a-2','b-3','c-2','c-4'
 * ==> After Refresh LIST 2 values '1','2' if SL1 = 'a' -- OR -- '3' if SL1 = 'b'  ..........
 * CloneOptions always Values 'a-1','a-2','b-3','c-2','c-4'
 *
 * This file is part of the evoCore framework - {@link http://evocore.net/}
 * See also {@link https://github.com/b2evolution/b2evolution}.
 * @version $Id: dynamic_select.js 8373 2015-02-28 21:44:37Z fplanque $
 */

/**
* Called by window.onload event
* Initialize all parent_child selects lists of the form
*/
function init_dynamicSelect()
{
for( var i = 0; i < nb_dynamicSelects ; i++)
{
dynamicSelect( tab_dynamicSelects[i]['parent'], tab_dynamicSelects[i]['child'] );
}
}

/**
 * Initialize select lists
 *
 * You need to use it to handle parent_child select lists
 * This will clone all select options in order to reuse a filtered subset later, depending on the parent selection.
 * This will also add the onchange handler on the parent
 *
 * @param parent select list
 * @param child select list
 */
function dynamicSelect( id1, id2 )
{
// Feature test to see if there is enough W3C DOM support
if (document.getElementById && document.getElementsByTagName)
{
// Obtain references to both select boxes
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Clone the dynamic select box
var clone = sel2.cloneNode(true);
// Obtain references to all cloned options
var clonedOptions = clone.getElementsByTagName("option");
// Onload init: call a generic function to display the related options in the dynamic select box
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function()
{
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
}
}
}


/**
 * Refresh the child select list when the parent changes.
 *
 * @param parent select list
 * @param child select list
 * @param clone of the child select list initialized
 */
function refreshDynamicSelectOptions( sel1, sel2, clonedOptions )
{
// Delete all options of the dynamic select box
while( sel2.options.length )
{
sel2.remove(0);
}
// Regular expression to test if the value of a cloned option begins with the value of the selected option of the main select box
var pattern1 = new RegExp( "^" + sel1.options[sel1.selectedIndex].value + "-.*$" );

// Regular expression to keep only the second part(X2) of the value "X1-X2"
//var pattern2 = new RegExp( "^.*-(.*)$" );

// Iterate through all cloned options
for( var i = 0, j = 0; i < clonedOptions.length; i++ )
{
// If the value of a cloned option begins with the value of the selected option of the main select box
if ( clonedOptions[i].value.match( pattern1 ) || clonedOptions[i].value == '' )
{
// Clone the option from the hidden option pool and append it to the dynamic select box
sel2.appendChild( clonedOptions[i].cloneNode( true ) );

// keep only the second part of value if exist (pattern 2)
// val = sel2.options[j].value.match( pattern2 );
//if (val) sel2.options[j].value = val[1];
//j++; //indice options in the new list SL2
}
}
}