/*
	FILE: SlideShow.js
	DATE: 2009-06-25
	AUTHOR: Mount Mercy College -- BGT
	DESCRIPTION: This file contains common JavaScript for the Mount Mercy College Web site for SlideShows
*/


//********************************************************************************************************************
/*
	SLIDE SHOW OBJECT:
	Defines the attributes and operations of the Slide Show object to facilitate the display and operation of slide shows
*/

/* CONSTRUCTOR */
function  SlideShowDivObject(){
	this.name = "";
	this.imageName = "";
	this.imageArray = new Array();
	this.delaySeconds = 4000;
	this.firstTime = true;
	this.currentImage = -1;
	this.imageMax = 0;
	this.theTimer = null;
	this.rotateTimer = null;
	this.opacityTimer = null;
	this.isStarted = false;
	this.desiredOpacity = 1;
	this.fadeTimer = 0;
	this.firstTime = true;
}; // end constructor

/* TO STRING METHOD, JUST IN CASE */
SlideShowDivObject.prototype.toString = function(){
	var outString = "SlideShowDivObject: '" +this.name + "' ";
	return outString;
}; // end method toString()

/* GET AND SET THE ID NAME OF THE DIV */
SlideShowDivObject.prototype.setName = function ( aName ) { 
	this.name = aName; 
}; // end method setName()

SlideShowDivObject.prototype.getName = function ( ) { 
	return this.name;
}; // end method getName()

/* ADD AN IMAGE URL TO THE ARRAY */
SlideShowDivObject.prototype.addImageToArray = function (imageName) {
	this.imageArray[this.imageArray.length] = imageName;
	this.imageMax = this.imageArray.length;
	if( this.currentImage < 0 ) {
		this.currentImage = 0;
	}
}; // end method addImageToArray()

/* IMAGE NAME */
SlideShowDivObject.prototype.setImageName = function( newImageName ) {
	this.imageName = newImageName;
};// end method setImageName()

SlideShowDivObject.prototype.getImageName = function() {
	return this.imageName;
}; // end method getImageName()

/* SET THE DELAY IN SECONDS */
SlideShowDivObject.prototype.setDelay = function( seconds ) {
	var result = false;
	if( !isNaN( seconds ) ) {
		this.delaySeconds = Math.abs( seconds * 1000 );
		result = true;
	} // end if NAN
	return result;
}; // end method setDelay()

/*
	Methods to run the slide show in Firefox and standards compliant browsers
*/

SlideShowDivObject.prototype.stopRotation = function() {
	this.isStarted = false;
	if( this.rotateTimer ) {
		var theObj = this;
		window.clearTimeout( theObj.rotateTimer );
		this.rotateTimer = null;
	} // end if
}; // end method stopRotation()


SlideShowDivObject.prototype.rotateImage = function(  ) {
	if( this.theTimer ) {
		var theObj = this;
		window.clearTimeout( theObj.theTimer );
	} // end if timer set
        /*
	if( this.firstTime ) {
		this.firstTime = false;
		var thisObj = this;
		this.theTimer = window.setTimeout( function(){ thisObj.rotateImage(); }, this.delaySeconds );
	} else {
*/
		this.currentImage++;
		if( this.currentImage >= this.imageMax ) {
			this.currentImage = 0;
		} // end if need to start over with images
		// Set the Div's background image to match what the current Image Source is
		var thisName = this.getName();
		var thisImage = this.getImageName();
		document.getElementById( thisName ).style.backgroundImage = "url( " + document.getElementById( thisImage ).src + ")";
		// branch based on navigator type
		/*
		if( navigator.appName == "Microsoft Internet Explorer"  ) {
			this.doTrans();
		} else {*/
			// Set the image's opacity to zero so it is hidden
			this.desiredOpacity = 0;
			this.changeOpacity();
			// Change the image's source to the new one
			document.getElementById( this.getImageName() ).src = this.imageArray[this.currentImage];
			// This function will gradually make the new image visible, thereby hiding the Div's backgroun image
			this.makeVisible();
		/*} // end if IE*/
	/*} // end if first time*/
}; // end method rotateImage()

SlideShowDivObject.prototype.clearTimer = function() {
	var result = false;
	if( this.theTimer ) {
		var theObj = this;
		window.clearTimeout( theObj.theTimer );
		result = true;
	}
	return result;
}; // end method clearTimer()

SlideShowDivObject.prototype.setTimer = function( method, delay ) {
	// Start by stopping any other timer for this object
	this.clearTimer();
	// now set the new timer
	var theObj = this;
	this.theTimer = window.setTimeout( method, delay );
}; // end method setTimer()


/*
	For Internet Explorer
*/

SlideShowDivObject.prototype.doTrans = function() {
	var image;
	var newImageSrc;
	try{
		this.clearTimer();
		image = document.getElementById( this.getImageName() );
		newImageSrc = this.imageArray[ this.currentImage ];
		image.filters[0].apply();
		image.src = newImageSrc;
		image.filters[0].play();
	} catch(err) {
		alert( "Error handling the filters: " + err.toString() );
		return false;
	} finally{
		if( image ) {
			image = null;
		}
		if( newImageSrc ) {
			newImageSrc = null;
		}
	} // end try catch finally
	var thisObj = this;
	this.theTimer = window.setTimeout( function(){ thisObj.rotateImage(); }, this.delaySeconds );
}; //end method doTrans()

