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