function pixelToInt (pixels)
{
	pixels	= new Number (pixels.split('px').join(''));
	
	if (isNaN (pixels))
	{
		pixels	= 0;
	}
	
	return parseFloat(pixels);			
}

function sbFormSkin ()
{
	$('div.lbFrame select')
	.filter (':not(.sissyboy-form-field)')
	.addClass ('sissyboy-form-field')
	.css ({visibility: 'hidden', zIndex: -1, position: 'absolute'})
	.each (
		function ()
		{
			var select	= $(this);
			
			var wrapper	= $('<div></div>').addClass ('sissyboy-form-selectWrapper').insertBefore (select);
			var inner	= $('<div></div>').addClass ('sissyboy-form-selectInner').appendTo (wrapper);
			var content	= $('<div></div>').addClass ('sissyboy-form-selectContent').appendTo (inner);
			var options = $('<div></div>').addClass ('sissyboy-form-selectOptions').appendTo (wrapper);
			
			var sWidth	= select.css ('width');
			
			if (sWidth)
			{
				sWidth	= pixelToInt (select.css ('width'));
				
				if (sWidth > 0)
				{
					inner.css ('width', pixelToInt (select.css ('width')) - 6);
				}
			}

			if ($(':selected', select).length > 0)
			{
				content.text ($(':selected', select).text ());
			}
			options.css('width',sWidth);

			inner.click (
				function ()
				{
					$(options).empty ().css('height','auto');
					l_HasScrollbar = ($(options).height() > 200);
					var optionsInner = $('<div></div>').addClass('sissyboy-form-selectOptions-inner').css('height','auto').appendTo(options);
					$('option', select).each (
						function ()
						{
							var text	= $(this).text ();
							var val		= $(this).val ();
							var option	= $('<div></div>').addClass ('sissyboy-form-selectOptions-li').text (text)
							.attr ('rel', val)
							.click (
								function ()
								{
									var value	= $(this).attr ('rel');
									l_Options = select.find('option').each(
										function()
										{
											if ($(this).val() == value)
												$(this).attr('selected','selected');
											else
												$(this).attr('selected','');
										}
									);
//									$('option[value=' + value + ']', select).attr ('selected', 'selected');
									select.trigger ('change');

									content.text ($(this).text ());
									$(options).hide ();
								}
							)
							.appendTo (optionsInner)
							.mouseover(
								function()
								{
									$(this).addClass('hover');
								}
							).mouseout(
								function()
								{
									$(this).removeClass('hover');
								}
							);
							if (l_HasScrollbar)
								option.css('width',option.Width() - 15);
							if ($(this).attr ('selected') == true)
							{
								option.addClass ('selected');
							}
						}
					);
					if($(options).height() > 200) 
					{	
						$(options).css('height',200);
						sbAddScrollbar(options);
					}
					
					if ($(options).is (':visible'))
					{
						$(options).hide ();
					}
					else
					{
						$('.sissyboy-form-selectOptions').hide ();
						$(options).slideDown (
							function ()
							{
								$(document).mousedown(
									function (event)
									{
										if (	$(event.target).hasClass ('sissyboy-form-selectOptions-li') == false 
											&& $(event.target).hasClass ('sissyboy-form-selectContent') == false
											&& $(event.target).hasClass ('ui-slider-handle') == false
											&& $(event.target).hasClass ('ui-slider') == false)
										{
											options.hide ();
											$(document).unbind ('mousedown');
										}
//										if (! $(event.target).hasClass('sissyboy-form-selectOptions') )
											
									}
								);
							}
						);
					}
				}
			);
		}
	);
};


function sbAddScrollbar(a_Element)
{
	l_OuterElement = $(a_Element);
	if (l_OuterElement.children().length == 0) return;
	
	l_InnerElement = $(l_OuterElement.children()[0]);
	l_InnerElement.wrap($('<div class="sissyboy-form-selectOptions-wrapper"></div>'));
	l_WrapperElement = $(l_OuterElement.children()[0])
		.css('height',l_OuterElement.height())
		.css('overflow','hidden');
		
	l_Collection = l_OuterElement.find('.sbScrollbar');
	if (l_Collection.length == 0)
		l_Scrollbar = $('<div class="sbScrollbar"></div>').prependTo(l_OuterElement);
	else
		l_Scrollbar = $(l_Collection[0]);
	
	l_Scrollbar
		.css('height',l_OuterElement.height() + 'px')
		.slider({
			min: 0,
			max: 100,
			value: 100,
			orientation: 'vertical',
			slide: function(e, ui){
				l_Difference = l_InnerElement.height() - l_OuterElement.height();
				l_Percentage = (100 - ui.value) / 100;
				l_Margin = l_Percentage * l_Difference;
				l_Handle = $($(this).children()[0]);
				l_Handle.css('margin-bottom',-l_Handle.height() * (1-l_Percentage));
				l_WrapperElement.scrollTop(Math.floor(l_Margin));
			},
			change: function(e, ui){
				l_Difference = l_InnerElement.height() - l_OuterElement.height();
				l_Percentage = (100 - ui.value) / 100;
				l_Margin = l_Percentage * l_Difference;
				l_Handle = $($(this).children()[0]);
				l_Handle.css('margin-bottom',-l_Handle.height() * (1-l_Percentage));
				l_WrapperElement.scrollTop(Math.floor(l_Margin));
			}
		});
	l_OuterElement.css('overflow','hidden');
	l_OuterElement.mousewheel(function(e,delta){
		l_Scrollbar.slider('value', Math.round(l_Scrollbar.slider('option','value') + delta * 3));
	});
	return l_Scrollbar;
}