$(document).ready(function(){
	$("#overlay").pngFix(); 
	var rowFocus = 1;
	var colFocus = rand(1,7);
var nextCol = colFocus;
var nextRow = rowFocus;
var offsetX = 250;
var offsetY = 20;
var imgHeight = 400;
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 = '<div class="col">';
var disab= false;
var valid = false;

var col_actual = 0;
var fila_actual = 0;


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.8'});
			}
			
			// 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(0,rowFocus);
	//updateText(colFocus,toRow);
	//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) {
			//alert(colFocus);
			updateText(colFocus,toRow);	
			//updateTech();
		
		}else{
			insert_trabajo(rowFocus,toRow);
		}
		
		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(previo,row_act) {
	
	$('#inner .words').animate({ opacity: 0}, halfInterval, function() {
							insertText(previo,row_act);
							//insertTitle();						
							$('#inner .words').animate({ opacity: 1}, halfInterval);										
	});

}

function insertText(previo,row_act) {
	$('#cont_'+previo).css('display', "none");
	$('#cont_'+previo+" ul").css('display', "none");
	
	$('#cont_'+colFocus).css('display', "inline");	
	$('#cont_'+colFocus+" .fila_"+row_act).css('display', "inline");
}

function insert_trabajo(previo, actual){
	//alert("Previo " +previo);
	//alert("Actual " +actual);
	$('#cont_'+colFocus+" .fila_"+previo).css('display', "none");
	$('#cont_'+colFocus+" .fila_"+actual).css('display', "inline");
}


function insertTitle() {
	//$('#inner .words h2').css('display', title[colFocus]);
	//$('#inner .words h2').html(title[colFocus]);
}

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(); });


});

function rand(l,u) // lower bound and upper bound
 {
     return Math.floor((Math.random() * (u-l+1))+l);
 }