﻿$.satFlyout = function(header, message, isModal, applicationPath)
{

    // the div that will contain the header and message
    var topContent = $('<div></div>').css({
        background: 'transparent url(' + applicationPath + '/images/customalert.png) 0px 0px no-repeat',    
        minHeight: '200px',   
        padding: '0px 30px 13px 30px'     
    }).attr('class', 'leftelem');
    
    // the footer div
    var lowerContent = $('<div></div>').css({
        background: 'transparent url(' + applicationPath + '/images/customalert.png) 0px 100% no-repeat',
        height: '37px'
    });
    
    var closeButton = $('<div></div>').css({
        width: '15px',
        height: '15px',
        padding: '16px 0px 10px',
        marginLeft: '565px'
    }).appendTo(topContent).bind('click', function()
    {
        errorBox.remove();
    });
        
    
    $('<img src="' + applicationPath + '/images/littlePeopleGroup.png" alt="" />').css({
        float: 'left',
        margin: '5px 10px 0px 0px'
    }).appendTo(topContent);
        
    var headerElem = $('<div></div>').css({
        fontFamily: 'Verdana',
        fontSize: '15pt',
        fontStyle: 'italic',
        fontWeight: 'bold',
        color: '#5b0000'
    }).append(header).append('<hr />').appendTo(topContent);
    
    var messageElem = $('<div></div>').css({
        fontFamily: 'verdana',
        fontSize: '10pt',
        color: '#333333',
        marginTop: '10px'
    }).append(message).appendTo(topContent);
        
    var wrapper = $('<div></div>').append(topContent).append(lowerContent);
    
    var errorBox = $.showFlyout(1, {
        width: 628,
        height: 200,
        css: {
            background: 'transparent'
        },
		showCloseButton: false
    }, isModal, wrapper);
}
