/**
 *	REQUIRE jQuery lib file
 */  

/**
 *	Function which calling first to define custom select. 
 *	Take two parameters, first of him make as memeber of second 
 *	and push this to global array, which contain all custom selects 
 *	
 *	@param string element contain css-like path to DOM element which hold elements of custom select
 *	@param parameters params contain extend values such as hide_elements, options_list, options_link, input
 *	@return nothing 
 * 
 */
 function _fader(action){
	var fader = $('#fader')[0];
	
	if(action=="show"){
		var doc_body = $('body')[0];
		var doc_obj = doc_body.parentNode;
		var doc_h = doc_obj.clientHeight;
		var doc_w = doc_obj.clientWidth;
		
		fader.style['position'] = "absolute";
		fader.style['top'] = "0px";
		fader.style['left'] = "0px";
		fader.style['height'] = doc_h + 'px';
		fader.style['width'] = doc_w + 'px';	
		fader.style['zIndex'] = "1000";
		fader.style['opacity'] = "0.1";		
		// fader.style['backgroundColor'] = ""; 
		fader.style['display'] = "block";
	}
	if(action=="hide"){
		fader.style['display'] = "none";
	}
}
 
 
function w3setSelector( ){	
	var params = 	{ element: ''}
	if(w3setSelector.arguments[1]){
		params = w3setSelector.arguments[1];		
	}
	params.element = '';
	params.element += w3setSelector.arguments[0];	
	w3tmpSelectors.push( params );
}

$(document).ready(function(){
	w3InitSelectors();	
});

/**
 *	Working with all elements of "w3Selectors": 
 *	- appropriate ordinal number as member of every array element;
 *	- calling function "w3oSelectors" for every element which init selectors class
 *	
 */  
function w3InitSelectors(){
	if ( 0 > w3tmpSelectors.length ) return;
	for( var i=0; i < w3tmpSelectors.length; i++ ){		
		var selector_elements = $(w3tmpSelectors[i].element);		
		if(selector_elements.length > 0)
			for(var j = 0; j < selector_elements.length; j++, selectors_count++){
				w3tmpSelectors[i].index = selectors_count;
				w3tmpSelectors[i].type_index = j;
				w3Selectors[selectors_count] = new w3oSelectors(w3tmpSelectors[i]);
			}				
	}
	w3tmpSelectors = null;
}

var w3Selectors = [];
var selectors_count = 0;
var w3tmpSelectors = [];

/**
 *	Init selectors class object
 *	
 *	@param object params contain predetermined parametrs (element, index, options_list, options_link, etc)    
 *	@var string "pop_a_str" contain path to links in options list
 *	@property html-objects array "main_obj" contain main objects of select, which has been found by "element" parameter
 *	@property html-objects array "pop" contain objects of select options list
 *	@property html-objects array[][] "pop_a" contain objects of options list links
 *	@property html-objects array "sel_a" contain objects of option links
 *	@property html-objects array "sel_hidden" contain objects of hidden input elements
 *	@method toggle show if hidden and hide if showed options list 
 *	@method find searchin elements in "main_obj" 
 *	@method set takes three values and appropriating two first of him to "sel_a" and "sel_hidden" elements with ordinal number (third parameter)     
 *	@return type   description   
 */
