$(document).ready(function() {

    $(".moveable").draggable({ grid: [10, 10] }, { containment: "parent" });
    $("#props").draggable({ handle: ".title" }, { containment: "window" });

    $("#background").click(function() {
        $("#props").show();

        $("#props").find("#control_id").text($(this).attr('id'));
        $("#props").find("#width").val($(this).width());
        $("#props").find("#height").val($(this).height());

    });

    $("#background #content").click(function(evt) {
        evt.stopPropagation();

        $("#props").show();

        $("#props").find("#control_id").text($(this).attr('id'));
        $("#props").find("#width").val($(this).width());
        $("#props").find("#height").val($(this).height());

    });

    $("#background #content .moveable").click(function(evt) {
        evt.stopPropagation();

        $("#props").show();

        $("#props").find("#control_id").text($(this).attr('id'));
        $("#props").find("#width").val($(this).width());
        $("#props").find("#height").val($(this).height());

    });


    $(".title .close").click(function(evt) {
        evt.stopPropagation();

        $(this).parent(this).parent(this).hide();
    });

    $(".moveable").mouseover(function() {
        $(this).find(".tools").show();
    });

    $(".moveable").mouseout(function() {
        $(this).find(".tools").hide();
    });

    var startPos;

    $(".moveable").mousedown(function() {
        startPos = $(this).position();
    });

    $(".moveable").mouseup(function() {
        var cPos = $("#content").position();
        var oPos = $(this).position();

        if ((startPos.left != oPos.left) || (startPos.top != oPos.top)) {
            alert('setting position\nx:' + (oPos.left - cPos.left) + '\ny:' + (oPos.top - cPos.top));
        }
    });

});