//standard pop-up dialog
function newDlg(id, width, height, hdr_height, ftr_height, title, close_callback, noclosebutton, movable) {

    //main content div and basic corners/sides
    var dlgMain = $('<div>').attr('style', '').css({ 'position': 'absolute', 'z-index': '4000', 'top': '0px', 'left': '0px', 'height': height + 'px', 'width': width + 'px', 'display': 'none' })
        .attr('id', id);

    var borderColorDef = new ColorDef('601010', 255);
    var fillColorDef = new ColorDef('040202', 255);
    var cornerSize = 32;
    var borderThickness = 2;
    var backgroundColorDef = new ColorDef('000000', 0);
    var opts = {
        borderThickness: borderThickness,
        cornerSize: cornerSize,
        borderColor: borderColorDef,
        fillColor: fillColorDef,
        backgroundColor: backgroundColorDef
    };
    var contColor = '000000';


    $(dlgMain).theme_corner(opts);

    //reality check on footer and header sizes
    if (hdr_height < 45) hdr_height = 45;
    if (ftr_height < 20) ftr_height = 20;

    if (noclosebutton != true) {

        var cbUrl = theme_close_button_url();
        //close button and title
        var close = $('<img>').css({ 'position': 'absolute', 'top': '5px', 'right': '6px', 'cursor': 'pointer' }).attr({ 'src': cbUrl });
        $(dlgMain).append(close);
        close.click(function() {
            if (close_callback != null) close_callback();
            $(dlgMain).fadeOut(500, function() { $(dlgMain).remove() });
        });

    }
    var hdr = $('<div>')
        .css({
            'position': 'absolute',
            'top': '8px',
            'left': '10px',
            'right': '30px',
            'font-size': '25px',
            'color': '#F05050',
            'font-weight': 'bold'
        })
        .html(title);
    $(dlgMain).append(hdr);
    if (movable) {
        hdr.mousedown(function() { grab(document.getElementById(id)) });
        hdr.css('cursor', 'pointer');
    }

    //the bottom of the dialogs do not have a color fill, so we need to specialize the cornering
    //theme_corner_url(background_color, border_color, fill_color, border_thickness, corner_size, type)
    var contColorDef = new ColorDef(contColor, 255);

    //content and footer divs
    $(dlgMain)
        .append($('<div>').css({ 'position': 'absolute', 'background-color': contColor, 'left': borderThickness + 'px', 'right': borderThickness + 'px', 'bottom': (cornerSize / 2) + 'px', 'height': ftr_height + 'px' }))
        .append($('<div>').css({ 'position': 'absolute', 'left': borderThickness + 'px', 'right': borderThickness + 'px', 'bottom': '0px', 'height': ftr_height + 'px' }).attr('id', id + '_footer'))
        .append($('<div>').attr('class', 'dialogContent').css({ 'background-color': contColor, 'position': 'absolute', 'left': borderThickness + 'px', 'right': borderThickness + 'px', 'bottom': (ftr_height + (cornerSize / 2)) + 'px', 'top': hdr_height + 'px' }).attr('id', id + '_content'))
        ;
    return dlgMain;

}

function ColorDef(color, alpha) {
    this.color = color.replace('#', '');
    this.alpha = alpha;
}

//theme rounded corners
$.fn.theme_corner = function(options) {
    var defaults = {
        borderThickness: 6,
        cornerSize: 18,
        borderColor: new ColorDef('000000', 255),
        fillColor: new ColorDef('FFFFFF', 0),
        backgroundColor: new ColorDef('FFFFFF', 0)
    }
    var options = $.extend(defaults, options);


    return this.each(function() {
        var obj = $(this);
        var offset = -1 * options.cornerSize / 2;
        var tl = $('<div>').pos({ top: offset, left: offset, height: options.cornerSize, width: options.cornerSize }).css('background-image', 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'tl') + ')');
        var tr = $('<div>').pos({ top: offset, right: offset, height: options.cornerSize, width: options.cornerSize }).css('background-image', 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'tr') + ')');
        var br = $('<div>').pos({ bottom: offset, right: offset, height: options.cornerSize, width: options.cornerSize }).css('background-image', 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'br') + ')');
        var bl = $('<div>').pos({ bottom: offset, left: offset, height: options.cornerSize, width: options.cornerSize }).css('background-image', 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'bl') + ')');
        var t = $('<div>').pos({ top: offset, left: options.cornerSize + offset, right: options.cornerSize + offset, height: options.cornerSize }).css({ 'background-repeat': 'repeat', 'background-image': 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 't') + ')' });
        var b = $('<div>').pos({ bottom: offset, left: options.cornerSize + offset, right: options.cornerSize + offset, height: options.cornerSize }).css({ 'background-repeat': 'repeat', 'background-image': 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'b') + ')' });
        var r = $('<div>').pos({ right: offset, top: options.cornerSize + offset, bottom: options.cornerSize + offset, width: options.cornerSize }).css({ 'background-repeat': 'repeat', 'background-image': 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'r') + ')' });
        var l = $('<div>').pos({ left: offset, top: options.cornerSize + offset, bottom: options.cornerSize + offset, width: options.cornerSize }).css({ 'background-repeat': 'repeat', 'background-image': 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'l') + ')' });
        var f = $('<div>').pos({ left: options.cornerSize + offset, top: options.cornerSize + offset, bottom: options.cornerSize + offset, right: options.cornerSize + offset }).css({ 'z-index': '-100', 'background-repeat': 'repeat', 'background-image': 'url(' + theme_corner_url(options.backgroundColor, options.borderColor, options.fillColor, options.borderThickness, options.cornerSize, 'f') + ')' });

        $(obj)
            .append(tl)
            .append(tr)
            .append(br)
            .append(bl)
            .append(l)
            .append(b)
            .append(r)
            .append(t)
            .append(f)
    });
}
function theme_corner_url(background_color, border_color, fill_color, border_thickness, corner_size, type) {
    var url = '/Home/themeimage/corners/crn_sz-' + corner_size + '~brd_t-' + border_thickness + '~typ-' + type;
    url = url + '~brd_c-' + border_color.color + '~brd_a-' + border_color.alpha;
    url = url + '~fil_c-' + fill_color.color + '~fil_a-' + fill_color.alpha;
    url = url + '~bgd_c-' + background_color.color + '~bgd_a-' + background_color.alpha;
    url = url + '.png';
    return url;
}

function theme_close_button_url(css) {

    var url = '/Home/ThemeImage/icons/typ-close';
    url = url + '~x_t-4~diam-26~mrg-4~brd_t-3';
    url = url + '~x_c-C05050~x_a-255';
    url = url + '~brd_c-994040~brd_a-255';
    url = url + '~bgd_c-000000~bgd_a-0';
    url = url + '~fil_c-AA7070~fil_a-0';
    url = url + '.png';
    return url;
}


function btnImgURL(type) {
    var url = '/Home/ThemeImage/buttons/bh-20';
    url = url + '~cd-10';
    url = url + '~spc-5';
    url = url + '~pad-5';
    url = url + '~typ-' + type;
    url = url + '.png';
    return url;
}