// Global vars
var baseURLImages = 'http://www.field15.com/media/images/';
var systemMessages = new Array();
var messageTimeout;
function sysMsg(msg) {
/* This what actually gets called by the interface programmer to display the
message. the systemMessages arrary holds a queue of all the messages
waiting to be displayed. If there are currently no messages in the queue,
then the new messages is pushed in at index 0 and displayed; otherwise,
the new message is added to the end of the queue and it will displayed
when it's turn comes up.
*/
if (msg) {
systemMessages.length++;
var index = systemMessages.length - 1;
systemMessages[index] = msg;
if (systemMessages.length == 1) {
displayMsg();
}
}
}
function displayMsg() {
/* This is where the message is actually displayed. This function grabs
whatever message is next in the queue (systemMessages[0]) and then it
displays the message and sets nextMsg() to run in 1.5 seconds.
*/
// Get the browser dimensions (IE and Netscape-based browsers do this differently)
var x = 0;
var y = 0;
if (navigator.appName.indexOf('Internet Explorer') != -1) {
x = (document.body.clientWidth / 2) - 450;
y = (document.body.clientHeight / 2) - 275;
var IEVersion = parseFloat(navigator.appVersion.split('MSIE')[1]);
if (IEVersion == 5) {
if (document.body.scrollTop) {
y += document.body.scrollTop;
}
}
else if (IEVersion == 6) {
if (document.documentElement.scrollTop) {
y += document.documentElement.scrollTop;
}
}
else {
// IE7+
y = (document.documentElement.clientHeight / 2) - 275;
if (document.documentElement.scrollTop) {
y += document.documentElement.scrollTop;
}
}
}
else {
x = (window.innerWidth / 2) - 450;
y = (window.innerHeight / 2) - 275;
if (document.body.scrollTop) {
y += document.body.scrollTop;
}
}
// Display the message
var object = document.getElementById('messages');
object.style.left = x;
object.style.top = y;
document.getElementById('msgContent').innerHTML = systemMessages[0];
var ieHack = document.getElementById('messages_ie_hack');
ieHack.style.left = x;
ieHack.style.top = y;
ieHack.style.visibility = 'visible';
object.style.visibility = 'visible';
}
function nextMsg() {
/* This function kills the currently displayed message and updates the
queue. If any messages are left in the queue after the update, then
displayMsg() is called again to display the next message.
*/
clearTimeout(messageTimeout);
var object = document.getElementById('messages');
object.style.visibility = 'hidden';
var ieHack = document.getElementById('messages_ie_hack');
ieHack.style.visibility = 'hidden';
for (var i = 0; i <= systemMessages.length - 1; i++) {
systemMessages[i] = systemMessages[i + 1];
}
systemMessages.length--;
if (systemMessages.length > 0) {
displayMsg();
}
}
function grayOut(vis, options) {
/* Create a screen layer to "gray out" the main page content while the
system msessage is being displayed. Options is a JSON object with the
following possible values:
opacity: 0-100
zindex: #
bgcolor: (#xxxxxx)
*/
var options = options || {};
var zindex = options.zindex || 50;
var opacity = options.opacity || 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark = document.getElementById('darkenScreenObject');
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div');
tnode.style.position = 'absolute';
tnode.style.top = '0px';
tnode.style.left = '0px';
tnode.style.overflow = 'hidden';
tnode.style.display = 'none';
tnode.id = 'darkenScreenObject';
tbody.appendChild(tnode);
dark = document.getElementById('darkenScreenObject');
}
if (vis) {
// Calculate the page width and height
if (document.body && (document.body.scrollWidth || document.body.scrollHeight)) {
var pageWidth = document.body.scrollWidth + 'px';
var pageHeight = document.body.scrollHeight + 'px';
}
else if (document.body.offsetWidth) {
var pageWidth = document.body.offsetWidth + 'px';
var pageHeight = document.body.offsetHeight + 'px';
}
else {
var pageWidth = '100%';
var pageHeight = '100%';
}
//set the shader to cover the entire page and make it visible.
dark.style.opacity = opaque;
dark.style.MozOpacity = opaque;
dark.style.filter='alpha(opacity = '+opacity+')';
dark.style.zIndex = zindex;
dark.style.backgroundColor = bgcolor;
dark.style.width = pageWidth;
dark.style.height = pageHeight;
dark.style.display ='block';
}
else {
dark.style.display = 'none';
}
}
function portfolio(contentID) {
/* Given an ID that matches some hidden div in the page using the portfolio
library, display the contents of that div as this page in the portfolio.
*/
grayOut(true,{'opacity':'25'})
// Determine how many elements are in this gallery
var galleryElements = 1;
while (document.getElementById('portfolio' + galleryElements)) {
galleryElements++;
}
galleryElements -= 1;
// Create the back link
var lastContentID = (contentID > 1) ? contentID - 1 : galleryElements;
var content = '';
// Create the next link
var nextContentID = (contentID < galleryElements) ? contentID + 1 : 1;
content += '
';
// Add the portfolio content
content += document.getElementById('portfolio' + contentID).innerHTML;
content += '
';
// Display the portfolio
sysMsg(content);
}
function changePortfolio(contentID) {
/* Undisplay the current portfolio page and display the newly requeste don. */
nextMsg();
portfolio(contentID);
}
function closePortfolio() {
/* Close the portfolio screen and turn the grayout off. */
nextMsg();
grayOut(false);
}
