var bigfeatureDelay = 12; // seconds to wait between features
var bigfeatureFade = 0.5; // duration of fade in seconds
var timersize = 50; // size of timer bar (width in pixels)
var xmlurl = 'slideshow2/data/data.xml'; // location of XML file
var forceUpdate = 5; // force a fresh update of the XML file after this number of minutes

var bigfeatureMsec = bigfeatureDelay * 1000;
var bigfeaturePlay = false;
var sections = new Array(); // will contain all the sections (i.e. big features)
var currentSection = 0; // array position of the current section

// --------  Invoke XML data read request and call bigfeatureInit() initialisation function  -------------
var querystring = new Date().getTime();
querystring = Math.floor(querystring/(1000*60*forceUpdate)); // a unique value every 'forceUpdate' minutes
request = makeHttpObject();
request.open('GET', xmlurl + '?' + querystring, true);
request.onreadystatechange = bigfeatureInit;
request.send(null);

function bigfeatureInit() {
	if (request.readyState == 4 && (request.status == 200 || request.status == 304)) {
		// --------  Read the XML data  -------------
		xml = request.responseXML.documentElement;
		
		s = xml.getElementsByTagName('section');
		for (i=0; i<s.length; i++) {
			tab = image = link = title = photoBy = content = '';
			if (s[i].getElementsByTagName('tab')[0].firstChild) tab = s[i].getElementsByTagName('tab')[0].firstChild.nodeValue;
			if (s[i].getElementsByTagName('image')[0].firstChild) image = s[i].getElementsByTagName('image')[0].firstChild.nodeValue;
			if (s[i].getElementsByTagName('link')[0].firstChild) link = s[i].getElementsByTagName('link')[0].firstChild.nodeValue;
			if (s[i].getElementsByTagName('title')[0].firstChild) title = s[i].getElementsByTagName('title')[0].firstChild.nodeValue;
			if (s[i].getElementsByTagName('photoBy')[0].firstChild) photoBy = s[i].getElementsByTagName('photoBy')[0].firstChild.nodeValue;
			if (s[i].getElementsByTagName('content')[0].firstChild) content = s[i].getElementsByTagName('content')[0].firstChild.nodeValue;
			sections[sections.length] = new Section(tab, image, link, title, photoBy, content);
		}
		
		// --------  Draw screen user interface elements  -------------
		bigfeatureTabs = document.createElement('DIV');
		bigfeatureTabs.id = 'bigfeatureTabs';
		bigfeatureTabsP = document.createElement('P');
		lastTabTitle = '';
		for (i=0; i<sections.length; i++) {
			if (lastTabTitle != sections[i].tab) { // add a tab (if one with the same title doesn't previously exist)
				tab = document.createElement('A');
				tab.href = 'javascript: stop(); currentSection=' + i + '; bigfeatureDisplay(sections[currentSection]);';
				tab.onclick = function() {
					eval(this.href); // Using onclick event instead of href attribute to call JavaScript code (this avoids flickering problems in Firefox)
					return false;
				}
				tab.title = sections[i].tab;
				tab.appendChild(document.createTextNode(sections[i].tab));
				bigfeatureTabsP.appendChild(tab);
				bigfeatureTabsP.appendChild(document.createTextNode(' ')); // add a space after each link
				lastTabTitle = sections[i].tab;
			}
		}
		
		// Add previous button
		bigfeaturePrevious = document.createElement('IMG');
		bigfeaturePrevious.id = 'bigfeaturePrevious';
		bigfeaturePrevious.src = 'slideshow2/buttons/bigfeature-previous.png';
		bigfeaturePrevious.title = 'Previous';
		bigfeaturePrevious.alt = 'Previous';
		bigfeaturePrevious.onclick = function() {
			stop();
			bigfeatureDisplay(previousSection());
		};
		bigfeatureTabsP.appendChild(bigfeaturePrevious);
		
		// Add Play/pause controller button
		bigfeatureController = document.createElement('IMG');
		bigfeatureController.id = 'bigfeatureController';
		bigfeatureController.src = 'slideshow2/buttons/bigfeature-play.png';
		bigfeatureTabsP.appendChild(bigfeatureController);
		
		// Add next button
		bigfeatureNext = document.createElement('IMG');
		bigfeatureNext.id = 'bigfeatureNext';
		bigfeatureNext.src = 'slideshow2/buttons/bigfeature-next.png';
		bigfeatureNext.title = 'Next';
		bigfeatureNext.alt = 'Next';
		bigfeatureNext.onclick = function() {
			stop();
			bigfeatureDisplay(nextSection());
		};
		bigfeatureTabsP.appendChild(bigfeatureNext);
		
		// Add timer bar    /* */
		bigfeatureTimerImg = document.createElement('IMG');
		bigfeatureTimerImg.id = 'bigfeatureTimerImg';
		bigfeatureTimerImg.src = 'slideshow2/buttons/bigfeature-timer.png';
		bigfeatureTimerImg.width = '1';
		bigfeatureTimerImg.height = '10';
		bigfeatureTimerDiv = document.createElement('DIV');
		bigfeatureTimerDiv.id = 'bigfeatureTimer';
		bigfeatureTimerDiv.appendChild(bigfeatureTimerImg);
		bigfeatureTabsP.appendChild(bigfeatureTimerDiv);
		
		bigfeatureTabs.appendChild(bigfeatureTabsP);
		//	document.getElementById('bigfeatureSections').parentNode.insertBefore(bigfeatureTabs, document.getElementById('bigfeatureSections'));
		document.getElementById('bigfeatureSections').parentNode.appendChild(bigfeatureTabs);

		// --------  initialise HTML DIV content for first slideshow item (currentSection = 0)  -----------
		bigfeatureDisplay(sections[currentSection]);
		
		// -------- start slideshow animation ---------
		startSlideshow();
	}
}

