// builds a friendly menu from a 
// select box with multiple
// attribute
(function($) {
    
    var thisElement;
	var masterElement;
    var menuElement;
    var menuAddElement;
    var menuSelectElement;

    // Constructor
    $.fn.multiples = function() {
        thisElement = $(this);
		masterElement = thisElement;
        build();
    };

	// Build DOM layout
    function build() {
        
        menuElement = $('<ol class="multiples-menu"></ol>');
        menuAddElement = $('<button>Add</button>');
		//menuYearElement = $('<label style="width:auto;padding:0;left:0;">Year</label><input style="padding:0;left:0;" type="text" value="" maxlength="4" size="4" id="year" />');
                        
        menuSelectElement = thisElement.clone();
        // clone selection for IE
        menuSelectElement.val(thisElement.val());
        
        // hide original
        thisElement.css({ 'display': 'none'  });

        // add current selections
        menuSelectElement.find('option:selected').each(function(){
            addOption(this);
        });
        
        // duplicate selection and remove selected options
        menuSelectElement.removeAttr('multiple');
        
        menuSelectElement.val(0);
        menuSelectElement.show();
        menuSelectElement.attr('name', '');
        
		menuAddElement.click(function(e){
		    e.preventDefault();
			addOption(menuSelectElement.find('option:selected:first'));
		});

        menuSelectElement.appendTo(thisElement.parent());
		//menuYearElement.appendTo(thisElement.parent());
		menuAddElement.appendTo(thisElement.parent());
        menuElement.appendTo(thisElement.parent());
    }

    function remove(e) {
		e.preventDefault();
		deselect(e.data.value);
		menuSelectElement.find('option[value=' + e.data.value + ']').removeAttr('disabled');
		$(this).parent().remove();
    }
	
	function select(value) {
	    menuElement.show();
		var selection = masterElement.val();
		selection = selection == null ? [] : selection;
		selection.push(value);
		masterElement.val(selection);
	}
	
	function deselect(value) {
		var selection = masterElement.val();
		if (selection != null) {
			var index = $(selection).index(value);
			selection.splice(index,1);
			masterElement.val(selection);
		}
	}
	
    function addOption(option) {      
        var selection = $(option);
            
		if (selection.attr('disabled') != true && selection.val() != '') {
			select(menuSelectElement.val());
			            
			// create menu element
			var element = $('<li></li>').append($('<span></span>').text(selection.text()));
			element.append($('<button>Remove</button>').bind('click', { value: selection.val() }, remove));
			menuElement.append(element);
			selection.attr('disabled', 'disabled');
			
			//$('#specialist-qualifications').after($('<input type="text" name="year-'+selection.val()+'" value="'+$('input#year').val()+'">'));
			
			// change selection to next element if available
			var next = selection.next().val();
			if (next) {
				menuSelectElement.val(next);
			}
		}
    }
            
})(jQuery);