// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
//
// ************************
// layer utility routines *
// ************************

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
		//Message('styleObject');
	styleObject.visibility = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
} // changeObjectVisibility

function changeObjectOpacity(objectId, newOpacity) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
    styleObject.opacity = newOpacity; 
    styleObject.display = '';
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
} // changeObjectVisibility



function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.left = newXCoordinate;
	styleObject.top = newYCoordinate;
	return true;
    } else {
	// we couldn't find the object, so we can't very well move it
	return false;
    }
} // moveObject


// TRANSITIONS

//////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////

var fadeInFnTimer = 0;
var fadeOutFnTimer = 0;

function transitions() {

    // Go through all tags in the document
    obj = document.getElementsByTagName('*');
    for (i = 0; i < obj.length; i++) {

        // If fadeIn attribute exists in a tag...
        if (obj[i].getAttribute('fadeIn')) {

            // Get transitions seconds and calculate opacity increment
            secs = obj[i].getAttribute('fadeIn');
            incOpacity = 10 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionFadeIn' + i;

            // Start fadeInFn transition for this object
            fadeInFn(obj[i].id, incOpacity);
        }

        // If fadeOut attribute exists in a tag...
        if (obj[i].getAttribute('fadeOut')) {

            // Get transitions seconds and calculate opacity increment
            secs = obj[i].getAttribute('fadeOut');
            incOpacity = 10 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionFadeOut' + i;

            // Start fadeOutFn transition for this object
            fadeOutFn(obj[i].id, incOpacity);
        }

        // If swipeDown attribute exists in a tag...
        if (obj[i].getAttribute('swipeDown')) {

            // Get transitions seconds and calculate swipe increment
            secs = obj[i].getAttribute('swipeDown');
            inc = 30 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionSwipeDown' + i;

            // Start swipeDownFn transition for this object
            swipeDownFn(obj[i].id, inc);
        }

        // If swipeUp attribute exists in a tag...
        if (obj[i].getAttribute('swipeUp')) {

            // Get transitions seconds and calculate swipe increment
            secs = obj[i].getAttribute('swipeUp');
            inc = 30 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionSwipeUp' + i;

            // Start swipeUpFn transition for this object
            swipeUpFn(obj[i].id, inc);
        }

        // If swipeLeft attribute exists in a tag...
        if (obj[i].getAttribute('swipeLeft')) {

            // Get transitions seconds and calculate swipe increment
            secs = obj[i].getAttribute('swipeLeft');
            inc = 30 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionSwipeLeft' + i;

            // Start swipeUpFn transition for this object
            swipeLeftFn(obj[i].id, inc);
        }

        // If swipeRight attribute exists in a tag...
        if (obj[i].getAttribute('swipeRight')) {

            // Get transitions seconds and calculate swipe increment
            secs = obj[i].getAttribute('swipeRight');
            inc = 30 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionSwipeRight' + i;

            // Start swipeUpFn transition for this object
            swipeRightFn(obj[i].id, inc);
        }

        // If scrollLeft attribute exists in a tag...
        if (obj[i].getAttribute('scrollLeft')) {

            // Get transitions seconds and calculate scroll increment
            secs = obj[i].getAttribute('scrollLeft');
            inc = 60 / secs;

            // If object does not have an ID value - then give it one
            if (!obj[i].id) obj[i].id = 'transitionScrollLeft' + i;

            // Start scrollLeftFn transition for this object
            scrollLeftFn(obj[i].id, inc);
        }



    }

}

function crossFade(objId1, objId2) {
    window.clearTimeout(fadeOutFnTimer);
    fadeOutFn(objId1);

    window.clearTimeout(fadeInFnTimer);
    fadeInFn(objId2);
}


