//'~/siteinfo/javascript/specific/components/headlines.ascx

var buttonScrollLeft,
	buttonScrollRight;
	 
var isScrolling = false;

var headingBorderStyle = '1px solid #666',
	panelBorderStyle = '1px solid #ccc';

var scrollRate = 10,
	scrollSpeed = 30;
	 
var smallPanelWidth;

var panels = new Array();

var alerted = false;

// This loads the initHeadlineControls function below to initialize the scrolling headling panels.
// AddEvent() is declared in globalFunctions.js
addEvent(window, "load", initHeadlineControls);

function initHeadlineControls(){
	buttonScrollLeft = get("buttonScrollLeft");				// get is a shortened version of getElementById()
	buttonScrollRight = get("buttonScrollRight");
	
	smallPanelWidth = buttonScrollLeft.offsetWidth;
	
	addEvent(buttonScrollLeft, "click", initScrollLeft);
	addEvent(buttonScrollRight, "click", initScrollRight);
		
	// Firefox is case-sensitive and won't recognize Panel1; therefore, change the scroll rate to suit Firefox.
	if (document.getElementById('PANEL1') == null){
		scrollRate = 20;
	}   
	
	// Instantiate panel 1-4 and heading 1-4 as part of the panels array
	initPanels(panels, 'panel', 'panels', 8, panelBorderStyle);
	initPanels(panels, 'heading', 'panels', 8, headingBorderStyle);
}

// Initialize each panel
function initPanels(arrayVar, panelId, arrayId, size, borderStyle){
	var length = arrayVar.length;
	var j = 1;
	
	if (length > 0){
		length -= 1;
	}
	
	for (var i = (length + 1); i <= (length + size); i++){
		arrayVar[i] = new Panel();
		arrayVar[i].id = panelId + j;
		arrayVar[i].panelNumber = j;
		arrayVar[i].borderStyle = borderStyle;
		arrayVar[i].width = get(arrayVar[i].id).offsetWidth;
		arrayVar[i].scrollRate = scrollRate;
		arrayVar[i].scrollSpeed = scrollSpeed;
		arrayVar[i].arrayIndex = i;
		arrayVar[i].familyName = arrayId;
		j++;
	}
}	

// This function is called when a user clicks on the left scroll button.
function initScrollLeft(){	
	if (!isScrolling){
		isScrolling = true;

		for (var i = 1; i < panels.length; i++){
			panels[i].left -= panels[i].width;
			panels[i].right = panels[i].left + panels[i].width;
		}
		for (var i = 1; i < panels.length; i++){
			panels[i].scrollLeft();
		}
	}
}

// This function is called when a user clicks on the right scroll button.
function initScrollRight(){	
	if (!isScrolling){
		isScrolling = true;
		
		for (var i = 1; i < panels.length; i++){
			panels[i].left = panels[i].right + panels[i].width;
		}
		for (var i = 1; i < panels.length; i++){
			panels[i].scrollRight();
		}
	}
}

// This is the magical Panel object.
Panel = function(){
	this.familyName;
	this.panelNumber;
	this.id;
	this.arrayIndex;
	this.borderStyle;
	this.width = 0;
	this.left = 0;
	this.right = 0;
	this.scrollRate = 0;
	this.scrollSpeed = 0;
	
	this.scrollLeft = function(){
		if (this.right > this.left){
			if (this.right < (0 - smallPanelWidth - ((8 - this.panelNumber) * this.width))){
				this.right += (8 * this.width);
				this.left += (8 * this.width);
			}else if (this.right < (0 - ((8 - this.panelNumber) * this.width))){
				//get(this.id).style.border = '0';
			}
			this.right -= this.scrollRate;
			get(this.id).style.right = this.right + 'px';
			setTimeout(this.familyName + '[' + this.arrayIndex + '].scrollLeft()', this.scrollSpeed);
		}else{
			isScrolling = false;
		}
	}
	
	this.scrollRight = function(){
		if (this.right < this.left){
			if (this.right > (smallPanelWidth + (this.panelNumber - 1) * this.width)){
				this.right -= (8 * this.width);
				this.left -= (8 * this.width);
			}else if (this.right > ((this.panelNumber - 1) * this.width)){
				get(this.id).style.border = '0';
			}
			this.right += this.scrollRate;
			get(this.id).style.right = this.right + 'px';
			setTimeout(this.familyName + '[' + this.arrayIndex + '].scrollRight()', this.scrollSpeed);
		}else{
			get(this.id).style.borderRight = this.borderStyle;
			isScrolling = false;
		}
	}
}