var ProToPage = 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', {
				'class': this.options.classes + 'selectArea',
				'styles': {
					'magin-top': ele.getStyle('magin-top')	
				}
			}).injectBefore(ele);
			
			var center = new Element('div', {
				'id': "mySelectText_" + ele.getProperty('id'),
				'class': this.options.classes + 'txtcenter',
				'styles': {
					'width': ele.getCoordinates().width
				}
			}).inject(selectArea);
			
			center.set('html', this.getSelected(ele.getProperty('id')));
			
			selectArea.setStyles({
				'width': center.getCoordinates().width,
				'height': center.getCoordinates().height
			});

			var optionsDiv = new Element('div', {
				'class': this.options.classes + 'optionsDivInvisible',
				'id': "optionsDiv_" + ele.getProperty('id'),
				'styles': {
					'width': center.getCoordinates().width - 2,
					'left': center.getCoordinates().left,
					'top': center.getCoordinates().bottom - 1 
				}
			}).inject(document.body);
			
			this.installEvent(ele.getProperty('id'));
			ele.setStyle('display','none'); 
			
			var list = $$('#' + $(ele).getProperty('id') + ' option');
			list.each(function(element){
				var optionLink = new Element('div', {
					'class': this.options.classes + 'optionList'
				}).inject(optionsDiv);
				
				optionLink.set('html', element.get('text'));
				
				optionLink.addEvent('click', function(){
					this.showOptions( optionsDiv.getProperty('id'), $(ele).getProperty('id') );
					this.selectMe( ele.getProperty("id"), element );
				}.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));
			if( (list.length * 20) > 200 ){
				optionsDiv.setStyle('height', 200);	
			}
		}.bind(this));
	},
	
	showOptions: function(g, x) {
		this.g = $(g);
		this.x = $(x);
		if(this.g.getProperty('class') == this.options.classes + "optionsDivInvisible"){
			this.g.setProperty('class', this.options.classes + "optionsDivVisible");
			this.position();
			this.setup(true);
		}else if(this.g.getProperty('class') == this.options.classes + "optionsDivVisible"){
			this.g.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).setStyles({ 'color': '#BBBBBB' });
		var selects = $$("#mySelectText_" + id);
		
		selects.each(function(ele){
			ele.removeEvents();
		}.bind(this));
	},
	
	installEvent: function(id){
		//$('mySelectText_' + id).setStyles({ 'color': '#444444' });
		var selects = $$("#mySelectText_" + id);
		selects.each(function(ele){
			ele.addEvent({
				'mouseenter': function(){
					ele.setStyles({ 'background-position':'right -15px' });
				},
				
				'mouseleave': function(){
					ele.setStyles({ 'background-position':'right 2px' });
				}
			});
			ele.addEvent('click', function(){ this.showOptions( "optionsDiv_" + id, $(ele).get('id') ); }.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) {
		var fn = open ? "addEvent" : "removeEvent";
		var position = this.position.bind(this);
		window[fn]("scroll", position)[fn]("resize", position);
	},
	
	position: function(){
		this.g.setStyles({'left': this.x.getCoordinates().left});
	}
	
});