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