var current_element = null;

var prev_image = function() {
 
    var prev = $(current_element).prev('a');

    if (prev.attr('href') != null) {
        current_element = prev;        
        show_image($(prev).attr('href'));
    }
    
    return false;
}

var next_image = function() {

    var next = $(current_element).next('a');
    
    if (next.attr('href') != null) {
        current_element = next;
        show_image($(next).attr('href'));
    }
    
    return false;
}

var show_image = function(src) {
    
    var img = new Image();

    $(img)
        .load(function () {
            $(this)
                .removeAttr("width")
                .removeAttr("height")
                .css({ width: "", height: "" });
            var max = 700;
            var w = parseInt(this.width); if (w < 1) w = 700;
            var h = parseInt(this.height); if (h < 1) h = 525;
            var f = Math.max(w, h);
            var new_w = Math.round(w * max / f);
            var new_h = Math.round(h * max / f);
            var offset_x = - (Math.round(new_w / 2 + 20));
            var offset_y = - (Math.round(new_h / 2 + 45));
            $(this)
                .css({
                    width: new_w + 'px', 
                    height: new_h + 'px'
                });
            $('div#gallery-overlay-image').hide();
            $('div#gallery-overlay-area')
                .animate({
                   width: new_w + 'px',
                   height: new_h + 'px',
                   marginLeft: offset_x + 'px',
                   marginTop: offset_y + 'px'
                })
                .find('div#gallery-overlay-image')
                .hide()
                .html(this)
                .fadeIn('fast');
        })
        .error(function () {})
        .attr('src', src);
};

var close_gallery = function() {

    $('div#gallery-overlay').remove();
//        .css({display: 'none'}) //animate({opacity: 0}, 250)
//        '');
    current_element = null;
    
    return false;
}

var show_gallery = function(el) {

	$('<div id="gallery-overlay">'
	    + '<div id="gallery-overlay-background"></div>'
        + '<div id="gallery-overlay-area">'
            + '<div id="gallery-overlay-image"></div>'
            + '<a href="#" style="position: absolute; bottom: 12px; left: 20px;" class="button-black" onclick="return prev_image()">Zurück</a>'
            + '<a href="#" style="position: absolute; bottom: 12px; left: 50%; margin-left: -75px" class="button-black" onclick="return close_gallery()">Schliessen</a>'
            + '<a href="#" style="position: absolute; bottom: 12px; right: 20px;" class="button-black" onclick="return next_image()">Vor</a>'
        + '</div>'
    + '</div>')
        .appendTo('body');
    $('div#gallery-overlay-background')
        .css({opacity: 0, display: 'block'})
        .animate({opacity: 0.9}, 150);

    current_element = el;
    show_image($(el).attr('href'));
};

$(document).ready(function() {
	$('.mygallery a').each(function() {
		$(this).click(function() {
            show_gallery(this);

			return false;
		});
	});
});