var featureTimer;

var navItems = new Array();

var	navLinks = new Array();

var stopped = false;

// You can overwrite these in the document Head, too.



var fadeTime = 0.5; // fade time between features

var displayTime = 7500; // display time for each feature



// Define the IDs and Classes used in HTML and CSS

var wrapperID = 'featured-wrapper';

var wrapperHoverClass = 'featured-hover';

var containerID = 'featured-items';

var featureLinkID = 'featured-link';

var featureNavID = 'featured-nav';

var activeLinkClass = 'active';

var descriptionClass = 'featured-description';

/*function count_features() {

	makeRequest('/samplesite/includes/feature_images/feature_count.php');

}*/

// Define the URL that will do the work to render each feature

var ajaxURL = '/includes/features.php';

// Create the navigation to jump between features

function buildFeaturesNav() {	

	navList = document.createElement('ul');

	navList.setAttribute('id',featureNavID);

	$(wrapperID).appendChild(navList);



	for (i = 0; i < numberOfFeatures; i++) {

		pageNumber = i+1;

		navItems[i] = document.createElement('li');

		navLinks[i] = document.createElement('a');

		navLinks[i].innerHTML = pageNumber;

		navLinks[i].onclick = goToPage.bindAsEventListener(this,i,pageNumber); 

		navItems[i].appendChild(navLinks[i]);

		navList.appendChild(navItems[i]);

	}

	navItems[i] = document.createElement('li');

	navLinks[i] = document.createElement('a');

	navLinks[i].innerHTML = "<span id=\"stop_btn\"><img src=\"/images/stop.gif\" title=\"stop\" vspace=\"3\"></span>";

	navLinks[i].onclick = stopFader.bindAsEventListener(i); 

	navItems[i].appendChild(navLinks[i]);

	navList.appendChild(navItems[i]);

}

//toggle fader

function stopFader(i) {

	if(stopped) {

		stopped = false;

		startTimer();

		document.getElementById('stop_btn').innerHTML = "<img src=\"/images/stop.gif\" title=\"stop\" vspace=\"3\">";

	} else {

		stopped = true;

		clearTimeout(featureTimer);

		document.getElementById('stop_btn').innerHTML = "<img src=\"/images/play.gif\" title=\"play\" vspace=\"3\">";

	}

		

}





// Show which feature is currently active in the navigation

function showActiveLink(activeLink) {

	navLinks = $(featureNavID).select('a');

	for (i = 0; i < navLinks.length; i++) {

		navLinks[i].className = '';

	}

	navLinks[activeLink].className = activeLinkClass;

}



// Switch between features

function goToPage(e,activeLink,pageNumber) { 

	clearTimeout(featureTimer);

	showActiveLink(activeLink);

	f = pageNumber-1;

	featureFader();

	return false;

}



// Fade out effect

function featureFader() {

	new Effect.Fade(containerID,{duration:fadeTime,afterFinish:getFeature});

}



// Make the whole area clickable

function makeClickable() {

	$(containerID).onmouseover = function() {

		$(wrapperID).className = wrapperHoverClass;

		clearTimeout(featureTimer);

	};

	$(containerID).onmouseout = function() {

		$(wrapperID).className = '';

		if(!stopped) {

			startTimer();

		}

	};

	$(containerID).onclick = function() {

		featureLink = $(featureLinkID);

		featureLink = featureLink.getAttribute('href');

		window.location.href = featureLink;

	};	

}



// Make AJAX call to grab the next feature

function getFeature() {

	f++;

	if (f > numberOfFeatures) f = 1;

		/*new Ajax.Updater(containerID,ajaxURL+'?f='+f,{

		onComplete:function(){*/			

			$(containerID).innerHTML = "<div class=\"featured-item\" style=\"background-image:url('"+parent["img"+(f-1)].src+"');\">\r\n<div class=\"featured-description\"><h2>"+featureArray[f-1]["title"]+"</h2>\r\n<div class=\"description-bottom\"><img src=\"/images/arrow.gif\" vspace=\"5\" /><h3><a id=\"featured-link\" href=\""+featureArray[f-1]["link"]+"\">"+featureArray[f-1]["subtitle"]+"</a></h3>\r\n<p>"+featureArray[f-1]["description"]+"</p></div>\r\n</div></div>";

			new Effect.Appear(containerID,{duration:fadeTime});

			makeClickable();



		/*	}

		});	*/

	if (numberOfFeatures > 1) {

		activeLink = f-1;

		showActiveLink(activeLink);

		clearTimeout(featureTimer);

		if(!stopped) {

			startTimer();

		}

	}

}



// Set the timeout

function startTimer() {

	featureTimer = setTimeout(featureFader,displayTime);

}



// Call this function when your page loads

function initFeatures() {

	//f = Math.ceil(Math.random()*numberOfFeatures);

	f = 0;

	if (numberOfFeatures > 1) {

		buildFeaturesNav();

	}

	getFeature();

}



function makeRequest(url) {

	var http_request = false;



	if (window.XMLHttpRequest) { // Mozilla, Safari, ...

		http_request = new XMLHttpRequest();

		if (http_request.overrideMimeType) {

			//http_request.overrideMimeType('text/xml');

			// See note below about this line

		}

	} else if (window.ActiveXObject) { // IE

		try {

			http_request = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {

			try {

				http_request = new ActiveXObject("Microsoft.XMLHTTP");

			} catch (e) {}

		}

	}



	if (!http_request) {

		alert('Giving up :( Cannot create an XMLHTTP instance');

		return false;

	}

	http_request.onreadystatechange = function() { updateContents(http_request); };

	http_request.open('GET', url, true);

	http_request.send(null);



}



function updateContents(http_request) {

	

	if (http_request.readyState == 4) {

		if (http_request.status == 200) {

			eval(http_request.responseText);

		}

	}

}