window.addEvent('domready', function() {
    $$('.zoom-image').each(function(emz) {
        emz.addEvents({
            mouseover: function() {
                //get the <dl> parent to find the sibling with 'big-image' class
                var parent = $(this).getParent('dl');
                var bigImg = parent.getChildren('.big-image-container');
                var imageContainer = bigImg.getElement('img');
                var image = imageContainer.get("alt");

                if (this.imageUrl == null) {
                    this.imageUrl = image;
                }
                else {
                    image = this.imageUrl;
                }

                //initiate loading of image.
                var loader = new Asset.images(image, {
                    onProgress: function(counter, index) {
                    },
                    onComplete: function() {
                        imageContainer.set('src', image);
                        imageContainer.set('alt', '');
                    }
                });


                //set position of "popup"
                var topOffset = 0;
                var margin = 5;
                var marginBottom = 10;
                var headerOffset = 55;
                var top = parent.getPosition().y;

                //Check for clipping caused by window out bounds. 
                var scrolltop = window.getScroll().y;
                var bottom = window.getSize().y;
                var bottomOffset = scrolltop + bottom;
                var heightOffset = top + 250;

                if ((top + headerOffset) < scrolltop) {
                    //top part of (or all of) popupwindow will be outside of window bounds, adjusting
                    topOffset = scrolltop + margin;
                }
                else if (bottomOffset < heightOffset) {
                    //bottom part of (or all of) popupwindow will be outside of window bounds, adjusting
                    var delta = (heightOffset - bottomOffset) + marginBottom;
                    topOffset = top - delta;
                }
                else { //not out of bounds, but adjust for heading
                    topOffset = top + headerOffset;
                }

                //set top and left position for the big image block.
                bigImg.setStyle('top', topOffset + 'px');
                bigImg.setStyle('left', '320px');

                //all done, display the imageblock. (shows anitmated gif until the loader completes)
                bigImg.setStyle('display', 'block');
            },
            mouseout: function() {
                //alert('mouseisout');
                var parent = $(this).getParent('dl');
                var bigImg = parent.getChildren('.big-image-container');
                bigImg.setStyle('display', 'none');
            }
        });
    });
});