// put all background images into this array
var backgroundImageArray = new Array('bg2.jpg','bg3.jpg');

// put all images for the home page into this array
var homeImageArray = new Array('artistRenderFeathered1.gif');

var currentHomeImage = 0;

$(document).ready(function(){
	
	startAtImage = 0;
	currentImage = "";
	totalImageCount = 0;
	
	$("#largeConstructionImage").hide();
	
	// randomly select the background image
	rotateBGImg();
	
	loadNews();
	
	loadConstructionImages();
	
	// if the user is on the home page, rotate the images
	if ($("#eventName").val() == "showHome"){
		
		// set the initial image on page load
		$("#homeImage").html("<img src='img/" + homeImageArray[currentHomeImage] + "' />");
		
		// make sure there is more than one home image before rotating
		if (homeImageArray.length > 1) {
		
			// load the next image after the specified number of seconds
			setInterval('rotateHomeImage()', 7000);
			
		}
		
	}
		
});

function rotateBGImg(){
	
	// get a random number between 0 and the length of the images array
	var randomImage = Math.floor(Math.random()*10)%backgroundImageArray.length
	
	// set the image url
	var backgroundImageUrl = 'img/' + backgroundImageArray[randomImage];
	
	// set the css properties
	$('body').css('background-image', 'url("' + backgroundImageUrl + '")');
	$('body').css('background-repeat', 'no-repeat');	
	
}

function rotateHomeImage(){
	
	// increment the image array element
	currentHomeImage++
	
	// if the current image is equal to the image arrays length, go back to the first image
	if (currentHomeImage == homeImageArray.length) currentHomeImage = 0;
	
	// fade out the existing image
	$("#homeImage").fadeOut("slow", function(){
		
		// set up the new image
		$("#homeImage").html("<img src='img/" + homeImageArray[currentHomeImage] + "' />");
		
		// fade in the new image
		$("#homeImage").fadeIn("slow");		
		
	});
	
}

function loadNews(){
	
	var newsEntryID = "";
	var newsSynopsis = "";
	var newsDate = "";
	var newsCount = 0;
	
	// clear the news
	$("#newsEntries").html("");
	
	// get the news from the xml doc
	$.ajax({
	    type: "GET",
		url: "xml/news.xml",
		dataType: "xml",
		success: function(xml) {
	 		
			$(xml).find('news').each(function(){
				
				$(xml).find('entry').each(function(){
					
					// stop after 3 news entries
					if ($(this).attr('id') > 3) return false;

			 		newsEntryID = $(this).attr('id');
					newsSynopsis = $(this).find('synopsis').text();
					newsDate = $(this).find('date').text();
					
					$("#newsEntries").append(
						"<p>" +
						"<span style='color:black;'>" + newsDate + ":</span>" + 
						"&nbsp;" +
						"<a class='smallWhiteLink' href='index.cfm?event=showNewsEntry&entryID=" + newsEntryID + "'>" +
						newsSynopsis +
						"</a>" +
						"</p>"
					);
					
					newsCount++;
					
				});
			 
			});
			
			// if no news entries
			if (!(newsCount)){
				
				$("#newsEntries").append("<p>No current news entries</p>");
				
			}
			
			$("#newsEntries").append(
				"<a href='index.cfm?event=showNews'>More News</a>" +
				"&nbsp;&nbsp;" +
				"<img src='img/arrowOrange.gif' class='imageLink' onclick=javascript:window.location.href='index.cfm?event=showNews' />"
			);
			
		}
	});
	
}

function loadConstructionImages(){
	
	var imageCount = 0;
	var imgDate = "";
	var imgMonth = "";
	var imgDay = "";
	var imgYear = "";
	var dateText = "";
	
	// get all the images in the thumbnail folder
	$.getJSON(
		'model/images/imageService.cfc',
		{
			returnformat: 'json',
			queryformat: 'column',
			method: 'getConstructionImages'
		},	
		function(data){
			
			totalImageCount = data.ROWCOUNT;
			
			/* 
			 	If the next image subtracted from the total number of images is less than 3 and the total number of images is
			 	more than three, then that means the user is at the end of the images.  Take one of the start image and return.
			 */
			if (totalImageCount - startAtImage < 3 && totalImageCount > 3){
				startAtImage--;
				return false;
			}
			// If the total number of images is less than or equal to three and the next image is not the first, don't do anything
			else if (totalImageCount <= 3 && startAtImage != 0){
				return false;
			}
			// if the first two test are not true, empty the thumbnails and reload starting at the specified image
			else{
				$("#constructionThumbs").empty();
			}
			
			for (var i = startAtImage; i < data.ROWCOUNT; i++) {
				
				// only show 3 images at a time
				if (imageCount > 2) return false;
							
				// show the first image in the small window if an image is not loaded already
				if (i == startAtImage && currentImage == "") loadSmallImage(data.DATA.id[i]);
							
				$("#constructionThumbs").append(
					"<img class='constructionThumb' style='border:1px solid white;' src='img/construction/thumbnail/" +
					data.DATA.fileName[i] + "'" +
					"onclick='loadSmallImage(" + data.DATA.id[i] + ")'" +
					" />"
				);
				
				imageCount++;
			}		
		
		}
	);
	
}

function loadSmallImage(id){
	
	currentImage = id;
	
	// fade out the current image
	$("#smallImageContainer").fadeOut("fast", function(){
		
		$.getJSON(
			'model/images/imageService.cfc',
			{
				returnformat: 'json',
				queryformat: 'column',
				method: 'getConstructionImage',
				imgID: id
			},	
			function(data){
				
				$("#smallConstructionImage").html(
					"<div>" +
						"<img style='border:1px solid white;' src='img/construction/small/" + data.DATA.fileName[0] + "' onclick=loadLargeImage(" + data.DATA.id[0] + ") />" +
					"</div>"
				);
				$("#imageText").html(
					"<div>" +
						"<span class='white'>" + data.DATA.description[0] + "</span>" +
					"</div>"
				);
				$("#imageDate").html(
					"<div>" +
						"<span class='white'>" + data.DATA.dateLastModified[0] + "</span>" +
					"</div>"
				);
				
				// fade in the new image
				$("#smallImageContainer").fadeIn("fast");				
				
			}
		);
		
	});
	
}

function nextImage(direction){
	
	startAtImage = startAtImage + direction;
	
	if (startAtImage < 0) startAtImage = 0;
	if (startAtImage > totalImageCount) startAtImage = totalImageCount;
	
	loadConstructionImages();
	
}

function loadLargeImage(id){
	
	var title = "";
	
	$.getJSON(
		'model/images/imageService.cfc',
		{
			returnformat: 'json',
			queryformat: 'column',
			method: 'getConstructionImage',
			imgID: id
		},	
		function(data){
			
			title = data.DATA.dateLastModified[0] + ": " + data.DATA.description[0];
			
			$("#largeConstructionImage").html(
				"<img src='img/construction/large/" + data.DATA.fileName[0] + "' />"
			);
			
			$("#largeConstructionImage").dialog({
				modal: true,
				title: title,
				draggable: true,
				resizable: false,
				width: 678,
				height: 558,
				show: "fade"
			});	
			
		}
	);
	
}