var layers = {};
var currentLayer = 0;
var currentSelected = -1;

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

$(document).ready(function(){
	var out = $("#out");
	out.append("Bem-vindo ao Lua Editeur TFM.");
	$('#add-image').click(function(){
		var imageUrl = $('#url-input').val().replace(' ','');
		$('#url-input').css('box-shadow', '');
		if (imageUrl.length == 0) {
			$('#url-input').css('box-shadow', '0px 0px 2px 1px #FF0000');
		}
		else {
			newImage(imageUrl);
			$('#url-input').val('');
		}
	});
	$('#duplicate').click(function(){
		var imageUrl = $('img[tfmimg='+currentSelected+']').attr('src');
		var coord = $('img[tfmimg='+currentSelected+']').offset();
		var offset = $("#map-area").offset();
		var x = parseInt(coord.left)-parseInt(offset.left);
		var y = parseInt(coord.top)-parseInt(offset.top)
		newImage(imageUrl, true, x, y);
	});
	$('#delete').click(function(){
		var imageLayer = parseInt($('img[tfmimg='+currentSelected+']').css('z-index'));
		$('img[tfmimg='+currentSelected+']').attr('deleted', '1');
		$('img[tfmimg='+currentSelected+']').css('visibility', 'hidden');
		for (i = imageLayer+1; i <= Object.keys(layers).length; ++i){
			var z = $(layers[i]).css('z-index');
			if (isNaN(z)){
			}
			else {
				$(layers[i]).css('z-index', z-1);
			};
			currentSelected = i;
		};
		updateProperties('img[tfmimg='+currentSelected+']');
		$('img[tfmimg='+currentSelected+']').addClass('active');
	});
	$('#get-xml').click(function(){
		generateXml();
	});
	$('#image-z').change(function() {
		var newLayer = parseInt($(this).val());
		$(this).val(newLayer);
		var success = changeImageLayer('img[tfmimg='+currentSelected+']', newLayer);
		updateProperties('img[tfmimg='+currentSelected+']');
	});
	$('#image-x').change(function() {
		var x = $(this).val();
		var offset = $("#map-area").offset();
		$('img[tfmimg='+currentSelected+']').offset({left: parseInt(x)+parseInt(offset.left)});
		updateProperties('img[tfmimg='+currentSelected+']');
	});
	$('#image-y').change(function() {
		var y = $(this).val();
		var offset = $("#map-area").offset();
		$('img[tfmimg='+currentSelected+']').offset({top: parseInt(y)+parseInt(offset.top)});
		updateProperties('img[tfmimg='+currentSelected+']');
	});
	$(document).on('click', 'img[tfmimg]', function(){
		$('img[tfmimg='+currentSelected+']').removeClass('active');
		$(this).addClass('active');
		currentSelected = $(this).attr('tfmimg');
		updateProperties(this);
	})
	$(document).keydown(function(event) {
		var tag = event.target.tagName.toLowerCase();
		if (tag == 'input' || tag == 'textarea'){
			return
		};
		if (currentSelected > -1){
			var key = event.which;
			var offset = $("#map-area").offset();
			var y = parseInt($('#image-y').val());
			var x = parseInt($('#image-x').val());
			if (key == 39){
				// right
				$('img[tfmimg='+currentSelected+']').offset({left: (x+1)+parseInt(offset.left)});
			}
			else if (key == 37){
				// left
				$('img[tfmimg='+currentSelected+']').offset({left: (x-1)+parseInt(offset.left)});
			}
			else if (key == 38){
				// up
				$('img[tfmimg='+currentSelected+']').offset({top: (y-1)+parseInt(offset.top)});
			}
			else if (key == 40){
				// down
				$('img[tfmimg='+currentSelected+']').offset({top: (y+1)+parseInt(offset.top)});
			};
		updateProperties('img[tfmimg='+currentSelected+']');
		}
	});
});

function newImage(imageUrl, duplicate, x, y){
	currentLayer += 1;
	$('#map-area').append('<img tfmimg="'+currentLayer+'" class="image-object" src="'+imageUrl+'" />')
	var newElement = $('#map-area').find('img[tfmimg='+currentLayer+']')[0];
	var offset = $("#map-area").offset();
	if (duplicate){
		$(newElement).offset({top: y, left: offset.left+x+40});
	}
	else {
		$(newElement).offset({top: offset.top+100, left: offset.left+400});
	}
	$(newElement).css('z-index', currentLayer);
	$(newElement).draggable({
		container: '#area',
		start: function(){
			$('img[tfmimg='+currentSelected+']').removeClass('active');
			$(this).addClass('active');
			currentSelected = $(this).attr('tfmimg');
		},
		drag: function(){
			updateProperties(this);
		},
	});
	layers[currentLayer] = 'img[tfmimg='+currentLayer+']';
};

function updateProperties(image){
	var coord = $(image).offset();
	var width = $(image).width();
	var height = $(image).height();
	var offset = $("#map-area").offset();
	$("#image-dimensions").val(width+"x"+height);
	$("#image-x").val(parseInt(coord.left)-parseInt(offset.left));
	$("#image-y").val(parseInt(coord.top)-parseInt(offset.top));
	$("#image-z").val(parseInt($(image).css('z-index')));
}

function generateXml(){
	var out = $("#out");
	var offset = $("#map-area").offset();
	var tag = "";
	out.append("<p align='center'><font color='#ffcc00'>Script:</font></p>");
	var currentLayer = {};
	$('img[tfmimg]').each(function(){
		var attr = $(this).attr('deleted');
		var position = $(this).offset();
		var src = $(this).attr('src').replace('http://transformice.com/images/','');
		var z = parseInt($(this).css('z-index'));
		var x = parseInt(position.left)-parseInt(offset.left);
		var y = parseInt(position.top)-parseInt(offset.top);
		if (attr != '1') {
			out.append("tfm.exec.addImage("+src+", "&1", "+x+", "+y+", 'nome do jogador') ");
		}
		else {

		}
	});
	var len = Object.keys(currentLayer).length;
	for (i in currentLayer){
		tag += currentLayer[len];
		len -= 1;
	}
}

function changeImageLayer(image, layer){
	var layer = parseInt(layer);
	var oldlayer = parseInt($(image).css('z-index'));
	if (!(typeof layers[layer] === 'undefined')){
		$(layers[layer]).css('z-index', oldlayer);
		layers[oldlayer] = layers[layer];
		layers[layer] = image;
	}
	else {
		$('#image-z').val(oldlayer);
	}
	$(image).css('z-index', layer);
	updateProperties(image);
	return true;
}