~ya-bo-ng/ubuntu-online-tour/13.10

129 by Anthony Dillon
Inishal setup of the 13.10 version of the tour
1
/*
2
* System Overlay
3
*  author: Anthony Dillon
4
*/
5
6
function SystemOverlay($parent){
7
	 
8
	var _parent = $parent;
9
	var _this = this;
10
	var menu_open = false;
11
	var contentsWidth = 0;
12
	var mediaApps;
13
	var internetApps;
14
	var moreApps;
15
	var downloadApps;
16
	this.totalApps;
17
	var fileList;
18
	var searching = false;
19
	
20
	this.init = function(){
21
		downloadApps = new Array({name:_chromium_app_,image:'img/software-centre/logo-chromium.png'},
22
															  {name:_beep_app_,image:'img/software-centre/logo-beep.png' },
23
															  {name:_inkscape_app_,image:'img/software-centre/logo-inkscape.png'},
24
															  {name:_world_of_goo_app_,image:'img/software-centre/logo-world-of-goo.png'},
25
															  {name:_blender_app_, image:'img/software-centre/logo-blender.png'},
26
															  {name:_braid_app_,image:'img/software-centre/logo-braid.png'});
27
															  
28
		mediaApps = new Array({name:_banshee_app_,image:'banshee.png'},
29
															  {name:_brasero_app_,image:'brasero.png' },
30
															  {name:_movie_player_app_,image:'movieplayer.png'},
31
															  {name:_shotwell_app_,image:'shotwell.png'},
32
															  {name:_pitivi_app_, image:'pitivi.png'},
33
															  {name:_sound_recorder_app_,image:'soundrecorder.png'});
34
															  
35
		internetApps = new Array({name:_empathy_app_,image:'empathy.png'},
36
																  {name:_thunderbird_app_,image:'thunderbird.png' },
37
																  {name:_firefox_app_,image:'firefox.png'},
38
																  {name:_gwibber_app_, image:'gwibber.png'},
39
																  {name:_remote_desktop_app_,image:'remotedesktop.png'},
40
																  {name:_terminal_app_, image:'terminalserver.png'});
41
42
		moreApps = new Array({name:_about_me_app_,image:'aboutme.png'},
43
														    {name:_additional_drivers_app_,image:'additionaldrivers.png' },
44
														    {name:_aisleroit_app_,image:'solitaire.png'},
45
														    {name:_appearance_app_, image:'appearance.png'},
46
														    {name:_bluetooth_app_,image:'bluetooth.png'});	
47
														    
48
		this.totalApps = mediaApps.concat(internetApps, moreApps);
49
		$('#systemOverlay input').val(_search_);
50
		this.setupTopControl();
51
	}
52
	
53
	this.open = function(){
54
		_parent.closeTopRightDropDowns();
55
		if(menu_open){
56
			_this.closeOverlay();
57
		}else{
58
			_this.openOverlay();
59
		}
60
		this.resize();
61
	}
62
	
63
	this.setupTopControl = function(){
64
		$('#systemOverlay .copyDash').bind('click',function(event){
65
				_this.closeOverlay();
66
		});
67
		
68
		$('#top #top-left #dash-control-buttons .close').bind('click',function(event){
69
				_this.closeOverlay();
70
		});
71
		
72
		$('#systemOverlay input').keyup(function(){
73
			_this.appSearch($(this).val());
74
		});
75
		
76
		this.resize();
77
		
78
		/*$('#systemOverlay #shortcut-title').bind('mouseover',function(){
79
			$('#systemOverlay #shortcut-title .shortcut-arrow').addClass('hover');
80
		});
81
		
82
		$('#systemOverlay #shortcut-title').bind('mouseout',function(){
83
			$('#systemOverlay #shortcut-title .shortcut-arrow').removeClass('hover');
84
		});
85
		
86
		$('#systemOverlay #shortcut-title').bind('click',function(){
87
			if($('#systemOverlay #shortcut-title p').hasClass('closed')){
88
				$('#systemOverlay #shortcut-title .shortcut-arrow').removeClass('closed');
89
				$('#systemOverlay #shortcuts #shortcut-contents').show();
90
			}else{
91
				$('#systemOverlay #shortcut-title .shortcut-arrow').addClass('closed');
92
				$('#systemOverlay #shortcuts #shortcut-contents').hide();
93
			}
94
		});
95
		
96
		$('#systemOverlay #shortcuts #shortcut-contents div').bind('mouseover',function(){
97
			$('div', this).addClass('hover');
98
		});
99
		
100
		$('#systemOverlay #shortcuts #shortcut-contents div').bind('mouseout',function(){
101
			$('div', this).removeClass('hover');
102
		});
103
		
104
		$('#systemOverlay #shortcuts #shortcut-contents div').bind('mousedown',function(){
105
			var theID = $(this).attr('id');
106
			if(theID != undefined){
107
				switch(theID){
108
					case 'browse-the-web':
109
						_this.closeOverlay();
110
						_parent.systemMenu.handleMenuClick('firefox');
111
					break;
112
					case 'view-photos':
113
						_this.closeOverlay();
114
						_parent.systemMenu.handleMenuClick('shotwell');
115
					break;
116
					case 'check-email':
117
						_this.closeOverlay();
118
						_parent.systemMenu.handleMenuClick('email');
119
					break;
120
					case 'listen-to-music':
121
						_this.closeOverlay();
122
						_parent.errorMessage.open();
123
					break;
124
					case 'media-apps':
125
						_this.displayApps('media');
126
					break;
127
					case 'internet-apps':
128
						_this.displayApps('internet');
129
					break;
130
					case 'more-apps':
131
						_this.displayApps('more');
132
					break;
133
					case 'find-apps':
134
						_this.displayFindApps();
135
					break;
136
					
137
				}
138
			}
139
		});*/
140
		
141
		$('#systemOverlay #dash-bottom-bar .bottom-wrapper div').click(function(){
142
			$('#systemOverlay #dash-bottom-bar .bottom-wrapper div').removeClass('active');
143
			switch($(this).attr('class').replace(' last','')){
144
				case 'home-icon':
145
					_this.showHome();
146
				break;
147
				case 'applications-icon':
148
					_this.displayApps();
149
				break;
150
				case 'files-icon':
151
					_this.displayFindApps();
152
				break;
153
				case 'music-icon':
154
					_this.displayMusic();
155
				break;
156
				case 'video-icon':
157
					_this.displayVideo();
158
				break;
159
			}
160
			$(this).addClass('active');
161
			
162
		});
163
		
164
		var search_input = $('#systemOverlay input');
165
	
166
		search_input.focus(function() {
167
			if ($(this).val() == _search_) {
168
				$(this).val('');
169
				$(this).css('font-style', 'normal');
170
				$(this).css('color', '#fff');
171
			}
172
		});
173
		search_input.blur(function() {
174
			if ($(this).val() == '') {
175
				$(this).val(_search_);
176
				$(this).css('font-style', 'italic');
177
				$(this).css('color', '#666');
178
				_this.reset();
179
			}
180
		});
181
	}
182
	
183
	this.removeApps = function($name){
184
		for(var i = 0; i < this.totalApps.length; i++){
185
			if( this.totalApps[i].name == $name){
186
				this.totalApps.splice(i,1);
187
				break;
188
			}
189
		}
190
	}
191
	
192
	this.appSearch = function($query){
193
		if($query != ''){
194
			var listFilesContents = '';
195
			fileList = _parent.fileSystem.getFiles();
196
			var listContents = '';
197
			var i = this.totalApps.length;
198
			var tempArray = new Array();
199
			var patt1 = new RegExp($query,"gi");
200
			while(i--){
201
				tempArray = this.totalApps[i].name.match(patt1);
202
				if(tempArray != null){
203
					if(this.totalApps[i].image.substr(0,7) == '../img/'){
204
						listContents += '<div><img src="'+this.totalApps[i].image+'" /><p>'+this.totalApps[i].name+'</p></div>';
205
					}else{
206
						listContents += '<div><img src="../img/applications/'+this.totalApps[i].image+'" /><p>'+this.totalApps[i].name+'</p></div>';
207
					}
208
				}
209
			}
210
			for(var i = 0; i < fileList.length; i++){
211
				tempArray = fileList[i].name().match(patt1);
212
				if(tempArray != null){
213
					listFilesContents += this.getDisplayIcon(fileList[i], i);
214
				}
215
			}
216
			
217
			this.hideAll();
218
			$('#systemOverlay #display-search .files .app-list').html(listFilesContents);
219
			$('#systemOverlay #display-search .applications .app-list').html(listContents);
220
			
221
			$('#systemOverlay #display-search').show();
222
			$('#systemOverlay .app-container .app-list div').bind('mouseover', function(){
223
				$('img',this).addClass('hover');
224
			});
225
			$('#systemOverlay .app-container .app-list div').bind('mouseout', function(){
226
				$('img',this).removeClass('hover');
227
			});
228
			$('#systemOverlay .app-container .applications .app-list div').bind('click', function(){
229
				var download = false;
230
				if($(this).attr('data-type') == 'download'){ download = true; }
231
				_this.appClicked($('img', this).attr('src'), download);
232
			});
233
			$('#systemOverlay .app-container .files .app-list div').bind('click', function(){
234
				_this.fileClicked($(this).attr('data-id'));
235
			});
236
		}else{
237
			this.showHome();
238
		}
239
	}
240
	
241
	this.getDisplayIcon = function($object, $i){
242
		switch($object.type()){
243
			case 'folder':
244
				return  '<div data-id="'+$i+'"><img src="../img/applications/folder.png" /><p>'+$object.name()+'</p></div>';
245
			break;
246
			case 'audio':
247
				return  '<div data-id="'+$i+'"><img src="../img/applications/audio.png" /><p>'+$object.name()+'</p></div>';
248
			break;
249
			case 'video':
250
				return '<div data-id="'+$i+'"><img src="../img/'+$object.url().replace('flv','jpg').replace('../','')+'" /><p>'+$object.name()+'</p></div>';
251
			break;
252
			case 'photo':
253
				return  '<div data-id="'+$i+'"><img src="'+$object.url()+'" /><p>'+$object.name()+'</p></div>';
254
			break;
255
			default:
256
				return  '<div data-id="'+$i+'"><img src="../img/applications/unknown.png" /><p>'+$object.name()+'</p></div>'; 
257
			break;
258
		}
259
	}
260
	
261
	this.hideAll = function(){
262
		$('#systemOverlay #overlayContents #display-home').hide();
263
		$('#systemOverlay #overlayContents #display-apps').hide();
264
		$('#systemOverlay #overlayContents #display-find-files').hide();
265
		$('#systemOverlay #overlayContents #display-search').hide();
266
		$('#systemOverlay #overlayContents #display-find-music').hide();
267
		$('#systemOverlay #overlayContents #display-find-video').hide();
268
	}
269
	
270
	this.showHome = function(){
271
		$('#systemOverlay #overlayContents #display-apps').hide();
272
		$('#systemOverlay #overlayContents #display-find-files').hide();
273
		$('#systemOverlay #overlayContents #display-search').hide();
274
		$('#systemOverlay #overlayContents #display-find-music').hide();
275
		$('#systemOverlay #overlayContents #display-find-video').hide();
276
		$('#systemOverlay #overlayContents #display-home').show();
277
	}
278
	
279
	this.displayHome = function(){
280
		var mostUsedArray;
281
		var listContents = '';
282
		var mostUsedContents = '';
283
		var downloadedContents = '';
284
		var appArray = this.totalApps;
285
		mostUsedArray = appArray.slice();
286
		mostUsedArray.sort(this.randOrd);
287
		downloadApps.sort(this.randOrd);
288
		fileList = _parent.fileSystem.getFiles();
289
		for(var i = 0; i < appArray.length; i++){
290
			if(appArray[i].image.substr(0,7) == '../img'){
291
				listContents += '<div><img src="'+appArray[i].image+'" /><p>'+appArray[i].name+'</p></div>';
292
			}else{
293
				listContents += '<div><img src="../img/applications/'+appArray[i].image+'" /><p>'+appArray[i].name+'</p></div>';
294
			}
295
		}
296
		for(var i = 0; i < fileList.length; i++){
297
			if(fileList[i].type() != 'folder'){
298
				mostUsedContents += this.getDisplayIcon(fileList[i], i);
299
			}
300
		}
301
		var i = fileList.length;
302
		while(i--){
303
			if(fileList[i].type() != 'folder'){
304
				downloadedContents += this.getDisplayIcon(fileList[i], i);
305
			}
306
		}
307
		$('#systemOverlay #display-home .recent-apps .app-list').html(listContents);
308
		$('#systemOverlay #display-home .recent-files .app-list').html(mostUsedContents);
309
		$('#systemOverlay #display-home .downloads .app-list').html(downloadedContents);
310
		$('#systemOverlay #display-find-files .downloads .app-list').html(downloadedContents);
311
		
312
		$('#systemOverlay .app-container .app-list div').bind('mouseover', function(){
313
			$('img',this).addClass('hover');
314
		});
315
		$('#systemOverlay .app-container .app-list div').bind('mouseout', function(){
316
			$('img',this).removeClass('hover');
317
		});
318
		$('#systemOverlay #display-home .recent-apps .app-list div').bind('click', function(){
319
			_this.appClicked($('img', this).attr('src'), ($(this).attr('data-type') == 'download'));
320
		});
321
		$('#systemOverlay #display-home .recent-files .app-list div').bind('click', function(){
322
			_this.fileClicked($(this).attr('data-id'));
323
		});
324
		$('#systemOverlay #display-home .downloads .app-list div').bind('click', function(){
325
			_this.fileClicked($(this).attr('data-id'));
326
		});
327
		
328
	}
329
	
330
	this.displayApps = function($type){
331
		this.hideAll();
332
		var appArray;
333
		var mostUsedArray;
334
		var listContents = '';
335
		var mostUsedContents = '';
336
		var downloadableContents = '';
337
		if($type == 'media'){
338
			appArray = mediaApps;
339
		}else if($type == 'internet'){
340
			appArray = internetApps;
341
		}else if($type == 'more'){
342
			appArray = moreApps;
343
		}else{
344
			appArray = this.totalApps;
345
		}
346
		mostUsedArray = appArray.slice();
347
		mostUsedArray.sort(this.randOrd);
348
		downloadApps.sort(this.randOrd);
349
		for(var i = 0; i < appArray.length; i++){
350
			if(appArray[i].image.substr(0,4) == 'img/'){
351
				listContents += '<div><img src="../'+appArray[i].image+'" /><p>'+appArray[i].name+'</p></div>';
352
			}else{
353
				listContents += '<div><img src="../img/applications/'+appArray[i].image+'" /><p>'+appArray[i].name+'</p></div>';
354
			}
355
		}
356
		for(var i = 0; i < mostUsedArray.length; i++){
357
			if(mostUsedArray[i].image.substr(0,4) == 'img/'){
358
				mostUsedContents += '<div><img src="../'+mostUsedArray[i].image+'" /><p>'+mostUsedArray[i].name+'</p></div>';
359
			}else{
360
				mostUsedContents += '<div><img src="../img/applications/'+mostUsedArray[i].image+'" /><p>'+mostUsedArray[i].name+'</p></div>';
361
			}
362
		}
363
		for(var i = 0; i < downloadApps.length; i++){
364
			if(downloadApps[i].image.substr(0,4) == 'img/'){
365
				downloadableContents += '<div data-type="download"><img src="../'+downloadApps[i].image+'" /><p>'+downloadApps[i].name+'</p></div>';
366
			}else{
367
				downloadableContents += '<div data-type="download"><img src="../img/applications/'+downloadApps[i].image+'" /><p>'+downloadApps[i].name+'</p></div>';
368
			}
369
		}
370
		$('#systemOverlay #display-home').hide();
371
		$('#systemOverlay #display-apps .available .app-list').html(downloadableContents);
372
		$('#systemOverlay #display-apps .installed .app-list').html(listContents);
373
		$('#systemOverlay #display-apps .frequently .app-list').html(mostUsedContents);
374
		$('#systemOverlay #display-apps').show();
375
		$('#systemOverlay .app-container .app-list div').bind('mouseover', function(){
376
			$('img',this).addClass('hover');
377
		});
378
		$('#systemOverlay .app-container .app-list div').bind('mouseout', function(){
379
			$('img',this).removeClass('hover');
380
		});
381
		$('#systemOverlay .app-container .app-list div').bind('click', function(){
382
			_this.appClicked($('img', this).attr('src'), ($(this).attr('data-type') == 'download'));
383
		});
384
	}
385
	
386
	this.randOrd = function(){
387
		return (Math.round(Math.random())-0.5); 
388
	} 
389
	
390
	this.displayMusic = function(){
391
		this.hideAll();
392
		var songsContents = '';
393
		var albumsContents = '';
394
		fileList = _parent.fileSystem.getFiles();
395
		for(var i = 0; i < fileList.length; i++){
396
			if(fileList[i].type() == 'audio'){
397
				songsContents += this.getDisplayIcon(fileList[i], i);
398
			}
399
		}
400
		$('#systemOverlay #display-find-music .songs .app-list').html(songsContents);
401
		$('#systemOverlay #display-find-music .albums  .app-list').html(albumsContents);
402
		$('#systemOverlay #display-home').hide();
403
		$('#systemOverlay #display-find-music').show();
404
		$('#systemOverlay .app-container .app-list div').bind('mouseover', function(){
405
			$('img',this).addClass('hover');
406
		});
407
		$('#systemOverlay .app-container .app-list div').bind('mouseout', function(){
408
			$('img',this).removeClass('hover');
409
		});
410
		$('#systemOverlay .app-container .app-list div').bind('click', function(){
411
			_this.appClicked($('img', this).attr('src'), ($(this).attr('data-type') == 'download'));
412
		});
413
	}
414
	
415
	this.displayVideo = function(){
416
		this.hideAll();
417
		var videosContents = '';
418
		fileList = _parent.fileSystem.getFiles();
419
		for(var i = 0; i < fileList.length; i++){
420
			if(fileList[i].type() == 'video'){
421
				videosContents += this.getDisplayIcon(fileList[i], i);
422
			}
423
		}
424
		$('#systemOverlay #display-find-video .videos .app-list').html(videosContents);
425
		$('#systemOverlay #display-home').hide();
426
		$('#systemOverlay #display-find-video').show();
427
		$('#systemOverlay .app-container .app-list div').bind('mouseover', function(){
428
			$('img',this).addClass('hover');
429
		});
430
		$('#systemOverlay .app-container .app-list div').bind('mouseout', function(){
431
			$('img',this).removeClass('hover');
432
		});
433
		$('#systemOverlay .app-container .app-list div').bind('click', function(){
434
			_this.fileClicked($(this).attr('data-id'));
435
		});
436
	}
437
	
438
	this.displayFindApps = function(){
439
		this.hideAll();
440
		var listFilesContents = '';
441
		var listFolderContents = '';
442
		fileList = _parent.fileSystem.getFiles();
443
		for(var i = 0; i < fileList.length; i++){
444
			if(fileList[i].type() == 'folder'){
445
				listFolderContents += this.getDisplayIcon(fileList[i], i);
446
			}else{
447
				listFilesContents += this.getDisplayIcon(fileList[i], i);
448
			}
449
		}
450
		$('#systemOverlay #display-find-files .folders .app-list').html(listFolderContents);
451
		$('#systemOverlay #display-find-files .files .app-list').html(listFilesContents);
452
		$('#systemOverlay #display-home').hide();
453
		$('#systemOverlay #display-find-files').show();
454
		$('#systemOverlay .app-container .app-list div').bind('mouseover', function(){
455
			$('img',this).addClass('hover');
456
		});
457
		$('#systemOverlay .app-container .app-list div').bind('mouseout', function(){
458
			$('img',this).removeClass('hover');
459
		});
460
		$('#systemOverlay .app-container .app-list div').bind('click', function(){
461
			_this.fileClicked($(this).attr('data-id'));
462
		});
463
	}
464
	
465
	this.fileClicked = function($fileID){
466
		var fileObject = fileList[$fileID];
467
		switch(fileObject.type()){
468
			case 'folder':
469
				_this.closeOverlay();
470
				_parent.fileSystem.reset(!_parent.fileSystem.isMinified());
471
				_parent.fileSystem.updateDir(fileObject.location()+'/'+fileObject.name());
472
				_parent.fileSystem.open();
473
			break;
474
			case 'photo':
475
				_this.closeOverlay();
476
				_parent.shotwellSystem.selectImage(fileObject.id());
477
			  	_parent.shotwellSystem.open();
478
			break;
479
			case 'video':
480
				_this.closeOverlay();
481
			  	_parent.moviePlayerSystem.open();
482
			  	_parent.moviePlayerSystem.addVideo();
483
			break;
484
			default:
485
				_this.closeOverlay();
486
				_parent.errorMessage.open();
487
			break;
488
		}
489
	}
490
	
491
	this.appClicked = function($appName, $download){
492
		_this.closeOverlay();
493
		var appName = $appName.substring($appName.lastIndexOf('/')+1, $appName.length - 4);
494
		if($download){
495
			appName = appName.replace('logo-','');
496
			if(appName == 'world-of-goo'){ appName = 'worldofgoo'; }
497
			_parent.softwareSystem.open(appName);
498
		}else{
499
			switch(appName){
500
				case 'shotwell':
501
					_parent.systemMenu.handleMenuClick('shotwell');
502
				break;
503
				case 'thunderbird':
504
					_parent.systemMenu.handleMenuClick('email');
505
				break;
506
				case 'firefox':
507
					_parent.systemMenu.handleMenuClick('firefox');
508
				break;
509
				case 'movieplayer':
510
					_parent.moviePlayerSystem.open();
511
				break;
512
				default:
513
					_parent.errorMessage.open();
514
				break;
515
			}
516
		}
517
		
518
	}
519
	
520
	this.reset = function(){
521
		$('#systemOverlay input').val(_search_);
522
		$('#systemOverlay input').css('font-style', 'italic');
523
		$('#systemOverlay input').css('color', '#666');
524
		this.hideAll();
525
		$('#systemOverlay #display-home').show();
526
		$('#systemOverlay #dash-bottom-bar .bottom-wrapper div').removeClass('active');
527
		$('#systemOverlay #dash-bottom-bar .bottom-wrapper .home-icon').addClass('active');
528
	}
529
	
530
	this.hide = function(){
531
		_parent.unblurWindows();
532
		$('#systemOverlay').hide();
533
		_this.reset();
534
	}
535
	
536
	this.openOverlay = function(){
537
		$('#top').addClass('dashOpen');
538
		$('#menu').addClass('dashOpen');
539
		$('#top').removeClass('dropShadow');
540
		menu_open = true;
541
		this.reset();
542
		this.displayHome();
543
		$('#top #top-button-bg').addClass('open');
544
		$('#systemOverlay').fadeTo(300, 1, _parent.blurWindows);
545
		$('#systemOverlay input').focus();
546
	}
547
	
548
	this.closeOverlay = function(){
549
		$('#top').removeClass('dashOpen');
550
		$('#menu').removeClass('dashOpen');
551
		$('#top').addClass('dropShadow');
552
		menu_open = false;
553
		$('#top #top-button-bg').removeClass('open');
554
		$('#systemOverlay').fadeTo(300, 0, function(){
555
			_this.hide();
556
		});
557
		 $('#systemOverlay .app-container .app-list div').unbind('mouseover');
558
		 $('#systemOverlay .app-container .app-list div').unbind('mouseout');
559
		 $('#systemOverlay .app-container .app-list div').unbind('click');
560
	}
561
	
562
	this.resize = function(){
563
		//var shortcutsHalfWidth = $('#systemOverlay #shortcuts #shortcut-contents').width() / 2;
564
		//var appsLeft = ($(document).width() / 2) - shortcutsHalfWidth - 70;
565
		//$('#systemOverlay #shortcuts #shortcut-contents').css('left',appsLeft);
566
		$('#systemOverlay  .bottom-wrapper').css('left',($('#dash-bottom-bar').width() / 2) - ($('#dash-bottom-bar .bottom-wrapper').width() / 2));
567
		//$('#systemOverlay  .bottom-wrapper').css('left',appsLeft + shortcutsHalfWidth);
568
		$('#systemOverlay').css('height',$(document).height() - 50);
569
	}
570
}