share/lua/http/dialogs/mosaic_window.html

   1 <script language="javascript" type="text/javascript">
   2 //<![CDATA[
   3         $(function(){
   4                 $('#window_mosaic').dialog({
   5                         autoOpen: false,
   6                         width: 800,
   7                         maxWidth: 1000,
   8                         minWidth: 800,
   9                         minHeight: 500,
  10                         modal: true,
  11                         buttons: {
  12                                 "Create": function() {
  13                                         $(this).dialog("close");
  14                                 },
  15                                 "Cancel" : function(){
  16                                         $(this).dialog("close")
  17                                 }
  18                         }
  19                 });
  20                 $('#mosaic_bg').resizable({
  21                         maxWidth: 780,
  22                         ghost: true
  23                 });
  24                 $('#mosaic_tiles').draggable({
  25                         maxWidth: 780,
  26                         handle: 'h3',
  27                         containment: [13,98,99999999,99999999],
  28                         drag:function(event,ui){
  29                                 var xoff        =       ui.offset.left - $('#mosaic_bg').offset().left;
  30                                 var yoff        =       ui.offset.top - $('#mosaic_bg').offset().top-17;
  31                                 $('#mosaic_xoff').val(xoff);
  32                                 $('#mosaic_yoff').val(yoff);
  33                         }
  34                 });
  35                 $('input','#mosaic_options').change(setMosaic);
  36                 setMosaic();
  37         });
  38         function setMosaic(){
  39                 var rows        =       Number($('#mosaic_rows').val());
  40                 var cols        =       Number($('#mosaic_cols').val());
  41                 var n           =       0;
  42                 $('#mosaic_tiles').empty()
  43                 $('#mosaic_tiles').append('<tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>');
  44                 for(var i=0;i<rows;i++){
  45                         $('#mosaic_tiles').append('<tr>');
  46                         for(var j=0;j<cols;j++){
  47                                 $('tr:last','#mosaic_tiles').append('<td class="mosaic">');
  48                                 $('td:last','#mosaic_tiles').append('<div id="mosaic_open__'+n+'" class="button icon ui-widget ui-state-default" title="Open Media" style="margin-top:49%"><span class="ui-icon ui-icon-eject"></span></div>');
  49                                 n++;
  50                         }
  51                 }
  52                 $('.mosaic').resizable({
  53                         alsoResize: '.mosaic',
  54                         resize:function(event,ui){
  55                                 $('#mosaic_width').val(ui.size.width);
  56                                 $('#mosaic_height').val(ui.size.height);
  57                                 $('[id^=mosaic_open]').css({
  58                                         'margin-top': Number($('#mosaic_height').val()/2)
  59                                 });
  60                         }
  61                 });
  62                 $('.mosaic').css({
  63                         'background': '#33FF33',
  64                         'width': Number($('#mosaic_width').val()),
  65                         'height':Number($('#mosaic_height').val()),
  66                         'text-align': 'center',
  67                         'float' : 'left',
  68                         'border' : '1px solid #990000',
  69                         'margin-left': Number($('#mosaic_rbord').val()),
  70                         'margin-right': Number($('#mosaic_rbord').val()),
  71                         'margin-top': Number($('#mosaic_cbord').val()),
  72                         'margin-bottom': Number($('#mosaic_cbord').val())
  73                 });
  74                 $('[id^=mosaic_open_]').each(function(){
  75                         $(this).css({
  76                                 'margin-top': Number($('#mosaic_height').val()/2)
  77                         });
  78                         $(this).click(function(){
  79                                 browse_target   =       '#'+$(this).attr('id');
  80                                 get_dir();
  81                                 $('#window_browse').dialog('open');
  82                         });
  83                 });
  84
  85                 $('.button').hover(
  86                         function() { $(this).addClass('ui-state-hover'); },
  87                         function() { $(this).removeClass('ui-state-hover'); }
  88                 );
  89         }
  90 //]]>
  91 </script>
  92
  93 <div id="window_mosaic" title="Create Mosaic">
  94         <table id="mosaic_options">
  95                 <tr>
  96                         <td style="text-align:right">Rows:</td>
  97                         <td>
  98                                 <input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
  99                         </td>
 100                         <td style="text-align:right">x offset</td>
 101                         <td>
 102                                 <input type="text" name="mosaic_xoff" id="mosaic_xoff" size="3" value="0" disabled="disabled"/>
 103                         </td>
 104                         <td style="text-align:right">row border</td>
 105                         <td>
 106                                 <input type="text" name="mosaic_rbord" id="mosaic_rbord" size="3" value="5"/>
 107                         </td>
 108                         <td style="text-align:right">width</td>
 109                         <td>
 110                                 <input type="text" name="mosaic_width" id="mosaic_width" size="3" value="100" disabled="disabled"/>
 111                         </td>
 112                 </tr>
 113                 <tr>
 114                         <td style="text-align:right">Columns:</td>
 115                         <td>
 116                                 <input type="text" name="mosaic_cols" id="mosaic_cols" size="3" value="2"/>
 117                         </td>
 118                         <td style="text-align:right">y offset</td>
 119                         <td>
 120                                 <input type="text" name="mosaic_yoff" id="mosaic_yoff" size="3" value="0" disabled="disabled"/>
 121                         </td>
 122                         <td style="text-align:right">column border</td>
 123                         <td>
 124                                 <input type="text" name="mosaic_cbord" id="mosaic_cbord" size="3" value="5"/>
 125                         </td>
 126                         <td style="text-align:right">height</td>
 127                         <td>
 128                                 <input type="text" name="mosaic_height" id="mosaic_height" size="3" value="100" disabled="disabled"/>
 129                         </td>
 130                 </tr>
 131         </table>
 132         <div id="mosaic_bg" class="ui-widget-content" style="background: #3333FF;width:400px; height:300px;text-align: center; vertical-align: middle;">
 133                 <h3 style="margin:0px;font-weight:normal" class="ui-widget-header">Background</h3>
 134                 <table id="mosaic_tiles" class="ui-widget-content" cellpadding="0" cellspacing="0">
 135                         <tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>
 136                         <tr>
 137                                 <td class="mosaic"></td>
 138                                 <td class="mosaic"></td>
 139                         </tr>
 140                         <tr>
 141                                 <td class="mosaic"></td>
 142                                 <td class="mosaic"></td>
 143                         </tr>
 144                 </table>
 145         </div>
 146 </div>