//////////////////////////////////////////////////////////////////////////////////////////
// fadeInFn
//		Note: When used as an attribute in a tag it is called fadeIn
//
//		A transition effect that fades in an object by changing it's opacity
//		from 0% to 100%.
//
//		It can be used as an attribute in a html tag (ex: <div fadeIn=2...>) to fade 
//		in that element when the page loads - OR it can be used in as a function 
//		in an onclick condition to fade itself, or any other element on the page
//		(ex: <div onlick="fadeInFn();"..> or <div onclick="fadeInFn('otherId');"..>)
//
//  @param   objId - Id of object to fade in. - *optional* defaults to current    
//  @param   incOpacity -  amount to increament opacity - *optional* defaults to 10  
//  @param   currOpacity - Initial opacitiy to set object to  - *optional* defaults to 0 
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function fadeInFn(objId, incOpacity, currOpacity) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : fadeInFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Set default value for opacity increment if it is undefined
    if (typeof incOpacity == 'undefined') incOpacity = 10;

    // Set default value for current opacity if it is undefined
    if (typeof currOpacity == 'undefined') currOpacity = 0;

    // Get object and set opacity
    var obj = document.getElementById(objId);
    obj.style.filter = "alpha(opacity=" + currOpacity + ")"; // IE
    obj.style.opacity = currOpacity / 100; // Firefox, etc..
    obj.style.display = '';

    // Increase Opacity and keep calling fadeIn until you go above 100
    currOpacity += incOpacity;
    if (currOpacity <= 100) {
        cmd = "fadeInFn('" + objId + "'," + incOpacity + "," + currOpacity + ")";
        fadeInFnTimer = setTimeout(cmd, 50);
    } else {
        // Make sure 100% visible
        obj.style.filter = "alpha(opacity=100)"; // IE
        obj.style.opacity = 1; // Firefox, etc..
        window.clearTimeout(fadeInFnTimer);
    }
}


//////////////////////////////////////////////////////////////////////////////////////////
// fadeOutFn
//		Note: When used as an attribute in a tag it is called fadeOut
//
//		A transition effect that fades out an object by changing its opacity
//		from 100% to 0%.
//
//		It can be used as an attribute in a html tag (ex: <div fadeOut=2...>) to fade 
//		out that element when the page loads - OR it can be used in as a function 
//		in an onclick condition to fade itself, or any other element on the page
//		(ex: <div onlick="fadeOutFn();"..> or <div onclick="fadeOutFn('otherId');"..>)
//
//  @param   objId - Id of object to fade in. - *optional* defaults to current    
//  @param   incOpacity -  amount to decreament opacity - *optional* defaults to 10  
//  @param   currOpacity - Initial opacitiy to set object to  - *optional* defaults to 100 
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function fadeOutFn(objId, incOpacity, currOpacity) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : fadeOutFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object  
    var obj = document.getElementById(objId);
	
    // Set default value for opacity increment if it is undefined
    if (typeof incOpacity == 'undefined') incOpacity = 10;

    // the default value for current opacity if it is undefined, is whatever the current value happens to be
    if (typeof currOpacity == 'undefined') currOpacity = obj.style.opacity;
	
	// set opacity
	
    obj.style.filter = "alpha(opacity=" + currOpacity + ")"; // IE
    obj.style.opacity = currOpacity / 100; // Firefox, etc..
    obj.style.display = '';

    // Decrease Opacity and keep calling fadeOutFn until you go below 0
    currOpacity -= incOpacity;
    if (currOpacity > 0) {
        cmd = "fadeOutFn('" + objId + "'," + incOpacity + "," + currOpacity + ")";
        fadeOutFnTimer = setTimeout(cmd, 50);
    } else {
        // Make sure 0% visible
        obj.style.filter = "alpha(opacity=0)"; // IE
        obj.style.opacity = 0; // Firefox, etc..
        window.clearTimeout(fadeOutFnTimer);
    }
}



