var UI = new function()
{
    this.showWaitPopup = function()
    {
        // prepare popup's inner html
        var innerHtml = '<div style="padding: 7px; ' +
                                    'border: 2px solid #cccccc; ' +
                                    'background-color: #f0f0f0">' +
                            '<div style="padding: 15px; ' +
                                        'border: 1px solid #cccccc; ' +
                                        'background-color: #f5f5f5; ' +
                                        'color: #505050; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 8pt; ' +
                                        'text-align: left">' +
                                '<img src="images/wait.gif"' +
                                    ' alt=""' +
                                    ' width="48"' +
                                    ' height="48"' +
                                ' />' +
                            '</div>' +
                        '</div>';

        // show wait popup
        Popup.show('wait_popup', innerHtml);
    }

    this.hideWaitPopup = function()
    {
        // hide wait popup
        Popup.hide('wait_popup');
    }

    this.showInformationPopup = function(caption, content, okButtonText, onOkClick)
    {
        // prepare popup's inner html
        var innerHtml = '<div style="padding: 7px; ' +
                                    'border: 2px solid #cccccc; ' +
                                    'background-color: #f0f0f0">' +
                            '<div style="margin-bottom: 7px; ' +
                                        'color: #d05030; ' +
                                        'line-height: 16px; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 10pt; ' +
                                        'font-weight: bold; ' +
                                        'text-align: left">' +
                                '<img src="images/logo.gif"' +
                                         ' alt=""' +
                                         ' width="16"' +
                                         ' height="16"' +
                                         ' style="float: left; margin-right: 7px;"' +
                                ' />' +
                                caption +
                            '</div>' +
                            '<div style="padding: 15px; ' +
                                        'border: 1px solid #cccccc; ' +
                                        'background-color: #f5f5f5; ' +
                                        'color: #505050; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 8pt; ' +
                                        'text-align: left">' +
                                content +
                            '</div>' +
                            '<div style="margin-top: 7px; ' +
                                        'text-align: right">' +
                                '<input id="information_popup_ok"' +
                                      ' type="button"' +
                                      ' value="' + okButtonText + '"' +
                                      ' style="width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                            '</div>' +
                        '</div>';

        // show information popup
        Popup.show('information_popup', innerHtml);

        // set onclick event handler for 'ok' button
        document.getElementById('information_popup_ok').onclick = function()
        {
            // hide information popup
            Popup.hide('information_popup');

            // evaluate onOkClick code
            if (onOkClick != null)
                eval(onOkClick);
        }
    }

    this.showPromptPopup = function(caption, content, yesButtonText, noButtonText, onYesClick, onNoClick)
    {
        // prepare popup's inner html
        var innerHtml = '<div style="padding: 7px; ' +
                                    'border: 2px solid #cccccc; ' +
                                    'background-color: #f0f0f0">' +
                            '<div style="margin-bottom: 7px; ' +
                                        'color: #d05030; ' +
                                        'line-height: 16px; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 10pt; ' +
                                        'font-weight: bold; ' +
                                        'text-align: left">' +
                                '<img src="images/logo.gif"' +
                                         ' alt=""' +
                                         ' width="16"' +
                                         ' height="16"' +
                                         ' style="float: left; margin-right: 7px;"' +
                                ' />' +
                                caption +
                            '</div>' +
                            '<div style="padding: 15px; ' +
                                        'border: 1px solid #cccccc; ' +
                                        'background-color: #f5f5f5; ' +
                                        'color: #505050; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 8pt; ' +
                                        'text-align: left">' +
                                content +
                            '</div>' +
                            '<div style="margin-top: 7px; ' +
                                        'text-align: right">' +
                                '<input id="prompt_popup_yes"' +
                                      ' type="button"' +
                                      ' value="' + yesButtonText + '"' +
                                      ' style="width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                                '<input id="prompt_popup_no"' +
                                      ' type="button"' +
                                      ' value="' + noButtonText + '"' +
                                      ' style="margin-left: 5px; ' +
                                              'width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                            '</div>' +
                        '</div>';

        // show prompt popup
        Popup.show('prompt_popup', innerHtml);

        // set onclick event handler for 'yes' button
        document.getElementById('prompt_popup_yes').onclick = function()
        {
            // hide prompt popup
            Popup.hide('prompt_popup');

            // evaluate onYesClick code
            if (onYesClick != null)
                eval(onYesClick);
        }

        // set onclick event handler for 'no' button
        document.getElementById('prompt_popup_no').onclick = function()
        {
            // hide prompt popup
            Popup.hide('prompt_popup');

            // evaluate onNoClick code
            if (onNoClick != null)
                eval(onNoClick);
        }
    }

    this.showBrowsePopup = function(caption, okButtonText, cancelButtonText, items, targetObject)
    {
        // prepare html for list of items
        var optionsHtml = '';

        for (var i = 0; i < items.length; i++)
        {
            if (items[i] == targetObject.value)
                optionsHtml += '<option selected="selected">' + items[i] +'</option>';
            else
                optionsHtml += '<option>' + items[i] +'</option>';
        }

        // prepare popup's inner html
        var innerHtml = '<div style="padding: 7px; ' +
                                    'border: 2px solid #cccccc; ' +
                                    'background-color: #f0f0f0">' +
                            '<div style="margin-bottom: 7px; ' +
                                        'color: #d05030; ' +
                                        'line-height: 16px; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 10pt; ' +
                                        'font-weight: bold; ' +
                                        'text-align: left">' +
                                '<img src="images/logo.gif"' +
                                         ' alt=""' +
                                         ' width="16"' +
                                         ' height="16"' +
                                         ' style="float: left; margin-right: 7px;"' +
                                ' />' +
                                caption +
                            '</div>' +
                            '<div style="padding: 15px; ' +
                                        'border: 1px solid #cccccc; ' +
                                        'background-color: #f5f5f5; ' +
                                        'color: #505050; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 8pt; ' +
                                        'text-align: left">' +
                                '<select id="browse_popup_list"' +
                                       ' size="20"' +
                                       ' style="margin: 0; ' +
                                               'width: 300px">' +
                                    optionsHtml +
                                '</select>' +
                            '</div>' +
                            '<div style="margin-top: 7px; ' +
                                        'text-align: right">' +
                                '<input id="browse_popup_ok"' +
                                      ' type="button"' +
                                      ' value="' + okButtonText + '"' +
                                      ' style="width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                                '<input id="browse_popup_cancel"' +
                                      ' type="button"' +
                                      ' value="' + cancelButtonText + '"' +
                                      ' style="margin-left: 5px; ' +
                                              'width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                            '</div>' +
                        '</div>';

        // show browse popup
        Popup.show('browse_popup', innerHtml);

        // set onclick event handler for 'ok' button
        document.getElementById('browse_popup_ok').onclick = function()
        {
            // get item list object
            var listObject = document.getElementById('browse_popup_list');

            // check if selection is valid
            if (listObject.selectedIndex == -1)
                return;

            // update value in target element
            targetObject.value = listObject.options[listObject.selectedIndex].text;

            // call onchange event handler of target object
            if (targetObject.onchange != null)
                targetObject.onchange();

            // hide browse popup
            Popup.hide('browse_popup');
        }

        // set onclick event handler for 'cancel' button
        document.getElementById('browse_popup_cancel').onclick = function()
        {
            // hide browse popup
            Popup.hide('browse_popup');
        }
    }

    this.showBrowseImagePopup = function(caption, okButtonText, cancelButtonText, items, targetObject)
    {
        // prepare html for list of items
        var optionsHtml = '';

        for (var i = 0; i < items.length; i++)
        {
            if (items[i] == targetObject.value)
                optionsHtml += '<option selected="selected">' + items[i] +'</option>';
            else
                optionsHtml += '<option>' + items[i] +'</option>';
        }

        // prepare popup's inner html
        var innerHtml = '<div style="padding: 7px; ' +
                                    'border: 2px solid #cccccc; ' +
                                    'background-color: #f0f0f0">' +
                            '<div style="margin-bottom: 7px; ' +
                                        'color: #d05030; ' +
                                        'line-height: 16px; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 10pt; ' +
                                        'font-weight: bold; ' +
                                        'text-align: left">' +
                                '<img src="images/logo.gif"' +
                                         ' alt=""' +
                                         ' width="16"' +
                                         ' height="16"' +
                                         ' style="float: left; margin-right: 7px;"' +
                                ' />' +
                                caption +
                            '</div>' +
                            '<div style="overflow: hidden; ' +
                                        'padding: 15px; ' +
                                        'border: 1px solid #cccccc; ' +
                                        'background-color: #f5f5f5; ' +
                                        'color: #505050; ' +
                                        'font-family: verdana, sans-serif; ' +
                                        'font-size: 8pt; ' +
                                        'text-align: left">' +
                                '<div id="browse_image_popup_preview_container"' +
                                    ' style="float: left; ' +
                                            'position: relative; ' +
                                            'width: 300px; ' +
                                            'height: 300px; ' +
                                            'border: 1px solid #cccccc; ' +
                                            'background-color: #fafafa">' +
                                '</div>' +
                                '<select id="browse_image_popup_list"' +
                                       ' size="3"' +
                                       ' style="float: left; ' +
                                               'display: block; ' +
                                               'margin: 0 0 0 10px; ' +
                                               'width: 250px; ' +
                                               'height: 302px">' +
                                    optionsHtml +
                                '</select>' +
                            '</div>' +
                            '<div style="margin-top: 7px; ' +
                                        'text-align: right">' +
                                '<input id="browse_image_popup_ok"' +
                                      ' type="button"' +
                                      ' value="' + okButtonText + '"' +
                                      ' style="width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                                '<input id="browse_image_popup_cancel"' +
                                      ' type="button"' +
                                      ' value="' + cancelButtonText + '"' +
                                      ' style="margin-left: 5px; ' +
                                              'width: 80px; ' +
                                              'height: 26px; ' +
                                              'font-family: verdana, sans-serif; ' +
                                              'font-size: 8pt; ' +
                                              'font-weight: bold"' +
                                ' />' +
                            '</div>' +
                        '</div>';

        // show browse image popup
        Popup.show('browse_image_popup', innerHtml);

        // set onchange event handler for image list
        document.getElementById('browse_image_popup_list').onchange = function()
        {
            // get preview container object, loading object, preview object and image list object
            var previewContainerObject = document.getElementById('browse_image_popup_preview_container');
            var loadingObject = document.getElementById('browse_image_popup_loading');
            var previewObject = document.getElementById('browse_image_popup_preview');
            var listObject = document.getElementById('browse_image_popup_list');

            // remove loading object
            if (loadingObject != null)
                previewContainerObject.removeChild(loadingObject);

            // remove preview object
            if (previewObject != null)
                previewContainerObject.removeChild(previewObject);

            // check if selection is valid
            if (listObject.selectedIndex != -1)
            {
                // create "loading" object
                loadingObject = document.createElement('img');
                loadingObject.id = 'browse_image_popup_loading';
                loadingObject.src = 'images/wait.gif';
                loadingObject.style.position = 'absolute';
                loadingObject.style.left = '126px';
                loadingObject.style.top = '126px';
                loadingObject.style.width = '48px';
                loadingObject.style.height = '48px';
                previewContainerObject.appendChild(loadingObject);

                // create "preview" object
                previewObject = document.createElement('img');
                previewObject.id = 'browse_image_popup_preview';
                previewObject.style.position = 'absolute';

                // set onload event handler for preview object
                previewObject.onload = function()
                {
                    // initialize helper vairables
                    var width = previewObject.width;
                    var height = previewObject.height;
                    var ratio = width / height;

                    // check image orientation
                    if (ratio > 1)
                    {
                        // resize landscape image
                        if (width > 300)
                        {
                            width = 300;
                            height = width / ratio;
                        }
                    }
                    else
                    {
                        // resize portrait image
                        if (height > 300)
                        {
                            height = 300;
                            width = height * ratio;
                        }
                    }

                    // update preview object
                    previewObject.style.left = ((300 - width) / 2) + "px";
                    previewObject.style.top = ((300 - height) / 2) + "px";
                    previewObject.style.width = width + 'px';
                    previewObject.style.height = height + 'px';

                    // hide loading object
                    previewContainerObject.removeChild(loadingObject);

                    // show preview object
                    previewContainerObject.appendChild(previewObject);
                }

                // update preview source
                previewObject.src = 'administration/' + listObject.options[listObject.selectedIndex].text;
            }
        }

        // set onclick event handler for 'ok' button
        document.getElementById('browse_image_popup_ok').onclick = function()
        {
            // get image list object
            var listObject = document.getElementById('browse_image_popup_list');

            // check if selection is valid
            if (listObject.selectedIndex == -1)
                return;

            // update value in target element
            targetObject.value = listObject.options[listObject.selectedIndex].text;

            // call onchange event handler of target object
            if (targetObject.onchange != null)
                targetObject.onchange();

            // hide browse image popup
            Popup.hide('browse_image_popup');
        }

        // set onclick event handler for 'cancel' button
        document.getElementById('browse_image_popup_cancel').onclick = function()
        {
            // hide browse image popup
            Popup.hide('browse_image_popup');
        }

        // call onchange event handler of image list
        document.getElementById('browse_image_popup_list').onchange();
    }
}