/*
"SL_SCROLLER" 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: Dec 2nd, 2008***
*/
/** CREAZIONE CLASSI **/
	var SL_SCROLLER = Class.create({
		// INIZIALIZZAZIONE OGGETTO
		initialize: function(strcontainer_id, htmltitle, items_width) {
			this.maincontainer_id = strcontainer_id;
			this.css_mainclass = 'sl_scroller';
			this.title = htmltitle;
			//this.items_width = (items_width ? items_width : 200);
			this.items_width = null;
			//this.items_width = null;
			this.cs = null; // Control.Slider
			this.scroller_incremental = 10; // valore percentuale di spostamento a seguito di clic sulle
			this.transitionFadeDuration = 2;
			this.enable_title_fade = false;
			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(); }
			
			/** ADDING SCROLLER EXTRA CONTENT **/
			// adding scroller main content
			var content_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content');
			if (!content_el.length) {
				content_el = new Element('div', { 'class': this.css_mainclass+'_content'});
				body_el.insert(content_el, { position: 'bottom' });
			} else { content_el = content_el.first(); }
			
			// adding scrollbar content
			var scrollbar_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar');
			if (!scrollbar_el.length) {
				scrollbar_el = new Element('div', { 'class': this.css_mainclass+'_scrollbar'});
				body_el.insert(scrollbar_el, { position: 'bottom' });
			} else { scrollbar_el = scrollbar_el.first(); }
			
			// adding scrollbar left, handler & right
			var scrollbar_left_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_left');
			if (!scrollbar_left_el.length) {
				scrollbar_left_el = new Element('div', { 'class': this.css_mainclass+'_scrollbar_left'});
				scrollbar_el.insert(scrollbar_left_el, { position: 'bottom' });
				scrollbar_left_el.update("«");
			} else { scrollbar_left_el = scrollbar_left_el.first(); }
				scrollbar_left_el
					.setOpacity(0.5)
					.observe('click', function () {
						this._incrementalScrollToLeft();
					}.bind(this));
			var scrollbar_handler_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_handler');
			if (!scrollbar_handler_el.length) {
				scrollbar_handler_el = new Element('div', { 'class': this.css_mainclass+'_scrollbar_handler'});
				scrollbar_el.insert(scrollbar_handler_el, { position: 'bottom' });
			} else { scrollbar_handler_el = scrollbar_handler_el.first(); }
				scrollbar_handler_el.hide(); // initially hidden
			var scrollbar_right_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_right');
			if (!scrollbar_right_el.length) {
				scrollbar_right_el = new Element('div', { 'class': this.css_mainclass+'_scrollbar_right'});
				scrollbar_el.insert(scrollbar_right_el, { position: 'bottom' });
				scrollbar_right_el.update("»");
			} else { scrollbar_right_el = scrollbar_right_el.first(); }
				scrollbar_right_el
					.setOpacity(0.5)
					.observe('click', function () { 
						this._incrementalScrollToRight();
					}.bind(this));
			
		},
		
		/**
		 * Metodo che aggiunge un nuovo elemento (oggetto composto da toggle_text e content_text)
		 * alla lista di item dell'oggetto corrente
		 * @param {String} title_html : codice html da visualizzare all'evento onm
		 * @param {String} content_html : codice html da cisualizzare all'interno del content in questione
		 */
		addNewElement: function(title_html, content_html) {
		
			var sum_of_items = this._getSumWidthOfItems();

			var content_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content').first();
			var new_item = new Element('div', {'class': this.css_mainclass+'_content_item'});
				var thisObj = this;
				var new_item_el = new Element('div', {'class': this.css_mainclass+'_content_item_element'})
					.update(content_html)
					.observe('mouseenter', function () { 
						if (thisObj.enable_title_fade)
							new Effect.Opacity(this.next(), {to: 1.0});
						else this.next().setOpacity(1.0);
					})
					.observe('mouseleave', function () { 
						if (thisObj.enable_title_fade)
							new Effect.Opacity(this.next(), {to: 0.01});
						else this.next().setOpacity(0.01);
					});
				new_item.insert(new_item_el, { position: 'bottom' });
				
				
				var new_item_tl = new Element('div', {'class': this.css_mainclass+'_content_item_title'})
					.update(title_html)
					.setOpacity(0.01);
				new_item.insert(new_item_tl, { position: 'bottom' });
					
			content_el.insert(new_item, { position: 'bottom' });
									
			new_item.setStyle({
				//width: this.items_width+'px', 
				left: sum_of_items+'px'
			});
			
			
				new PeriodicalExecuter(function(pe) {
					var loaded = this._checkAllImagesLoaded();
					if (loaded) {
						
						$$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content_item').each(function (temp_it) {

							var sum_of_siblings_width = this._getSumWidthOfPreviousSiblings(temp_it);
							temp_it.setStyle({
								left: sum_of_siblings_width+'px'
							});
						}.bind(this));
						this._refreshScrollbarStyle();	

				    pe.stop();
					} // else retry ...					

				}.bind(this), 0.5);
				

				
			
			this._refreshScrollbarStyle();	
			
		},
		
		_checkAllImagesLoaded: function () {
			
			var allLoaded = true;
			$$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content_item img').each(function (img) {
				if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
					allLoaded = false;
				}
			});
			return allLoaded;
		},

		_getSumWidthOfItems: function () {
			var sum_of_items = 0;
			
			$$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content_item').each(function (el) {
				sum_of_items += el.getWidth();
			});
			return sum_of_items;
		},
		
		_getSumWidthOfPreviousSiblings: function (element) {
			var sum_of_items = 0;

			var siblings = element.previousSiblings();			
			siblings.each(function (el) {
				sum_of_items += el.getWidth();
			});
			return sum_of_items;
		},
		
		_refreshScrollbarStyle: function () {
			var scroller_width = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content').first().getWidth();
			var sums_width = this._getSumWidthOfItems();
			
			var coeff = scroller_width / sums_width;

			if (coeff < 1) {
				// imposta nuova dimensione handler
				var scrollbar_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar').first();
				var handler_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_handler').first();
				handler_el.setStyle({'width': Math.ceil(scrollbar_el.getWidth() * coeff)+'px'});

				// handle.appear
				handler_el.appear();
				
				// scroller_left, scroller_right setOpacity(1) 
				$$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_left', 
				   '#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_right').each(function (arrows) {
						arrows.setOpacity(1);
				});
				
				this._setControlSlider();
			}
		},
		
		_setControlSlider: function () {
			/************************************************/
			/***** ENABLING SLIDER EFFECT*******************/
			/************************************************/
			if (this.cs != null)
				this.cs.dispose();
			
			var scrollbar_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar').first();
			var scrollbar_handler_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_scrollbar_handler').first();
			
			var thisInstance = this;
			this.cs = new Control.Slider(scrollbar_handler_el, scrollbar_el, {
				range: $R(0, 100),
				sliderValue: 0, // initial value
				alignX: 0,

				onSlide: function(value) {
					thisInstance._scrollcontent(value);
				},
				onChange: function(value) { 
					thisInstance._scrollcontent(value);
				}
		    });
			this._scrollcontent(0);
			
		},
		
		_scrollcontent: function (value) {
			var scroller_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content').first();
			var scroller_width = scroller_el.getWidth();
			var sums_width = this._getSumWidthOfItems();
			
			//var coeff = scroller_width / sums_width;
			var newpos = (scroller_width-sums_width)*value/100;
			
			scroller_el.setStyle({'left': newpos+'px'});
		},
		
		_incrementalScrollToRight: function () {
			if (this.cs && this.cs.value <100) {
				var scroller_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content').first();
				var scroller_width = scroller_el.getWidth();
				var sums_width = this._getSumWidthOfItems();
			
				//var coeff = scroller_width / sums_width;
				var range = scroller_width-sums_width;
				var act_step = range*this.scroller_incremental/100;
			
				var new_left = parseInt(scroller_el.getStyle('left'))+act_step;
				var new_value = new_left * 100 / range;
				
				this.cs.setValue(new_value);
			}
		},
		
		_incrementalScrollToLeft: function () {
			if (this.cs && this.cs.value > 0) {
				var scroller_el = $$('#'+this.maincontainer_id+' .'+this.css_mainclass+'_content').first();
				var scroller_width = scroller_el.getWidth();
				var sums_width = this._getSumWidthOfItems();
			
				//var coeff = scroller_width / sums_width;
				var range = scroller_width-sums_width;
				var act_step = range*this.scroller_incremental/100;
				
				var new_left = parseInt(scroller_el.getStyle('left'))-act_step;
				var new_value = new_left * 100 / range;
				
				this.cs.setValue(new_value);
			}
		}
		
	});