//////////////////////////////////////////////////////////////////////////////////////////
// swipeDownFn
//		Note: When used as an attribute in a tag it is called swipeDown
//
//		A transition effect that swipes down an object from top to bottom
//
//		It can be used as an attribute in a html tag (ex: <div swipeDown=2...>) to swipe 
//		down that element when the page loads - OR it can be used in as a function 
//		in an onclick condition to swipe itself down, or any other element on the page
//		(ex: <div onlick="swipeDownFn();"..> or <div onclick="swipeDownFn('otherId');"..>)
//
//  @param   objId - Id of object to swipe down. - *optional* defaults to current    
//  @param   inc -  amount to increament swipe  - *optional* defaults to 10px
//  @param   clipTop - clip rectangle top  - *optional* defaults to objId's top position 
//  @param   clipRight - clip rectangle right  - *optional* defaults to objId's width 
//  @param   clipBottom - clip rectangle bottom - *optional* defaults to objId's top position 
//  @param   clipLeft - clip rectangle left - *optional* defaults to 0 
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function swipeDownFn(objId, inc, clipTop, clipRight, clipBottom, clipLeft) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : swipeDownFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object 
    var obj = document.getElementById(objId);

    // Object must have an absoulte position in order to use the clip style
    // If object is not using 'absolute' positioning then create a "Spacer" div - a div that will
    // occupy the space on the page which is lost when the object's position is turned to 'absolute'
    if (obj.style.position != 'absolute') createSpacerDiv(obj);

    // Set default value for increment if it is undefined
    if (typeof inc == 'undefined') inc = 10;

    // Set default values cliping rectangle if clipTop is undefined
    if (typeof clipTop == 'undefined') {

        // Note: Need to display object to get offsetHeight because if object is hidden
        // (display:none) offsetHeight returns 0. So use the cheap trick of setting
        // opacity low before displaying it so the user will not see a the object flicker
        var originalDisplay = obj.style.display;
        if (originalDisplay == "none") {
            obj.style.filter = "alpha(opacity=1)"; // IE
            obj.style.opacity = 0.01; // Firefox, etc..
            obj.style.display = '';
        }

        clipTop = 0;
        clipRight = obj.offsetWidth;
        clipBottom = 0;
        clipLeft = 0;

        // Restore display and make sure opacity is cranked back to 100% 
        if (originalDisplay == "none") {
            obj.style.display = originalDisplay;
            obj.style.filter = "alpha(opacity=100)"; // IE
            obj.style.opacity = 1; // Firefox, etc..
        }

    }

    // Set clipping rectangle
    obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
    obj.style.display = ''; // Make sure object is visible

    // Increament clipping bottom and keep calling swipeDownFn until it goes above objects real height
    clipBottom += inc;
    if (clipBottom < obj.offsetHeight) {
        cmd = "swipeDownFn('" + objId + "'," + inc + "," + clipTop + "," + clipRight + "," + clipBottom + "," + clipLeft + ")";
        timer = setTimeout(cmd, 50);
    } else {
        // Make sure clipping rectangle size shows whole object
        clipBottom = obj.offsetHeight;
        obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
        window.clearTimeout(timer);
    }
}


