// =============
    // ==== VAR ====
    // =============
 
    var $modalBoxTotal = 0;
    
    // ===============
    // ==== METOD ====
    // =============== 
   
    function percentToPix ($value) 
    {
        return $value == null ? 0 : parseInt (screen.width * $value / 100);
    }
 
    function modalBoxLoad (content, $option) 
    { 
        var ID = $modalBoxTotal;
        $width = 80;
        $modalBoxId = 'modalBoxId-' + ID;
        $style = 'style="max-width:' + percentToPix ($width) + 'px;"';
        
        var $modal = 
        '<div class="modalBox ' + $modalBoxId + '" ' + $style + '>'
            + '<div class="right"><div class="close bClose">X</div></div>'
            + '<div class="content">' + content + '</div>'
        + '</div>';
        
        var $default = {
            'id': ID,
            'transition': 'slideDown',
//            'closeClass': 'bClose-' + ID,
            'onOpen': function() { 
                $modalBoxTotal++;
                $(this).html($modal)
            },
            'onClose': function() { 
                $modalBoxTotal--;
                $('.' + $modalBoxId).remove();
            },
            'width': $width
        };
        
        var $setting = $.extend({}, $default, $option);
  
        if ($('#duty').length == 0)
        {
            $('body').append('<div id="duty"></div>').promise().done(function()
            {
                $('#duty').bPopup($setting).reposition(1); 
            });            
        }
        else
        {
            $('#duty').bPopup($setting).reposition(1); 
        }
    }
    
    function modalBoxClose () 
    {
        $('#duty').bPopup().close();
    }
        
    
    function isModalBox () 
    {  
        return ($modalBoxTotal > 0) ? true : false;
    }