$(document).ready(function(){

var rowFocus = 1;
var colFocus = 4;
var nextCol = colFocus;
var nextRow = rowFocus;
var offsetX = 250;
var offsetY = 20;
var imgHeight = 425;
var imgWidth = 535;
var marginX = 20;
var marginY = 20;
var theInterval = 500;
var halfInterval = theInterval /2;
var slides = $('#folio').children('div');
var slideCount = $('#folio').children('div').size();
var xx=0;
var thisCol = 1;
var prevCol = thisCol;
var gridHtml = '<h2>&nbsp;</h2><div class="col">';
var disab= false;
var valid = false;


arrange();

function arrange() {

	$('#gallery').children('div').each(function() {
			
			prevCol = thisCol;
			thisId = $(this).attr('id');
			thisRow = thisId.substr(3, 1);
			thisCol = thisId.substr(1, 1);
			thisLeft = (((thisCol-colFocus) * (imgWidth + marginX)) + offsetX); 
			thisTop = (((thisRow-rowFocus) * (imgHeight + marginY)) + offsetY); 
			$(this).css({left: thisLeft+'px'});
			$(this).css({top: thisTop+'px'});
			
			if ((rowFocus == thisRow) && (colFocus == thisCol)) {
			$(this).css({opacity: '1'});
			} 
			else if (colFocus == thisCol) {
			$(this).css({opacity: '1'});	
			}
			else {
			$(this).css({opacity: '0.5'});
			}
			
			// Build the nav grid
			
			if (thisCol == prevCol) {
			
				gridHtml += '<a href="javascript:void(0);" id="n' + thisRow + '-'+ thisCol + '"></a>';
			
			} else {
				
				gridHtml += '</div><div class="col"><a href="javascript:void(0);"  id="n' + thisRow + '-'+ thisCol + '"></a>';
				
			}
			
			
			
	});
	
	gridHtml += '</div>';
	$("#inner .nav").html(gridHtml);
	$("#inner .nav .col a").css('opacity', 0.25);
	$("#n"+rowFocus+"-"+colFocus).css({opacity: 1});
	$("#inner .nav .col a").bind('click', function() {
												   
											thisid=	$(this).attr('id');
											clickRow =thisid.substr(1, 1);
											clickCol =thisid.substr(3, 1);
											move(clickRow, clickCol);
												   
												   });
	
	$('#inner_overlay').css({opacity: 0.8});
	updateTech(false);
	insertText();
	insertTitle();

}

function anim(animX, animY, animRow, animCol, animOpacity) {

if (animOpacity) {

$('#d'+animCol+'-'+animRow).animate({ 
					left: animX+"px",
					top: animY+"px",
					opacity: animOpacity
				}, theInterval, function() {
						// Prevent event bubbling
						disab = false;
						valid = false;
						xx = 0;
						})
}
else {
	
	$('#d'+animCol+'-'+animRow).animate({ 
					left: animX+"px",
					top: animY+"px"
				}, theInterval, function() {
						// Prevent event bubbling
						disab = false;
						valid = false;
						xx = 0;
						})
	
}
	
}



function move(toRow, toCol) {

	if (disab != true) {
	disab = true;
	
	// Determine distance to move
	changeY = ((rowFocus - toRow) * (imgHeight + marginY));
	changeX = ((colFocus - toCol) * (imgWidth + marginX));
	
	$('#gallery').children('div').each(function() {
	
	thisId = $(this).attr('id');
	thisRow = thisId.substr(3, 1);
	thisCol = thisId.substr(1, 1);
	
	if ((toRow == thisRow) && (toCol == thisCol)) {
	valid = true;
	
	}
	
	});
	
	if (valid == true) {	
		nextCol = toCol;
		nextRow = toRow;
		$('#gallery').children('div').each(function() {
		
		
		thisId = $(this).attr('id');
		thisRow = thisId.substr(3, 1);
		thisCol = thisId.substr(1, 1);
		 
		 
		// Get current position and parse integer
		thisY = $(this).css('top');
		thisX = $(this).css('left');
		
		thisY =thisY.replace(/px,*\)*/g,"");
		thisY = parseInt(thisY);
		thisX =thisX.replace(/px,*\)*/g,"");
		thisX = parseInt(thisX);
		
		// Determine new position
		newX = thisX + changeX;
		newY = thisY + changeY;
		
		// Determine new opacity
		if ((toRow == thisRow) && (toCol == thisCol)) {
		newOpacity = 1;
		}
		else if (toCol == thisCol) {
		newOpacity = 1;
			}
		else {
		
		newOpacity = 0.5;
		}
		
		
	
				
				if (newOpacity != $(this).css('opacity')) {
						
					anim(newX, newY, thisRow, thisCol, newOpacity);
					
					
				} else {
				
					anim(newX, newY, thisRow, thisCol, false);
				}
						
					
					
		});
		
		
		
		if (toCol != colFocus) {
		updateText();	
		updateTech();
		
		}
		updateGrid();
		
		rowFocus = toRow;
		colFocus = toCol;
	
		}
		else {
		disab = false;
		}
	}
	

}


