1 /**
  2                 @name  UIWidgets.ZUI
  3                 @class  Class to render HTML UI
  4 **/
  5 ZUI = Class.extend({
  6     //constructor
  7     clearTools: false,
  8     clearToolsUpdate: null,
  9     uid: null,
 10     init: function(params) {
 11         this.attributes = params;
 12 	this.attributes["forceFlash"]=GeneralUtils.getURLParameter("forceFlash");
 13         this.frameId = this.attributes["uiParent"].replace(/#/g, '') + "_inner";
 14         this.title = "";
 15         if (this.attributes["podTitle"]) {
 16             this.title = '<div class="zwrtc_pod_title" id="' + this.frameId + '_title">' + this.attributes["podTitle"] + '</div>';
 17         }
 18 
 19         if (this.attributes["widget"] == "phone") {
 20             this.phone();
 21         } else if (this.attributes["widget"] == "pod") {
 22             this.pod();
 23         }
 24 	this.zui_resize();
 25     },
 26     pod: function() {
 27         var that = this; // this stops the window object being "this" in zui_resize
 28         $(this.attributes["uiParent"]).resize(function() {
 29             that.zui_resize_pod();
 30         });
 31         $(document).delegate(this.attributes["uiParent"] + ' .ui-resizable-handle', 'mousedown', function() {
 32         //    if (!that.resizing)
 33         //        that.zui_start_resize_pod(true);
 34         });
 35         $(document).delegate(this.attributes["uiParent"] + ' .ui-resizable-handle', 'mouseout', function() {
 36             setTimeout(function() {
 37          //       if (!that.resizing)
 38           //          that.zui_stop_resize_pod(true);
 39             }, 400);
 40         });
 41   	$(this.attributes["uiParent"]).html(this.title+'<iframe id="' + this.frameId + '" name="' + this.frameId + '" src="/zapp_loader_multiple.jsp?id=' + this.frameId + '_&zapp_names=' + this.attributes["zapp_names"] + '&tab_name=' + this.attributes["tab_name"] + '&includeShadowbox=true"   frameborder="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
 42         if (that.attributes["draggable"])
 43             $(that.attributes["uiParent"]).draggable( {
 44                 start: function(){that.zui_start_resize_pod()},
 45                 stop: function(){that.zui_stop_resize_pod()}
 46             });
 47         that.zui_resize_pod();
 48         if (this.attributes["resizable"]) {
 49             $(this.attributes["uiParent"]).resizable({
 50                 handles: 'n,s,e,w,ne,nw,se,sw',
 51                 animate: false,
 52                 start: function(){that.zui_start_resize_pod()},
 53                 stop: function(){that.zui_stop_resize_pod()}
 54             });
 55 	}
 56     },
 57     zui_start_resize_pod: function(skip_set) {
 58         if (!skip_set) this.resizing = true;
 59  	$("#" + this.frameId).css('z-index', '-1');
 60  	$("#" + this.frameId).css('position', 'relative');
 61  	$(this.attributes["uiParent"]).css('z-index', '100');
 62     },
 63     zui_stop_resize_pod: function(skip_set) {
 64         this.resizing = false;
 65  	$("#" + this.frameId).css('z-index', '0');
 66  	$(this.attributes["uiParent"]).css('z-index', '1');
 67     },
 68     zui_resize_pod: function() {
 69         if (this.fullScreenStatus()) return;
 70         var uiParent = this.attributes["uiParent"];
 71         var winW = $(uiParent).width();
 72         var winH = $(uiParent).height();
 73         var titleH = 0;
 74         if ($("#" + this.frameId + "_title").length>0)
 75                 titleH = $("#" + this.frameId + "_title").outerHeight();
 76 
 77         $("#" + this.frameId).height(winH - titleH);
 78         $("#" + this.frameId).width(winW);
 79     },
 80     phone: function() {
 81         var that = this; // this stops the window object being "this" in zui_resize
 82         that.uid = "Z" + (new Date()).getTime() + "Z" + (CallManager.ZUID++);
 83         eval("window." + that.uid + "=that;");
 84         $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function() {
 85             that.updateView(that.fullScreenStatus());
 86         });
 87         $(this.attributes["uiParent"]).resize(function() {
 88             that.zui_resize()
 89         });
 90         CallManager.addListener(CallManager.Event.SET_LV, this, function() {
 91             that.zui_resize();
 92         });
 93         CallManager.addListener(CallManager.Event.TIME_ELAPSED, this, function(event) {
 94             $("#zwrtc_txtCallDuration").html(event.time);
 95         });
 96         var controls = "";
 97         if (this.attributes["showControls"]) {
 98             controls = '<div id="zwrtc_controls_outer"><div id="zwrtc_controls" style="display:none;"  class="zwrtc_av_controls"> <a id="zwrtc_end"  style="display:none;" onclick="window.' + that.uid + '.hangUp()" title="end call" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_hangup32.png"/></a><a id="zwrtc_end_dis"   onclick="" title="end call" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_dis" src="/user/images/sdk_hangup32.png"/></a> <a id="micmute" onclick="window.' + that.uid + '.mute()" title="mute mic" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_microphone_on32.png"/></a> <a id="micunmute"  onclick="window.' + that.uid + '.unmute()" style="display:none;" title="enable mic" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_pressed" src="/user/images/sdk_microphone_on32.png"/></a> <a id="cammute"  onclick="window.' + that.uid + '.cammute()" title="stop camera" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_webcam_on32.png"/></a> <a id="camunmute" style="display:none;"  onclick="window.' + that.uid + '.camunmute()" title="start camera" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_pressed" src="/user/images/sdk_webcam_on32.png"/></a> <a id="fullscreen" onclick="window.' + that.uid + '.fs()" title="full screen" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_fullscreen32.png"/></a> <a id="restore" style="display:none;"  onclick="window.' + that.uid + '.unfs()" title="exit fullscreen" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_pressed" src="/user/images/sdk_fullscreen32.png"/></a> </div></div>';
 99         }
100         var timer = "";
101         if (this.attributes["showTimer"] && !CallManager._flashEnabled) {
102             timer = '<span id="zwrtc_txtCallDuration" class="zwrtc_call_duration_span"></span>';
103         }
104         var status = "";
105         if (this.attributes["showStatus"] && !CallManager._flashEnabled) {
106             status = '<div id="zwrtc_status" class="zwrtc_av_display"><span class="zwrtc_av_display_p" id="zwrtc_txtCallStatus"></span></div>';
107         }
108         $(this.attributes["uiParent"]).html(this.title+'<div id="zwrtc_av" class="zwrtc_av_container"><div id="sp_flash_container" style="display:none;"  class="fp_allow_deny"><div id="sp_flash"><br><br><H3>For video calling you need the Adobe Flash Player.<br/><br/><a href="http://www.adobe.com/go/getflash" target="new">Get Adobe Flash</a></H3></div></div><audio id="audio_remote" autoplay="true" ></audio> <video class="video"  id="zwrtc_video_local"  autoplay="true" muted="true"></video> ' + status + timer + '<video class="video" id="zwrtc_video_remote" style="display:none;" autoplay="true" ></video></div>' + controls);
109 
110         $("#zwrtc_video_local").mousemove(function() {
111             that.showTools();
112             that.clearToolsTrigger();
113         });
114         $("#zwrtc_video_remote").mousemove(function() {
115             that.showTools();
116             that.clearToolsTrigger();
117         });
118         $("#zwrtc_controls").mouseenter(function() {
119             that.showTools();
120             that.clearTools = false;
121         });
122         $("#zwrtc_controls").mouseleave(function() {
123             that.clearToolsTrigger();
124         });
125         CallManager.addListener(CallManager.Event.CONNECTED, this, function(event) {
126             $("#zwrtc_end").show();
127             $("#zwrtc_end_dis").hide();
128 	    setTimeout(function(){
129             that.clearToolsTrigger();
130 		},3000);
131         });
132         CallManager.addListener(CallManager.Event.INIT, this, function(event) {
133             if (!CallManager.isEstablished())
134                 that.setDisplay("Initializing");
135         });
136         CallManager.addListener(CallManager.Event.RINGING, this, function(event) {
137             that.setDisplay("Ringing");
138         });
139         CallManager.addListener(CallManager.Event.CONNECTING, this, function(event) {
140             that.setDisplay("Connecting");
141         });
142         CallManager.addListener(CallManager.Event.RECONNECTING, this, function(event) {
143             $("#zwrtc_video_remote").hide();
144         });
145         CallManager.addListener(CallManager.Event.CONNECTED, this, function(event) {
146             if (!CallManager.isEstablished())
147                 that.setDisplay("Connected");
148             else
149                 that.clearDisplay(1);
150             that.callConnected();
151         });
152 
153         CallManager.addListener(CallManager.Event.ENDED, this, function(event) {
154 		that.displayMSG=true;
155 		$("#sp_flash_container").hide();
156 		that.setDisplay("Call Ended");
157         });
158 
159         ConnectionManager.addListener(ConnectionManager.Event.LOGIN_FAILED, this, function(event) {
160             that.setDisplay("Authentication Failed");
161         });
162 
163         ConnectionManager.addListener('ZWRTC_MEDIA_ACCESS_FAILED', this, function(event) {
164             that.setDisplay("Failed To Access Camera & Mic");
165         });
166 
167 	ConnectionManager.addListener('FLASH_RV_MOUSE_OVER', this, function(event) {
168 		that.showTools();
169 		that.clearToolsTrigger();
170 	});
171 
172 	ConnectionManager.addListener('FLASH_RV_MOUSE_OUT', this, function(event) {
173 		that.clearToolsTrigger();
174 	});
175 
176         ConnectionManager.addListener('ZWRTC_MEDIA_ACCESS_GRANTED', this, function(event) {
177 		//moved draggable here as flash was not getting mouse event, so no allow/deny
178 		if (CallManager._flashEnabled) {
179 			that.displayMSG=false;
180 		}
181 		if (that.attributes["draggable"]){
182 			var nv=navigator.appVersion;
183 			if(CallManager._flashEnabled && that.attributes["podTitle"] && nv && nv.indexOf("Safari")!=-1){
184 				$(that.attributes["uiParent"]).draggable({handle:$("#"+that.frameId+"_title")[0]});
185 			}else{
186 				$(that.attributes["uiParent"]).draggable();
187 			}
188 		}
189 		$("body").removeClass("zwrtc_avalert");	
190 		that.setDisplay("Ready");
191 		that.showTools();
192 		that.clearToolsTrigger();
193 		that.zui_resize();
194         });
195 
196         window.onbeforeunload = function() {
197             CallManager.onUnload();
198             that.hangUp();
199         }
200         if (this.attributes["allowDeny"]) {
201             $("body").addClass("zwrtc_avalert")
202             that.checkAVInterval = setInterval(that.checkAV, 400);
203         }
204         if (this.attributes["resizable"])
205             $(this.attributes["uiParent"]).resizable({
206                 handles: 'n,s,e,w,ne,nw,se,sw'
207             });
208 
209     },
210     hideTools: function() {
211         if (!$("#zwrtc_controls").is(":visible")) return;
212         $("#zwrtc_controls").fadeOut("xslow");
213         $("#zwrtc_txtCallDuration").fadeOut("xslow");
214     },
215     showTools: function() {
216         //if  ($("#zwrtc_controls").is(":visible"))  return;
217 	if (!CallManager._flashEnabled){
218 		$("#zwrtc_controls").fadeIn();
219 		$("#zwrtc_txtCallDuration").fadeIn();
220 	}
221 	this.zui_resize();
222     },
223     clearToolsTrigger: function() {
224         var that = this;
225         that.clearTools = true;
226         var update = (new Date()).getTime();
227         that.clearToolsUpdate = update;
228         setTimeout(function() {
229             if (that.clearTools && that.clearToolsUpdate == update)
230                 that.hideTools();
231         }, 1500);
232     },
233     fullScreenStatus: function() {
234         return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
235     },
236     setAttribute: function(name, value) {
237         this.attributes[name] = value || "";
238         return this;
239     },
240     zui_resize: function() {
241         if (this.fullScreenStatus()) return;
242         var uiParent = this.attributes["uiParent"];
243         var winW = $(uiParent).width();
244         var winH = $(uiParent).height();
245         var titleH = 0;
246         if ($("#" + this.frameId + "_title").length>0)
247                 titleH = $("#" + this.frameId + "_title").outerHeight();
248 
249         winH=winH-titleH;
250         var winWMargin = 0;
251         var winHMargin = 0;
252         var vW = winW - winWMargin;
253         var vH = winH - winHMargin;
254         var zW = CallManager._videoWidth;
255         var zH = CallManager._videoHeight;
256         if (zW < 0) {
257             zW = 640;
258             zH = 480;
259         }
260         var arS = vW / vH;
261         var arR = zW / zH;
262         // using A:R which will be  limiting factor?
263         // assume height
264         zH = vH;
265         zW = zH * arR;
266         if (zW > vW) {
267             zW = vW;
268             zH = vW / arR;
269         }
270         var marginLeft = winWMargin / 2 + (vW - zW) / 2;
271         var marginRight = 10;
272         if (!CallManager.isEstablished())
273             $("#zwrtc_video_local").width(zW);
274         $("#zwrtc_video_remote").width(zW);
275         $("#zwrtc_video_remote").height(zH);
276         $("#zwrtc_video_remote").css("margin-left", marginLeft + "px");
277 
278 	if(zW>zH){
279 		$("#sp_flash_container").height(zH);
280 	}else{
281 		$("#sp_flash_container").width(zW);
282 	}
283         $("#sp_flash_container").css("margin-left", marginLeft + "px");
284 
285         $("#zwrtc_video_local").css("margin-left", marginLeft + "px");
286         $("#zwrtc_status").css("margin-left", marginLeft + "px");
287         $(".zwrtc_call_duration_span").css("margin-right", (marginLeft + marginRight) + "px");
288         $(".zwrtc_toolbar_img").css("padding",(zW/40)+"px");
289 	if ($("#zwrtc_controls").is(":visible")) {
290 		if(CallManager._flashEnabled){
291 			$("#zwrtc_controls_outer").css("top", "12px");
292 			$("#fullscreen").hide();
293 		}else{
294 			$("#zwrtc_controls_outer").css("top", -1 * (titleH+12+($("#zwrtc_controls").height()))+ "px");
295 		}
296         	$("#zwrtc_controls_outer").css("margin-left", -1 * ($("#zwrtc_controls").width()/2)+ "px");
297 	}
298 
299         this.setLV(CallManager._selfX, CallManager._selfY, CallManager._selfWidth, CallManager._selfHeight, CallManager._videoWidth, CallManager._videoHeight);
300     },
301     applySizeStyles: function() {
302     },
303     setLV: function(lx, ly, lw, lh, rw, rh) {
304 	if (CallManager._flashEnabled) {
305             ConnectionManager._dispatchEvent("FLASH_SET_LV", {
306                 "lx": lx,
307                 "ly": ly,
308                 "lw": lw,
309                 "lh": lh,
310 		"vw": rw,
311 		"vh": rh
312             });
313             return;
314         }
315         if (!$("#zwrtc_video_remote").is(":visible")) return;
316         var i = $('#zwrtc_video_remote').width();
317 	//lx=-1;
318         if (lx < 0) {
319             $('#zwrtc_video_local').css("left", "auto");
320             $('#zwrtc_video_local').css("top", "auto");
321             $("#zwrtc_video_local").css("margin-left", "0px");
322             $('#zwrtc_video_local').addClass("zwrtc_mini_lv");
323 	    var lvw=i/5;
324 	    var lvh=lvw/(rw/rh);
325             $('#zwrtc_video_local').css("width", lvw+"px");
326             $('#zwrtc_video_local').css("height", lvh+"px");
327         } else {
328             var j = $('#zwrtc_video_remote').height();
329             var x = Math.ceil((lx * i) / rw);
330             var y = Math.ceil((ly * j) / rh);
331             var w = Math.ceil((lw * i) / rw);
332             var h = Math.ceil((lh * j) / rh);
333             $('#zwrtc_video_local').removeClass("zwrtc_mini_lv");
334             $('#zwrtc_video_local').css("width", w + "px");
335             $('#zwrtc_video_local').css("height", h + "px");
336             $('#zwrtc_video_local').css("position", "absolute");
337             $('#zwrtc_video_local').css("left", x + "px");
338             $('#zwrtc_video_local').css("top", y + "px");
339             var rv_ml = $("#zwrtc_video_remote").css("margin-left").replace(/[^-\d\.]/g, '');
340             if (this.fullScreenStatus()) {
341                 var ml = (screen.width - $("#zwrtc_video_remote").width()) / 2;
342                 $("#zwrtc_video_local").css("margin-left", ml + "px");
343             } else if (rv_ml > -1) {
344                 $("#zwrtc_video_local").css("margin-left", rv_ml + "px");
345             }
346         }
347     },
348     updateView: function(fullScreen) {
349         if (!fullScreen) {
350             this.goFullScreen(false);
351             $("#zwrtc_av").addClass("zwrtc_av_container");
352             $("#fullscreen").show();
353             $("#restore").hide();
354         } else {
355             $("#zwrtc_av").removeClass("zwrtc_av_container");
356             $("#zwrtc_av")[0].width = screen.width;
357             $("#zwrtc_av")[0].height = screen.height;
358             $("#zwrtc_video_remote").css("margin-left", "0px");
359             $("#zwrtc_video_local").css("margin-left", "0px");
360             if (screen.width > screen.height) {
361                 var ht = screen.height;
362                 var wd = ht * zwrtc.cam_width / zwrtc.cam_height;
363                 $("#zwrtc_video_remote")[0].style.width = wd;
364                 $("#zwrtc_video_remote")[0].style.height = ht;
365             } else {
366                 var wd = screen.width;
367                 var ht = wd * zwrtc.cam_height / zwrtc.cam_width;
368                 $("#zwrtc_video_remote")[0].style.width = wd;
369                 $("#zwrtc_video_remote")[0].style.height = ht;
370             }
371             this.setLV(CallManager._selfX, CallManager._selfY, CallManager._selfWidth, CallManager._selfHeight, CallManager._videoWidth, CallManager._videoHeight);
372         }
373     },
374     goFullScreen: function(fs_) {
375         var that = this;
376         if (fs_) {
377             this.setLV(-1, -1, -1, -1);
378             zwrtc.requestFullScreen($("#zwrtc_av")[0]);
379             setTimeout(function() {
380                 that.setLV(CallManager._selfX, CallManager._selfY, CallManager._selfWidth, CallManager._selfHeight, CallManager._videoWidth, CallManager._videoHeight);
381             }, 1000);
382         } else {
383             that.zui_resize();
384             setTimeout(function() {
385                 that.zui_resize();
386             }, 1000);
387         }
388     },
389     getAttribute: function(name) {
390         return this.attributes[name];
391     },
392     mute: function() {
393         $("#micmute").hide();
394         $("#micunmute").show();
395         zwrtc.toggleAudioMute();
396     },
397     unmute: function() {
398         $("#micmute").show();
399         $("#micunmute").hide();
400         zwrtc.toggleAudioMute();
401     },
402     cammute: function() {
403         $("#cammute").hide();
404         $("#zwrtc_video_local").hide();
405         $("#camunmute").show();
406         zwrtc.toggleVideoMute();
407     },
408     camunmute: function() {
409         $("#zwrtc_video_local").show();
410         $("#cammute").show();
411         $("#camunmute").hide();
412         zwrtc.toggleVideoMute();
413     },
414     spkmute: function() {
415         $("#spkmute").hide();
416         $("#spkunmute").show();
417         zwrtc.toggleSpkMute();
418     },
419     spkunmute: function() {
420         $("#spkmute").show();
421         $("#spkunmute").hide();
422         zwrtc.toggleSpkMute();
423     },
424     fs: function() {
425         $("#fullscreen").hide();
426         $("#restore").show();
427         this.goFullScreen(true);
428     },
429     unfs: function() {
430         this.goFullScreen(false);
431     },
432     callConnected: function(evt) {
433         this.startRV();
434         $("#end").show();
435         this.clearDisplay(3000);
436     },
437     startRV: function() {
438         if ($("#zwrtc_video_remote").is(":visible")) return;
439 	if(!CallManager._flashEnabled){
440 	        $("#zwrtc_video_remote").show();
441         	$("#zwrtc_video_local").show();
442 	        $("#zwrtc_controls").show();
443         	//if (this.attributes["video"]) {
444 	         //   $("#zwrtc_video_local").addClass("zwrtc_mini_lv");
445         //	}
446 	}
447         this.zui_resize();
448     },
449     clearDisplay: function(fadeout) {
450         setTimeout(function() {
451             if (CallManager._flashEnabled) {
452                 CallManager.onStatusMsg("");
453             } else {
454                 $("#zwrtc_txtCallStatus").html("");
455                 $("#zwrtc_status").hide();
456             }
457         }, fadeout);
458     },
459     setDisplay: function(msg) {
460         if (!this.displayMSG && CallManager._flashEnabled) {
461             $("#zwrtc_status").hide();
462             CallManager.onStatusMsg(msg);
463         } else {
464             $("#zwrtc_txtCallStatus").html(msg);
465             $("#zwrtc_status").show();
466         }
467     },
468     hangUp: function(is_error) {
469         $("#zwrtc_video_remote").hide();
470         $('#zwrtc_video_local').hide();
471         $('#zwrtc_controls').hide();
472         this.setDisplay("Call Ended");
473         CallManager.endCall();
474     },
475     clearCall: function(reason) {
476         this.hangUp();
477     },
478     checkAV: function() {
479         if ($("body").hasClass("zwrtc_avalert")) {
480             if ($("body").hasClass("zwrtc_avalert1")) {
481                 $("body").addClass("zwrtc_avalert2");
482                 $("body").removeClass("zwrtc_avalert1");
483             } else {
484                 $("body").addClass("zwrtc_avalert1");
485                 $("body").removeClass("zwrtc_avalert2");
486             }
487         } else {
488             $("body").removeClass("zwrtc_avalert1");
489             $("body").removeClass("zwrtc_avalert2");
490             clearInterval(this.checkAVInterval);
491         }
492     },
493     getLV: function() {
494         return $("#zwrtc_video_local")[0];
495     },
496     getRV: function() {
497         var remoteVideoArray = [];
498         remoteVideoArray.push($("#zwrtc_video_remote")[0]);
499         return remoteVideoArray;
500     },
501     getAudio: function() {
502         return $("#audio_remote")[0];
503     },
504     output: function() {}
505 });
506