// Select Style
// ver 0.3
// April 20, 2011


var SelectStyle = function(style_class) {

	var _default_value 		= '';
	var _default_display 	= '';

	/**
	 * Constructor
	 */	
	var _init = function() {
	
		if (((navigator.userAgent).indexOf("iPhone") > 0) || ((navigator.userAgent).indexOf("iPad") > 0)) {
			return true;
		}
		
		var style_class = style_class || '.select_style';
		
		// Replace each select with styled version
		$(style_class).each(_select_style);
		
		// Bind behavior functions to new select items
		$('.select_group DIV').click(_select_group_toggle);
		$('.select_group UL LI').click(_select_group_copy);
	}
	
	/**
	 * Function to toggle new select menus
	 */
	var _select_group_toggle = function() {
		
		var target = $(this).closest('FIELDSET').find('UL');
		
		if (target.is(':hidden')) {
			$('.select_menu:visible').slideUp('fast');
			target.slideDown('fast');
		} else {
			target.slideUp('fast');
		}

		$(this).closest('FIELDSET').find('DIV').toggleClass('open');
	};
	
	/**
	 * Function to control data selection
	 */
	var _select_group_copy = function() {
	
		var input      = $(this).closest('FIELDSET').find('SELECT');
		var div_target = $(this).closest('FIELDSET').find('DIV');

		// Copy value to div and input field
		input.val($(this).attr('my_value'));
		div_target.html($(this).html());
		
		input.trigger('change');
		
		// Check auto submit
		if (input.hasClass('auto_submit')) {
			$(this).parents('FORM').submit();
			return;
		}
		
		div_target.addClass('active');
		div_target.removeClass('open');
	
		// Hide menu
		$(this).parent('UL').slideUp('fast');
	};

	/**
	 * Function to replace select with styled version
	 */
	var _select_style = function() {
		
		var select       = $(this);
		var select_name  = select.attr('name');
		var select_id  	 = select.attr('id') || '';
		var options      = '';
		var this_default = ''
		var div_class    = '';
	
		// Set default values	
		$('OPTION:selected', select).each(function() {
			_default_value 		= $(this).val();
			_default_display 	= $(this).html();
		});
	
		// Get options from select element
		$('OPTION', select).each(function() {		
			options += '<li my_value="' + $(this).attr('value') + '">' + $(this).html() + '</li>';
		});

		// Check auto select
		var input_class = '';
		if (select.hasClass('auto_submit')) {
			input_class = 'auto_submit';
		}
		
		var new_content = '<div class="text select_target '+ div_class +'">'+ _default_display +'</div>' +
						  '<ul class="select_menu">'+ options +'</ul>';

		select.wrap('<fieldset class="select_group"></fieldset>').hide();
		
		var fs = select.closest('FIELDSET');
		
		fs.append(new_content);

	};

	_init();
}

$(document).ready(function() {
	new SelectStyle();
});