/**
 *	Basic Slideshow App
 *	
 *	Plagerised from Tom Doyle by Isotope Communications Ltd, Dec 2008
 *	http://www.tomdoyletalk.com/2008/10/28/simple-image-gallery-slideshow-with-scriptaculous-and-prototype/
 *	
 *	Published [16/12/08]:
 *	http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/	
 *
 *	Changes: Basically made it an object so that you can run multiple instances and so that
 *			 it doesn't get interfered with by other scripts on the page.
 *	
 *			 Have also added a few things, like "Captions" and the option of changing the
 *			 effects..
 *
 *	Example:
 *			Event.observe(window, 'load', function(){
 *				oMySlides = new iSlideShow({
 *					autostart 	: true		// optional, boolean (default:true)
 *					start		: 0,	 	// optional, slides[start] (default:0) 
 *					wait 		: 4000, 	// optional, milliseconds (default:4s)
 *					slides 		: [
 *						'image-div-a', 
 *						'image-div-b', 
 *						'image-div-c', 
 *						'image-div-d' 
 *					],
 *					counter		: 'counter-div-id', // optional...
 *					caption 	: 'caption-div-id', // optional... 
 *					playButton	: 'PlayButton', 	// optional (default:playButton)
 *					pauseButton	: 'PauseButton', 	// optional (default:PauseButton)
 *				});
 *				oMySlides.startSlideShow();
 *			});
 *
 *			To start the slideshow:
 *				oMySlides.startSlideShow();
 *
 *			To skip forward, back, stop:
 *				oMySlides.goNext();
 *				oMySlides.goPrevious();
 *				oMySlides.stop();
 */

var iSlideShow = new Class.create();

iSlideShow.prototype = {
	
	initialize : function (oArgs){
		this.wait 			= oArgs.wait ? oArgs.wait : 4000;
		this.start 			= oArgs.start ? oArgs.start : 0;
		this.duration		= oArgs.duration ? oArgs.duration : 0.5;
		this.autostart		= (typeof(oArgs.autostart)=='undefined') ? true : oArgs.autostart;
		this.slides 		= oArgs.slides;
		this.counter		= oArgs.counter;
		this.caption		= oArgs.caption;
		this.playButton		= oArgs.playButton ? oArgs.playButton : 'PlayButton';
		this.pauseButton	= oArgs.pauseButton ? oArgs.pauseButton : 'PauseButton';
		this.iImageId		= this.start;
		if ( this.slides ) {
			this.numOfImages	= this.slides.length;
			if ( !this.numOfImages ) {
				alert('No slides?');
			}
		}
		if ( this.autostart ) {
			this.startSlideShow();
		}
	},
	
	// The Fade Function
	swapImage: function (x,y) {		
		$(this.slides[x].image) && $(this.slides[x].image).appear({ duration: this.duration });
		$(this.slides[y].image) && $(this.slides[y].image).fade({duration: this.duration });
		$(this.slides[x].caption) && $(this.slides[x].caption).appear({ duration: this.duration });
		$(this.slides[y].caption) && $(this.slides[y].caption).fade({duration: this.duration });
	},
	
	// the onload event handler that starts the fading.
	startSlideShow: function () {
		this.started = setInterval(this.play.bind(this), this.wait);
		
		$(this.playButton).hide();
		$(this.pauseButton).appear({ duration: 0});

		this.updatecounter();
	},
	
	play: function () {
		var imageShow, imageHide;
	
		imageShow = this.iImageId+1;
		imageHide = this.iImageId;
		
		if (imageShow == this.numOfImages) {
			this.swapImage(0,imageHide);	
			this.iImageId = 0;					
		} else {
			this.swapImage(imageShow,imageHide);			
			this.iImageId++;
		}
		
		this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
		this.updatecounter();
	},
	
	stop: function  () {
		clearInterval(this.started);

		$(this.playButton).appear({ duration: 0});
		$(this.pauseButton).hide();
	},
	
	goNext: function () {
		clearInterval(this.started);
		$(this.playButton).appear({ duration: 0});
		$(this.pauseButton).hide();
		
		var imageShow, imageHide;
	
		imageShow = this.iImageId+1;
		imageHide = this.iImageId;
		
		if (imageShow == this.numOfImages) {
			this.swapImage(0,imageHide);	
			this.iImageId = 0;					
		} else {
			this.swapImage(imageShow,imageHide);			
			this.iImageId++;
		}
	
		this.updatecounter();

	},
	
	goPrevious: function () {
		clearInterval(this.started);
		$(this.playButton).appear({ duration: 0});
		$(this.pauseButton).hide();
	
		var imageShow, imageHide;
					
		imageShow = this.iImageId-1;
		imageHide = this.iImageId;
		
		if (this.iImageId == 0) {
			this.swapImage(this.numOfImages-1,imageHide);	
			this.iImageId = this.numOfImages-1;		
			
			//alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
						
		} else {
			this.swapImage(imageShow,imageHide);			
			this.iImageId--;
			
			//alert(imageShow + ' and ' + imageHide)
		}
		
		this.updatecounter();

	},
	
	updatecounter: function () {
		var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
		$(this.counter) && ( $(this.counter).innerHTML = textIn );
		if ( $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
			$(this.caption).innerHTML = oNewCaption.innerHTML;
		}
	}
};