//////////////////////////////////////////////////////////////////////////////////////////
// swipeUpFn
//		Note: When used as an attribute in a tag it is called swipeUp
//
//		A transition effect that swipes up an object from bottom to top
//
//		It can be used as an attribute in a html tag (ex: <div swipeUp=2...>) to swipe 
//		up that element when the page loads - OR it can be used in as a function 
//		in an onclick condition to swipe itself up, or any other element on the page
//		(ex: <div onlick="swipeUpFn();"..> or <div onclick="swipeUpFn('otherId');"..>)
//
//  @param   objId - Id of object to swipe down. - *optional* defaults to current    
//  @param   inc -  amount to decreament swipe  - *optional* defaults to 10px
//  @param   clipTop - clip rectangle top - *optional* defaults to objId's height
//  @param   clipRight - clip rectangle right - *optional* defaults to objId's width  
//  @param   clipBottom - clip rectangle bottom - *optional* defaults to objId's height
//  @param   clipLeft - clip rectangle left - *optional* defaults to 0 
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function swipeUpFn(objId, inc, clipTop, clipRight, clipBottom, clipLeft) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : swipeUpFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object 
    var obj = document.getElementById(objId);

    // Object must have an absoulte position in order to use the clip style
    // If object is not using 'absolute' positioning then create a "Spacer" div - a div that will
    // occupy the space on the page which is lost when the object's position is turned to 'absolute'
    if (obj.style.position != 'absolute') createSpacerDiv(obj);

    // Set default value for increment if it is undefined
    if (typeof inc == 'undefined') inc = 10;

    // Set default values cliping rectangle if clipTop is undefined
    if (typeof clipTop == 'undefined') {

        // Note: Need to display object to get offsetHeight because if object is hidden
        // (display:none) offsetHeight returns 0. So use the cheap trick of setting
        // opacity low before displaying it so the user will not see a the object flicker
        var originalDisplay = obj.style.display;
        if (originalDisplay == "none") {
            obj.style.filter = "alpha(opacity=1)"; // IE
            obj.style.opacity = 0.01; // Firefox, etc..
            obj.style.display = '';
        }

        clipTop = obj.offsetHeight;
        clipRight = obj.offsetWidth;
        clipBottom = obj.offsetHeight;
        clipLeft = 0;

        // Restore display and make sure opacity is cranked back to 100% 
        if (originalDisplay == "none") {
            obj.style.display = originalDisplay;
            obj.style.filter = "alpha(opacity=100)"; // IE
            obj.style.opacity = 1; // Firefox, etc..
        }

    }

    // Set clipping rectangle
    obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
    obj.style.display = ''; // Make sure object is visible

    // Decreament clipping top and keep calling swipeUpFn until it gets to 
    clipTop -= inc;
    if (clipTop > 0) {
        cmd = "swipeUpFn('" + objId + "'," + inc + "," + clipTop + "," + clipRight + "," + clipBottom + "," + clipLeft + ")";
        timer = setTimeout(cmd, 50);
    } else {
        // Make sure clipping rectangle size shows whole object
        clipTop = 0;
        obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
        window.clearTimeout(timer);
    }
}

//////////////////////////////////////////////////////////////////////////////////////////
// swipeLeftFn
//		Note: When used as an attribute in a tag it is called swipeLeft
//
//		A transition effect that swipes up an object from right to left
//
//		It can be used as an attribute in a html tag (ex: <div swipeLeft=2...>) to swipe 
//		that element when the page loads - OR it can be used in as a function 
//		in an onclick condition to swipe itself, or any other element on the page
//		(ex: <div onlick="swipeLeftFn();"..> or <div onclick="swipeLeftFn('otherId');"..>)
//
//  @param   objId - Id of object to swipe down. - *optional* defaults to current    
//  @param   inc -  amount to decreament swipe  - *optional* defaults to 30px
//  @param   clipTop - clip rectangle top - *optional* defaults to 0
//  @param   clipRight - clip rectangle right - *optional* defaults to objId's width  
//  @param   clipBottom - clip rectangle bottom - *optional* defaults to objId's height
//  @param   clipLeft - clip rectangle left - *optional*defaults to objId's width
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function swipeLeftFn(objId, inc, clipTop, clipRight, clipBottom, clipLeft) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : swipeLeftFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object 
    var obj = document.getElementById(objId);

    // Object must have an absoulte position in order to use the clip style
    // If object is not using 'absolute' positioning then create a "Spacer" div - a div that will
    // occupy the space on the page which is lost when the object's position is turned to 'absolute'
    if (obj.style.position != 'absolute') createSpacerDiv(obj);

    // Set default value for increment if it is undefined
    if (typeof inc == 'undefined') inc = 30;

    // Set default values cliping rectangle if clipTop is undefined
    if (typeof clipTop == 'undefined') {

        // Note: Need to display object to get offsetHeight because if object is hidden
        // (display:none) offsetHeight returns 0. So use the cheap trick of setting
        // opacity low before displaying it so the user will not see a the object flicker
        var originalDisplay = obj.style.display;
        if (originalDisplay == "none") {
            obj.style.filter = "alpha(opacity=1)"; // IE
            obj.style.opacity = 0.01; // Firefox, etc..
            obj.style.display = '';
        }

        clipTop = 0;
        clipRight = obj.offsetWidth;
        clipBottom = obj.offsetHeight;
        clipLeft = obj.offsetWidth;

        // Restore display and make sure opacity is cranked back to 100% 
        if (originalDisplay == "none") {
            obj.style.display = originalDisplay;
            obj.style.filter = "alpha(opacity=100)"; // IE
            obj.style.opacity = 1; // Firefox, etc..
        }

    }

    // Set clipping rectangle
    obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
    obj.style.display = ''; // Make sure object is visible

    // Decreament clipping left and keep calling swipeLeftFn until it gets to 0
    clipLeft -= inc;
    if (clipLeft > 0) {
        cmd = "swipeLeftFn('" + objId + "'," + inc + "," + clipTop + "," + clipRight + "," + clipBottom + "," + clipLeft + ")";
        timer = setTimeout(cmd, 50);
    } else {
        // Make sure clipping rectangle size shows whole object
        clipLeft = 0;
        obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
        window.clearTimeout(timer);
    }
}


