/**
 * Először létre kell hozni a tömböt, amiben deklaráljuk, hogy milyen választható értékek vannak.
 * <code>
 *   datas = new Array(
 *               "1::Muhaha1",
 *               "2::Muhaha2",
 *               "3::Muhaha3");
 * </code>
 * A következőben pedig meghívjuk a create_select_block-ot a következő paraméterekkel:
 *  - A blokk neve. Az input mező neve is ez lesz, ezen a néven érkezik majd be az adat.
 *  - A tömb, ami tartalmazza az adatokat.
 *  - A tömbben az elválasztó karakter a kulcs és az érték között. A form-ban a kulcs kerül elküldésre.
 *  - Az alapértelmezetten kijelölt adat.
 *  <script>
 *    datas = new Array(
 *                "1::Muhaha1",
 *                "2::Muhaha2",
 *                "3::Muhaha3");
 *    create_select_block('proba', datas, '::', '1');
 *  </script>
 */

/**
 * Az IE miatt szükség van a blokkok regisztrálására, mert amíg nem érkezik meg 
 * a </table> tag, addig a táblázatban elhelyezett kódott nem tudja kezelni. Pl a 
 * méretét nullának olvassa. Így ebbe a tömbbe kerül minden select és miután a 
 * </body> tag megérkezett, akkor reseteli az összeset.
 */
var blocks = new Array();

  /**
   * Ez jeleníti meg vagy tünteti el a választható listát.
   */
  function change_select_body_visible(name) {
    sh = document.getElementById(name+'_h');
    sb = document.getElementById(name+'_b');
    /* Az IE nem mutatot elemnek 0 szélességet ad, ezért láthatóvá kell tenni minden művelet előtt! */
		if(sb.style.display!='block') {
		  new_display      = 'block';
			sb.style.display = 'block';
	  } else {
		  new_display      = 'none';
		}
    posHeader        = findPos(sh);
    sb.style.top     = posHeader[1]+sh.offsetHeight+'px';
    sb.style.left    = posHeader[0]+'px';
    sh.style.width   = Math.abs(sb.offsetWidth-4)+'px';
    sb.style.display = new_display;
  }
  
  /**
   * Ez a fv változtatja meg a kiválasztott értéket.
   */
  function change_selected(name, key, value) {
    sh = document.getElementById(name+'_h');
    si = document.getElementById(name+'_i');
    si.value      = key;
    sh.innerHTML  = value;
    change_select_body_visible(name);
  }
  
  /**
   * Értelmezi a beérkezett a választható adatokat.
   */
  function parse_select_datas(datas, separator) {
    keys    = new Array();
    values  = new Array();
    for(i=0;i<datas.length;i++) {
      current = datas[i].split(separator);
      keys.push(current[0]);
      values.push(current[1]);
    }
    return new Array(keys, values);
  }
  
  /**
   * Regisztrál egy létrehozott blokkot.
   */
  function register_select_block(name) {
    blocks.push(name);
  }
  
  /**
   * Ez a fv hívódik meg abban az esetben, ha az oldal betöltődött:
   * <code>
   *   window.onload = init_blocks;
   * </code>
   * Az összes blokkot reseteli. Erre az Internet Explorer miatt van szükség, 
   * mert csak azután tud resetelni, miután már betöltődött minden. Mert ilyen 
   * szar az egész.
   */
  function init_blocks() {
    //alert(blocks.length);
    for(i=0;i<blocks.length;i++) {
      reset_select_block(blocks[i]);
    }
  }
  
  /**
   * A megadott nevű blokkot reseteli. Ez azt jelenti:
   *  - beállítja a méreteket
   *  - elrejti a válaszható menüt
   */
  function reset_select_block(name) {
    sh = document.getElementById(name+'_h');
    sb = document.getElementById(name+'_b');
    posHeader        = findPos(sh);
    sb.style.display = 'block';
    sh.style.width   = sb.offsetWidth+'px';
    sb.style.top     = posHeader[1] + sh.offsetHeight+'px';
    sb.style.left    = posHeader[0]+'px';
    sb.style.display = 'none';
  }
  
  /**
   * Létrehozza a választható mezőt.
   */
  function create_select_block(name, var_name, datas, separator, default_value, style, form_name) {
    aDatas = parse_select_datas(datas, separator);
    keys   = aDatas[0];
    values = aDatas[1];
    document.writeln('<div class="select" style="'+style+'">');
    document.writeln('  <div class="select_header" id="'+name+'_h" onClick="change_select_body_visible(\''+name+'\')"></div>');
    document.writeln('  <input type="hidden" name="'+var_name+'" value="" id="'+name+'_i"/>');
    document.writeln('  <div class="select_body" id="'+name+'_b" style="position:absolute;">');
    document.writeln('  <ul>');
    for(i=0;i<values.length;i++) {
      if(form_name!='') {
        form_submit = 'document.'+form_name+'.submit();';
      } else {
        form_submit = '';
      }
      document.writeln('      <li onClick="change_selected(\''+name+'\', \''+keys[i]+'\', \''+values[i]+'\');'+form_submit+'">'+values[i]+'</li>');
      if(keys[i]==default_value) {
        change_selected(name, keys[i], values[i]);
      }
    }
    document.writeln('  </ul>');
    document.writeln('  </div>');
    document.writeln('</div>');
    // alaphelyzetbe állítja a blokkot
    reset_select_block(name);
    /**
     * IE alatt amíg nincs betöltve a teljes oldal, nem tudja alaphelyzetbe 
     * állítani, így azt először regisztrálja, majd az oldal betöltődése után a 
     * regisztrált elemeket reseteli.
     */
    if(document.all) {
      // Regisztrálja a blokkot
      register_select_block(name);
      window.onload = init_blocks;
    }
  }
  
function findPos(obj)
{
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft;
		curtop = obj.offsetTop;
	  while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
	return [curleft,curtop];
}