/**
 * Steps:
 *
 * 1. Output a drupal select box by default so that if js is turned off the user would have a normal dropdown + submit form
 * 2. Give drupal a class of "jquery_dropdown"
 * 3. Have jquery convert it to a hidden input and hide the submit
 * 4. Have jquery grab all the key/values from the select build the css/html markup that 'looks' like a dropdown
 * 5. Add a listener so when an item gets selected and populate the hidden value and submit the form to achieve the same functionality
 *
 **/
$(document).ready(function() {
  //this does the actual css/html replacement of the select dropdown
  $("select.jquery_dropdown").each(function(){
    $(this).load_jquery_dropdown();//load jquery dropdowns
  });
});

/**
 * Load jquery dropdown for a select
 *
 * This is a re-usable function for select elements that don't have the .jquery_dropdown class
 */
$.fn.load_jquery_dropdown = function(options) {
  if (!$(this).html() || $(this).hasClass('jquery_dropdown_processed')) return;

  $(this).hide();//hide this select

  //hide elements with jquery_dropdown class (in case you want to hide the submit button for instance)
  //for a better hide we have included .jquery_dropdown { display: none; } in the default css which keeps
  //the select from "flashing" on and off, the noscript tag inserted in hook_footer() keeps it from hiding
  //those elements when javascript is disabled to make it degrade gracefully
  $(".jquery_dropdown").hide();

  var select_id = $(this).attr('id');
  var select_name = $(this).attr('name');
  var select_default_value = $(this).val();
  var select_default_text = $(this).find('option[value='+select_default_value+']').text();

  var select_values = new Array();
  var c = 0;

  var output = '<div class="jquery_dropdown_container jquery_dropdown_'+select_id+'">';

  var is_jumpdown = ($(this).attr('class').match("jquery_dropdown_jump")) ? 1 : 0;//for adding jump class if applicable

  //start with the first option
  output += '<div class="jquery_dropdown_header jquery_dropdown_header_'+select_id+'">'+$(this).find("option:first").text()+'</div>';
  output += '<ul class="jquery_dropdown_list '+((is_jumpdown) ? 'jquery_dropdown_jump' : '') +'">';//start unordered list

  //build <ul> list here
  $(this).find("option").each(function(){
    output += '<li><a href="#" class="'+select_id+'" rel="'+$(this).val()+'">'+$(this).text().replace(/ /g, '&nbsp;')+'</a></li>';

    c++;
  });

  output += '</ul></div>';

  $(this).after(output);

  //this is the click event for when you click the fake select, it shows the options below
  $("div.jquery_dropdown_header_"+select_id).click(function(){
    $container = $(this).parent("div.jquery_dropdown_container");
    $dropdown = $container.find("ul.jquery_dropdown_list");
    if ($dropdown.is(":hidden")) {
      $dropdown.show();
      $container.removeClass('jquery_dropdown_expanded');
    }
    else {
      $dropdown.hide();
      $container.addClass('jquery_dropdown_expanded');
    }
  });

  //this is the event for when you select a fake option
  $("ul.jquery_dropdown_list li a").click(function(){

    $(this).parent("li").parent('ul').parent("div.jquery_dropdown_container").find("div.jquery_dropdown_header").text($(this).text());
    $(this).parent("li").parent('ul').parent("div.jquery_dropdown_container").find("ul.jquery_dropdown_list").hide();

    $("#"+$(this).attr('class')).val($(this).attr('rel'));//set value to select

    $(this).trigger("jquery_dropdown_list_refreshed");//trigger the onchange event of our drop down when we click a fake option
    $('#'+select_id).trigger("onchange");

    return false;
  });

  //hide when mouse out
  $("ul.jquery_dropdown_list").hover(function(){}, function(){
    $(this).hide();
    $(this).parent("div.jquery_dropdown_container").removeClass('jquery_dropdown_expanded');
  });

  //set initial header value
  $("div.jquery_dropdown_header_"+select_id).text(select_default_text);
  $(this).addClass('jquery_dropdown_processed');
};