var csHtml  = '<div class="csReplacementSelectWrapper">';
	csHtml += '<span class="csTitleWrapper"><span class="csTitle"></span></span>';
	csHtml += '<div class="csOptionsWrapper">';
	csHtml += '<div class="csOptionsInnerWrapper">';
	csHtml += '<ol class="csOptions">';
	csHtml += '</ol></div></div></div>';

(function($)
{
	$.fn.customSelect = function(options)
	{
		this.each(function()
		{
			var cs = {
				container:		null,
				dimensionX:		200,
				element:		$(this),
				ieVersion: 		null,
				isIE:			false,
				options:		{},
				replacement: 	null,
				resized:		false,

				close: function()
				{
					$('.csOptionsWrapper', this.replacement).hide();
					this.element.removeClass('active');
					$('.csReplacementSelectWrapper .csOptionsWrapper, ol.csOptions, ol.csOptions li, ol.csOptions li a').css('z-index', 1);
					$('.csReplacementSelectWrapper').css('position', 'relative');
				},

				detectBlur: function()
				{
					$(document).click(function()
					{
						cs.close();
					});
				},

				detectBrowser: function()
				{
					if (jQuery.browser.msie)
					{
						this.isIE = true;

						if (/6.0/.test(navigator.userAgent))
						{
							this.ieVersion = 6;
						}
						else if (/7.0/.test(navigator.userAgent))
						{
							this.ieVersion = 7;
						}
						else if (/8.0/.test(navigator.userAgent))
						{
							this.ieVersion = 8;
						}
					}
				},

				handleOptionGroup: function(group)
				{
					var groupHtml  = '<li class="csGroupList"><strong>' + group.label + '</strong>';
						groupHtml += '<ol>';

					$(group).children().each(function()
					{
						groupHtml += cs.handleOption(this);
					});

					groupHtml += '</ol></li>';

					return groupHtml;
				},

				handleOption: function(option)
				{
					var selectedClass = (this.element.val() == $(option).val()) ? ' class="selected"' : '';

					return '<li class="csOptionRow"><a href="#" rel="' + option.value + '"' + selectedClass + '>' + $(option).text() + '</a></li>';
				},

				doConfig: function()
				{

				},

				init: function()
				{
					this.detectBrowser();

					if (this.isIE)
					{
						this.render();
						this.replacement.click(function()
						{
							cs.open();

							return false;
						});
						this.monitor();
						this.detectBlur();
					}
				},

				makeSelection: function(selected)
				{
					$('ol li.csOptionRow a', this.replacement).removeClass('selected');
					$(selected).addClass('selected');
					$(this.element).val(selected.rel);
					$('.csTitle', this.replacement).text($('option:selected', this.element).text());
					this.close();
				},

				monitor: function()
				{
					$('ol li.csOptionRow a', this.replacement).click(function()
					{
						cs.makeSelection(this);
						return false;
					});
				},

				open: function()
				{
					$('.csOptionsWrapper').hide();
					this.element.addClass('active');
					$('.csOptionsWrapper', this.replacement).show();
					$('.csReplacementSelectWrapper').css('position', 'static');
					this.replacement.css('position', 'relative');
					$('.csReplacementSelectWrapper', this.replacement).css('position', 'static');
					$('.csReplacementSelectWrapper .csOptionsWrapper, ol.csOptions, ol.csOptions li, ol.csOptions li a').css('z-index', 100000);

					if (!this.resized)
					{
						var optionsListSize = $('ol.csOptions', this.replacement).width();

						this.resized = true;

						if (this.isIE && this.ieVersion == 6)
						{
							$('ol.csOptions', this.replacement).css('width', optionsListSize + 'px');

							$('ol.csOptions li.csOptionRow', this.replacement).css('width', optionsListSize + 'px');
							$('ol.csOptions li.csGroupList', this.replacement).css('width', optionsListSize + 'px');
							$('ol.csOptions li.csOptionRow>a', this.replacement).css('width', (optionsListSize) + 'px');

							$('ol.csOptions ol li.csOptionRow', this.replacement).css('width', (optionsListSize - 30) + 'px');
							$('ol.csOptions ol li.csOptionRow>a', this.replacement).css('width', (optionsListSize - 30) + 'px');
						}
						else
						{
							$('ol.csOptions', this.replacement).css('width', optionsListSize + 'px');

							$('ol.csOptions li.csOptionRow', this.replacement).css('width', optionsListSize + 'px');
							$('ol.csOptions li.csGroupList', this.replacement).css('width', optionsListSize + 'px');
							$('ol.csOptions li.csOptionRow>a', this.replacement).css('width', (optionsListSize - 6) + 'px');

							$('ol.csOptions ol li.csOptionRow', this.replacement).css('width', (optionsListSize - 21) + 'px');
							$('ol.csOptions ol li.csOptionRow>a', this.replacement).css('width', (optionsListSize - 21) + 'px');
						}
					}
				},

				render: function()
				{
					var optionsHtml = '';

					this.container = this.element.parent();

					this.setDimensions();
					this.container.append(csHtml);
					this.element.hide();

					this.replacement = this.container.children('.csReplacementSelectWrapper');

					this.element.children().each(function(i)
					{
						optionsHtml += (this.label.length > 0) ? cs.handleOptionGroup(this) : cs.handleOption(this);
					});

					$('ol.csOptions', this.replacement).prepend(optionsHtml);
					$('.csTitle', this.replacement).text($('option:selected', this.element).text());
					this.replacement.width(this.dimensionX);
				},

				setDimensions: function()
				{
					this.dimensionX = this.element.outerWidth();
				}
			};

			cs.init();
		});
	};
})(jQuery);

jQuery(document).ready(function()
{
	if (jQuery('.customSelect').length > 0) jQuery('.customSelect').customSelect();
});