function windowPosition() {
    var windowWidth;
    var windowHeight;
        
    if (typeof(window.innerWidth) == 'number') {
        windowWidth = window.innerWidth;
        windowHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    
    return { width: windowWidth, height: windowHeight };
}

function resizeOverlay() {
    var jdoc = $(document);
    
    $(window.overlay).css({
        'width': jdoc.width(),
        'height': jdoc.height()
    });
}

function hideAjaxImg() {
    if (!window.ajaxImg) {
        return;
    }
    
    $(window.ajaxImg).hide();
}

function showImage(img) {
    hideAjaxImg();
    
    var sPos = scrollPosition();
    var wPos = windowPosition();    

    $(img)
        .css({
            'top': (wPos.height - $(img).height()) / 2 + sPos.top,
            'left': (wPos.width - $(img).width()) / 2 + sPos.left,
            'opacity': 0,
            'position': 'absolute',
            'z-index': '150000'
        })
        .show()
        .animate({ 'opacity': 1 }, 1000, function (){
                $(img)
                    .unbind('click')
                    .click(function() { 
                        hideImage(img); 
                    });
        });
}

function hideImage(img) {    
    if (!img) {
        return;
    }
    
    if (img.isDragged) {
        img.isDragged = false;
        return;
    }
    
    hideOverlay();
    hideAjaxImg();
    
    $(img)
        .animate({ 'opacity': 0 }, 500, function() {
                $(img)
                    .hide()
                    .unbind('click')
                    .click(function() {
                        showOverlay(img); 
                        showImage(img);
                    });
        });
}

function scrollPosition() {
    var jWindow = $(window);
    return { left: jWindow.scrollLeft(), top: jWindow.scrollTop() };
}

function showAjaxImg() {
    if (!window.ajaxImg) {
        return;
    }
    
    var sPos = scrollPosition();
    var wPos = windowPosition(); 
    
    var jAjaxImg = $(window.ajaxImg);
    
    jAjaxImg.css({ "top": (wPos.height - 32) / 2 + sPos.top, 
                   "left": (wPos.width - 32) / 2 + sPos.left, 
                   "z-index": 500 });
    
    jAjaxImg.show();   
}

function showOverlay(img) { 
  
    window.overlay.img = img;
    
    var jdoc = $(document);
    
    $(window.overlay).css({
        'width': jdoc.width(),
        'height': jdoc.height(),
        'opacity': 0
    })
    .show()
    .animate({ 'opacity': 0.8}, 500);
}

function hideOverlay() {

    if (!window.overlay) {
        return;
    }

    $(window.overlay)
        .animate({ 'opacity': 0 }, 500)
        .hide();
}


function thumbnail_Click()
{        
    var self = this;
    
    var thumbnail = $("img", self).get(0);
    var src = self.href;
    
    if (self.img) {
        showOverlay(self.img);
        showImage(self.img);
    } else {
        $('<img />')
        .hide()
        .appendTo(document.body)
        .addClass('large')
        .load(function() {
            if (!this.notShow) {
                showImage(this);
            }
        })
        .draggable({
            start: function(){ this.isDragged = true; },
            stop: function(){ resizeOverlay(); }
        })
        .each(function(){
            showOverlay(this);
            showAjaxImg();
            this.src = src;
            self.img = this;
        });
    }
    return false;
}

$(function () {
    var sPos = scrollPosition();
    var wPos = windowPosition();    
    
    window.ajaxImg =  
        $('<img />')
            .attr('src', '/img/design/ajax.gif')
            .css({ 'position': 'absolute', 
                   'top': (wPos.height - 32) / 2 + sPos.top,
                   'left': (wPos.width - 32) / 2 + sPos.left,
                   'z-index': 500 })
            .hide()    
            .appendTo(document.body)
            .get(0);
    
    $("a[target='image']").click(thumbnail_Click);
    
    window.overlay =
        $('<div/>')
            .hide()
            .appendTo(document.body)
            .css({ "background": "#000",
                    "position": "absolute",
                    "left": 0,
                    "top": 0,
                    "z-index": "150000" })
            .click(function () { 
                this.img.notShow = true;
                hideImage(this.img); 
            })
            .get(0);
            
    $(window).resize(resizeOverlay);
    
});