//////////////////////////////////////////////////////////////////////////////////////////
// swipeRightFn
//		Note: When used as an attribute in a tag it is called swipeRight
//
//		A transition effect that swipes up an object from left to right
//
//		It can be used as an attribute in a html tag (ex: <div swipeRight=2...>) to swipe 
//		that element when the page loads - OR it can be used in as a function 
//		in an onclick condition to swipe itself, or any other element on the page
//		(ex: <div onlick="swipeRightFn();"..> or <div onclick="swipeRightFn('otherId');"..>)
//
//  @param   objId - Id of object to swipe down. - *optional* defaults to current    
//  @param   inc -  amount to decreament swipe  - *optional* defaults to 30px
//  @param   clipTop - clip rectangle top - *optional* defaults to 0
//  @param   clipRight - clip rectangle right - *optional* defaults to 0 
//  @param   clipBottom - clip rectangle bottom - *optional* defaults to objId's height
//  @param   clipLeft - clip rectangle left - *optional* defaults to 0 
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function swipeRightFn(objId, inc, clipTop, clipRight, clipBottom, clipLeft) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : swipeRightFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object 
    var obj = document.getElementById(objId);

    // Object must have an absoulte position in order to use the clip style
    // If object is not using 'absolute' positioning then create a "Spacer" div - a div that will
    // occupy the space on the page which is lost when the object's position is turned to 'absolute'
    if (obj.style.position != 'absolute') createSpacerDiv(obj);

    // Set default value for increment if it is undefined
    if (typeof inc == 'undefined') inc = 30;

    // Set default values cliping rectangle if clipTop is undefined
    if (typeof clipTop == 'undefined') {

        // Note: Need to display object to get offsetHeight because if object is hidden
        // (display:none) offsetHeight returns 0. So use the cheap trick of setting
        // opacity low before displaying it so the user will not see a the object flicker
        var originalDisplay = obj.style.display;
        if (originalDisplay == "none") {
            obj.style.filter = "alpha(opacity=1)"; // IE
            obj.style.opacity = 0.01; // Firefox, etc..
            obj.style.display = '';
        }

        clipTop = 0;
        clipRight = 0;
        clipBottom = obj.offsetHeight;
        clipLeft = 0;

        // Restore display and make sure opacity is cranked back to 100% 
        if (originalDisplay == "none") {
            obj.style.display = originalDisplay;
            obj.style.filter = "alpha(opacity=100)"; // IE
            obj.style.opacity = 1; // Firefox, etc..
        }

    }

    // Set clipping rectangle
    obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
    obj.style.display = ''; // Make sure object is visible

    // Increament clipping right and keep calling swipeRightFn until it gets to objects width
    clipRight += inc;
    if (clipRight < obj.offsetWidth) {
        cmd = "swipeRightFn('" + objId + "'," + inc + "," + clipTop + "," + clipRight + "," + clipBottom + "," + clipLeft + ")";
        timer = setTimeout(cmd, 50);
    } else {
        // Make sure clipping rectangle size shows whole object
        clipLeft = 0;
        obj.style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px " + clipLeft + "px)";
        window.clearTimeout(timer);
    }
}


