$(document).ready(function()
{
    $("div#makeMeScrollable").smoothDivScroll({mouseDownSpeedBooster: 1, autoScrollOnStart: false, visibleHotSpots: "onstart"});

    // drag smallImage
    $(".smallImage").draggable({
        helper: 'clone'
    });
    
    // drop to bigImage
    $(".bigImage").droppable({
        accept: ".smallImage",
        activeClass: 'droppable-active',
        hoverClass: 'droppable-hover',
        drop: function(ev, ui)
        {
            var draggedSrc = ui.draggable.attr("src");
            var draggedId = ui.draggable.attr("name");
            var droppedId = $(this).attr("id").split("bigImage").join("");

            $("#bigImageImg"+droppedId).attr("src", draggedSrc);
            
            //send request to php (register in session)
            $.post("interface/requests/dropImage.php", {imageId: droppedId, imageDBid: draggedId, imageUrl: draggedSrc}, function(data) {
                if('' != data)
                {
                    alert(data);
                }
            });
        },
        onDrag: function() {
        },
        onStop: function() {
        }
    });
});