$(document).ready(function(){
	tagsInitImage('image');
	var image = 'image';

	$.getJSON($('#jsonFile').val(),
		function(data){
		$.each(data, function(i,item){
			createTag('image', $('#'+image).width()*item.x, $('#'+image).height()*item.y, item.label, item.plak, item.editable, item.id);
			});
		$('#image .tag').draggable( "disable" );
	});

	$('#loadTags').click(function() {
		$(this).hide();
		loadTags('tags.json', 'image');
		});

	$('#exportTags').click(function() {
		alert(exportTags('image'));
		});

	$('#editTags').click(function (){
		tagsEnableEditMode('image');
		$(this).hide();
		$('#saveTags').show();
		});


	$('#saveTags').click(function (){
		$('#imgTagLoadingDiv').show();
		$(this).hide();
		tagsDisableEditMode('image');
		$('#editTags').show();
		$('#imgTagLoadingDiv').hide();

			var exportjson = '[';
		$('.tag').each(function() {
			exportjson += '{ "label":"'+jsonSpecialChars($(this).attr('data-label'))+'", "plak":"'+$(this).attr('data-plak')+  '", "x":'+parseInt($(this).css('left'))/$('#image').width()+', "y":'+parseInt($(this).css('top'))/$('#image').height()+', "id":'+$(this).attr('data-id')+' },';
			});
			exportjson = exportjson.substring(0,exportjson.length-1);
		exportjson += ']';
		$.post("rpc/tagging",{
    data: exportjson,
    image_id :$('#imageId').val()
});
		});

	$('#image').click(function(e){
		if(isTagAddable('image') && isTagEditMode('image')) {
			disableTagAddable('image');
			$('#imgTagEditDiv').show();
		//	$('#imgTagEditPlaks').html('');
			$('#imgTagEditLabel').val('');
		//	$('#imgTagEditPlaks').val('');
			$('#imgTagEditConfirm').attr('data-x', (e.pageX-$(this).offset().left));
			$('#imgTagEditConfirm').attr('data-y', (e.pageY-$(this).offset().top));
			}
		});

	$('#image').hover(function() {
		$('#image .tag').show();
		},
		function() {
		if(!isTagEditMode('image')) $('#image .tag').hide();
		});

	$('#imgTagEditConfirm').click(function() {
		enableAddTags('image');
		$('#imgTagEditDiv').hide();
		createTag('image',$(this).attr('data-x'), $(this).attr('data-y'), $('#imgTagEditLabel').val(), $('#imgTagEditPlaks').val(), true, -1);
		});
	$('#imgTagEditCancel').click(function() {
		enableAddTags('image');
		$('#imgTagEditDiv').hide();
		});
	$('a.tagPlak').mouseover(function() {
		$('#'+this.title).fadeIn();
		});
	$('a.tagPlak').mouseout(function() {
		$('#'+this.title).hide();
		});
	});