function w3oSelectors( params ){
	// set config vars
	{
	this.index = params.index;
	this.type_index = params.type_index;
	this.element = (params.element)? params.element : 'nan';	
	this.hide_elements = (params.hide_elements)? params.hide_elements : false;	
	this.options_list = (params.options_list)? params.options_list : "ul";
	this.options_link = (params.options_link)? params.options_link : "a";
	this.input = (params.input)? params.input : "input";	
	this.event_for_open = (params.event_for_open)? params.event_for_open : "click";
	this.out_click = (params.out_click)? params.out_click : false;
	var pop_a_str = this.options_list + ' a';
	}
	
	//   create fader in DOM	
	if($('#fader').length==0){		
		$('body').append('<div id="fader"></div>');
		$('body').append('<div class="selpop-copy"></div>');
		_fader('hide');		
	}	
	
	// class methods to handle events	
	// show-hide  popup of this selector 
	this.toggle = function(){     		
		//check style of current popup		
		if(this.pop.style['display'] == "block"){
			this.pop.style['display'] = "none";
			if(this.hide_elements!=false)				
				if($.browser.msie){					
					var arr34 = w3getElements(this.hide_elements);
					for(var i = 0;i < arr34.length; i++){
						arr34[i].style['display'] = "block";
					}
				}
		}
		else{
			this.pop.style['display'] = "block";
			if(this.hide_elements!=false)
				if($.browser.msie){
					var arr34 = w3getElements(this.hide_elements);					
					for(var i = 0;i < arr34.length; i++){
						arr34[i].style['display'] = "none";
					}
				}
		}		
	}	

	// search in main_obj	
	this.find = function(tagArray){  
		if(this.main_obj==null)	return null;				
		var arr_obj = new Array();
		arr_obj[0] = this.main_obj;		
		var result = $(this.main_obj).find(tagArray); 						
		if(result!=null)
			return result;
		else
			return null;
	}		

	// set picked value and text
	this.set = function(value, text){    
		this.sel_a.innerHTML = text;
		this.sel_hidden.value = value;		
	}
	
	// init object html-element variables		
	{
	this.main_obj = $(this.element)[this.type_index];				
	if(this.main_obj == null) return false;	
	this.pop = new Array();
	this.pop_a = new Array();
	this.sel_a = new Array();
	this.sel_hidden = new Array();				
	
	this.pop = this.find(this.options_list)[0];						
		if(this.pop == null) return false;									
	this.pop_a = this.find(pop_a_str);	
		if(this.pop_a == null) return false;			
	this.sel_a = this.find(this.options_link)[0];
	this.sel_a.selectorIndex = this.index;
		if(this.sel_a == null) return false;				
	this.sel_hidden = this.find(this.input)[0];				
		if(this.sel_hidden == null) return false;
	}							
	// init events
	if(this.event_for_open == "click"){								
		if(this.out_click && this.type_index == 0){
			this.sel_a.onclick = function(){
				w3Selectors[this.selectorIndex].toggle();									
				_fader("show");												
				return false;
			}		
		}
		else{
			this.sel_a.onclick = function(){
				w3Selectors[this.selectorIndex].toggle();												
				return false;
			}
		}
	}
	if(this.event_for_open == "rollover"){
		this.main_obj.selectorIndex = this.index;
		this.main_obj.onmouseover = function(){
			w3Selectors[this.selectorIndex].pop.style['display'] = "block";
		}
		this.main_obj.onmouseout = function(){
			w3Selectors[this.selectorIndex].pop.style['display'] = "none";
		}
		this.sel_a.onclick = function(){							
			return false;
		}	
	}

	for(var i = 0; i < this.pop_a.length; i++){		
		this.pop_a[i].selectorIndex = this.index;
		this.pop_a[i].onclick = function(e){					
			w3Selectors[this.selectorIndex].set(this.rel,this.innerHTML);									
			w3Selectors[this.selectorIndex].toggle();	
			return false;
		}
	}	
	
	// work only with first type element
//	if(this.type_index > 0) return;  // MY PROBLEM, FOR FUTURE =)
	
	$('#fader').click(function(e){
		_fader('hide');	
		var main_clone_child = $('div.selpop-copy')[0].childNodes;		
		for(var i = 0; i < main_clone_child.length; i++){
			main_clone_child[i].style['display'] = "none";
		}				
	});
	
	if((this.out_click)){		
		var popup = this.pop;				
		$('div.selpop-copy').append(popup);		
		this.new_pop = $('div.selpop-copy').find(this.options_list)[this.type_index];		
		this.new_pop.ind = this.index;				
		this.new_pop.style['display'] = "none";		
		this.new_pop_a = $(this.new_pop).find(this.options_link);		
		
		this.sel_a.onclick = function(){													
			var new_pop = w3Selectors[this.selectorIndex].new_pop;
			var pos_left = w3Selectors[this.selectorIndex].main_obj.offsetLeft + w3Selectors[this.selectorIndex].sel_a.offsetLeft;
			var pos_top = w3Selectors[this.selectorIndex].main_obj.offsetTop + w3Selectors[this.selectorIndex].sel_a.offsetTop;
			pos_top += w3Selectors[this.selectorIndex].sel_a.offsetHeight;
			new_pop.style['left'] = pos_left + 'px';
			new_pop.style['top'] = pos_top + 'px';			
			new_pop.style['display'] = "block";						
			_fader("show");					
			return false;
		}								
		
		for(var i = 0; i < this.new_pop_a.length; i++){										
			this.new_pop_a[i].selectorIndex = this.index;
			this.new_pop_a[i].onclick = function(e){		
				_fader('hide');	
				w3Selectors[this.selectorIndex].set(this.rel,this.innerHTML);									
				w3Selectors[this.selectorIndex].new_pop.style['display'] = "none";
				return false;
			}			
		}
					
	}
	
}