/*
 * 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 = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.title = "";	
        this.t = this.title;
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<div id='previewX' style='z-index:1003; position:absolute;'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</div>");
		$("#previewX")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#previewX").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#previewX")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};
this.screenshotPreview = function(lElemId){    
    /* CONFIG */
        xOffset = 10;
        yOffset = 10;
        
        lElemId = lElemId || "";
        
        if(lElemId != "")
            lElemId = lElemId + " a.screenshot";
        else
            lElemId = "a.screenshot";
            
    /* END CONFIG */

        $(lElemId).hover(function(e){
            var c = $(this).find("img").attr("alt").replace(/\n/g, "<br/>");
            c = (c != "" ? "<br/>" + c : "");
            
            var array =  $(this).find("img").attr("alt").split("\n");
            var lengthArray= array.length;
            heightOverlay=320; 
            if(lengthArray<3)
            {
                heightOverlay=320;
            }
            else
            {
                if(lengthArray<4)
                    heightOverlay=335;
                else 
                {
                    if(lengthArray<5)
                        heightOverlay=350;
                }
            }       
            
            var scroll = getScrollXY();
            var xPosition = e.pageX + xOffset;
            var yPosition = e.pageY + yOffset;
            var imgScreenshot = "img" + parseInt(Math.random() * 1000);

            if((xPosition + xOffset + 340 - scroll[0] )> $(window).width())
                xPosition = e.pageX - 340 - xOffset; //  - scroll[0]
            if(xPosition < scroll[0] ) xPosition = 5 + scroll[0];

            if((yPosition + yOffset + 340 - scroll[1] )> $(window).height())
                yPosition = e.pageY - 340 - yOffset; //  - scroll[1]
            if(yPosition < scroll[1] ) yPosition = 5 + scroll[1];

            if($("body").find("#screenshot").length == 0)
                $("body").append("<p id='screenshot' style='width:320px; height:"+heightOverlay+"px; z-index:1003; position:absolute; vertical-align: middle;'><img style='top:40%; position:relative;' id='"+imgScreenshot+"' src='/Images/loading.gif' alt='url preview' width='41' border='0' height='39' />"+ c +"</p>");
            
            $("#screenshot")
                .css("top", yPosition + "px")
                .css("left", xPosition + "px")
                .fadeIn("fast");

            lScreenshot = $("#screenshot");    
                
            this.img = new Image();
            $(this.img).load(function () {
                $(this)
                    .attr({ 
                      width: "300",
                      height: "300",
                      border: "0",
                      alt: "url preview"
                    })
                    .css('display','none');
                $("#" + imgScreenshot).replaceWith(this);
                $("#screenshot img").fadeIn();
            }).error(function () {
                ;
            }).attr('src', this.rel);

            
        },
        function(){
            $("#screenshot").remove();
        });    

         $(lElemId).mousemove(function(e){ 
            var scroll = getScrollXY();
            var xPosition = e.pageX + xOffset;
            var yPosition = e.pageY + yOffset;

            if((xPosition + xOffset + $("#screenshot").outerWidth(true) - scroll[0] )> $(window).width())
                xPosition = e.pageX - $("#screenshot").outerWidth(true) - xOffset;
            if(xPosition < scroll[0] ) xPosition = 5 + scroll[0];


            if((yPosition + yOffset + $("#screenshot").outerHeight(true) - scroll[1] )> $(window).height())
                yPosition = e.pageY - $("#screenshot").outerHeight(true) - yOffset;
            if(yPosition < scroll[1] ) yPosition = 5 + scroll[1];

            $("#screenshot")
                .css("top", yPosition + "px")
                .css("left", xPosition + "px")
         });
};

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