/*
-- Horizontal Scroll --

Compatability:
	IE 6.0, 7.0
	FF 2.0
*/

//Global reference to an instance of the 'horizontalScroll' object used for callbacks.
var scroll_me = null;

//Constructor function.
function horizontalScroll(id, announcements) {
	this.scroll_div = document.getElementById(id);
	while (this.scroll_div.hasChildNodes()) {		//Removes all child nodes from scroll.
		this.scroll_div.removeChild(this.scroll_div.childNodes[0]);
	}
	this.announcements = announcements;		//Contains announcements array
	this.desc_color = "cyan";
	this.scroll_div.style.overflow = "hidden";			
	this.scroll_timer = null;
	this.scroll_speed = 20;
	this.minor_spacing = 100;
	this.major_spacing = 400;
	this.aPageSrc = "http://www.peacehavenchurch.org.uk/announcements";		//Announcements page
	this.header_img = new Image(52, 34);	//Use dimensions to define placeholder for image in event it has not loaded in time.
	this.header_img.src = "http://www.peacehavenchurch.org.uk/misc/graphics/scroll/angel.gif";	
	this.active = [];	//Displayed announcements by index.
	this.load = loadPage;	//Loads new page while maintaining the state of the scroll.
	this.action = changeAction;		//Appends the scroll state query to the action of a form.

	//Mouseover pause scroll.
	this.scroll_div.onmouseover = function (e) {
		if (!e) var e = window.event;

		if (scroll_me) scroll_me.stop();

		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	};
	
	//Mouseout restart scroll.
	this.scroll_div.onmouseout = function (e) {
		if (!e) var e = window.event;
	
		if (scroll_me) scroll_me.start();

		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	};
	
	//Goto announcements page when scroll is clicked.
	this.scroll_div.onclick = function (e) {
		if (!e) var e = window.event;
		
		if (scroll_me) window.location = scroll_me.aPageSrc + formParaStr(scroll_me);
		
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	}; 
	
	//Initialise scroll to previous page state if known.
	if (window.location.href.indexOf("?") != -1) {
		var parameters = window.location.href.split("?", 2)[1].split("#")[0].split("&");
		for (var i = 0; i < parameters.length; i++) {
			var para = parameters[i].split("=");
			if (parameters[i].length > 4 && !isNaN(para[0]) && para[0] < announcements.length) {
				createElements(
					this, 
					para[1],
					para[0],
					true
				);
			}
		}
	}						                       
}

//Add start() to begin scrolling the announcements.
horizontalScroll.prototype.start = function () {
	scroll_me = this;
	if (this.announcements.length) {
		this.scroll_timer = setInterval(scrollLeft, this.scroll_speed);
	}
};

//Add stop() to halt scrolling the announcements.
horizontalScroll.prototype.stop = function () {
	if (this.scroll_timer) clearInterval(this.scroll_timer);	
};

//Main method for scrolling announcements. 
var announcement_index = 0;
var scroll_spans = null;
var scroll_imgs = null;
var desc_fade_timer = null;
var desc_fade_obj = null;
function scrollLeft() {
	if (!scroll_spans || scroll_spans.length == 0 || 
		parseFloat(scroll_spans[scroll_spans.length - 1].style.left) <=
		scroll_me.scroll_div.offsetWidth - 
		scroll_spans[scroll_spans.length - 1].offsetWidth - 
			((scroll_spans && announcement_index == 0) ? 
				scroll_me.major_spacing : 
				scroll_me.minor_spacing)
	   ) 
	{	
		createElements(
			scroll_me,
			scroll_me.scroll_div.offsetWidth, 
			announcement_index,
			false
		);
	}												
	for (var i = 0; i < scroll_spans.length; i++) {
		scroll_spans[i].style.left = parseFloat(scroll_spans[i].style.left) - 1 + "px";
		scroll_imgs[i].style.left = parseFloat(scroll_imgs[i].style.left) - 1 + "px";
	}
	if (parseFloat(scroll_spans[0].style.left) <= -scroll_spans[0].offsetWidth) {
		scroll_me.scroll_div.removeChild(scroll_spans[0]);
		scroll_me.scroll_div.removeChild(scroll_imgs[0]);
		scroll_me.active.shift();						 
	}
}
 
