var PROJ_PATH = "/proj/";


var _loaded = false;
var _projects;
var _curProjIndex = -1;
var _initProjIndex = 0;

$(document).ready(function() {

		//hide stuff
		$('#content').hide();
		$('#menus').hide();

		//jquery address
		$.address.change(function(event) {  
			//catch deep links and select correct project
			//console.log("url change: " + event.value);
		}); 

		$.address.externalChange(function(event) {  
			//catch deep links and select correct project
			//console.log("EXTERNAL change: " + event.value);
			
			if(_loaded) {
				if(event.value.indexOf(PROJ_PATH) > -1) {						
					selectProject(hash2Index(getProjHash()));				
			
				} else if(event.value == "/") {
					selectProject(0);
			
				} else {
					//404 ?
				}
			}			
		});

		// load the xml
		$.ajax({
             type: "GET",
             url: "xml/folio.xml",
             dataType: "xml",
             success: onXMLLoad
     });
    
 });


/** 
 * Only use this if you've checked that the URL contains '/proj/'
 */
function getProjHash() {
	//ex.: 
	//		/proj/the-high-line-design  -->  the-high-line-design
	var v = $.address.value();
	var hash = v.slice(v.indexOf(PROJ_PATH)+6, v.length);
	//console.log('deeplink proj: '+ hash);				
	return hash;
}


function hash2Index(hash) {
	for(var i=0; i<_projects.length; i++) {
		if(_projects[i].hash == hash) return i;	
	}
	return -1;
}


function onXMLLoad(xml) {
	
	_loaded = true;
	
	//remove some preloading anim?
	
	_projects = new Array();
	var proj;
	
	//create the project menu and save project objects
	 $(xml).find('project').each(function(){     
	    
	    var title = $(this).find('title').text();
	    var desc = $(this).find('desc').text();	     
	    var url = $(this).attr('url');
	    var client = $(this).find('client').text();
	     
	    var images = new Array();
	    var image, path;
			$(this).find('image').each(function() {
	     	path = $(this).attr('path');
	     	image = {path: path};	//also can save width, height, and row... 	     	
				images.push(image);
	    });
	    
	    var hash = title.replace(/[^a-zA-Z0-9]+/g, "-").toLowerCase();
	    
	    $('<li id="proj_'+_projects.length+'"></li>')
	    	   //.html("<a href='javascript:selectProject("+projects.length+")'>"+title+"</a>")
	         .html('<a rel="address:proj/'+hash+'" href="proj/'+hash+'">'+title+'</a>')
	         .appendTo('#proj_menu ul');
	     
 	     proj = {	hash: hash,
 	     					title: title,
 	     					desc: desc,
 	     					url: url,
 	     					client: client,
 	     					images: images};
	     _projects.push(proj);
	     
	 });
	  
	 	
	initMenus();	//can we instead figure out how to set the click handler in-line within that xml parsing loop where the <li> tags are created?
	
	//look at current URL for a project deeplink.
	var initProjIndex = 0;
	if($.address.value().indexOf(PROJ_PATH) > -1) {
		initProjIndex = hash2Index(getProjHash());
	}
	selectProject(initProjIndex);

	//finally, reveal data-driven content	
	$('#content').show();
	$('#menus').show();
}


/**
 * Sets the click and mouseover handler for project menu items
 */
function initMenus() {
	$('a').click(function() {  
   	//do nothing. we'll set the menu link actions directly
   	//console.log("link " + $(this).attr('href'));
	}); 

	//project menu
	$('#proj_menu li').each(function() {		
		$(this).click(function() {		
			var index = ($(this).attr('id')).slice(5,6);	// 'id' is proj_X where X is the numerical index
			selectProject(index);					
			
     	$.address.value($('a', this).attr('href'));  

			
		});
		
		$(this).mouseover(function() {
			if(!$(this).hasClass('menuitem_selected')) {
				doMenuItemMouseOver($(this));
			}
		});

		$(this).mouseleave(function() {
			if(!$(this).hasClass('menuitem_selected')) {
				doMenuItemMouseOut($(this));
			}
		});	
	});
	
	//contact menu behavior
	$('#contact_menu li').each(function() {
		$(this).mouseover(function() {
			doMenuItemMouseOver($(this));
			
		});
		$(this).mouseleave(function() {			
			doMenuItemMouseOut($(this));			
		});	
	});
	
	Cufon.replace('.menu a');	//force replace of newly created project menu items
}


/**
 * @param item A <li> object
 */
function doMenuItemMouseOver(item) {
	$(item).animate({
    	marginLeft: '10'
  	}, 200);
}


/**
 * @param item A <li> object
 */
function doMenuItemMouseOut(item) {
	$(item).animate({
    	marginLeft: '0'
  		}, 200);

}



function selectProject(index) {
	if(!_projects.length) {
		console.log('projects array is empty!');
		return;
	}	
	if(index == _curProjIndex) return;	
	
	if(_curProjIndex >= 0) {
		deselectMenuItem(_curProjIndex);
	}
	selectMenuItem(index);
	
	loadProject(_projects[index]);
	
	_curProjIndex = index;
}


function loadProject(p) {

	var box = $('#boxInfo');
	
	$('#title', box).html(p.title);
	$('#desc', box).html(p.desc);
	$('#client', box).html(p.client);
	if(p.url) {
		$('#launch', box).html('<a href="'+p.url+'">launch »</a>')	
		$('#launch', box).show();
	} else {
		$('#launch', box).hide();
	}
	
	var images = p.images;
	
	//clear old image divs
	$('#boxImagesCont').empty();
	
	//write new image divs
	for(var i=0; i<images.length; i++) {	
		//console.log('write image: '+ images[i].path);		
		$('<div class="contentBox"></div>')
			.html('<img src="'+images[i].path+'" style="display:none" onload="$(this).fadeIn();"/>')
			.appendTo('#boxImagesCont');			
	}
	
	
	Cufon.replace('#title');
	Cufon.replace('#desc');
	Cufon.replace('#client');
	Cufon.replace('#launch');
}


function selectMenuItem(index) {	
    
	$('#proj_'+index, '#proj_menu').addClass('menuitem_selected');
	//add indented hover
    doMenuItemMouseOver($('#proj_'+index, '#proj_menu'));
}

function deselectMenuItem(index) {	
	var item = $('#proj_'+index, '#proj_menu');
	item.removeClass('menuitem_selected');
	doMenuItemMouseOut(item);
}