xref: /dokuwiki/lib/scripts/media.js (revision d0c0a5c427963f7daba8ff28ee1abab3ef8156ba) 
1/**
2 * JavaScript functionality for the media management popup
3 *
4 * @author Andreas Gohr <andi@splitbrain.org>
5 * @author Pierre Spring <pierre.spring@caillou.ch>
6 */
7
8var dw_mediamanager = {
9    keepopen: false,
10    hide: false,
11    popup: false,
12    display: false,
13    ext: false,
14    $popup: null,
15
16    // Image insertion opts
17    align: false,
18    link: false,
19    size: false,
20    forbidden_opts: {},
21
22    // File list options
23    view_opts: {list: false, sort: false},
24
25    layout_width: 0,
26
27    // The minimum height of the full-screen mediamanager in px
28    minHeights: {thumbs: 200, rows: 100},
29
30    init: function () {
31        var $content, $tree;
32        $content = jQuery('#media__content');
33        $tree    = jQuery('#media__tree');
34        if(!$tree.length) return;
35
36        dw_mediamanager.prepare_content($content);
37
38        dw_mediamanager.attachoptions();
39        dw_mediamanager.initpopup();
40
41        // add the action to autofill the "upload as" field
42        $content.delegate('#upload__file', 'change', dw_mediamanager.suggest)
43                // Attach the image selector action to all links
44                .delegate('a.select', 'click', dw_mediamanager.select)
45                // Attach deletion confirmation dialog to the delete buttons
46                .delegate('#media__content a.btn_media_delete', 'click',
47                          dw_mediamanager.confirmattach)
48                .delegate('#mediamanager__done_form', 'submit', dw_mediamanager.list);
49
50        $tree.dw_tree({toggle_selector: 'img',
51                       load_data: function (show_sublist, $clicky) {
52                           // get the enclosed link (is always the first one)
53                           var $link = $clicky.parent().find('div.li a.idx_dir');
54
55                           jQuery.post(
56                               DOKU_BASE + 'lib/exe/ajax.php',
57                               $link[0].search.substr(1) + '&call=medians',
58                               show_sublist,
59                               'html'
60                           );
61                       },
62
63                       toggle_display: function ($clicky, opening) {
64                           $clicky.attr('src',
65                                        DOKU_BASE + 'lib/images/' +
66                                        (opening ? 'minus' : 'plus') + '.gif');
67                       }});
68        $tree.delegate('a', 'click', dw_mediamanager.list);
69
70        // Init view property
71        dw_mediamanager.set_fileview_list();
72
73        dw_mediamanager.init_options();
74
75        dw_mediamanager.image_diff();
76        dw_mediamanager.init_ajax_uploader();
77
78        // changing opened tab in the file list panel
79        jQuery('#mediamanager__page div.filelist').delegate('ul.tabs a', 'click', dw_mediamanager.list)
80            // loading file details
81            .delegate('div.panelContent a', 'click', dw_mediamanager.details)
82            // search form
83            .delegate('#dw__mediasearch', 'submit', dw_mediamanager.list)
84            // "upload as" field autofill
85            .delegate('#upload__file', 'change', dw_mediamanager.suggest)
86            // uploaded images
87            .delegate('.qq-upload-file a', 'click', dw_mediamanager.details);
88
89        // changing opened tab in the file details panel
90        jQuery('#mediamanager__page div.file').delegate('ul.tabs a', 'click', dw_mediamanager.details)
91            // "update new version" button
92            .delegate('#mediamanager__btn_update', 'submit', dw_mediamanager.list)
93            // revisions form
94            .delegate('#page__revisions', 'submit', dw_mediamanager.details)
95            .delegate('#page__revisions a', 'click', dw_mediamanager.details)
96            // meta edit form
97            .delegate('#mediamanager__save_meta', 'submit', dw_mediamanager.details)
98            // delete button
99            .delegate('#mediamanager__btn_delete', 'submit', dw_mediamanager.details)
100            // "restore this version" button
101            .delegate('#mediamanager__btn_restore', 'submit', dw_mediamanager.details)
102            // less/more recent buttons in media revisions form
103            .delegate('.btn_newer, .btn_older', 'submit', dw_mediamanager.details);
104
105        dw_mediamanager.update_resizable();
106        dw_mediamanager.layout_width = jQuery("#mediamanager__page").width();
107        jQuery(window).resize(dw_mediamanager.window_resize);
108    },
109
110    init_options: function () {
111        var $options = jQuery('div.filelist div.panelHeader form.options'),
112            $listType, $sortBy, $both;
113        if ($options.length === 0) {
114            return;
115        }
116
117        $listType = $options.find('li.listType');
118        $sortBy = $options.find('li.sortBy');
119        $both = $listType.add($sortBy);
120
121        // Remove the submit button
122        $options.find('button[type=submit]').parent().hide();
123
124        // Prepare HTML for jQuery UI buttonset
125        $both.find('label').each(function () {
126            var $this = jQuery(this);
127            $this.children('input').appendTo($this.parent());
128        });
129
130        // Init buttonset
131        $both.buttonset();
132
133        // Change handlers
134        $listType.children('input').change(function (event) {
135            dw_mediamanager.set_fileview_list();
136        });
137        $sortBy.children('input').change(function (event) {
138            dw_mediamanager.set_fileview_sort();
139            dw_mediamanager.list.call(jQuery('#dw__mediasearch')[0] || this, event);
140        });
141    },
142
143    /**
144     * build the popup window
145     *
146     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
147     */
148    initpopup: function () {
149        var opts, $insp, $insbtn;
150
151        dw_mediamanager.$popup = jQuery(document.createElement('div'))
152                 .attr('id', 'media__popup_content')
153                 .dialog({autoOpen: false, width: 280, modal: true,
154                          draggable: true, title: LANG.mediatitle,
155                          resizable: false});
156
157        opts = [{id: 'link', label: LANG.mediatarget,
158                 btns: ['lnk', 'direct', 'nolnk', 'displaylnk']},
159                {id: 'align', label: LANG.mediaalign,
160                 btns: ['noalign', 'left', 'center', 'right']},
161                {id: 'size', label: LANG.mediasize,
162                 btns: ['small', 'medium', 'large', 'original']}
163               ];
164
165        jQuery.each(opts, function (_, opt) {
166            var $p, $l;
167            $p = jQuery(document.createElement('p'))
168                 .attr('id', 'media__' + opt.id);
169
170            if (dw_mediamanager.display === "2") {
171                $p.hide();
172            }
173
174            $l = jQuery(document.createElement('label'))
175                 .text(opt.label);
176            $p.append($l);
177
178            jQuery.each(opt.btns, function (i, text) {
179                var $btn, $img;
180                $btn = jQuery(document.createElement('button'))
181                       .addClass('button')
182                       .attr('id', "media__" + opt.id + "btn" + (i + 1))
183                       .attr('title', LANG['media' + text])
184                       .click(bind(dw_mediamanager.setOpt, opt.id));
185
186                $img = jQuery(document.createElement('img'))
187                       .attr('src', DOKU_BASE + 'lib/images/media_' +
188                                    opt.id + '_' + text + '.png');
189
190                $btn.append($img);
191                $p.append($btn);
192            });
193
194            dw_mediamanager.$popup.append($p);
195        });
196
197        // insert button
198        $insp = jQuery(document.createElement('p'));
199        dw_mediamanager.$popup.append($insp);
200
201        $insbtn = jQuery(document.createElement('input'))
202                  .attr('id', 'media__sendbtn')
203                  .attr('type', 'button')
204                  .addClass('button')
205                  .val(LANG.mediainsert);
206        $insp.append($insbtn);
207    },
208
209    /**
210     * Insert the clicked image into the opener's textarea
211     *
212     * @author Andreas Gohr <andi@splitbrain.org>
213     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
214     * @author Pierre Spring <pierre.spring@caillou.ch>
215     */
216    insert: function (id) {
217        var opts, cb, edid, s;
218
219        // set syntax options
220        dw_mediamanager.$popup.dialog('close');
221
222        opts = '';
223
224        if ({img: 1, swf: 1}[dw_mediamanager.ext] === 1) {
225
226            if (dw_mediamanager.link === '4') {
227                    opts = '?linkonly';
228            } else {
229
230                if (dw_mediamanager.link === "3" && dw_mediamanager.ext === 'img') {
231                    opts = '?nolink';
232                } else if (dw_mediamanager.link === "2" && dw_mediamanager.ext === 'img') {
233                    opts = '?direct';
234                }
235
236                s = parseInt(dw_mediamanager.size, 10);
237
238                if (s && s >= 1 && s < 4) {
239                    opts += (opts.length)?'&':'?';
240                    opts += dw_mediamanager.size + '00';
241                    if (dw_mediamanager.ext === 'swf') {
242                        switch (s) {
243                        case 1:
244                            opts += 'x62';
245                            break;
246                        case 2:
247                            opts += 'x123';
248                            break;
249                        case 3:
250                            opts += 'x185';
251                            break;
252                        }
253                    }
254                }
255            }
256        }
257        edid = String.prototype.match.call(document.location, /&edid=([^&]+)/);
258        edid = edid ? edid[1] : 'wiki__text';
259        cb   = String.prototype.match.call(document.location, /&onselect=([^&]+)/);
260        cb   = cb ? cb[1].replace(/[^\w]+/, '') : 'dw_mediamanager_item_select';
261
262        opener[cb](edid, id, opts, dw_mediamanager.align);
263        if(!dw_mediamanager.keepopen) {
264            window.close();
265        }
266        opener.focus();
267        return false;
268    },
269
270
271
272    /**
273     * Prefills the wikiname.
274     *
275     * @author Andreas Gohr <andi@splitbrain.org>
276     */
277    suggest: function(){
278        var $file, $name, text;
279
280        $file = jQuery(this);
281        $name = jQuery('#upload__name');
282
283        if ($name.val() != '') return;
284
285        if(!$file.length || !$name.length) {
286            return;
287        }
288
289        text = $file.val();
290        text = text.substr(text.lastIndexOf('/')+1);
291        text = text.substr(text.lastIndexOf('\\')+1);
292        $name.val(text);
293    },
294
295    /**
296     * list the content of a namespace using AJAX
297     *
298     * @author Andreas Gohr <andi@splitbrain.org>
299     * @author Pierre Spring <pierre.spring@caillou.ch>
300     */
301    list: function (event) {
302        var $link, $content, params;
303
304        if (event) {
305            event.preventDefault();
306        }
307
308        jQuery('div.success, div.info, div.error, div.notify').remove();
309
310        $link = jQuery(this);
311
312        //popup
313        $content = jQuery('#media__content');
314
315        if ($content.length === 0) {
316            //fullscreen media manager
317            $content = jQuery('div.filelist');
318
319            if ($link.hasClass('idx_dir')) {
320                //changing namespace
321                jQuery('div.file').empty();
322                jQuery('div.namespaces .selected').removeClass('selected');
323                $link.addClass('selected');
324            }
325        }
326
327        params = 'call=medialist&';
328
329        if ($link[0].search) {
330            params += $link[0].search.substr(1);
331        } else if ($link.is('form')) {
332            params += dw_mediamanager.form_params($link);
333        } else if ($link.closest('form').length > 0) {
334            params += dw_mediamanager.form_params($link.closest('form'));
335        }
336
337        // fetch the subtree
338        dw_mediamanager.update_content($content, params);
339    },
340
341     /**
342     * Returns form parameters
343     *
344     * @author Kate Arzamastseva <pshns@ukr.net>
345     */
346    form_params: function ($form) {
347        if (!$form.length) return;
348        var action = '';
349        var i = $form[0].action.indexOf('?');
350        if (i >= 0) action = $form[0].action.substr(i+1);
351        return action+'&'+$form.serialize();
352    },
353
354    set_fileview_list: function (new_type) {
355        dw_mediamanager.set_fileview_opt(['list', 'listType', function (new_type) {
356            jQuery('div.filelist div.panelContent ul')
357               .toggleClass('rows', new_type === 'rows')
358               .toggleClass('thumbs', new_type === 'thumbs');
359        }], new_type);
360
361        // FIXME: Move to onchange handler (opt[2])?
362        dw_mediamanager.resize();
363    },
364
365    set_fileview_sort: function (new_sort) {
366        dw_mediamanager.set_fileview_opt(['sort', 'sortBy', function (new_sort) {
367            // FIXME
368        }], new_sort);
369    },
370
371    set_fileview_opt: function (opt, new_val) {
372        if (typeof new_val === 'undefined') {
373            new_val = jQuery('form.options li.' + opt[1] + ' input')
374                        .filter(':checked').val();
375            // if new_val is still undefined (because form.options is not in active tab), set to most spacious option
376            if (typeof new_val === 'undefined') {
377                new_val = 'thumbs';
378            }
379        }
380
381        if (new_val !== dw_mediamanager.view_opts[opt[0]]) {
382            opt[2](new_val);
383
384            DokuCookie.setValue(opt[0], new_val);
385
386            dw_mediamanager.view_opts[opt[0]] = new_val;
387        }
388    },
389
390     /**
391     * Lists the content of the right column (image details) using AJAX
392     *
393     * @author Kate Arzamastseva <pshns@ukr.net>
394     */
395    details: function (event) {
396        var $link, $content, params, update_list;
397        $link = jQuery(this);
398        event.preventDefault();
399
400        jQuery('div.success, div.info, div.error, div.notify').remove();
401
402        if ($link[0].id == 'mediamanager__btn_delete' && !confirm(LANG.del_confirm)) {
403            return false;
404        }
405        if ($link[0].id == 'mediamanager__btn_restore' && !confirm(LANG.restore_confirm)) {
406            return false;
407        }
408
409        $content = jQuery('div.file');
410        params = 'call=mediadetails&';
411
412        if ($link[0].search) {
413            params += $link[0].search.substr(1);
414        } else if ($link.is('form')) {
415            params += dw_mediamanager.form_params($link);
416        } else if ($link.closest('form').length > 0) {
417            params += dw_mediamanager.form_params($link.closest('form'));
418        }
419
420        update_list = ($link[0].id == 'mediamanager__btn_delete' ||
421                       $link[0].id == 'mediamanager__btn_restore');
422
423        dw_mediamanager.update_content($content, params, update_list);
424    },
425
426    update_content: function ($content, params, update_list) {
427        var $container;
428
429        jQuery.post(
430            DOKU_BASE + 'lib/exe/ajax.php',
431            params,
432            function (data) {
433                dw_mediamanager.$resizables().resizable('destroy');
434
435                if (update_list) {
436                    dw_mediamanager.list.call(jQuery('#mediamanager__page form.options button[type="submit"]')[0]);
437                }
438
439                $content.html(data);
440
441                dw_mediamanager.prepare_content($content);
442                dw_mediamanager.updatehide();
443
444                dw_mediamanager.update_resizable();
445                dw_behaviour.revisionBoxHandler();
446
447                // Make sure that the list view style stays the same
448                dw_mediamanager.set_fileview_list(dw_mediamanager.view_opts.list);
449
450                dw_mediamanager.image_diff();
451                dw_mediamanager.init_ajax_uploader();
452                dw_mediamanager.init_options();
453
454            },
455            'html'
456        );
457        $container = $content.find('div.panelContent');
458        if ($container.length === 0) {
459            $container = $content;
460        }
461        $container.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
462    },
463
464    window_resize: function () {
465        dw_mediamanager.resize();
466
467        dw_mediamanager.opacity_slider();
468        dw_mediamanager.portions_slider();
469    },
470
471    $resizables: function () {
472        return jQuery('#mediamanager__page').find('div.namespaces, div.filelist');
473    },
474
475    /**
476     * Updates mediamanager layout
477     *
478     * @author Kate Arzamastseva <pshns@ukr.net>
479     */
480    update_resizable: function () {
481        $resizables = dw_mediamanager.$resizables();
482
483        $resizables.resizable({
484            handles: 'e',
485            resize: function(event, ui){
486                var widthFull = jQuery('#mediamanager__page').width();
487                var widthResizables = 0;
488                $resizables.each(function() {
489                    widthResizables += jQuery(this).width();
490                });
491                var $filePanel = jQuery('#mediamanager__page div.panel.file');
492
493                // set max width of resizable column
494                var widthOtherResizable = widthResizables - jQuery(this).width();
495                var minWidthNonResizable = parseFloat($filePanel.css("min-width"));
496                var maxWidth = widthFull - (widthOtherResizable + minWidthNonResizable) - 1;
497                $resizables.resizable( "option", "maxWidth", maxWidth );
498
499                // width of file panel in % = 100% - width of resizables in %
500                // this calculates with 99.9 and not 100 to overcome rounding errors
501                var relWidthNonResizable = 99.9 - (100 * widthResizables / widthFull);
502                // set width of file panel
503                $filePanel.width(relWidthNonResizable+'%');
504
505                // FIXME: please fix without browser sniffing
506                if (!jQuery.browser.webkit) {
507                    $resizables.each(function() {
508                        w = jQuery(this).width();
509                        w = (99.99 * w / widthFull);
510                        w += "%";
511                        jQuery(this).width(w);
512                    });
513                }
514
515                dw_mediamanager.resize();
516
517                dw_mediamanager.opacity_slider();
518                dw_mediamanager.portions_slider();
519            }
520        });
521
522        dw_mediamanager.resize();
523    },
524
525    resize: function () {
526        var $contents = jQuery('#mediamanager__page div.panelContent'),
527            height = jQuery(window).height() - jQuery(document.body).height() +
528                      Math.max.apply(null, jQuery.map($contents, function (v) {
529            return jQuery(v).height();
530        }));
531
532        // If the screen is too small, don’t try to resize
533        if (height < dw_mediamanager.minHeights[dw_mediamanager.view_opts.list]) {
534            $contents.add(dw_mediamanager.$resizables()).height('auto');
535        } else {
536            $contents.height(height);
537            dw_mediamanager.$resizables().each(function () {
538                var $this = jQuery(this);
539                $this.height(height + $this.find('div.panelContent').offset().top -
540                             $this.offset().top);
541            });
542        }
543    },
544
545     /**
546     * Prints 'select' for image difference representation type
547     *
548     * @author Kate Arzamastseva <pshns@ukr.net>
549     */
550    image_diff: function () {
551        if (jQuery('#mediamanager__difftype').length) return;
552
553        $form = jQuery('#mediamanager__form_diffview');
554        if (!$form.length) return;
555
556        $label = jQuery(document.createElement('label'));
557        $label.append('<span>'+LANG.media_diff+'</span> ');
558        $select = jQuery(document.createElement('select'))
559         .attr('id', 'mediamanager__difftype')
560         .attr('name', 'difftype')
561         .change(dw_mediamanager.change_diff_type);
562        $select.append(new Option(LANG.media_diff_both, "both"));
563        $select.append(new Option(LANG.media_diff_opacity, "opacity"));
564        $select.append(new Option(LANG.media_diff_portions, "portions"));
565        $label.append($select);
566        $form.append($label);
567
568        // for IE
569        var select = document.getElementById('mediamanager__difftype');
570        select.options[0].text = LANG.media_diff_both;
571        select.options[1].text = LANG.media_diff_opacity;
572        select.options[2].text = LANG.media_diff_portions;
573    },
574
575    /**
576     * Handles selection of image difference representation type
577     *
578     * @author Kate Arzamastseva <pshns@ukr.net>
579     */
580    change_diff_type: function () {
581        $select = jQuery('#mediamanager__difftype');
582        $content = jQuery('#mediamanager__diff');
583
584        params = dw_mediamanager.form_params($select.closest('form'))+'&call=mediadiff';
585        jQuery.post(
586            DOKU_BASE + 'lib/exe/ajax.php',
587            params,
588            function (data) {
589                $content.html(data);
590                dw_mediamanager.portions_slider();
591                dw_mediamanager.opacity_slider();
592            },
593            'html'
594        );
595    },
596
597    /**
598     * Sets options for opacity diff slider
599     *
600     * @author Kate Arzamastseva <pshns@ukr.net>
601     */
602    opacity_slider: function () {
603        var $slider = jQuery( "#mediamanager__diff div.slider" );
604        if (!$slider.length) return;
605
606        var $image = jQuery('#mediamanager__diff div.imageDiff.opacity div.image1 img');
607        if (!$image.length) return;
608        $slider.width($image.width()-20);
609
610        $slider.slider();
611        $slider.slider("option", "min", 0);
612        $slider.slider("option", "max", 0.999);
613        $slider.slider("option", "step", 0.001);
614        $slider.slider("option", "value", 0.5);
615        $slider.bind("slide", function(event, ui) {
616            jQuery('#mediamanager__diff div.imageDiff.opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
617        });
618    },
619
620     /**
621     * Sets options for red line diff slider
622     *
623     * @author Kate Arzamastseva <pshns@ukr.net>
624     */
625    portions_slider: function () {
626        var $image1 = jQuery('#mediamanager__diff div.imageDiff.portions div.image1 img');
627        var $image2 = jQuery('#mediamanager__diff div.imageDiff.portions div.image2 img');
628        if (!$image1.length || !$image2.length) return;
629
630        var $div = jQuery("#mediamanager__diff");
631        if (!$div.length) return;
632
633        $div.width('100%');
634        $image2.parent().width('97%');
635        $image1.width('100%');
636        $image2.width('100%');
637
638        if ($image1.width() < $div.width()) {
639            $div.width($image1.width());
640        }
641
642        $image2.parent().width('50%');
643        $image2.width($image1.width());
644        $image1.width($image1.width());
645
646        var $slider = jQuery("#mediamanager__diff div.slider");
647        if (!$slider.length) return;
648        $slider.width($image1.width()-20);
649
650        $slider.slider();
651        $slider.slider("option", "min", 0);
652        $slider.slider("option", "max", 97);
653        $slider.slider("option", "step", 1);
654        $slider.slider("option", "value", 50);
655        $slider.bind("slide", function(event, ui) {
656            jQuery('#mediamanager__diff div.imageDiff.portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
657        });
658    },
659
660    /**
661     * Parse a URI query string to an associative array
662     *
663     * @author Kate Arzamastseva <pshns@ukr.net>
664     */
665    params_toarray: function (str) {
666        var vars = [], hash;
667        var hashes = str.split('&');
668        for(var i = 0; i < hashes.length; i++) {
669            hash = hashes[i].split('=');
670            vars[decodeURIComponent(hash[0])] = decodeURIComponent(hash[1]);
671        }
672        return vars;
673    },
674
675    init_ajax_uploader: function () {
676        if (!jQuery('#mediamanager__uploader').length) return;
677        if (jQuery('.qq-upload-list').length) return;
678
679        var params = dw_mediamanager.form_params(jQuery('#dw__upload'))+'&call=mediaupload';
680        params = dw_mediamanager.params_toarray(params);
681
682        var uploader = new qq.FileUploaderExtended({
683            element: document.getElementById('mediamanager__uploader'),
684            action: DOKU_BASE + 'lib/exe/ajax.php',
685            params: params
686        });
687    },
688
689    prepare_content: function ($content) {
690        // hide syntax example
691        $content.find('div.example:visible').hide();
692    },
693
694    /**
695     * shows the popup for a image link
696     */
697    select: function(event){
698        var $link, id, dot, ext;
699
700        event.preventDefault();
701
702        $link = jQuery(this);
703        id = $link.attr('id').substr(2);
704
705        if(!opener){
706            // if we don't run in popup display example
707            // the id's are a bit wierd and jQuery('#ex_wiki_dokuwiki-128.png')
708            // will not be found by Sizzle (the CSS Selector Engine
709            // used by jQuery), hence the document.getElementById() call
710            jQuery(document.getElementById('ex_'+id.replace(/:/g,'_').replace(/^_/,''))).dw_toggle();
711            return;
712        }
713
714        dw_mediamanager.ext = false;
715        dot = id.lastIndexOf(".");
716
717        if (-1 === dot) {
718            dw_mediamanager.insert(id);
719            return;
720        }
721
722        ext = id.substr(dot);
723
724        if ({'.jpg':1, '.jpeg':1, '.png':1, '.gif':1, '.swf':1}[ext] !== 1) {
725            dw_mediamanager.insert(id);
726            return;
727        }
728
729        // remove old callback from the insert button and set the new one.
730        jQuery('#media__sendbtn').unbind().click(bind(dw_mediamanager.insert, id));
731
732        dw_mediamanager.unforbid('ext');
733        if (ext === '.swf') {
734            dw_mediamanager.ext = 'swf';
735            dw_mediamanager.forbid('ext', {link: ['1', '2'],
736                                           size: ['4']});
737        } else {
738            dw_mediamanager.ext = 'img';
739        }
740
741        // Set to defaults
742        dw_mediamanager.setOpt('link');
743        dw_mediamanager.setOpt('align');
744        dw_mediamanager.setOpt('size');
745
746        // toggle buttons for detail and linked image, original size
747        jQuery('#media__linkbtn1, #media__linkbtn2, #media__sizebtn4')
748            .toggle(dw_mediamanager.ext === 'img');
749
750        dw_mediamanager.$popup.dialog('open');
751
752        jQuery('#media__sendbtn').focus();
753    },
754
755    /**
756     * Deletion confirmation dialog to the delete buttons.
757     *
758     * @author Michael Klier <chi@chimeric.de>
759     * @author Pierre Spring <pierre.spring@caillou.ch>
760     */
761    confirmattach: function(e){
762        if(!confirm(LANG.del_confirm + "\n" + jQuery(this).attr('title'))) {
763            e.preventDefault();
764        }
765    },
766
767    /**
768     * Creates checkboxes for additional options
769     *
770     * @author Andreas Gohr <andi@splitbrain.org>
771     * @author Pierre Spring <pierre.spring@caillou.ch>
772     */
773    attachoptions: function(){
774        var $obj, opts;
775
776        $obj = jQuery('#media__opts');
777        if($obj.length === 0) {
778            return;
779        }
780
781        opts = [];
782        // keep open
783        if(opener){
784            opts.push(['keepopen', 'keepopen']);
785        }
786        opts.push(['hide', 'hidedetails']);
787
788        jQuery.each(opts,
789                    function(_, opt) {
790                        var $box, $lbl;
791                        $box = jQuery(document.createElement('input'))
792                                 .attr('type', 'checkbox')
793                                 .attr('id', 'media__' + opt[0])
794                                 .click(bind(dw_mediamanager.toggleOption,
795                                             opt[0]));
796
797                        if(DokuCookie.getValue(opt[0])){
798                            $box.prop('checked', true);
799                            dw_mediamanager[opt[0]] = true;
800                        }
801
802                        $lbl = jQuery(document.createElement('label'))
803                                 .attr('for', 'media__' + opt[0])
804                                 .text(LANG[opt[1]]);
805
806                        $obj.append($box, $lbl, document.createElement('br'));
807                    });
808
809        dw_mediamanager.updatehide();
810    },
811
812    /**
813     * Generalized toggler
814     *
815     * @author Pierre Spring <pierre.spring@caillou.ch>
816     */
817    toggleOption: function (variable) {
818        if (jQuery(this).prop('checked')) {
819            DokuCookie.setValue(variable, 1);
820            dw_mediamanager[variable] = true;
821        } else {
822            DokuCookie.setValue(variable, '');
823            dw_mediamanager[variable] = false;
824        }
825        if (variable === 'hide') {
826            dw_mediamanager.updatehide();
827        }
828    },
829
830    /**
831     * Sets the visibility of the image details accordingly to the
832     * chosen hide state
833     *
834     * @author Andreas Gohr <andi@splitbrain.org>
835     */
836    updatehide: function(){
837        jQuery('#media__content div.detail').dw_toggle(!dw_mediamanager.hide);
838    },
839
840    /**
841     * set media insertion option
842     *
843     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
844     */
845    setOpt: function(opt, e){
846        var val, i;
847        if (typeof e !== 'undefined') {
848            val = this.id.substring(this.id.length - 1);
849        } else {
850            val = dw_mediamanager.getOpt(opt);
851        }
852
853        if (val === false) {
854            DokuCookie.setValue(opt,'');
855            dw_mediamanager[opt] = false;
856            return;
857        }
858
859        if (opt === 'link') {
860            if (val !== '4' && dw_mediamanager.link === '4') {
861                dw_mediamanager.unforbid('linkonly');
862                dw_mediamanager.setOpt('align');
863                dw_mediamanager.setOpt('size');
864            } else if (val === '4') {
865                dw_mediamanager.forbid('linkonly', {align: false, size: false});
866            }
867
868            jQuery("#media__size, #media__align").dw_toggle(val !== '4');
869        }
870
871        DokuCookie.setValue(opt, val);
872        dw_mediamanager[opt] = val;
873
874        for (i = 1; i <= 4; i++) {
875            jQuery("#media__" + opt + "btn" + i).removeClass('selected');
876        }
877        jQuery('#media__' + opt + 'btn' + val).addClass('selected');
878    },
879
880    unforbid: function (group) {
881        delete dw_mediamanager.forbidden_opts[group];
882    },
883
884    forbid: function (group, forbids) {
885        dw_mediamanager.forbidden_opts[group] = forbids;
886    },
887
888    allowedOpt: function (opt, val) {
889        var ret = true;
890        jQuery.each(dw_mediamanager.forbidden_opts,
891                    function (_, forbids) {
892                        ret = forbids[opt] !== false &&
893                              jQuery.inArray(val, forbids[opt]) === -1;
894                        return ret;
895                    });
896        return ret;
897    },
898
899    getOpt: function (opt) {
900        var allowed = bind(dw_mediamanager.allowedOpt, opt);
901
902        // Current value
903        if (dw_mediamanager[opt] !== false && allowed(dw_mediamanager[opt])) {
904            return dw_mediamanager[opt];
905        }
906
907        // From cookie
908        if (DokuCookie.getValue(opt) && allowed(DokuCookie.getValue(opt))) {
909            return DokuCookie.getValue(opt);
910        }
911
912        // size default
913        if (opt === 'size' && allowed('2')) {
914            return '2';
915        }
916
917        // Whatever is allowed, and be it false
918        return jQuery.grep(['1', '2', '3', '4'], allowed)[0] || false;
919    }
920};
921
922/**
923 * Default implementation for the media manager's select action
924 *
925 * Can be overriden with the onselect URL parameter. Is called on the opener context
926 *
927 * @param {string} edid
928 * @param {string} mediaid
929 * @param {string} opts
930 * @param {string} align [none, left, center, right]
931 */
932function dw_mediamanager_item_select(edid, mediaid, opts, align) {
933    var alignleft = '';
934    var alignright = '';
935    if (align !== '1') {
936        alignleft = align === '2' ? '' : ' ';
937        alignright = align === '4' ? '' : ' ';
938    }
939
940    insertTags(edid, '{{' + alignleft + mediaid + opts + alignright + '|', '}}', '');
941}
942
943jQuery(dw_mediamanager.init);
944