/********************************************************************
FileName: CanvasHomeDisplay.js
FileRelation: CanvasObjects.js, CanvasHomeDisplay.xml
Author: Allen Chen
Created On: 2/25/2011
Update On: 3/7/2011 [Allen] fix browser compatibility error
4/7/2011 [Allen] Make chrome show flash
Description: Parse CanvasHomeDisplay.xml : refer to CanvasHomeDisplay.xml for XML
Displays images, clickable texts, clickable tabs
Technology: HTML5 Canvas
Used by: AnimalNetwork
Parameter: XML
How to Use:
********************************************************************/
//slideMatrix -- Main datastructure : Defined by CavansHomeDisplay.xml
// slideMatrix[0] = TabX
// slideMatrix[1] = TabY
// slideMatrix[2] = SelectedTab
// slideMatrix[3 to (length - 2)] = slideObjecs
// slideObjects has (backColor, titleArray, imageArray)
// slideMatrix[(length - 1)] = canvasTabArray
var slideMatrix;
var selectedTab;
var context, canvas;
var objCanvasDrawTab; //Declare to use events
var objCanvasDrawText; //Declare to use events
var objCanvasDrawImage; //Declare to use events
var index, redirectURL, imageRedirectURL;
window.onload = function Main() {
canvas = document.getElementById("myCanvas");
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (canvas.getContext && !is_chrome) { //Checking browser support for canvas'
context = canvas.getContext("2d");
LoadXML();
selectedTab = slideMatrix[2]; //Initial Tab
Draw();
}
else if (is_chrome) {
document.getElementById("divFlash").setAttribute("style", "display:block;");
document.getElementById("divCanvas").innerHTML = "";
}
}
function Draw() {
var cursor = selectedTab + 3;
var tabX = slideMatrix[0];
var tabY = slideMatrix[1];
for (i = 0; i < slideMatrix[cursor].imageArray.length; i++) {
if (!slideMatrix[cursor].imageArray[i].image.complete) {
setTimeout("Draw()", 10);
return;
}
}
objCanvasDrawImage = new CanvasDrawImage(slideMatrix[cursor].imageArray, slideMatrix[cursor].backcolor);
objCanvasDrawText = new CanvasDrawTitle(slideMatrix[cursor].titleArray);
objCanvasDrawTab = new CanvasDrawTab(slideMatrix[slideMatrix.length - 1], tabX, tabY, selectedTab);
}
function LoadXML() {
if (window.XMLHttpRequest) {
xmlReq = new XMLHttpRequest();
}
else {
xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlReq.open("GET", "CanvasHomeDisplay.xml", false);
xmlReq.send();
xmlDoc = xmlReq.responseXML;
ReadXML(xmlDoc);
}
function ReadXML(xmlDoc) {
slideMatrix = new Array();
var canvasTabArray = new Array();
slideMatrix.push(parseInt(xmlDoc.getElementsByTagName("TABX")[0].childNodes[0].nodeValue));
slideMatrix.push(parseInt(xmlDoc.getElementsByTagName("TABY")[0].childNodes[0].nodeValue));
slideMatrix.push(parseInt(xmlDoc.getElementsByTagName("SELECTEDTAB")[0].childNodes[0].nodeValue));
var xmlSlides = xmlDoc.getElementsByTagName("SLIDE");
for (i = 0; i < xmlSlides.length; i++) {
var background = xmlSlides[i].getElementsByTagName("BACKGROUND")[0].childNodes[0].nodeValue;
//Parsing
var canvasImageArray = new Array();
var xmlImages = xmlSlides[i].getElementsByTagName("IMAGE");
for (f = 0; f < xmlImages.length; f++) {
var src, x, y, w, h, r, bw, bc, sx, sy, url;
var img = new Image();
src = xmlImages[f].getElementsByTagName("SRC")[0].childNodes[0].nodeValue;
img.src = src;
x = parseInt(xmlImages[f].getElementsByTagName("X")[0].childNodes[0].nodeValue);
y = parseInt(xmlImages[f].getElementsByTagName("Y")[0].childNodes[0].nodeValue);
w = parseInt(xmlImages[f].getElementsByTagName("WIDTH")[0].childNodes[0].nodeValue);
h = parseInt(xmlImages[f].getElementsByTagName("HEIGHT")[0].childNodes[0].nodeValue);
r = parseFloat(xmlImages[f].getElementsByTagName("ROTATEDEGREE")[0].childNodes[0].nodeValue);
bw = parseInt(xmlImages[f].getElementsByTagName("BORDERWIDTH")[0].childNodes[0].nodeValue);
bc = xmlImages[f].getElementsByTagName("BORDERCOLOR")[0].childNodes[0].nodeValue;
sx = parseInt(xmlImages[f].getElementsByTagName("SHADOWOFFSETX")[0].childNodes[0].nodeValue);
sy = parseInt(xmlImages[f].getElementsByTagName("SHADOWOFFSETY")[0].childNodes[0].nodeValue);
url = xmlImages[f].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
var canvasImage = new CanvasImage(x, y, w, h, r, bw, bc, sx, sy, img, url);
canvasImageArray.push(canvasImage);
}
//Parsing
var xmlTabs = xmlSlides[i].getElementsByTagName("TAB");
for (x = 0; x < xmlTabs.length; x++) {
var title, font, color, tabColor, selectedColor, w, h, padding, spacing;
title = xmlTabs[x].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
font = xmlTabs[x].getElementsByTagName("FONT")[0].childNodes[0].nodeValue;
color = xmlTabs[x].getElementsByTagName("TEXTCOLOR")[0].childNodes[0].nodeValue;
tabColor = xmlTabs[x].getElementsByTagName("TABCOLOR")[0].childNodes[0].nodeValue;
selectedColor = xmlTabs[x].getElementsByTagName("TABSELECTEDCOLOR")[0].childNodes[0].nodeValue;
w = parseInt(xmlTabs[x].getElementsByTagName("TABWIDTH")[0].childNodes[0].nodeValue);
h = parseInt(xmlTabs[x].getElementsByTagName("TABHEIGHT")[0].childNodes[0].nodeValue);
padding = parseInt(xmlTabs[x].getElementsByTagName("TABPADDING")[0].childNodes[0].nodeValue);
spacing = parseInt(xmlTabs[x].getElementsByTagName("TABSPACING")[0].childNodes[0].nodeValue);
var canvasTab = new CanvasTab(title, font, color, tabColor, selectedColor, w, h, padding, spacing);
canvasTabArray.push(canvasTab);
}
//Parsing
var canvasTitleArray = new Array();
var xmlTitles = xmlSlides[i].getElementsByTagName("CAPTION");
for (z = 0; z < xmlTitles.length; z++) {
var title, x, y, font, color, url, h;
title = xmlTitles[z].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
x = parseInt(xmlTitles[z].getElementsByTagName("X")[0].childNodes[0].nodeValue);
y = parseInt(xmlTitles[z].getElementsByTagName("Y")[0].childNodes[0].nodeValue);
font = xmlTitles[z].getElementsByTagName("FONT")[0].childNodes[0].nodeValue;
color = xmlTitles[z].getElementsByTagName("COLOR")[0].childNodes[0].nodeValue;
url = xmlTitles[z].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
h = parseInt(xmlTitles[z].getElementsByTagName("TEXTHEIGHT")[0].childNodes[0].nodeValue);
var canvasTitle = new CanvasTitle(x, y, title, font, color, url, h);
canvasTitleArray.push(canvasTitle);
}
slideMatrix.push({ backcolor: background, titleArray: canvasTitleArray, imageArray: canvasImageArray });
}
slideMatrix.push(canvasTabArray);
}
function MouseClickHandler(e) {
mouseX = PageX(e) - canvas.offsetLeft;
mouseY = PageY(e) - canvas.offsetTop;
//isPointInTab returns TabIndex or -1
//index = objCanvasDrawTab.isPointInTab(mouseX, mouseY); //already set in MouseOverCursor(e)
if (index != selectedTab && index != -1) {
selectedTab = index;
context.clearRect(0, 0, canvas.width, canvas.height);
Draw();
return;
}
//redirect if Text clicked has an URL defined
//redirectURL = objCanvasDrawText.isPointInText(mouseX, mouseY); //already set in MouseOverCursor(e)
if (redirectURL != null){
window.open(redirectURL, "newWindow", "toolbar=1, location=1, menubar=1, directories=1, resizable=1, scrollbars=1");
}
//redirect if Image is clicked and has an URL defined
//imageRedirectURL = objCanvasDrawImage.isPointInImage(mouseX, mouseY); //already set in MouseOverCursor(e)
if (imageRedirectURL != null) {
window.open(imageRedirectURL, "newWindow", "toolbar=1, location=1, menubar=1, directories=1, resizable=1, scrollbars=1");
}
}
function MouseOverCursor(e) {
mouseX = PageX(e) - canvas.offsetLeft;
mouseY = PageY(e) - canvas.offsetTop;
//DebugMouseCoord(e);
e.target.style.cursor = ""; //Reset cursor
index = objCanvasDrawTab.isPointInTab(mouseX, mouseY);
if (index != -1) {
Cursor(e);
return;
}
redirectURL = objCanvasDrawText.isPointInText(mouseX, mouseY);
if (redirectURL != null) {
Cursor(e);
return;
}
imageRedirectURL = objCanvasDrawImage.isPointInImage(mouseX, mouseY);
if (imageRedirectURL != null) {
Cursor(e);
return;
}
}
function Cursor(e) {
if (navigator.appName == "Microsoft Internet Explorer") e.target.style.cursor = "pointer";
else e.target.style.cursor = "hand";
}
//Method can be used to debug mouse coordinates
function DebugMouseCoord(e) {
mouseX = PageX(e) - canvas.offsetLeft;
mouseY = PageY(e) - canvas.offsetTop;
var div = document.getElementById("divCoord");
if (document.getElementById("divCoord") == null) {
div = document.createElement("div");
div.setAttribute("id", "divCoord");
document.body.appendChild(div);
}
div.innerHTML = "X : " + mouseX + " Y : " + mouseY;
}
function PageX(e) {
//Determine X Coordinate relative to page.
//Netscape, Firefox, Opera
if (e.pageX) return e.pageX;
else if (e.clientX)
return e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft // > IE 6
: document.body.scrollLeft); // < IE 6
else return null;
}
function PageY(e) {
//Determine Y Coordinate relative to page.
//Netscape, Firefox, Opera
if (e.pageY) return e.pageY;
else if (e.clientY)
return e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop // > IE 6
: document.body.scrollTop); // < IE 6
else return null;
}