/*==================================================================================================================*\
	INPUT FILE CUSTOMIZE

	### structure
	<div class="iSelect">
		<ul class="optionlist">
			<li data-select-item="1" data-select-value="1" class="option">Option 1</li>
			<li data-select-item="2" data-select-value="2" class="option">Option 2</li>
		</ul>
		<div class="option-current">Option 1</div>
		<select>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
		</select>
	</div>
\*==================================================================================================================*/
/**

**/

$.fn.selectbox = function(options) {
	/* Default settings */
	var settings = {
		iSelect				: 'iSelect',
		iSelectHover		: 'iSelect-hover',

		animationSpeed		: 'normal',
		listboxMaxSize		: 10,
		replaceInvisible	: false,
		
		skipFirstItem       : false 
	};

	/* Processing settings */
	settings = $.extend(settings, options || {});

	/* Wrapping all passed elements */
	return this.each(function(k) {
		var iSelectRand = settings.iSelect + '_' + k,
			listOpen = false,
			firstRemoved = false,
			showList = function(listObj) {
				var selectbox = listObj.parents('#' + iSelectRand);
				if (!firstRemoved)
				{
					listObj.find('li:first').remove();
					firstRemoved = true;
				}
				listObj.slideDown(settings.animationSpeed, function() {
					listOpen = true;
				});

				$(document).bind('click', onBlurList);
				return listObj;
			},
			hideList = function(listObj) {
				var selectbox = listObj.parents('#' + iSelectRand);

				listObj.slideUp(settings.animationSpeed, function() {
					listOpen = false;
				});

				$(document).unbind('click', onBlurList);

				selectbox
					.removeClass(settings.iSelectHover)
					.addClass(settings.iSelect);

				return listObj;
			},
			onBlurList = function(e) {
				var trgt				= e.target,
					currentListElements	= $('.optionlist:visible').parent().find('*').andSelf();

				if ($.inArray(trgt, currentListElements) < 0 && listOpen) {
					hideList($('.optionlist'));
				}

				return false;
			},

		_this		= $(this),
		replacement	= $('<div id="' + iSelectRand + '" class="' + settings.iSelect + '">' +
							'<ul class="optionlist"></ul>' +
							'<div class="option-current"></div>' +
						'</div>');

		if (_this.filter(':visible').length === 0 && !settings.replaceInvisible) {
			return;
		}

		replacement.hover(function() {
			replacement
				.removeClass(settings.iSelect)
				.addClass(settings.iSelectHover);
		}, function() {
			if (!replacement.find('.optionlist').is(':visible')){
				replacement
					.removeClass(settings.iSelectHover)
					.addClass(settings.iSelect);
			}
		});

		$('option', _this).each(function(k, v) {
			var v			= $(v),
				listElement	= $('<li class="option" data-select-value="' + v.val() + '" data-select-item="' + k + '">' + v.text() + '</li>');

			if (v.is(':disabled') == true) {
				listElement.removeClass('option').addClass('option-disabled');
			}
			else {
				listElement.click(function() {
					var thisListElement	= $(this),
						thisReplacment	= thisListElement.parents('#' + iSelectRand),
						thisSublist		= thisReplacment.find('.optionlist'),
						thisIndex		= thisListElement[0].getAttribute('data-select-item'),
						thisValue		= thisListElement[0].getAttribute('data-select-value');

					for (k1 in thisIndex) {
						if (/^item-[0-9]+$/.test(thisIndex[k1])) {
							thisIndex = parseInt('', 10);
							break;
						}
					}

					thisReplacment.find('.option-current').text(thisListElement.text());
					thisReplacment.find('select').val(thisValue).triggerHandler('change');

					if (thisSublist.filter(':visible').length > 0) {
						hideList(thisSublist);
					}
					else {
						showList(thisSublist);
					}
				});
			}

			$('.optionlist', replacement).append(listElement);

			if (v.filter(':selected').length > 0) {
				$('.option-current', replacement).text(v.text());
			}
		});

		replacement.click(function() {
			var thisMoreButton	= $(this),
				thisList		= thisMoreButton.find('.optionlist'),
				otherLists		= $('.optionlist').not(thisMoreButton.find('.optionlist'));

			hideList(otherLists);

			if (thisList.filter(':visible').length > 0) {
				hideList(thisList);
			}
			else {
				showList(thisList);
			}
		});

		_this.hide().replaceWith(replacement).appendTo(replacement);

		var thisListBox			= replacement.find('.optionlist'),
			thisListBoxSize		= thisListBox.find('.option').length,
			thisListBoxWidth	= $('.' + settings.iSelect).width();

		if (thisListBoxSize > settings.listboxMaxSize) {
			thisListBoxSize = settings.listboxMaxSize;
		}

		if (thisListBoxSize == 0) {
			thisListBoxSize = 1;
		}

		thisListBox.css({
			width	: Math.round(thisListBoxWidth) - 2 + 'px',
			height	: (thisListBoxSize + 3) + 'em'
		});
	});
};