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