<html>
<head>
<script type="text/javascript" src="../js/Bind.js"></script>
<script type="text/javascript" src="../js/ActionButton.js"></script>
<script type="text/javascript">
function loadToMainWindow(url){
window.pageController.currentLoad(url);
}
function newStyle(style){
//alert("New Style: " + style);
var styleLink = document.getElementById("CSSLink");
//alert (styleLink);
styleLink.href = style;
window.chrome.toggleVisibility("SettingsChromeId");
}
var topBar = false;
function topToggle()
{
if(topBar){
window.chrome.toggleVisibility("TopChromeId");
}
else {
window.chrome.setAnchor("TopChromeId", "AnchorTop");
window.chrome.show("TopChromeId", 0,0);
topBar = true;
}
}
var settingsPopUp = false;
function toggleSettings()
{
if(settingsPopUp){
window.chrome.toggleVisibility("SettingsChromeId");
}
else {
window.chrome.show("SettingsChromeId", 10,120);
window.chrome.setAnchor("SettingsChromeId", "AnchorCenter");
settingsPopUp = true;
}
}
function onLoad() {
settingsPopUp = false;
// Load the emergency backup page.
loadToMainWindow("chrome/demochrome/static.html");
// Now load the real starting page.
loadToMainWindow("http://www.google.com");
window.chrome.setAnchor("TopChromeId", "AnchorTop");
window.chrome.setVisibilityAnimator("TopChromeId", "G_VISIBILITY_FADE_ANIMATOR");
window.chrome.setAnchor("BottomChromeId","AnchorBottom");
window.chrome.setVisibilityAnimator("BottomChromeId", "G_VISIBILITY_FADE_ANIMATOR");
// Attach buttons to the underlying QActions.
new ActionButton("backButton",
"images/backArrow.png",
"images/backArrowDown.png",
"images/backArrowDisabled.png",
window.pageController.actions.back);
new ActionButton("forwardButton",
"images/forwardArrow.png",
"images/forwardArrowDown.png",
"images/forwardArrowDisabled.png",
window.pageController.actions.forward);
new ActionButton("stopButton",
"images/stop.png",
"images/stopDown.png",
"images/stopDisabled.png",
window.pageController.actions.stop);
new ActionButton("reloadButton",
"images/reload.png",
"images/reloadDown.png",
"images/reloadDisabled.png",
window.pageController.actions.reload);
new ActionButton("zoomInButton",
"images/zoomIn.png",
"images/zoomInDown.png",
"images/zoomInDisabled.png",
window.webView.actions.zoomIn);
new ActionButton("zoomOutButton",
"images/zoomOut.png",
"images/zoomOutDown.png",
"images/zoomOutDisabled.png",
window.webView.actions.zoomOut);
}
var pageInfoShowing = false;
function flipPageInfo() {
if(!pageInfoShowing){
document.getElementById("pageInfo_UrlId").value = window.viewManager.pageController.currentDocUrl;
document.getElementById("pageInfo_TitleId").value = window.viewManager.pageController.currentDocTitle;
window.chrome.flipFromCurrentView("PageInfoId");
pageInfoShowing = true;
} else {
window.chrome.flipToCurrentView("PageInfoId");
pageInfoShowing = false;
}
}
function showGoAnywhere() {
window.viewManager.showContent("goAnywhereView");
window.viewManager.goAnywhereView.setPosition(40, 40);
window.viewManager.goAnywhereView.done.connect(
function() {
window.viewManager.showContent("webView");
}
);
}
function chromeSelect(){
var p = document.getElementsByName("ChromeSelection");
for(i = 0; i < p.length; i ++){
if(p[i].checked == true){
return p[i].value;
}
}
}
function styleSelect() {
var p = document.getElementsByName("StyleSelection");
for(i = 0; i < p.length; i ++){
if(p[i].checked == true){
return p[i].value;
}
}
}
function HTML5Tests(){
var p = document.getElementsByClassName("TopChrome");
for(i = 0; i < p.length; i ++){
alert (p[i].getAttribute("data-Ginebra.Anchor"));
}
}
function showHistory() {
window.viewManager.showContent("historyView");
// window.viewManager.historyView.setPosition(40, 40);
window.chrome.hide("TopChromeId");
window.chrome.hide("BottomChromeId");
//topToggle();
//bottomToggle();
window.viewManager.historyView.done.connect(
function() {
window.chrome.show("TopChromeId");
window.chrome.show("BottomChromeId");
window.viewManager.showContent("webView");
// window.viewManager.webView.setPosition(0, 0);
//topToggle();
//bottomToggle();
}
);
}
// This function is for highlighting text in the go to entry
function selectAll(el)
{
el.select();
}
window.pageController.loadStarted.connect(
function() {
document.getElementById("PBar").style.width = "0%";
//topToggle();
}
);
window.pageController.loadProgress.connect(
function(percent) {
var parentWidth = document.getElementById("PBarWrapper").offsetWidth;
document.getElementById("PBar").style.width = (parentWidth * percent)/100 + "px";
}
);
window.pageController.loadFinished.connect(
function(ok) {
document.getElementById("PBar").style.width = "0%";
//topToggle();
}
);
window.pageController.networkRequestError.connect(
function(reply) {
window.chrome.alert("onNetworkRequestError: " + reply.error());
}
);
window.pageController.titleChanged.connect(
function(title) {
// TBD
}
);
window.pageController.partialUrlChanged.connect(
function(partialUrl) {
document.getElementById("urlBox").value = partialUrl;
}
);
window.chrome.onDisplayModeChanged.connect(
function(orientation){
window.chrome.alert("onDisplayModeChanged: " + orientation);
}
);
window.chrome.loadComplete.connect(
function(){
window.chrome.alert("loadComplete");
onLoad();
}
);
</script>
<link rel="stylesheet" id = "CSSLink" type="text/css" href="css/chromeStyleBlack.css" />
</head>
<body>
<div class ="InitialChrome">
<div class = "GinebraSnippet" id="TopChromeId" name="TopChrome"
data-GinebraAnchor = "AnchorTop" data-GinebraVisible = "true"
style="width:100%">
<form name = "gotoUrlForm" style="width: 100%">
<span id="PBarWrapper" class="ProgressBarWrapper" style="position: absolute; top: 3px; left:4px; height:20px">
<span id="PBar" class="ProgressBar" style="position:absolute; left: 1px; height: 18px;">
</span>
<input type ="text"
class = "Text"
id = "urlBox"
name = "textBox"
style = "position: absolute; width: 260px; height: 16px"
value="http://www.google.com/"/>
</span>
<span style="position: absolute; left: 270px; display: inline">
<input type = "button" class="Button" value="Go" style="display: inline"
onclick="loadToMainWindow(document.gotoUrlForm.textBox.value)"/>
<!--img src="images/stop.png" align="center" style="width: 18px" class="ButtonImage" onclick="window.webView.stop()"/-->
<input type = "button" class="Button" value="Min" style="display: inline"
onclick = "window.chrome.toggleVisibility('TopChromeId');window.chrome.toggleVisibility('BottomChromeId')"/>
</span>
</form>
</div>
<div class = "GinebraSnippet" id="BottomChromeId" name="BottomChrome" data-GinebraAnchor="AnchorBottom" data-ginebraVisible="true">
<span class="ButtonRow" style="width:100%">
<img id="backButton" src="images/backArrow.png" align="center"
style="width: 18px" class="ButtonImage"/>
<img id="forwardButton" src="images/forwardArrow.png" align="center"
style="width: 18px" class="ButtonImage"/>
<img id="stopButton" src="images/stop.png" align="center"
style="width: 18px" class="ButtonImage"/>
<img id="reloadButton" src="images/reload.png" align="center"
style="width: 20px" class="ButtonImage"
<img id="zoomInButton" src="images/zoomIn.png" align="center"
style="width: 20px" class="ButtonImage"/>
<img id="zoomOutButton" src="images/zoomOut.png" align="center"
style="width: 20px" class="ButtonImage"/>
<img src="images/history.png" align="center" class="ButtonImage" onclick="showHistory()"/>
<img src="images/info.png" align="center" style="width: 20px" class="ButtonImage" onclick="flipPageInfo()"/>
<img src="images/star.png" align="center" style="width: 20px" class="ButtonImage" onclick="showGoAnywhere()"/>
<img src="images/wrench_icon.jpg" align="center" class="ButtonImage" onclick="toggleSettings()"/>
<img src="images/red_sox_logo.png" align="center" class="ButtonImage" onclick="window.chrome.loadChrome('chrome/boston-chrome.html');"/>
</div>
<div class = "GinebraSnippet PageInfo" id="PageInfoId">
<div class = "PageInfoInner">
<form>
Title: <input id="pageInfo_TitleId" type="text"></br>
URL: <input id="pageInfo_UrlId" type="text"></br>
Text Language: <input id="language" type="text"></br>
</form>
<div align="right" style="margin-right: 20px">
<input type = "button" class="Button" value="OK" onclick="flipPageInfo()"/>
</div>
</div>
</div>
<div class = "PopChrome" id="SettingsChromeId">
<h3>Chrome settings</h3>
<hr/>
Chrome:
<br/>
Simple
<input type ="radio"
checked = "checked"
name = "ChromeSelection"
value="chrome.html"/>
<button type="button" class="Button" onclick="window.chrome.loadChrome('chrome/' + chromeSelect());">Update</button>
<br/>
Veggie
<input type ="radio"
name = "ChromeSelection"
value="veggie-chrome.html"/>
<hr/>
Style:
<br/>
Simple
<input type ="radio"
name = "StyleSelection"
value="chromeStyleFlat.css"/>
<button type="button" class="Button" onclick="newStyle('css/' + styleSelect());">Update</button>
<br/>
Curved
<input type ="radio"
checked = "checked"
name = "StyleSelection"
value="chromeStyleBlack.css"/>
<br/>
</div>
</body>
</html>