//********************************************
//*     MiunModal - Displays element as modal
//*     ViewState-compatible, does NOT move
//*     element, just makes it display:absolute.        
//*     Tested and dependent on JQuery 1.4.2
//*
//********************************************

//our modal function, appends overlay-div and shows targeted element as modal
//arguments: width, height (will override the values in the css)
//Usage examples:
//                  $(".divToBeModal").MiunModal();
//                  $(".divToBeModal").MiunModal({width:'600', height:'500'});
jQuery.fn.MiunModal = function () {
    var args = arguments[0] || {};

    var overlay = $("<div id='modal-overlay'></div>");

    //Append the overlay to the document body
    $("body").append(overlay.click(function () {
    }))

    //make sure our modal is visible
    $(this).parents().css("display", "block");

    $(this).addClass("MiunModal");

    //center our modal
    $(this).center();

    //Set the css and fade in our overlay
    overlay.css("opacity", 0.5);
    overlay.fadeIn(350);

    if (args.width) {
        $(".MiunModal").css("width", args.width + "px");
    }

    if (args.height) {
        $(".MiunModal").css("height", args.height + "px");
    }

    //show the modal    
    $(this).fadeIn(700);

    //if jquery UI is enabled with draggable-function, make the modal draggable
    //REMOVED DUE TO ERROR WHEN SCROLLING MODAL
    /*if (jQuery.isFunction(jQuery.fn.draggable)) {
    $(this).draggable();
    $('.ModalHead').css("cursor", "move");
    }  */
}

//closefunction for our modal
jQuery.fn.ModalClose = function () {
    //fade out the modal
    $(this).fadeOut(150);

    //fade out the overlay
    $("#modal-overlay").fadeOut(400);

    //remove the overlay
    $("#modal-overlay").remove();

    //remove the MiunModal-style from the modal
    $(this).removeClass("MiunModal");
}

//center elements function
jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}