// ---- ----
// dsdialog
// version: 0 (20100326a)
// rev: --
// author: Pierre Potvin
//
// ---- ----
//
//  usage:
//      
//      javascript:
//          $('#dialog-test')
//              .dsdialog({
//                  imgPath: 'path'
//                  tabTitle: 'title',
//                  useClose: true,     // adds the "close" button
//                  width: '400px'
//              });
//
//      css:
//          jquery.dsdialog.0.css
//    
//      html:
//        <div id="dialog-test">
//          lorem ipsum dolor sit amet
//        </div>
//
// ---- ----

/*
    TODO
    -> add allowEscape; separate from useClose
*/

(function($) {
    $.fn.dsdialog = function(options) {
    
        var defaults = {
            imgPath: _IMG + '/dsdialog',
            tabTitle: '',
            useClose: true,
            width: '400px'
        };
        
        var options = $.extend(defaults, options);
        
        return this.each(function() {
            var obj = $(this);
            
            // get id; clone content (previous bindings are lost)
            var objId = this.id;
            var objHtml = obj.html();
            
            obj.remove();
            
                       
            var html = 
                '   <div id="' + objId + '" style="display: none; background-color: transparent;">'
                + '     <div style="width: ' + options.width + '; padding: 5px;">'
                + '         <div class="dsdialog-header">'
                + '             <img src="' + options.imgPath + '/dialog-tab-left.png" style="width: 14px; height: 20px;" alt="" />'
                + '             <div class="dsdialog-tab">'
                + '                 ' + options.tabTitle
                + '             </div>'
                + '             <img src="' + options.imgPath + '/dialog-tab-right.png" style="width: 14px; height: 20px;" alt="" />';
                
            /*if (options.useClose)
            {
                html 
                    += '        <div class="dsdialog-close">'
                    + '            <a href="javascript:void(0);" onclick="return false;" class="close"><img src="' + options.imgPath + '/dialog-close.png" style="width: 16px; height: 16px;" alt="Close" /></a>'
                    + '        </div>';
            }*/
            
            html 
                += '        </div>'
                + '         <div class="dsdialog-body-wrapper">'
                + '             <img src="' + options.imgPath + '/dialog-top-left.png" style="display: block; float: left; width: 8px; height: 6px;" alt="" />'
                + '             <img src="' + options.imgPath + '/dialog-top-repeat.png" style="display: block; float: left; width: ' + (parseInt(options.width) - 26) + 'px; height: 6px;" alt="" />'
                + '             <img src="' + options.imgPath + '/dialog-top-right.png" style="display: block; float: left; width: 8px; height: 6px;" alt="" />'
                + '             <div class="dsdialog-body-content">'
                + '                 <div class="html">' + objHtml + '</div>';
                        
            if (options.useClose)
            {
                html 
                    += '            <div style="padding: 24px 0px 0px 0px; text-align: center;">'
                    + '                 <a href="javascript:void(0);" onclick="return false;" class="close"><img src="' + options.imgPath + '/dialog-btn-ok.png" style="width: 74px; height: 27px;" alt="OK" /></a>'
                    + '             </div>';
            }
                
            html                
                += '            </div>'
                + '             <img src="' + options.imgPath + '/dialog-bottom-left.png" style="display: block; float: left; width: 8px; height: 6px;" alt="" />'
                + '             <img src="' + options.imgPath + '/dialog-bottom-repeat.png" style="display: block; float: left; width: ' + (parseInt(options.width) - 26) + 'px; height: 6px;" alt="" />'
                + '             <img src="' + options.imgPath + '/dialog-bottom-right.png" style="display: block; float: left; width: 8px; height: 6px;" alt="" />'
                + '             <div style="clear: both;"></div>'
                + '         </div>'
                + '     </div>'
                + ' </div>';
            
            $('body').append(html);
            
            if (options.useClose) {
                // modal close
                $('#' + objId + ' a.close')
                    .click(
                        function() {
                            $.modal.close();
                        }
                    );
            }
            
        });
    }
})(jQuery);