function changeimg(id, link)
{
	if( $('#port_text' )) 
	{
		$('#port_text').remove(); 
		$('#port_link').show(); 
	}
	
	$("#"+id).attr('src', link); 
}

function changehref(id, link)
{
	document.getElementById(id).href = link; 
}

function changetxt(id, text)
{
		document.getElementById(id).innerHTML = text; 
}

/*
function pixelWreath(pxcount, gap) {
	ow = $('#container').width(); 
	oh = $('#container').height(); 
	
	$('#container').append('<div id= "px_ref" class= "pxblock"></div>'); 
	
	pxsize = $('#px_ref').outerWidth(); 
	
	$('#px_ref').remove(); 
	
	for (i=1; i <= pxcount; i++) {
		pxid = 'px' + i; 
		
		var colors = new Array(
			'red',
			'lime',
			'blue'
			//'red',
			//'lime',
			//'blue',
			//'red',
			//'lime',
			//'blue',
			//'cyan',
			//'magenta',
			//'yellow'
		); 
		
		$('#container').append('<div id= "' + pxid + '" class= "pxblock"></div>'); 
		
		pixelPlaceWreath(pxid, pxsize, colors, gap); 
	}
}
/**/

function pixelBelt(pxcount) {
	$('#container').append('<div id= "px_ref" class= "pxblock"></div>'); 
	
	pxsize = $('#px_ref').outerWidth(true); 
	
	$('#px_ref').remove(); 
	
	for (i=1; i <= pxcount; i++) {
		pxid = 'px' + i; 
		
		var colors = new Array(
			'red',
			'lime',
			'blue'
			//'red',
			//'lime',
			//'blue',
			//'red',
			//'lime',
			//'blue',
			//'cyan',
			//'magenta',
			//'yellow'
		); 
		
		$('#container').append('<div id= "' + pxid + '" class= "pxblock"></div>'); 
		
		pixelPlaceBelt(pxid, pxsize, colors); 
	}
}

/*
function pixelPlaceWreath(id, pxsize, colors) {
	ow = $('#container').width(); 
	oh = $('#container').height(); 	
	
	pixel = $('#'+id); 
	
	middleX = Math.floor(ow/2); 
	middleY = Math.floor(oh/2);
	
	//Generate random coordinates
	posX = Math.floor(Math.random() * (ow-pxsize-(gap*2)))+gap; 
	posY = Math.floor(Math.random() * (oh-pxsize-(gap*2)))+gap;
	
	//Attach position to grid
	grid_unit = pxsize + gap*2; 
	posX -= posX%grid_unit; 
	posY -= posY%grid_unit; 
	
	
	//If random coords are closer to Y median
	if (Math.abs(posX-middleX) > Math.abs(posY-middleY)) {
		//Attach X to border
		if (posX>middleX) {
			pixel.css('left', 'auto'); 
			pixel.css('right', gap + 'px'); 
		} else {
			pixel.css('left', gap + 'px'); 
			pixel.css('right', 'auto'); 
		}
			pixel.css('top', posY + 'px'); 

	//If random coords are closer to X median
	} else {
		//Attach Y to border
			pixel.css('left',  posX + 'px'); 
		if (posY>middleY) {
			pixel.css('top', 'auto'); 
			pixel.css('bottom', gap + 'px'); 
		} else {
			pixel.css('top', gap + 'px'); 
			pixel.css('bottom', 'auto'); 
		}
	}
	
	//Change color
	col_id = Math.floor(Math.random()*colors.length); 
	pixel.css('backgroundColor', colors[col_id]); 
	
	//Fade in/out
	speed = Math.random()*1500 + 500;   //0.5 to 2 sec.
	pixel.fadeIn(speed, pxFadeOut(id, pxsize, colors, gap)); 
}
/**/


