function ca_projects(args) {
	// rearrange our data so projects are independent of category arrays
    var _projects = new Array();
	var _projectSemaphore = 0;
	var img;
	var next = 0;
	
	//alert('in ca_projects');
		
	var finishChange = function() {
		//var next = Math.floor(Math.random() * _projects.length);
		var p = _projects[next];
		next = (++next) % _projects.length;
		
		$('project-background').src = p.background;
		$('project-background').alt = p.title;
		$('project-background').appear({duration:.5});
		$('title').down().src = p.catimg;
		$('title').down(1).innerHTML = p.description;	
	}
		
	var changeProj = function() {		
		$('project-background').fade({duration:.5, afterFinish: finishChange});
	}
	
	var start = function() {
		changeProj();
		window.setInterval(changeProj,5000);
	}
	
	var checkProjectSemaphore = function() {
		_projectSemaphore--;
		if (_projectSemaphore == 1) {
			start();
		}
	}
	
	var scrambleProjs = function() {	
		// simple shuffler - runs at about O(n^2) - if we have tons of projects we could cut this down, but you still have to download n large images
		//alert('scrambling');
		for (k = 0, l = _projects.length; k < l; k++) {
			for (i = 0, j = _projects.length - 1;i < j; i++) {
				if (Math.random() * 2 >= 1) {
					p = _projects[i+1];
					_projects[i+1] = _projects[i];
					_projects[i] = p;
				}
			}
		}
	}
	
    for (k = 0, l = args.length;k<l;k++) {
        for (i = 0, j = args[k].projects.length;i<j;i++) {
			if (args[k].projects[i].background.length > 0) {
				// preload project images while we loop
				_projectSemaphore++;
				img = new Image();
				img.onload = checkProjectSemaphore;
				img.src = args[k].projects[i].background;

				_projects.push( {category: args[k].category, catimg: args[k].categoryImage, title: args[k].projects[i].title, description: args[k].projects[i].description, background: args[k].projects[i].background, preload: img} );
			}
        }
		// preload category images while we loop
		img = new Image();
		img.src = args[k].categoryImage;
    }
	scrambleProjs(); // skip this if you want the same order every time
}

function switchProjImage(img) {	
	$('main-project-image').down().fade({duration: 0.5, afterFinish: function() {	
		$('main-project-image').down().src = img.src;
		$('main-project-image').href = img.src;
		$('main-project-image-enlarge').href = img.src;
		
		/*
		img_ratio = img.width / img.height;
		mask_ratio = 563 / 320;
		
		if (img_ratio < mask_ratio) {
			// center image vertically
			//$('main-project-image').down().setStyle('width:563px;height:auto;left:0px;top:-' + ( ((563 / img_ratio) - 320) / 2 ) + 'px;');
			// align image to baseline vertically
			//$('main-project-image').down().setStyle('width:563px;height:auto;left:0px;top:-' + ((563 / img_ratio) - 320) + 'px;');
			// set image to the right height and damn the side bars
			$('main-project-image').down().setStyle('width:auto;height:320px;margin:0px auto;');
		} else {
			// center image horizontally
			//$('main-project-image').down().setStyle('height:320px;width:auto;top:0px;left:-' + ( ((320 * img_ratio) - 563) / 2 ) + 'px;');
			// set image to the right width and damn the top / bottom bars
			$('main-project-image').down().setStyle('width:563px;height:auto;margin:' + ( (320 - (563 / img_ratio)) / 2 ) + 'px 0px 0px 0px;');			
		}*/
		
		$('main-project-image').down().setStyle('width:563px;');
		
		$('main-project-image').down().appear({duration: 0.5});	
	}});	
}