var BannerWidget = new Class({
		Implements: [Events],

		outOfBannerArea:true,
		
		initialize: function(tabs, banner){

			tabs.getElements('div.tab').each(function(n){
				n.setStyles({left: -340});
			})
			var i=4;
			var j=20;
			$('tab-1').setStyles({'position': 'absolute', 'zIndex': ++j});
			$('tab-2').setStyles({'position': 'absolute', 'zIndex': ++j});
			$('tab-3').setStyles({'position': 'absolute', 'zIndex': ++j});			
			$('label-1').setStyles({'position': 'absolute', 'zIndex': ++j});
			$('label-2').setStyles({'position': 'absolute', 'zIndex': ++j});
			$('label-3').setStyles({'position': 'absolute', 'zIndex': ++j});

			tabs.getElements('a').each(function(n, index){
				n.addEvent('mouseenter', function(event){
					n.getNext('div').get('tween', {property: 'left', duration: 400, transition: Fx.Transitions.Cubic.easeOut}).start(0);
						$('img'+(index+1)).setStyles({'position': 'absolute', 'zIndex': ++i, 'opacity': 0});
						$('img'+(index+1)).get('tween', {property: 'opacity', duration: 400, transition: Fx.Transitions.Cubic.easeOut}).start(1);
						$('tab-1').setStyles({'position': 'absolute', 'zIndex': ++j});
						$('tab-2').setStyles({'position': 'absolute', 'zIndex': ++j});
						$('tab-3').setStyles({'position': 'absolute', 'zIndex': ++j});			
						$('label-1').setStyles({'position': 'absolute', 'zIndex': ++j});
						$('label-2').setStyles({'position': 'absolute', 'zIndex': ++j});
						$('label-3').setStyles({'position': 'absolute', 'zIndex': ++j});
				})
				n.addEvent('mouseleave', function(event){
					var tweenBack = function(){
							n.getNext('div').get('tween', {property: 'left', duration: 400, transition: Fx.Transitions.Cubic.easeOut}).start(-340);
					}.bind(this);
					tweenBack();
				}.bind(this));
				
			}, this)

		}
})