//////////////////////////////////////////////////////////////////////////////////////////
// scrollLeftFn
//		A transition effect that scrolls an object from right to left. Should work with 
//		any element on the page
//
//		No preperation needed - It can scroll itself, or any other element on the page
//		(ex: <div onlick="scrollLeftFn();"..> or <div onclick="scrollLeftFn('otherId');"..>)
//		
//  @param   objId - Id of object to swipe down. - *optional* defaults to current    
//  @param   inc -  amount to decreament swipe  - *optional* defaults to 60px
//  @param   posLeft - Left postion as it scrolls - used internally only. Don't pass in an initial value
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function scrollLeftFn(objId, inc, posLeft) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : scrollLeftFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object 
    var obj = document.getElementById(objId);

    // Set default value for increment if it is undefined
    if (typeof inc == 'undefined') inc = 60;

    // Create objects container and set default value for posLeft if it is undefined
    if (typeof posLeft == 'undefined') {

        // Note: Need to display object to get offsetHeight because if object is hidden
        // (display:none) offsetHeight returns 0. So use the cheap trick of setting
        // opacity low before displaying it so the user will not see a the object flicker
        var originalDisplay = obj.style.display;
        if (originalDisplay == "none") {
            obj.style.filter = "alpha(opacity=1)"; // IE
            obj.style.opacity = 0.01; // Firefox, etc..
            obj.style.display = '';
        }

        // If "scrollContainerId" div does not already exist then create it
        scrollContainerId = objId + "Container";
        var containerDiv = null;
        if (document.getElementById(scrollContainerId) == null) {

            // Get Objects position on page
            objPos = FindPosition(obj);
            var objHeight = obj.offsetHeight;
            var objWidth = obj.offsetWidth;

            // Set objects style width explicity to match its offsetWidth to prevent wrapping during scroll
            obj.style.width = objWidth + "px";

            // Object must have an absoulte position in order to be moved on screen
            // If object is not using 'absolute' positioning then create a "Spacer" div - a div that will
            // occupy the space on the page which is lost when the object's position is turned to 'absolute'
            if (obj.style.position != 'absolute') createSpacerDiv(obj);

            // Create Container Div that will be used to hide/clip 
            // the object as it scrolls across the screen
            containerDiv = document.createElement("div");
            document.body.appendChild(containerDiv);
            containerDiv.setAttribute("id", scrollContainerId);

            // Make container have same size and location as object
            containerDiv.style.position = "absolute";
            containerDiv.style.left = objPos[0] + "px";
            containerDiv.style.top = objPos[1] + "px";
            containerDiv.style.height = objHeight + "px";
            containerDiv.style.width = (2 + objWidth) + "px";
            containerDiv.style.border = "0";
            containerDiv.style.padding = "0";
            containerDiv.style.margin = "0";

            containerDiv.style.overflow = "hidden"

            // Append object to container as new parent
            containerDiv.appendChild(obj);


        } else {
            containerDiv = document.getElementById(scrollContainerId);
        }

        // Set objects initial left postion to be past right edge of its container
        posLeft = parseInt(containerDiv.style.width) + 10;

        // Restore display and make sure opacity is cranked back to 100% 
        if (originalDisplay == "none") {
            obj.style.display = originalDisplay;
            obj.style.filter = "alpha(opacity=100)"; // IE
            obj.style.opacity = 1; // Firefox, etc..
        }

    }

    // Move the object to the left
    obj.style.left = posLeft + "px";
    obj.style.display = ''; // Make sure object is visible

    // Decreament position and keep calling scrollLeftFn until it gets to left Destination
    posLeft -= inc;
    if (posLeft > 0) {
        cmd = "scrollLeftFn('" + objId + "'," + inc + "," + posLeft + ")";
        timer = setTimeout(cmd, 50);
    } else {
        // Make sure object is scrolled all the way left
        obj.style.left = "0px";
        window.clearTimeout(timer);
    }
}


