/*
* Url 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.screenshotPreview = function () {
    /* CONFIG */

    //xOffset = 10;
    //yOffset = 30;
    xOffset = 250;
    yOffset = -150;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.screenshott").hover(function (e) {
        title2 = $(this).attr("title");
        tabindex = $(this).attr("rev");
        s1 = $(this).attr("s1");
        s2 = $(this).attr("s2");
        s3 = $(this).attr("s3");
        s4 = $(this).attr("s4");
        r1 = $(this).attr("r1");
        r2 = $(this).attr("r2");
        r3 = $(this).attr("r3");
        r4 = $(this).attr("r4");
        col = $(this).attr("col");
        cssClass = 'v3';
        if (r4 != '')
            cssClass = 'v2';
        else if (r3 == '')
            cssClass = 'v4';
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";

        var hideShades = ((s1 == "")
            && (s2 == "")
                && (s3 == "")
                    && (s4 == "")
                        && (r1 == "")
                            && (r2 == "")
                                && (r3 == "")
                                    && (r4 == ""));

        //$("body").append("<div class='screenshot'><img src='"+ this.rel +"' alt='url preview' /><h4>" + tabindex +"</h4><p>"+ title2 +"</p></div>");
        $("body").append("<div class='screenshot " + cssClass + "'><h4>" + col + "</h4><p>" + tabindex + "</p><p>" + title2 + "</p>" +
            (hideShades ? "" : "<ul><li><p>Starting color:</li><li><img src='" + s1 + "' alt='url preview' /></li><li><img src='" + s2 + "' alt='url preview' /></li><li><img src='" + s3 + "' alt='url preview' /></li><li><img src='" + s4 + "' alt='url preview' /></li></ul><ul><li><p>Resulting color:</li><li><img src='" + r1 + "' alt='url preview' /></li><li><img src='" + r2 + "' alt='url preview' /></li><li><img src='" + r3 + "' alt='url preview' /></li><li><img src='" + r4 + "' alt='url preview' /></li></ul>")
            + "</div>");
        $(".screenshot img").each(function () {
            if ($(this).attr('src') == '') {
                $(this).remove();
            }
        })
        $(".screenshot")
		.css("height", "215px")
		.css("padding-left", "35px")
		.css("padding-top", "25px")
			.css("top", (e.pageY - xOffset) + "px")
			.css("left", (e.pageX + yOffset) + "px")
			.css("position", "absolute")
			.css("z-index", "1000")
			.fadeIn("fast");

        $(".screenshot.v2")
		.css("height", "237px")
			.css("top", (e.pageY - xOffset - 30) + "px");

        $(".screenshot.v3")
		.css("height", "180px")
			.css("top", (e.pageY - xOffset + 35) + "px");

        $(".screenshot.v4")
		.css("height", "155px")
			.css("top", (e.pageY - xOffset + 65) + "px");
    },
	function () {
	    this.title = this.t;
	    $(".screenshot").remove();
	});
    $("a.screenshott").mousemove(function (e) {
        $(".screenshot")
			.css("top", (e.pageY - xOffset) + "px")
			.css("left", (e.pageX + yOffset) + "px");
        $(".screenshot.v2")
			.css("top", (e.pageY - xOffset - 30) + "px");
        $(".screenshot.v3")
			.css("top", (e.pageY - xOffset + 35) + "px");
        $(".screenshot.v4")
			.css("top", (e.pageY - xOffset + 65) + "px");
    });
};


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