/**
 * JQuery Plugin to create a fancy multiselect
 */
(function($) {

	var SEPERATOR = ',';

	var templateContainer = '<div class="fms-container"><div class="fms"><!-- label goes here--><!-- select goes here --><!-- peer goes here --></div></div>';
	var templateLabel = '<div class="fms-label-container"><div class="fms-checkbox">&nbsp;</div><div class="fms-label"></div></div>';
	var templateContent = '<div class="fms-selectbox-container"><div class="fms-selectbox"></div></div>';
	var templateItem =    '<div class="fms-item-container"><div class="fms-item"><div class="fms-checkbox">&nbsp;</div><div class="fms-optionlabel"><span style="display:none;" class="value"></span></div></div></div>';
	var templateItemSel = '<div class="fms-item-container active"><div class="fms-item"><div class="fms-checkbox">&nbsp;</div><div class="fms-optionlabel"><span style="display:none;" class="value"></span></div></div></div>';
	var templatePeer = '<input type="hidden" name="" class="fms-peer" value="" />';

	var toggleOption = function(e) {
		var container = $(this).closest('.fms-item-container');
		var multiselect = container.closest('.multiselect');
		if (container.hasClass('active')) {
			deselect(container);
		} else {
			select(container);
		};
		updateLabel(multiselect);
		updateValue(multiselect);
	};

	var toggleAll = function(e) {
		var container = $(this).closest('.fms-label-container');
		var multiselect = container.closest('.multiselect');
		if (container.hasClass('active')) {
			container.removeClass('active');
			deselectAll(multiselect);
		} else {
			container.addClass('active');
			selectAll(multiselect);
		};
		updateValue(multiselect);
	};

	var deselect = function(item) {
		if (item.hasClass('active')) {
			item.removeClass('active');
		}
	};

	var select = function(item) {
		if (!item.hasClass('active')) {
			item.addClass('active');
		}
	};

	var deselectAll = function(multiselect) {
		$('.fms-item-container',$(multiselect)).each(function() {
			deselect($(this));
		});
	};

	var selectAll = function(multiselect) {
		$('.fms-item-container',$(multiselect)).each(function(index,elem) {
			select($(this));
		});
	};

	var onInputChange = function() {
		var multiselect = $(this).closest('.fms-container');
		if ($(this).val() == '') {
			// This is only for the reset function
			$('.fms-label-container',multiselect).removeClass('active');
			deselectAll($(multiselect));
		}
	};

	var updateValue = function(multiSelect) {
		var values = new Array();
		$('.active:not(.fms-label-container)',multiSelect).each(function() {
			values.push($('.value',this).html());
		});
		$('.fms-peer',multiSelect).val(values.join(SEPERATOR));
	};

	var updateLabel = function(multiselect) {
		var container = $('.fms-label-container',$(multiselect));
		if ($('.fms-item-container.active',$(multiselect)).size() > 0) {
			container.addClass('active');
		} else {
			container.removeClass('active');
		}
	};

	var generateHtml = function(name,label,options) {
		// Generate the label
		var labelElem = $(templateLabel);
		$('.fms-label',labelElem).html(label);
		$('.fms-checkbox',labelElem).click(toggleAll);

		// Generate the content
		var contentElem = $(templateContent);
		var values = new Array();
		$(options).each(function(index,elem) {
			if(index > 0) {
				var itemElem = (elem.isSelected ? $(templateItemSel) : $(templateItem));
				$('.value',itemElem).html(elem.value);
				$('.fms-optionlabel',itemElem).append(elem.label);
				$('.fms-checkbox',itemElem).click(toggleOption);
				$('.fms-selectbox',contentElem).append(itemElem);
				if (elem.isSelected) {
					values.push(elem.value);
				}
			}
		});

		// Generate the label
		var containerElem = $(templateContainer);

		// Generate the peer
		var peerElem = $(templatePeer);
		$(peerElem).attr('name',name);
		$(peerElem).change(onInputChange);
		$(peerElem).val(values.join(SEPERATOR));

		$('.fms',containerElem).append(labelElem).append(contentElem).append(peerElem);

		return containerElem;
	};

	$.fn.fancymultiselect = function(spOptions) {
		if (!spOptions) spOptions = {};
		var label = $('label',$(this)).html();
		var inputName = $('select',$(this)).attr('name');
		var options = new Array();
		$('option',$(this)).each(function(e) {options.push({
			value: $(this).attr('value'),
			label: $(this).html(),
			isSelected: ($(this).is(':selected')) ? true : false
		});});
		var container = $(this);
		var dom = generateHtml(inputName,label,options);
		container.empty();
		container.append(dom);
		$('.fms-selectbox-container',dom).scrollpanel(spOptions);
	};

})(jQuery);