Wrapped the "Indexes" and "Information" sections from tbl_structure.php in fieldsets
[phpmyadmin/arisferyanto.git] / js / pmd / move.js
blob6bb971744fc8568ecbf03fafde29bc275a39eb38
1 /* vim: set expandtab sw=4 ts=4 sts=4: */
2 /**
3  * @package PhpMyAdmin-Designer
4  */
6 /**
7  * init
8  */
11  var _change = 0; // variable to track any change in designer layout.
12  var _staying = 0; //  variable to check if the user stayed after seeing the confirmation prompt.
14 //   Below is the function to change the href attributes to '#' while the href script is called using
15 //   the onclick event. It fixes the Internet Explorer issue with href.
17  $(document).ready(function(){
18     $('a').filter(function(){
19         return ( /^javascript\:/i).test($(this).attr('href'));
20     }).each(function(){
21         var hrefscript = $(this).attr('href');
22         hrefscript = hrefscript.substr(11);
23         $(this).data('hrefscript', hrefscript);
24     }).click(function(){
25         var hrefscript = $(this).data('hrefscript');
26         eval (hrefscript);
27         return false;
28     }).attr('href', '#');
29 });
31 // Below is the function to bind onbeforeunload events with the content_frame as well as the top window.
33  $(document).ready(function(){
34     $(window).bind('beforeunload', function(){        // onbeforeunload for the frame window.
35         if (_change == 1 && _staying == 0)
36             return PMA_messages['strLeavingDesigner'];
37         else if (_change == 1 && _staying == 1)
38             _staying = 0;
39     });
40     $(window).unload(function(){
41         _change = 0;
42     });
43     window.top.onbeforeunload = function(){     // onbeforeunload for the browser main window.
44         if (_change == 1 && _staying == 0){
45             _staying = 1;                                                   //  Helps if the user stays on the page  as there
46             setTimeout('make_zero();', 100);                    //   is no other way of knowing whether the user stayed or not.
47             return PMA_messages['strLeavingDesigner'];
48         }
49     };
50 });
52  function make_zero(){   // Function called if the user stays after seeing the confirmation prompt.
53       _staying = 0;
57 var dx, dy, dy2;
58 var cur_click;
59 // update in Main()
60 var sm_x = 2, sm_y = 2;
61 var sm_s           = 0;
62 var sm_add         = 10;
63 var s_left         = 0;
64 var s_right        = 0;
65 var ON_relation    = 0;
66 var ON_grid        = 0;
67 var ON_display_field = 0;
68 // relation_style: 0 - angular 1 - direct
69 var ON_angular_direct = 1;
70 var click_field    = 0;
71 var link_relation  = "";
72 var id_hint;
73 var canvas_width   = 0;
74 var canvas_height  = 0;
75 var osn_tab_width  = 0;
76 var osn_tab_height = 0;
77 var height_field   = 7;
78 var Glob_X, Glob_Y;
79 var timeoutID;
80 var layer_menu_cur_click = 0;
81 var step = 10;
82 var old_class;
83 var from_array = [];
84 var downer;
86 //------------------------------------------------------------------------------
87 //------------------------------------------------------------------------------
88 //------------------------------------------------------------------------------
91 //window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
92 //---CROSS
93 document.onmousedown = MouseDown;
94 document.onmouseup   = MouseUp;
95 document.onmousemove = MouseMove;
97 var isIE = document.all && !window.opera;
98 var isNN = !document.all && document.getElementById;
99 var isN4 = document.layers;
101 if (isIE) {
102     window.onscroll = General_scroll;
103     document.onselectstart = function () {return false;};
106 //document.onmouseup = function(){General_scroll_end();}
107 function MouseDown(e)
109     var offsetx, offsety;
110     if (cur_click != null) {
111         offsetx = isIE ? event.clientX + document.body.scrollLeft : e.pageX;
112         offsety = isIE ? event.clientY + document.body.scrollTop : e.pageY;
113         dx = offsetx - parseInt(cur_click.style.left);
114         dy = offsety - parseInt(cur_click.style.top);
115         //alert(" dx = " + dx + " dy = " +dy);
116         document.getElementById("canvas").style.display = 'none';
117         /*
118         var left = parseInt(cur_click.style.left);
119         var top  = parseInt(cur_click.style.top);
120         dx = e.pageX - left;
121         dy = e.pageY - top;
123         alert(" dx = " + dx + " dy = " +dy);
124         */
125         cur_click.style.zIndex = 2;
126     }
127     if (layer_menu_cur_click) {
128         offsetx = isIE ? event.clientX + document.body.scrollLeft : e.pageX;
129         dx = offsetx - parseInt(document.getElementById("layer_menu").style.width);
130     }
133 function MouseMove(e)
135     //Glob_X = e.pageX;
136     //Glob_Y = e.pageY;
137     Glob_X = isIE ? event.clientX + document.body.scrollLeft : e.pageX;
138     Glob_Y = isIE ? event.clientY + document.body.scrollTop : e.pageY;
140     //mouseX = (bw.ns4||bw.ns6)? e.pageX: bw.ie&&bw.win&&!bw.ie4? (event.clientX-2)+document.body.scrollLeft : event.clientX+document.body.scrollLeft;
141     //mouseY = (bw.ns4||bw.ns6)? e.pageY: bw.ie&&bw.win&&!bw.ie4? (event.clientY-2)+document.body.scrollTop : event.clientY+document.body.scrollTop;
143     //window.status = "X = "+ Glob_X + " Y = "+ Glob_Y;
145     if (cur_click != null) {
146         _change = 1;
147         var mGx = Glob_X - dx;
148         var mGy = Glob_Y - dy;
149         mGx = mGx > 0 ? mGx : 0;
150         mGy = mGy > 0 ? mGy : 0;
152         if (ON_grid) {
153             mGx = mGx % step < step / 2 ? mGx - mGx % step : mGx - mGx % step + step;
154             mGy = mGy % step < step / 2 ? mGy - mGy % step : mGy - mGy % step + step;
155         }
157         cur_click.style.left = mGx + 'px';
158         cur_click.style.top  = mGy + 'px';
159     }
161     if (ON_relation || ON_display_field) {
162         document.getElementById('pmd_hint').style.left = (Glob_X + 20) + 'px';
163         document.getElementById('pmd_hint').style.top  = (Glob_Y + 20) + 'px';
164     }
166     if (layer_menu_cur_click) {
167         document.getElementById("layer_menu").style.width = ((Glob_X - dx) >= 150 ? Glob_X - dx : 150) + 'px';
168         //document.getElementById("layer_menu").style.height = Glob_Y - dy>=200?Glob_Y - dy:200;
169         //document.getElementById("id_scroll_tab").style.height = Glob_Y - dy2;
170     }
173 function MouseUp(e)
175     if (cur_click != null) {
176         document.getElementById("canvas").style.display = 'inline-block';
177         Re_load();
178         cur_click.style.zIndex = 1;
179         cur_click = null;
180     }
181     layer_menu_cur_click = 0;
182     //window.releaseEvents(Event.MOUSEMOVE);
184 //------------------------------------------------------------------------------
185 //------------------------------------------------------------------------------
186 //------------------------------------------------------------------------------
189 //function ToInt(s)
191 //    return s.substring(0,s.length-2)*1; //re = /(\d+)\w*/; newstr = str.replace(re, "$1");
194 function Canvas_pos()
196     canvas_width  = document.getElementById('canvas').width  = osn_tab_width  - 3;
197     canvas_height = document.getElementById('canvas').height = osn_tab_height - 3;
199     if (isIE) {
200         document.getElementById('canvas').style.width  = ((osn_tab_width  - 3)?(osn_tab_width  - 3):0) + 'px';
201         document.getElementById('canvas').style.height = ((osn_tab_height - 3)?(osn_tab_height - 3):0) + 'px';
202     }
205 function Osn_tab_pos()
207     osn_tab_width  = parseInt(document.getElementById('osn_tab').style.width);
208     osn_tab_height = parseInt(document.getElementById('osn_tab').style.height);
212 function Main()
214     //alert( document.getElementById('osn_tab').offsetTop);
215     //---CROSS
216     if (isIE) {
217         document.getElementById('top_menu').style.position = 'absolute';
218         document.getElementById('layer_menu').style.position = 'absolute';
219     }
221     document.getElementById("layer_menu").style.top = -1000 + 'px'; //fast scroll
222     sm_x += document.getElementById('osn_tab').offsetLeft;
223     sm_y += document.getElementById('osn_tab').offsetTop;
224     Osn_tab_pos();
225     Canvas_pos();
226     Small_tab_refresh();
227     Re_load();
228     id_hint = document.getElementById('pmd_hint');
229     if (isIE) {
230         General_scroll();
231     }
235 //-------------------------------- new -----------------------------------------
236 function Rezize_osn_tab()
238     var max_X = 0;
239     var max_Y = 0;
240     for (key in j_tabs) {
241         var k_x = parseInt(document.getElementById(key).style.left) + document.getElementById(key).offsetWidth;
242         var k_y = parseInt(document.getElementById(key).style.top) + document.getElementById(key).offsetHeight;
243         max_X = max_X < k_x ? k_x : max_X;
244         max_Y = max_Y < k_y ? k_y : max_Y;
245     }
247     osn_tab_width  = max_X + 50;
248     osn_tab_height = max_Y + 50;
249     Canvas_pos();
250     document.getElementById('osn_tab').style.width = osn_tab_width + 'px';
251     document.getElementById('osn_tab').style.height = osn_tab_height + 'px';
253 //------------------------------------------------------------------------------
256  * refreshes display, must be called after state changes
257  */
258 function Re_load()
260     Rezize_osn_tab();
261     var n;
262     var x1;
263     var x2;
264     var a = new Array();
265     Clear();
266     for (K in contr)
267         for (key in contr[K])                     // contr name
268             for (key2 in contr[K][key])           // table name
269                 for (key3 in contr[K][key][key2]) // field name
270                 {
271                     if (!document.getElementById("check_vis_" + key2).checked ||
272                         !document.getElementById("check_vis_" + contr[K][key][key2][key3][0]).checked) {
273                         // if hide
274                         continue;
275                     }
276                     var x1_left  = document.getElementById(key2).offsetLeft+1;
277                     var x1_right = x1_left + document.getElementById(key2).offsetWidth;
278                     var x2_left  = document.getElementById(contr[K][key][key2][key3][0]).offsetLeft;
279                     var x2_right = x2_left + document.getElementById(contr[K][key][key2][key3][0]).offsetWidth;
280                     a[0] = Math.abs(x1_left - x2_left);
281                     a[1] = Math.abs(x1_left - x2_right);
282                     a[2] = Math.abs(x1_right - x2_left);
283                     a[3] = Math.abs(x1_right - x2_right);
284                     n = s_left = s_right = 0;
285                     for (var i = 1; i < 4; i++) {
286                         if (a[n] > a[i]) {
287                             n = i;
288                         }
289                     }
290                     if (n == 1) {
291                         x1 = x1_left - sm_s;
292                         x2 = x2_right + sm_s;
293                         if (x1 < x2) {
294                             n = 0;
295                         }
296                     }
297                     if (n == 2) {
298                         x1 = x1_right + sm_s;
299                         x2 = x2_left - sm_s;
300                         if (x1 > x2) {
301                             n = 0;
302                         }
303                     }
304                     if (n == 3) {
305                         x1 = x1_right + sm_s;
306                         x2 = x2_right + sm_s;
307                         s_right = 1;
308                     }
309                     if (n == 0) {
310                         x1 = x1_left - sm_s;
311                         x2 = x2_left - sm_s;
312                         s_left = 1;
313                     }
314                     //alert(key2 + "." + key3);
316                     var row_offset_top = 0;
317                     //alert('id_tbody_' + key2);
318                     //alert(document.getElementById('id_hide_tbody_' + key2));
319                     var tab_hide_button = document.getElementById('id_hide_tbody_' + key2);
321                     //alert(tab_hide_button.innerHTML);
322                     if (tab_hide_button.innerHTML == 'v') {
323                         row_offset_top = document.getElementById(key2 + "." + key3).offsetTop;
324                     }
326                     var y1 = document.getElementById(key2).offsetTop
327                          + row_offset_top
328                          + height_field;
329                     //alert(1);
331                     row_offset_top = 0;
332                     var tab_hide_button = document.getElementById('id_hide_tbody_' + contr[K][key][key2][key3][0]);
333                     if (tab_hide_button.innerHTML == 'v') {
334                         row_offset_top = document.getElementById(contr[K][key][key2][key3][0]
335                             + '.' + contr[K][key][key2][key3][1]).offsetTop;
336                     }
338                     var y2 =
339                           document.getElementById(contr[K][key][key2][key3][0]).offsetTop
340                         + row_offset_top
341                         + height_field;
343                     //alert(y1 + ' - ' + key2 + "." + key3);
344                     Line0(x1 - sm_x, y1 - sm_y, x2 - sm_x, y2 - sm_y, getColorByTarget( contr[K][key][key2][key3][0]+'.'+contr[K][key][key2][key3][1] ) );
345                 }
349  * draws a line from x1:y1 to x2:y2 with color
350  */
351 function Line(x1, y1, x2, y2, color_line)
353     var canvas = document.getElementById("canvas");
354     var ctx    = canvas.getContext("2d");
355     ctx.strokeStyle = color_line;
356     ctx.lineWidth = 1;
357     ctx.beginPath();
358     ctx.moveTo(x1, y1);
359     ctx.lineTo(x2, y2);
360     ctx.stroke();
364  * draws a relation/constraint line, whether angular or not
365  */
366 function Line0(x1, y1, x2, y2, color_line)
368     Circle(x1, y1, 3, 3, color_line);
369     Rect(x2 - 1, y2 - 2, 4, 4, color_line);
371     if (ON_angular_direct) {
372         Line2(x1, y1, x2, y2, color_line);
373     } else {
374         Line3(x1, y1, x2, y2, color_line);
375     }
379  * draws a angualr relation/constraint line
380  */
381 function Line2(x1, y1, x2, y2, color_line)
383     var x1_ = x1;
384     var x2_ = x2;
386     if (s_right) {
387         x1_ += sm_add;
388         x2_ += sm_add;
389     } else if (s_left) {
390         x1_ -= sm_add;
391         x2_ -= sm_add;
392     } else if (x1 < x2) {
393         x1_ += sm_add;
394         x2_ -= sm_add;
395     } else {
396         x1_ -= sm_add;
397         x2_ += sm_add;
398     }
400     Line(x1, y1, x1_, y1, color_line);
401     Line(x2, y2, x2_, y2, color_line);
402     Line(x1_, y1, x2_, y2, color_line);
406  * draws a relation/constraint line
407  */
408 function Line3(x1, y1, x2, y2, color_line)
410     var x1_ = x1;
411     var x2_ = x2;
413     if (s_right) {
414         if (x1 < x2) {
415             x1_ += x2 - x1 + sm_add;
416             x2_ += sm_add;
417         } else {
418             x2_ += x1 - x2 + sm_add;
419             x1_ += sm_add;
420         }
422         Line(x1, y1, x1_, y1, color_line);
423         Line(x2, y2, x2_, y2, color_line);
424         Line(x1_, y1, x2_, y2, color_line);
425         return;
426     }
427     if (s_left) {
428         if (x1 < x2) {
429             x2_ -= x2 - x1 + sm_add;
430             x1_ -= sm_add;
431         } else {
432             x1_ -= x1 - x2 + sm_add;
433             x2_ -= sm_add;
434         }
436         Line(x1, y1, x1_, y1, color_line);
437         Line(x2, y2, x2_, y2, color_line);
438         Line(x1_, y1, x2_, y2, color_line);
439         return;
440     }
442     var x_s = (x1 + x2) / 2;
443     Line(x1, y1, x_s, y1, color_line);
444     Line(x_s, y2, x2, y2, color_line);
445     Line(x_s, y1, x_s, y2, color_line);
448 function Circle(x, y, r, w, color)
450     var ctx = document.getElementById('canvas').getContext('2d');
451     ctx.beginPath();
452     ctx.moveTo(x, y);
453     ctx.lineWidth = w;
454     ctx.strokeStyle = color;
455     ctx.arc(x, y, r, 0, 2 * Math.PI, true);
456     ctx.stroke();
459 function Clear()
461     var canvas = document.getElementById("canvas");
462     var ctx    = canvas.getContext("2d");
463     ctx.clearRect(0, 0, canvas_width, canvas_height);
466 function Rect(x1, y1, w, h, color)
468     var ctx = document.getElementById('canvas').getContext('2d');
469     ctx.fillStyle = color;
470     ctx.fillRect(x1, y1, w, h);
473 //------------------------------ SAVE ------------------------------------------
474 function Save(url) // (del?) no for pdf
476     for (key in j_tabs) {
477         document.getElementById('t_x_' + key + '_').value = parseInt(document.getElementById(key).style.left);
478         document.getElementById('t_y_' + key + '_').value = parseInt(document.getElementById(key).style.top);
479         document.getElementById('t_v_' + key + '_').value = document.getElementById('id_tbody_' + key).style.display == 'none' ? 0 : 1;
480         document.getElementById('t_h_' + key + '_').value = document.getElementById('check_vis_' + key).checked ? 1 : 0;
481     }
482     document.form1.action = url;
483     document.form1.submit();
486 function Get_url_pos()
488     var poststr = '';
489     for (key in j_tabs) {
490         poststr += '&t_x[' + key + ']=' + parseInt(document.getElementById(key).style.left);
491         poststr += '&t_y[' + key + ']=' + parseInt(document.getElementById(key).style.top);
492         poststr += '&t_v[' + key + ']=' + (document.getElementById('id_tbody_' + key).style.display == 'none' ? 0 : 1);
493         poststr += '&t_h[' + key + ']=' + (document.getElementById('check_vis_' + key).checked ? 1 : 0);
494     }
495     return poststr;
498 function Save2()
500     _change = 0;
501     var poststr = 'IS_AJAX=1&server='+server+'&db=' + db + '&token=' + token + '&die_save_pos=1';
502     poststr += Get_url_pos();
503     makeRequest('pmd_save_pos.php', poststr);
506 function Grid()
508     if (!ON_grid) {
509         ON_grid = 1;
510         document.getElementById('grid_button').className = 'M_butt_Selected_down';
511     } else {
512         document.getElementById('grid_button').className = 'M_butt';
513         ON_grid = 0;
514     }
517 function Angular_direct()
519     if (ON_angular_direct) {
520         ON_angular_direct = 0;
521         document.getElementById('angular_direct_button').className = 'M_butt_Selected_down';
522     } else {
523         ON_angular_direct = 1;
524         document.getElementById('angular_direct_button').className = 'M_butt';
525     }
526     Re_load();
528 //++++++++++++++++++++++++++++++ RELATION ++++++++++++++++++++++++++++++++++++++
529 function Start_relation()
531     if (ON_display_field) {
532         return;
533     }
535     if (!ON_relation) {
536         document.getElementById('foreign_relation').style.display = '';
537         ON_relation = 1;
538         document.getElementById('pmd_hint').innerHTML = PMA_messages['strSelectReferencedKey'];
539         document.getElementById('pmd_hint').style.display = 'block';
540         document.getElementById('rel_button').className = 'M_butt_Selected_down';
541     } else {
542         document.getElementById('pmd_hint').innerHTML = "";
543         document.getElementById('pmd_hint').style.display = 'none';
544         document.getElementById('rel_button').className = 'M_butt';
545         click_field = 0;
546         ON_relation = 0;
547     }
550 function Click_field(T, f, PK) // table field
552     if (ON_relation) {
553         if (!click_field) {
554             //.style.display=='none'        .style.display = 'none'
555             if (!PK) {
556                 alert(PMA_messages['strPleaseSelectPrimaryOrUniqueKey']);
557                 return;// 0;
558             }//PK
559             if (j_tabs[db + '.' + T] != '1') {
560                 document.getElementById('foreign_relation').style.display = 'none';
561             }
562             click_field = 1;
563             link_relation = "T1=" + T + "&F1=" + f;
564             document.getElementById('pmd_hint').innerHTML = PMA_messages['strSelectForeignKey'];
565         } else {
566             Start_relation(); // hidden hint...
567             if (j_tabs[db + '.' + T] != '1' || !PK) {
568                 document.getElementById('foreign_relation').style.display = 'none';
569             }
570             var left = Glob_X - (document.getElementById('layer_new_relation').offsetWidth>>1);
571             document.getElementById('layer_new_relation').style.left = left + 'px';
572             var top = Glob_Y - document.getElementById('layer_new_relation').offsetHeight + 40;
573             document.getElementById('layer_new_relation').style.top  = top + 'px';
574             document.getElementById('layer_new_relation').style.display = 'block';
575             link_relation += '&T2=' + T + '&F2=' + f;
576         }
577     }
579     if (ON_display_field) {
580         // if is display field
581         if (display_field[T] == f) {
582             //alert(T);
583             //s = '';for(k in display_field)s += k + ' = ' + display_field[k] + ',';alert(s);
584             old_class = 'tab_field';
585             //display_field.splice(T, 1);
586             delete display_field[T];
587             //s = '';for(k in display_field)s += k + ' = ' + display_field[k] + ', ';alert(s);
588             //n = 0;for(k in display_field)n++;alert(n);
589         } else {
590             old_class = 'tab_field_3';
591             if (display_field[T]) {
592                 document.getElementById('id_tr_' + T + '.' + display_field[T]).className = 'tab_field';
593                 //display_field.splice(T, 1);
594                 delete display_field[T];
595             }
596             display_field[T] = f;
597         }
598         ON_display_field = 0;
599         document.getElementById('pmd_hint').innerHTML = "";
600         document.getElementById('pmd_hint').style.display = 'none';
601         document.getElementById('display_field_button').className = 'M_butt';
602         makeRequest('pmd_display_field.php', 'T=' + T + '&F=' + f + '&server=' + server + '&db=' + db + '&token=' + token);
603     }
606 function New_relation()
608     document.getElementById('layer_new_relation').style.display = 'none';
609     link_relation += '&server=' + server + '&db=' + db + '&token=' + token + '&die_save_pos=0';
610     link_relation += '&on_delete=' + document.getElementById('on_delete').value + '&on_update=' + document.getElementById('on_update').value;
611     link_relation += Get_url_pos();
613     //alert(link_relation);
614     makeRequest('pmd_relation_new.php', link_relation);
617 //-------------------------- create tables -------------------------------------
619 function Start_table_new()
621     window.location.href = 'tbl_create.php?server=' + server + '&db=' + db + '&token=' + token;
624 function Start_tab_upd(table)
626     window.location.href = 'tbl_structure.php?server=' + server + '&db=' + db + '&token=' + token + '&table=' + table;
628 //--------------------------- hide tables --------------------------------------
630 function Small_tab_all(id_this) // max/min all tables
632     if (id_this.alt == "v") {
633         for (key in j_tabs) {
634             if (document.getElementById('id_hide_tbody_'+key).innerHTML == "v") {
635                 Small_tab(key, 0);
636             }
637         }
638         id_this.alt = ">";
639         id_this.src = pmaThemeImage + "pmd/rightarrow1.png";
640     } else {
641         for (key in j_tabs) {
642             if (document.getElementById('id_hide_tbody_'+key).innerHTML != "v") {
643                 Small_tab(key, 0);
644             }
645         }
646         id_this.alt = "v";
647         id_this.src = pmaThemeImage + "pmd/downarrow1.png";
648     }
649     Re_load();
652 function Small_tab_invert() // invert max/min all tables
654     for (key in j_tabs) {
655         Small_tab(key, 0);
656     }
657     Re_load();
660 function Small_tab_refresh()
662      for (key in j_tabs) {
663          if(document.getElementById('id_hide_tbody_'+key).innerHTML != "v") {
664              Small_tab(key, 0);
665              Small_tab(key, 0);
666          }
667      }
670 function Small_tab(t, re_load)
672     var id      = document.getElementById('id_tbody_' + t);
673     var id_this = document.getElementById('id_hide_tbody_' + t);
674     var id_t    = document.getElementById(t);
675     id_t.style.width = id_t.offsetWidth + 'px';
676     if (id_this.innerHTML == "v") {
677         //---CROSS
678         id.style.display = 'none';
679         id_this.innerHTML = '>';
680     } else {
681         id.style.display = '';
682         id_this.innerHTML = 'v';
683     }
684     if (re_load) {
685         Re_load();
686     }
688 //------------------------------------------------------------------------------
689 function Select_tab(t)
691     var id_zag = document.getElementById('id_zag_' + t);
692     if (id_zag.className != 'tab_zag_3') {
693         document.getElementById('id_zag_' + t).className = 'tab_zag_2';
694     } else {
695         document.getElementById('id_zag_' + t).className = 'tab_zag';
696     }
697     //----------
698     var id_t = document.getElementById(t);
699     window.scrollTo(parseInt(id_t.style.left) - 300, parseInt(id_t.style.top) - 300);
700     setTimeout(function(){document.getElementById('id_zag_' + t).className = 'tab_zag';}, 800);
702 //------------------------------------------------------------------------------
704 function Canvas_click(id)
706     var n = 0;
707     var relation_name = 0;
708     var selected = 0;
709     var a = new Array();
710     var Key0, Key1, Key2, Key3, Key, x1, x2;
711     Clear();
712     for (K in contr)
713         for (key in contr[K])
714             for (key2 in contr[K][key])
715                 for (key3 in contr[K][key][key2]) {
716                     if (!document.getElementById("check_vis_"+key2).checked ||
717                         !document.getElementById("check_vis_"+contr[K][key][key2][key3][0]).checked) continue; // if hide
718                     var x1_left  = document.getElementById(key2).offsetLeft + 1;//document.getElementById(key2+"."+key3).offsetLeft;
719                     var x1_right = x1_left + document.getElementById(key2).offsetWidth;
720                     var x2_left  = document.getElementById(contr[K][key][key2][key3][0]).offsetLeft;//+document.getElementById(contr[K][key2][key3][0]+"."+contr[K][key2][key3][1]).offsetLeft
721                     var x2_right = x2_left + document.getElementById(contr[K][key][key2][key3][0]).offsetWidth;
722                     a[0] = Math.abs(x1_left - x2_left);
723                     a[1] = Math.abs(x1_left - x2_right);
724                     a[2] = Math.abs(x1_right - x2_left);
725                     a[3] = Math.abs(x1_right - x2_right);
726                     n = s_left = s_right = 0;
727                     for (var i = 1; i < 4; i++) {
728                         if (a[n] > a[i]) {
729                             n = i;
730                         }
731                     }
732                     if (n == 1) {
733                         x1 = x1_left - sm_s;
734                         x2 = x2_right + sm_s;
735                         if (x1 < x2) {
736                             n = 0;
737                         }
738                     }
739                     if (n == 2) {
740                         x1 = x1_right + sm_s;
741                         x2 = x2_left - sm_s;
742                         if (x1 > x2) {
743                             n = 0;
744                         }
745                     }
746                     if (n == 3) {
747                         x1 = x1_right + sm_s;
748                         x2 = x2_right + sm_s;
749                         s_right = 1;
750                     }
751                     if (n == 0) {
752                         x1 = x1_left - sm_s;
753                         x2 = x2_left - sm_s;
754                         s_left    = 1;
755                     }
757                     var y1 = document.getElementById(key2).offsetTop + document.getElementById(key2+"."+key3).offsetTop + height_field;
758                     var y2 = document.getElementById(contr[K][key][key2][key3][0]).offsetTop +
759                                      document.getElementById(contr[K][key][key2][key3][0]+"."+contr[K][key][key2][key3][1]).offsetTop + height_field;
760                     if (!selected && Glob_X > x1 - 10 && Glob_X < x1 + 10 && Glob_Y > y1 - 7 && Glob_Y < y1 + 7) {
761                         Line0(x1 - sm_x, y1 - sm_y, x2 - sm_x, y2 - sm_y, "rgba(255,0,0,1)");
762                         selected = 1; // Rect(x1-sm_x,y1-sm_y,10,10,"rgba(0,255,0,1)");
763                         relation_name = key; //
764                         Key0 = contr[K][key][key2][key3][0];
765                         Key1 = contr[K][key][key2][key3][1];
766                         Key2 = key2; Key3 = key3;
767                         Key = K;
768                     } else {
769                         Line0(x1 - sm_x, y1 - sm_y, x2 - sm_x, y2 - sm_y, getColorByTarget( contr[K][key][key2][key3][0]+'.'+contr[K][key][key2][key3][1] ));
770                     }
771                 }
772     if (selected) {
773         // select relations
774         //alert(Key0+' - '+Key1+' - '+Key2+' - '+Key3);
775         var left = Glob_X - (document.getElementById('layer_upd_relation').offsetWidth>>1);
776         document.getElementById('layer_upd_relation').style.left = left + 'px';
777         var top = Glob_Y - document.getElementById('layer_upd_relation').offsetHeight - 10;
778         document.getElementById('layer_upd_relation').style.top = top + 'px';
779         document.getElementById('layer_upd_relation').style.display = 'block';
780         link_relation = 'T1=' + Key0 + '&F1=' + Key1 + '&T2=' + Key2 + '&F2=' + Key3 + '&K=' + Key;
781     }
784 function Upd_relation()
786     document.getElementById('layer_upd_relation').style.display = 'none';
787     link_relation += '&server=' + server + '&db=' + db + '&token=' + token + '&die_save_pos=0';
788     link_relation += Get_url_pos();
789     makeRequest('pmd_relation_upd.php', link_relation);
792 function VisibleTab(id, t_n)
794     if (id.checked) {
795         document.getElementById(t_n).style.display = 'block';
796     } else {
797         document.getElementById(t_n).style.display = 'none';
798     }
799     Re_load();
802 function Hide_tab_all(id_this) // max/min all tables
804     if (id_this.alt == 'v') {
805         id_this.alt = '>';
806         id_this.src = pmaThemeImage + "pmd/rightarrow1.png";
807     } else {
808         id_this.alt = 'v';
809         id_this.src = pmaThemeImage + "pmd/downarrow1.png";
810     }
811     var E = document.form1;
812     for (i = 0; i < E.elements.length; i++) {
813         if (E.elements[i].type == "checkbox" && E.elements[i].id.substring(0, 10) == 'check_vis_') {
814             if (id_this.alt == 'v') {
815                 E.elements[i].checked = true;
816                 document.getElementById(E.elements[i].value).style.display = 'block';
817             } else {
818                 E.elements[i].checked = false;
819                 document.getElementById(E.elements[i].value).style.display = 'none';
820             }
821         }
822     }
823     Re_load();
826 function in_array_k(x, m)
828     var b = 0;
829     for (u in m) {
830         if (x == u) {
831             b=1;
832             break;
833         }
834     }
835     return b;
838 function No_have_constr(id_this)
840     var a = new Array();
841     for (K in contr)
842         for (key in contr[K])                     // contr name
843             for (key2 in contr[K][key])           // table name
844                 for (key3 in contr[K][key][key2]) // field name
845                     a[key2] = a[contr[K][key][key2][key3][0]] = 1; // exist constr
848     if (id_this.alt == 'v') {
849         id_this.alt = '>';
850         id_this.src = pmaThemeImage + "pmd/rightarrow2.png";
851     } else {
852         id_this.alt = 'v';
853         id_this.src = pmaThemeImage + "pmd/downarrow2.png";
854     }
855     var E = document.form1;
856     for (i = 0; i < E.elements.length; i++) {
857         if (E.elements[i].type == "checkbox" && E.elements[i].id.substring(0, 10) == 'check_vis_')
858         {
859             if (!in_array_k(E.elements[i].value, a))
860             if (id_this.alt == 'v') {
861                 E.elements[i].checked = true;
862                 document.getElementById(E.elements[i].value).style.display = 'block';
863             } else {
864                 E.elements[i].checked = false;
865                 document.getElementById(E.elements[i].value).style.display = 'none';
866             }
867         }
868     }
871 function PDF_save()
873     // var WinPDF =
874     // window.open("pmd_pdf.php?token="+token+"&db="+db,"wind1", "top=200,left=200,width=200,height=100,resizable=yes,scrollbars=yes,menubar=no");
875     Save('pmd_pdf.php?server=' + server + '&token=' + token + '&db=' + db);
878 function General_scroll()
880     /*
881     if (!document.getElementById('show_relation_olways').checked) {
882         document.getElementById("canvas").style.display = 'none';
883         clearTimeout(timeoutID);
884         timeoutID = setTimeout(General_scroll_end, 500);
885     }
886     */
887     //if (timeoutID)
888     clearTimeout(timeoutID);
889     timeoutID = setTimeout
890     (
891         function()
892         {
893             document.getElementById('top_menu').style.left = document.body.scrollLeft + 'px';
894             document.getElementById('top_menu').style.top  = document.body.scrollTop + 'px';
895             document.getElementById('layer_menu').style.left = document.body.scrollLeft + 'px';
896             document.getElementById('layer_menu').style.top  = (document.body.scrollTop + document.getElementById('top_menu').offsetHeight) + 'px';
897         }
898         ,200
899     );
903 function General_scroll_end()
905     document.getElementById('layer_menu').style.left = document.body.scrollLeft;
906     document.getElementById('layer_menu').style.top  = document.body.scrollTop + document.getElementById('top_menu').offsetHeight;
907     if (isIE) {
908         document.getElementById('layer_menu').style.left = document.body.scrollLeft;
909         document.getElementById('layer_menu').style.top  = document.body.scrollTop + document.getElementById('top_menu').offsetHeight;
910     }
911     document.getElementById("canvas").style.display = 'block';
915 function Show_left_menu(id_this) // max/min all tables
917     if (id_this.alt == "v") {
918         var pos = $("#top_menu").offset();
919         var height = $("#top_menu").height();
920         document.getElementById("layer_menu").style.top = (pos.top + height) + 'px';
921         document.getElementById("layer_menu").style.left = pos.left + 'px';
922         document.getElementById("layer_menu").style.display = 'block';
923         id_this.alt = ">";
924         id_this.src = pmaThemeImage + "pmd/uparrow2_m.png";
925         if (isIE) {
926             General_scroll();
927         }
928     } else {
929         document.getElementById("layer_menu").style.top = -1000 + 'px'; //fast scroll
930         document.getElementById("layer_menu").style.display = 'none';
931         id_this.alt = "v";
932         id_this.src = pmaThemeImage + "pmd/downarrow2_m.png";
933     }
935 //------------------------------------------------------------------------------
936 function Top_menu_right(id_this)
938     if (id_this.alt == ">") {
939         document.getElementById('top_menu').style.marginLeft = document.getElementById('top_menu').offsetWidth + 'px'; // = 350
940         id_this.alt = "<";
941         id_this.src = pmaThemeImage + "pmd/2leftarrow_m.png";
942     } else {
943         document.getElementById('top_menu').style.marginLeft = 0;
944         id_this.alt = ">";
945         id_this.src = pmaThemeImage + "pmd/2rightarrow_m.png";
946     }
948 //------------------------------------------------------------------------------
949 function Start_display_field()
951     if (ON_relation) {
952         return;
953     }
954     if (!ON_display_field) {
955         ON_display_field = 1;
956         document.getElementById('pmd_hint').innerHTML = PMA_messages['strChangeDisplay'];
957         document.getElementById('pmd_hint').style.display = 'block';
958         document.getElementById('display_field_button').className = 'M_butt_Selected_down';//'#FFEE99';gray #AAAAAA
960         if (isIE) { // correct for IE
961             document.getElementById('display_field_button').className = 'M_butt_Selected_down_IE';
962         }
963     } else {
964         document.getElementById('pmd_hint').innerHTML = "";
965         document.getElementById('pmd_hint').style.display = 'none';
966         document.getElementById('display_field_button').className = 'M_butt';
967         ON_display_field = 0;
968     }
970 //------------------------------------------------------------------------------
971 var TargetColors = new Array();
972 function getColorByTarget( target )
974   var color = '';  //"rgba(0,100,150,1)";
976   for (i in TargetColors)
977    if (TargetColors[i][0]==target) {
978     color = TargetColors[i][1];
979     break;
980    }
983   if (color.length==0)
984   {
985    var i = TargetColors.length+1;
986    var d = i % 6;
987    var j = (i - d) / 6;
988    j = j % 4;
989    j++;
990    var color_case = new Array(
991                         new Array(1, 0, 0),
992                         new Array(0, 1, 0),
993                         new Array(0, 0, 1),
994                         new Array(1, 1, 0),
995                         new Array(1, 0, 1),
996                         new Array(0, 1, 1)
997                         );
998     var a = color_case[d][0];
999     var b = color_case[d][1];
1000     var c = color_case[d][2];
1001     e = (1 - (j - 1) / 6);
1003     var r = Math.round(a * 200 * e);
1004     var g = Math.round(b * 200 * e);
1005     var b = Math.round(c * 200 * e);
1006     var color = "rgba("+r+","+g+","+b+",1)";
1008     TargetColors.push( new Array(target, color) );
1011   }
1013   return color;
1016 function Click_option(id_this,column_name,table_name)
1018     var left = Glob_X - (document.getElementById(id_this).offsetWidth>>1);
1019     document.getElementById(id_this).style.left = left + 'px';
1020     // var top = Glob_Y - document.getElementById(id_this).offsetHeight - 10;
1021     document.getElementById(id_this).style.top  = (screen.height / 4) + 'px';
1022     document.getElementById(id_this).style.display = 'block';
1023     document.getElementById('option_col_name').innerHTML = '<strong>' + PMA_messages['strAddOption'] +'"' +column_name+ '"</strong>';
1024     col_name = column_name;
1025     tab_name = table_name;
1028 function Close_option()
1030     document.getElementById('pmd_optionse').style.display = 'none';
1033 function Select_all(id_this,owner)
1035     var parent= document.form1;
1036     downer =owner;
1037     var i;
1038     var tab = [];
1039     for (i = 0; i < parent.elements.length; i++) {
1040         if (parent.elements[i].type == "checkbox" && parent.elements[i].id.substring(0,(9 + id_this.length)) == 'select_' + id_this + '._') {
1041             if(document.getElementById('select_all_' + id_this).checked == true) {
1042                 parent.elements[i].checked = true;
1043                 parent.elements[i].disabled = true;
1044                 var temp = '`' + id_this.substring(owner.length +1) + '`.*';
1045            }
1046            else {
1047                parent.elements[i].checked = false;
1048                parent.elements[i].disabled = false;
1049            }
1050         }
1051     }
1052     if(document.getElementById('select_all_' + id_this).checked == true) {
1053         select_field.push('`' + id_this.substring(owner.length +1) + '`.*');
1054         tab = id_this.split(".");
1055         from_array.push(tab[1]);
1056     }
1057     else {
1058         for (i =0; i < select_field.length; i++) {
1059             if (select_field[i] == ('`' + id_this.substring(owner.length +1) + '`.*')) {
1060                 select_field.splice(i,1);
1061             }
1062         }
1063         for(k =0 ;k < from_array.length;k++){
1064             if(from_array[k] == id_this){
1065                 from_array.splice(k,1);
1066                 break;
1067             }
1068         }
1069     }
1070     Re_load();
1073 function Table_onover(id_this,val,buil)
1075     if(!val) {
1076         document.getElementById("id_zag_" + id_this).className="tab_zag_2";
1077         if(buil) {
1078             document.getElementById("id_zag_" + id_this + "_2").className="tab_zag_2";
1079         }
1080     }
1081     else {
1082         document.getElementById("id_zag_" + id_this).className="tab_zag";
1083         if(buil) {
1084             document.getElementById("id_zag_" + id_this + "_2").className="tab_zag";
1085         }
1086     }
1089 /* This function stores selected column information in select_field[]
1090  * In case column is checked it add else it deletes
1092  */
1093 function store_column(id_this,owner,col)
1095     var i;
1096     var k;
1097     if (document.getElementById('select_' + owner + '.' + id_this + '._' + col).checked == true) {
1098         select_field.push('`' + id_this + '`.`' + col +'`');
1099         from_array.push(id_this);
1100     }
1101     else {
1102         for (i = 0; i < select_field.length ;i++) {
1103             if (select_field[i] == ('`' + id_this + '`.`' + col +'`')) {
1104                 select_field.splice(i,1);
1105                 break;
1106             }
1107         }
1108         for (k = 0 ;k < from_array.length;k++){
1109             if(from_array[k] == id_this){
1110                 from_array.splice(k,1);
1111                 break;
1112             }
1113         }
1114      }
1118  * This function builds object and adds them to history_array
1119  * first it does a few checks on each object, then makes an object(where,rename,groupby,aggregate,orderby)
1120  * then a new history object is made and finally all these history objects are addded to history_array[]
1122  * @uses where()
1123  * @uses history()
1124  * @uses aggregate()
1125  * @uses rename()
1126  * @uses panel()
1127  * @uses display()
1130 function add_object()
1132     var rel = document.getElementById('rel_opt');
1133     var sum = 0;
1134     var init = history_array.length;
1135     if (rel.value != '--') {
1136         if (document.getElementById('Query').value == "") {
1137             document.getElementById('pmd_hint').innerHTML = "value/subQuery is empty" ;
1138             document.getElementById('pmd_hint').style.display = 'block';
1139             return;
1140         }
1141         var p = document.getElementById('Query');
1142         var where_obj = new where(rel.value,p.value);//make where object
1143         history_array.push(new history(col_name,where_obj,tab_name,h_tabs[downer + '.' + tab_name],"Where"));
1144         sum = sum + 1;
1145         rel.value = '--';
1146         p.value = "";
1147     }
1148     if (document.getElementById('new_name').value !="") {
1149         var rename_obj = new rename(document.getElementById('new_name').value);//make Rename object
1150         history_array.push(new history(col_name,rename_obj,tab_name,h_tabs[downer + '.' + tab_name],"Rename"));
1151         sum = sum + 1;
1152         document.getElementById('new_name').value = "" ;
1153     }
1154     if (document.getElementById('operator').value != '---') {
1155         var aggregate_obj = new aggregate(document.getElementById('operator').value) ;
1156         history_array.push(new history(col_name,aggregate_obj,tab_name,h_tabs[downer + '.' + tab_name],"Aggregate"));
1157         sum = sum + 1;
1158         document.getElementById('operator').value = '---';
1159         //make aggregate operator
1160     }
1161     if (document.getElementById('groupby').checked == true ) {
1162         history_array.push(new history(col_name,'GroupBy',tab_name,h_tabs[downer + '.' +tab_name],"GroupBy"));
1163         sum = sum + 1;
1164         document.getElementById('groupby').checked = false;
1165         //make groupby
1166     }
1167     if (document.getElementById('h_rel_opt').value != '--') {
1168         if (document.getElementById('having').value == "") {
1169             document.getElementById('pmd_hint').innerHTML = "value/subQuery is empty" ;
1170             document.getElementById('pmd_hint').style.display = 'block';
1171            return;
1172         }
1173         var p = document.getElementById('having');
1174         var where_obj = new having(document.getElementById('h_rel_opt').value,p.value,document.getElementById('h_operator').value);//make where object
1175         history_array.push(new history(col_name,where_obj,tab_name,h_tabs[downer + '.' + tab_name],"Having"));
1176         sum = sum + 1;
1177         document.getElementById('h_rel_opt').value = '--';
1178         document.getElementById('h_operator').value = '---';
1179         p.value = ""; //make having
1180     }
1181     if (document.getElementById('orderby').checked == true) {
1182         history_array.push(new history(col_name,'OrderBy',tab_name,h_tabs[downer + '.' + tab_name],"OrderBy"));
1183         sum = sum + 1;
1184         document.getElementById('orderby').checked = false;
1185         //make orderby
1186     }
1187     document.getElementById('pmd_hint').innerHTML = sum + "object created" ;
1188     document.getElementById('pmd_hint').style.display = 'block';
1189     //output sum new objects created
1190     var existingDiv = document.getElementById('ab');
1191     existingDiv.innerHTML = display(init,history_array.length);
1192     Close_option();
1193     panel(0);