var Proform = new Class({

	Implements: [Events, Options],
	
	options: {
		showDelay: 100,
		hideDelay: 100,
		FxDuration: 200,
		selectText: 'please selecte',
		classes: ''
	},

	initialize: function(elements, options){
		this.setOptions(options);
		this.elements = $(elements);
		this.replaceSelects();
		if (this.options.initialize) this.options.initialize.call(this);			
	},
	
	replaceSelects: function(){
		var selects = $$('#' + this.elements.getProperty('id') + ' select');
		selects.each(function(ele){
			var selectArea = new Element('div', {
				'id': "Container_mySelectText_" + ele.getProperty('id'),
				'class': this.options.classes + 'selectArea',
				'styles': {
					'magin-top': ele.getStyle('magin-top')
				}
			}).injectBefore(ele);
			
			var left = new Element('div', {
				'class': this.options.classes + 'txtLeft'
			}).inject(selectArea);
			
			var right = new Element('div', {
				'class': this.options.classes + 'txtRight'
			}).inject(left);
			
			var center = new Element('div', {
				'id': "mySelectText_" + ele.getProperty('id'),
				'class': this.options.classes + 'txtcenter',
				'styles': {
					'width': ele.getCoordinates().width
				}
			}).inject(right).set('html', this.getSelected(ele.getProperty('id')) );
			
			var button = new Element('div', {
				'id': "Btn_mySelectText_" + ele.getProperty('id'),
				'class': this.options.classes + 'button'
			}).inject(right);
			
			var clr = new Element('div', {'class': 'clr'}).inject(right);
			var clr = new Element('div', {'class': 'clr'}).inject(selectArea);
			
			this.installEvent(ele.getProperty('id'));
						
			var optionsDiv = new Element('div', {
				'id': "optionsDiv_" + $(ele).getProperty('id'),
				'class': this.options.classes + 'optionsDivInvisible',
				'styles': {
					'left':  selectArea.getCoordinates().left,
					'width': left.getCoordinates().width
				}
			}).injectAfter(selectArea);

			var list = $$('#' + $(ele).getProperty('id') + ' option');
			list.each(function(element){
				var optionLink = new Element('div', {'class': this.options.classes + 'optionList'}).inject(optionsDiv).set('html', element.get('text'));
				optionLink.addEvent('click', function(){
					this.selectMe( $(ele).getProperty('id'), element );
					this.showOptions( optionsDiv.getProperty('id'), $(ele).getProperty('id') );
				}.bind(this));
				
				var bg = optionLink.getStyle('background-color');
				bg = (bg == '' || bg == 'transparent') ? '#FFFFFF' : bg;
				
				var fx = new Fx.Styles(optionLink, {
					duration:this.options.FxDuration,
					wait:false
				});
				
				optionLink.addEvents({
					'mouseenter': function(){
						fx.start({ 'background-color': '#93D3FF' }); 
					}.bind(this),
					
					'mouseleave': function(){
						fx.start({ 'background-color': bg });
					}.bind(this)
				});
				
			}.bind(this));
			
			new Element('div', {'class': 'clr'}).inject(optionsDiv);
			if( (list.length * 20) > 200 ){
				optionsDiv.setStyles({
					'height': 200,
					'overflow': 'auto'
				});
			}
			
			ele.setStyle('display','none'); 
		}.bind(this));
	},
	
	showOptions: function(g, x) {
		var elem = $(g);		
		if(elem.getProperty('class') == this.options.classes + "optionsDivInvisible"){
			elem.setProperty('class', this.options.classes + "optionsDivVisible");			
			this.setup(true, g, x);
		}else if(elem.getProperty('class') == this.options.classes + "optionsDivVisible"){
			elem.setProperty('class', this.options.classes + "optionsDivInvisible");
		}
	},
	
	selectMe: function(selectFieldId, linkNo) {
		var list = $$('#' + selectFieldId + ' option');
		list.each(function(element){
			if( element.get('text') == linkNo.get('text') ){
				element.setProperty("selected", "selected");
				$("mySelectText_" + selectFieldId).set('html', element.get('text'));
				
				if( $(selectFieldId).getProperty('onchange') )
					$(selectFieldId).onchange();
			}else{
				element.setProperty("selected", "");
			}
		}.bind(this));
	},
	
	uninstallEvent: function(id){
		$('mySelectText_' + id).setStyle('color', '#BBBBBB');
		var selects = $$("#Btn_mySelectText_" + id);
		selects.each(function(ele){
			ele.removeEvents();
		}.bind(this));
	},
	
	installEvent: function(id){
		var selects = $$("#Btn_mySelectText_" + id);
		selects.each(function(ele){
			ele.addEvent('click', function(){
				this.showOptions( "optionsDiv_" + id, $(ele).get('id').replace(/Btn/, 'Container') );
			}.bind(this));  
		}.bind(this));
	},
	
	getSelected: function(id){
		var option = $$('#' + id + ' option');
		if(option.length > 0){
			option.each(function(element){
				if(element.getProperty("selected"))
					txt = element.get('text');
			});
			
			if(!txt)
				return $(id).getFirst().get('text');
			else
				return txt;
		}else
			return this.options.selectText;
	},
	
	setup: function(open, g, x) {
		this.g = $(g);
		this.x = $(x);
		var fn = open ? "addEvent" : "removeEvent";
		var position = this.position.bind(this);
		window[fn]("scroll", position)[fn]("resize", position);
	},
	
	position: function(){
		var coor = this.x.getCoordinates();
		var coor2 = this.g.getCoordinates();
		this.g.setStyles({
			'left': coor.left,
			'top': coor.bottom - 1
		});
		
		if ( coor2.width < coor.width)
			this.g.setStyle('width', coor.width - 2);
		
	}
	
});