(function($) {

    var $document = $(document);
    var $clipart_block = $('.sys_clipart_container.clipart');
    var $draggable_element = null;

    $document.off('builder.clipart.draggabler');
    $document.on('builder.clipart.draggabler',function(){
        $('.sys_clipart_container .clipart_item').draggable({
            appendTo: '.sys_clipart_container.clipart',
            helper: "clone",
            scope: "canvas",
            start: function(){
                $draggable_element = $('.clipart_item.ui-draggable-dragging');
                $draggable_element.css('background', 'url(' + $draggable_element.attr('normal_url') + ') no-repeat');/**/
            },
            stop:function(){
                $document.trigger('builder.design.updated');
            }
        });

        $('.sys_builder .sys_builder_container .builder_area').droppable({
            activeClass: "green",
            hoverClass: "hover",
            scope: "canvas",
            drop: function(event, ui){
                var $draggable = $(ui.draggable);
                $document.trigger('builder.canvas.init',[
                    $draggable.attr('clipart_id'),
                    $draggable.attr('normal_url')
                ]);
            }
        });
    });

})(SWjQuery);