1function mxODPicker(container, previewFn, getODFilesList, getODFileInfo, getRecentList, addToRecent, pickedFileCallback, errorFn, foldersOnly, backFn, withSubmitBtn, withThumbnail, initFolderPath)
2{
3	var previewHtml = '';
4
5	if (previewFn == null)
6	{
7		previewFn = renderFile;
8		previewHtml = '<div style="text-align: center;" class="odPreview"></div>';
9	}
10
11	if (getRecentList == null)
12	{
13		getRecentList = function()
14		{
15			var list = null;
16
17			try
18			{
19				list = JSON.parse(localStorage.getItem('mxODPickerRecentList'));
20			}
21			catch(e){}
22
23			return list;
24		}
25	}
26
27	if (addToRecent == null)
28	{
29		addToRecent = function(file)
30		{
31			if (file == null)
32			{
33				return;
34			}
35
36			var recentList = getRecentList() || {};
37
38    		delete file['@microsoft.graph.downloadUrl'];
39    		recentList[file.id] = file;
40			localStorage.setItem('mxODPickerRecentList', JSON.stringify(recentList));
41		}
42	}
43
44	function _$(selector, elem)
45	{
46		elem = elem || document;
47		return elem.querySelector(selector);
48	};
49
50	function _$$(selector, elem)
51	{
52		elem = elem || document;
53		return elem.querySelectorAll(selector);
54	};
55
56	var html =
57			'<div class="odCatsList">' +
58				'<div class="odCatsListLbl">OneDrive</div>' +
59				'<div id="odFiles" class="odCatListTitle odCatSelected">' + mxUtils.htmlEntities(mxResources.get('files')) + '</div>' +
60				'<div id="odRecent" class="odCatListTitle">' + mxUtils.htmlEntities(mxResources.get('recent')) + '</div>' +
61				'<div id="odShared" class="odCatListTitle">' + mxUtils.htmlEntities(mxResources.get('shared')) + '</div>' +
62				'<div id="odSharepoint" class="odCatListTitle">' + mxUtils.htmlEntities(mxResources.get('sharepoint')) + '</div>' +
63			'</div>' +
64			'<div class="odFilesSec">' +
65				'<div class="searchBar" style="display:none"><input type="search" id="odSearchBox" placeholder="' + mxUtils.htmlEntities(mxResources.get('search')) + '"></div>' +
66				'<div class="odFilesBreadcrumb"></div>' +
67				'<div id="refreshOD" class="odRefreshButton">' +
68					'<img src="/images/update32.png" width="16" height="16" title="' + mxUtils.htmlEntities(mxResources.get('refresh')) + 'Refresh" border="0"/>' +
69				'</div>' +
70				'<div class="odFilesList"></div>' +
71			'</div>' +
72			previewHtml +
73			(backFn? '<div id="odBackBtn" class="odLinkBtn">&lt; ' + mxUtils.htmlEntities(mxResources.get('back')) + '</div>' : '') +
74			(withSubmitBtn? '<button id="odSubmitBtn" class="odSubmitBtn">' + mxUtils.htmlEntities(mxResources.get(foldersOnly? 'save' : 'open')) + '</button>' : '');
75
76	var isDarkMode = window.Editor != null && Editor.isDarkMode != null && Editor.isDarkMode();
77
78	var css =
79		'.odCatsList {' +
80		'	box-sizing: border-box;' +
81		'	position:absolute;' +
82		'	top:0px;' +
83		'	bottom:50%;' +
84		'	width:30%;' +
85		'	border: 1px solid #CCCCCC;' +
86		'	border-bottom:none;' +
87		'	display: inline-block;' +
88		'	overflow-x: hidden;' +
89		'	overflow-y: auto;' +
90		'}' +
91		'.odCatsListLbl {' +
92		'	height: 17px;' +
93		'	color: #6D6D6D;' +
94		'	font-size: 14px;' +
95		'	font-weight: bold;' +
96		'	line-height: 17px;' +
97		'	margin: 10px 0 3px 5px;' +
98		'}' +
99		'.odFilesSec {' +
100		'	box-sizing: border-box;' +
101		'	position:absolute;' +
102		'	left:30%;' +
103		'	top:0px;' +
104		'	bottom:50%;' +
105		'	width: 70%;' +
106		'	border: 1px solid #CCCCCC;' +
107		'	border-left:none;' +
108		'	border-bottom:none;' +
109		'	display: inline-block;' +
110		'	overflow: hidden;' +
111		'}' +
112		'.odFilesBreadcrumb {' +
113		'	box-sizing: border-box;' +
114		'	position:absolute;' +
115		'	min-height: 32px;' +
116		'	left:0px;' +
117		'	right:20px;' +
118		'	text-overflow:ellipsis;' +
119		'	overflow:hidden;' +
120		'	font-size: 13px;' +
121		'	color: #6D6D6D;' +
122		'	padding: 5px;' +
123		'}' +
124		'.odRefreshButton {' +
125		'	box-sizing: border-box;' +
126		'	position:absolute;' +
127		'	right:0px;' +
128		'	top:0px;' +
129		'	padding: 4px;' +
130		'	margin: 1px;' +
131		'	height:24px;' +
132		'	cursor:default;' +
133		'}' +
134		'.odRefreshButton>img {' +
135		'	opacity:0.5;' +
136		'}' +
137		'.odRefreshButton:hover {' +
138		'	background-color:#ddd;' +
139		'	border-radius:50%;' +
140		'}' +
141		'.odRefreshButton:active {' +
142		'	opacity:0.7;' +
143		'}' +
144		'.odFilesList {' +
145		'	box-sizing: border-box;' +
146		'	position:absolute;' +
147		'	top:32px;' +
148		'	bottom:0px;' +
149		'	width: 100%;' +
150		'	overflow-x: hidden;' +
151		'	overflow-y: auto;' +
152		'}' +
153		'.odFileImg {' +
154		'	width: 24px;' +
155		'	padding-left: 5px;' +
156		'	padding-right: 5px;' +
157		'}' +
158		'.odFileTitle {' +
159		'	cursor: default;' +
160		'	font-weight: normal;' +
161		'	color: #666666 !important;' +
162		'	width: calc(100% - 20px);' +
163	    '	white-space: nowrap;' +
164	    '	overflow: hidden;' +
165    	'	text-overflow: ellipsis;' +
166		'}' +
167		'.odFileListGrid {' +
168		'	width: 100%;' +
169		'	white-space: nowrap;' +
170		'	font-size: 13px;' +
171		'    box-sizing: border-box;' +
172		'    border-spacing: 0;' +
173		'}' +
174		'.odOddRow {' +
175		(isDarkMode ? '' : '	background-color: #eeeeee;') +
176		'}' +
177		'.odEvenRow {' +
178		(isDarkMode ? '' : '	background-color: #FFFFFF;') +
179		'}' +
180		'.odRowSelected {' +
181		'	background-color: #cadfff;' +
182		'}' +
183		'.odCatListTitle {' +
184		'	box-sizing: border-box;' +
185		'	height: 17px;' +
186		'	cursor: default;' +
187		'	color: #666666;' +
188		'	font-size: 14px;' +
189		'	line-height: 17px;' +
190		'	margin: 5px 0 5px 0px;' +
191		'    padding-left: 10px;' +
192		'}' +
193		'.odCatSelected {' +
194		'	font-weight: bold;' +
195		'	background-color: #cadfff;' +
196		'}' +
197		'.odEmptyFolder {' +
198		'	height: 17px;' +
199		'	color: #6D6D6D;' +
200		'	font-size: 14px;' +
201		'	font-weight: bold;' +
202		'	line-height: 17px;' +
203		'	margin: 10px 0 3px 5px;' +
204		'	width: 100%;' +
205		'    text-align: center;' +
206		'}' +
207		'.odBCFolder {' +
208		'	cursor: pointer;' +
209		'	color: #0432ff;' +
210		'}' +
211		'.odPreviewStatus {' +
212		'	position:absolute;' +
213		'	text-align:center;' +
214		'	width:100%;' +
215		'	top:50%;' +
216		'	transform: translateY(-50%);' +
217		'	font-size:13px;' +
218		'	opacity:0.5;' +
219		'}' +
220		'.odPreview {' +
221		'    position:absolute;' +
222		'	 overflow:hidden;' +
223		'	 border: 1px solid #CCCCCC;' +
224		'    bottom:0px;' +
225		'    top: 50%;' +
226		'    left:0px;' +
227		'    right:0px;' +
228		'}' +
229		'.odLinkBtn {' +
230		'   position: absolute;' +
231		'	font-size: 12px;' +
232		'	cursor: pointer;' +
233		'	color: #6D6D6D;' +
234		'	left: 5px;' +
235		'	bottom: 3px;' +
236		'}' +
237		'.odSubmitBtn {' +
238		'   position: absolute;' +
239		'	color: #333;' +
240		'	right: 5px;' +
241		'	bottom: 5px;' +
242		'}';
243
244	var opts =
245	{
246		left: '50%',
247		lines: 12, // The number of lines to draw
248		length: 8, // The length of each line
249		width: 3, // The line thickness
250		radius: 5, // The radius of the inner circle
251		rotate: 0, // The rotation offset
252		color: '#000', // #rgb or #rrggbb
253		speed: 1, // Rounds per second
254		trail: 60, // Afterglow percentage
255		shadow: false, // Whether to render a shadow
256		hwaccel: false, // Whether to use hardware acceleration
257		className: 'spinner', // The CSS class to assign to the spinner
258		zIndex: 2e9 // The z-index (defaults to 2000000000)
259	};
260
261	var spinner = new Spinner(opts);
262	var editor = new Editor();
263	var curViewer = null;
264	var selectedFile = null;
265	var selectedDriveId = null;
266	var selectedSiteId = null;
267	var requestInProgress = false;
268	var breadcrumb = [];
269    var lastFolderArgs = null;
270	var loadingPreviewFile = null;
271
272	function getDrawioFileDoc(file, success, error)
273	{
274		if (file['@microsoft.graph.downloadUrl'] == null)
275		{
276			if (file.parentReference == null)
277			{
278				error();
279			}
280			else
281			{
282				getODFileInfo(file.id, file.parentReference.driveId, function(completeFile)
283				{
284					getDrawioFileDoc(completeFile, success, error);
285				}, error);
286
287				return;
288			}
289		}
290
291		var req = new XMLHttpRequest();
292		//TODO find another way to disable caching (adding a parameter breaks the url)
293		req.open('GET', file['@microsoft.graph.downloadUrl']);
294		var isPng = file.file? (file.file.mimeType == 'image/png') : false;
295
296		req.onreadystatechange = function()
297		{
298			if (this.readyState == 4)
299			{
300				if (this.status >= 200 && this.status <= 299)
301				{
302					try
303					{
304						var cnt = req.responseText;
305
306						if (isPng)
307						{
308							cnt = 'data:image/png;base64,' + Editor.base64Encode(cnt);
309							cnt = Editor.extractGraphModelFromPng(cnt);
310						}
311
312						var doc = mxUtils.parseXml(cnt);
313						var node = Editor.extractGraphModel(doc.documentElement);
314
315						if (node != null)
316						{
317							success(node.ownerDocument);
318
319							return;
320						}
321					}
322					catch(e) {} //on error and if the doc is null, the following line will call the error
323				}
324
325				error();
326			}
327		};
328
329		if (isPng && req.overrideMimeType)
330		{
331			req.overrideMimeType('text/plain; charset=x-user-defined');
332		}
333
334		req.send();
335	};
336
337	function doSubmit()
338	{
339		function submit(img)
340		{
341			pickedFileCallback(selectedFile, img);
342			addToRecent(selectedFile);
343		}
344
345		if (withThumbnail && curViewer != null)
346		{
347			editor.exportToCanvas(function(canvas)
348			{
349				submit(EditorUi.prototype.createImageDataUri(canvas, null, 'png'));
350			}, 400, null, null, function(err)
351			{
352				//TODO handle errors
353				console.log(err);
354			}, 600, null, null, null, null, null, curViewer);
355		}
356		else
357		{
358			submit();
359		}
360	};
361
362	function renderFile(file)
363	{
364		if (prevDiv == null)
365		{
366			return;
367		}
368
369		prevDiv.style.background = 'transparent';
370		prevDiv.innerHTML = '';
371
372		function showRenderMsg(msg)
373		{
374			var status = document.createElement('div');
375			status.className = 'odPreviewStatus';
376			mxUtils.write(status, msg);
377			prevDiv.appendChild(status);
378			spinner.stop();
379		};
380
381		if (file == null || file.folder)
382		{
383			showRenderMsg(mxResources.get('noPreview'));
384			return;
385		}
386
387		spinner.spin(prevDiv);
388
389		try
390		{
391			// Workaround for parentReference access
392			if (file.remoteItem != null)
393			{
394				file = file.remoteItem;
395			}
396
397			loadingPreviewFile = file;
398
399			getDrawioFileDoc(file, function(doc)
400			{
401				if (loadingPreviewFile != file)
402				{
403					return;
404				}
405
406				var diagrams = doc.getElementsByTagName('diagram');
407				curViewer = AspectDialog.prototype.createViewer(prevDiv,
408						diagrams.length == 0? doc.documentElement : diagrams[0],
409						null, 'transparent');
410
411				spinner.stop();
412			},
413			function() //If the file is not a draw.io diagram
414			{
415				selectedFile = null;
416				showRenderMsg(mxResources.get('notADiagramFile'));
417			});
418		}
419		catch (e)
420		{
421			selectedFile = null;
422			showRenderMsg(mxResources.get('notADiagramFile'));
423		}
424	};
425
426
427	function renderBreadcrumb()
428	{
429		var bcDiv = _$('.odFilesBreadcrumb');
430
431		if (bcDiv == null) return;
432
433		bcDiv.innerHTML = '';
434
435		for (var i = 0; i < breadcrumb.length - 1; i++)
436		{
437			var folder = document.createElement('span');
438			folder.className = 'odBCFolder';
439			folder.innerHTML = mxUtils.htmlEntities(breadcrumb[i].name || mxResources.get('home'));
440			bcDiv.appendChild(folder);
441
442			(function(bcItem, index)
443			{
444				folder.addEventListener('click', function()
445				{
446					previewFn(null);
447					breadcrumb = breadcrumb.slice(0, index);
448					fillFolderFiles(bcItem.driveId, bcItem.folderId, bcItem.siteId, bcItem.name);
449				});
450			})(breadcrumb[i], i);
451
452			var sep = document.createElement('span');
453			sep.innerHTML = ' &gt; ';
454			bcDiv.appendChild(sep);
455		}
456
457		if (breadcrumb[breadcrumb.length - 1] != null)
458		{
459			var curr = document.createElement('span');
460			curr.innerHTML = mxUtils.htmlEntities((breadcrumb.length == 1) ?
461					mxResources.get('officeSelDiag') : (breadcrumb[breadcrumb.length - 1].name || mxResources.get('home')));
462			bcDiv.appendChild(curr);
463		}
464	};
465
466	function openFile()
467	{
468		if (selectedFile == null || requestInProgress) return;
469
470		if (selectedDriveId == 'sharepoint')
471		{
472			fillFolderFiles('site', null, selectedFile.id, selectedFile.displayName);
473		}
474		else if (selectedDriveId == 'site')
475		{
476			fillFolderFiles('subsite', null, selectedFile.id, selectedFile.name);
477		}
478		else
479		{
480			var isFolder = selectedFile.folder;
481			selectedFile = selectedFile.remoteItem? selectedFile.remoteItem : selectedFile; //handle remote items which is accessed indirectly
482			var folderDI = (selectedFile.parentReference? selectedFile.parentReference.driveId : null) || selectedDriveId;
483			var id = selectedFile.id;
484
485			if (isFolder)
486			{
487				fillFolderFiles(folderDI, id, null, selectedFile.name);
488			}
489			else
490			{
491				doSubmit();
492			}
493		}
494	};
495
496	function fillFolderFiles(driveId, folderId, siteId, folderName, searchTxt)
497	{
498		if (requestInProgress) return;
499
500        _$('.odCatsList').style.display = 'block';
501        _$('.odFilesSec').style.display = 'block';
502       // _$('#signOutLnk').style.display = '';
503
504		if (prevDiv != null)
505		{
506			prevDiv.innerHTML = '';
507			prevDiv.style.top = '50%';
508		}
509
510		requestInProgress = true;
511		var acceptRequest = true;
512		var isSharepointSites = 0;
513		lastFolderArgs = arguments;
514
515		function renderList(potentialDrawioFiles)
516		{
517			spinner.stop();
518
519			var grid = document.createElement('table');
520			grid.className = 'odFileListGrid';
521			var currentItem = null;
522			var count = 0;
523
524			//TODO support paging
525			for (var i = 0; potentialDrawioFiles!= null && i < potentialDrawioFiles.length; i++)
526			{
527				var item = potentialDrawioFiles[i];
528
529				if (isSharepointSites == 1 && item.webUrl && !(item.webUrl.indexOf('sharepoint.com/sites/') > 0 || item.webUrl.indexOf('sharepoint.com/') < 0))
530				{
531					continue;
532				}
533
534				var title = item.displayName || item.name;
535				var tooltip = mxUtils.htmlEntities(item.description || title);
536
537				if (isSharepointSites)
538				{
539					item.folder = true;
540				}
541
542				var isFolder = item.folder !=  null;
543
544				if (foldersOnly && !isFolder)
545				{
546					continue;
547				}
548
549				var row = document.createElement('tr');
550				row.className = (count++) % 2? 'odOddRow' : 'odEvenRow';
551				var td = document.createElement('td');
552				td.style.width = '36px';
553				var typeImg = document.createElement('img');
554				typeImg.src = '/images/'  + (isFolder? 'folder.png' : 'file.png');
555				typeImg.className = 'odFileImg';
556				td.appendChild(typeImg);
557
558				row.appendChild(td);
559				td = document.createElement('td');
560				var titleDiv = document.createElement('div');
561				titleDiv.className = "odFileTitle";
562				titleDiv.innerHTML = mxUtils.htmlEntities(title);
563				titleDiv.setAttribute('title', tooltip);
564				td.appendChild(titleDiv);
565				row.appendChild(td);
566				grid.appendChild(row);
567
568				if (currentItem == null)
569				{
570					currentItem = row;
571					currentItem.className += ' odRowSelected';
572					selectedFile = item;
573					selectedDriveId = driveId;
574					previewFn(selectedFile);
575				}
576
577				(function(item2, row2)
578				{
579					row.addEventListener('dblclick', openFile);
580
581					row.addEventListener('click', function()
582					{
583						if (currentItem != row2)
584						{
585							currentItem.className = currentItem.className.replace('odRowSelected', '');
586							currentItem = row2;
587							currentItem.className += ' odRowSelected';
588							selectedFile = item2;
589							selectedDriveId = driveId;
590
591							previewFn(selectedFile);
592						}
593					});
594				})(item, row);
595			}
596
597			if (count == 0)
598			{
599				var emptyMsg = document.createElement('div');
600				emptyMsg.className = 'odEmptyFolder';
601				emptyMsg.innerHTML = mxUtils.htmlEntities(mxResources.get('folderEmpty', null, 'Folder is empty!'));
602				filesList.appendChild(emptyMsg);
603			}
604			else
605			{
606				filesList.appendChild(grid);
607			}
608
609			renderBreadcrumb();
610			requestInProgress = false;
611		};
612
613		var timeoutThread = setTimeout(function()
614		{
615			acceptRequest = false;
616			requestInProgress = false;
617			spinner.stop();
618			errorFn(mxResources.get('timeout'));
619		}, 20000); //20 sec timeout
620
621		var filesList = _$('.odFilesList');
622        filesList.innerHTML = '';
623        spinner.spin(filesList);
624
625        var url;
626
627        switch(driveId)
628        {
629        	case 'recent':
630        		breadcrumb = [{name: mxResources.get('recent', null, 'Recent'), driveId: driveId}];
631        		var recentList = getRecentList() || {};
632        		var list = [];
633
634        		for (var id in recentList)
635    			{
636        			list.push(recentList[id]);
637    			}
638
639        		clearTimeout(timeoutThread);
640        		renderList(list);
641        		return;
642        	case 'shared':
643        		url = '/me/drive/sharedWithMe';
644        		breadcrumb = [{name: mxResources.get('sharedWithMe', null, 'Shared With Me'), driveId: driveId}];
645        		break;
646        	case 'sharepoint':
647        		url = '/sites?search=';
648        		breadcrumb = [{name: mxResources.get('sharepointSites', null, 'Sharepoint Sites'), driveId: driveId}];
649        		isSharepointSites = 1;
650        		break;
651        	case 'site':
652        		breadcrumb.push({name: folderName, driveId: driveId, folderId: folderId, siteId: siteId});
653        		url = '/sites/' + siteId + '/drives';
654        		isSharepointSites = 2;
655        		break;
656        	case 'subsite':
657        		breadcrumb.push({name: folderName, driveId: driveId, folderId: folderId, siteId: siteId});
658        		url = '/drives/' + siteId + (folderId? '/items/' + folderId : '/root') + '/children';
659        		break;
660        	case 'search': //TODO search doesn't return any results, find out why then remove display: none from the searchBox
661        		driveId = selectedDriveId;
662        		breadcrumb = [{driveId: driveId, name: mxResources.get('back', null, 'Back')}];
663        		searchTxt = encodeURIComponent(searchTxt.replace(/\'/g, '\\\''));
664        		url = selectedSiteId? '/sites/' + selectedSiteId + '/drive/root/search(q=\'' + searchTxt + '\')' : (driveId? '/drives/' + driveId + '/root/search(q=\'' + searchTxt + '\')' : '/me/drive/root/search(q=\'' + searchTxt + '\')');
665        		break;
666        	default:
667        		if (folderId == null)
668    			{
669        			breadcrumb = [{driveId: driveId}];
670    			}
671        		else
672        		{
673        			breadcrumb.push({name: folderName, driveId: driveId, folderId: folderId});
674        		}
675
676        		url = (driveId?  '/drives/' + driveId : '/me/drive') + (folderId? '/items/' + folderId : '/root') + '/children';
677        }
678
679        if (!isSharepointSites)
680        {
681        	url += (url.indexOf('?') > 0 ? '&' : '?') + 'select=id,name,description,parentReference,file,createdBy,lastModifiedBy,lastModifiedDateTime,size,folder,remoteItem,@microsoft.graph.downloadUrl';
682        }
683
684		getODFilesList(url, function(resp)
685		{
686			if (!acceptRequest) return;
687			clearTimeout(timeoutThread);
688
689			var list = resp.value || [];
690
691			var potentialDrawioFiles = isSharepointSites? list : [];
692
693			for (var i = 0; !isSharepointSites && i < list.length; i++)
694			{
695				var file = list[i];
696				var mimeType = file.file? file.file.mimeType : null;
697
698				if (file.folder || mimeType == 'text/html' || mimeType == 'text/xml' || mimeType == 'application/xml' || mimeType == 'image/png'
699					|| /\.svg$/.test(file.name) || /\.html$/.test(file.name) || /\.xml$/.test(file.name) || /\.png$/.test(file.name)
700					|| /\.drawio$/.test(file.name))
701				{
702					potentialDrawioFiles.push(file);
703				}
704			}
705
706			renderList(potentialDrawioFiles);
707		},
708		function(err)
709		{
710			if (!acceptRequest) return;
711			clearTimeout(timeoutThread);
712
713			var errMsg = null;
714
715			try
716			{
717				errMsg = JSON.parse(err.responseText).error.message;
718			}
719			catch(e){} //ignore errors
720
721			errorFn(mxResources.get('errorFetchingFolder', null, 'Error fetching folder items') +
722				(errMsg != null? ' (' + errMsg + ')' : ''));
723
724			requestInProgress = false;
725			spinner.stop();
726		});
727	};
728
729	this.getSelectedItem = function()
730	{
731		if (selectedFile != null)
732		{
733			addToRecent(selectedFile);
734		}
735
736		return selectedFile;
737	}
738
739	//Code execution starts here
740	if (_$('#mxODPickerCss') == null)
741	{
742		var head = document.head || document.getElementsByTagName('head')[0],
743		style = document.createElement('style');
744
745		head.appendChild(style);
746		style.type = 'text/css';
747		style.id = 'mxODPickerCss';
748		style.appendChild(document.createTextNode(css));
749	}
750
751	container.innerHTML = html;
752
753	var prevDiv = _$('.odPreview');
754	var selectedCat = _$('#odFiles');
755
756	var cats = _$$('.odCatListTitle');
757
758	function setSelectedCat(cat)
759	{
760		selectedCat.className = selectedCat.className.replace('odCatSelected', '');
761		selectedCat = cat;
762		selectedCat.className += ' odCatSelected';
763	};
764
765	for (var i = 0; i < cats.length; i++)
766	{
767		cats[i].addEventListener('click', function()
768		{
769			loadingPreviewFile = null;
770			selectedFile = null;
771
772			if (requestInProgress) return;
773
774			setSelectedCat(this);
775
776			switch(this.id)
777			{
778				case 'odFiles':
779					fillFolderFiles();
780				break;
781				case 'odRecent':
782					fillFolderFiles('recent');
783				break;
784				case 'odShared':
785					fillFolderFiles('shared');
786				break;
787				case 'odSharepoint':
788					fillFolderFiles('sharepoint');
789				break;
790			}
791		});
792	}
793
794	//Search (Currently API doesn't work)
795	var delayTimer = null;
796
797	function doSearch(searchStr)
798	{
799		if (requestInProgress) return;
800		delayTimer = null;
801		fillFolderFiles('search', null, null, null, searchStr)
802	};
803
804	//Use keyup to detect delete and backspace
805	_$('#odSearchBox').addEventListener('keyup', function(evt)
806	{
807		var searchInput = this;
808
809		if (delayTimer != null)
810		{
811			clearTimeout(delayTimer);
812		}
813
814		if (evt.keyCode == 13)
815		{
816			doSearch(searchInput.value);
817		}
818		else
819		{
820			delayTimer = setTimeout(function()
821			{
822				doSearch(searchInput.value);
823			}, 500);
824		}
825	});
826
827	function refreshFolder()
828	{
829		if (lastFolderArgs != null)
830		{
831			previewFn(null);
832			fillFolderFiles.apply(this, lastFolderArgs);
833		}
834	};
835
836	_$('#refreshOD').addEventListener('click', refreshFolder);
837
838	if (backFn)
839	{
840		_$('#odBackBtn').addEventListener('click', backFn);
841	}
842
843	if (withSubmitBtn)
844	{
845		_$('#odSubmitBtn').addEventListener('click', doSubmit);
846	}
847
848	document.body.onselectstart = function()
849	{
850		return false;
851	};
852
853	if (initFolderPath != null)
854	{
855		var folderInfo = initFolderPath.pop();
856
857		if (initFolderPath[0].driveId == 'sharepoint')
858		{
859			setSelectedCat(_$('#odSharepoint'));
860		}
861
862		breadcrumb = initFolderPath;
863		fillFolderFiles(folderInfo.driveId, folderInfo.folderId, folderInfo.siteId, folderInfo.name);
864	}
865	else
866	{
867		fillFolderFiles();
868	}
869};
870