function updateGrid() {
	
			
	$('#n'+rowFocus+'-'+colFocus).animate({ opacity: 0.25}, halfInterval, function() {
						
						$('#n'+nextRow+'-'+nextCol).animate({ opacity: 1}, halfInterval);
										
																}
	);
}

function updateText() {
	
	$('#inner .words').animate({ opacity: 0}, halfInterval, function() {
							insertText();
							insertTitle();						
							$('#inner .words').animate({ opacity: 1}, halfInterval);
										
																}
	);

}

function insertText() {

$('#inner .words p').html(story[colFocus]);

}

function insertTitle() {

$('#inner .words h2').css('background-position', title[colFocus]);

}

function updateTech(anim) {
	
	if (anim == null) {
	anim = true;	
	}
	lightString = '';
	darkString = '';
	if (tech[nextCol][1]) {
	darkString +=	' .tech_css_off,';
	} 
	else {
	lightString +=	' .tech_css_off,';	
	}
	
	if (tech[nextCol][2]) {
	darkString +=	' .tech_html_off,';
	} 
	else {
	lightString +=	' .tech_html_off,';	
	}
	
	if (tech[nextCol][3]) {
	darkString +=	' .tech_php_off,';
	} 
	else {
	lightString +=	' .tech_php_off,';	
	}
	
	if (tech[nextCol][4]) {
	darkString +=	' .tech_flash_off,';
	} 
	else {
	lightString +=	' .tech_flash_off,';	
	}
	
	if (tech[nextCol][5]) {
	darkString +=	' .tech_mysql_off,';
	} 
	else {
	lightString +=	' .tech_mysql_off,';	
	}
	
	if (tech[nextCol][6]) {
	darkString +=	' .tech_js_off,';
	} 
	else {
	lightString +=	' .tech_js_off,';	
	}
	
	if (tech[nextCol][7]) {
	darkString +=	' .tech_as_off,';
	} 
	else {
	lightString +=	' .tech_as_off,';	
	}
	
	if (tech[nextCol][8]) {
	darkString +=	' .tech_dotnet_off,';
	} 
	else {
	lightString +=	' .tech_dotnet_off,';	
	}
	
	if (anim) {
	$(lightString).animate({ opacity:1},theInterval);
	$(darkString).animate({ opacity: 0}, halfInterval);
	}
	else {
		$(lightString).css({ opacity:1});
	$(darkString).css({ opacity: 0});
	}
	
}



function goDown() {
gotoRow = rowFocus + 1;
gotoCol = colFocus;
move(gotoRow, gotoCol);
control(-180);
return false;
}

function goUp() {
gotoRow = rowFocus - 1;
gotoCol = colFocus;
move(gotoRow, gotoCol);
control(-90);

}

function goLeft() {
gotoRow = rowFocus;
gotoCol = colFocus-1;
if (gotoCol != colFocus) {
	gotoRow = 1;
}
move(gotoRow, gotoCol);
control(-45);
}

function goRight() {
gotoRow = rowFocus;
gotoCol = colFocus + 1;
if (gotoCol != colFocus) {
	gotoRow = 1;
}
move(gotoRow, gotoCol);
control(-135);
}

function control(yshift) {
	$('#inner .keyscover').css("opacity", "1");
	$('#inner .keyscover').css("background-position", "0px "+yshift+"px");
	return false;
}

function resetcontrol() {
	$('#inner .keyscover').animate({ opacity: 0}, 300);
	return false;
}

 jQuery(document).bind('keydown', 'down',goDown, false);
 jQuery(document).bind('keydown', 'up',goUp);
 jQuery(document).bind('keydown', 'left',goLeft);
 jQuery(document).bind('keyup', 'left', resetcontrol);
 jQuery(document).bind('keyup', 'right', resetcontrol);
 jQuery(document).bind('keyup', 'up', resetcontrol);
 jQuery(document).bind('keyup', 'down', resetcontrol);
 jQuery(document).bind('keydown', 'right',goRight);


$('#inner .keyscover a').css('cursor', 'pointer');
$('#leftClick').bind('click', function () { goLeft(); resetcontrol(); });
$('#rightClick').bind('click', function () { goRight(); resetcontrol(); });
$('#downClick').bind('click', function () { goDown(); resetcontrol(); });
$('#upClick').bind('click', function () { goUp(); resetcontrol(); });


});