/**
 * MooFlow - Image gallery
 *
 * Dependencies: MooTools 1.2
 *
 * @version			0.2.1
 *
 * @license			MIT-style license
 * @author			Tobias Wetzel <info [at] outcut.de>
 * @copyright		Author
 * @docmentation	http://outcut.de/MooFlow/Docmentation.html
 */ 

var MooFlow = new Class({

	Implements: [Events, Options],
	
	options: {
		onStart: $empty,
		onClickView: $empty,
		onAutoPlay: $empty,
		onAutoStop: $empty,
		onRequest: $empty,
		onResized: $empty,
		onEmptyinit: $empty,
		reflection: 0.0,
		heightRatio: 0.6,
		offsetY: 0,
		startIndex: 0,
		interval: 3000,
		factor: 115,
		bgColor: '#fff',
		useCaption: false,
		useResize: false,
		useSlider: true,
		useWindowResize: false,
		useMouseWheel: true,
		useKeyInput: false,
		useViewer: false
	},
	
	initialize: function(element, options){
		this.MooFlow = element;
		this.setOptions(options);
		this.foc = 220;
		this.factor = this.options.factor;
		this.offY = this.options.offsetY;
		this.isFull = false;
		this.isAutoPlay = false;
		this.isLoading = false;
		this.inMotion = false;
		
		this.MooFlow.addClass('mf').setStyles({
			'overflow':'hidden',
			'background-color':this.options.bgColor,
			'position':'relative',
			'display':'block',
			'height':207,
			'opacity':0
		});
		
		this.getElements(this.MooFlow);
		this.pulsanti();		
	},
	
		
	clearInit: function(){
		this.fireEvent('emptyinit');
	},
	
	pulsanti: function () {
		 $('limoni').addEvents({'click': this.clickTo.bind(this, 0)});
		 $('banane').addEvents({'click': this.clickTo.bind(this, 1)});
		 $('banane2').addEvents({'click': this.clickTo.bind(this, 2)});		 
		 $('patate').addEvents({'click': this.clickTo.bind(this, 3)});
		 $('arance').addEvents({'click': this.clickTo.bind(this, 4)});
		 $('carote').addEvents({'click': this.clickTo.bind(this, 5)});
		 $('kiwi').addEvents({'click': this.clickTo.bind(this, 6)});
		 $('mele').addEvents({'click': this.clickTo.bind(this, 7)});
		 $('cipolle').addEvents({'click': this.clickTo.bind(this, 8)});
		 $('zucchine').addEvents({'click': this.clickTo.bind(this, 9)});
		 $('pomodori').addEvents({'click': this.clickTo.bind(this, 10)});
		 $('aglio').addEvents({'click': this.clickTo.bind(this, 11)});
		 $('albicocche').addEvents({'click': this.clickTo.bind(this, 12)});
		 $('asparagi').addEvents({'click': this.clickTo.bind(this, 13)});
		 $('bietole').addEvents({'click': this.clickTo.bind(this, 14)});
		 $('broccoli').addEvents({'click': this.clickTo.bind(this, 15)});		 
		 $('cavolfiori').addEvents({'click': this.clickTo.bind(this, 16)});
		 $('cavolo').addEvents({'click': this.clickTo.bind(this, 17)});
		 $('cetrioli').addEvents({'click': this.clickTo.bind(this, 18)});
		 $('ciliegie').addEvents({'click': this.clickTo.bind(this, 19)});
		 $('clementine').addEvents({'click': this.clickTo.bind(this, 20)});
		 $('fagiolini').addEvents({'click': this.clickTo.bind(this, 21)});
		 $('finocchi').addEvents({'click': this.clickTo.bind(this, 22)});
		 $('fragole').addEvents({'click': this.clickTo.bind(this, 23)});
		  $('kaki').addEvents({'click': this.clickTo.bind(this, 24)});		 
		 $('lattuga').addEvents({'click': this.clickTo.bind(this, 25)});
		 $('mandarini').addEvents({'click': this.clickTo.bind(this, 26)});
		 $('melanzane').addEvents({'click': this.clickTo.bind(this, 27)});
		 $('meloni').addEvents({'click': this.clickTo.bind(this, 28)});
		 $('nettarine').addEvents({'click': this.clickTo.bind(this, 29)});
		 $('peperoni').addEvents({'click': this.clickTo.bind(this, 30)});
		 $('pere').addEvents({'click': this.clickTo.bind(this, 31)});
		  $('pesche').addEvents({'click': this.clickTo.bind(this, 32)});
		 $('pomodori2').addEvents({'click': this.clickTo.bind(this, 33)});
		 $('pomodori3').addEvents({'click': this.clickTo.bind(this, 34)});
		 $('susine').addEvents({'click': this.clickTo.bind(this, 35)});
		 $('uva').addEvents({'click': this.clickTo.bind(this, 36)});
	},
	
	getElements: function(el){
		this.master = {'images':[]};
		var els = el.getChildren();
		if(!els.length) {this.clearInit(); return;}
		$$(els).each(function(el){
		var hash = $H(el.getElement('img').getProperties('src','title','alt','id'));
			if(el.get('tag') == 'a') hash.combine(el.getProperties('href','rel','target'));
			this.master['images'].push(hash.getClean());
			el.dispose();
		}, this);
		this.clearMain();
	},
	
	clearMain: function(){
		if(this.cap){this.cap.fade(0);}
		if(this.nav){
			new Fx.Tween(this.nav, {
				'onComplete': function(){
					this.MooFlow.empty();
					this.createAniObj();
				}.bind(this)
			}).start('bottom', -50);
		}
		if(!this.nav && !this.cap){
			this.MooFlow.empty();
			this.createAniObj();
		}
	},
	
	getMooFlowElements: function(key){
		var els = [];
		this.master.images.each(function(el){ 
			els.push(el[key]); 
		});
		return els;
	},
	
	createAniObj: function(){
		this.aniFx = new Fx.Value({
			'transition': Fx.Transitions.Expo.easeOut,
			'link': 'cancel',
			'duration': 750,
			'onMotion': this.process.bind(this),
			'onStart': this.flowStart.bind(this),
			'onComplete': this.flowComplete.bind(this)
		});
		this.addLoader();
	},
	
	addLoader: function(){
		this.MooFlow.store('height', this.MooFlow.getSize().y);
		this.loader = new Element('div',{'class':'loader'}).inject(this.MooFlow);
		new Fx.Tween(this.MooFlow, {
			'duration': 800,
			'onComplete': this.preloadImg.bind(this)
		}).start('opacity', 1);
	},
	
	preloadImg: function(){
		this.loadedImages = new Asset.images(this.getMooFlowElements('src'), {
			'onComplete': this.loaded.bind(this),
			'onProgress': this.createMooFlowElement.bind(this)
			});
	},
	
	createMooFlowElement: function(counter, i){
		var obj = this.getCurrent(i);
		var img = this.loadedImages[i];
		var id = this.getMooFlowElements('id')[i];
		obj['width'] = img.width;
		/*alert (id);*/
		obj['height'] = img.height;
		img.removeProperties('width','height');

		obj['div'] = new Element('div').setStyles({
			'position':'absolute',
			'display':'none',
			'height': this.MooFlow.getSize().y
		}).inject(this.MooFlow);
		obj['con'] = new Element('div').inject(obj['div']);
		img.setStyles({'vertical-align':'bottom', 'width':'100%', 'height':'75%'});
		img.set('id',this.getMooFlowElements('id')[i]);
		img.addEvents({'click': this.clickTo.bind(this, i)});
		img.inject(obj['con']);
	},
	

	
	
	
	loaded: function(){
		this.index = this.options.startIndex;
		this.iL = this.master.images.length-1;
		new Fx.Tween(this.loader, {
			'duration': 800,
			'onComplete': this.createUI.bind(this)
		}).start('opacity', 0);
	},
	
	createUI: function(){
		this.loader.dispose();
		this.nav = new Element('div').addClass('mfNav2').setStyle('bottom','-50px');
		this.sliderCon = new Element('div').addClass('sliderCon');
		this.resizeCon = new Element('div').addClass('resizeCon');		

		if(this.options.useSlider){
			this.knob = new Element('div',{'class':'knob'});
			this.knob.adopt(new Element('div',{'class':'knobleft'}));
			this.slider = new Element('div',{'class':'slider'}).adopt(this.knob);
			this.sliderCon.adopt(this.sliPrev,this.slider,this.sliNext);
	}
	
		this.MooFlow.adopt(this.nav.adopt(this.autoPlayCon, this.sliderCon, this.resizeCon));	
		this.showUI();
	},
	
	showUI: function(){
		if(this.cap) this.cap.fade(1);
		this.nav.tween('bottom', 20);
		this.fireEvent('start');
		this.update();
	},
	
	update: function(e){
		if(e == 'init') return;
		this.oW = this.MooFlow.getSize().x;
		this.sz = this.oW * 0.5;
		if(this.options.useSlider){		
			this.slider.setStyle('width', 522);
			this.knob.setStyle('width', 14);
			this.sli = new SliderEx(this.slider, this.knob, {steps: this.iL}).set(this.index);
			this.sli.addEvent('onChange', this.clickTo.bind(this));
		}
		this.glideTo(this.index);
		this.clickTo(this.index);
		this.isLoading = false;
	},
	
	setScreen: function(){
		if(this.isFull = !this.isFull){
			this.holder = new Element('div').inject(this.MooFlow,'after');
			this.MooFlow.wraps(new Element('div').inject(document.body));
			this.MooFlow.setStyles({'position':'absolute','z-index':'100','top':'0','left':'0','width':window.getSize().x,'height':window.getSize().y});
			if(this.options.useWindowResize){
				this._initResize = this.initResize.bind(this);
				window.addEvent('resize', this._initResize);
			}
		} else {
			this.MooFlow.wraps(this.holder);
			window.removeEvent('resize', this._initResize);
			delete this.holder, this._initResize;
			this.MooFlow.setStyles({'position':'relative','z-index':'','top':'','left':'','width':'','height':this.MooFlow.retrieve('height')});
			this.slider.setStyle('width',this.slider.retrieve('parentWidth'));
		}
		this.fireEvent('resized', this.isFull);
		this.update();
	},
	
	initResize: function(){
		this.MooFlow.setStyles({'width':window.getSize().x,'height':window.getSize().y});
		this.update();
	},
	
	getCurrent: function(index){
		return this.master.images[$chk(index) ? index : this.index];
	},
	
	flowStart: function(){
		this.inMotion = true;
	},
	
	flowComplete: function(){
		this.inMotion = false;
	},
	
	clickTo: function(index){
		//alert (index);
		if(this.index == index) return;
		//this.aniFx.cancel();
		if(this.sli) this.sli.set(index);
		this.glideTo(index);
		switch (index) {
			case 0:
			$('caption').set('html','<p>Limoni</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Limoni" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('limoni').addClass('active_button');
			break;
			case 1:
			$('caption').set('html','<p>Banane</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Banane" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('banane').addClass('active_button');
			break;
			case 2:
			$('caption').set('html','<p>Banane equosolidali</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Banane equosolidali" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('banane2').addClass('active_button');
			break;
			case 3:
			$('caption').set('html','<p>Patate</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Patate" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('patate').addClass('active_button');
			break;
			case 4:
			$('caption').set('html','<p>Arance</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Arance" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('arance').addClass('active_button');
			break;
			case 5:
			$('caption').set('html','<p>Carote</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="carote" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('carote').addClass('active_button');
			break;
			case 6:
			$('caption').set('html','<p>Kiwi</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Kiwi" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('kiwi').addClass('active_button');
			break;
			case 7:
			$('caption').set('html','<p>Mele</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Mele" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('Mele').addClass('active_button');
			break;
			case 8:
			$('caption').set('html','<p>Cipolle</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Cipolle" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('Cipolle').addClass('active_button');
			break;
			case 9:
			$('caption').set('html','<p>Zucchine</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Zucchine" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('zucchine').addClass('active_button');
			break;
			case 10:
			$('caption').set('html','<p>Pomodori</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Pomodori" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('pomodori').addClass('active_button');
			break;
			case 11:
			$('caption').set('html','<p>aglio</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Aglio secco" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('aglio').addClass('active_button');
			break;
			case 12:
			$('caption').set('html','<p>Albicocche</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/albicocche.jpg" alt="Albicocche" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('Albicocche').addClass('active_button');
			break;
			case 13:
			$('caption').set('html','<p>Asparagi</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/asparagi.jpg" alt="Asparagi" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('Asparagi').addClass('active_button');
			break;
			case 14:
			$('caption').set('html','<p>bietole</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Bietole" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('bietole').addClass('active_button');
			break;
			case 15:
			$('caption').set('html','<p>Broccoli</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/broccoli.jpg" alt="Broccoli" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('broccoli').addClass('active_button');
			break;
			case 16:
			$('caption').set('html','<p>Cavolfiori</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/cavolfiori.jpg" alt="Cavolfiori" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('cavolfiori').addClass('active_button');
			break;
			case 17:
			$('caption').set('html','<p>Cavolo</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/cavolfiori.jpg" alt="Cavolfiori" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('cavolo').addClass('active_button');
			break;
			case 18:
			$('caption').set('html','<p>Cetrioli</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Cetrioli" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('cetrioli').addClass('active_button');
			break;
			case 19:
			$('caption').set('html','<p>Ciliegie</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/ciliege.jpg" alt="Ciliegie" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('ciliegie').addClass('active_button');
			break;
			case 20:
			$('caption').set('html','<p>Clementine</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/clementine.jpg" alt="Clementine" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('clementine').addClass('active_button');
			break;
			case 21:
			$('caption').set('html','<p>Fagiolini</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/fagiolini.jpg" alt="Fagiolini" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('fagiolini').addClass('active_button');
			break;
			case 22:
			$('caption').set('html','<p>Finocchi</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Finocchi" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('finocchi').addClass('active_button');
			break;
			case 23:
			$('caption').set('html','<p>Fragole</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/fragole.jpg" alt="Fragole" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('fragole').addClass('active_button');
			break;
			case 24:
			$('caption').set('html','<p>Kaki</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/kaki.jpg" alt="Kaki" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('kaki').addClass('active_button');
			break;
			case 25:
			$('caption').set('html','<p>Lattuga</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Lattuga" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('lattuga').addClass('active_button');
			break;
			case 26:
			$('caption').set('html','<p>Mandarini</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/mandarini.jpg" alt="Mandarini" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('mandarini').addClass('active_button');
			break;
			case 27:
			$('caption').set('html','<p>Melanzane</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Melanzane" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('melanzane').addClass('active_button');
			break;
			case 28:
			$('caption').set('html','<p>Meloni</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/meloni.jpg" alt="Meloni" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('meloni').addClass('active_button');
			break;
			case 29:
			$('caption').set('html','<p>Nettarine</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/nettarine.jpg" alt="Nettarine" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('nettarine').addClass('active_button');
			break;
			case 30:
			$('caption').set('html','<p>Peperoni</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Peperoni" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('peperoni').addClass('active_button');
			break;
			case 31:
			$('caption').set('html','<p>Pere</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Pere" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('pere').addClass('active_button');
			break;
			case 32:
			$('caption').set('html','<p>Pesche</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/nettarine.jpg" alt="Pesche" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('pesche').addClass('active_button');
			break;
			case 33:
			$('caption').set('html','<p>Pomodori Cherry</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Pomodori Cherry" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('pomodori2').addClass('active_button');
			break;
			case 34:
			$('caption').set('html','<p>Pomodoro Datterino</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/agliosecco.jpg" alt="Pomodoro Datterino" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('pomodori2').addClass('active_button');
			break;
			case 35:
			$('caption').set('html','<p>susine</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/susine.jpg" alt="Susine" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('susine').addClass('active_button');
			break;
			case 36:
			$('caption').set('html','<p>uva</p>');
			$('igp_right_bottom_right').set('html', '<img src="images/scheda_canova/susine.jpg" alt="Uva" />');
			$$('#pulsanti2 a').removeClass('active_button');
			$('uva').addClass('active_button');
			break;
		};
		
	},
	
	glideTo: function(index){
		this.index = index;
		this.aniFx.start(this.aniFx.get(), index*-this.foc);
		if(this.cap) this.cap.set('html', this.getCurrent().title);
	},
	process: function(x){
		var z,W,H,zI=this.iL,foc=this.foc,f=this.factor,sz=this.sz,oW=this.oW,offY=this.offY,div,elh,elw;
		this.master.images.each(function(el){
			div = el.div.style;
			elw = el.width;
			elh = el.height;
			if(x>-foc*6 && x<foc*6){
				with (Math) {
					z = sqrt(10000 + x * x) + 100;
					H = round((elh / elw * f) / z * sz);
					W = round(elw * H / elh);
					if(H >= elw * 0.5) {W = round(f / z * sz);}
					div.left = round(((x / z * sz) + sz) - (f * 0.5) / z * sz) + 'px';
					div.top = round(oW * 0.32 - H) + offY + 'px';
				}	
				el.con.style.height = H*1.35 + 'px';
				div.width = W + 'px';
				div.zIndex = x < 0 ? zI++ : zI--;
				div.display = 'block';
			} else {
				div.display = 'none';
			}
			x += foc;
		});
	}
});

var SliderEx = new Class({
	Extends: Slider,
	set: function(step){
		this.step = Math.round(step);
		this.fireEvent('tick', this.toPosition(this.step));
		return this;
    },
	clickedElement: function(event){
		var dir = this.range < 0 ? -1 : 1;
		var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
		position = position.limit(-this.options.offset, this.full -this.options.offset);
		this.step = Math.round(this.min + dir * this.toStep(position));
		this.checkStep();
		this.fireEvent('tick', position);
	}
});

Fx.Value = new Class({
	Extends: Fx,
	compute: function(from, to, delta){
		this.value = Fx.compute(from, to, delta);
		this.fireEvent('motion', this.value);
		return this.value;
	},
	get: function(){
		return this.value || 0;
	}
});