/**
 * 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()) 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_name_nice = select_name.replace(/\[[^\"]+/,'');//strip out []
  var select_default_value = $(this).val();
  var select_default_text = $(this).find('option[value='+select_default_value+']').text();
  
  var open = false;
  var label = $('label[for='+select_id+']').text().replace(':','');
  if($('#'+select_id).attr('title') != '')
  {
  	label = $('#'+select_id).attr('title');
  }
  
  var select_values = new Array();
  var c = 0;
  
  var output = '<div class="jquery_dropdown_container jquery_dropdown_'+select_name_nice+'">';
  
  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_name_nice+'" id="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(){
    if($(this).val() != -1)//  && $(this).val() != select_default_value)
    {    	
    	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_name_nice).click(function(){
    
    if ($(this).parent("div.jquery_dropdown_container").find("ul.jquery_dropdown_list").css('display') == 'block') {
      $(this).parent("div.jquery_dropdown_container").find("ul.jquery_dropdown_list").slideUp('fast');//attr('style', 'display:hidden');
      $(this).parent("div.jquery_dropdown_container").find("div.jquery_dropdown_header").text( $("#"+select_id+" option:selected").text());
      open = false;
    }
    else {
      $(this).parent("div.jquery_dropdown_container").find("ul.jquery_dropdown_list").slideDown('fast');//attr('style', 'display:block');
      $(this).parent("div.jquery_dropdown_container").find("div.jquery_dropdown_header").text(label);
      open = true;
    }
  });
  
  //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").slideUp('fast');

    $("#"+$(this).attr('class')).val($(this).attr('rel'));//set value to select
    
    $(this).trigger("jquery_dropdown_list_refreshed");
    $('#'+select_id).trigger("onchange");
    
    return false;
  });
  
  $('body').click(function(event){
  
	var target_id = $(event.target).attr('id');
	
	//console.log($("div.jquery_dropdown_header_"+select_name_nice).attr(ÕidÕ));
	if( target_id != 'jquery-dropdown-header-'+select_id )
	{
		if( open )
		{ 
			$("#jquery-dropdown-header-"+select_id).parent().find("ul.jquery_dropdown_list").slideUp('fast');
			$("#jquery-dropdown-header-"+select_id).parent().find("div.jquery_dropdown_header").text( $("#"+select_id+" option:selected").text());
		}
	}
	
	/*if($("#"+select_id).parent().find("ul.jquery_dropdown_list:visible"))
  	{  		
  		$("#"+select_id).parent().find("ul.jquery_dropdown_list").hide();
  		
  		if($("#"+select_id).parent().find("div.jquery_dropdown_header").text()==$('label[for='+select_id+']').text())
  		{
  			$("#"+select_id).parent().find("div.jquery_dropdown_header").text(select_default_value);
  		}
  	}*/
  });
  //hide when mouse out
  /*$("ul.jquery_dropdown_list").hover(function(){}, function(){
    $(this).hide();
  });*/

  //set initial header value
  $("div.jquery_dropdown_header_"+select_name_nice).text(select_default_text);
};