Object.extend(Themes.Default, {
    dotImage: "dot_plus.png"
});

Object.extend(ImgZoomer.plugins, {
    multipleZoomer: {
        // setup is used to analyse the anchor element and produce a special content div
        setup: function(zoomer, anchor, zoomedImage) {
            zoomer.moreImageSrcs = zoomer.moreImageSrcs || [];
            
            if (anchor.rel.split(",").length != 1) {
                var moreImageSrcs = anchor.rel.split(",");
                var contentDiv = new Element("div");

                contentDiv.style.position = "absolute";
                contentDiv.style.cursor = "pointer";
                contentDiv.style.zIndex = zoomer.options.zIndex - 1;
                contentDiv.hide();
                
                var zoomIndex = zoomer.zoomedImages.index(zoomedImage);
                zoomer.moreImageSrcs[zoomIndex] = moreImageSrcs;
                return contentDiv;
            }
        },
        
        setContent: function(zoomer, element, zoomedImage) {
            var zoomIndex = zoomer.zoomedImages.index(zoomedImage);
            var moreImageSrcs = zoomer.moreImageSrcs[zoomIndex];
            
            var position = zoomedImage.cumulativeOffset();
            position = { left: position[0], top: position[1] };
            
            var size = { width: element.getWidth(), height: element.getHeight() };
            
            zoomer.paganator = new Element("ul");
            zoomer.paganator.style.right = "5px";
            zoomer.paganator.style.bottom = "5px"; 
            zoomer.paganator.style.zIndex = 402;           
            zoomer.paganator.classNames().add("paganator");
            zoomer.paganator.classNames().add("paganator transparent");
            
            zoomer.moreImages = zoomer.moreImages || [];
            zoomer.moreImages[zoomIndex] = [];
            
            moreImageSrcs.each(function(moreImageSrc) {
                var button = new Element("a");
                button.href = "#";
                
                var dot = new Image();
                dot.src = "images/icons/dot_plus.png";
                Element.extend(dot);
                dot.iePNGFix(zoomer.options.theme.imagePath + "extras/" + zoomer.options.theme.blankPixel);
                button.appendChild(dot);

                var buttonHolder = new Element("li");      
                buttonHolder.appendChild(button);
                
                zoomer.paganator.appendChild(buttonHolder);
                
                var image = new Image();
                Element.extend(image);
                image.src = moreImageSrc;
                image.style.position = "absolute";
                image.style.cursor = "pointer";
                image.onclick = zoomer.toggleImage.bindAsEventListener(zoomer, zoomedImage);
                image.hide();
                
                zoomer.moreImages[zoomIndex].push(image);
                
                element.appendChild(image);
                
                button.onclick = this.showImage.bind(zoomer, image, zoomIndex);
            }.bind(this));
            
            element.appendChild(zoomer.paganator);
            
            element.childElements().first().show();
        },
           
        showImage: function(image, zoomIndex) {
            if (Effect.Queues.get('multiple_zoomer').size() != 0) return;
            
            if (!image.complete) {
                var windowInformation = this.getWindowInformation();
                this.showSpinner(
                    windowInformation.scrollX, windowInformation.scrollY,
                    windowInformation.windowWidth, windowInformation.windowHeight
                );
                
                setTimeout(this.showImage.bind(this, image, zoomIndex), 100);
                
                return;
            }
        
            this.moreImages[zoomIndex].each(function(element) {  
                element.style.zIndex = 400;
            });
            
            image.style.zIndex = 401;
            new Effect.Appear(image, {
                duration: 0.5,
                queue: { position: "end", scope: "multiple_zoomer" }, 
                beforeFinish: function() {
                    this.moreImages[zoomIndex].each(function(element) {  
                        if (element != image) element.hide();
                    });
                }.bind(this)
            });

            return false;
        }
    }
});