Merge branch 'm25_MDL-38336_SCORM_TOC_links_when_Display_course_structure_is_on'...
[moodle.git] / lib / javascript-static.js
1 // Miscellaneous core Javascript functions for Moodle
2 // Global M object is initilised in inline javascript
4 /**
5  * Add module to list of available modules that can be loaded from YUI.
6  * @param {Array} modules
7  */
8 M.yui.add_module = function(modules) {
9     for (var modname in modules) {
10         YUI_config.modules[modname] = modules[modname];
11     }
12 };
13 /**
14  * The gallery version to use when loading YUI modules from the gallery.
15  * Will be changed every time when using local galleries.
16  */
17 M.yui.galleryversion = '2010.04.21-21-51';
19 /**
20  * Various utility functions
21  */
22 M.util = M.util || {};
24 /**
25  * Language strings - initialised from page footer.
26  */
27 M.str = M.str || {};
29 /**
30  * Returns url for images.
31  * @param {String} imagename
32  * @param {String} component
33  * @return {String}
34  */
35 M.util.image_url = function(imagename, component) {
37     if (!component || component == '' || component == 'moodle' || component == 'core') {
38         component = 'core';
39     }
41     var url = M.cfg.wwwroot + '/theme/image.php';
42     if (M.cfg.themerev > 0 && M.cfg.slasharguments == 1) {
43         if (!M.cfg.svgicons) {
44             url += '/_s';
45         }
46         url += '/' + M.cfg.theme + '/' + component + '/' + M.cfg.themerev + '/' + imagename;
47     } else {
48         url += '?theme=' + M.cfg.theme + '&component=' + component + '&rev=' + M.cfg.themerev + '&image=' + imagename;
49         if (!M.cfg.svgicons) {
50             url += '&svg=0';
51         }
52     }
54     return url;
55 };
57 M.util.in_array = function(item, array){
58     for( var i = 0; i<array.length; i++){
59         if(item==array[i]){
60             return true;
61         }
62     }
63     return false;
64 };
66 /**
67  * Init a collapsible region, see print_collapsible_region in weblib.php
68  * @param {YUI} Y YUI3 instance with all libraries loaded
69  * @param {String} id the HTML id for the div.
70  * @param {String} userpref the user preference that records the state of this box. false if none.
71  * @param {String} strtooltip
72  */
73 M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
74     Y.use('anim', function(Y) {
75         new M.util.CollapsibleRegion(Y, id, userpref, strtooltip);
76     });
77 };
79 /**
80  * Object to handle a collapsible region : instantiate and forget styled object
81  *
82  * @class
83  * @constructor
84  * @param {YUI} Y YUI3 instance with all libraries loaded
85  * @param {String} id The HTML id for the div.
86  * @param {String} userpref The user preference that records the state of this box. false if none.
87  * @param {String} strtooltip
88  */
89 M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
90     // Record the pref name
91     this.userpref = userpref;
93     // Find the divs in the document.
94     this.div = Y.one('#'+id);
96     // Get the caption for the collapsible region
97     var caption = this.div.one('#'+id + '_caption');
99     // Create a link
100     var a = Y.Node.create('<a href="#"></a>');
101     a.setAttribute('title', strtooltip);
103     // Get all the nodes from caption, remove them and append them to <a>
104     while (caption.hasChildNodes()) {
105         child = caption.get('firstChild');
106         child.remove();
107         a.append(child);
108     }
109     caption.append(a);
111     // Get the height of the div at this point before we shrink it if required
112     var height = this.div.get('offsetHeight');
113     var collapsedimage = 't/collapsed'; // ltr mode
114     if (right_to_left()) {
115         collapsedimage = 't/collapsed_rtl';
116     } else {
117         collapsedimage = 't/collapsed';
118     }
119     if (this.div.hasClass('collapsed')) {
120         // Add the correct image and record the YUI node created in the process
121         this.icon = Y.Node.create('<img src="'+M.util.image_url(collapsedimage, 'moodle')+'" alt="" />');
122         // Shrink the div as it is collapsed by default
123         this.div.setStyle('height', caption.get('offsetHeight')+'px');
124     } else {
125         // Add the correct image and record the YUI node created in the process
126         this.icon = Y.Node.create('<img src="'+M.util.image_url('t/expanded', 'moodle')+'" alt="" />');
127     }
128     a.append(this.icon);
130     // Create the animation.
131     var animation = new Y.Anim({
132         node: this.div,
133         duration: 0.3,
134         easing: Y.Easing.easeBoth,
135         to: {height:caption.get('offsetHeight')},
136         from: {height:height}
137     });
139     // Handler for the animation finishing.
140     animation.on('end', function() {
141         this.div.toggleClass('collapsed');
142         var collapsedimage = 't/collapsed'; // ltr mode
143         if (right_to_left()) {
144             collapsedimage = 't/collapsed_rtl';
145             } else {
146             collapsedimage = 't/collapsed';
147             }
148         if (this.div.hasClass('collapsed')) {
149             this.icon.set('src', M.util.image_url(collapsedimage, 'moodle'));
150         } else {
151             this.icon.set('src', M.util.image_url('t/expanded', 'moodle'));
152         }
153     }, this);
155     // Hook up the event handler.
156     a.on('click', function(e, animation) {
157         e.preventDefault();
158         // Animate to the appropriate size.
159         if (animation.get('running')) {
160             animation.stop();
161         }
162         animation.set('reverse', this.div.hasClass('collapsed'));
163         // Update the user preference.
164         if (this.userpref) {
165             M.util.set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
166         }
167         animation.run();
168     }, this, animation);
169 };
171 /**
172  * The user preference that stores the state of this box.
173  * @property userpref
174  * @type String
175  */
176 M.util.CollapsibleRegion.prototype.userpref = null;
178 /**
179  * The key divs that make up this
180  * @property div
181  * @type Y.Node
182  */
183 M.util.CollapsibleRegion.prototype.div = null;
185 /**
186  * The key divs that make up this
187  * @property icon
188  * @type Y.Node
189  */
190 M.util.CollapsibleRegion.prototype.icon = null;
192 /**
193  * Makes a best effort to connect back to Moodle to update a user preference,
194  * however, there is no mechanism for finding out if the update succeeded.
195  *
196  * Before you can use this function in your JavsScript, you must have called
197  * user_preference_allow_ajax_update from moodlelib.php to tell Moodle that
198  * the udpate is allowed, and how to safely clean and submitted values.
199  *
200  * @param String name the name of the setting to udpate.
201  * @param String the value to set it to.
202  */
203 M.util.set_user_preference = function(name, value) {
204     YUI().use('io', function(Y) {
205         var url = M.cfg.wwwroot + '/lib/ajax/setuserpref.php?sesskey=' +
206                 M.cfg.sesskey + '&pref=' + encodeURI(name) + '&value=' + encodeURI(value);
208         // If we are a developer, ensure that failures are reported.
209         var cfg = {
210                 method: 'get',
211                 on: {}
212             };
213         if (M.cfg.developerdebug) {
214             cfg.on.failure = function(id, o, args) {
215                 alert("Error updating user preference '" + name + "' using ajax. Clicking this link will repeat the Ajax call that failed so you can see the error: ");
216             }
217         }
219         // Make the request.
220         Y.io(url, cfg);
221     });
222 };
224 /**
225  * Prints a confirmation dialog in the style of DOM.confirm().
226  * @param object event A YUI DOM event or null if launched manually
227  * @param string message The message to show in the dialog
228  * @param string url The URL to forward to if YES is clicked. Disabled if fn is given
229  * @param function fn A JS function to run if YES is clicked.
230  */
231 M.util.show_confirm_dialog = function(e, args) {
232     var target = e.target;
233     if (e.preventDefault) {
234         e.preventDefault();
235     }
237     YUI().use('yui2-container', 'yui2-event', function(Y) {
238         var simpledialog = new Y.YUI2.widget.SimpleDialog('confirmdialog',
239             {width: '300px',
240               fixedcenter: true,
241               modal: true,
242               visible: false,
243               draggable: false
244             }
245         );
247         simpledialog.setHeader(M.str.admin.confirmation);
248         simpledialog.setBody(args.message);
249         simpledialog.cfg.setProperty('icon', Y.YUI2.widget.SimpleDialog.ICON_WARN);
251         var handle_cancel = function() {
252             simpledialog.hide();
253         };
255         var handle_yes = function() {
256             simpledialog.hide();
258             if (args.callback) {
259                 // args comes from PHP, so callback will be a string, needs to be evaluated by JS
260                 var callback = null;
261                 if (Y.Lang.isFunction(args.callback)) {
262                     callback = args.callback;
263                 } else {
264                     callback = eval('('+args.callback+')');
265                 }
267                 if (Y.Lang.isObject(args.scope)) {
268                     var sc = args.scope;
269                 } else {
270                     var sc = e.target;
271                 }
273                 if (args.callbackargs) {
274                     callback.apply(sc, args.callbackargs);
275                 } else {
276                     callback.apply(sc);
277                 }
278                 return;
279             }
281             var targetancestor = null,
282                 targetform = null;
284             if (target.test('a')) {
285                 window.location = target.get('href');
287             } else if ((targetancestor = target.ancestor('a')) !== null) {
288                 window.location = targetancestor.get('href');
290             } else if (target.test('input')) {
291                 targetform = target.ancestor(function(node) { return node.get('tagName').toLowerCase() == 'form'; });
292                 // We cannot use target.ancestor('form') on the previous line
293                 // because of http://yuilibrary.com/projects/yui3/ticket/2531561
294                 if (!targetform) {
295                     return;
296                 }
297                 if (target.get('name') && target.get('value')) {
298                     targetform.append('<input type="hidden" name="' + target.get('name') +
299                                     '" value="' + target.get('value') + '">');
300                 }
301                 targetform.submit();
303             } else if (target.get('tagName').toLowerCase() == 'form') {
304                 // We cannot use target.test('form') on the previous line because of
305                 // http://yuilibrary.com/projects/yui3/ticket/2531561
306                 target.submit();
308             } else if (M.cfg.developerdebug) {
309                 alert("Element of type " + target.get('tagName') + " is not supported by the M.util.show_confirm_dialog function. Use A, INPUT, or FORM");
310             }
311         };
313         if (!args.cancellabel) {
314             args.cancellabel = M.str.moodle.cancel;
315         }
316         if (!args.continuelabel) {
317             args.continuelabel = M.str.moodle.yes;
318         }
320         var buttons = [
321             {text: args.cancellabel,   handler: handle_cancel, isDefault: true},
322             {text: args.continuelabel, handler: handle_yes}
323         ];
325         simpledialog.cfg.queueProperty('buttons', buttons);
327         simpledialog.render(document.body);
328         simpledialog.show();
329     });
330 };
332 /** Useful for full embedding of various stuff */
333 M.util.init_maximised_embed = function(Y, id) {
334     var obj = Y.one('#'+id);
335     if (!obj) {
336         return;
337     }
339     var get_htmlelement_size = function(el, prop) {
340         if (Y.Lang.isString(el)) {
341             el = Y.one('#' + el);
342         }
343         // Ensure element exists.
344         if (el) {
345             var val = el.getStyle(prop);
346             if (val == 'auto') {
347                 val = el.getComputedStyle(prop);
348             }
349             return parseInt(val);
350         } else {
351             return 0;
352         }
353     };
355     var resize_object = function() {
356         obj.setStyle('width', '0px');
357         obj.setStyle('height', '0px');
358         var newwidth = get_htmlelement_size('maincontent', 'width') - 35;
360         if (newwidth > 500) {
361             obj.setStyle('width', newwidth  + 'px');
362         } else {
363             obj.setStyle('width', '500px');
364         }
366         var headerheight = get_htmlelement_size('page-header', 'height');
367         var footerheight = get_htmlelement_size('page-footer', 'height');
368         var newheight = parseInt(Y.one('body').get('winHeight')) - footerheight - headerheight - 100;
369         if (newheight < 400) {
370             newheight = 400;
371         }
372         obj.setStyle('height', newheight+'px');
373     };
375     resize_object();
376     // fix layout if window resized too
377     window.onresize = function() {
378         resize_object();
379     };
380 };
382 /**
383  * Attach handler to single_select
384  *
385  * This code was deprecated in Moodle 2.4 and will be removed in Moodle 2.6
386  *
387  * Please see lib/yui/formautosubmit/formautosubmit.js for its replacement
388  */
389 M.util.init_select_autosubmit = function(Y, formid, selectid, nothing) {
390     if (M.cfg.developerdebug) {
391         Y.log("You are using a deprecated function call (M.util.init_select_autosubmit). Please look at rewriting your call to use moodle-core-formautosubmit");
392     }
393     Y.use('event-key', function() {
394         var select = Y.one('#'+selectid);
395         if (select) {
396             // Try to get the form by id
397             var form = Y.one('#'+formid) || (function(){
398                 // Hmmm the form's id may have been overriden by an internal input
399                 // with the name id which will KILL IE.
400                 // We need to manually iterate at this point because if the case
401                 // above is true YUI's ancestor method will also kill IE!
402                 var form = select;
403                 while (form && form.get('nodeName').toUpperCase() !== 'FORM') {
404                     form = form.ancestor();
405                 }
406                 return form;
407             })();
408             // Make sure we have the form
409             if (form) {
410                 var buttonflag = 0;
411                 // Create a function to handle our change event
412                 var processchange = function(e, paramobject) {
413                     if ((nothing===false || select.get('value') != nothing) && paramobject.lastindex != select.get('selectedIndex')) {
414                         // chrome doesn't pick up on a click when selecting an element in a select menu, so we use
415                         // the on change event to fire this function. This just checks to see if a button was
416                         // first pressed before redirecting to the appropriate page.
417                         if (Y.UA.os == 'windows' && Y.UA.chrome){
418                             if (buttonflag == 1) {
419                                 buttonflag = 0;
420                                 this.submit();
421                             }
422                         } else {
423                             this.submit();
424                         }
425                     }
426                     if (e.button == 1) {
427                         buttonflag = 1;
428                     }
429                     paramobject.lastindex = select.get('selectedIndex');
430                 };
432                 var changedown = function(e, paramobject) {
433                     if ((nothing===false || select.get('value') != nothing) && paramobject.lastindex != select.get('selectedIndex')) {
434                         if(e.keyCode == 13) {
435                             form.submit();
436                         }
437                         paramobject.lastindex = select.get('selectedIndex');
438                     }
439                 }
441                 var paramobject = new Object();
442                 paramobject.lastindex = select.get('selectedIndex');
443                 paramobject.eventchangeorblur = select.on('click', processchange, form, paramobject);
444                 // Bad hack to circumvent problems with different browsers on different systems.
445                 if (Y.UA.os == 'macintosh') {
446                     if(Y.UA.webkit) {
447                         paramobject.eventchangeorblur = select.on('change', processchange, form, paramobject);
448                     }
449                     paramobject.eventkeypress = Y.on('key', processchange, select, 'press:13', form, paramobject);
450                 } else {
451                     if(Y.UA.os == 'windows' && Y.UA.chrome) {
452                         paramobject.eventchangeorblur = select.on('change', processchange, form, paramobject);
453                     }
454                     paramobject.eventkeypress = Y.on('keydown', changedown, select, '', form, paramobject);
455                 }
456             }
457         }
458     });
459 };
461 /**
462  * Attach handler to url_select
463  * Deprecated from 2.4 onwards.
464  * Please use @see init_select_autosubmit() for redirecting to a url (above).
465  * This function has accessability issues and also does not use the formid passed through as a parameter.
466  */
467 M.util.init_url_select = function(Y, formid, selectid, nothing) {
468     if (M.cfg.developerdebug) {
469         Y.log("You are using a deprecated function call (M.util.init_url_select). Please look at rewriting your call to use moodle-core-formautosubmit");
470     }
471     YUI().use('node', function(Y) {
472         Y.on('change', function() {
473             if ((nothing == false && Y.Lang.isBoolean(nothing)) || Y.one('#'+selectid).get('value') != nothing) {
474                 window.location = M.cfg.wwwroot+Y.one('#'+selectid).get('value');
475             }
476         },
477         '#'+selectid);
478     });
479 };
481 /**
482  * Breaks out all links to the top frame - used in frametop page layout.
483  */
484 M.util.init_frametop = function(Y) {
485     Y.all('a').each(function(node) {
486         node.set('target', '_top');
487     });
488     Y.all('form').each(function(node) {
489         node.set('target', '_top');
490     });
491 };
493 /**
494  * Finds all nodes that match the given CSS selector and attaches events to them
495  * so that they toggle a given classname when clicked.
496  *
497  * @param {YUI} Y
498  * @param {string} id An id containing elements to target
499  * @param {string} cssselector A selector to use to find targets
500  * @param {string} toggleclassname A classname to toggle
501  */
502 M.util.init_toggle_class_on_click = function(Y, id, cssselector, toggleclassname, togglecssselector) {
504     if (togglecssselector == '') {
505         togglecssselector = cssselector;
506     }
508     var node = Y.one('#'+id);
509     node.all(cssselector).each(function(n){
510         n.on('click', function(e){
511             e.stopPropagation();
512             if (e.target.test(cssselector) && !e.target.test('a') && !e.target.test('img')) {
513                 if (this.test(togglecssselector)) {
514                     this.toggleClass(toggleclassname);
515                 } else {
516                     this.ancestor(togglecssselector).toggleClass(toggleclassname);
517             }
518             }
519         }, n);
520     });
521     // Attach this click event to the node rather than all selectors... will be much better
522     // for performance
523     node.on('click', function(e){
524         if (e.target.hasClass('addtoall')) {
525             this.all(togglecssselector).addClass(toggleclassname);
526         } else if (e.target.hasClass('removefromall')) {
527             this.all(togglecssselector+'.'+toggleclassname).removeClass(toggleclassname);
528         }
529     }, node);
530 };
532 /**
533  * Initialises a colour picker
534  *
535  * Designed to be used with admin_setting_configcolourpicker although could be used
536  * anywhere, just give a text input an id and insert a div with the class admin_colourpicker
537  * above or below the input (must have the same parent) and then call this with the
538  * id.
539  *
540  * This code was mostly taken from my [Sam Hemelryk] css theme tool available in
541  * contrib/blocks. For better docs refer to that.
542  *
543  * @param {YUI} Y
544  * @param {int} id
545  * @param {object} previewconf
546  */
547 M.util.init_colour_picker = function(Y, id, previewconf) {
548     /**
549      * We need node and event-mouseenter
550      */
551     Y.use('node', 'event-mouseenter', function(){
552         /**
553          * The colour picker object
554          */
555         var colourpicker = {
556             box : null,
557             input : null,
558             image : null,
559             preview : null,
560             current : null,
561             eventClick : null,
562             eventMouseEnter : null,
563             eventMouseLeave : null,
564             eventMouseMove : null,
565             width : 300,
566             height :  100,
567             factor : 5,
568             /**
569              * Initalises the colour picker by putting everything together and wiring the events
570              */
571             init : function() {
572                 this.input = Y.one('#'+id);
573                 this.box = this.input.ancestor().one('.admin_colourpicker');
574                 this.image = Y.Node.create('<img alt="" class="colourdialogue" />');
575                 this.image.setAttribute('src', M.util.image_url('i/colourpicker', 'moodle'));
576                 this.preview = Y.Node.create('<div class="previewcolour"></div>');
577                 this.preview.setStyle('width', this.height/2).setStyle('height', this.height/2).setStyle('backgroundColor', this.input.get('value'));
578                 this.current = Y.Node.create('<div class="currentcolour"></div>');
579                 this.current.setStyle('width', this.height/2).setStyle('height', this.height/2 -1).setStyle('backgroundColor', this.input.get('value'));
580                 this.box.setContent('').append(this.image).append(this.preview).append(this.current);
582                 if (typeof(previewconf) === 'object' && previewconf !== null) {
583                     Y.one('#'+id+'_preview').on('click', function(e){
584                         if (Y.Lang.isString(previewconf.selector)) {
585                             Y.all(previewconf.selector).setStyle(previewconf.style, this.input.get('value'));
586                         } else {
587                             for (var i in previewconf.selector) {
588                                 Y.all(previewconf.selector[i]).setStyle(previewconf.style, this.input.get('value'));
589                             }
590                         }
591                     }, this);
592                 }
594                 this.eventClick = this.image.on('click', this.pickColour, this);
595                 this.eventMouseEnter = Y.on('mouseenter', this.startFollow, this.image, this);
596             },
597             /**
598              * Starts to follow the mouse once it enter the image
599              */
600             startFollow : function(e) {
601                 this.eventMouseEnter.detach();
602                 this.eventMouseLeave = Y.on('mouseleave', this.endFollow, this.image, this);
603                 this.eventMouseMove = this.image.on('mousemove', function(e){
604                     this.preview.setStyle('backgroundColor', this.determineColour(e));
605                 }, this);
606             },
607             /**
608              * Stops following the mouse
609              */
610             endFollow : function(e) {
611                 this.eventMouseMove.detach();
612                 this.eventMouseLeave.detach();
613                 this.eventMouseEnter = Y.on('mouseenter', this.startFollow, this.image, this);
614             },
615             /**
616              * Picks the colour the was clicked on
617              */
618             pickColour : function(e) {
619                 var colour = this.determineColour(e);
620                 this.input.set('value', colour);
621                 this.current.setStyle('backgroundColor', colour);
622             },
623             /**
624              * Calculates the colour fromthe given co-ordinates
625              */
626             determineColour : function(e) {
627                 var eventx = Math.floor(e.pageX-e.target.getX());
628                 var eventy = Math.floor(e.pageY-e.target.getY());
630                 var imagewidth = this.width;
631                 var imageheight = this.height;
632                 var factor = this.factor;
633                 var colour = [255,0,0];
635                 var matrices = [
636                     [  0,  1,  0],
637                     [ -1,  0,  0],
638                     [  0,  0,  1],
639                     [  0, -1,  0],
640                     [  1,  0,  0],
641                     [  0,  0, -1]
642                 ];
644                 var matrixcount = matrices.length;
645                 var limit = Math.round(imagewidth/matrixcount);
646                 var heightbreak = Math.round(imageheight/2);
648                 for (var x = 0; x < imagewidth; x++) {
649                     var divisor = Math.floor(x / limit);
650                     var matrix = matrices[divisor];
652                     colour[0] += matrix[0]*factor;
653                     colour[1] += matrix[1]*factor;
654                     colour[2] += matrix[2]*factor;
656                     if (eventx==x) {
657                         break;
658                     }
659                 }
661                 var pixel = [colour[0], colour[1], colour[2]];
662                 if (eventy < heightbreak) {
663                     pixel[0] += Math.floor(((255-pixel[0])/heightbreak) * (heightbreak - eventy));
664                     pixel[1] += Math.floor(((255-pixel[1])/heightbreak) * (heightbreak - eventy));
665                     pixel[2] += Math.floor(((255-pixel[2])/heightbreak) * (heightbreak - eventy));
666                 } else if (eventy > heightbreak) {
667                     pixel[0] = Math.floor((imageheight-eventy)*(pixel[0]/heightbreak));
668                     pixel[1] = Math.floor((imageheight-eventy)*(pixel[1]/heightbreak));
669                     pixel[2] = Math.floor((imageheight-eventy)*(pixel[2]/heightbreak));
670                 }
672                 return this.convert_rgb_to_hex(pixel);
673             },
674             /**
675              * Converts an RGB value to Hex
676              */
677             convert_rgb_to_hex : function(rgb) {
678                 var hex = '#';
679                 var hexchars = "0123456789ABCDEF";
680                 for (var i=0; i<3; i++) {
681                     var number = Math.abs(rgb[i]);
682                     if (number == 0 || isNaN(number)) {
683                         hex += '00';
684                     } else {
685                         hex += hexchars.charAt((number-number%16)/16)+hexchars.charAt(number%16);
686                     }
687                 }
688                 return hex;
689             }
690         };
691         /**
692          * Initialise the colour picker :) Hoorah
693          */
694         colourpicker.init();
695     });
696 };
698 M.util.init_block_hider = function(Y, config) {
699     Y.use('base', 'node', function(Y) {
700         M.util.block_hider = M.util.block_hider || (function(){
701             var blockhider = function() {
702                 blockhider.superclass.constructor.apply(this, arguments);
703             };
704             blockhider.prototype = {
705                 initializer : function(config) {
706                     this.set('block', '#'+this.get('id'));
707                     var b = this.get('block'),
708                         t = b.one('.title'),
709                         a = null;
710                     if (t && (a = t.one('.block_action'))) {
711                         var hide = Y.Node.create('<img class="block-hider-hide" tabindex="0" alt="'+config.tooltipVisible+'" title="'+config.tooltipVisible+'" />');
712                         hide.setAttribute('src', this.get('iconVisible')).on('click', this.updateState, this, true);
713                         hide.on('keypress', this.updateStateKey, this, true);
714                         var show = Y.Node.create('<img class="block-hider-show" tabindex="0" alt="'+config.tooltipHidden+'" title="'+config.tooltipHidden+'" />');
715                         show.setAttribute('src', this.get('iconHidden')).on('click', this.updateState, this, false);
716                         show.on('keypress', this.updateStateKey, this, false);
717                         a.insert(show, 0).insert(hide, 0);
718                     }
719                 },
720                 updateState : function(e, hide) {
721                     M.util.set_user_preference(this.get('preference'), hide);
722                     if (hide) {
723                         this.get('block').addClass('hidden');
724                     } else {
725                         this.get('block').removeClass('hidden');
726                     }
727                 },
728                 updateStateKey : function(e, hide) {
729                     if (e.keyCode == 13) { //allow hide/show via enter key
730                         this.updateState(this, hide);
731                     }
732                 }
733             };
734             Y.extend(blockhider, Y.Base, blockhider.prototype, {
735                 NAME : 'blockhider',
736                 ATTRS : {
737                     id : {},
738                     preference : {},
739                     iconVisible : {
740                         value : M.util.image_url('t/switch_minus', 'moodle')
741                     },
742                     iconHidden : {
743                         value : M.util.image_url('t/switch_plus', 'moodle')
744                     },
745                     block : {
746                         setter : function(node) {
747                             return Y.one(node);
748                         }
749                     }
750                 }
751             });
752             return blockhider;
753         })();
754         new M.util.block_hider(config);
755     });
756 };
758 /**
759  * Returns a string registered in advance for usage in JavaScript
760  *
761  * If you do not pass the third parameter, the function will just return
762  * the corresponding value from the M.str object. If the third parameter is
763  * provided, the function performs {$a} placeholder substitution in the
764  * same way as PHP get_string() in Moodle does.
765  *
766  * @param {String} identifier string identifier
767  * @param {String} component the component providing the string
768  * @param {Object|String} a optional variable to populate placeholder with
769  */
770 M.util.get_string = function(identifier, component, a) {
771     var stringvalue;
773     if (M.cfg.developerdebug) {
774         // creating new instance if YUI is not optimal but it seems to be better way then
775         // require the instance via the function API - note that it is used in rare cases
776         // for debugging only anyway
777         // To ensure we don't kill browser performance if hundreds of get_string requests
778         // are made we cache the instance we generate within the M.util namespace.
779         // We don't publicly define the variable so that it doesn't get abused.
780         if (typeof M.util.get_string_yui_instance === 'undefined') {
781             M.util.get_string_yui_instance = new YUI({ debug : true });
782         }
783         var Y = M.util.get_string_yui_instance;
784     }
786     if (!M.str.hasOwnProperty(component) || !M.str[component].hasOwnProperty(identifier)) {
787         stringvalue = '[[' + identifier + ',' + component + ']]';
788         if (M.cfg.developerdebug) {
789             Y.log('undefined string ' + stringvalue, 'warn', 'M.util.get_string');
790         }
791         return stringvalue;
792     }
794     stringvalue = M.str[component][identifier];
796     if (typeof a == 'undefined') {
797         // no placeholder substitution requested
798         return stringvalue;
799     }
801     if (typeof a == 'number' || typeof a == 'string') {
802         // replace all occurrences of {$a} with the placeholder value
803         stringvalue = stringvalue.replace(/\{\$a\}/g, a);
804         return stringvalue;
805     }
807     if (typeof a == 'object') {
808         // replace {$a->key} placeholders
809         for (var key in a) {
810             if (typeof a[key] != 'number' && typeof a[key] != 'string') {
811                 if (M.cfg.developerdebug) {
812                     Y.log('invalid value type for $a->' + key, 'warn', 'M.util.get_string');
813                 }
814                 continue;
815             }
816             var search = '{$a->' + key + '}';
817             search = search.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
818             search = new RegExp(search, 'g');
819             stringvalue = stringvalue.replace(search, a[key]);
820         }
821         return stringvalue;
822     }
824     if (M.cfg.developerdebug) {
825         Y.log('incorrect placeholder type', 'warn', 'M.util.get_string');
826     }
827     return stringvalue;
828 };
830 /**
831  * Set focus on username or password field of the login form
832  */
833 M.util.focus_login_form = function(Y) {
834     var username = Y.one('#username');
835     var password = Y.one('#password');
837     if (username == null || password == null) {
838         // something is wrong here
839         return;
840     }
842     var curElement = document.activeElement
843     if (curElement == 'undefined') {
844         // legacy browser - skip refocus protection
845     } else if (curElement.tagName == 'INPUT') {
846         // user was probably faster to focus something, do not mess with focus
847         return;
848     }
850     if (username.get('value') == '') {
851         username.focus();
852     } else {
853         password.focus();
854     }
857 /**
858  * Set focus on login error message
859  */
860 M.util.focus_login_error = function(Y) {
861     var errorlog = Y.one('#loginerrormessage');
863     if (errorlog) {
864         errorlog.focus();
865     }
867 /**
868  * Adds lightbox hidden element that covers the whole node.
869  *
870  * @param {YUI} Y
871  * @param {Node} the node lightbox should be added to
872  * @retun {Node} created lightbox node
873  */
874 M.util.add_lightbox = function(Y, node) {
875     var WAITICON = {'pix':"i/loading_small",'component':'moodle'};
877     // Check if lightbox is already there
878     if (node.one('.lightbox')) {
879         return node.one('.lightbox');
880     }
882     node.setStyle('position', 'relative');
883     var waiticon = Y.Node.create('<img />')
884     .setAttrs({
885         'src' : M.util.image_url(WAITICON.pix, WAITICON.component)
886     })
887     .setStyles({
888         'position' : 'relative',
889         'top' : '50%'
890     });
892     var lightbox = Y.Node.create('<div></div>')
893     .setStyles({
894         'opacity' : '.75',
895         'position' : 'absolute',
896         'width' : '100%',
897         'height' : '100%',
898         'top' : 0,
899         'left' : 0,
900         'backgroundColor' : 'white',
901         'textAlign' : 'center'
902     })
903     .setAttribute('class', 'lightbox')
904     .hide();
906     lightbox.appendChild(waiticon);
907     node.append(lightbox);
908     return lightbox;
911 /**
912  * Appends a hidden spinner element to the specified node.
913  *
914  * @param {YUI} Y
915  * @param {Node} the node the spinner should be added to
916  * @return {Node} created spinner node
917  */
918 M.util.add_spinner = function(Y, node) {
919     var WAITICON = {'pix':"i/loading_small",'component':'moodle'};
921     // Check if spinner is already there
922     if (node.one('.spinner')) {
923         return node.one('.spinner');
924     }
926     var spinner = Y.Node.create('<img />')
927         .setAttribute('src', M.util.image_url(WAITICON.pix, WAITICON.component))
928         .addClass('spinner')
929         .addClass('iconsmall')
930         .hide();
932     node.append(spinner);
933     return spinner;
936 //=== old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code ===
938 function checkall() {
939     var inputs = document.getElementsByTagName('input');
940     for (var i = 0; i < inputs.length; i++) {
941         if (inputs[i].type == 'checkbox') {
942             if (inputs[i].disabled || inputs[i].readOnly) {
943                 continue;
944             }
945             inputs[i].checked = true;
946         }
947     }
950 function checknone() {
951     var inputs = document.getElementsByTagName('input');
952     for (var i = 0; i < inputs.length; i++) {
953         if (inputs[i].type == 'checkbox') {
954             if (inputs[i].disabled || inputs[i].readOnly) {
955                 continue;
956             }
957             inputs[i].checked = false;
958         }
959     }
962 /**
963  * Either check, or uncheck, all checkboxes inside the element with id is
964  * @param id the id of the container
965  * @param checked the new state, either '' or 'checked'.
966  */
967 function select_all_in_element_with_id(id, checked) {
968     var container = document.getElementById(id);
969     if (!container) {
970         return;
971     }
972     var inputs = container.getElementsByTagName('input');
973     for (var i = 0; i < inputs.length; ++i) {
974         if (inputs[i].type == 'checkbox' || inputs[i].type == 'radio') {
975             inputs[i].checked = checked;
976         }
977     }
980 function select_all_in(elTagName, elClass, elId) {
981     var inputs = document.getElementsByTagName('input');
982     inputs = filterByParent(inputs, function(el) {return findParentNode(el, elTagName, elClass, elId);});
983     for(var i = 0; i < inputs.length; ++i) {
984         if(inputs[i].type == 'checkbox' || inputs[i].type == 'radio') {
985             inputs[i].checked = 'checked';
986         }
987     }
990 function deselect_all_in(elTagName, elClass, elId) {
991     var inputs = document.getElementsByTagName('INPUT');
992     inputs = filterByParent(inputs, function(el) {return findParentNode(el, elTagName, elClass, elId);});
993     for(var i = 0; i < inputs.length; ++i) {
994         if(inputs[i].type == 'checkbox' || inputs[i].type == 'radio') {
995             inputs[i].checked = '';
996         }
997     }
1000 function confirm_if(expr, message) {
1001     if(!expr) {
1002         return true;
1003     }
1004     return confirm(message);
1008 /*
1009     findParentNode (start, elementName, elementClass, elementID)
1011     Travels up the DOM hierarchy to find a parent element with the
1012     specified tag name, class, and id. All conditions must be met,
1013     but any can be ommitted. Returns the BODY element if no match
1014     found.
1015 */
1016 function findParentNode(el, elName, elClass, elId) {
1017     while (el.nodeName.toUpperCase() != 'BODY') {
1018         if ((!elName || el.nodeName.toUpperCase() == elName) &&
1019             (!elClass || el.className.indexOf(elClass) != -1) &&
1020             (!elId || el.id == elId)) {
1021             break;
1022         }
1023         el = el.parentNode;
1024     }
1025     return el;
1027 /*
1028     findChildNode (start, elementName, elementClass, elementID)
1030     Travels down the DOM hierarchy to find all child elements with the
1031     specified tag name, class, and id. All conditions must be met,
1032     but any can be ommitted.
1033     Doesn't examine children of matches.
1034 */
1035 function findChildNodes(start, tagName, elementClass, elementID, elementName) {
1036     var children = new Array();
1037     for (var i = 0; i < start.childNodes.length; i++) {
1038         var classfound = false;
1039         var child = start.childNodes[i];
1040         if((child.nodeType == 1) &&//element node type
1041                   (elementClass && (typeof(child.className)=='string'))) {
1042             var childClasses = child.className.split(/\s+/);
1043             for (var childClassIndex in childClasses) {
1044                 if (childClasses[childClassIndex]==elementClass) {
1045                     classfound = true;
1046                     break;
1047                 }
1048             }
1049         }
1050         if(child.nodeType == 1) { //element node type
1051             if  ( (!tagName || child.nodeName == tagName) &&
1052                 (!elementClass || classfound)&&
1053                 (!elementID || child.id == elementID) &&
1054                 (!elementName || child.name == elementName))
1055             {
1056                 children = children.concat(child);
1057             } else {
1058                 children = children.concat(findChildNodes(child, tagName, elementClass, elementID, elementName));
1059             }
1060         }
1061     }
1062     return children;
1065 function unmaskPassword(id) {
1066     var pw = document.getElementById(id);
1067     var chb = document.getElementById(id+'unmask');
1069     // MDL-30438 - The capability to changing the value of input type is not supported by IE8 or lower.
1070     // Replacing existing child with a new one, removed all yui properties for the node.  Therefore, this
1071     // functionality won't work in IE8 or lower.
1072     // This is a temporary fixed to allow other browsers to function properly.
1073     if (Y.UA.ie == 0 || Y.UA.ie >= 9) {
1074         if (chb.checked) {
1075             pw.type = "text";
1076         } else {
1077             pw.type = "password";
1078         }
1079     } else {  //IE Browser version 8 or lower
1080         try {
1081             // first try IE way - it can not set name attribute later
1082             if (chb.checked) {
1083               var newpw = document.createElement('<input type="text" autocomplete="off" name="'+pw.name+'">');
1084             } else {
1085               var newpw = document.createElement('<input type="password" autocomplete="off" name="'+pw.name+'">');
1086             }
1087             newpw.attributes['class'].nodeValue = pw.attributes['class'].nodeValue;
1088         } catch (e) {
1089             var newpw = document.createElement('input');
1090             newpw.setAttribute('autocomplete', 'off');
1091             newpw.setAttribute('name', pw.name);
1092             if (chb.checked) {
1093               newpw.setAttribute('type', 'text');
1094             } else {
1095               newpw.setAttribute('type', 'password');
1096             }
1097             newpw.setAttribute('class', pw.getAttribute('class'));
1098         }
1099         newpw.id = pw.id;
1100         newpw.size = pw.size;
1101         newpw.onblur = pw.onblur;
1102         newpw.onchange = pw.onchange;
1103         newpw.value = pw.value;
1104         pw.parentNode.replaceChild(newpw, pw);
1105     }
1108 function filterByParent(elCollection, parentFinder) {
1109     var filteredCollection = [];
1110     for (var i = 0; i < elCollection.length; ++i) {
1111         var findParent = parentFinder(elCollection[i]);
1112         if (findParent.nodeName.toUpperCase() != 'BODY') {
1113             filteredCollection.push(elCollection[i]);
1114         }
1115     }
1116     return filteredCollection;
1119 /*
1120     All this is here just so that IE gets to handle oversized blocks
1121     in a visually pleasing manner. It does a browser detect. So sue me.
1122 */
1124 function fix_column_widths() {
1125     var agt = navigator.userAgent.toLowerCase();
1126     if ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)) {
1127         fix_column_width('left-column');
1128         fix_column_width('right-column');
1129     }
1132 function fix_column_width(colName) {
1133     if(column = document.getElementById(colName)) {
1134         if(!column.offsetWidth) {
1135             setTimeout("fix_column_width('" + colName + "')", 20);
1136             return;
1137         }
1139         var width = 0;
1140         var nodes = column.childNodes;
1142         for(i = 0; i < nodes.length; ++i) {
1143             if(nodes[i].className.indexOf("block") != -1 ) {
1144                 if(width < nodes[i].offsetWidth) {
1145                     width = nodes[i].offsetWidth;
1146                 }
1147             }
1148         }
1150         for(i = 0; i < nodes.length; ++i) {
1151             if(nodes[i].className.indexOf("block") != -1 ) {
1152                 nodes[i].style.width = width + 'px';
1153             }
1154         }
1155     }
1159 /*
1160    Insert myValue at current cursor position
1161  */
1162 function insertAtCursor(myField, myValue) {
1163     // IE support
1164     if (document.selection) {
1165         myField.focus();
1166         sel = document.selection.createRange();
1167         sel.text = myValue;
1168     }
1169     // Mozilla/Netscape support
1170     else if (myField.selectionStart || myField.selectionStart == '0') {
1171         var startPos = myField.selectionStart;
1172         var endPos = myField.selectionEnd;
1173         myField.value = myField.value.substring(0, startPos)
1174             + myValue + myField.value.substring(endPos, myField.value.length);
1175     } else {
1176         myField.value += myValue;
1177     }
1181 /*
1182         Call instead of setting window.onload directly or setting body onload=.
1183         Adds your function to a chain of functions rather than overwriting anything
1184         that exists.
1185 */
1186 function addonload(fn) {
1187     var oldhandler=window.onload;
1188     window.onload=function() {
1189         if(oldhandler) oldhandler();
1190             fn();
1191     }
1193 /**
1194  * Replacement for getElementsByClassName in browsers that aren't cool enough
1195  *
1196  * Relying on the built-in getElementsByClassName is far, far faster than
1197  * using YUI.
1198  *
1199  * Note: the third argument used to be an object with odd behaviour. It now
1200  * acts like the 'name' in the HTML5 spec, though the old behaviour is still
1201  * mimicked if you pass an object.
1202  *
1203  * @param {Node} oElm The top-level node for searching. To search a whole
1204  *                    document, use `document`.
1205  * @param {String} strTagName filter by tag names
1206  * @param {String} name same as HTML5 spec
1207  */
1208 function getElementsByClassName(oElm, strTagName, name) {
1209     // for backwards compatibility
1210     if(typeof name == "object") {
1211         var names = new Array();
1212         for(var i=0; i<name.length; i++) names.push(names[i]);
1213         name = names.join('');
1214     }
1215     // use native implementation if possible
1216     if (oElm.getElementsByClassName && Array.filter) {
1217         if (strTagName == '*') {
1218             return oElm.getElementsByClassName(name);
1219         } else {
1220             return Array.filter(oElm.getElementsByClassName(name), function(el) {
1221                 return el.nodeName.toLowerCase() == strTagName.toLowerCase();
1222             });
1223         }
1224     }
1225     // native implementation unavailable, fall back to slow method
1226     var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
1227     var arrReturnElements = new Array();
1228     var arrRegExpClassNames = new Array();
1229     var names = name.split(' ');
1230     for(var i=0; i<names.length; i++) {
1231         arrRegExpClassNames.push(new RegExp("(^|\\s)" + names[i].replace(/\-/g, "\\-") + "(\\s|$)"));
1232     }
1233     var oElement;
1234     var bMatchesAll;
1235     for(var j=0; j<arrElements.length; j++) {
1236         oElement = arrElements[j];
1237         bMatchesAll = true;
1238         for(var k=0; k<arrRegExpClassNames.length; k++) {
1239             if(!arrRegExpClassNames[k].test(oElement.className)) {
1240                 bMatchesAll = false;
1241                 break;
1242             }
1243         }
1244         if(bMatchesAll) {
1245             arrReturnElements.push(oElement);
1246         }
1247     }
1248     return (arrReturnElements)
1251 /**
1252  * Increment a file name.
1253  *
1254  * @param string file name.
1255  * @param boolean ignoreextension do not extract the extension prior to appending the
1256  *                                suffix. Useful when incrementing folder names.
1257  * @return string the incremented file name.
1258  */
1259 function increment_filename(filename, ignoreextension) {
1260     var extension = '';
1261     var basename = filename;
1263     // Split the file name into the basename + extension.
1264     if (!ignoreextension) {
1265         var dotpos = filename.lastIndexOf('.');
1266         if (dotpos !== -1) {
1267             basename = filename.substr(0, dotpos);
1268             extension = filename.substr(dotpos, filename.length);
1269         }
1270     }
1272     // Look to see if the name already has (NN) at the end of it.
1273     var number = 0;
1274     var hasnumber = basename.match(/^(.*) \((\d+)\)$/);
1275     if (hasnumber !== null) {
1276         // Note the current number & remove it from the basename.
1277         number = parseInt(hasnumber[2], 10);
1278         basename = hasnumber[1];
1279     }
1281     number++;
1282     var newname = basename + ' (' + number + ')' + extension;
1283     return newname;
1286 /**
1287  * Return whether we are in right to left mode or not.
1288  *
1289  * @return boolean
1290  */
1291 function right_to_left() {
1292     var body = Y.one('body');
1293     var rtl = false;
1294     if (body && body.hasClass('dir-rtl')) {
1295         rtl = true;
1296     }
1297     return rtl;
1300 function openpopup(event, args) {
1302     if (event) {
1303         if (event.preventDefault) {
1304             event.preventDefault();
1305         } else {
1306             event.returnValue = false;
1307         }
1308     }
1310     // Make sure the name argument is set and valid.
1311     var nameregex = /[^a-z0-9_]/i;
1312     if (typeof args.name !== 'string') {
1313         args.name = '_blank';
1314     } else if (args.name.match(nameregex)) {
1315         // Cleans window name because IE does not support funky ones.
1316         args.name = args.name.replace(nameregex, '_');
1317         if (M.cfg.developerdebug) {
1318             alert('DEVELOPER NOTICE: Invalid \'name\' passed to openpopup()');
1319         }
1320     }
1322     var fullurl = args.url;
1323     if (!args.url.match(/https?:\/\//)) {
1324         fullurl = M.cfg.wwwroot + args.url;
1325     }
1326     if (args.fullscreen) {
1327         args.options = args.options.
1328                 replace(/top=\d+/, 'top=0').
1329                 replace(/left=\d+/, 'left=0').
1330                 replace(/width=\d+/, 'width=' + screen.availWidth).
1331                 replace(/height=\d+/, 'height=' + screen.availHeight);
1332     }
1333     var windowobj = window.open(fullurl,args.name,args.options);
1334     if (!windowobj) {
1335         return true;
1336     }
1338     if (args.fullscreen) {
1339         // In some browser / OS combinations (E.g. Chrome on Windows), the
1340         // window initially opens slighly too big. The width and heigh options
1341         // seem to control the area inside the browser window, so what with
1342         // scroll-bars, etc. the actual window is bigger than the screen.
1343         // Therefore, we need to fix things up after the window is open.
1344         var hackcount = 100;
1345         var get_size_exactly_right = function() {
1346             windowobj.moveTo(0, 0);
1347             windowobj.resizeTo(screen.availWidth, screen.availHeight);
1349             // Unfortunately, it seems that in Chrome on Ubuntu, if you call
1350             // something like windowobj.resizeTo(1280, 1024) too soon (up to
1351             // about 50ms) after the window is open, then it actually behaves
1352             // as if you called windowobj.resizeTo(0, 0). Therefore, we need to
1353             // check that the resize actually worked, and if not, repeatedly try
1354             // again after a short delay until it works (but with a limit of
1355             // hackcount repeats.
1356             if (hackcount > 0 && (windowobj.innerHeight < 10 || windowobj.innerWidth < 10)) {
1357                 hackcount -= 1;
1358                 setTimeout(get_size_exactly_right, 10);
1359             }
1360         }
1361         setTimeout(get_size_exactly_right, 0);
1362     }
1363     windowobj.focus();
1365     return false;
1368 /** Close the current browser window. */
1369 function close_window(e) {
1370     if (e.preventDefault) {
1371         e.preventDefault();
1372     } else {
1373         e.returnValue = false;
1374     }
1375     window.close();
1378 /**
1379  * Used in a couple of modules to hide navigation areas when using AJAX
1380  */
1382 function show_item(itemid) {
1383     var item = document.getElementById(itemid);
1384     if (item) {
1385         item.style.display = "";
1386     }
1389 function destroy_item(itemid) {
1390     var item = document.getElementById(itemid);
1391     if (item) {
1392         item.parentNode.removeChild(item);
1393     }
1395 /**
1396  * Tranfer keyboard focus to the HTML element with the given id, if it exists.
1397  * @param controlid the control id.
1398  */
1399 function focuscontrol(controlid) {
1400     var control = document.getElementById(controlid);
1401     if (control) {
1402         control.focus();
1403     }
1406 /**
1407  * Transfers keyboard focus to an HTML element based on the old style style of focus
1408  * This function should be removed as soon as it is no longer used
1409  */
1410 function old_onload_focus(formid, controlname) {
1411     if (document.forms[formid] && document.forms[formid].elements && document.forms[formid].elements[controlname]) {
1412         document.forms[formid].elements[controlname].focus();
1413     }
1416 function build_querystring(obj) {
1417     return convert_object_to_string(obj, '&');
1420 function build_windowoptionsstring(obj) {
1421     return convert_object_to_string(obj, ',');
1424 function convert_object_to_string(obj, separator) {
1425     if (typeof obj !== 'object') {
1426         return null;
1427     }
1428     var list = [];
1429     for(var k in obj) {
1430         k = encodeURIComponent(k);
1431         var value = obj[k];
1432         if(obj[k] instanceof Array) {
1433             for(var i in value) {
1434                 list.push(k+'[]='+encodeURIComponent(value[i]));
1435             }
1436         } else {
1437             list.push(k+'='+encodeURIComponent(value));
1438         }
1439     }
1440     return list.join(separator);
1443 function stripHTML(str) {
1444     var re = /<\S[^><]*>/g;
1445     var ret = str.replace(re, "");
1446     return ret;
1449 Number.prototype.fixed=function(n){
1450     with(Math)
1451         return round(Number(this)*pow(10,n))/pow(10,n);
1452 };
1453 function update_progress_bar (id, width, pt, msg, es){
1454     var percent = pt;
1455     var status = document.getElementById("status_"+id);
1456     var percent_indicator = document.getElementById("pt_"+id);
1457     var progress_bar = document.getElementById("progress_"+id);
1458     var time_es = document.getElementById("time_"+id);
1459     status.innerHTML = msg;
1460     percent_indicator.innerHTML = percent.fixed(2) + '%';
1461     if(percent == 100) {
1462         progress_bar.style.background = "green";
1463         time_es.style.display = "none";
1464     } else {
1465         progress_bar.style.background = "#FFCC66";
1466         if (es == '?'){
1467             time_es.innerHTML = "";
1468         }else {
1469             time_es.innerHTML = es.fixed(2)+" sec";
1470             time_es.style.display
1471                 = "block";
1472         }
1473     }
1474     progress_bar.style.width = width + "px";
1479 // ===== Deprecated core Javascript functions for Moodle ====
1480 //       DO NOT USE!!!!!!!
1481 // Do not put this stuff in separate file because it only adds extra load on servers!
1483 /**
1484  * Used in a couple of modules to hide navigation areas when using AJAX
1485  */
1486 function hide_item(itemid) {
1487     // use class='hiddenifjs' instead
1488     var item = document.getElementById(itemid);
1489     if (item) {
1490         item.style.display = "none";
1491     }
1494 M.util.help_popups = {
1495     setup : function(Y) {
1496         Y.one('body').delegate('click', this.open_popup, 'a.helplinkpopup', this);
1497     },
1498     open_popup : function(e) {
1499         // Prevent the default page action
1500         e.preventDefault();
1502         // Grab the anchor that was clicked
1503         var anchor = e.target.ancestor('a', true);
1504         var args = {
1505             'name'          : 'popup',
1506             'url'           : anchor.getAttribute('href'),
1507             'options'       : ''
1508         };
1509         var options = [
1510             'height=600',
1511             'width=800',
1512             'top=0',
1513             'left=0',
1514             'menubar=0',
1515             'location=0',
1516             'scrollbars',
1517             'resizable',
1518             'toolbar',
1519             'status',
1520             'directories=0',
1521             'fullscreen=0',
1522             'dependent'
1523         ]
1524         args.options = options.join(',');
1526         openpopup(e, args);
1527     }
1530 /**
1531  * This code bas been deprecated and will be removed from Moodle 2.7
1532  *
1533  * Please see lib/yui/popuphelp/popuphelp.js for its replacement
1534  */
1535 M.util.help_icon = {
1536     initialised : false,
1537     setup : function(Y, properties) {
1538         this.add(Y, properties);
1539     },
1540     add : function(Y) {
1541         if (M.cfg.developerdebug) {
1542             Y.log("You are using a deprecated function call (M.util.help_icon.add). " +
1543                     "Please look at rewriting your call to support lib/yui/popuphelp/popuphelp.js");
1544         }
1545         if (!this.initialised) {
1546             YUI().use('moodle-core-popuphelp', function() {
1547                 M.core.init_popuphelp([]);
1548             });
1549         }
1550         this.initialised = true;
1551     }
1552 };
1554 /**
1555  * Custom menu namespace
1556  */
1557 M.core_custom_menu = {
1558     /**
1559      * This method is used to initialise a custom menu given the id that belongs
1560      * to the custom menu's root node.
1561      *
1562      * @param {YUI} Y
1563      * @param {string} nodeid
1564      */
1565     init : function(Y, nodeid) {
1566         var node = Y.one('#'+nodeid);
1567         if (node) {
1568             Y.use('node-menunav', function(Y) {
1569                 // Get the node
1570                 // Remove the javascript-disabled class.... obviously javascript is enabled.
1571                 node.removeClass('javascript-disabled');
1572                 // Initialise the menunav plugin
1573                 node.plug(Y.Plugin.NodeMenuNav);
1574             });
1575         }
1576     }
1577 };
1579 /**
1580  * Used to store form manipulation methods and enhancments
1581  */
1582 M.form = M.form || {};
1584 /**
1585  * Converts a nbsp indented select box into a multi drop down custom control much
1586  * like the custom menu. It also selectable categories on or off.
1587  *
1588  * $form->init_javascript_enhancement('elementname','smartselect', array('selectablecategories'=>true|false, 'mode'=>'compact'|'spanning'));
1589  *
1590  * @param {YUI} Y
1591  * @param {string} id
1592  * @param {Array} options
1593  */
1594 M.form.init_smartselect = function(Y, id, options) {
1595     if (!id.match(/^id_/)) {
1596         id = 'id_'+id;
1597     }
1598     var select = Y.one('select#'+id);
1599     if (!select) {
1600         return false;
1601     }
1602     Y.use('event-delegate',function(){
1603         var smartselect = {
1604             id : id,
1605             structure : [],
1606             options : [],
1607             submenucount : 0,
1608             currentvalue : null,
1609             currenttext : null,
1610             shownevent : null,
1611             cfg : {
1612                 selectablecategories : true,
1613                 mode : null
1614             },
1615             nodes : {
1616                 select : null,
1617                 loading : null,
1618                 menu : null
1619             },
1620             init : function(Y, id, args, nodes) {
1621                 if (typeof(args)=='object') {
1622                     for (var i in this.cfg) {
1623                         if (args[i] || args[i]===false) {
1624                             this.cfg[i] = args[i];
1625                         }
1626                     }
1627                 }
1629                 // Display a loading message first up
1630                 this.nodes.select = nodes.select;
1632                 this.currentvalue = this.nodes.select.get('selectedIndex');
1633                 this.currenttext = this.nodes.select.all('option').item(this.currentvalue).get('innerHTML');
1635                 var options = Array();
1636                 options[''] = {text:this.currenttext,value:'',depth:0,children:[]};
1637                 this.nodes.select.all('option').each(function(option, index) {
1638                     var rawtext = option.get('innerHTML');
1639                     var text = rawtext.replace(/^(&nbsp;)*/, '');
1640                     if (rawtext === text) {
1641                         text = rawtext.replace(/^(\s)*/, '');
1642                         var depth = (rawtext.length - text.length ) + 1;
1643                     } else {
1644                         var depth = ((rawtext.length - text.length )/12)+1;
1645                     }
1646                     option.set('innerHTML', text);
1647                     options['i'+index] = {text:text,depth:depth,index:index,children:[]};
1648                 }, this);
1650                 this.structure = [];
1651                 var structcount = 0;
1652                 for (var i in options) {
1653                     var o = options[i];
1654                     if (o.depth == 0) {
1655                         this.structure.push(o);
1656                         structcount++;
1657                     } else {
1658                         var d = o.depth;
1659                         var current = this.structure[structcount-1];
1660                         for (var j = 0; j < o.depth-1;j++) {
1661                             if (current && current.children) {
1662                                 current = current.children[current.children.length-1];
1663                             }
1664                         }
1665                         if (current && current.children) {
1666                             current.children.push(o);
1667                         }
1668                     }
1669                 }
1671                 this.nodes.menu = Y.Node.create(this.generate_menu_content());
1672                 this.nodes.menu.one('.smartselect_mask').setStyle('opacity', 0.01);
1673                 this.nodes.menu.one('.smartselect_mask').setStyle('width', (this.nodes.select.get('offsetWidth')+5)+'px');
1674                 this.nodes.menu.one('.smartselect_mask').setStyle('height', (this.nodes.select.get('offsetHeight'))+'px');
1676                 if (this.cfg.mode == null) {
1677                     var formwidth = this.nodes.select.ancestor('form').get('offsetWidth');
1678                     if (formwidth < 400 || this.nodes.menu.get('offsetWidth') < formwidth*2) {
1679                         this.cfg.mode = 'compact';
1680                     } else {
1681                         this.cfg.mode = 'spanning';
1682                     }
1683                 }
1685                 if (this.cfg.mode == 'compact') {
1686                     this.nodes.menu.addClass('compactmenu');
1687                 } else {
1688                     this.nodes.menu.addClass('spanningmenu');
1689                     this.nodes.menu.delegate('mouseover', this.show_sub_menu, '.smartselect_submenuitem', this);
1690                 }
1692                 Y.one(document.body).append(this.nodes.menu);
1693                 var pos = this.nodes.select.getXY();
1694                 pos[0] += 1;
1695                 this.nodes.menu.setXY(pos);
1696                 this.nodes.menu.on('click', this.handle_click, this);
1698                 Y.one(window).on('resize', function(){
1699                      var pos = this.nodes.select.getXY();
1700                     pos[0] += 1;
1701                     this.nodes.menu.setXY(pos);
1702                  }, this);
1703             },
1704             generate_menu_content : function() {
1705                 var content = '<div id="'+this.id+'_smart_select" class="smartselect">';
1706                 content += this.generate_submenu_content(this.structure[0], true);
1707                 content += '</ul></div>';
1708                 return content;
1709             },
1710             generate_submenu_content : function(item, rootelement) {
1711                 this.submenucount++;
1712                 var content = '';
1713                 if (item.children.length > 0) {
1714                     if (rootelement) {
1715                         content += '<div class="smartselect_mask" href="#ss_submenu'+this.submenucount+'">&nbsp;</div>';
1716                         content += '<div id="ss_submenu'+this.submenucount+'" class="smartselect_menu">';
1717                         content += '<div class="smartselect_menu_content">';
1718                     } else {
1719                         content += '<li class="smartselect_submenuitem">';
1720                         var categoryclass = (this.cfg.selectablecategories)?'selectable':'notselectable';
1721                         content += '<a class="smartselect_menuitem_label '+categoryclass+'" href="#ss_submenu'+this.submenucount+'" value="'+item.index+'">'+item.text+'</a>';
1722                         content += '<div id="ss_submenu'+this.submenucount+'" class="smartselect_submenu">';
1723                         content += '<div class="smartselect_submenu_content">';
1724                     }
1725                     content += '<ul>';
1726                     for (var i in item.children) {
1727                         content += this.generate_submenu_content(item.children[i],false);
1728                     }
1729                     content += '</ul>';
1730                     content += '</div>';
1731                     content += '</div>';
1732                     if (rootelement) {
1733                     } else {
1734                         content += '</li>';
1735                     }
1736                 } else {
1737                     content += '<li class="smartselect_menuitem">';
1738                     content += '<a class="smartselect_menuitem_content selectable" href="#" value="'+item.index+'">'+item.text+'</a>';
1739                     content += '</li>';
1740                 }
1741                 return content;
1742             },
1743             select : function(e) {
1744                 var t = e.target;
1745                 e.halt();
1746                 this.currenttext = t.get('innerHTML');
1747                 this.currentvalue = t.getAttribute('value');
1748                 this.nodes.select.set('selectedIndex', this.currentvalue);
1749                 this.hide_menu();
1750             },
1751             handle_click : function(e) {
1752                 var target = e.target;
1753                 if (target.hasClass('smartselect_mask')) {
1754                     this.show_menu(e);
1755                 } else if (target.hasClass('selectable') || target.hasClass('smartselect_menuitem')) {
1756                     this.select(e);
1757                 } else if (target.hasClass('smartselect_menuitem_label') || target.hasClass('smartselect_submenuitem')) {
1758                     this.show_sub_menu(e);
1759                 }
1760             },
1761             show_menu : function(e) {
1762                 e.halt();
1763                 var menu = e.target.ancestor().one('.smartselect_menu');
1764                 menu.addClass('visible');
1765                 this.shownevent = Y.one(document.body).on('click', this.hide_menu, this);
1766             },
1767             show_sub_menu : function(e) {
1768                 e.halt();
1769                 var target = e.target;
1770                 if (!target.hasClass('smartselect_submenuitem')) {
1771                     target = target.ancestor('.smartselect_submenuitem');
1772                 }
1773                 if (this.cfg.mode == 'compact' && target.one('.smartselect_submenu').hasClass('visible')) {
1774                     target.ancestor('ul').all('.smartselect_submenu.visible').removeClass('visible');
1775                     return;
1776                 }
1777                 target.ancestor('ul').all('.smartselect_submenu.visible').removeClass('visible');
1778                 target.one('.smartselect_submenu').addClass('visible');
1779             },
1780             hide_menu : function() {
1781                 this.nodes.menu.all('.visible').removeClass('visible');
1782                 if (this.shownevent) {
1783                     this.shownevent.detach();
1784                 }
1785             }
1786         };
1787         smartselect.init(Y, id, options, {select:select});
1788     });
1789 };
1791 /** List of flv players to be loaded */
1792 M.util.video_players = [];
1793 /** List of mp3 players to be loaded */
1794 M.util.audio_players = [];
1796 /**
1797  * Add video player
1798  * @param id element id
1799  * @param fileurl media url
1800  * @param width
1801  * @param height
1802  * @param autosize true means detect size from media
1803  */
1804 M.util.add_video_player = function (id, fileurl, width, height, autosize) {
1805     M.util.video_players.push({id: id, fileurl: fileurl, width: width, height: height, autosize: autosize, resized: false});
1806 };
1808 /**
1809  * Add audio player.
1810  * @param id
1811  * @param fileurl
1812  * @param small
1813  */
1814 M.util.add_audio_player = function (id, fileurl, small) {
1815     M.util.audio_players.push({id: id, fileurl: fileurl, small: small});
1816 };
1818 /**
1819  * Initialise all audio and video player, must be called from page footer.
1820  */
1821 M.util.load_flowplayer = function() {
1822     if (M.util.video_players.length == 0 && M.util.audio_players.length == 0) {
1823         return;
1824     }
1825     if (typeof(flowplayer) == 'undefined') {
1826         var loaded = false;
1828         var embed_function = function() {
1829             if (loaded || typeof(flowplayer) == 'undefined') {
1830                 return;
1831             }
1832             loaded = true;
1834             var controls = {
1835                     autoHide: true
1836             }
1837             /* TODO: add CSS color overrides for the flv flow player */
1839             for(var i=0; i<M.util.video_players.length; i++) {
1840                 var video = M.util.video_players[i];
1841                 if (video.width > 0 && video.height > 0) {
1842                     var src = {src: M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.14.swf', width: video.width, height: video.height};
1843                 } else {
1844                     var src = M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.14.swf';
1845                 }
1846                 flowplayer(video.id, src, {
1847                     plugins: {controls: controls},
1848                     clip: {
1849                         url: video.fileurl, autoPlay: false, autoBuffering: true, scaling: 'fit', mvideo: video,
1850                         onMetaData: function(clip) {
1851                             if (clip.mvideo.autosize && !clip.mvideo.resized) {
1852                                 clip.mvideo.resized = true;
1853                                 //alert("metadata!!! "+clip.width+' '+clip.height+' '+JSON.stringify(clip.metaData));
1854                                 if (typeof(clip.metaData.width) == 'undefined' || typeof(clip.metaData.height) == 'undefined') {
1855                                     // bad luck, we have to guess - we may not get metadata at all
1856                                     var width = clip.width;
1857                                     var height = clip.height;
1858                                 } else {
1859                                     var width = clip.metaData.width;
1860                                     var height = clip.metaData.height;
1861                                 }
1862                                 var minwidth = 300; // controls are messed up in smaller objects
1863                                 if (width < minwidth) {
1864                                     height = (height * minwidth) / width;
1865                                     width = minwidth;
1866                                 }
1868                                 var object = this._api();
1869                                 object.width = width;
1870                                 object.height = height;
1871                             }
1872                         }
1873                     }
1874                 });
1875             }
1876             if (M.util.audio_players.length == 0) {
1877                 return;
1878             }
1879             var controls = {
1880                     autoHide: false,
1881                     fullscreen: false,
1882                     next: false,
1883                     previous: false,
1884                     scrubber: true,
1885                     play: true,
1886                     pause: true,
1887                     volume: true,
1888                     mute: false,
1889                     backgroundGradient: [0.5,0,0.3]
1890                 };
1892             var rule;
1893             for (var j=0; j < document.styleSheets.length; j++) {
1895                 // To avoid javascript security violation accessing cross domain stylesheets
1896                 var allrules = false;
1897                 try {
1898                     if (typeof (document.styleSheets[j].rules) != 'undefined') {
1899                         allrules = document.styleSheets[j].rules;
1900                     } else if (typeof (document.styleSheets[j].cssRules) != 'undefined') {
1901                         allrules = document.styleSheets[j].cssRules;
1902                     } else {
1903                         // why??
1904                         continue;
1905                     }
1906                 } catch (e) {
1907                     continue;
1908                 }
1910                 // On cross domain style sheets Chrome V8 allows access to rules but returns null
1911                 if (!allrules) {
1912                     continue;
1913                 }
1915                 for(var i=0; i<allrules.length; i++) {
1916                     rule = '';
1917                     if (/^\.mp3flowplayer_.*Color$/.test(allrules[i].selectorText)) {
1918                         if (typeof(allrules[i].cssText) != 'undefined') {
1919                             rule = allrules[i].cssText;
1920                         } else if (typeof(allrules[i].style.cssText) != 'undefined') {
1921                             rule = allrules[i].style.cssText;
1922                         }
1923                         if (rule != '' && /.*color\s*:\s*([^;]+).*/gi.test(rule)) {
1924                             rule = rule.replace(/.*color\s*:\s*([^;]+).*/gi, '$1');
1925                             var colprop = allrules[i].selectorText.replace(/^\.mp3flowplayer_/, '');
1926                             controls[colprop] = rule;
1927                         }
1928                     }
1929                 }
1930                 allrules = false;
1931             }
1933             for(i=0; i<M.util.audio_players.length; i++) {
1934                 var audio = M.util.audio_players[i];
1935                 if (audio.small) {
1936                     controls.controlall = false;
1937                     controls.height = 15;
1938                     controls.time = false;
1939                 } else {
1940                     controls.controlall = true;
1941                     controls.height = 25;
1942                     controls.time = true;
1943                 }
1944                 flowplayer(audio.id, M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.14.swf', {
1945                     plugins: {controls: controls, audio: {url: M.cfg.wwwroot + '/lib/flowplayer/flowplayer.audio-3.2.10.swf'}},
1946                     clip: {url: audio.fileurl, provider: "audio", autoPlay: false}
1947                 });
1948             }
1949         }
1951         if (M.cfg.jsrev == -1) {
1952             var jsurl = M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.11.js';
1953         } else {
1954             var jsurl = M.cfg.wwwroot + '/lib/javascript.php?jsfile=/lib/flowplayer/flowplayer-3.2.11.min.js&rev=' + M.cfg.jsrev;
1955         }
1956         var fileref = document.createElement('script');
1957         fileref.setAttribute('type','text/javascript');
1958         fileref.setAttribute('src', jsurl);
1959         fileref.onload = embed_function;
1960         fileref.onreadystatechange = embed_function;
1961         document.getElementsByTagName('head')[0].appendChild(fileref);
1962     }
1963 };