/**
 * Skinned select ( drop - down )
 * Custom objects: ControlSelectConfig, ControlSelect
 * @author Gytis Galvanauskas <gytis@gaumina.lt>
 * @version 0.1
 */
 
 /**
  * Some global variables / functions
  */
 
 var ___control_select_active = null;
 var ___control_select_active_skip_next = false;
 
 function ___checkControlSelectActive( event ) {
	if( ! ___control_select_active_skip_next ) {
	
		var oEvent = new CompatEvent( event );
		
		if( 
			! ( oEvent.element.className && ( oEvent.element.className == 'OPTIONS_OVER_FLOW_DIV' ) ) &&
			! ( oEvent.element.tagName && ( oEvent.element.tagName == 'scrollbar' ) ) ) {
	
			if( ___control_select_active ) {
				if( ___control_select_active.last_option_over < 0 ) {
					___control_select_active.last_option_over = -1;
					___control_select_active.pressed = false;
					___control_select_active.redrawByPressedStatus();
					remEventHandler( document.body, 'mousedown', ___checkControlSelectActive, ClientInfo.is_gecko );
					___control_select_active = null;				
				}
			}
			
		}
		
	} else {
		___control_select_active_skip_next = false;
	}
	
 }
  
    
 ControlSelectConfig = function() {
 
	this.images = { 'on' : '', 'off' : '' };
	this.image_width = '0px';
	this.image_height = '0px';
	this.css_prefix = 'ControlSelect';
 
 }
 
 ControlSelect = function( name, form_element_name, oControlSelectConfig ) {
 
	this.name = name;
	this.form_element_name = form_element_name;
	this.current_option = -1;
	this.width = '0px';
	this.height = '0px';
	this.last_option_over = -1;
	this.pressed = false;
	this.oConfig = oControlSelectConfig;
	
	this.options = new Array();
	
	for( var idx in this.oConfig.images ) {
		getImage( this.oConfig.images[idx] );
	}
 
 }
 
ControlSelect.prototype.getHTMLID = function( name ) {
	
	return( '__HTMLID__ControlSelect_' + this.name + ( name ? ( '_' + name ) : '' ) );

}

ControlSelect.prototype.addOption = function( value, title ) {
	
	var ret_val = -1;
	
	if( ( value.length > 0 ) && ( title.length > 0 ) ) {
		
		var idx = this.options.length;
		
		this.options[idx] = { 'value' : value, 'title' : title };
		
		if( this.current_option < 0 ) {
			this.current_option = idx;
		}
		
		ret_val = idx;
		
	}
	
	return( ret_val );
	
}

ControlSelect.prototype.getImageHTML = function() {

	var ret_val = '';
	
	var image_src 	= this.oConfig.images[( this.pressed ? 'on' : 'off' )];
	var image_width = this.oConfig.image_width;
	var image_height = this.oConfig.image_height;

	ret_val = '<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + image_src + '\' ); width: ' + image_width + '; height: ' + image_height + ';">' +
					'<img style="filter:progid:DXImageTransform.Microsoft.Alpha( opacity=0 ); width: ' + image_width + '; height: ' + image_height + ';" src="' + image_src + '" alt="" />' +
				'</span>';
				
	return( ret_val );

}


ControlSelect.prototype.onOptionMouseOver = function( event, option ) {

	var option_ref = getElement( this.getHTMLID( 'option_' + option ) );
	
	this.last_option_over = option;
	
	if( option_ref ) {
		option_ref.className = this.oConfig.css_prefix + 'OptionOver';
	}

}

ControlSelect.prototype.onOptionMouseOut = function( event, option ) {

	var option_ref = getElement( this.getHTMLID( 'option_' + option ) );
	
	this.last_option_over = -1;
	
	if( option_ref ) {
		option_ref.className = this.oConfig.css_prefix + 'Option';
	}

}

ControlSelect.prototype.onOptionMouseDown = function( event, option ) {

	var option_ref = getElement( this.getHTMLID( 'option_' + option ) );
	var options_ref = getElement( this.getHTMLID( 'options' ) );
	var current_value_ref = getElement( this.getHTMLID( 'current_value' ) );
	var image_ref = getElement( this.getHTMLID( 'image' ) );
	var value_ref = getElement( this.getHTMLID( 'value' ) );
	
	remEventHandler( document.body, 'mousedown', ___checkControlSelectActive, ClientInfo.is_gecko );
	
	___control_select_active = null;
	___control_select_active_skip_next = false;
	
	this.pressed = false;
	this.current_option = option;
	
	if( value_ref ) {
		value_ref.value = this.options[this.current_option].value;
	}
	
	if( option_ref ) {
		option_ref.className = this.oConfig.css_prefix + 'Option';
	}
	
	if( current_value_ref ) {
		current_value_ref.innerHTML = this.getCurrentValueHTML();
	}
	
	if( options_ref ) {
		options_ref.style.display = 'none';
	}
	
	if( image_ref ) {
		image_ref.innerHTML = this.getImageHTML();
	}

}