//Create scroll elements.
function createElements(obj, span_left, index, init) {
	announcement_index = index;	

	//Header images.
	var new_img = obj.scroll_div.appendChild(
		document.createElement("img")
	);
	new_img.width = obj.header_img.width;
	new_img.height = obj.header_img.height;
	new_img.src = obj.header_img.src;
	new_img.setAttribute("alt", "");
	new_img.style.position = "absolute";
	new_img.style.padding = "0px";	
	new_img.style.top = (obj.scroll_div.offsetHeight - 
		new_img.offsetHeight) / 2 + "px";
	new_img.style.left = parseInt(span_left) + 
		((init) ? -(new_img.offsetWidth + 5) : 0) + "px";
	
	//Announcements.					
	var new_span = document.createElement("span");
	new_span.appendChild(document.createTextNode(
		obj.announcements[announcement_index][1]
	));
	obj.scroll_div.appendChild(new_span);
	obj.active.push(announcement_index);
	new_span.style.position = "absolute";
	new_span.style.whiteSpace = "nowrap";
	new_span.style.top = (obj.scroll_div.offsetHeight - 
		new_span.offsetHeight ) / 2 + "px";
	new_span.style.left = parseInt(span_left) + 
		((!init) ? new_img.offsetWidth + 5 : 0) + "px";
		
	//Associated description.
	addDesc(new_span, index);		
		
	(announcement_index >= obj.announcements.length - 1) ?
		announcement_index = 0 :
		announcement_index++;
		
	//Update images and announcements lists.
	scroll_spans = obj.scroll_div.getElementsByTagName("span");
	scroll_imgs = obj.scroll_div.getElementsByTagName("img");
}

//Display floating description for each announcement on scroll.
function addDesc(obj, index) {	
	var desc = null;
	var desc_index = index; 
	obj.onmousemove = function (e) {
		if (!e) var e = window.event;
			
		if (!desc) {
			if (desc_fade_timer) clearInterval(desc_fade_timer);   //Required to fix quirky behaviour
		  	desc = document.createElement("div");
			desc.appendChild(document.createTextNode(
				removeTags(unescape(announcements[desc_index][2])))
			);
			desc.style.textAlign = "left";
			obj.style.cursor = "default";
			desc.appendChild(document.createElement("br"));
			var click_div = document.createElement("div");
			click_div.appendChild(
				document.createTextNode("<Click to see all announcements>")
			);
			click_div.style.fontStyle = "italic";
			click_div.style.textAlign = "center";
			click_div.style.marginTop = "10px";
			desc.appendChild(click_div);
			obj.style.cursor = "pointer";
			desc.style.display = "none";	
			desc.style.position = "absolute";
			desc.style.left = "0px";
			desc.style.top = "0px";
			desc.style.width = "300px";
			desc.style.padding = "0.2em";			
			desc.style.borderWidth = "1px";
			desc.style.borderStyle = "dashed";
			desc.style.borderColor = "gray";
			desc.style.textAlign = "justify";
			desc.style.backgroundColor = scroll_me.desc_color;
			desc.style.opacity = 0;
			desc.style.filter = "Alpha(opacity=0)";				
			if (desc.style.opacity || desc.style.filter) {   
				desc_fade_obj = desc;
				desc_fade_timer = setInterval(desc_fade, 50);
			}
			document.body.appendChild(desc); 
		} else {
			desc.style.display = "block";
			var mouse_x = getMousePos(e)[0];
			desc.style.left = (mouse_x < document.body.clientWidth / 2) ? 
				mouse_x + 5 + "px": 
				mouse_x - desc.offsetWidth - 5 + "px";
			desc.style.top = getMousePos(e)[1] - desc.offsetHeight - 5 + "px";
		}	
		obj.onmouseout = function (e) {
			if (!e) var e = window.event;
				
		  	if (desc) document.body.removeChild(desc);
			desc = null;
				
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();	
		};
				
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();				
	};
	//end
		
	//Click announcement to goto specific description on announcement page.
	obj.onclick = function (e) {
		if (!e) var e = window.event;

		window.location = scroll_me.aPageSrc + "?" + formParaStr(scroll_me) + "#" + desc_index;
				
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();		  	
	};
	//end
}

//Fade description boxes.
var desc_fade_value = 0;
function desc_fade() {
	if (desc_fade_value > 70) {
		clearInterval(desc_fade_timer);
		desc_fade_value = 0;
	} else {
		desc_fade_obj.style.opacity = desc_fade_value / 100;
		desc_fade_obj.style.filter = "Alpha(opacity=" + desc_fade_value +")";
		desc_fade_value = desc_fade_value + 5;
	}	
}

//Scroll persistance across pages.
function loadPage(url) {
	this.stop();
	window.location.href = url + (url.indexOf("?") != -1 ? "&" : "?") + formParaStr(this);
}

//Forms the parameter string to append to the url
function formParaStr(obj) {
	var para = "";
	for (var i = 0; i < obj.active.length; i++) {
		para += obj.active[i] + "=" + 
			scroll_spans[i].style.left + 
			( (i < obj.active.length - 1) ? 
				"&" : 
				"" );
	}
	return para;
}

//
function changeAction(obj) {
	this.stop();
	var url = "http://www.peacehavenchurch.org.uk/photo_gallery/photo/index.php";
	obj.setAttribute('action', url + (url.indexOf("?") != -1 ? "&" : "?") + formParaStr(this));
}