var allProjects = new Array();
var cachedImages = new Array();
var index = 0;
var next;
var prev;

function parseXml(xml) {
	$(xml).find('project').each(function() {
		var project = new Object();
		project.title = $(this).find('title').text();
		project.address = $(this).find('address').text();
		project.building = $(this).find('building').text();
		project.client = $(this).find('client').text();
		project.engineers = $(this).find('engineers').text();
		project.scope = $(this).find('scope').text();
		project.href = $(this).attr('href');
		
		var imagexml = $(this).find('image');
		var image = new Array();
		image[0] = imagexml.attr('src');
		image[1] = imagexml.attr('alt');
		image[2] = imagexml.attr('width');
		image[3] = imagexml.attr('height');
		project.image = image;
		
		var thumbxml = $(this).find('thumb');
		var thumbnail = new Array();
		thumbnail[0] = thumbxml.attr('src');
		thumbnail[1] = thumbxml.attr('alt');
		thumbnail[2] = thumbxml.attr('width');
		thumbnail[3] = thumbxml.attr('height');
		project.thumbnail = thumbnail;
		
		allProjects.push(project);
	});
	
	index = 0;
	next = 1;
	prev = allProjects.length - 1;
	
	initFeaturedBrowser();
}

function initFeaturedBrowser() {
	// set up the list containing the thumbnails for the featured project navigator
	var thumblist = $(document.createElement('ul')).attr('id', 'more-pictures');
	
	// add the thumbnail images to the featured project navigator and cache the big images
	for (var i = 0; i < allProjects.length; i++) {
		var project = allProjects[i];
		var j = i + 1;
		var thumbid = "img" + j;
		
		// create cached image
		var cacheImage = $(document.createElement('img')).attr({
			src: project.image[0],
			alt: project.image[1],
			width: project.image[2],
			height: project.image[3]
		});
		
		// add cached image to array
		cachedImages.push(cacheImage);

		// create thumbnail tag
		var thumb = $(document.createElement('img')).attr({
			src: project.thumbnail[0],
			alt: project.thumbnail[1],
			width: project.thumbnail[2],
			height: project.thumbnail[3]
		});
		
		// create list tag to hold image
		var listitem = $(document.createElement('li')).attr('id', thumbid).append(thumb);
		
		// create border element
		var border = $(document.createElement('img')).addClass('border');
		border.attr({
			src: 'http://maspethroofing.com/images/graphics/spacer.png',
			onClick: 'setFeaturedProject('+i+', true)',
			title: project.thumbnail[1],
			alt: project.thumbnail[1]
		});
		
		// add border to listitem
		listitem.append(border);
		
		// select the active listitem
		if(i == index) listitem.addClass('selected');
		
		// add list item to list
		thumblist.append(listitem);
	}
	
	// add thumblist to project photos
	$('#project-photos').append(thumblist);
	
	// add next/previous buttons to project details
	var prevbtn = $(document.createElement('span')).attr('id', 'prev-btn');
	prevbtn.html('&laquo; Previous');
	prevbtn.click(function() {
		setFeaturedProject(prev, true);
	});


	var nextbtn = $(document.createElement('span')).attr('id', 'next-btn');
	nextbtn.html('Next &raquo;');
	nextbtn.click(function() {
		setFeaturedProject(next, true);
	});
	
	$("#project-nav").append(prevbtn).append(nextbtn);
	
	// start timer
	$(document).everyTime(5000, "rotate", function() {
		setFeaturedProject(next, false);
	}, allProjects.length);
}

function setFeaturedProject(newIndex, stopTimer) {
	if(newIndex < allProjects.length && newIndex >= 0 && newIndex != index) {
		
		// stop animation if necessary
		if (stopTimer) $(document).stopTime("rotate");

		index = newIndex;
		
		// get selected project
		var project = allProjects[index];
		
		if(project != null) {
			// select elements to fade 
			var fadeElements = $('#project-details');
		
			// fade out image and details
			fadeElements.fadeOut('fast', function() {
			
				// update fields
				$('#project-details > h1').text(project.title);
				$('#project-details > address').text('- '+project.address);
				
				// remove specs fields
				$('ul#specs > li').remove();
				
				// add relevant specs fields
				var speclist = $('ul#specs');
				if(project.building != "") speclist.append(generateSpecItem('building', 'Building', project.building));
				if(project.client  != "") speclist.append(generateSpecItem('client', 'Client', project.client));
				if(project.engineers != "") speclist.append(generateSpecItem('engineers', 'Engineer', project.engineers));
				if(project.scope != "") speclist.append(generateSpecItem('scope', 'Scope', project.scope));
				
				// edit featured image
				$('#selected-picture > img').replaceWith(cachedImages[index]);
				
				// edit project-details link
				$('#project-details > a.details').attr('href', project.href);
				
				// reset navigation elements
				var thumbid = "img" + (newIndex + 1);
				
				$('ul#more-pictures > li').removeClass('selected');
				$('#'+thumbid).addClass('selected');
				
				next = index < allProjects.length - 1 ? index + 1 : 0;
				prev = index > 0 ? index - 1 : allProjects.length - 1;
			
			});

			// fade in image and details
			fadeElements.fadeIn('fast');
		}
	}
}

function generateSpecItem(identifier, label, value) {
	// create label
	var label = $(document.createElement('span')).addClass('label').text(label+":");
	
	// create list item
	var listitem = $(document.createElement('li')).attr('id', identifier);
	listitem.append(label);
	listitem.append('&nbsp;');
	listitem.append(value);
	
	return listitem;
}

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "http://maspethroofing.com/index.php/site/featured-xml/",
    dataType: "xml",
    success: parseXml
  });
  
});