ControlSelect.prototype.getOptionsHTML = function() {

	var ret_val = '';
	
	if( this.options.length > 0 ) {
	
		for( var idx = 0; idx < this.options.length; idx++ ) {
			
			ret_val += '<table class="wf">' +
							'<tr>' +
								'<td id="' + this.getHTMLID( 'option_' + idx ) + '" onmouseover="javascript:' + this.name +'.onOptionMouseOver( event, ' + idx + ');" onmouseout="javascript:' + this.name +'.onOptionMouseOut( event, ' + idx + ');" onmousedown="javascript:' + this.name +'.onOptionMouseDown( event, ' + idx + ');" class="' + this.oConfig.css_prefix + 'Option">' + this.options[idx].title + '</td>' +
							'</tr>' +
						'</table>'

		}
		
		if( this.options.length > 5 ) {
			
			ret_val = '<div class="OPTIONS_OVER_FLOW_DIV" style="overflow: auto; height: 100px;"><div class="wf">' + ret_val + '</div></div>';
		
		}
	
	}
	
	return( ret_val );


}

ControlSelect.prototype.getOptionValue = function( idx ) {

	var ret_val = '';
	
	if( ! ( idx < 0 ) ) {
		ret_val = this.options[idx].value;
	}
	
	return( ret_val );


}


ControlSelect.prototype.getOptionIdxByValue = function( value ) {
	
	var ret_val = -1;
	
	if( value.length > 0 ) {
		for( var idx in this.options ) {
			if( options[idx].value == value ) {
				ret_val = idx;
			}
		}
	}
	
	return( ret_val );
	
}

ControlSelect.prototype.selectedByValue = function( value ) {
	
	var ret_val = false;
	
	var idx = this.getOptionIdxByValue( value );
	
	if( ! ( idx < 0 ) ) {
		this.current_option = idx;
		ret_val = true;
	}

	return( ret_val );

}

ControlSelect.prototype.getCurrentValueHTML = function() {
	
	var ret_val = '&nbsp;';
	
	if( ! ( this.current_option < 0 ) ) {
		ret_val = this.options[this.current_option].title;
	}
	
	return( ret_val );

}

ControlSelect.prototype.redrawByPressedStatus = function() {
	
	var options_ref = getElement( this.getHTMLID( 'options' ) );
	var image_ref = getElement( this.getHTMLID( 'image' ) );
	
	if( options_ref ) {
		options_ref.style.display = this.pressed ? 'block' : 'none';
	}
	
	if( image_ref ) {
		image_ref.innerHTML = this.getImageHTML();
	}

}

ControlSelect.prototype.onMouseDown = function( evt ) {
	
	___checkControlSelectActive( evt );
	
	if( ! this.pressed ) {
	
		this.pressed = true;
		
		setEventHandler( document.body, 'mousedown', ___checkControlSelectActive, ClientInfo.is_gecko );
		
		___control_select_active = this;
		
		if( ClientInfo.is_ie || ClientInfo.is_opera ) {
			___control_select_active_skip_next = true;
		}
		
	} else {

		remEventHandler( document.body, 'mousedown', ___checkControlSelectActive, ClientInfo.is_gecko );
		
		___control_select_active = null;
		
		this.pressed = false;
		
	}
	
	this.redrawByPressedStatus();
	
}

ControlSelect.prototype.getHTML = function() {
	
	var ret_val = '';
	
	var image_width = this.oConfig.image_width;
	var image_height = this.oConfig.image_height;
	
	var width = this.width;
	var height = this.height;
	
	ret_val += '<input type="hidden" name="' + this.form_element_name + '" id="' + this.getHTMLID( 'value' ) + '" value="' + this.getOptionValue( this.current_option ) + '" />';
	
	ret_val += 	'<div style="width: ' + width + '; height: ' + height + ';">' +
					'<div class="' + this.oConfig.css_prefix + 'OptionsContainer" id="' + this.getHTMLID( 'options' ) + '" style="display: none; position: absolute; margin-top: ' + this.height + '; width: ' + width + ';">' + this.getOptionsHTML() + '</div>' +
					'<table style="width: 100%; border-collapse: collapse;">' + 
						'<tr>' +
							'<td class="' + this.oConfig.css_prefix + 'CurrentValue" id="' + this.getHTMLID( 'current_value') + '">' + this.getCurrentValueHTML() + '</td>' +
							'<td onmousedown="javascript:' + this.name + '.onMouseDown( event );" class="' + this.oConfig.css_prefix + 'Image" id="' + this.getHTMLID( 'image' ) + '" style="width: ' + image_width + '; height: ' + image_height + '">' + this.getImageHTML() + '</td>' +
						'</tr>' +
					'</table>' +
				'</div>';
				

	return( ret_val );
	
}

ControlSelect.prototype.toString = function() {
	
	return( this.getHTML() );

}