/*
 * 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 */

    xOffset = 10;
    yOffset = -150;
    //marginTop = -150;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
    //			.css("left", (e.pageX + yOffset) + "px")
    //			.css("left", (e.pageX + yOffset) + "px");
    //.fadeIn("fast");

    var galleryLeft;
    var galleryWidth;
    var previewLeft;
    var topPosition;
    var bottomPosition;
    var windowHeight;
    var windowScrollTop;
    var windowScrollBottom;
    var previewHeight;

    function setGalleryPosition() {
        galleryLeft = $(".gallery").offset().left;
        galleryWidth = $(".gallery").width();
        previewLeft = galleryLeft + galleryWidth;
    }

    function setPreviewPosition(e, rowOffset, colOffset, img) {
        previewHeight = $("#preview").height();
        previewHeight = (previewHeight ? previewHeight + 10 : 400);
        if (previewHeight < 100)
            previewHeight = 400;
        //alert(previewHeight);
        //topPosition = e.pageY; // + yOffset; // -xOffset;
        topPosition = rowOffset - (previewHeight / 2);

        if (typeof useColOffset != "undefined" && useColOffset == 1)
            previewLeft = colOffset;

        bottomPosition = topPosition + previewHeight; //+ imageHeight; // + yOffset + 1000; // $("#preview").height + 1000; // -xOffset;
        windowHeight = $(window).height();
        windowScrollTop = $(window).scrollTop();
        windowScrollBottom = $(window).scrollTop() + windowHeight;
        if (bottomPosition > (windowScrollBottom)) {
            topPosition = (windowScrollBottom - previewHeight)
        }
        if (topPosition < windowScrollTop)
            topPosition = windowScrollTop;

        if ($(img).hasClass("showbelow")) {
            topPosition = $(img).offset().top + $(img).height() + 5;
            previewLeft = galleryLeft + galleryWidth - $("#preview").width();
        }

    }

    //alert('galleryLeft:' + galleryLeft + '\r\ngalleryWidth:' + galleryWidth + '\r\npreviewLeft:' + previewLeft);

    /* END CONFIG */
    //$("a.preview").hover(function(e) {
    $(".gallery a").hover(function (e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='" + this.href + "' alt='Sample'/>" + c + "</p>");

        var rowOffset = $(this).offset().top;
        var colOffset = $(this).offset().left;
        var img = $(this);
        
        setGalleryPosition();
        setPreviewPosition(e, rowOffset, colOffset, img);

        //        var topPosition = e.pageY + yOffset; // -xOffset;
        //        var bottomPosition = e.pageY + yOffset + $("#preview").height; // -xOffset;
        //        if (bottomPosition > ($(window).scrollTop() + $(window).height()))
        //            bottomPosition = ($(window).scrollTop() + $(window).height());
        //        if (topPosition < $(window).scrollTop())
        //            topPosition = ($(window).scrollTop());
        //alert(leftPosition);

        $("#preview")
            .css("top", (topPosition) + "px")
            .css("left", (previewLeft) + "px")
            .hide();
    },
	function() {
	    this.title = this.t;
	    $("#preview").remove();
	});

    //var imageHeight = 500;
    $(".gallery a").mousemove(function(e) {

        var rowOffset = $(this).offset().top;
        var colOffset = $(this).offset().left + $(this).width() + 5;
        var img = $(this);

        setGalleryPosition();
        setPreviewPosition(e, rowOffset, colOffset, img);
        //alert($(this).offset().top);
        //        alert('topPosition:' + topPosition
        //            + '\r\nbottomPosition:' + bottomPosition
        //            + '\r\nwindowHeight:' + windowHeight
        //            + '\r\npreviewLeft:' + previewLeft
        //            + '\r\npreviewHeight:' + previewHeight
        //            + '\r\nwindowScrollTop:' + windowScrollTop
        //            + '\r\nwindowScrollBottom:' + windowScrollBottom
        //            + '\r\npreviewHeight:' + previewHeight);
        //alert(leftPosition);
        $("#preview")
			.css("top", (topPosition) + "px")
			.css("left", (previewLeft) + "px")
        	.fadeIn('fast')
        //previewHeight = $("#preview").height();
        //alert(previewHeight);
    });

};


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