var shared_url = "http://www.aesge.fr";
var prevent_shadow_remove = false;
var title = "Drag & Share";

$(function()
{

$(".dragsharable").mouseenter(function(){
    draggable_add_shadow($(this));
});

$("#targets li").droppable({
  tolerance: "pointer",
  //show info when over target
  over: function() {
    $(".dts_share", "#targets").remove();
    $("<span>").addClass("dts_share").text("Partager sur " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
  },
  drop: function() {
    var id = $(this).attr("id"),
	baseUrl = $(this).find("a").attr("href");

    if (id.indexOf("twitter") != -1) {
      window.location.href = baseUrl + "/home?status=" + title + ": " + shared_url;
    } else if (id.indexOf("delicious") != -1) {
      window.location.href = baseUrl + "/save?url=" + shared_url+ "&title=" + title;
    } else if (id.indexOf("facebook") != -1) {
      window.location.href = baseUrl + "/sharer.php?u=" + shared_url+ "&t=" + title;
    }
  }		  
});


});


function draggable_add_shadow(target){

var draggable_shadower = '<div id="draggable_shadower"><div id="shadower_n" class="shadower_bg"></div><div id="shadower_ne" class="shadower_bg"></div><div id="shadower_e" class="shadower_bg"></div><div id="shadower_se" class="shadower_bg"></div><div id="shadower_s" class="shadower_bg"></div><div id="shadower_sw" class="shadower_bg"></div><div id="shadower_w" class="shadower_bg"></div><div id="shadower_nw" class="shadower_bg"></div><div id="shadower_content"></div></div>';

    var x_= target.offset().left,
    y_ = target.offset().top,
    h_ = target.height(),
    w_ = target.width();
    $(draggable_shadower).css({"left" : x_, "top" : y_, "width" : w_, "height" : h_}).mouseleave(draggable_remove_shadow).appendTo("body");
    var clonee = target.clone();
    make_draggable(clonee);
    clonee.addClass("draggable").appendTo("#shadower_content");
}

function make_draggable(target){
    target.draggable({
        helper: function() {
            var img_src = target.attr("src");
            return $("<div></div>").attr("id", "helper").html("<span>" + title + '</span><img id="thumb" src="'+img_src+'">').appendTo("body");
        },
        cursor: "pointer",
        cursorAt: { left: -10, top: 20 },
        zIndex: 99999,
        //show overlay and targets
        start: function() {
            prevent_shadow_remove = true;
            $("<div></div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
            $("#tip").remove();
            $(this).unbind("mouseenter");
            $("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
        },
        //remove targets and overlay
        stop: function() {
            $("#targets").slideUp();
            $(".dts_share", "#targets").remove();
            $("#overlay").remove();
            $(this).bind("mouseenter", createTip);
            prevent_shadow_remove = false;
            draggable_remove_shadow();
        }
    });

	target.bind("mouseenter", createTip).mousemove(function(e) {
		$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
	}).mouseleave(function() {	
		$("#tip").fadeOut(300, function(){$("#tip").remove()});
		draggable_remove_shadow();
	});
}

function draggable_remove_shadow(){
    if(!prevent_shadow_remove)
        $("#draggable_shadower").remove();
}

function createTip(e){
    //create tool tip if it doesn't exist
        ($("#tip").length === 0) ? $("<div></div>").html('<span>Drag this image to share the page</span><span class="arrow"></span>').attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(500) : null;
};