// JavaScript Document

//css sprite
var eHeight = 40;
var eWidth = 25;
var spriteY = '0pt';
var spriteYactive = '-40px';
var selectedElCss = 'active';

// Variabili di configurazione
var icon_play_position = '-25px -80px';
var icon_pause_position = '0pt -80px';
var pause_title_text = 'Pausa Presentazione';
var play_title_text = 'Ripresa Presentazione';



function setSpriteImg(el,active){
	
	var n = parseInt(el.get('id'));
	var Y;
	
	if (active == 1){
		Y = spriteYactive;
		el.addClass(selectedElCss);	
	}
	else
	{
		Y = spriteY;
		el.removeClass(selectedElCss);
	}
	
	var newX;
	var nX = eWidth * n;
	
	(nX == 0)?(newX = '0pt'):(newX = '-' + nX + 'px');
	
	var new_position = newX + ' ' + Y;
	
	el.setStyle('background-position',new_position);
	
	}

function toggle(){
	$$('#fotocontainer .foto').each(function(foto){
											 
		foto.setStyles({
		    visibility: 'hidden',
		    opacity: 0
		});

	});		
}	

function slider(activeSlide,nextSlide,activeImg,nextImg){
	
	setSpriteImg(activeSlide,0); // Disattivo l'indicatore e lo deseleziono
	setSpriteImg(nextSlide,1); // Attivo l'indicatore successivo
	activeImg.setStyles({visibility: 'hidden',opacity: 0 }); // Nascondo l'immagine attiva	
	var myEffect = new Fx.Morph(nextImg, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});			 
	myEffect.start({'opacity': 1}); // Visualizzo l'immagine successiva	con effetto fade
		
	}



function Carousel(LastSlideID){
	
	var activeSlide;
	var activeImg;
	var nextSlide;
	var nextImg;
	
	$$('#navbar .slide').each(function(slide){
		
		if (slide.hasClass(selectedElCss)) {
			
			activeSlide = slide;
			nextSlide = slide.getNext();
			activeSlideID = slide.get('id');
			activeImg = $('img_'+activeSlideID);
			nextImg = activeImg.getNext();
							
			if (activeSlideID == LastSlideID) {
				nextSlide = $('0');
				nextImg = $('img_0');
			}
		}
		
	});
	
	slider(activeSlide,nextSlide,activeImg,nextImg);	
		
}

function NextController(LastSlideID){
	
	var activeSlide;
	var activeImg;
	var nextSlide;
	var nextImg;
	
	$$('#navbar .slide').each(function(slide){
		
		if (slide.hasClass(selectedElCss)) {
			
			activeSlide = slide;
			nextSlide = slide.getNext();
			activeSlideID = slide.get('id');
			activeImg = $('img_'+activeSlideID);
			nextImg = activeImg.getNext();
			
		}
		
	});
	
	if (activeSlide.get('id')!= LastSlideID) slider(activeSlide,nextSlide,activeImg,nextImg);	
}



function PrevController(){
	
	var activeSlide;
	var activeImg;
	var prevSlide;
	var prevImg;
	
	$$('#navbar .slide').each(function(slide){
		
		if (slide.hasClass(selectedElCss)) {
			
			activeSlide = slide;
			prevSlide = slide.getPrevious();
			activeSlideID = slide.get('id');
			activeImg = $('img_'+activeSlideID);
			prevImg = activeImg.getPrevious();
			
		}
		
	});
	if (activeSlide.get('id')!= 0) slider(activeSlide,prevSlide,activeImg,prevImg);
			
}



function Animation(LastSlideID){
	
	if ($('animation').get('alt') == 'play') Carousel(LastSlideID);
}


function PlayPause(){
	
		var nextStato;
		var nextTitle;
		var nextIcon;
		var animation_controller = $('animation');
		stato_animazione = animation_controller.get('alt');
		
		if (stato_animazione == 'play'){
			
			nextStato = 'pause';
			nextTitle = play_title_text;
			nextIcon = icon_play_position;
			
			}
		else {
			
			nextStato = 'play';
			nextTitle = pause_title_text;
			nextIcon = icon_pause_position;
			}

		animation_controller.setStyle('background-position', nextIcon);
		animation_controller.set('alt',nextStato);
		animation_controller.set('title',nextTitle);
	
	
	}

function Pause(){
		
	var animation_controller = $('animation');
	animation_controller.setStyle('background-position', icon_play_position);
	animation_controller.set('alt','pause');
	animation_controller.set('title',play_title_text);
	
	}


window.addEvent('domready', function() {
									 				
	//Determino l'ultimo elemento che funge da slider	
	var LastSlideID = '2'; 
	// menuHtml
	var mHtml = '<a id="0" class="slide active" href="#" title="Prima diappositiva" style="background-position: 0pt -40px;;"/><a id="1" class="slide" href="#" title="Seconda diappositiva" style="background-position: -25px 0pt;"/><a id="2" class="slide" href="#" title="Terza diappositiva" style="background-position: -50px 0pt;"/><a class="separator" href="#"/><a id="animation" class="control" href="#" alt="play" title="Pausa animazione" style="background-position: 0pt -80px;"/><a id="prev_controller" class="control" href="#" title="Diappositiva precedente" style="background-position: -50px -80px;"/><a id="next_controller" class="control" href="#" title="Diappositiva successiva" style="background-position: -75px -80px;"/>'
	
	
	// Nascondo momentaneamente le ultime immagini	
	
	$('img_1').setStyles({
		    visibility: 'hidden',
		    opacity: 0
		});
	
	$('img_2').setStyles({
		    visibility: 'hidden',
		    opacity: 0
		});
	

			
	// Determino il gruppo delle immagini Es: serramentisti, privati, professionisti	
	var ImagesGroup = $('group').get('text');
	
	var Images = ['images/'+ImagesGroup+'1.jpg', 'images/'+ImagesGroup+'2.jpg', 'images/'+ImagesGroup+'3.jpg'];
	
	var myImages = new Asset.images(Images, {
								
		onComplete: function(){
		    
			new Element('img',{src:Images[0]}).inject($('img_0'));
			new Element('img',{src:Images[1]}).inject($('img_1'));
			new Element('img',{src:Images[2]}).inject($('img_2'));
			
			// Genero il menù di navigazione
			new Element('div',{id:'navbar', html: mHtml}).inject($('galleriafoto'));
			
			// Intercetto i controlli e gli associo le funzioni	
			$('animation').addEvent('click',function(){PlayPause();});
			
			$('prev_controller').addEvent('click', function(){
															
				Pause();
				PrevController();
				
			});
			
			$('next_controller').addEvent('click', function(){
																	
				Pause();
				NextController(LastSlideID);
				
			});
			
			$$('#navbar .slide').each(function(slide_controller){
											   						   
			   slide_controller.addEvent('click', function(){
														   
				   toggle();
				   Pause();
				   var id_immagine = 'img_' + slide_controller.get('id');
				   var show_image = $(id_immagine);
				   
				   $$('#navbar .slide').each(function(el){
						
						setSpriteImg(el,0);
						
				   });
				   
				   
				   setSpriteImg(this,1);
																   
				   var myEffect = new Fx.Morph(show_image, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});			 
				   myEffect.start({'opacity': 1});
				});
											   									   
			});
			
			// Parte il carousel
			var TimerID = Animation.periodical(7000, null, LastSlideID);
												
	    }
	});
	
});