1 <script language="javascript" type="text/javascript">
3 $('#window_mosaic').dialog({
11 "Create": function() {
12 $(this).dialog("close");
14 "Cancel" : function(){
15 $(this).dialog("close")
19 $('#mosaic_bg').resizable({
23 $('#mosaic_tiles').draggable({
26 containment: [13,98,99999999,99999999],
27 drag:function(event,ui){
28 var xoff = ui.offset.left - $('#mosaic_bg').offset().left;
29 var yoff = ui.offset.top - $('#mosaic_bg').offset().top-17;
30 $('#mosaic_xoff').val(xoff);
31 $('#mosaic_yoff').val(yoff);
34 $('input','#mosaic_options').change(setMosaic);
38 var rows = Number($('#mosaic_rows').val());
39 var cols = Number($('#mosaic_cols').val());
41 $('#mosaic_tiles').empty()
42 $('#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>');
43 for(var i=0;i<rows;i++){
44 $('#mosaic_tiles').append('<tr>');
45 for(var j=0;j<cols;j++){
46 $('tr:last','#mosaic_tiles').append('<td class="mosaic">');
47 $('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>');
51 $('.mosaic').resizable({
52 alsoResize: '.mosaic',
53 resize:function(event,ui){
54 $('#mosaic_width').val(ui.size.width);
55 $('#mosaic_height').val(ui.size.height);
56 $('[id^=mosaic_open]').css({
57 'margin-top': Number($('#mosaic_height').val()/2)
62 'background': '#33FF33',
63 'width': Number($('#mosaic_width').val()),
64 'height':Number($('#mosaic_height').val()),
65 'text-align': 'center',
67 'border' : '1px solid #990000',
68 'margin-left': Number($('#mosaic_rbord').val()),
69 'margin-right': Number($('#mosaic_rbord').val()),
70 'margin-top': Number($('#mosaic_cbord').val()),
71 'margin-bottom': Number($('#mosaic_cbord').val())
73 $('[id^=mosaic_open_]').each(function(){
75 'margin-top': Number($('#mosaic_height').val()/2)
77 $(this).click(function(){
78 browse_target = '#'+$(this).attr('id');
80 $('#window_browse').dialog('open');
85 function() { $(this).addClass('ui-state-hover'); },
86 function() { $(this).removeClass('ui-state-hover'); }
91 <div id="window_mosaic" title="Create Mosaic">
92 <table id="mosaic_options">
94 <td style="text-align:right">Rows:</td>
96 <input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
98 <td style="text-align:right">x offset</td>
100 <input type="text" name="mosaic_xoff" id="mosaic_xoff" size="3" value="0" disabled="disabled"/>
102 <td style="text-align:right">row border</td>
104 <input type="text" name="mosaic_rbord" id="mosaic_rbord" size="3" value="5"/>
106 <td style="text-align:right">width</td>
108 <input type="text" name="mosaic_width" id="mosaic_width" size="3" value="100" disabled="disabled"/>
112 <td style="text-align:right">Columns:</td>
114 <input type="text" name="mosaic_cols" id="mosaic_cols" size="3" value="2"/>
116 <td style="text-align:right">y offset</td>
118 <input type="text" name="mosaic_yoff" id="mosaic_yoff" size="3" value="0" disabled="disabled"/>
120 <td style="text-align:right">column border</td>
122 <input type="text" name="mosaic_cbord" id="mosaic_cbord" size="3" value="5"/>
124 <td style="text-align:right">height</td>
126 <input type="text" name="mosaic_height" id="mosaic_height" size="3" value="100" disabled="disabled"/>
130 <div id="mosaic_bg" class="ui-widget-content" style="background: #3333FF;width:400px; height:300px;text-align: center; vertical-align: middle;">
131 <h3 style="margin:0px;font-weight:normal" class="ui-widget-header">Background</h3>
132 <table id="mosaic_tiles" class="ui-widget-content" cellpadding="0" cellspacing="0">
133 <tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>
135 <td class="mosaic"></td>
136 <td class="mosaic"></td>
139 <td class="mosaic"></td>
140 <td class="mosaic"></td>