/*
 * multiselect2side jQuery plugin
 *
 * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://www.senamion.com
 *
 */

(function($)
{
	jQuery.fn.multiselect2side = function (o) {

		o = $.extend({
			selectedPosition: 'right',
			moveOptions: true,
			labelTop: 'Top',
			labelBottom: 'Bottom',
			labelUp: 'Up',
			labelDown: 'Down',
			labelSort: 'Sort',
			maxSelected: -1
		}, o);


		return this.each(function () {
			var	el = $(this);

			var	originalName = $(this).attr("name");
			if (originalName.indexOf('[') != -1)
				originalName = originalName.substring(0, originalName.indexOf('['));

			var	nameDx = originalName + "ms2side__dx";
			var	nameSx = originalName + "ms2side__sx";
			var size = $(this).attr("size");
			// SIZE MIN
			if (size < 6) {
				$(this).attr("size", "6");
				size = 6;
			}

			// UP AND DOWN
			var divUpDown =
					"<div class='ms2side__updown'>" +
						"<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
						"<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
						"<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
						"<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
						"<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
					"</div>";

			// CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
			var htmlToAdd = 
				"<div class='ms2side__div'>" +
						((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
					"<div class='ms2side__select'>" +
						"<select name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
					"</div>" +
					"<div class='ms2side__options'>" +
						((o.selectedPosition == 'right')
						?
						("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
						"<p class='AddAll' title='Add All'>&raquo;</p>" +
						"<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
						"<p class='RemoveAll' title='Remove All'>&laquo;</p>")
						:
						("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
						"<p class='AddAll' title='Add All'>&laquo;</p>" +
						"<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
						"<p class='RemoveAll' title='Remove All'>&raquo;</p>")
						) +
					"</div>" +
					"<div class='ms2side__select'>" +
						"<select name='" + nameDx + "' id='" + nameDx + "' size='" + size + "' multiple='multiple' ></select>" +
					"</div>" +
					((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
				"</div>";
			$(this).after(htmlToAdd).hide();

			// ELEMENTS
			var allSel = $(this).next().find("select");
			var	leftSel = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
			var	rightSel = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);

			// CENTER MOVE OPTIONS AND UPDOWN OPTIONS
			$(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
				$(this).css('padding-top', ((leftSel.height()/2) - ($(this).height()/2)) + 'px' );
			})

			// MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
			$(this).find("option:selected").clone().appendTo(rightSel);
			$(this).find("option:not(:selected)").clone().appendTo(leftSel);

			// SELECT FIRST LEFT ITEM
			leftSel.find("option").eq(0).attr("selected","selected");

			// ON CHANGE REFRESH ALL BUTTON STATUS
			allSel.change(function() {
				var	div = $(this).parent().parent();
				var	selectSx = leftSel.children();
				var	selectDx = rightSel.children();
				var	selectedSx = leftSel.find("option:selected");
				var	selectedDx = rightSel.find("option:selected");

				if (selectedSx.size() == 0 ||
						(o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
					div.find(".AddOne").addClass('ms2side__hide');
				else
					div.find(".AddOne").removeClass('ms2side__hide');

				// FIRST HIDE ALL
				div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
				if (selectDx.size() > 1)
					div.find(".SelSort").removeClass('ms2side__hide');
				if (selectedDx.size() > 0) {
					div.find(".RemoveOne").removeClass('ms2side__hide');
					// ALL SELECTED - NO MOVE
					if (selectedDx.size() < selectDx.size()) {	// FOR NOW (JOE) && selectedDx.size() == 1
						if (selectedDx.val() != selectDx.val())	// FIRST OPTION, NO UP AND TOP BUTTON
							div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
						if (selectedDx.last().val() != selectDx.last().val())	// LAST OPTION, NO DOWN AND BOTTOM BUTTON
							div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
					}
				}

				if (selectSx.size() == 0 ||
						(o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
					div.find(".AddAll").addClass('ms2side__hide');
				else
					div.find(".AddAll").removeClass('ms2side__hide');

				if (selectDx.size() == 0)
					div.find(".RemoveAll").addClass('ms2side__hide');
				else
					div.find(".RemoveAll").removeClass('ms2side__hide');
			});

			// DOUBLE CLICK ON LEFT SELECT OPTION
			leftSel.dblclick(function () {
				$(this).find("option:selected").each(function(i, selected){

					if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
						$(this).remove().appendTo(rightSel);
						el.find("[value=" + $(selected).val() + "]").attr("selected","selected").remove().appendTo(el);
					}
				});
				$(this).trigger('change');
			});

			// DOUBLE CLICK ON RIGHT SELECT OPTION
			rightSel.dblclick(function () {
				$(this).find("option:selected").each(function(i, selected){
					$(this).remove().appendTo(leftSel);
					el.find("[value=" + $(selected).val() + "]").attr("selected","").remove().appendTo(el);
				});
				$(this).trigger('change');
			});

			// CLICK ON OPTION
			$(this).next().find('.ms2side__options').children().click(function () {
				if (!$(this).hasClass("ms2side__hide")) {
					if ($(this).hasClass("AddOne")) {
						leftSel.find("option:selected").each(function(i, selected){
							$(this).remove().appendTo(rightSel);
							el.find("[value=" + $(selected).val() + "]").attr("selected","selected").remove().appendTo(el);
						});
					}
					else if ($(this).hasClass("AddAll")) {	// ALL SELECTED
						leftSel.children().appendTo(rightSel);
						leftSel.children().remove();
						el.find('option').attr("selected","selected");
						// el.children().attr("selected","selected"); -- PROBLEM WITH OPTGROUP
					}
					else if ($(this).hasClass("RemoveOne")) {
						rightSel.find("option:selected").each(function(i, selected){
							$(this).remove().appendTo(leftSel);
							el.find("[value=" + $(selected).val() + "]").attr("selected","").remove().appendTo(el);
						});
					}
					else if ($(this).hasClass("RemoveAll")) {	// ALL REMOVED
						rightSel.children().appendTo(leftSel);
						rightSel.children().remove();
						el.find('option').attr("selected","");
						//el.children().attr("selected",""); -- PROBLEM WITH OPTGROUP
					}
				}

				leftSel.trigger('change');
			});

			// CLICK ON UP - DOWN
			$(this).next().find('.ms2side__updown').children().click(function () {
				var	selectedDx = rightSel.find("option:selected");
				var	selectDx = rightSel.find("option");

				if (!$(this).hasClass("ms2side__hide")) {
					if ($(this).hasClass("SelSort")) {
						// SORT SELECTED ELEMENT
						selectDx.sort(function(a, b) {
							 var compA = $(a).text().toUpperCase();
							 var compB = $(b).text().toUpperCase();
							 return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
						})
						// FIRST REMOVE FROM ORIGINAL SELECT
						el.find("option:selected").remove();
						// AFTER ADD ON ORIGINAL AND RIGHT SELECT
						selectDx.each(function() {
							rightSel.append($(this).clone().attr("selected","selected"));
							el.append($(this).attr("selected","selected"));
						});
					}
					else if ($(this).hasClass("MoveUp")) {
						var	prev = selectedDx.first().prev();
						var	hPrev = el.find("[value=" + prev.val() + "]");

						selectedDx.each(function() {
							$(this).insertBefore(prev);
							el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);	// HIDDEN SELECT
						});
					}
					else if ($(this).hasClass("MoveDown")) {
						var	next = selectedDx.last().next();
						var	hNext = el.find("[value=" + next.val() + "]");

						selectedDx.each(function() {
							$(this).insertAfter(next);
							el.find("[value=" + $(this).val() + "]").insertAfter(hNext);	// HIDDEN SELECT
						});
					}
					else if ($(this).hasClass("MoveTop")) {
						var	first = selectDx.first();
						var	hFirst = el.find("[value=" + first.val() + "]");

						selectedDx.each(function() {
							$(this).insertBefore(first);
							el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);	// HIDDEN SELECT
						});
					}
					else if ($(this).hasClass("MoveBottom")) {
						var	last = selectDx.last();
						var	hLast = el.find("[value=" + last.val() + "]");

						selectedDx.each(function() {
							last = $(this).insertAfter(last);	// WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
							hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);	// HIDDEN SELECT
						});
					}
				}

				leftSel.trigger('change');
			});

			// HOVER ON OPTION
			$(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
				function () {
					$(this).addClass('ms2side_hover');
				},
				function () {
					$(this).removeClass('ms2side_hover');
				}
			);

			// UPDATE BUTTON ON START
			leftSel.trigger('change');
			// SHOW WHEN ALL READY
			$(this).next().show();
		});
	};
})(jQuery);