meltmedia.widget.ImageViewer = Class.create({
        generateUniqueID: function() {
            var d = new Date();
            var s = d.getSeconds();
            var m = d.getMilliseconds();
            var r = Math.floor(Math.random()*9);
            return (s + "" + m + "-" + r);
        },
        Version: "1.0.0",
        initialize: function(config) {
            this._config = config;
            this.id = "mm-viewer-"+this.generateUniqueID();
            this.create();
        }
    });

meltmedia.widget.ImageViewer.prototype.create = function() {
    this.element = new Element("div");
    this.element.id = this.id;
    this.element.className = "mm-image-viewer";
    
    this.element.hide();
    if(this._config.visible) {
        this.element.show();
    }

    this.frame = new Element("div");
    this.frame.className = "iv-frame";

    // Create the corners
    this.frame.tlCorner = new Element("div");
    this.frame.tlCorner.className = "iv-tl-corner";

    this.frame.trCorner = new Element("div");
    this.frame.trCorner.className = "iv-tr-corner";

    this.frame.blCorner = new Element("div");
    this.frame.blCorner.className = "iv-bl-corner";

    this.frame.brCorner = new Element("div");
    this.frame.brCorner.className = "iv-br-corner";

    // Create the sides
    this.frame.top = new Element("div");
    this.frame.top.className = "iv-top";

    this.frame.right = new Element("div");
    this.frame.right.className = "iv-right";

    this.frame.bottom = new Element("div");
    this.frame.bottom.className = "iv-bottom";

    this.frame.left = new Element("div");
    this.frame.left.className = "iv-left";

    // Create the viewing area
    this.frame.viewer = new Element("div");
    this.frame.viewer.className = "iv-viewer";

    // Create the image
    this.image = new Element("img");
    this.image.observe("load", this.imageLoaded.bind(this));

    // Load the image
    if(this._config.image) {
        this.image.src = this._config.image;
    }

    // Place the image
    if(this._config.animate) this.image.hide();
    this.frame.viewer.appendChild(this.image);
    
    // Place the corners and sides and main area in the frame
    this.frame.appendChild(this.frame.tlCorner);
    this.frame.appendChild(this.frame.top);
    this.frame.appendChild(this.frame.trCorner);
    this.frame.appendChild(this.frame.left);
    this.frame.appendChild(this.frame.viewer);
    this.frame.appendChild(this.frame.right);
    this.frame.appendChild(this.frame.blCorner);
    this.frame.appendChild(this.frame.bottom);
    this.frame.appendChild(this.frame.brCorner);

    this.closeBtn = new Element("a");
    this.closeBtn.href = "#";
    this.closeBtn.className = "iv-close-btn ignore";
    this.closeBtn.observe("click", this.closeEvent.bind(this));

    this.element.appendChild(this.frame);
    this.element.appendChild(this.closeBtn);

    document.body.appendChild(this.element);

    if(this.frame.tlCorner.currentStyle) {
        var filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader";
        if(this.frame.tlCorner.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.tlCorner.style.filter = filter + "(src='"+this.frame.tlCorner.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.trCorner.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.trCorner.style.filter = filter + "(src='"+this.frame.trCorner.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.blCorner.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.blCorner.style.filter = filter + "(src='"+this.frame.blCorner.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.brCorner.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.brCorner.style.filter = filter + "(src='"+this.frame.brCorner.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.top.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.top.style.filter = filter + "(src='"+this.frame.top.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.right.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.right.style.filter = filter + "(src='"+this.frame.right.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.bottom.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.bottom.style.filter = filter + "(src='"+this.frame.bottom.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.frame.left.currentStyle.backgroundImage.match(/\.png/)) {
            this.frame.left.style.filter = filter + "(src='"+this.frame.left.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }

        if(this.closeBtn.currentStyle.backgroundImage.match(/\.png/)) {
            this.closeBtn.style.filter = filter + "(src='"+this.closeBtn.currentStyle.backgroundImage.match(/url\(\"(.*)\"\)/)[1]+"', sizingMethod='scale')";
        }
    }

    if(this._config.autoCenter) {
        this.center();
    }
};

meltmedia.widget.ImageViewer.prototype.changeImage = function(url) {
    var _this = this;

    var newImage = new Element("img");
    newImage.observe("load", this.imageLoaded.bind(this));
    newImage.setStyle({
            position: "absolute",
            left: "-9999px"
        });
    this.image.fade({
            afterFinish: function(effect) {
                // Swap the images
                _this.image.remove();
                _this.image = newImage;
                _this.frame.viewer.appendChild(_this.image);
                _this.image.src = url;
            }
        });
};

meltmedia.widget.ImageViewer.prototype.resizeFrame = function() {
    var _this = this;

    if(this._config.animate) {
    
        new Effect.Parallel([

                             new Effect.Morph(this.element, {
                                     style: {
                                         height: this.height+35+"px",
                                         width: this.width+22+"px"
                                     }
                             }),

                             new Effect.Morph(this.frame.viewer, {
                                     style: {
                                         height: this.height+"px",
                                         width: this.width+"px"
                                     }
                             }),

                             new Effect.Morph(this.frame.top, {
                                     style: {
                                         width: this.width+"px"
                                             }
                             }),

                             new Effect.Morph(this.frame.right, {
                                     style: {
                                         height: this.height+"px"
                                             }
                             }),

                             new Effect.Morph(this.frame.bottom, {
                                     style: {
                                         width: this.width+"px"
                                             }
                             }),

                             new Effect.Morph(this.frame.left, {
                                     style: {
                                         height: this.height+"px"
                                             }
                             })
                             ], {
                                afterUpdate: function() {
                                    _this.center();
                                },
                                afterFinish: function(effect) {
                                    _this.image.appear();
                                }
        });
    } else {
        this.element.setStyle({
                "height": this.height+22+"px",
                "width": this.width+22+"px"});
        this.frame.top.setStyle({"width": this.width+"px"});
        this.frame.right.setStyle({"height": this.height+"px"});
        this.frame.bottom.setStyle({"width": this.width+"px"});
        this.frame.left.setStyle({"height": this.height+"px"});
        this.frame.viewer.setStyle({
                "height": this.height+"px",
                "width": this.width+"px"
            });
        this.image.show();
    }
};

meltmedia.widget.ImageViewer.prototype.show = function(ev) {
    if(this._config.animate) {
        this.element.appear({duration: .5});
    } else {
        this.element.show();
    }
};

meltmedia.widget.ImageViewer.prototype.hide = function(ev) {
    var _this = this;
    if(this._config.animate) {
        Effect.DropOut(this.element, {
                duration: .5,
                afterFinish: function(effect) {
                    _this.image.hide();
                }
            });
    } else {
        this.element.hide();
        this.image.hide();
    }
};

meltmedia.widget.ImageViewer.prototype.closeEvent = function(ev) {
    ev.stop();
    this.hide();
};

meltmedia.widget.ImageViewer.prototype.center = function() {
    var docHeight = document.body.clientHeight;
    var docWidth = document.body.clientWidth;

    var viewerHeight = this.element.getHeight();
    var viewerWidth = this.element.getWidth();

    var topPos = (docHeight/2) - (viewerHeight/2);
    var leftPos = (docWidth/2) - (viewerWidth/2);

    this.element.setStyle({
            "top": topPos+"px",
            "left": leftPos+"px"
        });
};

meltmedia.widget.ImageViewer.prototype.imageLoaded = function(ev) {
    if(!this._config.height || 
       this._config.height == "auto") {
        this.height = this.image.height;
    } else {
        this.height = this._config.height;
    }
    
    if(!this._config.width || 
       this._config.width == "auto") {
        this.width = this.image.width;
    } else {
        this.width = this._config.width;
    }

    this.image.hide();
    this.image.setStyle({
            position: "",
            left: ""
        });

    this.resizeFrame();

    if(this._config.autoCenter) {
        this.center();
        window.onresize = this.center.bind(this);
    }
};