/**
 * Plugin: jquery.ezoverlay
 * Version: 0.1
 * (c) Copyright 2011, Eran Miller - http://eranmiller.com
 * Description: a self-contained jQuery plugin that enables element and fullscreen overlays, with optional static and dynamic modal content.
 **/
 (function ($) {
    $.ezoverlay = function (options, el) {
        if (el === undefined) {
            el = "body";
        }
        var defaults = {
            bg: '#000',
            title: "default ezoverlay",
            text: "no custom settings",
            url: null,
            close: "close"
        },
            o = this,
            fs = (el == "body") ? true : false,
            $o = $(el),
            $over = "",
            $load = "",
            $modal = "",
            $title = "",
            $content = "",
            init = function() {
                o.s = $.extend(true, {}, defaults, options);
                create();
            },
            create = function() {
                $over = $("<div></div>").addClass('ezoverlay-overlay').css({
                    'background-color': o.s.bg,
                    position: fs ? "fixed" : "relative",
                    width: fs ? "" : "100%",
                    height: fs ? "" : "100%",
                    top: 0,
                    left: 0,
                    bottom: 0,
                    right: 0,
                    "z-index": fs ? 1003 : 1000
                }).appendTo(el);
                $load = $("<div></div>").addClass('ezoverlay-loading').css({
                    display: "none",
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    margin: "-25px 0px 0px -25px",
                    background: "transparent url('/img/animated.gif') no-repeat center center",
                    width: "50px",
                    height: "50px",
                    "z-index": fs ? 1004 : 1001,
                    "border-radius": "10px",
                    "-moz-border-radius": "10px",
                    "-webkit-border-radius": "10px",
                    "box-shadow": "1px 1px 3px #000",
                    "-moz-box-shadow": "1px 1px 3px #000",
                    "-webkit-box-shadow": "1px 1px 3px #000",
                    opacity: "0.6",
                    filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)"
                }).prependTo($over);
                $load.show();
                $over.hide().fadeTo("fast", 0.6, function() {
                    w = size();
                    $modal = $("<div></div>").addClass('ezoverlay-modal').css({
                        position: "absolute",
                        background: "#fff",
                        color: "#fff",
                        "font-family":"Verdana",
                        "font-size":"11px",
                        padding: "10px",
                        border: "1px solid #000",
                        "z-index": fs ? 1005 : 1002,
                        //width: fs ? "35%" : w[0] - 50,
                        //width: w[0] - 50,
                        //width:816,
                        //height:540,
                        "max-width": w[0] - 50,
                        "max-height": w[1] - 50,
                        "border-radius": "5px",
                        "-moz-border-radius": "5px",
                        "-webkit-border-radius": "5px",
                        "box-shadow": "1px 1px 15px #000",
                        "-moz-box-shadow": "1px 1px 15px #000",
                        "-webkit-box-shadow": "1px 1px 15px #000",
                        overflow: "hidden",
                        visibility: "hidden"
                    }).insertAfter($over);
                    $close = $("<span>schließen</span>").addClass(o.s.close).css({
                        "float": "right",
                        cursor: "pointer",
                        margin: "-5px -5px 0 0"
                    }).appendTo($modal);
                    $title = $("<h1></h1>").css({
                        margin: "-10px -10px 0 -10px",
                        padding: "5px",
                        background: "rgb(0,99,47)",
                        color: "#fff",
                        "font-size": "1em",
                        "border-bottom": "1px solid #7F7F7F",
                        "border-radius": "5px 5px 0px 0px",
                        "-moz-border-radius": "5px 5px 0px 0px",
                        "-webkit-border-top-left-radius": "5px",
                        "-webkit-border-top-right-radius": "5px"
                    }).appendTo($modal).html(o.s.title);
                    $content = $("<div></div>").css({
                        margin: "5px 0 0 0",
                        "font-size": ".9em",
                        overflow: "inherit"
                    }).appendTo($modal);
                    if (o.s.url) {
                        $content.load(o.s.url, function() {
                            render();
                        }, "html");
                    } else if (o.s.text) {
                        $content.html(o.s.text);
                        render();
                    }
                });
            },
            handlers = function() {
                $("." + o.s.close, el).bind("click.ezoverlay", function(o) {
                    o.preventDefault();
                    close(o);
                });
                $(document).bind("keydown.ezoverlay", function(o) {
                    if ($over.is(":visible")) {
                        if (o.keyCode === 27) {
                            o.preventDefault();
                            close(o);
                        }
                    }
                });
                $(window).bind("resize.ezoverlay", function() {
                    var a;
                    clearTimeout(a);
                    a = setTimeout(function () {
                        position(true);
                    }, 500);
                });
            },
            size = function() {
                var s = [$o.outerWidth(), $o.outerHeight()];
                if (fs) {
                    s = [$(window).width(), $(window).height()];
                }
                return s;
            },
            position = function(resize) {
                s = size();
                var innerHeight = ($content.children().outerHeight() + $title.outerHeight()),
                    modalHeight = $modal.outerHeight(),
                    innerWidth = $content.children().width(),
                    modalWidth = $modal.outerWidth(true),
                    contentHeight = (innerHeight >= modalHeight) ? innerHeight : modalHeight,
                    contentWidth = (innerWidth >= modalWidth) ? innerWidth : modalWidth,
                    centerLeft = (s[0] - contentWidth) / 2,
                    centerTop = (s[1] - contentHeight) / 2;
                if (resize === undefined) {
                    $modal.css({
                        left: centerLeft,
                        top: centerTop
                    });
                } else {
                    $modal.stop(true, false).animate({
                        left: centerLeft,
                        top: centerTop
                    }, 500);
                }
            },
            render = function() {
                position();
                $modal.hide().css({
                    visibility: "visible"
                }).fadeIn(1000, function() {
                    $load.hide().remove();
                    handlers();
                });
            },
            close = function() {
                $modal.fadeOut(350, function() {
                    $modal.remove();
                });
                $over.fadeOut(350, function() {
                    $over.remove();
                });
                $o.removeData("ezoverlay");
            };
        init();
    };

    $.fn.ezoverlay = function(options){
        return this.each(function () {
            if(undefined === $(this).data("ezoverlay")) {
                var i = new $.ezoverlay(options, this);
                $(this).data("ezoverlay", i);
            }
        });
    };

})(jQuery);