var titlerevert = '';
$(document).ready(function() {
	$("a.browse").click(function() {
		leftright($(this).attr("id"));
		return false;
	});
	$(".navigate").each(function(i){
		$(this).click(function(){
			$(".navigate").each(function(i) { $(this).css( {color: '', fontWeight: ''} ); }); 
	 		$(this).css( {color: "#F47D30", fontWeight: "bold"} );
			titlerevert = $(this).attr("title");
			$(".item_name").text($(this).attr("title"));
			updown($(this).text());
			return false;
		});
		$(this).mouseover(function(){
			titlerevert = $(".item_name").text();
			$(".item_name").text($(this).attr("title"));
			return false;
		});
		$(this).mouseout(function(){
			$(".item_name").text(titlerevert);
			return false;
		});
	});
});

var coordinate = {'x': 0, 'y': 0};
var distance = {'x': 411, 'y': 400};

function leftright(dir) {
	var increment = (dir == 'dir_left' ? -1 : 1);
	var minimages = 0;
	var maximages = 0;
	var tdelems = document.getElementById('section' + coordinate.y).getElementsByTagName('td');
	for (var i=0; i<tdelems.length; i++) {
		if (tdelems[i].className == 'occupied') maximages++;
	}

	if (coordinate.x + increment >= minimages && coordinate.x + increment < maximages) {
		coordinate.x += increment;
		$('#dir_left').show();
		$('#dir_right').show();

		if (coordinate.x == maximages - 1 || coordinate.x == minimages){
			$('#'+dir).hide();
		}
		move(2);
	}
}

function updown(section) {
	var increment = (section - coordinate.y - 1);

	var hypotenuse = Math.sqrt((coordinate.x * coordinate.x) + (increment * increment));

	coordinate.x = 0;
	coordinate.y += increment;

	var maximages = 0;
	var tdelems = document.getElementById('section' + coordinate.y).getElementsByTagName('td');
	for (var i=0; i<tdelems.length; i++) {
		if (tdelems[i].className == 'occupied') maximages++;
	}

	$('#dir_left').hide();
	$('#dir_right').hide();
	if (coordinate.x < maximages - 1) { $('#dir_right').show(); }
	move(hypotenuse/2);
}

function angular(factor) {
	$(".grid").animate( { marginLeft: (distance.x * -coordinate.x) + 'px' } , 1000);
	$(".grid").animate( { marginTop: (distance.y * -coordinate.y) + 'px' } , 1000);
}

function diagonal(factor) {
	$(".grid").animate( {
		marginLeft: (distance.x * -coordinate.x)  + 'px',
		marginTop: (distance.y * -coordinate.y) + 'px'
	} , (factor * 500));
}

function zoom(factor) {
	$(".grid").animate( {
		fontSize: '.5em',
		marginLeft: (distance.x/4 + (distance.x/2 * -coordinate.x)) + 'px',
		marginTop: (distance.y/4 + (distance.y/2 * -coordinate.y)) + 'px'
	} , 400);
	$(".grid").animate( {
		fontSize: '1em',
		marginLeft: (distance.x * -coordinate.x)  + 'px',
		marginTop: (distance.y * -coordinate.y) + 'px'
	} , 400);
}

function move(factor) {
	diagonal(factor);
}