﻿/*
Name: jQuery Koujala Overlay Plugin
Version: 1.1 
Last Updated: 01/21/2010
Author: Murali Koujala
Copyright(c): 2010 
License: Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
(function($) {
    $.fn.koverlay = function(options) {
        //koverlay Plugin CSS Start;
        var css_koverlay = {"border": "solid 1px #e7e7e7", "background-color": "#fff" };
        var css_koverlayheader = { "display":"block","padding": "5px","font-family": "Arial, Verdana, sans-serif", "font-size": "13px", "font-weight": "bold", "color": "#fff" ,"background-color": "#C00"};
        var css_koverlaybutton = {"padding-top": "10px", "padding-left": "10px","cursor":"pointer", "float":"right", "font-family": "Trebuchet MS, Arial, Verdana, sans-serif", "font-size": "12px", "font-weight": "normal", "color": "#c00", "line-height":"12px"};
        var css_koverlaycontent = { "padding-right": "10px","padding-top": "10px","padding-left": "10px", "color": "#666","font-family": "Trebuchet MS, Arial, Helvetica, sans-serif", "font-size": "12px" };
        //koverlay Plugin CSS End;
        function template() {
            var html = [];
            /*html[html.length] = '<table border="0" cellpadding="0" cellspacing="2" class="css_koverlay" style="width: 510px;">';
            html[html.length] = '   <tr>';
            html[html.length] = '       <td>';*/
            html[html.length] = '          <div class="css_koverlay"> ';
			html[html.length] = '				<div class="css_koverlayheader"></div>';
           /* html[html.length] = '       </td>';
            html[html.length] = '       <td align="right">';
            html[html.length] = '           <input type="button" class="css_koverlaybutton" value="X" style="width: 25px" onclick="jQuery().koverlay.hide();" />';
           html[html.length] = '       </td>';
            html[html.length] = '   </tr>';
            html[html.length] = '   <tr>';
            html[html.length] = '       <td colspan="2">';*/
            html[html.length] = '           <div class="css_koverlaycontent"></div>';
   /*         html[html.length] = '       </td>';
            html[html.length] = '   </tr>';
            html[html.length] = '   <tr>';
            html[html.length] = '       <td align="right" colspan="2">';*/
            html[html.length] = '         <div class="css_koverlaybutton" onclick="jQuery().koverlay.hide();" > [Close] </div>';
            html[html.length] = '       </div>';
            /*html[html.length] = '   </tr>';
            html[html.length] = '</table>';*/
            return html.join('');
        };
        if (this.length > 1) {
            var html = [];
            html[html.length] = '<div id="__koujalaMessage" style="display: none;">';
            html[html.length] = 'Selector must result in a unique DOM Element.';
            html[html.length] = '<br/>You have applied "' + this.selector + '" as a selector which is a collection of ' + this.selector.length + ' items';
            html[html.length] = '</div>';
            $(document.body).append(html.join(''));
            $("#__koujalaMessage").koverlay({ title: "Error", background: true });
            return;
        }

        //defaults;
        var defaults = {
            background: true,
            scroll: false,
            title: 'Title'
        };
        //apply user settings to defaults;
        options = $.extend(defaults, options);

        //load the overlay background div element once;
        var id_background = '__koujalaBackground';
        if ($('#' + id_background).size() == 0) {
            //append the overlay background element to document body;
            $(document.body).append('<div id="' + id_background + '"></div>');
            $('#' + id_background).css({ 'position': 'absolute', 'top': '0px', 'left': '0px' });
            $('#' + id_background).css({ 'display': 'none' });
            $('#' + id_background).css({ 'z-index': '9998' });
            $('#' + id_background).css({ 'height': $(window).height() });
            $('#' + id_background).css({ 'width': $(window).width() });
        }

        //apply background rules for new set of overlays;
        if (options.background == true) {
            $('#' + id_background).css({ 'background-color': 'silver' });
            $('#' + id_background).css({ 'opacity': '0.75' });
        }
        else {
            $('#' + id_background).css({ 'background-color': 'white' });
            $('#' + id_background).css({ 'opacity': '0.0' });
        }

        //check if there are overlay divs loaded already;
        var id_overlay = '__koujalaOverlay';
        var intCount = $('div[id^="__koujalaOverlay"]').size();
        if (intCount > 0) {
            $('#' + id_overlay + eval(intCount - 1)).fadeOut(500);
        }
        //Set a new ID for overlay div;
        id_overlay = '__koujalaOverlay' + intCount;

        //load the overlay div element;
        var html = [];
        html[html.length] = '<div id="' + id_overlay + '"></div>';

        //append the overlay element to document body;
        $(document.body).append(html.join(''));

        //append the html for overlay layout to div overlay;
        $('#' + id_overlay).html(template());

        //now apply css classes to elements
        $('#' + id_overlay + ' .css_koverlay').css(css_koverlay);
        $('#' + id_overlay + ' .css_koverlayheader').css(css_koverlayheader);
        $('#' + id_overlay + ' .css_koverlaybutton').css(css_koverlaybutton);
        $('#' + id_overlay + ' .css_koverlaycontent').css(css_koverlaycontent);

        //update the content placeholder element with html from the element;
        $('#' + id_overlay + ' .css_koverlayheader').html(options.title);
        $('#' + id_overlay + ' .css_koverlaycontent').html($(this.selector).html());
        $('#' + id_overlay).css({ 'position': 'absolute', 'display': 'none', 'z-index': '9999' });

        //get the height and width of the overlay;
        var intHeight = $('#' + id_overlay).height();
        var intWidth = $('#' + id_overlay).width();

        $('#' + id_overlay).css('height', intHeight);
        $('#' + id_overlay).css('width', intWidth);
        $('#' + id_overlay).css('top', ($(window).height() - intHeight) / 2);
        $('#' + id_overlay).css('left', ($(window).width() - intWidth) / 2);

        $(window).resize(function() {
            var intTop = $(window).scrollTop();
            var scrollTop = 0;
            if (!options.scroll) {
                scrollTop = $(window).scrollTop();
            }
            $('#' + id_overlay).css('top', ($(window).height() - intHeight) / 2 + scrollTop);
            $('#' + id_overlay).css('left', ($(window).width() - intWidth) / 2);
            $('#__koujalaBackground').css('height', $(window).height() + intTop);
            $('#__koujalaBackground').css('width', $(window).width());
        });

        $(window).scroll(function() {
            var intTop = $(window).scrollTop();
            var scrollTop = 0;
            if (!options.scroll) {
                scrollTop = $(window).scrollTop();
            }
            $('#' + id_overlay).css('top', ($(window).height() - intHeight) / 2 + scrollTop);
            $('#' + id_overlay).css('left', ($(window).width() - intWidth) / 2);
            $('#__koujalaBackground').css('height', $(window).height() + intTop);
            $('#__koujalaBackground').css('width', $(window).width());
        });

        //trigger resize to ensure scroll heights are taken into account;
        $(window).trigger('resize');
        
        //display the overlay background;
        $('#__koujalaBackground').fadeIn(250);

        //display the overlay now;
        $('#' + id_overlay).fadeIn(500);
        return this;
    };
    $.fn.koverlay.hide = function() {
        var id_background = '__koujalaBackground';
        var id_overlay = '__koujalaOverlay';

        var intCount = $('div[id^="__koujalaOverlay"]').size();
        if (intCount < 2) {
            $('#' + id_background).fadeOut(500);
        }
        else {
            id_overlay = '__koujalaOverlay' + eval(intCount - 2);
            $('#' + id_overlay).fadeIn(250);
        }
        id_overlay = '__koujalaOverlay' + eval(intCount - 1);
        $('#' + id_overlay).fadeOut(250);
        $('#' + id_overlay).remove();
    };
})(jQuery);
