var largerBox = {
    version: function() {
        return 2.1; // 17/05/2009 14:18:40
    },
    init: function(options) {
        // by default it works on image links with the class 'fullImage'

        // set other defaults.
        var options = $merge({
            selector: "a.fullImage",        // can pass on any A object or array of objects, need to contain links to images.
            styleBorder: "0px solid #111",  // border style around image
            useShadow: false,               // apply a css shadow after image is drawn
            useModal: true,                 // use a modal window (toggleModal function) or not
            useTooltip: true,               // uses element.tooltip prototype (needs it defined, set to false if not avail)
            colourModal: "transparent",            // default colour for modal,
            imageBackground: "transparent",        // useful to have one for png or gif with transparency
            zIndex: 1000000000              // default z-index for the enlarged images
        }, options);

        // attach to selector
        $$(options.selector).addEvents({
            click: function(e) {
                this.fireEvent("mouseleave"); // get rid of tooltips, if any.

                // only one instance and do not go over other modals...
                if ($("largerBox") || $("modal"))
                    return false;

                var _this = this, myevents;
                var e = new Event(e).stop(); // stop default. can use e.preventDefault also but this has
                                             // issues in IE6
                if (options.useModal)
                    toggleModal(options.colourModal);

                var coords = this.getFirst().getCoordinates();

                // load the image
                new Asset.image(this.get("href"), {
                    onload: function() {
                        // insert it. use the centerBox function to get coordinates
                        var image = centerBox(this.width, this.height); // height and width are available after onload ends

                        this.set({
                            id: "largerBox",
                            styles: $merge({
                                zIndex: options.zIndex,
                                position: "absolute",
                                border: options.styleBorder,
                                background: options.imageBackground
                            }, coords),
                            "class": "cur",
                            events: {
                                click: function() {
                                    $clear(myevents);
                                    this.fireEvent("mouseleave");

                                    if (options.useShadow) {
                                        var rel = this.get("data-related");
                            	        if ($(rel)) {
                            	            $(rel).dispose();
                            	        }
                            	    }

                                    // close animation
                                    var myEffect = new Fx.Morph($("largerBox"), {
                                        transition: Fx.Transitions.Sine.easeOut,
                                        duration: 150
                                    }).start($merge({
                                        "border-width": 0,
                                        opacity: .4
                                    }, coords));

                                    this.fade(0);

                                    var _this = this;
                                    (function() {
                                        _this.smartDispose(); // also gets rid of a shadow if any.
                                        if (options.useModal && $("modal"))
                                            toggleModal();
                                    }).delay(500);
                                }
                            }
                        }).inject(document.body);

                        $clear(initCheck); // cancels out any older animations

                        var myEffect = new Fx.Morph($("largerBox"), {
                            transition: Fx.Transitions.Sine.easeOut,
                            duration: 300
                        }).start({
                            width: image.width,
                            height: image.height,
                            left: image.x,
                            top: image.y,
                            "border-width": "3px"
                        }).chain(function() {
                            if (options.useShadow)
                                $("largerBox").dropShadow();
                        });

                        var __this = this;

                        (function() {
                            // add close function after we're done animating
                            __this.addEvents({
                                mouseenter: function() {
                                    if ($type(__this.tooltip) == "function" && options.useTooltip)
                                        __this.tooltip("CLICK ANYWHERE TO CLOSE PROJECT");
                                }
                            });

                            if (options.useModal) {
                                // get rid of it by clicking on modal also
                                $("modal").addEvents({
                                    click: function() {
                                        __this.fireEvent("click");
                                    }
                                });
                            }
                        }).delay(100);

                        myevents = (function() {
                            __this.fireEvent("mouseenter");
                        }).delay(1000);
                    }
                });

                var initCheck = (function() {
                    _this.set("href", "#").removeEvents();
                    _this.getFirst().removeEvents();
                    if (!$("largerBox") && options.useModal)
                        toggleModal();
                }).delay(3500);
            },
            mouseenter: function() {
                // do something on parent element's mouseover.
            }

        });

    } // end init largerBox
}; // end largerBox namespace

window.addEvent("domready", function() {
    largerBox.init(); // just use default options.
});