// starting the script on page load
function bindImagePreviews (){
	/* CONFIG */
	
	xOffset = 5;
	yOffset = 5;
	
	// these 2 variable determine popup's distance from the cursor
	// you might want to adjust to get the right result
		
	/* END CONFIG */
	var currentRequest = null;
	$(".screenshot").hover(function(e){
		//On masque tous les preview Panels
		$(".previewPanel").hide();
		$(".circleLoader").hide();
		link = $(this).parent("a");
		if (link.attr("id") == null || link.attr("id").length == 0) {
			return;
		}
		//On affiche le loader ajax
		
		$("body").append('<img class="circleLoader" src="/img/ajax_loader_circle.gif" style="display: none;position: absolute;">');
		
		$(".circleLoader").css("top",(e.pageY + yOffset+5) + "px").css("left",(e.pageX + xOffset+5) + "px").show();
		
		var event = e;
		
		imgUrl = "/ajax/ImagePreview_ajax_preview.action";
		currentRequest = $.ajax({
			   type: "POST",
			   url: imgUrl,
			   data: "imgAlfrescoId="+link.attr("id"),
			   success: function(msg){
			 	   $("#imgPreview").remove();
		 		   $("#screenshot").remove();
		 		 
		 		   var heightImg = $("#screenshot").height();
		 		   if (heightImg == "Nan" || heightImg == null || heightImg == 0 || heightImg == undefined) {
		 			  heightImg = 200;
		 		   }
		 		   
		 			$("body").append(msg);
			        $("#screenshot")
						.css("top",(event.pageY - yOffset - heightImg) + "px")
						.css("left",(event.pageX + xOffset ) + "px")
						.fadeIn("fast");
			 		
			 	    $(".circleLoader").hide();
			   }
			 });
	},
	
	function(){	
		$("#screenshot").remove();
		$(".circleLoader").hide();
		$(this).removeClass("currentPreview");
		currentRequest.abort();
	});	

	$(".screenshot").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY - yOffset -$("#screenshot").height()) + "px")
			.css("left",(e.pageX + xOffset ) + "px");
		$(".circleLoader").css("top",(e.pageY + yOffset+5) + "px")
		.css("left",(e.pageX + xOffset+5) + "px");
	});	
}

this.tooltip = function(){     
    /* CONFIG */           
            xOffset = 20;
            yOffset = 0;          
            // these 2 variable determine popup's distance from the cursor
            // you might want to adjust to get the right result            
    /* END CONFIG */ 
       
    $(".tooltip").unbind("hover");
    $(".tooltip").unbind("mousemove");
    $(".tooltip").hover(function(e){      
    	
           this.t = this.title;
           this.title = "";                                                                                
           if ($($(this).attr("id")).html().length == 0) {
			   return;
           }
           $($(this).attr("id")).show();
           $($(this).attr("id")).css ("width", "250px");
           if($(this).attr("id") == "#tooltip-brand"){
        	   $($(this).attr("id"))
                .css("top",(e.pageY - yOffset) + "px")
                .css("left",(e.pageX + xOffset) + "px")
                .fadeIn("fast");
           }else{
        	   $($(this).attr("id"))
                .css("top",(e.pageY - yOffset) + "px")
                .css("left",(e.pageX - $($(this).attr("id")).width() - xOffset) + "px")
                .fadeIn("fast");
           }            
    	},
        function(){
                this.title = this.t;           
                $($(this).attr("id")).hide();
    }); 
    $(".tooltip").mousemove(function(e){
    	if($(this).attr("id") == "#tooltip-brand"){
     	   $($(this).attr("id"))
             .css("top",(e.pageY - yOffset) + "px")
             .css("left",(e.pageX + xOffset) + "px");
        }else{
     	   $($(this).attr("id"))
             .css("top",(e.pageY - yOffset) + "px")
             .css("left",(e.pageX - $($(this).attr("id")).width() - xOffset) + "px");
        }
    });                    
};