/*
 *	Special selector generator v1.0b by Andrei Nemeti.
 *	This uses jQuery, so make sure is loaded
 *	Use this to replace normal <select> boxes with a styled one
 *	Usage: at the end of the page you have select boxes, call the function replace_selectors(list of names of select boxes)
 */

function replace_selectors(){													//replace selector specified as parameters with special selectors
	var items = replace_selectors.arguments.length;								//get the list of names
	for (i = 0;i < items;i++){
		replace_selector(replace_selectors.arguments[i]);						//create the special selector
	}
	create_special_selector_listeners();
	return true;
}

function replace_selector(selector_name){										//this replaces one select with a special select based on the select name
	jQuery('select[name='+selector_name+']').wrap('<div id="sselector_'+selector_name+'"/> ');
	var wrapper = 'sselector_'+selector_name;

	//if the select has an onchange event, get it and use it
	var onchange = jQuery('select[name='+selector_name+']').attr('onchange');
	if(typeof(onchange) == "undefined") onchange="";
	onchange = onchange+"";
	onchange = onchange.replace("function onchange(event) {","");
	onchange = onchange.substr(0,onchange.lastIndexOf('}'));
	//end onchange parse - see below
	
	//get the class and style if any
	var classes = jQuery('select[name='+selector_name+']').attr('class');
	var styles = jQuery('select[name='+selector_name+']').attr('style');
	//end get class and style
	
	var selector ='<div class="special_selector">';
	selector = selector + '<input class="value_display" name="display_'+selector_name+'" type="text" readonly="readonly" value="'+jQuery('select[name='+selector_name+']').val()+'" /><div class="special_selector_button"></div>'
	selector = selector + '<input class="value_holder" type="hidden" name="'+selector_name+'" value="'+jQuery('select[name='+selector_name+']').val()+'" />';
	selector = selector + '<div class="special_selector_values" tabindex="-1">';

	jQuery('select[name='+selector_name+']').children('option').each(function(){
		selector = selector + '<div value="'+jQuery(this).val()+'">'+jQuery(this).html()+'</div>';
	});

	selector = selector + '</div></div>';
	
	jQuery('#'+wrapper).html(selector);

	//if the onchange event was set, use it
	if(onchange!='')
		jQuery('#'+wrapper+' input[name='+selector_name+']').change(function(){
			eval(onchange);
		});
	//end of onchange bind
	
	//add classes and styles if set
	jQuery('#'+wrapper+' input[name=display_'+selector_name+']').addClass(classes);
	jQuery('#'+wrapper+' input[name=display_'+selector_name+']').attr('style',styles);
	//end add classes and styles if set
	
	//jQuery('select[name='+selector_name+']').remove();
}

function create_special_selector_listeners(){									//these are the listeners for the special selectors
	// hack for ie - if you remove this code the opened values list will go under next special selectors
	var zindex = 2;
	jQuery('div.special_selector').each(function(){
		zindex++;
	}).each(function(){
		jQuery(this).css('zIndex',zindex);
		zindex--;
	});
	//end hack for ie

	var special_selector_active = false;
	jQuery('div.special_selector > div.special_selector_values').slideUp(50);
	jQuery('div.special_selector > div.special_selector_button').unbind('click').click(function(){
		jQuery(this).parent().children('input.value_display').focus();
	});
	jQuery('div.special_selector > input').focus(function(){
		jQuery(this).parent().children('div.special_selector_values').slideDown(100);
	}).blur(function(){
	if(!special_selector_active)
		jQuery(this).parent().children('div.special_selector_values').slideUp(50);
	});
	jQuery('div.special_selector > div.special_selector_values').unbind('mouseenter').mouseenter(function(){
		special_selector_active = true;
	}).mouseleave(function(){
		special_selector_active = false;
	}).blur(function(){
		if(!special_selector_active) jQuery(this).slideUp(50);
	});
	jQuery('div.special_selector > div.special_selector_values > div').unbind('click').click(function(){
		jQuery(this).parent().parent().children('input.value_holder').val(jQuery(this).attr('value'));
		jQuery(this).parent().parent().children('input.value_display').val(jQuery(this).html());
		jQuery(this).parent().slideUp(50);
		jQuery(this).parent().parent().children('input.value_holder').change();		//trigger the onchange event of the input that holds the value
	});
	// fill the special selector with the post value if any
	jQuery('div.special_selector > input.value_display').each(function(){
		if(jQuery(this).val() != ''){
			jQuery(this).val(jQuery(this).parent().children('div.special_selector_values').children('div[value='+jQuery(this).val()+']').html());
		}
	});
	//end fill special selector upon post
}

/*
 * end of special selector
 */