(function($){
	
	this.PricePlanBar = new Class({
		Implements: [Options, Events],
		options: {
			elements: 'div.priceplan-background',
			blocks: 'div.priceplan',
			cssleft: 'priceplan-corner-left',
			cssmiddle: 'priceplan-background',
			cssright: 'priceplan-corner-right',
			additionals: ['div#boosters','div#step2header']
		},
		initialize: function(elements, options){
			this.setOptions(options);
			this.elements = $$(this.options.elements);
			this.blocks = $$(this.options.blocks);
			this.additionals = $$(this.options.additionals);
			
			
			this.radios = this.elements.getElement('input');
			this.radios.setStyle('display','none');
			
			this.elements.addEvents({
				mouseover: this._mouseoverHandler.bindWithEvent(this),
				mouseout: this._mouseoutHandler.bindWithEvent(this),
				mousedown: this._mousedownHandler.bindWithEvent(this),
				mouseup: this._mouseupHandler.bindWithEvent(this),
				click: this._clickHandler.bindWithEvent(this)				
			});
			
			if(Cookie.read('pp-tabs')){
			
				this.elements.each(function(container, index){
											
					if(Cookie.read('pp-tabs') == index){
						
						this.radios[index].set('checked','checked');
						this.blocks[index].setStyle('display','block');
						
						if(container.hasClass(this.options.cssleft)){
							container.addClass(this.options.cssleft + '-selected');
						} else if(container.hasClass(this.options.cssright)){
							container.addClass(this.options.cssright + '-selected');
						} else {
							container.addClass(this.options.cssmiddle + '-selected');	
						}
						this.additionals.setStyle('display','block');
						
					}
				
				}.bind(this));
			
			}			
			
		},
		_mouseoverHandler: function(event){
			var target = $(event.target).getParent(this.options.elements) || $(event.target);
			
			if(target.hasClass(this.options.cssleft)){
				target.addClass(this.options.cssleft + '-over');
			} else if(target.hasClass(this.options.cssright)){
				target.addClass(this.options.cssright + '-over');
			} else {
				target.addClass(this.options.cssmiddle + '-over');	
			}
		},
		
		_mouseoutHandler: function(event){
			var target = $(event.target).getParent(this.options.elements) || $(event.target);
			
			if(target.hasClass(this.options.cssleft)){
				target.removeClass(this.options.cssleft + '-over');
			} else if(target.hasClass(this.options.cssright)){
				target.removeClass(this.options.cssright + '-over');
			} else {
				target.removeClass(this.options.cssmiddle + '-over');	
			}			
		},
		
		_mousedownHandler: function(event){
			var target = $(event.target).getParent(this.options.elements) || $(event.target);
			
			if(target.hasClass(this.options.cssleft)){
				target.addClass(this.options.cssleft + '-down');
			} else if(target.hasClass(this.options.cssright)){
				target.addClass(this.options.cssright + '-down');
			} else {
				target.addClass(this.options.cssmiddle + '-down');	
			}			
		},
		
		_mouseupHandler: function(event){
			var target = $(event.target).getParent(this.options.elements) || $(event.target);
			
			if(target.hasClass(this.options.cssleft)){
				target.removeClass(this.options.cssleft + '-down');
			} else if(target.hasClass(this.options.cssright)){
				target.removeClass(this.options.cssright + '-down');
			} else {
				target.removeClass(this.options.cssmiddle + '-down');	
			}			
		},
		
		_clickHandler: function(event){
			
			event.stop();
			this.additionals.setStyle('display','block')
						
			var target = $(event.target).getParent(this.options.elements) || $(event.target);
			
			this.elements.each(function(container, index){
				
				if(container === target){
					this.radios[index].set('checked','checked');
					this.blocks[index].setStyle('display','block');
					
					if(container.hasClass(this.options.cssleft)){
						container.addClass(this.options.cssleft + '-selected');
					} else if(container.hasClass(this.options.cssright)){
						container.addClass(this.options.cssright + '-selected');
					} else {
						container.addClass(this.options.cssmiddle + '-selected');	
					}
					
					var cookie = Cookie.write('pp-tabs', index, {duration: 10000})
					
				} else {
					this.radios[index].removeAttribute('checked');
					this.blocks[index].setStyle('display','none');
					
					if(container.hasClass(this.options.cssleft)){
						container.removeClass(this.options.cssleft + '-selected');
					} else if(container.hasClass(this.options.cssright)){
						container.removeClass(this.options.cssright + '-selected');
					} else {
						container.removeClass(this.options.cssmiddle + '-selected');	
					}						
				}
				

			}.bind(this));
		}
	});
	
	this.BoostersSelector = new Class({
		Implements: [Options, Events],
		options: {
			elements: 'div.booster',
			blocks: 'div.booster-info',
			pointer: 'booster-arrow',
			cssleft: 'booster-left',
			cssmiddle: 'booster',
			cssright: 'booster-right',
			offset:0
		},
		initialize: function(options){
			this.setOptions(options)
			this.elements = $$(this.options.elements);
			this.blocks = $$(this.options.blocks);
			this.pointer = $(this.options.pointer);
			
			this.pointer.setStyle('display','none');
			this.blocks.setStyle('display','none');
			
			this.elements.addEvents({
				mouseover: this._mouseoverHandler.bindWithEvent(this),
				mouseout: this._mouseoutHandler.bindWithEvent(this),
				mousedown: this._mousedownHandler.bindWithEvent(this),
				mouseup: this._mouseupHandler.bindWithEvent(this)
			});
			
			this.elements.each(function(element, index){
				if (element.getElement('input')) {
					element.addEvent('click', this._clickHandler.bindWithEvent(this));
					element.getElement('input').addEvent('click', this._clickHandler.bindWithEvent(this));
				}
			}.bind(this));
			
			if(this.elements[0].getElement('input')){
				this.blocks[0].addClass('block-selected');
				this.blocks[0].setStyle('z-index', '145');
				
				this.pointer.setStyles({
					'display':'block',
					'left': 40 
				});				
			}
			
		},
		
		_radioHandler: function(event){
			event.stop();
		},
		
		_mouseoverHandler: function(event){

			var target = $(event.target).getParent(this.options.elements) || $(event.target);

			this.blocks[this.elements.indexOf(target)].setStyle('display','block');
				
			
			this.pointer.setStyles({
				'display':'block',
				'left': Math.floor(target.getPosition(target.getParent()).x + (target.getSize().x / 2 - this.pointer.getSize().x / 2)) 
			});	
						
			if(target.hasClass(this.options.cssleft)){
				target.addClass(this.options.cssleft + '-over');
			} else if(target.hasClass(this.options.cssright)){
				target.addClass(this.options.cssright + '-over');
			} else {
				target.addClass(this.options.cssmiddle + '-over');	
			}
			
			this.pointer.setStyles({
				'display':'block',
				'left': Math.floor(target.getPosition(target.getParent()).x + (target.getSize().x / 2 - this.pointer.getSize().x / 2)) 
			});
			
		},
		
		_mouseoutHandler: function(event){
			var target = $(event.target).getParent(this.options.elements) || $(event.target);

			this.blocks.setStyle('display','none');
			
			if(target.getElement('input')){

				this.elements.each(function(element, index){
					
					if (element.get('class').contains('-selected')) {
					
						this.pointer.setStyles({
							'display': 'block',
							'left': Math.floor(element.getPosition(element.getParent()).x + (element.getSize().x / 2 - this.pointer.getSize().x / 2))
						});
						
					}  else {
						
					}
					
				}.bind(this));
				
			} else {
				
				this.pointer.setStyle('display','none');	
				
			}
			

			if(target.hasClass(this.options.cssleft)){
				target.removeClass(this.options.cssleft + '-over');
			} else if(target.hasClass(this.options.cssright)){
				target.removeClass(this.options.cssright + '-over');
			} else {
				target.removeClass(this.options.cssmiddle + '-over');	
			}	
		},
		
		_mousedownHandler: function(event){
			
		},
		
		_mouseupHandler: function(event){
			
		},
		
		_clickHandler: function(event){
			var target = $(event.target).getParent(this.options.elements) || $(event.target);

			if (target.getElement('input')) {
			
				this.elements.each(function(element, index){
					if (index === this.elements.indexOf(target)) {
					
						this.blocks[index].addClass('block-selected');
						this.blocks[index].setStyle('z-index', '145');
						
						element.getElement('input').set('checked', 'checked');
						
						if (element.hasClass(this.options.cssleft)) {
							element.addClass(this.options.cssleft + '-selected');
						}
						else 
							if (element.hasClass(this.options.cssright)) {
								element.addClass(this.options.cssright + '-selected');
							}
							else {
								element.addClass(this.options.cssmiddle + '-selected');
							}
						
					}
					else {
					
						this.blocks[index].removeClass('block-selected');
						this.blocks[index].setStyle('z-index', '150');
						
						
						element.getElement('input').removeProperty('checked');
						
						if (element.hasClass(this.options.cssleft)) {
							element.removeClass(this.options.cssleft + '-selected');
						}
						else 
							if (element.hasClass(this.options.cssright)) {
								element.removeClass(this.options.cssright + '-selected');
							}
							else {
								element.removeClass(this.options.cssmiddle + '-selected');
							}
					}
				}.bind(this));
				
				
				this.pointer.setStyles({
					'display':'block',
					'left': Math.floor(target.getPosition(target.getParent()).x + (target.getSize().x / 2 - this.pointer.getSize().x / 2)) 
				});
			} else {
				this.pointer.setStyle('display','none')
			}
	
		}					
		
	});
	
})(document.id)

/*window.addEvent('domready', function(){
	
	var ppb = new PricePlanBar({
		elements: 'div.priceplan-background',
		blocks: 'div.priceplan',
		cssleft: 'priceplan-corner-left',
		cssmiddle: 'priceplan-background',
		cssright: 'priceplan-corner-right',
		additionals: ['div#boosters','div#step2header']
	});
	
	var hb = new HTMLbox({width: 800});
	var bb = new BoostersSelector({
		elements: 'div.booster',
		blocks: 'div.booster-info',
		pointer: 'booster-arrow',
		cssleft: 'booster-left',
		cssmiddle: 'booster',
		cssright: 'booster-right',
		offset:12
	});
	
});*/