xref: /dokuwiki/lib/scripts/media.js (revision b080c3ddd9671fcd5a67865fe970ae0f8b5bdeed)
1/**
2 * JavaScript functionalitiy for the media management popup
3 *
4 * @author Andreas Gohr <andi@splitbrain.org>
5 */
6var media_manager = {
7    keepopen: false,
8    hide: false,
9    align: false,
10    popup: false,
11    id: false,
12    display: false,
13    link: false,
14    size: false,
15    ext: false,
16
17    /**
18     * Attach event handlers to all "folders" below the given element
19     *
20     * @author Andreas Gohr <andi@splitbrain.org>
21     */
22    treeattach: function(obj){
23        if(!obj) return;
24
25        var items = obj.getElementsByTagName('li');
26        for(var i=0; i<items.length; i++){
27            var elem = items[i];
28
29            // attach action to make the +/- clickable
30            var clicky = elem.getElementsByTagName('img')[0];
31            clicky.style.cursor = 'pointer';
32            addEvent(clicky,'click',function(event){ return media_manager.toggle(event,this); });
33
34            // attach action load folder list via AJAX
35            var link = elem.getElementsByTagName('a')[0];
36            link.style.cursor = 'pointer';
37            addEvent(link,'click',function(event){ return media_manager.list(event,this); });
38        }
39    },
40
41    /**
42     * Attach the image selector action to all links below the given element
43     * also add the action to autofill the "upload as" field
44     *
45     * @author Andreas Gohr <andi@splitbrain.org>
46     */
47    selectorattach: function(obj){
48        if(!obj) return;
49
50        var items = getElementsByClass('select',obj,'a');
51        for(var i=0; i<items.length; i++){
52            var elem = items[i];
53            elem.style.cursor = 'pointer';
54            addEvent(elem,'click',function(event){ return media_manager.select(event,this); });
55        }
56
57        // hide syntax example
58        items = getElementsByClass('example',obj,'div');
59        for(var i=0; i<items.length; i++){
60            elem = items[i];
61            elem.style.display = 'none';
62        }
63
64        var file = $('upload__file');
65        if(!file) return;
66        addEvent(file,'change',media_manager.suggest);
67    },
68
69    /**
70     * Attach deletion confirmation dialog to the delete buttons.
71     *
72     * Michael Klier <chi@chimeric.de>
73     */
74    confirmattach: function(obj){
75        if(!obj) return;
76
77        items = getElementsByClass('btn_media_delete',obj,'a');
78        for(var i=0; i<items.length; i++){
79            var elem = items[i];
80            addEvent(elem,'click',function(e){
81                if(e.target.tagName == 'IMG'){
82                    var name = e.target.parentNode.title;
83                }else{
84                    var name = e.target.title;
85                }
86                if(!confirm(LANG['del_confirm'] + "\n" + name)) {
87                    e.preventDefault();
88                    return false;
89                } else {
90                    return true;
91                }
92            });
93        }
94    },
95
96    /**
97     * Creates checkboxes for additional options
98     *
99     * @author Andreas Gohr <andi@splitbrain.org>
100     */
101    attachoptions: function(obj){
102        if(!obj) return;
103
104        // keep open
105        if(opener){
106            var kobox  = document.createElement('input');
107            kobox.type = 'checkbox';
108            kobox.id   = 'media__keepopen';
109            if(DokuCookie.getValue('keepopen')){
110                kobox.checked  = true;
111                kobox.defaultChecked = true; //IE wants this
112                media_manager.keepopen = true;
113            }
114            addEvent(kobox,'click',function(event){ return media_manager.togglekeepopen(event,this); });
115
116            var kolbl  = document.createElement('label');
117            kolbl.htmlFor   = 'media__keepopen';
118            kolbl.innerHTML = LANG['keepopen'];
119
120            var kobr = document.createElement('br');
121
122            obj.appendChild(kobox);
123            obj.appendChild(kolbl);
124            obj.appendChild(kobr);
125        }
126
127        // hide details
128        var hdbox  = document.createElement('input');
129        hdbox.type = 'checkbox';
130        hdbox.id   = 'media__hide';
131        if(DokuCookie.getValue('hide')){
132            hdbox.checked = true;
133            hdbox.defaultChecked = true; //IE wants this
134            media_manager.hide    = true;
135        }
136        addEvent(hdbox,'click',function(event){ return media_manager.togglehide(event,this); });
137
138        var hdlbl  = document.createElement('label');
139        hdlbl.htmlFor   = 'media__hide';
140        hdlbl.innerHTML = LANG['hidedetails'];
141
142        var hdbr = document.createElement('br');
143
144        obj.appendChild(hdbox);
145        obj.appendChild(hdlbl);
146        obj.appendChild(hdbr);
147        media_manager.updatehide();
148    },
149
150    /**
151     * Toggles the keep open state
152     *
153     * @author Andreas Gohr <andi@splitbrain.org>
154     */
155    togglekeepopen: function(event,cb){
156        if(cb.checked){
157            DokuCookie.setValue('keepopen',1);
158            media_manager.keepopen = true;
159        }else{
160            DokuCookie.setValue('keepopen','');
161            media_manager.keepopen = false;
162        }
163    },
164
165    /**
166     * Toggles the hide details state
167     *
168     * @author Andreas Gohr <andi@splitbrain.org>
169     */
170    togglehide: function(event,cb){
171        if(cb.checked){
172            DokuCookie.setValue('hide',1);
173            media_manager.hide = true;
174        }else{
175            DokuCookie.setValue('hide','');
176            media_manager.hide = false;
177        }
178        media_manager.updatehide();
179    },
180
181    /**
182     * Sets the visibility of the image details accordingly to the
183     * chosen hide state
184     *
185     * @author Andreas Gohr <andi@splitbrain.org>
186     */
187    updatehide: function(){
188        var obj = $('media__content');
189        if(!obj) return;
190        var details = getElementsByClass('detail',obj,'div');
191        for(var i=0; i<details.length; i++){
192            if(media_manager.hide){
193                details[i].style.display = 'none';
194            }else{
195                details[i].style.display = '';
196            }
197        }
198    },
199
200    /**
201     * shows the popup for a image link
202     */
203    select: function(event,link){
204        var id = link.name.substr(2);
205
206        media_manager.id = id;
207        if(!opener){
208            // if we don't run in popup display example
209            var ex = $('ex_'+id.replace(/:/g,'_'));
210            if(ex.style.display == ''){
211                ex.style.display = 'none';
212            } else {
213                ex.style.display = '';
214            }
215            return false;
216        }
217
218        media_manager.ext = false;
219        var dot = id.lastIndexOf(".");
220        if (dot != -1) {
221            var ext = id.substr(dot,id.length);
222
223            if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') {
224                media_manager.insert(null);
225                return false;
226            }
227        } else {
228            media_manager.insert(null);
229            return false;
230        }
231
232        media_manager.popup.style.display = 'inline';
233        media_manager.popup.style.left = event.pageX + 'px';
234        media_manager.popup.style.top = event.pageY + 'px';
235
236        // set all buttons to outset
237        media_manager.outSet('media__linkbtn1');
238        media_manager.outSet('media__linkbtn2');
239        media_manager.outSet('media__linkbtn3');
240        media_manager.outSet('media__linkbtn4');
241
242        media_manager.outSet('media__alignbtn0');
243        media_manager.outSet('media__alignbtn1');
244        media_manager.outSet('media__alignbtn2');
245        media_manager.outSet('media__alignbtn3');
246
247        media_manager.outSet('media__sizebtn1');
248        media_manager.outSet('media__sizebtn2');
249        media_manager.outSet('media__sizebtn3');
250        media_manager.outSet('media__sizebtn4');
251
252
253        if (ext == '.swf') {
254            media_manager.ext = 'swf';
255
256            // disable display buttons for detail and linked image
257            $('media__linkbtn1').style.display = 'none';
258            $('media__linkbtn2').style.display = 'none';
259
260            // set the link button to default
261            if (media_manager.link != false) {
262                if ( media_manager.link == '2' || media_manager.link == '1')  {
263                    media_manager.inSet('media__linkbtn3');
264                    media_manager.link = '3';
265                    DokuCookie.setValue('link','3');
266                } else {
267                    media_manager.inSet('media__linkbtn'+media_manager.link);
268                }
269            } else if (DokuCookie.getValue('link')) {
270                if ( DokuCookie.getValue('link') == '2' ||  DokuCookie.getValue('link') == '1')  {
271                    // this options are not availible
272                    media_manager.inSet('media__linkbtn3');
273                    media_manager.link = '3';
274                    DokuCookie.setValue('link','3');
275                } else {
276                    media_manager.inSet('media__linkbtn'+DokuCookie.getValue('link'));
277                    media_manager.link = DokuCookie.getValue('link');
278                }
279            } else {
280                // default case
281                media_manager.link = '3';
282                media_manager.inSet('media__linkbtn3');
283                DokuCookie.setValue('link','3');
284            }
285
286            // disable button for original size
287            $('media__sizebtn4').style.display = 'none';
288
289        } else {
290            media_manager.ext = 'img';
291
292            // ensure that the display buttons are there
293            $('media__linkbtn1').style.display = 'inline';
294            $('media__linkbtn2').style.display = 'inline';
295            $('media__sizebtn4').style.display = 'inline';
296
297            // set the link button to default
298            if (DokuCookie.getValue('link')) {
299                media_manager.link = DokuCookie.getValue('link');
300            }
301            if (media_manager.link == false) {
302                // default case
303                media_manager.link = '1';
304                DokuCookie.setValue('link','1');
305            }
306            media_manager.inSet('media__linkbtn'+media_manager.link);
307        }
308
309        if (media_manager.link == '4') {
310            media_manager.align = false;
311            media_manager.size = false;
312            $('media__align').style.display = 'none';
313            $('media__size').style.display = 'none';
314        } else {
315            $('media__align').style.display = 'block';
316            $('media__size').style.display = 'block';
317
318            // set the align button to default
319            if (media_manager.align != false) {
320                media_manager.inSet('media__alignbtn'+media_manager.align);
321            } else if (DokuCookie.getValue('align')) {
322                media_manager.inSet('media__alignbtn'+DokuCookie.getValue('align'));
323                media_manager.align = DokuCookie.getValue('align');
324            } else {
325                // default case
326                media_manager.align = '0';
327                media_manager.inSet('media__alignbtn0');
328                DokuCookie.setValue('align','0');
329            }
330
331            // set the size button to default
332            if (DokuCookie.getValue('size')) {
333                media_manager.size = DokuCookie.getValue('size');
334            }
335            if (media_manager.size == false || (media_manager.size === '4' && ext === '.swf')) {
336                // default case
337                media_manager.size = '2';
338                DokuCookie.setValue('size','2');
339            }
340            media_manager.inSet('media__sizebtn'+media_manager.size);
341
342            $('media__sendbtn').focus();
343        }
344
345       return false;
346    },
347
348    /**
349     * build the popup window
350     *
351     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
352     */
353    initpopup: function() {
354
355        media_manager.popup = document.createElement('div');
356        media_manager.popup.setAttribute('id','media__popup');
357
358        var root = document.getElementById('media__manager');
359        if (root == null) return;
360        root.appendChild(media_manager.popup);
361
362        var headline    = document.createElement('h1');
363        headline.innerHTML = LANG.mediatitle;
364        var headlineimg = document.createElement('img');
365        headlineimg.src = DOKU_BASE + 'lib/images/close.png';
366        headlineimg.id  = 'media__closeimg';
367        addEvent(headlineimg,'click',function(event){ return media_manager.closePopup(event,this); });
368        headline.insertBefore(headlineimg, headline.firstChild);
369        media_manager.popup.appendChild(headline);
370        drag.attach(media_manager.popup,headline);
371
372        // link
373
374        var linkp = document.createElement('p');
375
376        linkp.id = "media__linkstyle";
377        if (media_manager.display == "2") {
378            linkp.style.display = "none";
379        }
380
381        var linkl = document.createElement('label');
382        linkl.innerHTML = LANG.mediatarget;
383        linkp.appendChild(linkl);
384
385        var linkbtns = ['lnk', 'direct', 'nolnk', 'displaylnk'];
386        for (var i = 0 ; i < linkbtns.length ; ++i) {
387            var linkbtn = document.createElement('button');
388            linkbtn.className = 'button';
389            linkbtn.value = i + 1;
390            linkbtn.id    = "media__linkbtn" + (i + 1);
391            linkbtn.title = LANG['media' + linkbtns[i]];
392            linkbtn.style.borderStyle = 'outset';
393            addEvent(linkbtn,'click',function(event){ return media_manager.setlink(event,this); });
394
395            var linkimg = document.createElement('img');
396            linkimg.src = DOKU_BASE + 'lib/images/media_link_' + linkbtns[i] + '.png';
397
398            linkbtn.appendChild(linkimg);
399            linkp.appendChild(linkbtn);
400        }
401
402        media_manager.popup.appendChild(linkp);
403
404        // align
405
406        var alignp    = document.createElement('p');
407        var alignl    = document.createElement('label');
408
409        alignp.appendChild(alignl);
410        alignp.id = 'media__align';
411        if (media_manager.display == "2") {
412            alignp.style.display = "none";
413        }
414        alignl.innerHTML = LANG['mediaalign'];
415
416        var alignbtns = ['noalign', 'left', 'center', 'right'];
417        for (var n = 0 ; n < alignbtns.length ; ++n) {
418            var alignbtn = document.createElement('button');
419            var alignimg = document.createElement('img');
420            alignimg.src = DOKU_BASE + 'lib/images/media_align_' + alignbtns[n] + '.png';
421
422            alignbtn.id    = "media__alignbtn" + n;
423            alignbtn.value = n;
424            alignbtn.title = LANG['media' + alignbtns[n]];
425            alignbtn.className = 'button';
426            alignbtn.appendChild(alignimg);
427            alignbtn.style.borderStyle = 'outset';
428            addEvent(alignbtn,'click',function(event){ return media_manager.setalign(event,this); });
429
430            alignp.appendChild(alignbtn);
431        }
432
433        media_manager.popup.appendChild(alignp);
434
435        // size
436
437        var sizep    = document.createElement('p');
438        var sizel    = document.createElement('label');
439
440        sizep.id = 'media__size';
441        if (media_manager.display == "2") {
442            sizep.style.display = "none";
443        }
444        sizep.appendChild(sizel);
445        sizel.innerHTML = LANG['mediasize'];
446
447        var sizebtns = ['small', 'medium', 'large', 'original'];
448        for (var size = 0 ; size < sizebtns.length ; ++size) {
449            var sizebtn = document.createElement('button');
450            var sizeimg = document.createElement('img');
451
452            sizep.appendChild(sizebtn);
453            sizeimg.src = DOKU_BASE + 'lib/images/media_size_' + sizebtns[size] + '.png';
454
455            sizebtn.className = 'button';
456            sizebtn.appendChild(sizeimg);
457            sizebtn.value = size + 1;
458            sizebtn.id    = 'media__sizebtn' + (size + 1);
459            sizebtn.title = LANG['media' + sizebtns[size]];
460            sizebtn.style.borderStyle = 'outset';
461            addEvent(sizebtn,'click',function(event){ return media_manager.setsize(event,this); });
462        }
463
464        media_manager.popup.appendChild(sizep);
465
466        // send and close button
467
468        var btnp = document.createElement('p');
469        media_manager.popup.appendChild(btnp);
470        btnp.setAttribute('class','btnlbl');
471
472        var cls = document.createElement('input');
473        cls.type  = 'button';
474        cls.setAttribute('class','button');
475        cls.value = LANG['mediaclose'];
476        btnp.appendChild(cls);
477        addEvent(cls,'click',function(event){ return media_manager.closePopup(event,this); });
478
479        var btn  = document.createElement('input');
480        btn.type = 'button';
481        btn.id   = 'media__sendbtn';
482        btn.setAttribute('class','button');
483        btn.value = LANG['mediainsert'];
484        btnp.appendChild(btn);
485        addEvent(btn,'click',function(event){ return media_manager.insert(event); });
486    },
487
488    /**
489     * Insert the clicked image into the opener's textarea
490     *
491     * @author Andreas Gohr <andi@splitbrain.org>
492     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
493     */
494    insert: function(event){
495        var id = media_manager.id;
496        // set syntax options
497        $('media__popup').style.display = 'none';
498
499        var opts       = '';
500        var optsstart  = '';
501        var alignleft  = '';
502        var alignright = '';
503
504        if (media_manager.ext == 'img' || media_manager.ext == 'swf') {
505
506            if (media_manager.link == '4') {
507                    opts = '?linkonly';
508            } else {
509
510                if (media_manager.link == "3" && media_manager.ext == 'img') {
511                    opts = '?nolink';
512                    optsstart = true;
513                } else if (media_manager.link == "2" && media_manager.ext == 'img') {
514                    opts = '?direct';
515                    optsstart = true;
516                }
517
518                var s = parseInt(media_manager.size);
519
520                if (s && s >= 1) {
521                    opts += (optsstart)?'&':'?';
522                    if (s=="1") {
523                        opts += '100';
524                        if (media_manager.ext == 'swf') {
525                            opts += 'x62';
526                        }
527                    } else if (s=="2") {
528                        opts += '200';
529                        if (media_manager.ext == 'swf') {
530                            opts += 'x123';
531                        }
532                    } else if (s=="3"){
533                        opts += '300';
534                        if (media_manager.ext == 'swf') {
535                            opts += 'x185';
536                        }
537                    }
538                }
539                if (media_manager.align == '1') {
540                    alignleft = '';
541                    alignright = ' ';
542                }
543                if (media_manager.align == '2') {
544                    alignleft = ' ';
545                    alignright = ' ';
546                }
547                if (media_manager.align == '3') {
548                    alignleft = ' ';
549                    alignright = '';
550                }
551            }
552        }
553        opener.insertTags('wiki__text','{{'+alignleft+id+opts+alignright+'|','}}','');
554
555        if(!media_manager.keepopen) window.close();
556        opener.focus();
557        return false;
558    },
559
560    /**
561     * list the content of a namespace using AJAX
562     *
563     * @author Andreas Gohr <andi@splitbrain.org>
564     */
565    list: function(event,link){
566        // prepare an AJAX call to fetch the subtree
567        var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
568        ajax.AjaxFailedAlert = '';
569        ajax.encodeURIString = false;
570        if(ajax.failed) return true;
571
572        cleanMsgArea();
573
574        var content = $('media__content');
575        content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />';
576
577        ajax.elementObj = content;
578        ajax.afterCompletion = function(){
579            media_manager.selectorattach(content);
580            media_manager.confirmattach(content);
581            media_manager.updatehide();
582            media_manager.initFlashUpload();
583        };
584        ajax.runAJAX(link.search.substr(1)+'&call=medialist');
585        return false;
586    },
587
588
589    /**
590     * Open or close a subtree using AJAX
591     *
592     * @author Andreas Gohr <andi@splitbrain.org>
593     */
594    toggle: function(event,clicky){
595        var listitem = clicky.parentNode;
596
597        // if already open, close by removing the sublist
598        var sublists = listitem.getElementsByTagName('ul');
599        if(sublists.length){
600            listitem.removeChild(sublists[0]);
601            clicky.src = DOKU_BASE+'lib/images/plus.gif';
602            return false;
603        }
604
605        // get the enclosed link (is always the first one)
606        var link = listitem.getElementsByTagName('a')[0];
607
608        // prepare an AJAX call to fetch the subtree
609        var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
610        ajax.AjaxFailedAlert = '';
611        ajax.encodeURIString = false;
612        if(ajax.failed) return true;
613
614        //prepare the new ul
615        var ul = document.createElement('ul');
616        //fixme add classname here
617        listitem.appendChild(ul);
618        ajax.elementObj = ul;
619        ajax.afterCompletion = function(){ media_manager.treeattach(ul); };
620        ajax.runAJAX(link.search.substr(1)+'&call=medians');
621        clicky.src = DOKU_BASE+'lib/images/minus.gif';
622        return false;
623    },
624
625    /**
626     * Prefills the wikiname.
627     *
628     * @author Andreas Gohr <andi@splitbrain.org>
629     */
630    suggest: function(){
631        var file = $('upload__file');
632        var name = $('upload__name');
633        if(!file || !name) return;
634
635        var text = file.value;
636        text = text.substr(text.lastIndexOf('/')+1);
637        text = text.substr(text.lastIndexOf('\\')+1);
638        name.value = text;
639    },
640
641
642    initFlashUpload: function(){
643        if(!hasFlash(8)) return;
644        var oform  = $('dw__upload');
645        var oflash = $('dw__flashupload');
646        if(!oform || !oflash) return;
647
648        var clicky = document.createElement('img');
649        clicky.src     = DOKU_BASE+'lib/images/multiupload.png';
650        clicky.title   = LANG['mu_btn'];
651        clicky.alt     = LANG['mu_btn'];
652        clicky.style.cursor = 'pointer';
653        clicky.onclick = function(){
654                            oform.style.display  = 'none';
655                            oflash.style.display = '';
656                         };
657        oform.appendChild(clicky);
658    },
659
660    /**
661     * closes the link type popup
662     */
663    closePopup: function(event) {
664        $('media__popup').style.display = 'none';
665    },
666
667    /**
668     * set the align
669     *
670     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
671     */
672    setalign: function(event,cb){
673        if(cb.value){
674            DokuCookie.setValue('align',cb.value);
675            media_manager.align = cb.value;
676            media_manager.outSet("media__alignbtn0");
677            media_manager.outSet("media__alignbtn1");
678            media_manager.outSet("media__alignbtn2");
679            media_manager.outSet("media__alignbtn3");
680            media_manager.inSet("media__alignbtn"+cb.value);
681        }else{
682            DokuCookie.setValue('align','');
683            media_manager.align = false;
684        }
685    },
686    /**
687     * set the link type
688     *
689     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
690     */
691    setlink: function(event,cb){
692        if(cb.value){
693            DokuCookie.setValue('link',cb.value);
694            media_manager.link = cb.value;
695            media_manager.outSet("media__linkbtn1");
696            media_manager.outSet("media__linkbtn2");
697            media_manager.outSet("media__linkbtn3");
698            media_manager.outSet("media__linkbtn4");
699            media_manager.inSet("media__linkbtn"+cb.value);
700            var size = document.getElementById("media__size");
701            var align = document.getElementById("media__align");
702            if (cb.value != '4') {
703                size.style.display  = "block";
704                align.style.display = "block";
705            } else {
706                size.style.display  = "none";
707                align.style.display = "none";
708            }
709        }else{
710            DokuCookie.setValue('link','');
711            media_manager.link = false;
712        }
713    },
714
715    /**
716     * set the display type
717     *
718     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
719     */
720    setdisplay: function(event,cb){
721        if(cb.value){
722            DokuCookie.setValue('display',cb.value);
723            media_manager.display = cb.value;
724            media_manager.outSet("media__displaybtn1");
725            media_manager.outSet("media__displaybtn2");
726            media_manager.inSet("media__displaybtn"+cb.value);
727
728        }else{
729            DokuCookie.setValue('display','');
730            media_manager.align = false;
731        }
732    },
733
734    /**
735     * sets the border to outset
736     */
737    outSet: function(id) {
738        var ele = document.getElementById(id);
739        if (ele == null) return;
740        ele.style.borderStyle = "outset";
741    },
742    /**
743     * sets the border to inset
744     */
745    inSet: function(id) {
746        var ele = document.getElementById(id);
747        if (ele == null) return;
748        ele.style.borderStyle = "inset";
749    },
750
751    /**
752     * set the image size
753     *
754     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
755     */
756    setsize: function(event,cb){
757        if (cb.value) {
758            DokuCookie.setValue('size',cb.value);
759            media_manager.size = cb.value;
760            for (var i = 1 ; i <= 4 ; ++i) {
761                media_manager.outSet("media__sizebtn" + i);
762            }
763            media_manager.inSet("media__sizebtn"+cb.value);
764        } else {
765            DokuCookie.setValue('size','');
766            media_manager.width = false;
767        }
768    }
769};
770
771addInitEvent(function(){
772    media_manager.treeattach($('media__tree'));
773    media_manager.selectorattach($('media__content'));
774    media_manager.confirmattach($('media__content'));
775    media_manager.attachoptions($('media__opts'));
776    media_manager.initpopup();
777    media_manager.initFlashUpload();
778});
779