function showModal(id) {
	$('#' + id).modal({
		appendTo: '#aspnetForm',
		position: [100],
		overlayCss: { display: 'inline' },
		dataCss: { display: 'inline' },
		overlayClose: true,
		persist: true,
		overlayCss: { backgroundColor: "#000" },
		onOpen: function (dialog) {
			dialog.overlay.fadeIn(100, function () {
				dialog.data.hide();
				dialog.container.fadeIn(100, function () {
					dialog.data.fadeIn(100);
				});
				$('.tabs').tabs();
				$('#videoPlayer').hide();
			});
		},
		onClose: function (dialog) {
			$('.tabs').tabs('destroy');
			$.modal.close();
			$('#videoPlayer').show();
		}
	});
}


//function to remove a single item from our array
function removeByIndex(arr, index) {
	arr.splice(index, 1);
}

//create our temporary arrays (these are utilised to populate the hidden input with the search fields)
var tagArray = new Array();
var tag;


//remove tag function for autocomplete added items
function removeTag(obj) {

	var tagRemoved = $(obj).prev().text()

	//remove the tag
	var id = $(obj).parent()
	$(id).remove();

	//we need to push this removed item back into the passions array
	passions.push(tagRemoved)

	//uncheck the tag in the hidden modal
	$('label.tag').each(function (index) {
		if ($(this).text() == tagRemoved) {
			$(this).next().children().attr('checked', false);
		}
	});

	countTags();
	popFysHidden();

}

//populate the hidden input
function popFysHidden() {
	tagArray.length = 0;

	//gather all the tags and push them into an array which we assign as the value to the hidden input
	$('.theTag').each(function (index) {
		tag = $(this).text();
		tagArray.push(tag);
	});

	$('input.fys-hidden').val(tagArray);
}

function countTags() {

	var tagsNo = $('.tags').length - 2

	//console.log(tagsNo);

	if ($('.tags').length > 2) {
		$('#showMore').html('<a href="javascript:showModal(\'divPassionsModal\');" class="more">+ ' + tagsNo + ' more</a>');
		$('#whatsYourThing').hide();
		$('.tags:gt(1)').hide();
		//always show the first and second items
		$(".tags:nth-child(1)").show();
		$(".tags:nth-child(2)").show();

	}

	else if ($('.tags').length < 3) {
		$('.tags').show();
		$('#whatsYourThing').show();
		$('#showMore').html('');
		if ($('.tags').length < 1) { $('#exampleTags').show() }
	}


}


$(document).ready(function () {

	$('.rightCheckBox input').attr('checked', false)

	$('#whatsYourThing').click(function () {
		showModal('divPassionsModal');
		return false
	});

	// Modals on the space page
	$('#showInterested').click(function () {
		showModal('basic-modal-content');
		return false
	});

	$('#showSpaceLike').click(function () {
		showModal('basic-modal-content-similar');
		return false
	});


	//open and close columns
	$('.passionsOverlayColTitle').click(function () {
		$('.tagsListFrame').hide();
		$('.passionsOverlayColTitle').removeClass('open');
		$(this).toggleClass('open');
		$(this).parent().children('div.tagsListFrame').show();

		//the scroll pane
		$('.tagsListFrame').css({ 'overflow': 'hidden', 'height': '200px' }).jScrollPane();

	});

	$('.passionList .tags').css({ 'height': '240px' });

	$('#divPassionsModal_btn').click(function () {
		countTags();
		popFysHidden();

		$.modal.close();
	})




	//add and remove items from our passion array when we select a checkbox in the modal window
	$('.rightCheckBox input').change(function () {
		var formatted = $(this).parent().prev().text();

		//remove our chosen item from the passions array
		if ($(this).attr("checked")) {

			$.each(passions, function (index, value) {

				if (value == formatted) {
					removeByIndex(passions, index);
				}
			});

			$("#tbPassions").prepend(
					'<span class="tags"><em class="theTag">' + formatted + '</em>' + ' <a onclick=" removeTag(this);">X</a></span>'
					);

			countTags();
		}
		//we need to push this removed item back into the passions array and remove the displayed tag
		else {
			passions.push(formatted);
			//uncheck the tag in the hidden modal
			$('em.theTag').each(function (index) {
				if ($(this).text() == formatted) {
					$(this).parent().remove();
				}
			});
		}
	});



	// Added by MM
	// If a user clicks on the select all checkbox then add/remove all the tags in that category
	$('.selectall').click(function () {

		$(this).parent().parent().next().find('//:checkbox').attr('checked', $(this).attr('checked'));

		$(this).parent().parent().next().find('//:checkbox').each(function (index) {
			var formatted = $(this).parent().prev().text();

			//remove our chosen item from the passions array
			if ($(this).attr("checked")) {

				$.each(passions, function (index, value) {

					if (value == formatted) {
						removeByIndex(passions, index);
					}
				});

				$("#tbPassions").prepend(
					'<span class="tags"><em class="theTag">' + formatted + '</em>' + ' <a onclick=" removeTag(this);">X</a></span>'
					);

				countTags();
			}
			//we need to push this removed item back into the passions array and remove the displayed tag
			else {
				passions.push(formatted);
				//uncheck the tag in the hidden modal
				$('em.theTag').each(function (index) {
					if ($(this).text() == formatted) {
						$(this).parent().remove();
					}
				});
			}


		});


	});


	$("input#autocomplete").autocomplete(passions);
	//autocomplete source and functions
	$("input#autocomplete").autocomplete({
		source: passions,
		select: function (event, ui) {
			$('#noResults, .lFoatedSpan, #exampleTags').hide();

			var formatted = ui.item[0, 'value']

			$.each(passions, function (index, value) {
				//remove our chosen item from the passions array
				if (value == formatted) {
					removeByIndex(passions, index);
				}
			});

			$("#tbPassions").prepend('<span class="tags"><em class="theTag">' + formatted + '</em>' + ' <a onclick=" removeTag(this);">X</a></span>');

			countTags();

			popFysHidden();

			//check the checkboxes in our hidden modal so when we open it our selections are ticked
			$('label.tag').each(function (index) {
				if ($(this).text() == formatted) {
					$(this).next().children().attr('checked', true);
				}
			});
		},
		change: function (event, ui) {
			$("input#autocomplete").val('');
		}

	});


});


function doAddShowSelectedTagsHTML(selectedTags, hiddenFieldId, htmlDivId) {
	var count = 0;
	var htmlStringTags = '';

	$.each(selectedTags.split(','), function (index, value) {
		if (value.length > 0) {
			var formatted = value;
			$.each(passions, function (index, value) {
				//remove our chosen item from the passions array
				if (value == formatted) {
					removeByIndex(passions, index);
				}
			});

			$("#tbPassions").prepend('<span class="tags"><em class="theTag">' + formatted + '</em>' + ' <a onclick=" removeTag(this);">X</a></span>');
			// few spaces found box
			$("#tbPassionsfewspaces").prepend('<span class="fstags"><em class="theTag">' + formatted + '</em>' + ' <a onclick=" removeTag(this);">X</a></span>');

			countTags();

			//check the checkboxes in our hidden modal so when we open it our selections are ticked
			$('label.tag').each(function (index) {
				if ($(this).text() == formatted) {
					$(this).next().children().attr('checked', true);
				}
			});

		}
	});
}