// create a name space
//Ext.namespace('SmartWeb');
SmartWeb = {};

// create the class
SmartWeb.Rotation = function(config){
	
	// private area
	
	// set the private properties with the config object
	if(config === undefined) config = {};
	// config properties
	var el					= $(config.el)				|| 'HeaderRotation';	// el where to put the content
	var type 				= config.type 				|| 'news';				// type of rotation. For the moment, only 'news' is implemented
	var domain				= config.domain				|| '';					// domain name of the website
	var pageId				= config.pageId				|| 0;					// page id in the database from where the data should be fetched
	var titleCls			= config.titleCls			|| '';					// CSS class of the title element (depend on the type of rotation you chose also. There is a title for news, but not for picture for instance)
	var textCls				= config.textCls			|| '';					// CSS class of the text element (depend on the type of rotation you chose also. There is a text for news, but not for picture for instance)
	var imgCls				= config.imgCls				|| '';					// CSS class of the picture element
	var wrapperCls			= config.wrapperCls			|| '';					// CSS class of element that wraps the title and the text
	var generalWrapperCls	= config.generalWrapperCls	|| '';					// CSS class of element that wraps the title and the text
	var autoLaunch			= config.autoLaunch;								// launch automatically the slideshow when the data are fetched 
	if(autoLaunch === undefined) autoLaunch = true;		
	var delay				= config.delay				|| 5;					// time in seconds between an image change
	
	// private properties used by the class
	var data = {};			// array that contains all the data we want to display
	var threadPic;			// thread that changes the pictures
	var threadText;			// thread that changes the text when all the pictures of the news were shown
	var actual;				// set the active (shown in the frontend) index in the data array
	var pictureIndex;		// index of the picture we are currently displaying in the frontend
	
	
	
	
	// private functions
	var load = function(){
		// fecth all the data from the database
		new Ajax.Request(domain+'_custom/news/ajax_getNews.php?id='+pageId+'&type='+type, {
			method: 'get',
			onSuccess: function(php) {
				// set the data object with all the news
				var json	= php.responseText.evalJSON();
				data		= json.data;
				
				// preload the pictures
				for(var i=0 ; i<json.pictures.size() ; i++){
					var preload	= new Image();
					preload.src	= domain+'upload_dir/news/'+json.pictures[i];
				}				
				
				// fire the load event
				el.fire(el+':load');				
				
				// set the actual index to the first result in the data array
				actual = data.first();
				
				// launch the slideshow if the autolaunch variable is set to true
				if(autoLaunch) {
					launch();
				}
			}
		});
	};
	
	
	
	// start the thread that changes the pics
	var launch = function(){
				
		if(el.empty()){
			// update the news content
			updateNews();
		}else{			
			// fade out the content of the container and put the new content instead
			Effect.Fade('RotationGeneralWrapperUniqueId',{
				duration	: 0.3,
				afterFinish	: function(){
					// update the news content
					updateNews();
				}
			});
		}
		
		// start the pic Thread
		threadPic = new PeriodicalExecuter(changePicture, delay);

	};
	
	
	
	var changePicture = function(){		
		// change the picture of the news if there is another one
		if(actual.pictures !== undefined && (pictureIndex+2) <=  actual.pictures.size()){
			// increase the picture index
			pictureIndex ++;
			
			// get the ID of the current and next picture
			var temp;
			var current;
			if($('RotationImgUniqueId') != null){
				current	= 'RotationImgUniqueId';
				temp 	= 'RotationImgUniqueId1';
			}else{
				current	= 'RotationImgUniqueId1';
				temp 	= 'RotationImgUniqueId';
			}
			
			
			// change the picture
			Effect.Fade(current,{
				duration	: 0.4,
				afterFinish	: function(){
					$(current).remove();
					// create the img object
					img = new Element('img',{src:domain+'upload_dir/news/'+actual.pictures[pictureIndex],alt:actual.title,'class':imgCls,id:temp,style:'display:none;'});					
					// insert it in the html
					$('RotationGeneralWrapperUniqueId').insert({top:img});
					// display the new picture
					Effect.Appear(img,{duration:0.4,from:0,to:1});
				}
			});

			
			
		// if there isn't any more picture for this news, change the news
		}else{
			// stop the thread
			threadPic.stop();
			
			// set the picture index
			pictureIndex = 0;
			
			// change the actual and relaunch the slideshow
			if(actual == data.last()){
				actual 	= data.first();
			}else{
				actual 	= data[data.indexOf(actual)+1];
			}
			
			// relaunch the slideshow
			launch();
		}
	};
	
	
	
	
	// put the texts from the actual news in the page
	var updateNews =function(){
		// display the first new in the header
		// and then, launch the periodic updater to change the picture / news
		
		// create the img element
		var img;
		if(actual.pictures !== undefined){
			img = new Element('img',{src:domain+'upload_dir/news/'+actual.pictures.first(),alt:actual.title,'class':imgCls,id:'RotationImgUniqueId'});
		}
		// set the index of the current picture
		pictureIndex = 0;
		// create the title element
		var title	= new Element('h2',{'class':titleCls,id:'RotationTitleUniqueId'}).update(cleanSpecialChars(actual.title));
		
		// create the text element
		var text	= new Element('p',{'class':textCls,id:'RotationTextUniqueId'}).update(cleanSpecialChars(actual.text));
		//var text	= new Element('p',{'class':textCls,id:'RotationTextUniqueId'});
		
		// create a wrapper for the title and the text
		var wrapper			= new Element('div',{'class':wrapperCls,id:'RotationWrapperUniqueId'});
		// create a general wrapper for all the elements that can fade and appear
		var generalWrapper	= new Element('div',{'class':generalWrapperCls,id:'RotationGeneralWrapperUniqueId',style:'display:none;'});
		
		// empty the container
		//el.update();
		el.innerHTML = '';
		// addd the new elements
		if(actual.pictures !== undefined) $(generalWrapper).insert(img);
		el.insert($(generalWrapper).insert($(wrapper).insert(title).insert(text)));
				
		// display the new picture
		Effect.Appear('RotationGeneralWrapperUniqueId',{duration:0.3,from:0,to:1});
	};
	
	
	
	
	// method that change the &amp; by & and &lt; &gt; by < > and quotes also
	// necessary because the PHP send a htmlentitified string fot titles and texts
	var cleanSpecialChars = function(s){
		s = s.gsub('&amp;','&');
		s = s.gsub('&lt;',"<");
		s = s.gsub('&gt;',">");
		s = s.gsub('&quot;','"');
		s = s.gsub('&nbsp;',' ');
		s = s.gsub("\r\n",'');
		s = s.gsub("\r",'');
		// return the correct code that can be interpreted as HTML code
		return s;
	};
	
	
	
	
	// fetch the data
	load();
	
	
	// public area
	return {
		
		// stop the rotation
		stop	: function(){
			// stop the picture rotation
			//threadPic.stop();
			// stop the news rotation
			//threadText.stop();
		}	
	};
};