/**
 *
 * @param {jQuery} selectToReplace элемент SELECT для замены
 * @param {function} onChange обработчик изменения
 */
function selectReplacement( selectToReplace, onChange )
{
	selectToReplace.addClass('replaced')

	/** @type jQuery элемент UL, который будет замещать SELECT */
	var ul = $('<ul id="' + selectToReplace.attr('id') + 'Replaced"' + ' class="selectReplacement ' + selectToReplace.attr('class') + '"></ul>')
	ul.hover(
		function ()
		{
			$(this).addClass('hover')
		},
		function ()
		{
			$(this).removeClass('hover')
		}
	)

	var nameLI = $('<li class="name"><span></span></li>')
	nameLI.appendTo(ul)

	var position = 0
	$('option', selectToReplace).each(
		function ()
		{
			var newLI = $('<li class="option"><span>' + $(this).text() + '</span></li>')
			var currentPosition = position
			var optionText

			newLI.click(
				function ()
				{
					if( $(this).text().length > 0 )
						optionText = $(this).text()
					else
						optionText = $('option', selectToReplace).val()
					
					$('span', nameLI).text( optionText )

					$('option', selectToReplace).removeAttr('selected')

					var currentOption = $('option', selectToReplace).eq(currentPosition)
					onChange( currentOption.val() )

//					currentOption.attr('selected', 'true')
//
//					selectToReplace.val( currentOption.val() )

					ul.removeClass('hover')

					return false
				}
			)
			newLI.hover(
				function ()
				{
					$(this).addClass('hover')
				},
				function ()
				{
					$(this).removeClass('hover')
				}
			)

			newLI.appendTo(ul)

			if ( $(this).attr('selected') )
			{
				newLI.click()
			}

			position++
		}
	)

	ul.appendTo( selectToReplace.parent() )
}