// for holding a particular region's routes
	var regionListTop = new Array();
	var indexRegionTop = 0;
	var regionListMid = new Array();
	var indexRegionMid = 0;
	var regionListBottom = new Array();
	var indexRegionBottom = 0;
	
	// keep track of most images from the xml so we can preload them on document.ready()
	var preloadImages = new Array();
	var preloadImagesIndex = 0;
	
	// for keeping track of what's on the screen
	var currDisplayedRegion;
	var currDisplayedRoute;
	
	var defaultImage = "/images/mdot/default_heritagemap_281578_7.jpg ";
	var xmlFile = "/documents/mdot/heritageRoutes_281577_7.xml";
	var regionMapImage = "/images/mdot/hertiageRoutesMapMI_282187_7.png";
	var bywaysLogo = "/images/mdot/AmericasByways_centered_original_299703_7.png";
	var pdfLogo = "/images/PDF.gif";
	
	var currSlideImageTotalCount;
	var currSlideImageCount;
	
	var showExists = false;
	
	var isIE = false;	// for display the routeDisplayWrap properly
	
$(document).ready(function() {
//ugly browser detect for ie styling
	if ($.browser.msie) {
		isIE = true;
		$("#cssToUse").html("<link rel='stylesheet' type='text/css' href='/documents/mdot/ie_heritageroutes_287234_7.css'/>");
	} 
	/*
	// console.log() for debugging, if browser doesn't offer one make a fake object & method
	if(typeof console === "undefined") {
		console = { 
			log: function() { },
			time: function() { },
			timeEnd: function() { }
		};
	}
	*/
	
	//console.time('test');
	window.$pageElem = {
	
		// store refs to elements we reference more than once
		regionDisplay : $('#regionDisplay'),
		routeListWrap : $('#routeList-Wrap'),
		routeList : $('#routeList'),
		routeDisplayWrap : $('#routeDisplay-Wrap'),
		routeDisplay : $('#routeDisplay'),
		routeLinks : $('#routeLinks'),
		fullRegionViewTop : $('#fullRegionViewTop'),
		fullRegionViewMid : $('#fullRegionViewMid'),
		fullRegionViewBottom : $('#fullRegionViewBottom'),
		backButton : $('#back'),
		miTop : $('#miTop'),
		miMid : $('#miMid'),
		miBottom : $('#miBottom'),
		mapWrap : $('#map-wrap'),
		mainView : $('#mainView'),
		routeSlideshow : $('#routeSlideshow'),
		cssToUse : $("#cssToUse"),
		prevSlide : $("#prevSlide"),
		nextSlide : $("#nextSlide"),
		slideCounter : $("#slideCounter"),
		slideshow : $("#slider"),
		slideshowImages : $("#slideshowImages")
	}
	
	
	
    //hide no-js msg
	$("#nojs").css('display','none');
	$("#container").css('display','block');
	
	$.ajax({
        type: "GET",
		url: xmlFile,
		dataType: ($.browser.msie) ? "text" : "xml",
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert('Error: ' + textStatus + ", " + errorThrown);
		},
		success: function (data) {
						  var xml;
						  if (typeof data === 'string') {
							xml = new ActiveXObject("Microsoft.XMLDOM");
							xml.async = false;
							xml.loadXML(data);
						  } else {
							xml = data;
						  }
			$(xml).find('route').each(function(i){
				setRouteInfo($(this));
			});
			
		preloadImages[preloadImagesIndex] = $pageElem.fullRegionViewTop.attr('src');
		preloadImagesIndex++;
		preloadImages[preloadImagesIndex] = $pageElem.fullRegionViewMid.attr('src');
		preloadImagesIndex++;
		preloadImages[preloadImagesIndex] = $pageElem.fullRegionViewBottom.attr('src');
		preloadImagesIndex++;
		preloadImages[preloadImagesIndex] = defaultImage;
		preloadImagesIndex++;
		preloadImages[preloadImagesIndex] = regionMapImage;
		preloadImagesIndex++;
	
		preload();	// since we've now found all images that will be used.
	
		// if a route was passed to the page, use it
		var urlRoute = $.query.get('route');
			if (urlRoute) {
				displayRouteFromURL(urlRoute);
			}
		}
	});
			
	$pageElem.miTop.bind('click', function(){
		addRegionClickHandler($(this), regionListTop, 'Upper Peninsula');
		return false;
	});
	$pageElem.miMid.bind('click', function(){
		addRegionClickHandler($(this), regionListMid, 'Northern Region');
		return false;
	});
	$pageElem.miBottom.bind('click', function(){
		addRegionClickHandler($(this), regionListBottom, 'Southern Region');
		return false;
	});
	$pageElem.backButton.bind('click', function(){
		showMainView();
		currDisplayedRegion = "";
		currDisplayedRoute = "";
		return false;
	});
	
	// for region animation/fade-in
	$('#container .fullRegionView').css('opacity', '0.1');
	
	// event handlers for full region view image map clicks
	$('#TopRegion > .imRegion').bind('click', function(){
		var myRouteIndex = getRouteIndex($(this).attr('title'), regionListTop);
			if (myRouteIndex === -1) { 
				alert('the name could not be found in XML or URL string.\nCheck the title attribute in HTML for match');
				return;
			}
		displayRouteInfo(regionListTop, myRouteIndex);
		return false;
	});
	$('#MidRegion > .imRegion').bind('click', function(){
		var myRouteIndex = getRouteIndex($(this).attr('title'), regionListMid);
			if (myRouteIndex === -1) { 
				alert('the name could not be found in XML or URL string.\nCheck the title attribute in HTML for match');
				return;
			}
		displayRouteInfo(regionListMid, myRouteIndex);
		return false;
	});
	$('#BottomRegion > .imRegion').bind('click', function(){
		var myRouteIndex = getRouteIndex($(this).attr('title'), regionListBottom);
			if (myRouteIndex === -1) { 
				alert('the name could not be found in XML or URL string.\nCheck the title attribute in HTML for match');
				return;
			}
		displayRouteInfo(regionListBottom, myRouteIndex);
		return false;
	});
	
	
	//console.timeEnd('test');
});


