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


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

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

    xOffset = 150;
    yOffset = 175;
    //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) {

        $("#preview").remove();

        var i = $(this).find('img');
        var h = $(this).find('input');

        //alert(h.attr("value").toString());

        this.t = this.title;

        //        var pos_x = (getPositionX(this) - 50);
        //        var pos_y = (getPositionY(this) - 20);

        var pos_x = (getPositionX(this) - 250);
        var pos_y = (getPositionY(this) - 400);

        // Handle safari
        if (getBrowserName() == "safari") {
            //            pos_x = (getPositionX(this) - 72);
            //            pos_y = (getPositionY(this) - 100);  
        }

        //left: 875px; - x
        //top: 53px; - y

        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        //var bigimg = i.attr("src").replace('100', '349');
        var bigimg = '/Media/Images/upload/328/' + h.attr("value").toString() + '.jpg';

        // Get stock html
        var index = "#" + this.id.toString().replace("lnk", "stock");
        var htmlStr = $(index).html();

        $("body").append("<div id='preview' onmouseout=\"removePreviewElement();\" onclick='window.location=\"" + this.href + "\"' style='cursor:pointer;width:328px;height:578px;'><div id='popupcontainer' style='position:relative; '><img src='" + bigimg + "' alt='Image preview' width='328' /><div id='overlay' style='position:absolute;top:0px;left:0px;background-color:transparent;' onmouseout=\"removePreviewElement();\" >&nbsp;</div>" + htmlStr + "</div></div>");

        if ($(this).height() + 40 > $("#preview").height()) { $("#preview").height($(this).height() + 40) }

        $("#preview")
			.css("top", pos_y + "px")
			.css("left", pos_x + "px")
			.fadeIn("fast");
    },
	function () {
	    this.title = this.t;
	    //$("#preview").remove();
	});



};

function removePreviewElement() {
    var d = document.getElementById('ctl00_mybody');
    var olddiv = document.getElementById('preview');
    d.removeChild(olddiv);
}

function getPositionX(obj) { 
    var topValue = 0, leftValue = 0;
    while (obj) {
        leftValue += obj.offsetLeft;
        topValue += obj.offsetTop;
        obj = obj.offsetParent;
    }
    finalvalue = leftValue;
    return finalvalue;
}

function getPositionY(obj) {
    var topValue = 0, leftValue = 0;
    while (obj) {
        leftValue += obj.offsetLeft;
        topValue += obj.offsetTop;
        obj = obj.offsetParent;
    }
    finalvalue = topValue;
    return finalvalue;
}

/**
* @returns A string which specifies which is the current
* browser in which we are running.
*
* Currently-supported browser detection and codes:
* * 'opera' -- Opera
* * 'msie' -- Internet Explorer
* * 'safari' -- Safari
* * 'firefox' -- FireFox
* * 'mozilla' -- Mozilla
*
* If we are unable to property identify the browser, we
* return an empty string.
*
* @type String
*/
function getBrowserName() {
    var browserName = "";

    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("opera") != -1) {
        browserName = "opera";
    } 
    else if (ua.indexOf("msie") != -1) {
        browserName = "msie";
    } 
    else if (ua.indexOf("safari") != -1) {
        browserName = "safari";
    } 
    else if (ua.indexOf("mozilla") != -1) {
        if ( ua.indexOf("firefox") != -1) {
            browserName = "firefox";
        } 
        else {
            browserName = "mozilla";
        }
    }

    return browserName;
};