(function () {
    var current;

    $(window).keydown(function (e) {
        if ($('#outer-image-container').length == 1) {
            if (e.which == 27)
                $('#outer-image-container').remove();

            if (e.which == 37)
                prevPic();

            if (e.which == 39)
                nextPic();
        }
    });

    var prevPic = function () {
        var images = $('div.pictures div.image a');
        var index = images.index(current);

        if (index < 1) {
            return false;
        } else {
            clickEvent.apply(images.get(index - 1));
        }

        return false;
    }

    var nextPic = function () {
        var images = $('div.pictures div.image a');
        var index = images.index(current);

        if (index >= images.length - 1) {
            return false;
        } else {
            clickEvent.apply(images.get(index + 1));
        }

        return false;
    }

    var hideButtons = function () {
        var images = $('div.pictures div.image a');
        var index = images.index(current);
        $('#next-pic').removeClass('hidden');
        $('#prev-pic').removeClass('hidden');

        if (index >= images.length - 1) {
            $('#next-pic').addClass('hidden');
        }

        if (index < 1) {
            $('#prev-pic').addClass('hidden');
        }
    }


    var clickEvent = function () {
        current = this;

        if ($('#outer-image-container').length == 0) {
            $('body').append("<div id='outer-image-container'><div id='inner-image-container'><a id='next-pic' href=''>Next</a><a id='prev-pic' href=''>Prev</a><div><div class='wrapper'><img src='/graphics/loading.gif' /></div></div><a href='' class='close'>Close</a></div></div>");

            $('#outer-image-container a.close, #outer-image-container').click(function () {
                $('#outer-image-container').fadeOut(function () {
                    $('#outer-image-container').remove();
                });
                return false;
            });

            $('#inner-image-container').click(function () {
                return false;
            });

            $('#prev-pic').click(prevPic);
            $('#next-pic').click(nextPic);
        }

        var image = new Image();
        image.onload = function () {
            $('.wrapper').children().fadeOut('fast', function () {
                $(this).remove();
                $('#inner-image-container a.close, #next-pic, #prev-pic').hide();

                var height = $(window).height();
                var width = $(window).width();
                var resizeHeight = image.height, resizeWidth = image.width;

                if (resizeHeight > (height - 100)) {
                    resizeWidth = resizeWidth * (height - 100) / resizeHeight;
                    resizeHeight = (height - 100);
                }

                if (resizeWidth > (width - 200)) {
                    resizeHeight = resizeHeight * (width - 200) / resizeWidth;
                    resizeWidth = (width - 200);
                }

                $(image).css({
                    height: resizeHeight - 10,
                    width: resizeWidth
                });

                hideButtons();

                $('#inner-image-container').stop().animate({
                    width: resizeWidth,
                    height: resizeHeight + 10
                }, function () {
                    $(image).hide();
                    $('.wrapper').append(image);
                    $(image).fadeIn('fast', function () {
                        $('#inner-image-container a.close, #next-pic, #prev-pic').css({ 'display': '' });   
                    });
                });
            });

        }

        image.src = this.href

        return false;
    }

    $(function () {
        $('div.pictures div.image a').click(clickEvent);
    });

})();