function addRegionClickHandler(region, list, title) {
	var currRegion = $(region).attr('id');
		if(currDisplayedRegion === currRegion) { return; }  // don't bother if the region is already displayed
		currDisplayedRegion = currRegion;
		listTitle= title;
		$pageElem.regionDisplay.fadeOut('fast', function(){
			//see ie6 note below in showMainView()
			$pageElem.mapWrap.empty();
		});
		$pageElem.mainView.fadeOut('fast', function(){
			showFullRegion(currRegion,list);
		});
}

function createRoute(name, subheading, desc, length, category, image, slideshow, links, designations) {
	var newRoute = {
		'name' : name,
		'subheading' : subheading,
		'desc' : desc,
		'length': length,
		'category' : category,
		'image' : image,
		'slideshow' : slideshow,
		'links' : links,
		'designations' : designations
	}
	return newRoute;
}

function createLink(name, href, target) {

	var newLink = {
		'name' : name,
		'href' : href,
		'target' : target
	}
	return newLink;
}

function displayRouteFromURL(route) {
	var routeIndex;
	var routeLoc;
	
	//search each region array for route
	routeIndex = getRouteIndex(route, regionListTop);
	if (routeIndex !== -1) { 
		routeLoc = regionListTop;
		$pageElem.miTop.click();	// call click action to display region since we found the correct one.
	}
	else {
		routeIndex = getRouteIndex(route, regionListMid);
		if (routeIndex !== -1) { 
			routeLoc = regionListMid;
			$pageElem.miMid.click();
		}
		else {
			routeIndex = getRouteIndex(route, regionListBottom);
			if (routeIndex !== -1) {
				routeLoc = regionListBottom;
				$pageElem.miBottom.click();
			}
			//should have it if it exists by now
			else { 
				alert('The name from the URL string could not be found.');
				return;
			}
		}
	}
	displayRouteInfo(routeLoc, routeIndex);
}

