emmapp.selector = {

	DomWrapper:null,
	DomAllOptionsContainer:null,
	DomSelectAllCheckbox:null,
	DomRemoveAllBtn:null,
	DomSelectedItemsContainer:null,

	initDefault: function() {
		this.init("MULTI_SELECTOR", "MULTI_SELECTOR_ALL_OPTIONS", "MULTI_SELECTOR_SELECTED_ITEMS", "MULTI_SELECTOR_REMOVE_ALL_BTN", "MULTI_SELECTOR_SELECT_ALL_CHECKBOX");
	},
	
	init: function(id_module, id_all_members, id_selected_members, btn_remove_all, btn_select_all) {
		   // set the properties here
			  
		this.DomWrapper = dojo.byId(id_module);
		this.DomAllOptionsContainer = dojo.byId(id_all_members);
		this.DomSelectAllCheckbox = dojo.byId(btn_select_all);
		this.DomRemoveAllBtn = dojo.byId(btn_remove_all);
		this.DomSelectedItemsContainer = dojo.byId(id_selected_members);
		
		this._attachEvent();
	},
	
	getSelectionCount: function() {
		return dojo.query('div[title]',emmapp.selector.DomSelectedItemsContainer).length;
	},
	
	
	_attachEvent:  function() {
		// click select-all checkbox
		var self = this;
		dojo.connect(this.DomSelectAllCheckbox,'onclick',function(){
			// avoid adding an item twice 
			dojo.query('div[title]',self.DomSelectedItemsContainer).forEach(function(i){
				i.parentNode.removeChild(i);
			});	

			dojo.query('.option input[type="checkbox"]',this.DomAllOptionsContainer).forEach(function(thisObject){
				thisObject.checked=self.DomSelectAllCheckbox.checked; 
				clickOptionCheckbox(thisObject);
			});
		});
		
		
		// add mouse-over/out effect to options
		dojo.query('.option',this.DomAllOptionsContainer).connect('onmouseover',function(){
			dojo.addClass(this,'hover');
		}).connect('onmouseout',function(){
			dojo.removeClass(this,'hover');
		});
		
		
		// init selected options when load
		// bind click event for options
		dojo.query('.option input[type="checkbox"]',this.DomAllOptionsContainer).forEach(function(thisObject){
			if(thisObject.checked){
				clickOptionCheckbox(thisObject);
			}
		}).onclick(function(e){
			clickOptionCheckbox(this);
		});
		
		
		function clickOptionCheckbox(item){
			if(item.checked){
				// new a selected item by copying the selected option innerHTML
				var itemdiv = item.parentNode;
				var newitem = ('<div class="option" title="'+dojo.attr(item,'id')+'"><img src="/images/remove.gif" align="absmtitlele" /> '+itemdiv.innerHTML+'</div>');
				emmapp.selector.DomSelectedItemsContainer.innerHTML +=(newitem);
				
				// remove the checkbox from selected item (no need checkbox on the right)
				dojo.query('input[type="checkbox"]',emmapp.selector.DomSelectedItemsContainer).forEach(function(i){
					i.parentNode.removeChild(i);
				});
				
				// bind click event to "remove" image btn
				dojo.query('img',this.DomSelectedItemsContainer).onclick(function(){removeSelectedItem(this.parentNode);});
			}else{
				
				// remove selected item
				dojo.query('div[title="'+item.id+'"]',this.DomSelectedItemsContainer).forEach(function(i){
					i.parentNode.removeChild(i);
				});	
				
				// set "check-all" checkbox unchecked
				emmapp.selector.DomSelectAllCheckbox.checked=false;
			}
		}
		
	
			
		//bind click event to remove-all btn
		dojo.connect(this.DomRemoveAllBtn,'click',function(){
			dojo.query('div[title]',emmapp.selector.DomSelectedItemsContainer).forEach(function(i){
				removeSelectedItem(i);
			});	
		});
		
		
		function removeSelectedItem(item){
			
			// find all checked options by the attribute stored in selected items
			dojo.byId(item.title).checked = false; 
			item.parentNode.removeChild(item);
			
			emmapp.selector.DomSelectAllCheckbox.checked=false;
		}
		
	}
};