/**
 * HTML5 Drag & Drop with feedback images
 */
$(document).ready(function() {

    // Set up the draggable element.
    $('#feedback_image .drag_delegates')
        .bind('dragstart', function(ev) {
            if (!$(ev.target).hasClass('dragme')) return true;

            var dt = ev.originalEvent.dataTransfer;
            dt.setData("Text", "Dropped " + ev.target.id);
            
            switch (ev.target.id) {

                case 'imgdrag0':
                    // Do nothing - an image of the draggable element will be
                    // used automatically..
                    break;

                case 'imgdrag1':
                    // Use the title for the section as a feedback image
                    dt.setDragImage( $('#feedback_image h2')[0], 0, 0);
                    break;
                
                case 'imgdrag2':
                    // Use the Firefox logo from the header.
                    dt.setDragImage( $('#logo')[0], 32, 32); 
                    break;

                case 'imgdrag3':
                    // Draw a triangle on a canvas and use that as feedback.
                    var canvas = document.createElement("canvas");
                    canvas.width = canvas.height = 50;

                    var ctx = canvas.getContext("2d");
                    ctx.lineWidth = 8;
                    ctx.moveTo(25,0);
                    ctx.lineTo(50, 50);
                    ctx.lineTo(0, 50);
                    ctx.lineTo(25, 0);
                    ctx.stroke();

                    dt.setDragImage(canvas, 25, 25);
                    break;

            }

            return true;
        });

    // Set up the drop zone.
    $('#feedback_image .drophere')

        // Update the drop zone class on drag enter/leave
        .bind('dragenter', function(ev) {
            if (!$(ev.target).hasClass('drophere')) return true;

            $(ev.target).addClass('dragover');
            return false;
        })
        .bind('dragleave', function(ev) {
            if (!$(ev.target).hasClass('drophere')) return true;

            $(ev.target).removeClass('dragover');
            return false;
        })

        // Allow drops of any kind into the zone.
        .bind('dragover', function(ev) {
            if (!$(ev.target).hasClass('drophere')) return true;
            return false;
        })

        // Handle the final drop...
        .bind('drop', function(ev) {
            if (!$(ev.target).hasClass('drophere')) return true;

            var dt = ev.originalEvent.dataTransfer;
            $.log('#feedback_image .messages', 
                dt.getData("Text") + ' onto ' + ev.target.id);
            ev.stopPropagation();
            return false;
        });

});