// JavaScript Document

// newsTicket class passes in the container ID, content ID and overlay ID as well as the amount of time in milliseconds that you would like each newsitem to display for.
function newsTicker(container, content, overlay, displayTime) {
	
	this.newsContainer = getMyHTMLElement(container); // container holding the newsticket
	this.newsContent = getMyHTMLElement(content); // content inside of ticker
	this.overlay = getMyHTMLElement(overlay); // moving overlay that shows/hides the content
	this.overlayWidth = null;
	this.overlayIncrement = 10; // amoutn the overlay shrinks by each time the contractOverlay function is called.
	this.newsObjects = this.newsContent.getElementsByTagName('div'); // all the items inside of the ticker
	this.numNews = this.newsObjects.length; // number of items
	this.newsWidth = this.newsContainer.offsetWidth;
	this.displayTime = displayTime;
	this.position = 0;
	this.currentHeaderWidth = null;
	this.visibilityIncrement = 10;
	this.currentOpacity = 0;
	
	// this.showNews is the most important function. It positions the current news item to the correct location and calculates the width and start position of the overlay.
	this.showNews = function () {
		
		if ( (this.position+1) > this.numNews) {this.position = 0;} // if end of list start again
		this.newsContent.style.left = -(this.position * this.newsWidth) + "px"; // position content to show correct item.
		try {
			this.currentHeaderWidth = this.newsObjects[this.position].getElementsByTagName('span')[0].offsetWidth+10; // if span title exists then start overlay from there instead of left of container.
		} catch(e) {

			this.currentHeaderWidth = 0; // if span title doesnt exists set amount to 0.
		}
		//this.overlayWidth = this.newsWidth - (this.currentHeaderWidth); // set size of overlay to incorporate title if applicable.
		//MODIFIED BY D.KIM
		this.overlayWidth = this.newsWidth ;
		this.overlay.style.width = this.overlayWidth + "px";
		this.makeVisible();
	}
	
	// this.makeVisible fades in the content and launches this.contractOverlay to start the overlay animation
	this.makeVisible = function () {
		
		if (this.currentOpacity < 100) {
			
			this.currentOpacity += this.visibilityIncrement;
			this.setOpacity(this.newsContent,this.currentOpacity);
			var _this = this;
			setTimeout(function() {
				_this.makeVisible();					
			},50);
			
		} else {
			this.contractOverlay();
		}	
	}
	
	// this.makeInvisible fades out the content, incrememnts to next object and launches showNews to position it correctl
	this.makeInvisible = function() {
		if (this.currentOpacity > 0) {
			this.currentOpacity -= this.visibilityIncrement;
			this.setOpacity(this.newsContent,this.currentOpacity);
			var _this = this;
			setTimeout(function() {
				_this.makeInvisible();			
			},50);
			
		} else {
			this.position++;
			this.showNews();
		}
	}
	
	// this.contractOverlay slide the overlay from left to right, starting for either the left of container or from the edge of the title
	this.contractOverlay = function() {
		
		this.overlayWidth = this.overlay.offsetWidth;
		var _this = this;
		
		if ( this.overlayWidth >= this.overlayIncrement) {
			
			this.overlay.style.width = (this.overlayWidth - this.overlayIncrement) + "px";
			setTimeout(function(){
				_this.contractOverlay()
			}, 50); 
		
		} else {

			this.overlay.style.width = 0 + "px";
			setTimeout(function() {
				_this.makeInvisible();				
			}, this.displayTime);
		}
	}
	
	// this.setOpacity simply sets an opacity value to the object passed in.
	this.setOpacity = function(object, value) {
		
		object.style.opacity = value/100;
		object.style.mozOpacity = value/100;
		object.style.filter = "alpha(opacity=" + value + ")";
	}
	

}