1 <script type="text/javascript">
4 $('#window_mosaic').dialog({
12 "<?vlc gettext("Create") ?>": function() {
13 $(this).dialog("close");
15 "<?vlc gettext("Cancel") ?>" : function(){
16 $(this).dialog("close")
20 $('#mosaic_bg').resizable({
24 $('#mosaic_tiles').draggable({
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);
35 $('input','#mosaic_options').change(setMosaic);
39 var rows = Number($('#mosaic_rows').val());
40 var cols = Number($('#mosaic_cols').val());
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"><?vlc gettext("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>');
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)
63 'background': '#33FF33',
64 'width': Number($('#mosaic_width').val()),
65 'height':Number($('#mosaic_height').val()),
66 'text-align': 'center',
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())
74 $('[id^=mosaic_open_]').each(function(){
76 'margin-top': Number($('#mosaic_height').val()/2)
78 $(this).click(function(){
79 browse_target = '#'+$(this).attr('id');
81 $('#window_browse').dialog('open');
86 function() { $(this).addClass('ui-state-hover'); },
87 function() { $(this).removeClass('ui-state-hover'); }
93 <div id="window_mosaic" title="<?vlc gettext("Create Mosaic") ?>">
94 <table id="mosaic_options">
96 <td style="text-align:right"><?vlc gettext("Rows") ?></td>
98 <input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
100 <td style="text-align:right"><?vlc gettext("X offset") ?></td>
102 <input type="text" name="mosaic_xoff" id="mosaic_xoff" size="3" value="0" disabled="disabled"/>
104 <td style="text-align:right"><?vlc gettext("Row border") ?></td>
106 <input type="text" name="mosaic_rbord" id="mosaic_rbord" size="3" value="5"/>
108 <td style="text-align:right"><?vlc gettext("Width") ?></td>
110 <input type="text" name="mosaic_width" id="mosaic_width" size="3" value="100" disabled="disabled"/>
114 <td style="text-align:right"><?vlc gettext("Columns") ?></td>
116 <input type="text" name="mosaic_cols" id="mosaic_cols" size="3" value="2"/>
118 <td style="text-align:right"><?vlc gettext("Y offset") ?></td>
120 <input type="text" name="mosaic_yoff" id="mosaic_yoff" size="3" value="0" disabled="disabled"/>
122 <td style="text-align:right"><?vlc gettext("Column border") ?></td>
124 <input type="text" name="mosaic_cbord" id="mosaic_cbord" size="3" value="5"/>
126 <td style="text-align:right"><?vlc gettext("Height") ?></td>
128 <input type="text" name="mosaic_height" id="mosaic_height" size="3" value="100" disabled="disabled"/>
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"><?vlc gettext("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"><?vlc gettext("Mosaic Tiles") ?></h3></td></tr>
137 <td class="mosaic"></td>
138 <td class="mosaic"></td>
141 <td class="mosaic"></td>
142 <td class="mosaic"></td>