function getY(oElement)
{
  var iReturnValue = 0;

  while ($(oElement) != null)
  {
    iReturnValue += $(oElement).offsetTop;
    oElement = $(oElement).offsetParent;
  }

  return iReturnValue;
}

var FancyForm = {

  start: function(elements, options)
  {
    if ($type(elements) != 'array')
    {
      elements = $$('input');
    }

    if (!options)
    {
      options = [];
    }

    selects = $$('select');

    var keeps = new Array();

    FancyForm.sels = selects.filter(function(sel)
    {
      if ($type(sel) != 'element')
      {
        return false;
      }
      return true;
    }.bind(keeps));

    FancyForm.sels = FancyForm.sels.merge(keeps);

    FancyForm.sels.each(function(sel)
    {
      s = new Element('div',
      {
        'class':  'select',
        'id': 'field_' + sel.getProperty('name')
      }).injectBefore(sel);

      new Element('img',
      {
        'styles':
        {
          'float':  'right'
        },
        'src':  'img/ik_down.gif',
        'alt':  ''
      }).injectInside(s);

	  var labelText = sel.options[0].text;

      var span = new Element('span').setText(labelText).injectInside(s);

	  optionsContainer = new Element('div',
      {
        'styles':
        {
          'display':  'none'
        },
        'id':     'options_' + sel.getProperty('name'),
        'class':  'select_options'
      }).injectInside($('selcontainer').parentNode);

      for (i = 1; i < sel.options.length; i++)
      {
        var opt = new Element('div',
        {
          'class':  'select_option'
        });

        var anchor = new Element('a', {'href': sel.options[i].value}).setText(sel.options[i].text).injectInside(opt);

		anchor.addEvent('click', FancyForm.close);

        opt.injectInside(optionsContainer);
      }

      s.addEvent('click', FancyForm.open);

      sel.parentNode.removeChild(sel);
    });
  },

  open: function(event)
  {
    var event = new Event(event);

    var clickedEl = $(event.target);

    if (clickedEl.getTag() != "div")
    {
      clickedEl = clickedEl.getParent();
    }

    var coordinates = clickedEl.getCoordinates();

    var menu = $("options_" + clickedEl.getProperty('id').replace("field_", ""));

    if (menu.getStyle('display') == 'block')
    {
      menu.setStyles(
      {
        'display':  'none'
      });
    }
    else
    {
      menu.setStyles(
      {
        'display':  'block',
        'position': 'absolute',
        'top':      getY(clickedEl) - 200,
        'left':     coordinates.left,
        'z-index':  99999999
      });
    }
  },

  close: function(event)
  {
	  $$('.select_options').each(function(el)
	  {
		  el.setStyle('display', 'none');
	  });
  }
}

window.addEvent('domready', function(){
  FancyForm.start();
});