/*
* 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 = -20;
    yOffset = -130;*/

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

    /* END CONFIG */
    $("img.MediaPreview").live("mouseover", function(e) {
        this.t = this.title;

        this.title = "";
        var image = this.src.replace("/thumb/", "/preview/");
        var img = $(this);
        var pos = img.position();

        var c = (this.t != "") ? "<br /><span id='PreviewDescription' style='display:none;'>" + this.t + "</span>" : "";

        var relw = $(this.parentNode.parentNode).position().left;
        var relh = $(this.parentNode.parentNode).position().top;
        $(this.parentNode.parentNode)
            .css("overflow", "visible")
        $(this.parentNode.parentNode.parentNode).append("<div id='MediaPreview'><span id='LoadingPreview'>Loading Preview<br /><img src='/images/preview_loader.gif' alt='Loading Preview' style='padding:10px 0;' /></span><img src='" + image + "' alt='Image Preview' id='HoverPreview' style='display:none; padding:0 0 10px 0;' onload='positionPreview(" + relw + ", " + relh + ")' />" + c + "</div>");

        // position initial loading box
        if (relh < 200) {
            var temph = relh + 150;
        }
        else {
            var temph = relh - 56;
        }
        
        $("#MediaPreview")
            .css("position", "absolute")
            .css("z-index", "1001")
            .css("left", relw + "px")
            .css("top", temph + "px")
            .css("width", "130px")
            .css("height", "40px")
		    .fadeIn("fast");
        //.css("top", "145px")
        //.css("top", (e.pageY - xOffset) + "px")
        //.css("left", (e.pageX + yOffset) + "px")
    });

    /*$("img.MediaPreview").live("mousemove", function(e) {
    $("#MediaPreview")
    .css("top", (e.pageY - xOffset) + "px")
    .css("left", (e.pageX + yOffset) + "px");
    });*/

    $("img.MediaPreview").live("mouseout", function(e) {
        this.title = this.t;
        // undo overflows on parent elements?
        $("#MediaPreview").remove();
    });
};


// starting the script on page load - only enabled on search results for now, not on related media on view page
$(document).ready(function() {
    if (OnSearchPage) {
        imagePreview();
        preloadImage();
    }
});


function positionPreview(relw, relh) {
    $("#MediaPreview")
        .css("visibility", "hidden");
        
    // width
    var prevw = $("#HoverPreview").width();
    // need a factor to multiply prevw and 100 by
    var factor = relw / ($("#SearchResultsData").width() - 120);
    var w = relw - Math.round((factor * prevw)) + Math.round((factor * 100));
    
    // height
    var prevh = $("#HoverPreview").height();
    var h = 0;
    if (relh < 200) {
        // display image below thumbnail if in first two rows of results
        h = relh + 150;
    }
    else {
        // otherwise display image above thumbnail
        h = relh - prevh - 40;
    }

    $("#LoadingPreview")
        .css("display", "none");
    $("#MediaPreview")
        .css("left", w + "px")
        .css("top", h + "px")
        .css("width", "auto")
        .css("height", "auto")
        .css("visibility", "visible");
    $("#HoverPreview")
        .css("display", "inline")
        .fadeIn("fast");
    $("#PreviewDescription")
        .css("display", "block")
        .css("width", prevw + "px");
}


function preloadImage() {
    ajaxImage = new Image();
    ajaxImage.src = "/images/preview_loader.gif";
}