function pixelPlaceBelt(id, pxsize, colors) {
	ow = $('#container').width(); 
	oh = $('#container').height(); 
	iw = $('#content').width(); 
	ih = $('#content').height(); 
	
	deltaX = ow-iw; 
	deltaY = oh-ih; 
	thresholdX = Math.floor(deltaX/2)-pxsize; 
	thresholdY = Math.floor(deltaY/2)-pxsize; 
	
	grid_unit = pxsize; //Aligning grid
	
	/*
	rangesX = new Array (
		0,
		thresholdX - pxsize, 
		ow - thresholdX, 
		ow - pxsize
	); 
	rangesY = new Array (
		0,
		thresholdY - pxsize, 
		oh - thresholdY, 
		oh - pxsize
	); 
	/**/
	
	pixel = $('#'+id); 
	
	middleX = Math.floor(ow/2); 
	middleY = Math.floor(oh/2);
	
	//Generate random reference coordinates
	refX = Math.floor(Math.random() * (ow-pxsize)); 
	refY = Math.floor(Math.random() * (oh-pxsize)); 
	
	var coords = new Array; 
	
	// Split position on a proportional criterion
	// (whichever the farthest axis from the center of the scrreen, 
	// proportionally to the screen w and h, gets pushed out of the 
	// grey area and recalculated proportionally to available area)
	
	var driftX = Math.abs( refX-middleX ); 
	var driftY = Math.abs( refY-middleY ); 
	
	if (driftX > driftY ) {
		// Recalculate X
		refX = Math.floor(Math.random() * (deltaX-pxsize)); 
		if (refX < thresholdX) {
			coords['left'] = refX; 
			coords['right'] = 'auto'; 
		} else {
			coords['left'] = 'auto'; 
			coords['right'] = refX - thresholdX; 
		}
		
		coords['top'] = refY; 
		coords['bottom'] = 'auto'; 
	} else {
		// Recalculate Y
		coords['left'] = refX; 
		coords['right'] = 'auto'; 
		
		refY = Math.floor(Math.random() * (deltaY-pxsize)); 
		if (refY < thresholdY) {
			coords['top'] = refY; 
			coords['bottom'] = 'auto'; 
		} else {
			coords['top'] = 'auto'; 
			coords['bottom'] = refY - thresholdY; 
		}
	}
	
	//Attach position to grid
	for( c in coords ) {
		if ( !isNaN( parseInt( coords[c] ))){
			coords[c] -= coords[c]%grid_unit; 
			coords[c] = coords[c] + 'px'; 
		}
	}
	
	//Place pixel 
	pixel.css(coords); 
	
	//Change color
	col_id = Math.floor(Math.random()*colors.length); 
	pixel.css('backgroundColor', colors[col_id]); 
	
	//Fade in/out
	speed = Math.random()*1500 + 500;   //0.5 to 2 sec.
	pixel.fadeIn(speed, pxBeltFadeOut(id, pxsize, colors)); 
}

function pxBeltFadeOut(id, pxsize, colors) {
	$('#'+id).fadeOut(speed, function() {
		pixelPlaceBelt(id, pxsize, colors)
	}); 
}

function port_img(id, i) {
	h = $('#port_media_slider li').outerHeight(); 
	pos = -i*h; 
	$('#port_media_slider').animate({marginTop: pos}, 500); 
	
	$('.proj_img_tn_current').removeClass('proj_img_tn_current'); 
	$('#proj_img_tn-'+id).addClass('proj_img_tn_current'); 
}


//AJAX image loading (project large images)

function img_loader(id, src) {
  var img = new Image();
  
  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();
    
      // with the holding div #loader, apply:
      $(id)
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
    
      // fade our image in to create a nice effect
      $(this).fadeIn();
    })
    
    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })
    
    // *finally*, set the src attribute of the new image to our image
    .attr('src', src);
}



//Cat sliders 

function cat_slide_dn() {
	//alert("dn"); 
	var r = 5; //number of thumbnails displayed in window
	var n = $('.prj_icon').length; //total number of thumbnails
	var padding = 7; 
	
	if (n>r) { 		//Only if there are enough thumbnails to scroll
		var tn_h = $('.prj_icon').outerHeight(); // height of each thumbnail
		var pos = $('#port_slider').position().top; //Vert position of strip in px. Always <= 0
		var room = tn_h * r; //Total viewing space available
		var total_h = tn_h*n; 
		var space_r = total_h + pos - room; //Space left on the right hand side (which will show up after animation)
		
		if (space_r >= room) {
			//if there are enough thumbnails on the right to slide a whole page, do it
			var goal = pos - room; 
			
		} else {
			//Otherwise, slide to the end of the strip 
			var goal = -tn_h * n + room;
			$('#port_slider_next').hide();
		}; 
		
		//alert ("Goal: "+goal); 
		$('#port_slider').animate({
			top: goal + padding + 'px'
		}, 300); 
		
		$('#port_slider_back').show();
	}
}

function cat_slide_up() {
	//alert("up"); 
	var r = 5;
	var n = $('.prj_icon').length; 
	var padding = 5; 
	
	if (n>r) {
		var tn_h = $('.prj_icon').outerHeight(); 
		var pos = $('#port_slider').position().top;
		var room = tn_h * r; 
		if ( -pos > room) {
			var goal = pos + room; 
		} else {
			var goal = 0;
			$('#port_slider_back').hide();
		}; 
		
		//alert ("Goal: "+goal); 
		z = goal + padding + 'px';
		$('#port_slider').animate({ 
			top: goal + padding + 'px'
		}, 300); 
		
		$('#port_slider_next').show();
	}
}