$(document).ready(function(){

var rowFocus = '01';
var colFocus = '01';
var nextCol = colFocus;
var nextRow = rowFocus;
var offsetX = 0; //450;
var offsetY = 0; //20;
var imgHeight = 402;
var imgWidth = 588;
var marginX = 10;
var marginY = 10;
var theInterval = 1100;
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;
var dummy = '';


arrange();

function arrange() {

	$('#gallery').children('div').each(function() {
			
			prevCol = thisCol;
			thisId = $(this).attr('id');
			thisRow = thisId.substr(4, 2);
			thisCol = thisId.substr(1, 2);
			dummy = $(this).attr('name');
			//dummy = (thisId.name == 'ZZ' )
			
			//alert (dummy);
				
			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) {
				if  ( dummy.length == 1 ) 
				{
				gridHtml += '<a href="javascript:void(0);" id="n' + thisRow + '-'+ thisCol + '"></a>';
				}
				else
				{
				gridHtml += '<span class="box_vuoto" id="n' + thisRow + '-'+ thisCol + '"></span>';
				}
			}
			else  
			{
				if  ( dummy.length == 1 ) 
				{
				gridHtml += '</div><div class="col"><a href="javascript:void(0);"  id="n' + thisRow + '-'+ thisCol + '"></a>';
				}
				else
				{								
				gridHtml += '</div><div class="col"><span class="box_vuoto"></span>';
				}
			}
			
			
			
			
	});
	
	gridHtml += '</div>';
	
	//alert (gridHtml);
	$("#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, 2);
											clickCol =thisid.substr(4, 2);
											//alert(clickRow + ' '  + clickCol);
											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;
	//alert (' toRow = ' + toRow + ' thisRow = ' + thisRow + '\n toCol = ' + toCol + ' thisCol = ' + thisCol ) ;
	
	// Determine distance to move
	//alert();
	changeY = ((parseInt(rowFocus,10) - parseInt(toRow,10)) * (imgHeight + marginY));
	changeX = ((parseInt(colFocus,10) - parseInt(toCol,10)) * (imgWidth + marginX));
	//alert('rowFocus - toRow=' +rowFocus + ' - ' + toRow );
	//alert('colFocus - toCol=' +colFocus + ' - ' + toCol + '\n' + (parseInt(colFocus) - parseInt(toCol)) );
	//alert( parseInt(colFocus) - parseInt(toCol));
	
	$('#gallery').children('div').each(function() {
	
	thisId = $(this).attr('id');
	thisRow = thisId.substr(4, 2);
	thisCol = thisId.substr(1, 2);
	
	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(4, 2);
		thisCol = thisId.substr(1, 2);
		 
		 
		// 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);
				}
						
					
					
		});
		
		
		//alert (toRow + ' ' + toCol + '\n' + rowFocus + ' ' + colFocus);
		
		//if (toCol != colFocus) {
		updateText();	
		//updateTech();
		
		//}
		
		updateGrid();
		//alert(toRow + ' ' + toCol);
		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[parseInt(colFocus,10)]);
var h = parseInt(colFocus,10);
var k = parseInt(rowFocus,10);
var cippa = foto[k][h];


$('#inner .words p').html(cippa);

}

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 Filler(tmp) {
if (tmp < 10) {
	var dummy = '00' + tmp;
	if ( dummy.length > 2 ) 
		dummy = dummy.substr(1,2);
}
else
{
dummy = tmp;
}

return dummy;
}


function goDown() {
gotoRow = Filler(parseInt(rowFocus,10) + 1);
gotoCol = Filler(parseInt(colFocus,10));
//alert(gotoRow + ' ' + gotoCol);
move(gotoRow, gotoCol);
control(-180);
return false;
}

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

}

function goLeft() {
gotoRow = Filler(parseInt(rowFocus,10));
gotoCol = Filler(parseInt(colFocus,10)-1);
//if (gotoCol != colFocus) {
//	gotoRow = '01';
//}
move(gotoRow, gotoCol);
control(-45);
}

function goRight() {
gotoRow = Filler(parseInt(rowFocus,10));
gotoCol = Filler(parseInt(colFocus,10) + 1);
//if (gotoCol != colFocus) {
//	gotoRow = '01';
//}
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(); });


});