﻿// Goodwill Industries of Central Indiana custom jQuery function for the modal Image window

jQuery.fn.gwImageModal = function () {

    var args = arguments[0] || {};
    var url = args.url;                 // the url of the image
    var bgColor = args.bgColor;         // the background color of the background fade in
    var fadeTo = args.fadeTo;           // the amount to fade to 0.0 to 1.0. ex. 0.6
    var width = args.width;             // the width of the shadow box
    var height = args.height;           // the height of the shadow box

    var img = new Image();
    img.src = url;

    $('body').append('<div id="gwBG" style="position: fixed;display: none;z-index:9998;top:0;left:0;width: 100%;height: 100%;background:#' + bgColor + ';"></div>'); // lets create the background div

    $('#gwBG').fadeTo('slow', fadeTo, function () {  // now we fade it in
        var nWidth = (img.width / 2);
        $('body').append('<div id="gwShadBox" style="position:fixed;display:none;z-index:9999;top:150px;left:50%;margin:0 0 0 -' + nWidth + 'px;border: 1px solid #fff;background: #000"></div>'); //create the image shadow box
        $('#gwShadBox').fadeIn().append(img); // now we fade it in and display the image element
        $('#gwShadBox').append('<a style="position:absolute;top:-12px;right:-12px;width:25px;height:25px;line-height:25px;text-align:center;background:#000;border:1px solid #fff;cursor:pointer;color:#fff;font-weight:bold">X</a>'); // the close button
    });

    $('#gwBG,#gwShadBox a').live('click', function () { // now if we click on the div, lets fade it out and disappear it ;)
        $('#gwShadBox').fadeOut(function () {
            $('#gwBG').fadeOut();
        }).html('');
    });

};