/*
	For Other Browsers
*/
// Sets the opacity for the Image contained within the Div, not the div itself!
SlideShowDivObject.prototype.changeOpacity = function() {
	var theImageStyle = document.getElementById( this.getImageName() ).style;
	var dividedOpacity = this.desiredOpacity / 100;
	theImageStyle.opactity = dividedOpacity;
	theImageStyle.MozOpacity = dividedOpacity;
	theImageStyle.KhtmlOpacity = dividedOpacity;
	document.getElementById( this.getImageName() ).filter = "alpha(opacity=" + this.desiredOpacity + ")";
	var thisObj = this;
	var delay = this.delaySeconds;
	this.theTimer = window.setTimeout( function() { thisObj.continueOpacity(); }, 10 );
}; // end method changeOpacity()

SlideShowDivObject.prototype.makeVisible = function() {
	var speed = 10;
	var timer = 0;
	this.fadeTimer = 0;
	this.desiredOpacity = 0;
	this.continueOpacity();
}; // end method makeVisible()

SlideShowDivObject.prototype.continueOpacity = function() {
	var thisObj = this;
	var speed = Math.round( 1000/10 );
	if( this.desiredOpacity < 100 ) {
		// Still incrementing
		this.desiredOpacity ++;
		this.changeOpacity();
		var changeTime = this.fadeTimer * speed;
		this.theTimer = window.setTimeout( function() { thisObj.continueOpacity }, changeTime );
		this.fadeTimer++;
	} else {
		// We are at maximum opacity (100%), so set the timer to handle the next image after a delay
		if( this.isStarted ) {
			var delay = this.delaySeconds;
			this.rotateTimer = window.setTimeout( function(){ thisObj.rotateImage(); }, delay );
		}
		/*
		var delay = this.delaySeconds;
		this.theTimer = window.setTimeout( function(){ thisObj.rotateImage(); }, delay );
		*/
	} // end if still needed
}; // end method continueOpacity()

//********************************************************************************************************************
// Functions for use with Internet Explorer and its filters
//********************************************************************************************************************

function stopRotation( slideShow ) {
	slideShow.isStarted = false;
	if( slideShow.rotateTimer ) {
		window.clearTimeout( slideShow.rotateTimer );
		slideShow.rotateTimer = null;
	} // end if
} // end function stopRotation()

function rotateImage( slideShow ) {
/*	
       if( slideShow.firstTime ) {
		slideShow.firstTime = false;
		var theFunc = function() { rotateImage( slideShow); };
		var theDelay = slideShow.delaySeconds;
		slideShow.rotateTimer = window.setTimeout( theFunc, theDelay );
	} else {
*/
		slideShow.currentImage++;
		if( slideShow.currentImage >= slideShow.imageMax ) {
			slideShow.currentImage = 0;
		} // end if start over
		// set teh div to look like the image
		document.getElementById( slideShow.getName() ).style.backgroundImage = "url(" + document.getElementById( slideShow.getImageName() ).src + ")";
		
		// split activity based on browser
		if( navigator.appName == "Microsoft Internet Explorer" ) {
			doTrans( slideShow );
		} else {
			changeOpacity( slideShow, 0 );
			document.getElementById( slideShow.getImageName() ).src =slideShow.imageArray[ slideShow.currentImage ];
			makeVisible( slideShow );
		} // end if MSIE
		
/*	} // end if first time */
} // end function rotateImage

function changeOpacity( slideShow, opacity ) {
	if( (opacity % 50) == 0 && opacity != 0 ) {
		alert( "Setting Opacity to '" + opacity + "' " );
	}
	var object = document.getElementById( slideShow.getImageName() ).style;
	var desiredOpacity = opacity / 100;
	object.opacity= desiredOpacity;
	object.MozOpacity = desiredOpacity;
	object.KhtmlOpcaity = desiredOpacity;
	if( opacity > 99 ) {
		if( slideShow.isStarted ) {
			var theFunc = function() { rotateImage( slideShow); };
			var theDelay = slideShow.delaySeconds;
			slideShow.rotateTimer = window.setTimeout( theFunc, theDelay );
		} // end if started
	} // end if opaque
} // end function changeOpacity()

function makeVisible( slideShow ) {
	var speed = Math.round(1000 / 100);
	var timer = 0;
	var theFunc;
	for( var i = 0; i <= 100; i++ ) {
		theFunc = function() { changeOpacity( slideShow, i ) ;};
		//changeOpacity( slideShow, i ) ;
		window.setTimeout( theFunc, ( timer * speed ) );
		timer++;
	} // end for
} // end function makeVisible()

/*
	Handles the fade in for Internet Explorer
*/
function doTrans( slideShow ) {
	var object = document.getElementById( slideShow.getImageName() );
	object.filters[0].apply();
	object.src = slideShow.imageArray[ slideShow.currentImage ];
	object.filters[0].play();
	var theFunc = function() { rotateImage( slideShow); };
	var theDelay = slideShow.delaySeconds;
	slideShow.rotateTimer = window.setTimeout( theFunc, theDelay );
} // end function doTrans()


//********************************************************************************************************************
// Stop/Start funcitonality
//********************************************************************************************************************

function toggleSlideShowRunning(theButton, slideShow) {
	var startText = "Start Slide Show";
	var stopText = "Pause Slide Show";
	if( theButton.value == startText ) {
		theButton.value = stopText;
		slideShow.isStarted = true;
		//if( navigator.appName == "Microsoft Internet Explorer" ) {
			rotateImage( slideShow );
		//} else {
		//	slideShow.rotateImage(  );
		//}  // end if IE
	} else {
		theButton.value  = startText;
		slideShow.isStarted = false;
		//if( navigator.appName == "Microsoft Internet Explorer" ) {
			stopRotation( slideShow );
		//} else {
		//	slideShow.stopRotation(  );
		//} // end if IE
	} // end if start
}; // end function toggleSlideShowRunning()