/*
    This file is part of JonDesign's SmoothSlideshow v2.0.

    JonDesign's SmoothSlideshow is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    JonDesign's SmoothSlideshow is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Foobar; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

    Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
    Contributed code by:
    - Christian Ehret (bugfix)
    - Simon Willison (addLoadEvent)
    
    - *** Rewritten for better functionality (uses mootools 1.2) :JMW093008
*/


//Add the window event to create the class
/*window.addEvent("domready", function() {

	new timedSlideShow("mySlideshow", mySlideData);
});	
*/
// declaring the class
//NOTE: SLIDESHOW PIC DIMENSIONS ARE 341H X 450W
addLoadEvent(startSlideshow);

function startSlideshow() {
	var slideshow = new timedSlideShow($('mySlideshow'), mySlideData);
//	alert("Slideshow started");
}

var timedSlideShow = new Class({

	//implementing the class
	initialize: function(container, data) {
		this.container = $(container);
		this.currentIter = 0;
		this.lastIter = 0;
		this.maxIter = 0;
		this.slideShowElement = container;
		this.slideShowData = data;
		this.slideShowInit = 1;
		this.slideElements = Array();
		this.slideShowDelay = 5000;
		this.articleLink = "";
		this.slideInfoZone = "";
		this.mouseoverimg = false;		//Clear mouse in image flag
		this.mouseoverAdvDone = true;	//Set advance image done flag
		this.ImageTransInProg = false;	//Clear image transition in progress flag
		this.srcHtWdObj = new HtWdObject(true);	//Object for passing values to/from AdjustImgSz (see definition below)		

/*		this.articleLink = document.createElement('a');				//New element
		this.articleLink.className = 'jdSlideLink';
		this.container.appendChild(this.articleLink);
		this.articleLink.href = "";
*/
		this.maxIter = data.length;

		//Clear the timer (just making sure)
		this.timer = $clear(this.timer);
		
		//Create a DOM element for each image
		for(i=0;i<data.length;i++)
		{
			var currentImg = document.createElement('div');	//New element
//			alert("appending images: i: " + i + " " + currentImg);
			currentImg.className = "slideElement";
			currentImg.style.position="absolute";
			currentImg.innerHTML = "<a href='"+ data[i][1] +"' title='click for more info about this image' target='_blank'><img id='slideImg' src='"+ decodeURIComponent(data[i][0]) +"' alt='grassfedart slideshow image'/></a>";

//			this.articleLink.appendChild(currentImg);
			this.container.appendChild(currentImg);
			currentImg.currentOpacity = new Fx.Tween(currentImg, 'opacity', {duration: 40});	//was 400:JMW110404
			currentImg.setStyle('opacity',0);
			this.slideElements[parseInt(i)] = currentImg;
		}
		
/*		this.loadingElement = document.createElement('div');
		this.loadingElement.className = 'loadingElement';
//		this.articleLink.appendChild(this.loadingElement);
		this.container.appendChild(this.loadingElement);
*/		
		this.slideInfoZone = document.createElement('div');
		this.slideInfoZone.className = 'slideInfoZone';
//		this.articleLink.appendChild(this.slideInfoZone);
		this.container.appendChild(this.slideInfoZone);
		this.slideInfoZone.style.opacity = 0;

		$('mySlideshow').addEvent('mouseleave', function(e){
			//Start timer on mouse leave
			if(this.mouseoverAdvDone == true){
//				this.timer = $clear(this.timer);
				this.ImageTransInProg = false;	//Clear current transition status flag
				this.mouseoverAdvDone = false;	//Clear advance done flag
				this.mouseoverimg = false;		//Clear mouse in flag
//				alert("got leave");
//				this.nextSlideShow();			//Advance to the next slide
				this.timer = this.nextSlideShow.periodical(1000, this);
			}
		}.bind(this));

		$('mySlideshow').addEvent('mouseenter', function(e){
			//Stop timer on mouse enter
			this.timer = $clear(this.timer);
			this.progTimer = $clear(this.progTimer);
			this.mouseoverimg = true;
			this.mouseoverAdvDone = true;	//Set advance done flag
		}.bind(this));

		this.doSlideShow();		//Start the slide show
	},
	destroySlideShow: function(element) {
		var myClassName = this.container.className;
		var newElement = document.createElement('div');
		newElement.className = myClassName;
		this.container.parentNode.replaceChild(newElement, element);
	},
	startSlideShow: function() {
//		alert("Got to start Slideshow");
//		this.loadingElement.style.display = "none";
		this.lastIter = this.maxIter - 1;
		this.currentIter = 0;		//Index to the current slide
		this.slideShowInit = 0;
		
		//Specify the function to execute after image re-size is finished
		this.srcHtWdObj.parent = this;
		this.ImgReSz = this.StartSldShowFinish;

		//Scale the image to fit our slide size without distorting aspect ratio
		//(Call "StartSldShowFinish" when finished)
		this.ReSzImgClass = new AdjustImgSzClass(this.slideElements[0], 341, 450, this.srcHtWdObj);
		this.ReSzImgClass.LoadImg(false);
//		alert("returned from this.ReSzImgClass.LoadImg() at start");
		
//		AdjustImgSz(this.slideElements[0], 341, 450, this.srcHtWdObj);	//310, 332
	},
	StartSldShowFinish: function(){
		//Make the slide visible
		this.slideElements[parseInt(this.currentIter)].setStyle('opacity', 1);
		this.showInfoSlideShow();		//Show image caption
	
//		setTimeout(this.nextSlideShow.bind(this),this.slideShowDelay);
		this.timer = $clear(this.timer);
		this.timer = this.nextSlideShow.periodical(this.slideShowDelay, this);		
	},
	nextSlideShow: function() {
		this.timer = $clear(this.timer);		//Clear the periodical slide timer
		this.lastIter = this.currentIter;
		this.currentIter++;						//Index to next slide
		if (this.currentIter >= this.maxIter)	//Past end?
		{
			this.currentIter = 0;
			this.lastIter = this.maxIter - 1;
		}
		this.slideShowInit = 0;
		this.doSlideShow.bind(this)();
	},
	doSlideShow: function() {	//Pre-load and run the slideshow
		if (this.slideShowInit == 1)	//First time in
		{
			imgPreloader = new Image();
			// once image is preloaded, start slideshow
			//THIS IS NOT SUPPORTED IN HTML 4.0
/*			imgPreloader.onload=function(){
				setTimeout(this.startSlideShow.bind(this), 1500);	//was 1500:JMW110409 //was 10:JMW100609
			}.bind(this);
*/
			imgPreloader.src = this.slideShowData[0][0];
			
			//Add progress bar class to wait for the first image to load
			this.imgProgBar = new progBar();
			
			this.imgProgBar.setup_bar('visible'); 	// call the function setup_bar() first
			//Periodically call: this.imgProgBar.progress_bar()
			this.progTimer = $clear(this.progTimer);
			this.progTimer = this._progBarUpdate.periodical(500, this);				

//			setTimeout(this.startSlideShow.bind(this), 1500);
		} 
		else {							//All slides subsequent to the first
//			alert("Got to doSlideShow: this.mouseoverimg " + this.mouseoverimg);
			//Specify the function to execute after image re-size is finished
			this.srcHtWdObj.parent = this;
			this.ImgReSz = this.FinishImgFadeIn;

			//Scale the image to fit our slide size without distorting aspect ratio
			//(Call "StartSldShowFinish" when finished)
			if((this.mouseoverimg == false) && (this.ImageTransInProg == false)){	//Mouse NOT moved over image?
				this.ReSzImgClass = new AdjustImgSzClass(this.slideElements[parseInt(this.currentIter)], 341, 450, this.srcHtWdObj);
				this.ImageTransInProg = true; 
				this.ReSzImgClass.LoadImg(false);
			}
//			else if(this.mouseoverimg == true)	//Mouse moved over image?
//				this.mouseoverimg = false;		//Clear flag and wait for mouse to leave

			//Scale the image to fit our slide size without distorting aspect ratio
//			AdjustImgSz(this.slideElements[parseInt(this.currentIter)], 341, 450);
		}
	},
	FinishImgFadeIn: function(){
//		alert("Got to start FinishImgFadeIn");
		if(this.mouseoverimg == false){	//Mouse NOT moved over image?
			this.fadeOutFx = new Fx.Tween(this.slideElements[parseInt(this.lastIter)], {duration: 700});
			this.fadeInFx = new Fx.Tween(this.slideElements[parseInt(this.currentIter)], {duration: 700});
			this.hideInfoSlideShow();				//Hide the caption
			(function(){	//Delay					//Wait for fade out to complete
				this.fadeOutFx.start('opacity', 0);	//Fade out previous image
			}).delay(800, this);					//was 500:JMW100609		
			(function(){	//Delay					//Wait for fade out to complete
				this.fadeInFx.start('opacity', 1);		//Fade in next image
			}).delay(800, this);					//was 500:JMW100609		
			this.showInfoSlideShow();				//Show next image caption

			this.mouseoverAdvDone = true;	//Set mouse over advance done flag
			this.ImageTransInProg = false;	//Clear image transition in progress flag

			//Set the periodical slide timer (if not mouse over)
			this.timer = this.nextSlideShow.periodical(this.slideShowDelay, this);
		}
	},
	showInfoSlideShow: function() {			//Show the caption
		try {
			this.slideInfoZone.dispose();
        } 
		catch (e){
		}
        
		this.slideInfoZone = new Element('div');
		this.slideInfoZone.className = 'slideInfoZone';
//Title is not used :JMW121108
//		this.slideInfoZoneTitle = new Element('h2');
//		this.slideInfoZoneTitle.innerHTML = this.slideShowData[this.currentIter][2];
//		this.slideInfoZone.appendChild(this.slideInfoZoneTitle);

		this.slideInfoZoneDescription = new Element('p');
		this.slideInfoZoneDescription.innerHTML = this.slideShowData[this.currentIter][3];
		this.slideInfoZone.appendChild(this.slideInfoZoneDescription);

//		this.articleLink.appendChild(this.slideInfoZone);
		this.container.appendChild(this.slideInfoZone);
//		this.articleLink.href = this.slideShowData[this.currentIter][1];
		this.slideInfoZone.normalHeight = this.slideInfoZone.getStyle('height', true).toInt();
		this.CaptFadeInFx = new Fx.Tween(this.slideInfoZone, {duration: 200});
		this.slideInfoZone.setStyle('color', '#FFFFFF')
//		(function(){	//Delay					//Wait for fade out to complete
			this.CaptFadeInFx.start('opacity', 1);	//Fade in the caption
//		}).delay(200, this);					//was 500:JMW100609		
	},
		
	hideInfoSlideShow: function() {	//Hide the caption
		this.CaptFadeOutFx = new Fx.Tween(this.slideInfoZone, {duration: 200});
//		(function(){	//Delay					//Wait for fade out to complete
			this.CaptFadeOutFx.start('opacity', 0);	//Fade out the caption
//		}).delay(200, this);					//was 500:JMW100609		
	},
	
	_progBarUpdate: function(){
		this.imgProgBar.progress_bar();
		if(this.imgProgBar.doneyet){	//Done loading images?
			this.progTimer = $clear(this.progTimer);	
//			setTimeout(this.startSlideShow.bind(this), 1500);
			this.startSlideShow();
		}
	}		//END: _progBarUpdate	
		
});


//Create an object for passing data to/from scaling function AdjustImgSz 
function HtWdObject(SetSz) {
  this.height;
  this.width;
  this.parent;
  this.SetSz = SetSz;
  return this;
}


function initTimedSlideShow(element, data) {
	var slideshow = new timedSlideShow(element, data);
}


function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}