/*
"SL_ACCORDION" module for Prototype-Scriptaculous
Copyright (c) 2008 Siloos s.n.c. - http://www.siloos.it
Authors: Silvio Zennaro & Luca Scarpa
Project page at http://www.siloos.it
***Last update: Aug 26th, 2008***
*/
/** CREAZIONE CLASSI **/
	var SL_ACCORDION = Class.create({
		// INIZIALIZZAZIONE OGGETTO
		initialize: function(strcontainer_id, htmltitle, contentHeight) {
			this.maincontainer_id = strcontainer_id;
			this.css_mainclass = 'sl_accordion';
			this.title = htmltitle;
			this.transitionEffectsDuration = 0.5; // in seconds
			this.activeContentHeight = contentHeight; // in pixel
			this.allowCloseAllOption = false; // set to true per permettere di avere tutti i content "chiusi"
			this.contentOpenedAtStart = 1; // 1 per il primo, 2 per il secondo, ..., 0 per tutti chiusi 
			this.build();
		},
		
		
		/**
		 * 
		 */
		build: function () {
			var container_el = $(this.maincontainer_id);

			// checking main container			
			if (!container_el) {
				container_el = new Element('div', { 'id': this.maincontainer_id, 'class': this.css_mainclass}).update(" ");
				$(document.body).insert(container_el, { position: 'bottom' });
			} else {
				if (!container_el.hasClassName(this.css_mainclass))
					container_el.addClassName(this.css_mainclass);
			}
			
			// adding header
			var header_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_header');
			if (!header_el.length) {
				header_el = new Element('div', { 'class': this.css_mainclass+'_header'}).update(this.title);
				container_el.insert(header_el, { position: 'bottom' });
			} else { header_el = header_el.first(); }
			
			// adding body
			var body_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_body');
			if (!body_el.length) {
				body_el = new Element('div', { 'class': this.css_mainclass+'_body'});
				container_el.insert(body_el, { position: 'bottom' });
			} else { body_el = body_el.first(); }
			
			// adding footer
			var footer_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_footer');
			if (!footer_el.length) {
				footer_el = new Element('div', { 'class': this.css_mainclass+'_footer'});
				container_el.insert(footer_el, { position: 'bottom' });
			} else { footer_el = footer_el.first(); }
			
		},
		
		/**
		 * Metodo che aggiunge un nuovo elemento (oggetto composto da toggle_text e content_text)
		 * alla lista di item dell'oggetto corrente
		 * @param {String} toggle_text : codice html da visualizzare all'interno del toggle in questione
		 * @param {String} content_text : codice html da cisualizzare all'interno del content in questione
		 */
		addNewElement: function(toggle_html, content_html) {
			var body_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_body').first();
			
			var isfirst = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content').length == this.contentOpenedAtStart-1;
			var new_toggle = new Element('div', {'class': this.css_mainclass+'_toggle'+(isfirst ? ' '+this.css_mainclass+'_toggle_active' : '')}).update(toggle_html);
				body_el.insert(new_toggle, { position: 'bottom' });
			var new_content = new Element('div', {'class': this.css_mainclass+'_content'+(isfirst ? ' '+this.css_mainclass+'_active' : '')})
					.update(content_html)
					.setStyle({
						height: (isfirst ? this.activeContentHeight+'px' : '0px')
					});
				body_el.insert(new_content, { position: 'bottom' });
			
			new_toggle.observe('click', function () { 
				this.handleToggle(new_toggle); 
			}.bind(this));

		},

		handleToggle: function (toggle_el) {			
			var effects = [];

			// individuazione elemento da attivare (next fratello di toggle_el)
			var content_el_to_deactivate = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_active').first();
			
			// individuazione elemento attivo
			var content_el_to_activate = toggle_el.next();
			
			// controllo se clic su toggle già attivo
			var is_the_same = (content_el_to_activate == content_el_to_deactivate);
			if (!is_the_same || this.allowCloseAllOption) {
				// Gestione xxx_toggle_active classname
				if (is_the_same)
					toggle_el.toggleClassName(this.css_mainclass+'_toggle_active');
				else {
					$$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_toggle_active').each(function (el) {
						el.removeClassName(this.css_mainclass+'_toggle_active');
					}.bind(this));
					toggle_el.addClassName(this.css_mainclass+'_toggle_active');
				}
				
				// --> aggiunta effetto all'elemento trovato : morph con height = 0 (effects.push)
				if (content_el_to_deactivate) { // if exists
					content_el_to_deactivate.removeClassName(this.css_mainclass+'_active');
					effects.push(
						new Effect.Morph(content_el_to_deactivate, {
							style: { height: '0px' }, // CSS Properties
							duration: this.transitionEffectsDuration // Core Effect properties
						})
					);
				}
				
				
				// --> aggiunta effetto all'elemento trovato : morph con height = 60px (effects.push)
				if (!is_the_same || !content_el_to_deactivate) {
					content_el_to_activate.addClassName(this.css_mainclass+'_active');
					effects.push(
						new Effect.Morph(content_el_to_activate, {
							style: { height: this.activeContentHeight+'px' } // CSS Properties
						})
					);
				}
				
				// Esecuzione di new Effect.Parallel  con gli effects appena individuati
				new Effect.Parallel(effects, { 
				  duration: this.transitionEffectsDuration
				});
			} // else do nothing...
			
		},
		
		// metodo che sposta la visualizzazione al prossimo item in lista o, se wraparound è impostato a true e non ci sono altri elementi, al primo elemento della lista
		showNextItem: function (wraparound) {

			if (this.actuallyShowing < this.listOfSections.length-1 || wraparound) {
				
				this.startChangingTransitions ();
				
				(function () {
					this.actuallyShowing = (this.actuallyShowing < this.listOfSections.length-1 ? this.actuallyShowing+1 : 0);
					
					this.changeToActualItem();
					this.refreshArrowsVisibility();
				}.bind(this).delay(this.transitionEffectsDuration));
			}
		},
		
		showPrevItem: function (wraparound) {
			if (this.actuallyShowing > 0 || wraparound) {
				
				this.startChangingTransitions ();
				
				(function () {
					this.actuallyShowing = (this.actuallyShowing > 0 ? this.actuallyShowing-1 : this.listOfSections.length-1);
					
					this.changeToActualItem();
					this.refreshArrowsVisibility();
				}.bind(this).delay(this.transitionEffectsDuration));
				
			}
		},
		
		startChangingTransitions: function () {
					
			var description_el = $(this.maincontainer_id+'_description');
			var content_el = $(this.maincontainer_id+'_content');

			var fadeInDelay = this.transitionEffectsDuration+0.2;
			if (this.actuallyShowing >= 0) { // setting fade out effects
				description_el.fade({ duration: this.transitionEffectsDuration, from: 1.0, to: 0.001 });
				content_el.fade({ duration: this.transitionEffectsDuration, from: 1.0, to: 0.001 });
			} else fadeInDelay = 0;
			description_el.fade({ duration: this.transitionEffectsDuration, from: 0.0, to: 1.0, delay: fadeInDelay });
			content_el.fade({ duration: this.transitionEffectsDuration, from: 0.0, to: 1.0, delay: fadeInDelay });
				
		},
				
		// metodo che modifica immagine e descrizione  attuali con quelle dell'item attuale
		changeToActualItem: function () {
			var actualItem = this.listOfSections[this.actuallyShowing];
			$(this.maincontainer_id+'_content').setStyle({'background': 'url('+actualItem.url+')'});
			$(this.maincontainer_id+'_description').update(actualItem.description);
		},
		
		refreshArrowsVisibility: function () {
			// checkin left arrow
			if (this.actuallyShowing == 0) {
				$(this.maincontainer_id+'_leftarrow').setOpacity(0.3);
			} else $(this.maincontainer_id+'_leftarrow').setOpacity(1);
			// checkin right arrow
			if (this.actuallyShowing == this.listOfSections.length-1) {
				$(this.maincontainer_id+'_rightarrow').setOpacity(0.3);
			} else $(this.maincontainer_id+'_rightarrow').setOpacity(1);
		}
		
	});