function displayRouteInfo(routeArray, routeIndex)	{
	if (currDisplayedRoute === routeArray[routeIndex].name) { return;}	// don't bother if the route is already displayed
	
	currDisplayedRoute = routeArray[routeIndex].name;
	$pageElem.routeDisplay.hide();
	if (isIE) {
		$pageElem.routeDisplayWrap.css('display', 'inline-block');	//this sets the hasLayout property of IE to true for correct display of content.
	}
	else {
		$pageElem.routeDisplayWrap.show();
	}
	$pageElem.routeDisplay.fadeOut('medium', function(){
	
		$("#routeImage").attr("src",routeArray[routeIndex].image).attr("title", routeArray[routeIndex].name);
		$("#routeImage").attr("src",routeArray[routeIndex].image).attr("alt", routeArray[routeIndex].name);
		var extendedRouteName = routeArray[routeIndex].name;
		if (extendedRouteName.indexOf("BR") !== -1) {
			extendedRouteName = extendedRouteName.replace("BR", "Business Route");
		}
		$("#routeName").html(extendedRouteName);
		$("#routeSubHeading").html(routeArray[routeIndex].subheading);
		if (routeArray[routeIndex].length !== "") {
			$("#lengthLabel").show();
			$("#routeLength").show();
			$("#routeLength").html(routeArray[routeIndex].length);
		} else {
			$("#lengthLabel").hide();
			$("#routeLength").hide();
		}
		$("#routeType").html(routeArray[routeIndex].category);
		$("#routeDesc").html(routeArray[routeIndex].desc);
		
		//DESIGNATIONS
		var designations = routeArray[routeIndex].designations;
		if (designations.length > 0) {
			$("#routeDesignationsTitle").show();
			$("#routeDesignations").show();
			$("#routeDesignationsLogo").show();
			
			for (var i = 0; i < designations.length; i++) {
				$("#routeDesignations")
					.html(designations[i]);
				$("<br/>").appendTo("#routeDesignations");
			}
				$("#routeDesignationsLogo")
					.html("<a target='_blank' href='http://www.byways.org/explore/states/MI/'>"+
								"<img src='"+bywaysLogo+"' alt='americas byways' style='border: 0px; margin-right: 10px; float: right;' />"+
							"</a>");
		}
		else {
			$("#routeDesignationsTitle").hide();
			$("#routeDesignations").hide();
			$("#routeDesignationsLogo").hide();
		}
		
		//LINKS
		var links = routeArray[routeIndex].links;
		if (links.length === 0) { 
			$("#routeLinksTitle").hide();
		}
		else {
			$("#routeLinksTitle").show();
		}
		$("#routeLinks").empty();
		
		for (var i = 0; i < links.length; i++) {
		
			var isPDF = false;
			
			if (links[i].href.indexOf('.pdf') !== -1) { 
				isPDF = true;
			}
			 $("<a></a>")
				.attr("href", links[i].href)
					.attr("target", '_'+links[i].target)
						.html(links[i].name)
							.appendTo("#routeLinks");
			if (isPDF) { 
				$('<img>')
					.attr('src', pdfLogo)
						.css('float', 'none')
							.appendTo('#routeLinks'); 
			}
			$('<br>').appendTo('#routeLinks'); 
		}
		
		if (routeArray[routeIndex].slideshow.length > 0) {
			$pageElem.prevSlide.hide();
			$pageElem.nextSlide.show();
			$pageElem.slideCounter.show();
			$pageElem.slideCounter.css('display','inline');
			$pageElem.slideshow.show();
			
			populateSlideshow(routeArray, routeIndex);
			if (!showExists) {
				$pageElem.slideshow.easySlider({
									nextId: "nextSlide",
									prevId: "prevSlide"
								});	// init the slideshow
				showExists = true;
			}
			else{
				$pageElem.slideshow.easySlider({
									reset: true,
									nextId: "nextSlide",
									prevId: "prevSlide"
								});	// init the slideshow
			}
		}
		else {
			$pageElem.prevSlide.hide();
			$pageElem.nextSlide.hide();
			$pageElem.slideCounter.hide();
			$pageElem.slideshow.hide();
		}
		$pageElem.routeDisplay.fadeIn('slow'); 
	});
}

