function switchBanner(e, lofm, mapEvents, item, index) {
	
	e = new Event(e);
	lofm.makeAnimation( index );
	e.stop();
	if (item.getAttribute('href') != '') {	
		item.removeEvents('click');
		item.addEvent(  'click' , function(e) {
			location = item.getAttribute('href');
		}.bind(this) );
	}
	
	lofm.sliders.each( function(item2, index){
		if (item2 != item) {
			item2.removeEvents('click');
			item2.addEvent(  mapEvents[lofm.setting.eventHandler][0] , function() { switchBanner(e, lofm, mapEvents, item2, index) } );
		}
	}.bind(lofm) );	

}

if( typeof(LofmCordion) == 'undefined' ){
	var LofmCordion = new Class( {
		initialize:function( options ){
			this.setting = Object.extend({
				wapperSelector:$E('#lof-cordion-1 .lof-cordion-wapper'),
				startItem:0,
				isAuto:true,
				align:'center',
				eventHandler:'hover', // hover|click
				isPreload:true,
				widthDisplaying:32,
				maxWidth:765,
				minWidth:32,
				maxItem:10
			}, options || {} );
			this.lastNo = 0;
			var mapEvents = {hover:['mouseover'], click:['click']};
			this.panelPositioning = 1;
			this.fx = [];
			this.fxShadowItems = [];
			this.fxDescriptions = [];
			if( !$defined(this.setting.wapperSelector) ){ return ;	}
			this.sliders = $(this.setting.wapperSelector).getElements('ul li');
			this.setting.startItem = 0; //this.sliders.length - 1;
			
			var ul = $(this.setting.wapperSelector).getElements('ul');
			this.setting.maxWidth = parseInt(ul[0].style.width) - ( this.sliders.length - 1 )* this.setting.widthDisplaying;
						
			if( this.sliders.length <= 0 ){ return }	
			
			this.sliders.each( function(item, index){
				var seft = this;
				
				if (this.setting.eventHandler == 'click')
					item.addEvent(  mapEvents[this.setting.eventHandler][0] , function(e) { switchBanner(e,this, mapEvents, item, index) }.bind(this) );
				else {
					item.addEvent( mapEvents[this.setting.eventHandler][0] , function(e) { 
						e = new Event(e);
						this.makeAnimation( index );
						e.stop();
					}.bind(this) )
				} 
				item.setStyles( {display:'block', 'z-index':index+1, 'left':index*(this.setting.widthDisplaying)} );
				this.fx[index] = new Fx.Styles( item, {duration:500, transition:Fx.Transitions.Circ.easeInOut} ); 	
				this.fxShadowItems[index] = new Fx.Styles( item.getElement( '.lof-shadow' ), {duration:500, transition:Fx.Transitions.Circ.easeInOut} ); 	
				if (item.getElement( '.lof-description' ) != null) this.fxDescriptions[index] = new Fx.Styles( item.getElement( '.lof-description' ), {duration:700, transition:Fx.Transitions.linear} ).start({height:[0,0]}); 	
			}.bind(this) );
			/// preload iamges
			$image = this.setting.wapperSelector.getElements('img');
				$image.setStyles( {opacity:0, visibility:'hidden'} );
				$image.each( function( image, index ){
					//	if( image.complete ){
							setTimeout( function(){
								var fx = new Fx.Style( image, 'opacity', { duration:1000} );				 
								fx.start(0,1);
							}, 500 + 100*index )
					//	} else {
								
					//	}
				});
				
			///
			
			this.fxShadowItems[this.setting.startItem].start({opacity:0}); 
			if (typeof(this.fxDescriptions[this.setting.startItem]) != 'undefined') this.fxDescriptions[this.setting.startItem].stop().start({height:[90]});		
		},
		animateDescription:function(){
			
		},
		makeAnimation:function( activeIndex ) {  ///alert(activeIndex)
			
	//		this.fxShadowItems.start();
			this.fx.each( function(fx, currentIndex) { 
				var panelLeft = this.setting.minWidth * currentIndex;
				if ( (currentIndex * this.panelPositioning) > ( activeIndex * this.panelPositioning)){
					panelLeft = panelLeft + (this.setting.maxWidth - this.setting.minWidth) * this.panelPositioning;
				}
				fx.start( {left:[panelLeft]} );
				
				if( activeIndex != currentIndex ){
					if (typeof(this.fxDescriptions[currentIndex]) != 'undefined') this.fxDescriptions[currentIndex].start({height:0})
					this.fxShadowItems[currentIndex].start( {opacity:1});
				}
	
			}.bind(this) );
			

			this.fxShadowItems[activeIndex].start({opacity:0});
			this.lastNo = activeIndex;
			if (typeof(this.fxDescriptions[activeIndex]) != 'undefined') this.fxDescriptions[activeIndex].start({height:90});		
		}
	} );
}