var Stoppos = "";
$("#test").draggable({
    containment: $('div'),
    stop: function(event, ui) {

        window.Stoppos = $(this).position();
    }
});

var Print = {
	_check:function (val) {
		var result = "";
		for (var i = 0; i<val.length; i++) {
			var code = val.charCodeAt(i);
			switch(code) {
				case 0x0A:	result += "<br />";		break;
				case 0x21:	result += "&#33;";		break;
				case 0x27:	result += "&#39;";		break;
				case 0x26:	result += "&amp;";		break;
				case 0x3C:	result += "&lt;";		break;
				case 0x3E:	result += "&gt;";		break;
				case 0x22:	result += "&quot;";		break;
				case 0x0D:	result += "";			break;
				default:	result += ((code>0x80&&code<0xC0)||code>0x500)?"&#"+code+";":val.charAt(i);break;
			}
		}
		return result;
	},
	Event:function (value, box) {
		if (value.length > 100) {return false;}
		return document.getElementById(box).innerHTML = Print._check(value);
	}
};

$('textarea#text').keyup(function(){
   $("span#test").text($(this).val());
   $("spanp#test").css("width",(($('.example').width())-($(this).width())));
   //alert($('span#test').width());

$("div.example").css("width",$("img#pic").width());
$("div.example").css("height",$("img#pic").height());

var tt = $("div.example").position();
//$("#test").css({ "top": (tt.top+($("div.example").css("height")/2)), "left": "100px" });
var hh = $("div.example").css("height");
var h = hh.substring(0, hh.length - 2);

var ww = $("div.example").css("width");
var ww2 = $("span#test").css("width");
var w = ww.substring(0, ww.length - 2);
var w2 = ww2.substring(0, ww2.length - 2);
$("#test").css({ "top": -h/2, "left": (w-w2)/2 });
});

$("a#loadpic").click(function() {
$("div.example").append($("<img id='pic'>").attr("src",$("textarea#url").val()));
$("div.example").css("width",$("img#pic").width());
$("div.example").css("height",($("img#pic").height()));
});

$("a.change-font-size").click(function() {
   $("span#test").css("font-size",$(this).attr('id'));
    //alert($(this).attr('id'));
   //alert($('span#test').width());        
});

$("a#getcoords").click(function() {
var t = $("div.example").position();
var img = $("img#pic").attr('src');
var text = $("span#test").text();
var size = $("span#test").css("font-size").substring(0,  $("span#test").css("font-size").length - 2);
Stoppos = $("#test").position();
var tw = $("span#test").height();
//alert("Coord: left="+(Stoppos.left-t.left)+"; top="+(Stoppos.top-t.top+tw)+img+text);

$.ajax({
  url: 'generate_pic.php',
  type: 'POST',
  dataType: 'xml/html/script/json/jsonp',
  data: {x: (Stoppos.top-t.top+tw), y: (Stoppos.left-t.left), src: img, text: text, size: size},
  success: function(data, textStatus, xhr) {
	alert(data);
    $('div#href').html('<img src="http://test1.ru/back/'+data+'" />');
  },
  error: function(xhr, textStatus, errorThrown) {
    $('div#href').html('<img src="http://test1.ru/back/'+xhr.responseText+'" />');
  }
});



});

$(document).ready(function() {

$("div.example").css("width",$("img#pic").width());
$("div.example").css("height",$("img#pic").height());


});