/// <reference path="jquery-1.4.1-vsdoc.js" />
/// <reference path="jquery.galleryview.js" />
(function ($, window) {

    $.fn.modal = function (settings) {

        var defaults = {
            autoOpen: false,
            zIndex: 1000,
            close: function (e) { },
            open: function (e) { }
        };

        var fxopts = {
            duration: "fast",
            easing: "linear",
            callback: function () { }
        };

        var methods = {

            // initialize modal
            init: function (options) {
                if (!this.hasClass("ui-modal-container")) {
                    init_modal.apply(this, [options]);
                }
            },

            // reposition modal
            reposition: function () {
                reposition_modal.apply(this, arguments);
            },

            // set modal title
            settitle: function () {
                set_modal_title.apply(this, arguments);
            },

            // open modal
            open: function (settings) {
                if (settings) {
                    $.extend(fxopts, settings);
                }
                open_modal.apply(this, [fxopts]);
            },

            // close modal
            close: function (settings) {
                if (settings) {
                    $.extend(fxopts, settings);
                }
                close_modal.apply(this, [fxopts]);
            }
        };

        function init_modal(options) {

            this.addClass("ui-modal-container");
            this.wrapInner("<div class=\"ui-modal-content\"></div>");

            var target = this;

            var overlay = $("<div class=\"ui-overlay\">").css({
                "top": "0px",
                "left": "0px",
                "width": "100%",
                "height": "100%",
                "position": "fixed",
                "z-index": defaults.zIndex,
                "opacity": 0.3
            });

            var modal = $("<div class=\"ui-modal\">").css({
                "position": "absolute",
                "z-index": defaults.zIndex + 1
            });

            var title = $("<div class=\"ui-modal-title\">");
            var titleLabel = $("<span class=\"ui-modal-title-label\">").html(target.attr("title"));
            var btnClose = $("<a class=\"ui-modal-close\"></a>");
            var content = $("div.ui-modal-content", target).css({ "position": "relative" });

            title.append(titleLabel);
            title.append(btnClose);

            modal.append(title);
            modal.append(content);

            target.prepend(overlay);
            target.append(modal);

            $("body").append(target);

            modal.css(getPos(modal));

            $(window).resize(function (e) { modal.css(getPos(modal)); });
            $(window).scroll(function (e) { modal.css(getPos(modal)); });

            modal.css({ "display": "none" });
            overlay.css({ "display": "none" });

            //
            target.bind("dialogopen", defaults.open);
            target.bind("dialogclose", defaults.close);

            if (defaults.autoOpen) {
                open_modal.apply(target, [fxopts]);
            }

            btnClose.click(function (e) {
                close_modal.apply(target, [fxopts]);
                return false;
            });
        }

        function open_modal(options) {

            var curr = this;
            var modal = $("div.ui-modal", this);
            var overlay = $("div.ui-overlay");

            modal.css(getPos(modal));

            overlay.fadeIn("fast");
            modal.show(options.duration, options.easing, function () {
                options.callback();
                curr.trigger("dialogopen");
            });
        }

        function close_modal(options) {

            var curr = this;
            var modal = $("div.ui-modal", this);
            var overlay = $("div.ui-overlay");

            modal.hide(options.duration, options.easing, function () {
                overlay.fadeOut("fast");
                options.callback();
                curr.trigger("dialogclose");
            });
        }

        function reposition_modal() {
            var modal = $("div.ui-modal", this);
            modal.css(getPos(modal));
        }

        function set_modal_title(title) {
            $("span.ui-modal-title-label", this).html(title);
        }

        function getPos(target) {
            var $win = $(window);
            if ($.browser.msie && $.browser.version < 9) {
                target.css(getSize(target));
            }
            return {
                left: ((($win.width() / 2) - (target.outerWidth(true) / 2)) + $win.scrollLeft()) + "px",
                top: ((($win.height() / 2) - (target.outerHeight(true) / 2)) + $win.scrollTop()) + "px"
            };
        }

        function getSize(target) {

            var title = $("div.ui-modal-title", target);
            var content = $("div.ui-modal-content", target);

            return {
                width: content.outerWidth(true) + "px",
                height: (content.outerHeight(true) + title) + "px"
            };

        }

        return this.each(function () {

            if (settings && typeof (settings) === "string") {

                if (methods[settings]) {
                    methods[settings].apply($(this), Array.prototype.slice.call(arguments, 1));
                }
            }
            else {
                if (settings) {
                    $.extend(defaults, settings);
                }
                methods["init"].apply($(this), [defaults]);
            }
        }, arguments);
    };

    $.fn.gallery = function (options) {

        var gal_opts = {
            show_panels: true,
            show_filmstrip: true,
            panel_width: 600,
            panel_height: 400,
            frame_width: 60,
            frame_height: 40,
            start_frame: 1,
            filmstrip_size: 3,
            transition_speed: 800,
            transition_interval: 4000,
            show_panel_overlay: true,
            overlay_opacity: 0.7,
            frame_opacity: 0.3,
            pointer_size: 0,
            nav_theme: "dark",
            theme_path: "/style library/images/",
            easing: "swing",
            filmstrip_position: "bottom",
            overlay_position: "bottom",
            panel_scale: "nocrop",
            frame_scale: "crop",
            frame_gap: 5,
            show_captions: false,
            fade_panels: true,
            display_panel_nav: true,
            columns: 0,
            pause_on_hover: false
        };

        var defaults = {
            showSecondaryModal: false,
            primaryGallery: gal_opts,
            secondaryGallery: gal_opts
        };

        function init_gallery(settings) {

            var gal_primary = $(this);
            var parent=$(this).parent();
            settings.primaryGallery = $.extend({}, gal_opts, settings.primaryGallery);
            settings.secondaryGallery = $.extend({}, gal_opts, settings.secondaryGallery);

            if (settings.showSecondaryModal) {
                var gal_htm = $("<div>").append(gal_primary.clone()).html();

                settings.primaryGallery.callback = function (e, index) {
                    var img = $("img", this);
                    var mod = $("<div>").attr("title", img.attr("alt"));
                    var gal = $(gal_htm).css({ "display": "none" });

                    var items = $("li", gal);
                    items.each(function (index) {
                        var $this = $(this);
                        var $ovl = $("div.panel-overlay", $this);
                        //var $ovl_close = $("<a href=\"#\" class=\"overlay-close\">CLOSE</a>");

                        if ($ovl.length == 0) {
                            $ovl = $("<div class=\"panel-overlay\">");
                            $this.append($ovl);
                        }

                        $ovl.wrapInner("<div class=\"overlay-content\">");
                        $ovl.append(
                            $("<div class=\"overlay-detail\"></div>")
                            .append("<span>Item " + (index + 1) + " of " + items.length + "</span>")
                            //.append($ovl_close)
                            );
                        //$ovl_close.click(function () { mod.modal("close"); });
                    });

                    mod.append(gal);
                    
                    parent.append(mod);
                    //$("body").append(mod);

                    settings.secondaryGallery.start_frame = index + 1;
                    settings.secondaryGallery.callback = function () {
                        mod.modal("settitle", $("img", this).attr("alt"));
                    }

                    mod.modal({
                        autoOpen: true,
                        zIndex: 1200,
                        close: function () { mod.remove(); },
                        open: function () {
                            gal.css({ "display": "block" });
                            gal.galleryView(settings.secondaryGallery);
                            mod.modal("reposition");
                        }
                    });
                }
            }

            gal_primary.galleryView(settings.primaryGallery);
        }

        return this.each(function () {
            if (options) {
                $.extend(defaults, options);
            }

            init_gallery.apply($(this), [defaults]);
        });
    };

})(this.jQuery, this.window)