var Animal = function(canMovePoints, animalName){
	this.canMovePoints = canMovePoints;
	this.images = new Array(2);
	this.images[0] = new Image();
	this.images[0].src = animalName + '_a.png';
	this.images[0].className = 'a';
	this.images[1] = new Image();
	this.images[1].src = animalName + '_b.png';
	this.images[1].className = 'b';
};

var animals = {
	chick : new Animal([{x:0,y:1}], 'chick'),
	giraffe : new Animal([{x:0,y:1}, {x:0,y:-1}, {x:1,y:0}, {x:-1,y:0}], 'giraffe'),
	elephant : new Animal([{x:1,y:1}, {x:1,y:-1}, {x:-1,y:1}, {x:-1,y:-1}], 'elephant'),
	lion : new Animal([{x:0,y:1}, {x:0,y:-1}, {x:1,y:0}, {x:-1,y:0}, {x:1,y:1}, {x:1,y:-1}, {x:-1,y:1}, {x:-1,y:-1}], 'lion'),
	chicken : new Animal([{x:0,y:1}, {x:1,y:0}, {x:-1,y:0}, {x:1,y:1}, {x:-1,y:1}, {x:0,y:-1}], 'chicken')
};

function getAnimalName(img) {
	var src = img.src;
	return src.substring(src.lastIndexOf('/') + 1, src.lastIndexOf('_'));
}
function isReverse(img) {
	var src = img.src;
	return src.substring(src.lastIndexOf('_')) == '_b.png';
}
function convertPoint(index){
	return {x : index % 3, y : Math.floor(index / 3)};
}
function canMove(origin, target, canMovePoints, reverse) {
	var a = reverse ? -1 : 1;
	for(var i=0; i<canMovePoints.length; i++){
		var p = canMovePoints[i];
		if(origin.x + p.x == target.x && origin.y + p.y * a == target.y){
			return true;
		}
	}
	return false;
}

var optDropzone = {
	tolerance: 'pointer',
	hoverClass: 'dragenter',
	accept: function(draggable) {
		var parent = draggable.parent().get(0);
		var targetImgs = $(this).find('img');
		if(!parent){
			return false;
		}
		if(parent.nodeName.toLowerCase() == 'td'){
			var movingImg = draggable.get(0);
			var reverse = isReverse(movingImg);
			if(targetImgs.size() > 0) {
				if(isReverse(targetImgs.get(0)) == reverse){
					return false;
				}
			}
			
			var origin = convertPoint($('td').index(parent));
			var target = convertPoint($('td').index($(this)));
			var points = animals[getAnimalName(movingImg)].canMovePoints;
			return canMove(origin, target, points, reverse);
		}
		
		return targetImgs.size() == 0;
	},
	drop: function(e, ui) {
		var reverse = isReverse(ui.draggable[0]);
		
		var catchingImgs = $(this).find('img');
		if(catchingImgs.length > 0){
			var catchingImg = catchingImgs.get(0);
			var catchingAnimalName = getAnimalName(catchingImg);
			if(catchingAnimalName == 'lion'){
				alert('キャッチ！！');
				draggableSetter.clear();
				return;
			}
			catchingImgs.remove();
			if(catchingAnimalName == 'chicken'){
				catchingAnimalName = 'chick';
			}
			var catchedImg = $(animals[catchingAnimalName].images[reverse ? 1 : 0]).clone().draggable(optDraggable);
			$('#area_' + (reverse ? 'b' : 'a')).append(catchedImg);
		}
		
		var animalName = getAnimalName(ui.draggable[0]);
		var lionPoint = convertPoint($('td').index($(this)));
		var ahead = (reverse && lionPoint.y == 0 || !reverse && lionPoint.y == 3);
		
		if(ahead && animalName == 'lion' && checkTry(lionPoint, reverse)){
			alert('トライ！！');
			$(this).append($(ui.draggable));
			draggableSetter.clear();
			return;
		}
		
		if(ahead && animalName == 'chick'){
			$(ui.draggable).remove();
			$(this).append($(animals['chicken'].images[reverse ? 1 : 0]).clone().draggable(optDraggable));
		} else {
			$(this).append($(ui.draggable));
		}
		draggableSetter.next();
	}
}

function checkTry(lionPoint, reverse){
	var isTry = true;
	$('td img.' + (reverse ? 'a' : 'b')).each(function(){
		var imgAnimalName = getAnimalName(this);
		var imgPoint = convertPoint($('td').index($(this).parent()));
		var points = animals[imgAnimalName].canMovePoints;
		if(canMove(imgPoint, lionPoint, points, !reverse)){
			isTry = false;
			return false;
		}
	});
	return isTry;
}

var optDraggable = {
	opacity: 0.5,
	cursor: 'pointer',
	stop: function(e, ui) {
		$(ui.helper).css({
			left: 0, top: 0
		});
	}
}

var draggableSetter = {
	reverse : false,
	init : function(){
		$('img.b').draggable(optDraggable).draggable('enable');
		$('img.a').draggable(optDraggable).draggable('disable');
	},
	next : function(){
		this.reverse = !this.reverse;
		$('img.' + (this.reverse ? 'a' : 'b')).draggable('enable');
		$('img.' + (this.reverse ? 'b' : 'a')).draggable('disable');
	},
	clear : function(){
		$('img.' + (this.reverse ? 'a' : 'b')).draggable('disable');
	}
};

$(function() {
	$('table tr td').droppable(optDropzone);
	draggableSetter.init();
});