/**

 * JQuery Plugin to create a fancy checkmultiselect

 */

(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 templateLabel = '<div class="fms-label-container"><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 checkmultiselect = container.closest('.checkmultiselect');

		if (container.hasClass('active')) {

			deselect(container);

		} else {

			select(container);

		};

		updateLabel(checkmultiselect);

		updateValue(checkmultiselect);

	};



	var toggleAll = function(e) {

		var container = $(this);

		var checkmultiselect = $('#finderCompositeContent .checkmultiselect');

		container.removeClass('active');

		deselectAll(checkmultiselect);

		updateValue(checkmultiselect);

	};



	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(checkmultiselect) {

		$('.fms-item-container',$(checkmultiselect)).each(function() {

			deselect($(this));

		});

	};



	var selectAll = function(checkmultiselect) {

		$('.fms-item-container',$(checkmultiselect)).each(function(index,elem) {

			select($(this));

		});

	};



	var onInputChange = function() {

		var checkmultiselect = $(this).closest('.fms-container');

		if ($(this).val() == '') {

			// This is only for the reset function

			$('.fms-label-container',checkmultiselect).removeClass('active');

			deselectAll($(checkmultiselect));

		}

	};



	var updateValue = function(checkmultiselect) {

		var values = new Array();

		$('.active:not(.fms-label-container)',checkmultiselect).each(function() {

			values.push($('.value',this).html());

		});

		$('.fms-peer',checkmultiselect).val(values.join(SEPERATOR));

	};



	var updateLabel = function(checkmultiselect) {

		var container = $('.fms-label-container',$(checkmultiselect));

		if ($('.fms-item-container.active',$(checkmultiselect)).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);

		$('.toggleCheckbox').click(toggleAll);



		// Generate the content

		var contentElem = $(templateContent);

		var values = new Array();

		$(options).each(function(index,elem) {

			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.fancycheckmultiselect = function() {

		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();

	};



})(jQuery);