var categoryData;
var categoryMap;
var selectedCategoryId;


$(document).ready(function() {
	
	$(document).pngFix(); 
		
	
		categoryData = new Array();
		categoryMap = new Object();
	
		
	
		 
		$('#navigation').load( 'menu.html', function() {
			if (pageView == 'project') {
				loadProjectData();
			} else if (pageView == 'index'){
				animateHomePage();
			} else if (pageView == 'firm'){
		
				//update menu
				$('#navigation div div.topic').each(function(){ 
					$(this).removeClass('selected');
				});
				$('#navigation div#menu_firm').addClass('selected');
				
			}
		}); 
	
});


function redirectHome() {
	
		window.location = 'index.html';
}

function animateHomePage() {
	
	$('#blue_stripe').hide();
	$('#navigation div div.topic').each(function(){ 
		$(this).hide();
	});
	
	$('#blue_stripe').fadeIn('slow', function() {
		animateHomePageQuote(0);
	  });
	  
	  
	  
}



function animateHomePageQuote(index) {
	
	$('#line_' + index).fadeIn('fast', function() {
        if (index == 5){
			animateHomePageNavigation(0);
		} else {
			animateHomePageQuote(index + 1);
		}
     });
}

function animateHomePageNavigation(index) {
	
	$('#navigation div div.topic').slice(index, index + 1).fadeIn('fast', function() {
        if (index == 6){
			 
		} else {
			animateHomePageNavigation(index + 1);
		}
     });
	 
}




/* load xml data */

function loadProjectData() {
	
	var _success;
	$.ajax({
		type: "GET",
		url: "xml/projects.xml",
    	contentType: "application/xml",
		dataType: "xml",
		cache: false,
		error: function(result) {
			 alert("FAILED : " + result.status + ' ' + result.statusText);

		},
		success: function(xml) {
			$(xml).find('category').each(function(i){
				
				var categoryKey = $(this).attr('key');
				var categoryTitle = $(this).attr('title');
				
				var category = new Object();
				category.title = categoryTitle;
				category.key = categoryKey;
				
				var projects = new Array();
				$(this).find('project').each(function(){ 
				
					var key = $(this).attr('key');
					var title = $(this).find('title').text();
					var menu = $(this).find('menu').text();
					var description = $(this).find('description').text();
					var quote = $(this).find('quote').text();
				
					var project = new Object();
					project.key = key;
					project.title = title;
					project.menu = menu;
					project.description = description;
					project.quote = quote;
					
					
					var images = new Array();
					$(this).find('image').each(function(){ 
						images.push($(this).text());
					});
					project.images = images;
				
					projects.push(project);
				});
				category.projects = projects;
				categoryData[i] = category;
				categoryMap[categoryKey] = i;
				
				
			});
			drawProjectMenu();
		}
	});
	
	
}

var selectedMenuItem;

function drawProjectMenu() {
	// determine selected category
	var key = getUrlVars()["c"];
	if (key != undefined){
		
		
		var id = categoryMap[key];
		selectedCategoryId = id;
		var category = categoryData[id];
		
		//update category title
		$('#project h1').html(category.title);
		
		//update menu
		$('#navigation div div.topic').each(function(){ 
			$(this).removeClass('selected');
		});
		$('#navigation div#menu_' + key).addClass('selected');
		
		// get list of projects
		var projects = new Array();
		projects = category.projects;
		
		if (projects != undefined) {
			//alert(id + ", " + projects);
			if (projects.length > 0) {
				// render dom elements
				 
				for (var n = 0; n < projects.length; n++) {
					var li = $('<li id="' + n + '">' + projects[n].menu + '</li>');
					$('#list ul').append(li);
					li.click(function() {
					  showProjectDetail($(this).attr('id'), $(this));
					});
				}
				
		
				
				$('#left_arrow').click(function() {
				  prevProjectImage( );
				});
				
				$('#right_arrow').click(function() {
				  nextProjectImage( );
				});
				
				$('#image_window').click(function() {
				  nextProjectImage( );
				});
				
				
		
				showProjectDetail(0, $('#list ul li').first());
				
			}
			else {
				// redirect to index.html
				redirectHome();
			}
		}
		
		
		
		
	} else {
		// redirect to index.html
		redirectHome();
	}
	
}

var selectedProjectId;
var selectedProjectImages;
var selectedImageId;

function showProjectDetail(projectId, liSelected){
	selectedProjectId = projectId;
	if (projectId != undefined && selectedCategoryId != undefined) {
		var projects = new Array();
		var category = categoryData[selectedCategoryId];
		var projects = category.projects;
		var project = projects[projectId];
		
		//update project list menu
		$('#list ul li').each(function(i) { 
		   $(this).removeClass('selected');
		});
		liSelected.addClass('selected');
		
		
		
		//hide stuff
		$('#project').hide();
		$('#quote p').hide();
		
		//update project title, description
		$('#project p.title').html(project.title);
		$('#project p.description').html(project.description);
		$('#quote p').html(project.quote);
		
		
		//fadeIn stuff
		$('#project').fadeIn();
		$('#quote p').fadeIn();
		
		
		selectedProjectImages = new Array();
		selectedProjectImages = project.images;
		selectedImageId = 0;
		if (selectedProjectImages.length == 0) {
			$('#image_navigation').hide();
			$('#image_window').empty();
			$('#image_window').append($('<p>Images Coming Soon</p>'));
			
			
		} else if (selectedProjectImages.length < 2 && selectedProjectImages.length  > 0){
			$('#image_navigation').hide();
			showProjectImage();
			
		} else {
			$('#image_navigation').show();
			showProjectImage();
			
		}
	}
	
}



function nextProjectImage(){
	selectedImageId++;
	if (selectedImageId == selectedProjectImages.length){
		selectedImageId = 0;
	}
	showProjectImage();
}

function prevProjectImage(){
	selectedImageId--;
	if (selectedImageId == -1){
		selectedImageId = selectedProjectImages.length - 1;
	}
	showProjectImage();
	
}

function showProjectImage(){
	//alert( selectedProjectImages[selectedImageId] );
	var imgElem = $('#image_window');
	imgElem.empty();
	imgElem.hide();
	imgElem.append($('<img src="images/' + selectedProjectImages[selectedImageId] + '"/>'));
	imgElem.fadeIn();
}



// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}