/*
* Image preview script 
* powered by jQuery (http://www.jquery.com)
* 
* written by Alen Grakalic (http://cssglobe.com)
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.imagePreview = function() {
    /* CONFIG */

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

    /* END CONFIG */
    $("tr.texto").hover(function(e) {
        this.style.backgroundColor = "#BEBEBE";

        if (this.cells.item(0).getAttribute("name") == null) {
            return;
        }
        var imageProperties = this.cells.item(0).getAttribute("name").split("|");
        var imagePath = imageProperties[0];
        var larguraFoto = parseInt(imageProperties[1]);
        var alturaFoto = parseInt(imageProperties[2]);

        $("body").append("<p id='preview' class='tooltip'><img src='" + imagePath + "' alt='Image preview' /></p><p id='preview2' class='tooltip'><img src='img/tooltip-seta.png' style='margin-left:" + (larguraFoto / 2) + "px' /></p>");
        $("#preview")
			.css("top", (e.pageY - alturaFoto - 30) + "px") // 30 é o numero de px que terei entre a imagem e a seta do mouse
			.css("left", (e.pageX - (larguraFoto)) + "px")
			.fadeIn("fast");
        $("#preview2")
			.css("top", (e.pageY - 27) + "px") // 27 é a soma de px da borda(2px top 2px bot) e do padding(5px top 5px bot) do paragrafo da imagem com a altura da seta(10px) somando 3px
			.css("left", (e.pageX - (larguraFoto / 2) - 39) + "px")
			.fadeIn("fast");
    },
	function() {
	    $("#preview").remove();
	    $("#preview2").remove();
	});
    $("tr.texto").mousemove(function(e) {
        this.style.backgroundColor = "#BEBEBE";

        if (this.cells.item(0).getAttribute("name") == null) {
            return;
        }
        var imageProperties = this.cells.item(0).getAttribute("name").split("|");
        var imagePath = imageProperties[0];
        var larguraFoto = parseInt(imageProperties[1]) / 2;
        var alturaFoto = parseInt(imageProperties[2]);

        $("#preview")
			.css("top", (e.pageY - alturaFoto - 30) + "px") // 30 é o numero de px que terei entre a imagem e a seta do mouse
			.css("left", (e.pageX - (larguraFoto)) + "px");
        $("#preview2")
			.css("top", (e.pageY - 27) + "px") // 27 é a soma de px da borda(2px top 2px bot) e do padding(5px top 5px bot) do paragrafo da imagem com a altura da seta(10px) somando 3px
			.css("left", (e.pageX - (larguraFoto / 2) - 39) + "px");
    });

    $("tr.texto").mouseout(function(e) {
        if (this.getAttribute("name").indexOf("impar") > 0) {
            this.style.backgroundColor = "#f4f4f4";
        }
        else {
            this.style.backgroundColor = "#ededed";
        }
    });
};


// starting the script on page load
$(document).ready(function() {
    imagePreview();
});