var Suggestion2 = new Class({

	Implements: [Events, Options],
	
	options: {
		onShow: function(){
			this.container.setStyle('display', '');	
			this.position();
		},
		onHide: function(){
			this.container.setStyle('display', 'none');	
		},
		duration: Fx.Durations.long,
		wait: false,
		define: '_ajax/',
		form: '',
		url: '',
		MapUrl: '',
		PickUrl: '',
		showPick: '',
		parent: [],
		value: ''
	},
	
	initialize: function(element, options){
		this.setOptions(options);
		this.element = $(element);
		this.Err = new ErrorBox({ 'width': 850, closeBx:true });
		this.build();
		this.setup(true);
	},
	
	build: function(){
		if( !$('sgContainer') ){
			this.container = new Element("ul", {
				'id': "sgContainer",
				'class': "sgContainer"
			}).setStyle('display', 'none').inject(document.body);
		}else{
			this.container = $('sgContainer');
		}
			
		this.element.addEvent('keyup', function(){
			this.makeList();
		}.bind(this));
	},
	
	show: function(){
		this.fireEvent('onShow');
	},
	
	hide: function(){
		this.fireEvent('onHide');
	},
	
	makeList: function(){
		var parent = this.element;
		var hide = this.hide.bind(this);
		var dimension = this.dimension.bind(this);
		var position = this.position.bind(this);
		var url = this.options.define + this.options.url;
		var Err = this.Err;
		var container = this.container;
		var createMap = this.areaMap.bind(this);
		var createPickup = this.Pickup.bind(this);
		this.Request = new Request({
			url: url,
			onSuccess: function(txt){
				var arr = txt.split("::");
				container.empty();
				if( arr != '' ){
					arr.forEach(function(txt){
						var row = new Element("li").set('text', txt).inject(container);
						row.addEvents({
							'mouseenter': function(){
								this.addClass('hover');
							},
							'mouseleave': function(){
								this.removeClass('hover');
							},
							'click': function(){
								parent.value = this.get('text');	
								createMap();
								createPickup();
								hide();
							}
						});
					});
					position();
					dimension();
				}
				/*if(txt == ""){
					alert('Hotel invalid in the list.\nPless re-enter hotel or select "Terminal".');
					parent.value = "";
				}*/
			},
			
			onRequest: function(){
				if( $defined( $('map') ) ){
					$('map').dispose();
				}
				
				if( $defined( $('pickuptime') ) ){
					$('pickuptime').dispose();
				}
			}
		});
		
		if(this.element.get('value').length > 0){
			var arr = this.Request.send( getValue($(this.options.form)) );
			this.show();
		}else{
			this.container.empty();
			this.hide();
		}
	},
	
	dimension: function() {
		var Coor = this.container.getCoordinates();
		var Parent = this.element.getCoordinates();
		var win_height = window.getHeight();
		var cur_height = win_height - Parent.bottom;
		if (Coor.height >= cur_height) {
			this.container.setStyle('height', cur_height - 10);
		} else {
			this.container.setStyle('height', 'auto');	
		}
	},
	
	setup: function(open) {
		var fn = open ? "addEvent" : "removeEvent";
		var position = this.position.bind(this);
		window[fn]("scroll", position)[fn]("resize", position);
	},
	
	position: function(){
		this.container.setStyles({
			'left': this.element.getCoordinates().left,
			'top': this.element.getCoordinates().bottom - 1,
			'width': this.element.getCoordinates().width - 2
		});
	},
	
	areaMap: function(){
		var url = this.options.define + this.options.MapUrl;
		var parent = this.element.getParent();
		var Err = this.Err;
		new Request({
			url: url,
			onSuccess: function(txt) {
				if( txt != 0 ){
					if( $('map') )
						var mapIcon = $('map');
					else{
						var mapIcon = new Element('a', {
							'id':'map',
							'href': txt,
							'styles': {
								'margin-left': 20
							}
						}).set('text', 'View Map.').inject(parent);
					}
					mapIcon.addEvent('click', function(){
						Err.start('<div class="mapView"><img src="' + txt + '" /></div>');
						return false;
					}.bind(this));
				}
			},
			onFailure: function() {
				Err.start('Sorry!! Connecting error please try again.');
			}
		}).send('location=' + this.element.value);	
	},
	
	Pickup: function(){
		if( this.element.id == 'depart_pickup' ){
			var url = this.options.define + this.options.PickUrl;
			var parent = $(this.options.showPick);
			var Err = this.Err;
			var pickup = new Request({
				url: url,
				onSuccess: function(txt) {
					if( txt != 0 ){
						parent.set('text', '');
						var mapIcon = new Element('div', {
							'class': 'red',
							'id': 'pickuptime',
							'styles': {
								'padding-top': 10
							}
						}).set('html', 'Pickup Time: ' + txt).inject(parent);
						//new Element('div', {class: 'clr'}).inject(parent);
					}
				},
				
				onFailure: function() {
					Err.start('Sorry!! Connecting error please try again.');
				}
				
			});
			
			pickup.send('RouteID=' + $('departRoute').value + '&RoundID=' + $('departTime').value + '&location=' + this.element.value);	
		}
	}
	
});