//////////////////////////////////////////////////////////////////////////////////////////
// scrollRightFn
//		A transition effect that scrolls an object from left to right. Should work with 
//		any element on the page
//
//		No preperation needed - It can scroll itself, or any other element on the page
//		(ex: <div onlick="scrollRightFn();"..> or <div onclick="scrollRightFn('otherId');"..>)
//		
//  @param   objId - Id of object to swipe down. - *optional* defaults to current    
//  @param   inc -  amount to decreament swipe  - *optional* defaults to 60px
//  @param   posLeft - Left postion as it scrolls - used internally only. Don't pass in an initial value
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////

function scrollRightFn(objId, inc, posLeft) {

    // Set default value for objects Id if it is undefined 
    // (only happens if function called by an onclick event)
    if (typeof objId == 'undefined') {
        // Get object reference to element which triggered this event
        var event = (this.event) ? this.event : scrollRightFn.caller.arguments[0] || window.event;
        var obj = event.target ? event.target : event.srcElement;

        // If object does not have an ID value - then give it one
        var d = new Date();
        if (!obj.id) obj.id = 'obj' + d.getTime();

        objId = obj.id;
    }

    // Get object 
    var obj = document.getElementById(objId);

    // Set default value for increment if it is undefined
    if (typeof inc == 'undefined') inc = 60;

    // Create objects container and set default value for posLeft if it is undefined
    if (typeof posLeft == 'undefined') {

        // Note: Need to display object to get offsetHeight because if object is hidden
        // (display:none) offsetHeight returns 0. So use the cheap trick of setting
        // opacity low before displaying it so the user will not see a the object flicker
        var originalDisplay = obj.style.display;
        if (originalDisplay == "none") {
            obj.style.filter = "alpha(opacity=1)"; // IE
            obj.style.opacity = 0.01; // Firefox, etc..
            obj.style.display = '';
        }

        // If "scrollContainerId" div does not already exist then create it
        scrollContainerId = objId + "Container";
        var containerDiv = null;
        if (document.getElementById(scrollContainerId) == null) {

            // Get Objects position on page
            objPos = FindPosition(obj);
            var objHeight = obj.offsetHeight;
            var objWidth = obj.offsetWidth;

            // Set objects style width explicity to match its offsetWidth to prevent wrapping during scroll
            obj.style.width = objWidth + "px";

            // Object must have an absoulte position in order to be moved on screen
            // If object is not using 'absolute' positioning then create a "Spacer" div - a div that will
            // occupy the space on the page which is lost when the object's position is turned to 'absolute'
            if (obj.style.position != 'absolute') createSpacerDiv(obj);

            // Create Container Div that will be used to hide/clip 
            // the object as it scrolls across the screen
            containerDiv = document.createElement("div");
            document.body.appendChild(containerDiv);
            containerDiv.setAttribute("id", scrollContainerId);

            // Make container have same size and location as object
            containerDiv.style.position = "absolute";
            containerDiv.style.left = objPos[0] + "px";
            containerDiv.style.top = objPos[1] + "px";
            containerDiv.style.height = objHeight + "px";
            containerDiv.style.width = (2 + objWidth) + "px";
            containerDiv.style.border = "0";
            containerDiv.style.padding = "0";
            containerDiv.style.margin = "0";

            containerDiv.style.overflow = "hidden"

            // Append object to container as new parent
            containerDiv.appendChild(obj);


        } else {
            containerDiv = document.getElementById(scrollContainerId);
        }

        // Set objects initial left postion so its right most edige is just to the left of its container
        posLeft = parseInt(containerDiv.style.left) - (parseInt(containerDiv.style.width) + 10);

        // Restore display and make sure opacity is cranked back to 100% 
        if (originalDisplay == "none") {
            obj.style.display = originalDisplay;
            obj.style.filter = "alpha(opacity=100)"; // IE
            obj.style.opacity = 1; // Firefox, etc..
        }

    }

    // Move the object to the left
    obj.style.left = posLeft + "px";
    obj.style.display = ''; // Make sure object is visible

    // Increament position and keep calling scrollRightFn until it gets to left Destination
    posLeft += inc;
    if (posLeft < 0) {
        cmd = "scrollRightFn('" + objId + "'," + inc + "," + posLeft + ")";
        timer = setTimeout(cmd, 50);
    } else {
        // Make sure object is scrolled all the way left
        obj.style.left = "0px";
        window.clearTimeout(timer);
    }
}


