/*
 * carnet slider - Javascript Image Slider with mootools 1.2
 * By Mario Zambon (http://www.urbangap.com)
 * Copyright (c) 2008 cody urbangap
 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/

function mooslider() {
	
	var nThumb = 3 		// numero di thumb da visualizzare nel layer
	var time = 300		// time slide
	var tImg = 500      // time load image

	var loaderImage	= 'i/loading.gif'
	var gallery		= $('galleryDett')
	var th 			= $('imgThumb')
	var imgBig		= $('imgBig')
	var a 			= $$('#imgTh a')
	var btRx 		= $$('.next')
	var btSx 		= $$('.prev')
	var img, cl, href, tthis, iAll, bt

	var n = 0
	var i = 0
	
	var stopBt = true
	var slider = new Fx.Scroll('boxTh', {duration: time, transition: Fx.Transitions.Expo.easeInOut})

	slider.set(0, 0)
	th.addClass('dimensioneTh').set('opacity', 0)
	imgBig.addClass('dimensione')
	imgBig.set('styles', {'background': 'url('+loaderImage+') center no-repeat'})
	

	a.each(function(item, index){
		iAll = index
		i = index-nThumb+1
		var id = 'imgTh'+index
		item.setProperty('id', id)
		
		tthis	= a[0]
		href 	= tthis.getProperty('href')
		cl		= tthis.addClass('imgSelect')
		
		item.set('opacity', 0.5)
		a[0].set('opacity', 1)
		
	})

	if(iAll>2) {
		btRx.set('opacity', 0.5)
		btSx.set('opacity', 0.5)
	} else if(iAll==0) {
		th.destroy()
		gallery.set('styles', {'width': '410px'})
	} else {
		btRx.set('html', '')
		btSx.set('html', '')
	}
	
	
	
	preloadImage()
	rollover()
	
	btRx.addEvent('click', $lambda(false))
	btRx.addEvent('click', function(){
		if (stopBt) {
			stopBt = false
			if (n<i) {							
				n++
				slider.toElement('imgTh'+n)
			} else {
				n=0
				slider.toElement('imgTh'+n)
			}
			activeBt.delay(time)
		}
	})

	btSx.addEvent('click', $lambda(false))
	btSx.addEvent('click', function(){
		if (stopBt) {
			stopBt = false
			if (n>0) {
				n--	
				slider.toElement('imgTh'+n)
			} else {
				n=i
				slider.toElement('imgTh'+n)
			}
			activeBt.delay(time)
		}
	})
	
	function activeBt() {
		stopBt = true
	}
	
	
	// Funione transizioni	esempio: fx(item, 500, 'tween', tran)
	var tran = Fx.Transitions.linear
	function fx(el, tmp, type, tran) {el.set(type, {duration: tmp, transition: tran})}	
	
	

	a.addEvent('click', $lambda(false))
	a.addEvent('click', function(event){
				
		cl		= this.hasClass('imgSelect')
		tthis	= this
		href	= this.getProperty('href')
		
		a.removeClass('imgSelect')
		this.addClass('imgSelect')

		if(!cl){
			img.destroy()				
			imgBig.set('styles', {'background': 'url('+loaderImage+') center no-repeat'})
			a.set('opacity', 0.5)
			this.set('opacity', 1)
			rollover()
			preloadImage()
		}
	})
	
	function rollover() {
		a.addEvents({
			'mouseover': function(){if(tthis!=this) this.tween('opacity', 1)},
			'mouseleave': function(){if(tthis!=this) this.tween('opacity', 0.6)}
		})
		if(iAll>2) {
			btRx.addEvents({
				'mouseover': function(){if(tthis!=this) this.tween('opacity', 1)},
				'mouseleave': function(){if(tthis!=this) this.tween('opacity', 0.6)}
			})
			btSx.addEvents({
				'mouseover': function(){if(tthis!=this) this.tween('opacity', 1)},
				'mouseleave': function(){if(tthis!=this) this.tween('opacity', 0.6)}
			})
		}
	}
	
	function preloadImage() {
		new Asset.image(href, {onload: loadImg})
	}

	function loadImg() {
		th.addClass('dimensioneTh').tween('opacity', 1)
		imgBig.set('styles', {'background-image': 'none'})
		
		if(img) img.destroy() 
		img = new Element('img', {'id':'image', 'alt': '', 'src': href}).set('opacity', 0).inject(imgBig)
		fx(img, tImg, 'tween', tran)
		img.tween('opacity', 1)
	}		

	

}
window.addEvent('domready', mooslider)