// DOM MENU EFFECT SYSTEM ------------------------------------------------------------------------------------------------------------------------

var options_container = null;
var last_selected = null;
var last_hovered = null;
var last_hovered_class = null;

function bindMenuEffect(container_id, css_default, css_over, css_selected, option_type, onclick_callback_function){
	
	// get referrence to options container
	options_container = getElement(container_id);
	
	// set default option node type if none is given
	option_type = option_type ? option_type : 'TD';
	
	// prepare options
	for(node_index=0; node_index < options_container.childNodes.length; node_index++){
		if(options_container.childNodes[node_index].nodeName == option_type){

			// set all option's classes to default class
			options_container.childNodes[node_index].className = css_default;
			
			// BIND "MOUSE IS OVER OPTION" EVENT -------------------------------------------------------------------------------------------------------------
			options_container.childNodes[node_index].onmouseover = function(){
				
				// set last_hovered option's class to it's last class before selection
				if(last_hovered){
					last_hovered.className = last_hovered_class;
				}

				// set last_hovered_class to hovered option's current class
				last_hovered_class = this.className;
				
				// set current hovered option to over class
				this.className = css_over;
				
				// set last_hovered to current hovered option
				last_hovered = this;
				
			};
			
			// BIND "MOUSE IS OUT" EVENT -------------------------------------------------------------------------------------------------------------
			options_container.childNodes[node_index].onmouseout = function(){
				
				// set last_hovered option's class to it's last class before selection
				if(last_hovered){
					last_hovered.className = last_hovered_class;
				}
				
				// reset all effect variables
				last_hovered = null;
				last_hovered_class = null;
				
			};
			
			// BIND "OPTION CLICK" EVENT -------------------------------------------------------------------------------------------------------------
			options_container.childNodes[node_index].onclick = function(){
				
				// set last selected option's class to default
				if(last_selected){
					last_selected.className = css_default;
				}
				
				// set this option's last hovered class to selected class
				last_hovered_class = css_selected;
				
				// set class of hovered option to selected class
				this.className = css_selected;
				
				// set last selected option to current option
				last_selected = this;
				
				// if onclick callback function is defined, run it
				if(onclick_callback_function){
					onclick_callback_function(this);
				}
				
			};
		}
	}
}