function getRouteDesignations(route) {
	
	var designations = new Array();
	
	route.contents("designations").contents("designation").each(function() {
		designations.push($(this).text());
	});
	return designations;
}

function getRouteLinks(route) {
	
	var linkArray = new Array();
	
	route.contents("links").contents("link").each(function(index) {
		var linkName = $(this).children("name").text();
		var linkHref = $(this).children("href").text();
		
		if ($(this).children('target').text() !== null) {
			var linkTarget = $(this).children("target").text();
		}
		else {
			var linkTarget = "blank";
		}
		var link = createLink(linkName, linkHref, linkTarget);
		linkArray[index] = link;
	});
	return linkArray;
}

function getRouteIndex(name, selectedRegion)	{
	var foundIndex = '';
	
	for (var i = 0; i < selectedRegion.length; i++)	{
		if (selectedRegion[i].name === name)	{
			foundIndex = i;
			break;
		}
		else{
			//didn't find it in this index
		}
	}
	if (foundIndex === '') {  
		return -1;
	}
	else {
		return foundIndex;
	}
}

function getSlideshowImages(xmlRef) {
	var slideshowImages = new Array();	
	var ssIndex = 0;
	var isFirstImage = true;	// only add the first image of the slideshow to preload array
	
	$(xmlRef).find("slideshow").each(function(){
		var slideshow = {
			'image': $(this).find('image').text(),
			'title': $(this).find('title').text()
		}
		slideshowImages[ssIndex] = slideshow;	
		ssIndex++;
		if (isFirstImage) {
			preloadImages[preloadImagesIndex] = $(this).find('image').text();	
			preloadImagesIndex++;
			isFirstImage = false;
		}
		else {
		}
	});
	return slideshowImages;
}

function populateSlideshow(routeArray, routeIndex) {
	$pageElem.slideshowImages.empty();	//start out fresh
	var numImages = routeArray[routeIndex].slideshow.length;
	currSlideTotalImageCount = numImages;
	currSlideImageCount = 1;
	for (var currImage = 0; currImage < numImages; currImage++) {
		$('<li><img></li>')
			.find('img')
				.attr('src', routeArray[routeIndex].slideshow[currImage].image)
					.attr('alt', routeArray[routeIndex].slideshow[currImage].title)
						.end()
						.appendTo('#slideshowImages');
	}
	$pageElem.prevSlide.fadeOut();	//at beginning of show, so hide prev btn
	$pageElem.slideCounter.html('1 / ' + currSlideTotalImageCount);
}

function preload() {
	var loadCount = 0;
	var percentComplete;
	for(var i = 0; i<preloadImages.length; i++) {
		jQuery("<img>").load(function(){
			loadCount++
			percentComplete = Math.round(((loadCount / preloadImages.length)*100));
			$("#loadingPercent").html(percentComplete + ' %');
			if (loadCount === preloadImages.length) {
				$("#loading").hide();
			}
		}).attr("src", preloadImages[i]);
	}
}

function setRouteInfo(xmlRef) {
	var currLoc = $(xmlRef).children("location").text();
	if ( currLoc !== 'top' && currLoc !== 'middle' && currLoc !== 'bottom' ) {
		alert('incorrect location specified in xml or url');
		return;
	}
	
	var routeName = $(xmlRef).children("name").text();
	var routeSubHeading = $(xmlRef).children("subheading").text();
	var routeDesc = $(xmlRef).children("description").text();
	var routeLength = $(xmlRef).children("length").text();
	var routeCategory = $(xmlRef).children("category").text();
	var routeLinks = getRouteLinks($(xmlRef));	//an array
	var routeSlideshow = getSlideshowImages($(xmlRef));	//an array
	var routeDesignations = getRouteDesignations($(xmlRef));
	
		// static displayed image
	if($.trim($(xmlRef).children('image').text()) !== '') {	
		var routeImage = ($(xmlRef).children("image").text());	
		preloadImages[preloadImagesIndex] = routeImage;
		preloadImagesIndex++;
	} 
	else {
		var routeImage = defaultImage;
	}
	var newRoute = createRoute(routeName, routeSubHeading, routeDesc, routeLength, routeCategory, routeImage, routeSlideshow, routeLinks, routeDesignations);
	
	var currLoc = $(xmlRef).children("location").text();
	if (currLoc === "top") {
		regionListTop[indexRegionTop] = newRoute;
		indexRegionTop++;
	}
	else if (currLoc === "middle") {
		regionListMid[indexRegionMid] = newRoute;
		indexRegionMid++;
	}
	else if (currLoc === "bottom") {
		regionListBottom[indexRegionBottom] = newRoute;
		indexRegionBottom++;
	}
	
}

