var WBBasket = new Class( {
	Implements : [Options,Events],	
	options: {
			container : '',
			elements: {
				main: {
					tag: 'div'
				},
				direction: {
					tag: 'select',
					subElements: [{
						tag : 'option',
						value: 'from',
						'text': 'from'
					}, {
						tag : 'option',
						value: 'to',
						text: 'to'
					}]
				},
				reselect: {
					tag: 'span'
				},
				destination: {
					tag: 'span'
				},
				basketOut: {
					tag: 'span'
				},
				basketIn: {
					tag: 'span'
				},
				validate: {
					tag: 'button'	
				},
				intro: {
					tag: 'span'
				},
				inviteSelect: {
					tag: 'span' 
				}
			},
			text: {
				to: ' to ',
				from: ' from ',
				to_intro: 'I want to fly to ',
				from_intro: 'I want to fly from ',
				intro: 'I want to fly ',
				search: 'Search',
				change: 'Change',
				invite_select: 'Select country/airport from the list'
			},
			direction : 'from',
			disableReselect : false /* ,
			onBeforeRenderBasket : function(){},
			onAfterRenderBasket : function(){},*/
		},
		main: null,
		direction: null,
		reselect: null,
		destination: null,
		basketOut: null,
		basketIn: null,
		validate: null,
		intro: null,
		inviteSelect: null,
		line1: null,
		line2: null,
		line3: null,
		content: {
			item1: null,
			item2: null
		},
		getText: function(label){
			return this.options.text[label] ? this.options.text[label] : '@'+label+'@';
		},
		setText: function( label , value){
			this.options.text[label] = value ;
		},
		initialize : function( options ){
			if( options )
				this.setOptions( options );
		},
		render: function(  container, position){
			
			// elements creation
			if (!this.main) {
				this.main = WBHelper.createElement(this.options.elements.main);
				if (container) {
					if ($type(container) == 'element') 
						this.container = container;
					else 
						this.container = $(container);
				}
				else 
					if (!this.options.container) 
						this.container = document.body;
					else {
						if ($type(this.options.container) == 'element') 
							this.container = this.options.container;
						else 
							this.container = $(this.options.container);
					}
				if (!position) 
					position = null;
				this.main = this.main.inject(this.container, position);
			}
			this.intro = WBHelper.createElement(this.options.elements.intro);
			this.direction = WBHelper.createElement(this.options.elements.direction);
			// set labels
			for(i=0;i<this.direction.options.length;i++){
				this.direction.options[i].set( 'text' , this.getText( this.direction.options[i].value ))
			}
			this.setDirection( this.getDirection());

			this.reselect = WBHelper.createElement(this.options.elements.reselect);
			this.destination = WBHelper.createElement(this.options.elements.destination);
			this.basketOut = WBHelper.createElement(this.options.elements.basketOut);
			this.basketIn = WBHelper.createElement(this.options.elements.basketIn);
			this.validate = WBHelper.createElement(this.options.elements.validate);
			this.inviteSelect = WBHelper.createElement(this.options.elements.inviteSelect);
			
			this.intro.setProperty( 'text', this.getText('intro'));
			this.validate.setProperty('text', this.getText('search'));
			this.validate.setStyle('display', 'none');
			this.inviteSelect.setProperty('text', this.getText('invite_select'));
			this.reselect.setProperty('text', this.getText('change'));
			// DOM appending
			// To change element order on display - do it here
			this.line1 = new Element('p').inject(this.main, 'top');
			this.intro.inject(this.line1);
			this.direction.inject(this.line1);
			
			
			this.line2 = new Element('p', {
				styles: {
					display: 'none'
				}
			}).inject(this.line1, 'after');
			this.basketOut.inject(this.line2);
			
			if(this.options.disableReselect == true)
				this.reselect = null ;
			else
				this.reselect.inject(this.line2);
			
			
			this.line3 = new Element('p', {
				styles: {
					display: 'none'
				}
			}).inject(this.line2, 'after');
			this.destination.inject( this.line3 );
			
			
			this.line4 = new Element('p').inject(this.main, 'bottom');
			this.validate.inject(this.line4);	
			this.basketIn.inject( this.line4 );	
			this.inviteSelect.inject(this.line4);	
		},
		addItem: function(item){
			if (!this.content.item1) 
				this.content.item1 = item;
			else 
				this.content.item2 = item;
		},
		replaceItem: function(item){
			if (this.content.item2) 
				this.content.item2 = item;
			else 
				this.content.item1 = item;
		},
		removeItem: function(){
			if (this.content.item2) 
				this.content.item2 = null;
			else 
				this.content.item1 = null;
		},
		isEmpty: function(){
			if (!this.content.item1) 
				return true;
			else 
				return false;
		},
		renderBasket: function(){
			action = null;
			if (this.content.item1 && !this.content.item2) 
				action = 1;
			else 
				if (this.content.item1 && this.content.item2) 
					action = 2;
			this.fireEvent('beforeRenderBasket', action );
			switch (action) {
				case 1:
					this.basketOut.set('text', this.content.item1);
					this.line2.setStyles({
						display: 'block'
					});
					this.line3.setStyles({
						display: 'block'
					});
					this.direction.set('styles', {
						'display': 'none'
					});
					this.basketOut.set('styles', {
						'visibility': 'visible'
					});
					if(this.reselect){
						this.reselect.set('styles', {
							'visibility': 'visible'
						})
					}
					this.destination.set('styles', {
						'visibility': 'visible'
					});
					
					break;
				case 2:
					this.basketIn.set('text', this.content.item2);
					this.inviteSelect.set('styles', {
						'display': 'none'
					});
					this.basketIn.set('styles', {
						'visibility': 'visible'
					});
					
					this.validate.set({
						styles: {
					        visibility:'visible',
					        display: 'block'
					    }
					});
					
					break;
				default:
					
					this.inviteSelect.setStyles({
						'display': 'block'
					});
					
					this.line2.setStyles({
						display: 'none'
					});
					this.line3.setStyles({
						display: 'none'
					});
					this.line4.setStyles({
						visibility: 'visible'
					});
					this.basketOut.set('html', '');
					this.basketIn.set('html', ''),
					this.basketIn.set( 'styles', {
							'visibility': 'hidden'
						});
					this.direction.set('styles', {
						'display': ''
					});
					this.validate.set('styles', {
						'visibility': 'hidden',
						display: 'none'
					});
					
					break;
			}
			this.setLabels();
			this.fireEvent('afterRenderBasket', action );
		},
		setLabels: function(){
			d = this.getDirection() ;
			sbl_rf = (d == 'from') ? 'to' : 'from';
			this.intro.innerHTML = this.isEmpty() ? this.getText('intro') : this.getText(d + '_intro');
			this.destination.innerHTML = this.getText(sbl_rf);
			
			sbl_rf = null;
		},
		reset: function(){
			this.removeItem();
			this.removeItem();
		},
		clear: function(){
			this.reset();
			this.renderBasket();
		}, 
		setDirection: function( d ){
			this.options.direction = d ;
			for(i=0;i<this.direction.options.length;i++){
				if(this.direction.options[i].value == d){
					this.direction.options[i].selected = true ;
					break;
				}
			}
		},
		getDirection : function(){
			return this.options.direction;
		},
		getContentText: function( field ) {
			if( this.getDirection() == 'from' ) {
				if( field == 'origin' )
					return this.content.item1;
				else if( field == 'destination' )
					return this.content.item2;
			} else {
				if( field == 'origin' )
					return this.content.item2;
				else if( field == 'destination' )
					return this.content.item1;
			}
			return false; //field is bad
		}
});