//////////////////////////////////////////////////////////////////////////////////////////
// createSpacerDiv
//
// If an object is not using 'absolute' positioning then set it to absolute and create a
// "spacer" div - a div that will occupy the space on the page which is lost when the
// object's position is turned to 'absolute'
//		
//  @param   obj - object to create spacer div and set absolute position for 
//  @return  void
//////////////////////////////////////////////////////////////////////////////////////////
function createSpacerDiv(obj) {

    var objId = obj.id;
    var objHeight = obj.offsetHeight;
    var objWidth = obj.offsetWidth;
    var originalPosition = obj.style.position;
    var objFloat = (typeof obj.style.styleFloat == 'undefined') ? obj.style.cssFloat : obj.style.styleFloat;
    var objMargin = obj.style.margin;

    // Set object position to 'absolute'
    obj.style.position = 'absolute';

    // If object was not orignally "position:absolute" or a "Float" object (neither float or absolute
    // objects take up space on a page so there is no need to create a "spacer" div for them )
    // then create a div that will occupy the space on the page which was lost when the object was changed
    if (!(originalPosition == "absolute" || objFloat == "right" || objFloat == "left")) {

        // Create Spacer Div
        spacerDiv = document.createElement("div");
        scrollSpacerId = objId + "Spacer";
        spacerDiv.setAttribute("id", scrollSpacerId);

        // Make sure container is the same size as the object
        spacerDiv.style.height = objHeight + "px";
        spacerDiv.style.width = objWidth + "px";
        spacerDiv.style.styleFloat = objFloat;
        spacerDiv.style.margin = objMargin;

        // Insert spacer DIV *after* object in the page.
        obj.parentNode.insertBefore(spacerDiv, obj.nextSibling);
    }
}


//////////////////////////////////////////////////////////////////////////////
// FindPosition - find the Top and Left postion of an object on the page
//  @param obj - object of element whose position needs to be found
//  @return array - Array whoose first eleemnt is the left postion and whoose 
//                  second is the top position
////////////////////////////////////////////////////////////////////////////// 
function FindPosition(obj) {
    // Figure out where the obj object is in the page by adding
    // up all the offsets for all the containing parent objects   
    if (obj == null) return [0, 0];

    // Assign the obj object to a temp variable
    tmpObj = obj;

    // Get the offsets for the current object
    var obj_left = tmpObj.offsetLeft;
    var obj_top = tmpObj.offsetTop;

    // If the current object has a parent (ie contained in a table, div, etc..)
    if (tmpObj.offsetParent) {

        // Loop through all the parents and add up their offsets
        // The while loop will end when no more parents exist and a null is returned
        while (tmpObj = tmpObj.offsetParent) {
            obj_left += tmpObj.offsetLeft;
            obj_top += tmpObj.offsetTop;
        }
    }
    return [obj_left, obj_top];
}

//////////////////////////////////////////////////////////////////////////////
// addLoad
//
//		Add a new function to the windows onload event without 
//		removing any previous existing functions.
//
//  @param   newFunc - function name to add to windows.onload    
//  @return  void
//////////////////////////////////////////////////////////////////////////////
function addLoad(newFunc) {

    // If this is the first function then assign it to window.onload
    // else assign it along with the current functions 
    if (typeof window.onload != 'function') {
        window.onload = newFunc;
    }
    else {
        // Save current onload assignment then create a new 
        // function containing both it and the new function
        currFunctions = window.onload;
        window.onload = function() {
            currFunctions();
            newFunc();
        };
    }
}

// Add transitions function to run after page finishes loading.
addLoad(transitions);