Element.Events.extend({
	'wheelup': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel >= 0) this.fireEvent('wheelup', event)
		}
	},

	'wheeldown': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
		}
	}
});

var coverflow = new Class( {
	defaultOptions: function() {
		return {
			container: document,
			targetImageClass: ".coverflowImg",
			targetTitreClientsClass: ".boxClientTitreHidden",
			targetClientsClass: ".boxClientHidden",
			targetTechnosClass: ".boxTechnoHidden",
			dimThumb: { width:300, height:225 },
			dimFocus: { width:400, height:300 },
			opacity: { start: 1, end: 1 },
			valign: 'middle',
			display: Math.round( $$('.coverflowImg').length/2 )-1,
			transitionDuration: 200,
			sliderflow: '',
			wheel: {up:0, down:0, step:1}
		};
	},

	initialize: function(options) {
		this.setOptions(this.defaultOptions(), options);
		this.imgs = $$(this.options.targetImageClass);
		this.clients = $$(this.options.targetClientsClass);
		this.titres = $$(this.options.targetTitreClientsClass);
		this.technos = $$(this.options.targetTechnosClass);
		this.overfxs = new Fx.Elements( this.imgs, {duration: this.options.transitionDuration, 'wait': false, transition: Fx.Transitions.linear} );
		
		this.imgs.each(function(obj, i) {
			var objProperties = this._getProperties(i);
			obj.setStyles({
				width: objProperties.width,
				height: objProperties.height,
				opacity:  objProperties.opacity,
				'z-index' : objProperties.zindex,
				'margin-top' : objProperties.margintop+'px'
			});
			obj.addEvent( 'click', function( event ) { new Event( event ).stop(); this.animate( i ) }.bind(this));
		}.bind(this));

		this.options.sliderflow = new Slider($('sliderflow'), $('knob'), {
			steps: (this.imgs.length -1),
			onChange: function(pos){
				this.animate( pos );
			}.bind(this)
		});

		this.options.sliderflow.set( this.options.display );

		this.options.container.addEvents({
			'wheelup': function(e) {
				this.options.wheel.down=0;
				e = new Event(e).stop();
				if ( this.options.wheel.up++>=this.options.wheel.step ) {
					var next = this.options.display - 1;
					if ( next<0 ) return;
					this.animate( next );
					this.options.wheel.up=0;
				}
			}.bind(this),
			'wheeldown': function(e) {
				this.options.wheel.up=0;
				e = new Event(e).stop();
				if ( this.options.wheel.down++>=this.options.wheel.step ) {
					var next = this.options.display + 1;
					if ( next>=this.imgs.length ) return;
					this.animate( next );
					this.options.wheel.down=0;
				}
			}.bind(this)
		});

		this.animate( this.options.display );

		// new Tips($$('.coverflowImg', '#knob' ), { timeOut: 700, maxTitleChars: 50, maxOpacity: .9 });
	},

	animate: function( i ) {
		this.options.display = i;
		this.options.sliderflow.set(this.options.display);
	
		var obj = {};

		this.imgs.each(function( img , i ) {
			var objProperties = this._getProperties(i);
			img.setStyle( 'z-index', objProperties.zindex );
			obj[i] = {
				width: objProperties.width,
				height: objProperties.height,
				opacity:  objProperties.opacity,
   				'margin-top' : objProperties.margintop+'px',
				padding: 0
			};
		}.bind(this));

		this.overfxs.start(obj);

		// charger le contenu concernant le client
		//$('content_clients').setHTML('<H1>'+this.titres[i].innerHTML+'</H1>');
		//$('content_clients').appendText(this.clients[i].innerHTML);
		$('content_clients').innerHTML='';
		new Element('h1').setHTML(this.titres[i].innerHTML).injectInside( $('content_clients') );
		new Element('p').setHTML(this.clients[i].innerHTML).injectInside( $('content_clients') );

		//new Element('p').setHTML(this.clients[i].innerHTML).injectInside( $('content_clients') );
		// charger le contenu concernant les technos
		$('content_tech').setHTML('<P>'+this.technos[i].innerHTML+'</P>');
	},

	_getProperties: function( i ) {
		var distance =  ( i - this.options.display > 0 ) ? i - this.options.display : this.options.display - i;
		switch( this.options.valign ) {
			case 'circle' :
				var start_margin = ( this.imgs.length * 10 ) -10;
				var margintop = start_margin - ( distance * 10 );
				break;
			case 'top' : var margintop=0; break;
			case 'bottom' :
				var start_margin = this.options.dimFocus.height - this.options.dimThumb.height;
				var margintop = ( i == this.options.display ) ? 0 : start_margin;
				break;
			default :
				var start_margin = ( this.options.dimFocus.height - this.options.dimThumb.height )/2;
				var margintop = ( i == this.options.display ) ? 0: start_margin; break;
		 }

		return {
			distance: distance,
			zindex : 99 - distance,
			width: ( i == this.options.display ) ? this.options.dimFocus.width +"px" : this.options.dimThumb.width +"px",
			height: ( i == this.options.display ) ? this.options.dimFocus.height +"px" : this.options.dimThumb.height +"px",
			opacity:  ( i == this.options.display ) ?  this.options.opacity.end : this.options.opacity.start,
			margintop: margintop
		};
	}
} );

coverflow.implement(new Events); // Implements addEvent(type, fn), fireEvent(type, [args], delay) and removeEvent(type, fn)
coverflow.implement(new Options);// Implements setOptions(defaults, options)