function startSlideshow() {
	bigfeatureTimer();
	start();
	preloadNextImage();
}

function stop () {
	bigfeaturePlay = false;
	bigfeatureController.src = 'slideshow2/buttons/bigfeature-play.png';
	bigfeatureController.title = 'Play';
	bigfeatureController.alt = 'Play';
	bigfeatureController.onclick = start;
}

function start () {
	bigfeaturePlay = true;
	bigfeatureController.src = 'slideshow2/buttons/bigfeature-pause.png';
	bigfeatureController.title = 'Pause';
	bigfeatureController.alt = 'Pause';
	bigfeatureController.onclick = stop;
}

//  --------------------  the animating function  ------------------
function bigfeatureTimer () {
	if (bigfeaturePlay == true) {
		bigfeatureMsec -= bigfeatureDelay*1000/timersize;
		document.getElementById('bigfeatureTimerImg').width = timersize-Math.floor(timersize*(bigfeatureMsec/1000)/bigfeatureDelay);   //
		document.getElementById('bigfeatureTimerImg').height = 10;  //
		if (bigfeatureMsec <= 10+(bigfeatureDelay*1000/timersize)) {
			changeOpac(0, 'bigfeatureSections'); // set opacity to zero just before moving on to the next section (this avoids flickering problems in Firefox)
		}
		if (bigfeatureMsec <= 0) {
			bigfeatureMsec = bigfeatureDelay * 1000;
			bigfeatureDisplay(nextSection());
		}
	}
	setTimeout('bigfeatureTimer()', bigfeatureDelay*1000/timersize);
}

// Return the next section (or loop back to the first one if the end is reached)
function nextSection () {
	currentSection++;
	if (currentSection == sections.length) currentSection = 0;
	return sections[currentSection];
}

// Return the next section (or loop back to the first one if the end is reached)
function previousSection () {
	currentSection--;
	if (currentSection < 0) currentSection = sections.length-1;
	return sections[currentSection];
}

// Preload the feature image due to appear next
function preloadNextImage () {
	next = currentSection+1;
	if (next == sections.length) next = 0;
	preload = new Image();
	preload.src = sections[next].image;
}

function bigfeatureDisplay (s) {
	changeOpac(0, 'bigfeatureSections');
	// Replace image
	img = document.getElementById('bigfeatureImage').getElementsByTagName('img');
	for (i=0; i<img.length; i++) {
		img[i].src = 'slideshow2/buttons/bigfeature-timer.png';
		img[i].src = s.image;
		img[i].alt = s.title;
		img[i].title = s.title + ': ' + s.content;
	}
	// Replace links
	a = document.getElementById('bigfeatureSections').getElementsByTagName('a');
	for (i=0; i<a.length; i++) {
		a[i].href = s.link;
	}
	// Replace title
	// *-* h = document.getElementById('bigfeatureContent').getElementsByTagName('h3')[0].getElementsByTagName('a')[0];
	h = document.getElementById('bigfeatureContent').getElementsByTagName('a')[0];
	while (h.hasChildNodes()) {
		h.removeChild(h.lastChild);
	}
	h.appendChild(document.createTextNode(s.title));
	// Remove existing content inside bigfeatureText
	t = document.getElementById('bigfeatureText');
	while (t.hasChildNodes()) {
		t.removeChild(t.lastChild);
	}

	// *-* p = document.createElement('P');
	p = document.createElement('DIV');
	p.appendChild(document.createTextNode(s.content) );
	p.appendChild(document.createElement('P'));
	p.appendChild(document.createTextNode(s.photoBy) );
	t.appendChild(p);
	highlightTab(s.tab);
	preloadNextImage();
	opacity('bigfeatureSections', 0, 100, bigfeatureFade*1000);
}

function highlightTab (theTitle) {
	a = bigfeatureTabsP.getElementsByTagName('A');
	for (i=0; i<a.length; i++) {
		if (a[i].title == theTitle) a[i].className = 'active';
		else a[i].className = '';
	}
}

function Section (tab, image, link, title, photoBy, content) {
	this.tab = tab;
	this.image = image;
	this.link = link;
	this.title = title;
	this.photoBy = photoBy;
	this.content = content;
}

// Create an XMLHttpRequest object (or the ActiveX equivalent for IE)
function makeHttpObject() {
	var xmlHttpObj;
	// branch for Activex version (Microsoft IE)
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				xmlHttpObj = false;
			}
		}
	@else
		xmlHttpObj = false;
	@end @*/
	// branch for native XMLHttpRequest object (Mozilla & Safari)
	if (!xmlHttpObj && typeof XMLHttpRequest != 'undefined') {
		try {
			xmlHttpObj = new XMLHttpRequest();
		} catch (e) {
			xmlHttpObj = false;
		}
	}
	return xmlHttpObj;
}

// ***** OPACITY FUNCTIONS *****

// Fade from one opacity setting to another
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}