// Create select(dropdown) element. Use with scripts(script.aculo.us)

// Copyright (c) 2009 Sergey Stupachenko
// GNU License
var dropdownInzexVar = 100;
var dropdown = Class.create();

dropdown.prototype = {
	
	enabled 		: 0,
	name 			: '',
	elementName		: '',
	mainObject 		: null,
	
	bgImage 		: '/images/bg_select.png',
	dropColor		: '#ffffff',
	scrollColor		: '#868686',
	dropHeight		: 20,
	
	style 			: 'margin:0 0 0 130px; color:#0079C1;',
	options			: 0,
	
	
	
	initialize : function ( oName, element )
	{
		if( !dropdownInzexVar )
		{
			alert( 'Set maximal value "dropdownInzexVar"' );
			return;
		}
		this.name = oName;
		if( !$( element ) ) return;
		this.mainObject = $( element );
		this.elementName = element;
		
		this.createDOM();
	},
	
	createDOM : function()
	{
		var tmp = Builder.node( 'div', { 'style' : 'width:' + this.mainObject.offsetWidth + 'px;height:' + this.mainObject.offsetHeight + 'px; background : url(' + this.bgImage + ') top left no-repeat;position:relative;' + this.style  }, [
			Builder.node( 'input', { 
									'type' : 'text', 
									'readonly' : 1, 
									'id' : 'edt_' + this.name,
									'style' : 'border:0px;margin:0px;padding:0;width:' + parseInt( this.mainObject.offsetWidth - 22 ) + 'px;height:' + parseInt( this.mainObject.offsetHeight - 5 ) + 'px;background-color:transparent;position:absolute; top:3px;left:5px;color:#0079C1;font-size:12px;z-index:' + dropdownInzexVar + ';'
									} ),
			Builder.node( 'div', {
								'id' : "opt_zone_" + this.name,
								'style' : "position:absolute;top:" + parseInt( this.mainObject.offsetHeight - 3 ) + "px;left:0px;width:" + parseInt( this.mainObject.offsetWidth ) + "px;height:" +  this.mainObject.offsetWidth + "px;background-color:" + this.dropColor + ";margin:0;z-index:' + dropdownInzexVar + '10;border: 0px solid #000000;overflow-x:hidden;overflow-y:hidden;display:none;"
			} )
		] );
		this.mainObject.parentNode.appendChild( tmp );
		eval( "tmp.onclick = function(){ " + this.name + ".openOptions(); }" );
		eval( "tmp.onmouseout = function(){ " + this.name + ".closeOptions(); }" );
		eval( "$( 'opt_zone_" + this.name + "' ).onmouseover = function(){ " + this.name + ".openOptions(); }" );
		this.mainObject.style.display = 'none';
		
		var i = 0;
		while( this.mainObject.options[i] && this.mainObject.options[i].text )
		{
			this.addOption( this.mainObject.options[i].value, this.mainObject.options[i].text, this.mainObject.options[i].selected );
			i ++;
		}
		if( dropdownInzexVar )
		{
			tmp.style.zIndex = dropdownInzexVar;
			dropdownInzexVar --;
		}
	},
	
	addOption : function( value, caption, selected )
	{
		var tmp = Builder.node( 'div', { 
									'style' : "width:" + parseInt( $( "opt_zone_" + this.name ).offsetWidth - 2 ) + "px;height:" + parseInt( this.dropHeight - 5 ) + "px;cursor:default;margin:0;padding:5px 0 0 5px;",
									'id' : 'option_' + this.name + '_' + value
								}, [ caption ] );
		tmp.setAttribute( 'value', value );
		$( "opt_zone_" + this.name ).appendChild( tmp );
		eval( "tmp.onclick = function(){ " + this.name + ".checkOption( '" + value + "', '" + caption + "' ); }" );
		eval( "tmp.onmouseover = function(){ $( '" + 'option_' + this.name + '_' + value + "' ).style.backgroundColor = '" + this.scrollColor + "'; }" );
		eval( "tmp.onmouseout = function(){ $( '" + 'option_' + this.name + '_' + value + "' ).style.backgroundColor = '" + this.dropColor + "'; }" );
	
		this.options ++;
		
		if( selected ) this.checkOption( value, caption )
		
		if( this.options > 6 )
		{
			$( "opt_zone_" + this.name ).style.height = parseInt( this.dropHeight * 5 ) + "px";
			$( "opt_zone_" + this.name ).style.overflowY = 'scroll';
		}else{
			$( "opt_zone_" + this.name ).style.height = parseInt( this.dropHeight * this.options ) + "px";
			$( "opt_zone_" + this.name ).style.overflowY = 'hidden';
		}
	},
	
	openOptions : function()
	{
		$( "opt_zone_" + this.name ).style.display = 'block';
	},
	
	closeOptions : function()
	{
		$( "opt_zone_" + this.name ).style.display = 'none';
	},
	
	checkOption : function( value, caption )
	{
		$( 'edt_' + this.name ).value = caption;
		this.mainObject.value = value;
		this.closeOptions();
	}
	
}