function showFullRegion(region, list) {
	if (region === 'miTop') {
		currDisplayedRegion = $pageElem.fullRegionViewTop;
	}
	else if (region === 'miMid') {
		currDisplayedRegion = $pageElem.fullRegionViewMid;
	}
	else if (region === 'miBottom') {
		currDisplayedRegion = $pageElem.fullRegionViewBottom;
	}
	
	currDisplayedRegion.fadeIn('fast', function(){
		$(this).animate({
			opacity: 1.0
		}, 300, 'swing', function(){
			showList(list);
			$pageElem.routeListWrap.slideDown('medium');
			$pageElem.backButton.fadeIn('fast');
		});
	});
}

function showList(routes)	{
	$pageElem.routeList.empty();
	var countLineElem = 0;
	for(var i = 0; i < routes.length; i++)	{
		$("<li></li>")
			.html("<a href='#' class='routeName'>"+ routes[i].name +"</a>")
				.appendTo($pageElem.routeList);
					
		// an ugly way of forcing the list to wrap after a set number of routes.
		countLineElem++;
		if (countLineElem === 6) {
			$("<br>").appendTo($pageElem.routeList);
			countLineElem = 0;
		}
	}
	$('#routeList .routeName').bind('click', function(){
		var routeIndex = getRouteIndex($(this).text(), routes);
			if (routeIndex === -1) { 
				alert('the name could not be found in XML or URL string.\nCheck the title attribute in HTML for match');
				return;
			}
		displayRouteInfo(routes, routeIndex);
		return false;
	});
	
	$pageElem.routeList.show();
}

function showMainView() {

	currDisplayedRegion.animate({
			opacity: 0
		}, 300, 'swing', function(){
			//this ugly bit is for ie6 - it can't seem to hide/show the region map so we'll just erase/rewrite it.
			$pageElem.mapWrap.html("<img src='" + regionMapImage + "' alt='michigan map' usemap='#imagemap' id='imagemap'>");
			$pageElem.regionDisplay.fadeIn('fast');
			$pageElem.mainView.fadeIn('fast');
			$(this).hide();
	});
		
	$pageElem.backButton.fadeOut('fast');
	$pageElem.routeDisplayWrap.fadeOut('fast');
	$pageElem.routeListWrap.fadeOut('fast');
	
	//reset for animation
	currDisplayedRegion.css('opacity', '0.1');

}

// the easyslider js calls this function from the prevSlide/nextSlide click events
function updateCounter(direction) {
	if (direction === "next") {
		if ((currSlideImageCount + 1) <= currSlideTotalImageCount) {
			currSlideImageCount++;
			$pageElem.prevSlide.show();
			if ((currSlideImageCount + 1) > currSlideTotalImageCount) { 
				$pageElem.nextSlide.hide();
			}
		} 
		$pageElem.slideCounter.html(currSlideImageCount + ' / ' + currSlideTotalImageCount);
	}
	else if (direction === "prev") {
		if ((currSlideImageCount - 1) >= 1) {
			currSlideImageCount--;
			$pageElem.nextSlide.show();
			if ((currSlideImageCount - 1) < 1) {
				$pageElem.prevSlide.hide();
				$pageElem.nextSlide.show();
			}
		}
		$pageElem.slideCounter.html(currSlideImageCount + ' / ' + currSlideTotalImageCount);
	}
}