//Overlap Image Viewer (March 2nd, 08'): By JavaScript Kit: http://www.javascriptkit.com

var overlapviewer = {

    thumbclass: "jkimagelarge", //Shared css class name to apply efect to
    startopacity: 1, //Opacity of element before mouse moves over it
    endopacity: 0.5, //Opacity of element when mouse is over it (and showing enlarged image)
    increment: 0.1, //Amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)
    loadingmsg: "Loading Image. Please Wait...",

    isContained: function(m, e) {

        var e = window.event || e
        var c =
            e.relatedTarget || ((e.type == "click") ? e.fromElement : e.toElement)

        while (c && c != m) try { c = c.parentNode } catch (e) { c = m }
        if (c == m)
            return true
        else
            return false
    },

    dim_and_reveal: function(e, t, config) {
        var windowsize = { w: $(window).width(), h: $(window).height() }
        var scrollpoint = { x: e.pageX - e.clientX, y: e.pageY - e.clientY }
        $(t).fadeTo('normal', overlapviewer.endopacity, function() {
        config.$popupdiv.html('<img style="cursor:url(App_Themes/default/zoomout.cur), -moz-zoom-out" id="jkpopupimage" src="' + t.getAttribute('targetimage') + '" border="0" />')
            var isimglink = t.childNodes.length == 1 && t.firstChild.tagName == "IMG" //see if anchor object is image link
            var $target = (isimglink) ? $(t.firstChild) : $(t)
            var targetcoord = $target.offset()
            $('#jkpopupimage').one('load', function() {
                var popupdiv = config.$popupdiv.get(0)
                targetcoord.left = (windowsize.w < targetcoord.left - scrollpoint.x + popupdiv.offsetWidth) ? targetcoord.left - popupdiv.offsetWidth + $target.width() : targetcoord.left
                config.$popupdiv.css({ left: targetcoord.left, top: targetcoord.top, visibility: 'visible' })
            })
        })
    },

    undim_and_hide: function(e, t, config) {
        $(t).fadeTo('normal', overlapviewer.startopacity)
        config.$popupdiv.empty().css({ left: 0, top: 0, visibility: 'hidden' })
    },

    init: function(config) {
        $(document).ready(function() {
            config.$thumbnails = $('.' + overlapviewer.thumbclass)
            config.$popupdiv = $('<div id="overlappopup"></div>').prependTo('body')
            config.$thumbnails.each(function(index) {
                $(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute

                $(this).bind('click', function(e) {
                    if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
                        overlapviewer.dim_and_reveal(e, this, config)
                })

                $(this).bind('click', function(e) {
                    if (!overlapviewer.isContained(config.$popupdiv.get(0), e))  //check if mouse accidently entered pop up div
                        overlapviewer.undim_and_hide(e, this, config)
                })

            }) //end each loop
            config.$popupdiv.bind('click', function(e) {
                config.$thumbnails.stop().fadeTo('normal', overlapviewer.startopacity)
                config.$popupdiv.empty().css({ left: 0, top: 0, visibility: 'hidden' })
            })
        }) //end document.ready
    }
}

overlapviewer.init({})