2 * Copyright (c) 2012, Intel Corporation.
4 * This program is licensed under the terms and conditions of the
5 * Apache License, version 2.0. The full text of the Apache License is at
6 * http://www.apache.org/licenses/LICENSE-2.0
10 var phoneNumberTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center", "textBaseline" : "middle",
11 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 32, "shadowColor" : "rgba(0,100,150, 0.6)"};
13 var incomingTextTemplate = {"font" : "bold 80pt Arial", "fillStyle" : "white", "textAlign" : "center", "textBaseline" : "middle",
14 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
16 var callTimeTextTemplate = {"font" : "bold 30pt Arial", "fillStyle" : "white", "textAlign" : "left", "textBaseline" : "top",
17 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
19 var callTimeTextTemplate = {"font" : "bold 40px Arial", "fillStyle" : "white", "textAlign" : "left", "textBaseline" : "top",
20 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
27 function updateNumber(number)
29 currentNumber = number;
31 if (number.length === 10)
33 number = number.slice(0,3) + '-' + number.slice(3,6) + '-' + number.slice(6,10);
36 callPage.getObj("displayedNumber").text = number;
39 function updateCallStateText(newState)
42 var callStateTextObj = callPage.getObj("callStateText")
43 callStateTextObj.text = newState;
48 callStateTextObj.fillStyle = "white";
49 callStateTextObj.strokeStyle = "#00ADFF";
50 callStateTextObj.shadowColor = "#00ADFF";
52 case "Incoming Call..." :
53 callStateTextObj.fillStyle = "white";
54 callStateTextObj.strokeStyle = "#FF8C00";
55 callStateTextObj.lineWidth = 1;
56 callStateTextObj.shadowColor = "#FF8C00";
59 callStateTextObj.fillStyle = "white";
60 callStateTextObj.strokeStyle = "green";
61 callStateTextObj.lineWidth = 1;
62 callStateTextObj.shadowColor = "rgba(0,200,0,0.7)";
66 callStateTextObj.shadowBlur = 30;
71 var today = new Date();
72 startTime = today.getTime();
75 clearInterval(timerInterval);
77 timerInterval = setInterval( function() {
78 var today = new Date();
79 var currentTime = today.getTime();
80 callTime = Math.floor((currentTime - startTime) / 1000);
82 var hours = Math.floor(callTime / 3600);
83 callTime -= hours * 3600;
84 var mins = Math.floor(callTime / 60);
85 var secs = callTime - (mins * 60) < 10 ? "0" + (callTime - (mins * 60)).toString() : (callTime - (mins * 60)).toString();
87 hours = hours > 10 ? hours : "0" + hours.toString();
88 mins = mins > 10 ? mins : "0" + mins.toString();
90 callPage.getObj("callTime").text = hours + ":" + mins + ":" + secs;
97 clearInterval(timerInterval);
98 timerInterval = undefined;
103 function initButtons(initState)
105 var incomingBar = callPage.getObj("incomingBar");
107 if (initState == "dialing" || initState == "activeCall")
108 var buttonWidth = screenWidth * 0.6;
110 var buttonWidth = (screenWidth * 0.8) / 2;
112 var buttonHeight = screenHeight * 0.15;
116 if (initState == "dialing" || initState == "activeCall")
118 endCallButton = callPage.addObject(callCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.2,
119 "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "zLoc" : 3, "width" : buttonWidth, "height" : buttonHeight} );
121 callPage.getObj("acceptCallButton").visible = false;
125 acceptCallButton = callPage.addObject(callCtx, "button", {"name" : "acceptCallButton", "image": images.incomingAcceptButton, "icon": images.callIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.1,
126 "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "zLoc" : 3, "width" : buttonWidth, "height" : buttonHeight, "visible" : true} );
128 endCallButton = callPage.addObject(callCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100,
129 "xLoc" : acceptCallButton.xLoc + acceptCallButton.width + 20, "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "zLoc" : 3, "width" : buttonWidth, "height" : buttonHeight} );
131 acceptCallButton.onClick = function(){
133 console.log("Accepting call")
136 console.log("Failed to accept call");
139 currentState = "activeCall";
140 initButtons("activeCall");
147 endCallButton.onClick = function(){
152 console.log("Attempting to hangup a non-active call");
154 currentState = "idle";
160 function initCallPage(initState)
163 var incomingBar = callPage.addObject(callCtx, "shape", {"name" : "incomingBar", "xLoc" : -20, "yLoc" : screenHeight * 0.2, "width" : screenWidth + 40,
164 "height" : screenHeight * 0.6, "fillStyle" : "#51504F", "strokeStyle" : "#B3BF3C", "lineWidth" : 5});
166 var displayedNumber = callPage.addObject(callCtx, "text", {"name" : "displayedNumber", "xLoc" : screenWidth / 2, "yLoc" : incomingBar.yLoc + incomingBar.height * 0.4, "width" : screenWidth * 0.75,
167 "height" : screenHeight * 0.4, "text" : currentNumber, "template" : incomingTextTemplate});
169 var clockIcon = callPage.addObject(callCtx, "image", {"name" : "clock", "image": images.clockIcon, "xLoc" : screenWidth * 0.7,
170 "yLoc" : incomingBar.yLoc + 30, "width" : 50, "height" : 50} );
172 var callStateText = callPage.addObject(callCtx, "text", {"name" : "callStateText", "xLoc" : 15, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2,
173 "height" : 100, "text" : stateText, "template" : callTimeTextTemplate});
175 var callTime = callPage.addObject(callCtx, "text", {"name" : "callTime", "xLoc" : clockIcon.xLoc + clockIcon.width + 10, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2,
176 "height" : 100, "text" : "00:00:00", "template" : callTimeTextTemplate});
178 initButtons(initState);
181 function animateIncoming()
183 currentPage = callPage;
184 $(callCanvas).css('left', screenWidth + "px");
185 $(callCanvas).css('top', "0px");
186 $(callCanvas).css('opacity', 1.0);
187 //switchMenu(callPage);
190 //$(callCanvas).animate({left: "0px" }, 800, 'swing');
191 $(mainCanvas).animate({opacity: 0.0 }, {duration: 600});
192 $(buttonCanvas).animate({opacity: 0.0 }, {duration: 600});
193 $(callCanvas).animate({left: "0px" }, {duration: 800, easing : 'swing'});
196 function animateDialing()
198 currentPage = callPage;
199 $(callCanvas).css('left', "-" + screenWidth + "px");
200 $(callCanvas).css('top', "0px");
201 $(callCanvas).css('opacity', 1.0);
204 $(mainCanvas).animate({opacity: 0.0 }, {duration: 600});
205 $(buttonCanvas).animate({opacity: 0.0 }, {duration: 600});
206 $(callCanvas).animate({left: "0px" }, {duration: 800, easing : 'swing'});
209 function animateFinished()
211 currentPage = mainPage;
212 //$(callCanvas).css('left', screenWidth + "px"); , "opacity": 0.25
213 //$(callCanvas).css('top', "0px");
214 //$(callCanvas).animate({top: "200px", opacity: 0.0}, 1000, 'swing', function(){switchMenu(mainPage);});
215 //switchMenu(mainPage);
216 $(mainCanvas).animate({opacity: 1.0 }, {duration: 1000});
218 $(buttonCanvas).animate({opacity: 1.0 }, {duration: 1000});
219 $(callCanvas).animate({top: "500px", opacity: 0.0}, {duration : 1000, easing : 'swing', complete : function(){$(callCanvas).css('top', "0px");}});
221 //$(callCanvas).animate({"top": "2000px"}, 800, 'swing');