var PhoneInput = new Class({
	Implements : Options,
	
	options : {
		country_codes : [],
		city_codes : [],
		input_name : ''
	},
	

	wrapper : null,
	controls : {},
	currentCityCode : '#',
	dropDownVisible : false,
	
	initialize : function(options)
	{
		var Arr = options;
		this.phone = Arr['phone']?Arr['phone']:false;
		//alert(this.phone);
		this.setOptions(options);
		this.wrapper = new Element('div');
		this._buildMe();
		
	},
	
	isOK : function()
	{
		if (!this.controls.cityCode.value || !this.controls.number.value)
			return false;
		return true;
	},
	
	getValue : function() { return this.controls.result.value; },
	
	setValue : function(code, number)
	{
		this.controls.cityCode.value = code;
		this.controls.number.value = number;
		this._formatNumber();
		this._setNumber();
	},
	
	clearValue : function()
	{
		this.controls.cityCode.value = '';
		this.controls.number.value = '';
		this._setNumber();
	},
	
	setInputName : function(str)
	{
		this.options.input_name = str;
		this.controls.result.set('name', str);
	},
	
	remove : function()
	{
		this.wrapper.parentNode.removeChild(this.wrapper);
	},
	
	disable : function(flag)
	{
		[this.controls.countryCode, this.controls.cityCode, this.controls.number].each(function(item){
			flag ? item.addClass('input_disabled') : item.removeClass('input_disabled');
			item.disabled = flag;
		});
	},
	
	_toggleDropDown : function(flag)
	{
		this.controls.dropDown.setStyle('display', flag ? 'block' : 'none');
		if (flag)
		{
			pos = this.controls.cityCode.getPosition();
			sz = this.controls.cityCode.getSize();
			this.controls.dropDown.setStyle('top', (pos.y + sz.y) + 'px');
			this.controls.dropDown.setStyle('left', pos.x + 'px');
			this._fillDropDown();
		}
		else
			this.revertObjects();
		
	},
	
	revertObjects: function()
	{
		if(this.objects && this.objects.length)
		{
			this.objects.each(function(el){
				el.style.visibility = 'visible';	
			});
			this.objects = null;
		}
	},
	
	_fillDropDown : function()
	{
                str = this.controls.cityCode.value.replace(/\D+/g, '');
		if (str.length > 3)
			str = str.substr(0, 3);
		this.controls.cityCode.value = str;
		var p = this.controls.cityCode.value;
		if (this.currentCityCode != '#' && p == this.currentCityCode)
		{
			this.objects = revertElements(this.objects);
			this.objects = hideElements(this.controls.dropDown);
			return;
		}
		
		this.controls.dropDown.empty();
		
		this.options.city_codes.each(function(code){
			if (p && code.indexOf(p) !== 0)
				return;
			var el = new Element('div', {
				'class' : 'dropDownItem',
				'html' : code,
				'events' : {
					'click' : function() {
						this.controls.cityCode.value = code.substr(0, 3);
						this._toggleDropDown(false);
						this._setNumber();
					}.bind(this)
				}
			});
			this.controls.dropDown.grab(el);
		}, this);
		this.currentCityCode = p;
		
		this.objects = revertElements(this.objects);
		this.objects = hideElements(this.controls.dropDown);
	},
	
	_formatNumber : function()
	{
		str = this.controls.number.value.replace(/\D+/g, '');
		if (str.length > 3)
			str = str.substr(0, 3) + '-' + str.substr(3);
		this.controls.number.value = str;
	},
	
	_setNumber : function()
	{
		var str = '+7';
		str += '(' + this.controls.cityCode.value + ')';
		str += this.controls.number.value;
		this.controls.result.value = str;
		
                if(Change_button)
                {
					if(this.phone){
						Change_button2();
					}else{
						Change_button();
					}
                }
	},
	
	_buildMe : function()
	{
		this.controls.result = new Element('input', {
			'type' : 'hidden',
			'name' : this.options.input_name,
			'id' : this.options.input_id,
			'value' : '+7()'
                        
		});
		this.wrapper.grab(this.controls.result);
		
		var txt = document.createTextNode('+7 ( ');
		this.wrapper.grab($(txt));
		
		this.controls.cityCode = new Element('input', {
			'type' : 'text',
                        'maxlength':'3',
			'events' : {
				'blur' : function() {
					this._toggleDropDown.delay(500, this, false);
					this._setNumber();
				}.bind(this),
				'focus' : function() { this._toggleDropDown(true); }.bind(this),
				'keyup' : this._fillDropDown.bind(this),
				'keypress' : this._fillDropDown.bind(this)
			},
			'styles' : {'width' : '52px', 'height' : '28px'}
		});
		this.wrapper.grab(this.controls.cityCode);
		
		var txt = document.createTextNode(' ) ');
		this.wrapper.grab($(txt));
		
		this.controls.number = new Element('input', {
			'type' : 'text',
			'styles' : {'width' : '174px', 'height' : '28px'},
			'maxlength' : '8',
			'events' : {
				'blur' : function() {
					this._formatNumber();
					this._setNumber();
				}.bind(this),
				'keyup' : function() {
					this._formatNumber();
					this._setNumber();
				}.bind(this),
				'keypress' : function() {
					this._formatNumber();
					this._setNumber();
				}.bind(this)
			}
		});
		this.wrapper.grab(this.controls.number);
		
		this.controls.dropDown = new Element('div', {'class' : 'dropDownSearch'});
		$(document.body).grab(this.controls.dropDown);
	}
});