/*
  Hibox Systems PCTV GUI Functions

  Copyright Hibox Systems 2008
*/

(function( $ ) {

    /* Highlight
     *
     * Adds a highlight function to XHTML elements
     *
     * Usage: $( listId ).hbHightlight( [options] )
     *
     * Options: hoverClass         - Class to apply when hovering over an item. Default: hover
     *                    selectedClass - Class that is applied to the selected item. Default: selected
     *
     * Elements containing the class 'ignore' won't be affected.
     */
    $.fn.hbHighlight = function( settings ) {

        settings = $.extend( {
            hoverClass: 'hover',
            selectedClass: 'selected'
        }, settings );

        return this.each( function() {
            $(this).not( '.' + settings.selectedClass ).not( '.ignore' )
                   .hover( function() { $(this).addClass( settings.hoverClass ); }, function() { $(this).removeClass( settings.hoverClass ); } );
        });
    };

    /* Program List
     *
     * Applyable to an XHTML table. When a row is clicked it will get the selected class added
     * to itself and the row below it will become visible if it has the class 'selectedinformation'.
     * The idea is to allow program information to be collapsed until clicked on.
     *
     * Format:
     * Row 1 - Item 1
     * Row 2 - Item 1's hidden information
     * Row 2 - Item 2
     * Row 2 - Item 2's hidden information
     *
     * Usage: $( listId ).hbProgramsList ( [options] )
     *
     * Options: hoverClass                                 - Class to apply when hovering over an item. Default: hover
     *                    selectedClass                             - Class to apply to the selected item. Default: selected
     *                    selectedInformationClass    - Class containing hidden information linked to the row above
     */

    $.fn.hbProgramsList = function(settings) {

        var selected = null;

        settings = $.extend({
            hoverClass: 'hover',
            selectedClass: 'selected',
            selectedInformationClass: 'selectedinformation'
        }, settings);

        return this.each(function() {
            $("tr", this).not('.' + settings.selectedInformationClass).not('.' + settings.selectedClass).not('.ignore').hover(function() {
                $(this).addClass(settings.hoverClass);
            }, function() {
                $(this).removeClass(settings.hoverClass);
            }).click(function() {
                if (!$(this).hasClass(settings.selectedClass)) {
                    if (selected) {
                        selected.removeClass(settings.selectedClass);
                        selected.next('.' + settings.selectedInformationClass).hide();
                    }

                    selected = $(this);
                    $(this).addClass(settings.selectedClass);
                    $(this).next().show();
                } else {
                    $(this).removeClass(settings.selectedClass);
                    $(this).next('.' + settings.selectedInformationClass).hide();
                }
            });

        });
    };

})( jQuery );


/* Show Message Box
 *
 * Darkens the screen and shows a modal
 * messagebox with a a message and an OK
 * button. Uses simplemodal.js.
 *
 * Usage: showMsgBox( message )
 */
function showMsgBox(message, onclosefunc) {
//    $('#messageboxmsg').html(message);
    $('#messagebox').modal({
        onOpen: function(dlg) {
            dlg.overlay.show();
            dlg.container.show();
            dlg.data.show();
            $('.button', '#modalContainer').hbHighlight();
        },
        onClose: function(dlg) {
            dlg.data.hide();
            dlg.container.hide();
            dlg.overlay.hide();
            jQuery.modal.close();

            if (onclosefunc !== undefined) {
                onclosefunc();
            }
        }
    });
    $('#messageboxmsg').html(message);
}

// HTML Elements needed for the message box

$( document ).ready( function() {
    // Add msg box container to page
    var html = '' +
    '<div id="messagebox" class="modalpopup" style="display: none;">' +
    '  <div class="top"></div>' +
    '  <div class="middle">' +
    '    <p id="messageboxmsg"></p>' +
    '    <div class="button modalClose">OK</div>' +
    '  </div>' +
    '  <div class="bottom"></div>' +
    '</div>';
    $('html').append( html );

    // ToDo: Add configm box container to page
//    var html = '' +
//    '<div id="confirmbox" class="modalpopup" style="display: none;">' +
//    '  <div class="top"></div>' +
//    '  <div class="middle">' +
//    '    <p id="confirmboxmsg"></p>' +
//    '    <div class="button modalClose">Yes</div><div class="button modalClose">Cancel</div>' +
//    '  </div>' +
//    '  <div class="bottom"></div>' +
//    '</div>';
//    $('html').append( html );
} );