var hwiSlideShow = new Class.create();

hwiSlideShow.prototype = {
	initialize: function(slideshowDOM, sldshwid, options){
		this.idx = 0;
		this.imgwait = 8000;
		this.slides=[];
		this.container = slideshowDOM.container;
		this.imageDiv = slideshowDOM.imageDiv;
		this.captionDiv = slideshowDOM.captionDiv;
		this.sldshwid = sldshwid;
		this.imageDetails = [{foo:'bar'}];
		this.options = {
			appurl:appurl,
			processor:'slideshow/slideshow.php',
			manager:'slideshow/manager/index.php',
			buttons:'imgages/slideshowbuttons/',
			images:'images/slideshowimgaes/',
			widgetimgs:'images/slideshow/',
			loadingDiv:'hwi_sldshw_loading',
			loadingImg:'ajax-loader.gif'
		};
		Object.extend(this.options || {});

		this.startImageDetailsReq();
	},
	buildSlideShow: function(){
		
	},
	startImageDetailsReq: function(){
		var params = {sldshw:true, sldshwid:this.sldshwid};
		var ajaxOptions = {
				parameters:params,
				onLoading:function(){return false;},
				onComplete:this.requestImageDetails.bind(this),
				onFailure:function(){ return false; }
			};
		var req = new Ajax.Request(this.options.appurl + this.options.processor, ajaxOptions);
		return true;
	},
	requestImageDetails: function(request) {
		this.buildSlideShowDivs(this.idx, this.slides, this.imgwait, this.imageDiv, this.captionDiv, request.responseText.evalJSON());
		return true;
	},
	getImageDetails:function(){
		return this.imageDetails;
	},
	displayLoading: function(){
		
	},
	buildSlideShowDivs:function (idx, slides, wait, imageDiv, captionDiv, imageDetails){
		
		slides.clear();
		var disp = 'none';
		imageDetails.each(function(imgdet) {
			disp = (idx==0) ? 'block' : 'none';
	
			var imgid = imgdet.image.gsub(/(.*)\.(.*$)/, function(m){return m[1];});
			
			var divs = Builder.node('div', {className:'img_div', id:'sldshw_imgdiv_'+imgid, style:'display:'+disp+';'},
						Builder.node('a', {href:imgdet.infohref },
							Builder.node('img', {src:imgdet.location+imgdet.image, alt:imgdet.alt, style:'width:100%; height:100%;'})
							) // a -href
			);// image div
	
			var cptdivs = Builder.node('div', {id:'sldshw_captdiv_'+imgid, className:'sldshw_capt_div', style:'display:'+disp+';' },
					[
						Builder.node('div', {id:'scnc_caption_title_'+imgid, className:'sldshw_capt_title'}, imgdet.title),
						Builder.node('p',{id:'scnc_caption_p_'+imgid, className:'sldshw_capt_p' },[
							imgdet.caption]) //,
//						Builder.node('a', { href:imgdet.infohref, className:'infohref' }, "Learn More")
						]
					) ;

			$(imageDiv).insert(divs, {position:'top'});
	
			$(captionDiv).insert(cptdivs, {position:'top'});
	
			slides.push({ image:'sldshw_imgdiv_'+imgid, caption:'sldshw_captdiv_' + imgid});
	
			idx++;
		});
		this.startSlideShow(slides, wait);
	},
	startSlideShow:function(slides, imgwait){
		var ScientistSlideShow = new iSlideShow({
		autostart: true,
		start: 0,
		wait:imgwait,
		slides:slides,
		playButton:'scnc_play',
		pauseButton:'scnc_pause' });
	
		Event.observe($('scnc_play'), 'click', ScientistSlideShow.startSlideShow.bind(ScientistSlideShow));
		Event.observe($('scnc_pause'), 'click', ScientistSlideShow.stop.bind(ScientistSlideShow));
		Event.observe($('scnc_bck'), 'click', ScientistSlideShow.goPrevious.bind(ScientistSlideShow));
		Event.observe($('scnc_fwd'), 'click', ScientistSlideShow.goNext.bind(ScientistSlideShow));
	},
	setNavOpacity:function(cssOpacity){
		$$(cssOpacity).each(function(e){
			$(e.id).setOpacity(0.75);
		});
	}
};