Curtain
<!-- START OF Curtain DHTML -->

<!-- SUMMARY BRIEFS
	This DHTML script will give a "curtain" effect displaying
	your webpage.  You can adjust the color by changing the 
	HEX code below and the word "PURPLE".

	Place this after the <BODY> tag.
-->


<style>
<!--
.curtain{
position:absolute;
left:0;
top:0;
layer-background-color:800080;
background-color:800080;
border:0.1px solid PURPLE
}
-->
</style>


<div id="c1" class="curtain"></div><div id="c2" class="curtain"></div>
<script language="JavaScript1.2">


var speed=20
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (c=1;c<=2;c++){
temp[c]=eval("document.c"+c+".clip")
temp2[c]=eval("document.c"+c)
temp[c].width=window.innerWidth
temp[c].height=window.innerHeight/2
temp2[c].top=(c-1)*temp[c].height
}
}
else if (document.all){
var curtainbottom=document.body.offsetHeight/2,curtaintop=0
for (c=1;c<=2;c++){
temp[c]=eval("document.all.c"+c+".style")
temp[c].width=document.body.clientWidth
temp[c].height=document.body.offsetHeight/2
temp[c].top=(c-1)*parseInt(temp[c].height)
}
}

function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].bottom-=speed
temp[2].top+=speed
if (temp[1].bottom<=0)
clearInterval(stopit)
}
else if (document.all){
curtainbottom-=speed
temp[1].clip="rect(0 auto+"+curtainbottom+" 0)"
curtaintop+=speed
temp[2].clip="rect("+curtaintop+" auto auto)"
if (curtainbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()

</script>

<!-- END OF Curtain DHTML -->
###ENDOFSCRIPT### #
Drop Down
<!-- START OF Drop Down DHTML -->

<!-- SUMMARY BRIEFS
	This DHTML script will create a drop down link box out of
	an ordinary link.  VERY COOL!!!!

	The top portion of this script goes above the <BODY> tag.
	The second portion goes where you want the drop down link
	box to be.
-->




<style>
<!--
#wrapper{
position:relative;
height:30px
}

#wrapper2{
position:absolute
}

#coffeemenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}


-->
</style></HEAD>

<BODY>

<ilayer id="coffeemenu01" height=35px>
<layer id="coffeemenu02" visibility=show>
<span id="wrapper">
<span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="notthisbrowser.html">Click Here To Navigate</a></b></font>
</span>
</span>
</layer>
</ilayer>

<script language="JavaScript1.2">


var enableeffect=true

var selection=new Array()
selection[0]='<font face="ARIAL BLACK"><a href="http://www.coffeecup.com">Order Our Stuff</a><br>'
selection[1]='<a href="http://www.coffeecup.com">Contact Us via E-mail</a><br>'
selection[2]='<a href="http://www.coffeecup.com">Help With Our Items</a><br>'
selection[3]='<a href="http://www.coffeecup.com">Products We Have</a><br>'
selection[4]='<a href="http://www.coffeecup.com">Services We Offer</a><br></font>'

if (document.layers)
document.coffeemenu01.document.coffeemenu02.visibility='show'

function dropit2(){
if (document.all){
coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (coffeemenu03.style.visibility=="hidden"){
if (enableeffect)
coffeemenu03.filters.revealTrans.apply()
coffeemenu03.style.visibility="visible"
if (enableeffect)
coffeemenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}

function dropit(e){
if (document.coffeemenu03.visibility=="hide")
document.coffeemenu03.visibility="show"
else
document.coffeemenu03.visibility="hide"
document.coffeemenu03.left=e.pageX-e.layerX
document.coffeemenu03.top=e.pageY-e.layerY+19
return false
}

function hidemenu(){
if (enableeffect)
coffeemenu03.filters.revealTrans.stop()
coffeemenu03.style.visibility="hidden"
}

function hidemenu2(){
document.coffeemenu03.visibility="hide"
}

if (document.layers){
document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK)
document.coffeemenu01.document.coffeemenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu

</script>

<div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
coffeemenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>

<script language="JavaScript1.2">
if (document.layers){
document.coffeemenu03.captureEvents(Event.CLICK)
document.coffeemenu03.onclick=hidemenu2
}
</script>

<!-- END OF Drop Down DHTML -->
###ENDOFSCRIPT### #
Link Tips
<!-- START OF LINK TIPS DHTML -->

<!-- SUMMARY BRIEFS
	This DHTML script will give pop up tips on any link.
	You can adjust the font, the content, and even the 
	background color of the tool tips.

	Place this script anywhere within the <BODY> tags.
-->

<script>

if (!document.layers&&!document.all)
event="test"
function showtip(current,e,text){

if (document.all){
thetitle=text.split('<br>')
if (thetitle.length>1){
thetitles=''
for (i=0;i<thetitle.length;i++)
thetitles+=thetitle[i]
current.title=thetitles
}
else
current.title=text
}

else if (document.layers){
document.linktips.document.write('<layer bgColor="yellow" style="border:1px solid black;font-family:arial;font-size:12px;">'+text+'</layer>')
document.linktips.document.close()
document.linktips.left=e.pageX+5
document.linktips.top=e.pageY+5
document.linktips.visibility="show"
}
}
function hidetip(){
if (document.layers)
document.linktips.visibility="hidden"
}

</script>
<div id="linktips" style="position:absolute;visibility:hidden"></div>

<FONT FACE=ARIAL FACE=ARIAL>

<a href="http://www.coffeecup.com"
         onMouseover="showtip(this,event,'Please Visit the CoffeeCup Software Web Site!')" onMouseout="hidetip()">Visit Our Site</a>
<P>

<a href="http://www.coffeecup.com"
         onMouseover="showtip(this,event,'Learn More About Style Sheets and DHTML')" onMouseout="hidetip()">Learn More</a>
<P>

<a href="http://www.coffeecup.com"
         onMouseover="showtip(this,event,'Contact Us via E-mail...<BR>or by Snail Mail if you Wish')" onMouseout="hidetip()">Contact Us</a>

<P>

<a href="http://www.coffeecup.com/order"
         onMouseover="showtip(this,event,'Order One the Coolest Tools on the Web Now!')" onMouseout="hidetip()">Order Software</a>

<P>
</FONT>


<!-- END OF Link Tips DHTML -->
###ENDOFSCRIPT### #
Message Reader
<!-- START OF Message Reader DHTML -->

<!-- SUMMARY BRIEFS

	This DHTML script will cycle through 4 different text links.
	You can adjust the text and links below to meet your webpage.
	
     IMPORTANT

	Make suer that this body tag is included in your webpage.  It
	activates the Message Reader.  
-->

<body onload="if (document.all||document.layers) {regenerate2();update()}">

<style>
<!--
#msgline{
position:relative;
layer-background-color:black;
width:400;
height:12;
}

#msgtext{
background-color:black;
position:absolute;
border: 1px solid black;
width:400;
height:12;

}


.msgtextfont{
font:bold 16px Arial;
postition:absolute;
left:5px;
text-decoration:none;
color:white;
}

.msgtextfont a{
color:white;
text-decoration:none;
}
-->
</style>
<div id="msgline">
<div id="msgtext" class="msgtextfont">Starting Messages...</div>
</div>

<script language="JavaScript1.2">

var speed=4000
var news=new Array()
news[0]="<a href='http://www.coffeecup.com'>First line of text....</a>"
news[1]="<a href='http://www.coffeecup.com'>Second line of text....</a>"
news[2]="<a href='http://www.coffeecup.com'>Third line of text....</a>"
news[3]="<a href='http://www.coffeecup.com'>Add as many as you want....</a>"

i=0
if (document.all)
tickerobject=document.all.msgtext.style
else
tickerobject=document.msgline.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function update(){
 BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.msgline.document.msgtext.document.write('<span class="msgtextfont">'+news[i]+'</span>')
document.msgline.document.msgtext.document.close()
}
else 
document.all.msgtext.innerHTML=news[i]

if (i<news.length-1)
i++
else
i=0
setTimeout("update()",speed)
}

 function BgFade(red1, grn1, blu1, red2,
 grn2, blu2, steps) {
 sred = red1; sgrn = grn1; sblu = blu1; 
 ered = red2; egrn = grn2; eblu = blu2; 
 inc = steps; 
 step = 0; 
 MsgDither();
 }
 function MsgDither() {
 var epct = step/inc; 
 var spct = 1 - epct; 
 if (document.layers)
 tickerobject.bgColor =
 Math.floor(sred * spct + ered *
 epct)*256*256 +
 Math.floor(sgrn * spct + egrn * epct)*256 +
 Math.floor(sblu * spct + eblu * epct); 
 else
 tickerobject.backgroundColor=
 Math.floor(sred * spct + ered *
 epct)*256*256 +
 Math.floor(sgrn * spct + egrn * epct)*256 +
 Math.floor(sblu * spct + eblu * epct); 
 if ( step < inc ) {
 setTimeout('MsgDither()',50); 
 }
 step++;
 }

</script>

<!-- END OF Message Reader DHTML -->
###ENDOFSCRIPT### #
Mouse Follow
<!-- START OF Nouse Follow DHTML -->

<!-- SUMMARY BRIEFS
	Put this DHTML after the </HEAD> tag but before the 
	<BODY> tag.  This DHTML script will create a small
	layer that hovers around the mouse pointer.  The
	current image being used is called "smile.gif" and
	has a size of HEIGHT 11 and WIDTH 11.  To place your
	own image in place of the current one, rename "smile.gif"
	and change the HEIGHT and WIDTH specs in the CLIP 
	attribute.  (This is in the first line of code.)

     IMPORTANT

	This example has an image.  It is found in the CoffeeCup
	Software folder on your hard drive.
-->


<layer NAME="a" LEFT="10" TOP="10" VISIBILITY="SHOW"
CLIP="0,0,11,11" background="smile.gif">
</layer>
<script LANGUAGE="JavaScript1.2">
var userAgent=navigator.appName + " " + navigator.appVersion;
var agentInfo=userAgent.substring(0, 12);
if(agentInfo >= "Netscape 4.0")
{
window.captureEvents(Event.MOUSEMOVE);
// Logo animation
var yBase = window.innerHeight/2;
var xBase = window.innerWidth/2;
var delay = 50;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 50;
var Ypos = 50;
var b = 0;
function MoveHandler(evnt) {
  Xpos = evnt.pageX ;
  Ypos = evnt.pageY ;
}
window.onMouseMove = MoveHandler;
function animateLogo() {
  yBase = window.innerHeight/4 ;
  xBase = window.innerWidth/4;
  for ( b = 0 ; b < 1 ; b++ ) {
    document.layers[b].top = Ypos +
Math.cos((20*Math.sin(currStep/(20+b)))+b*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + b*25)/10);
    document.layers[b].left =Xpos +
Math.sin((20*Math.sin(currStep/20))+b*70)*xBase*(Math.sin(10+currStep/(10+b))+0.2)*Math.cos((currStep + b*25)/10);
  }
  currStep += step;
  setTimeout("animateLogo()", delay) ;
}
animateLogo()
}
// -->

</script>
</LAYER>

<!-- END OF Mouse Follow DHTML -->
###ENDOFSCRIPT### #
Page Transitions
<!-- START OF Page Transitions DHTML -->

<!-- SUMMARY BRIEFS

	ONLY WORKS IN Internet Explorer.  Does not effect Netscape.

	Place this <META> tag in between the <HEAD> tags of
	all your Webpages.  Then view the Webpages in IE 4
	and you will notice the page transitions.  Randomly
	the pages will be displayed in different transitions
	such as swipe left, swipe right, expand out, etc.
-->

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">

<!-- End OF Page Transitions DHTML -->
###ENDOFSCRIPT### #
Rolling Credits
<!-- START OF Rolling Credits DHTML -->

<!-- SUMMARY BRIEFS
	This example shows how you can create a webpage
	that scrolls up.  The webpage must be long (vertically)
	in order for the effect to work.
-->

<SCRIPT LANGUAGE="JavaScript">
<!--
        var position = 0;
function scroller() {
        if (position != 320) {
                position++;
                scroll(0,position);
                clearTimeout(timer);
                var timer = setTimeout("scroller()",3); timer;
        }
        else
                 {
           location.replace("#");
        }
}
// -->
</SCRIPT>
</HEAD>

<BODY onload="scroller()">
<CENTER>
<font face="VERDANA, ARIAL" size="5" color=804040>Rolling Credits</font><p>
<font face="VERDANA, ARIAL" size="4">This script allows you to:
<HR WIDTH=350 NOSHADE>
<P>
Place<P> text<P> descriptions<p>
of <P>any <P>sort<p>
and it will <P>scroll up<p>
the page <P>until its done.<p>
<P>
You can even<P> 
make <A HREF="http://www.coffeecup.com/">Links.</A><p>
Or<P>
use<P>
images.<p>
<p></font>
</CENTER>

<!-- END OF Rolling Credits DHTML -->
###ENDOFSCRIPT### #
Scroller
<!-- START OF Scroller DHTML -->

<!-- SUMMARY BRIEFS
	Place this DHTML script after the <BODY> tag.  In this DHTML
	script you can have a scrolling message.  You can also add
	images to the scrolling message, but keep in mind that if the
	HEIGHT is bigger than the predefined HEIGHT, your image will
	be clipped.  Adjust the predefined HEIGHT by adjust the number
	beside 'scrollerheight'.
-->

<script language="JavaScript1.2">
var scrollercontents='<font face="Verdana, Arial" SIZE=4><B>Thank you for visiting <a href="http://www.coffeecup.com">Our Site.</a> Please Register your Shareware <a href="http://www.coffeecup.com/order">Here.</a> Thanks !</B></font>'

var scrollerwidth=330
var scrollerheight=25
var speed=6


if (document.all)
document.write('<scroller scrollAmount='+speed+' style="width:'+scrollerwidth+'">'+scrollercontents+'</scroller>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializescroller()
}
}

function intializescroller(){
document.cscroller01.document.cscroller02.document.write('<nobr>'+scrollercontents+'</nobr>')
document.cscroller01.document.cscroller02.document.close()
thelength=document.cscroller01.document.cscroller02.document.width
scrollit()
}

function scrollit(){
if (document.cscroller01.document.cscroller02.left>=thelength*(-1)){
document.cscroller01.document.cscroller02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cscroller01.document.cscroller02.left=scrollerwidth
scrollit()
}
}

window.onload=regenerate2
</script>


<layer width=&{scrollerwidth}; height=&{scrollerheight}; name="cscroller01">
<layer name="cscroller02"></layer>
<layer>

<!-- End OF Scroller DHTML -->
###ENDOFSCRIPT### #
Slide Menu
<!-- START OF Slide Menu DHTML -->

<!-- SUMMARY BRIEFS
	Place this DHTML script after the </HEAD> tag and before
	the <BODY> tag.  In this DHTML script, there are five links
	that constantly remain in the upper left hand corner.  You
	can change these links to meet your own.  The Style Sheet 
	has been adjusted to "push" your webpage 120 pixels to the
	right so that the links do not touch any of your text/images.
	You can adjust this by changing the pixel amount in the BODY
	section of the below Style Sheet.


-->

<style TYPE="text/css">
#slide {
                Position: Absolute;
                Left: 5;
                Top: 5;
                Visibility: Visible;
                }

A:LINK		{text-decoration: none;}
A:VISITED	{text-decoration: none;}
TD		{font-family:arial;}
BODY		{Position: Absolute;
		Left: 120;}
</style>
<span ID="slide">

<table CELLSPACING="0" BORDER="0" CELLPADDING="0" ALIGN="LEFT" >
<TR><td><HR NOSHADE></TD></tr>
<tr>
<td><A HREF="http://www.coffeecup.com">CONTACT US</A><BR></td>
</TR>
<tr>
<td><A HREF="http://www.coffeecup.com">HELP</A><BR></td>
</tr>
<tr>
<td><A HREF="http://www.coffeecup.com">SERVICES</A><br></td>
</tr>
<tr>
<td><A HREF="http://www.coffeecup.com">PRODUCTS</A><br></td>
</tr>
<tr>
<td><A HREF="http://www.coffeecup.com/order">ORDER</A><br></td>
</tr>
<TR><td><HR NOSHADE></TD></tr>
</table>
</span>

<script LANGUAGE="JavaScript">

        self.onError=null;
        
        currentX = currentY = 0;  
        whichIt = null;           
        lastScrollX = 0; lastScrollY = 0;
        
        NS = (document.layers) ? 1 : 0;
        IE = (document.all) ? 1: 0;
        
        function heartBeat() {
        
                if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
            if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
                
                if(diffY != lastScrollY) {
                        percent = .1 * (diffY - lastScrollY);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                                        if(IE) document.all.slide.style.pixelTop += percent;
                                        if(NS) document.slide.top += percent; 
                        lastScrollY = lastScrollY + percent;
            }
                if(diffX != lastScrollX) {
                        percent = .1 * (diffX - lastScrollX);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                        if(IE) document.all.slide.style.pixelLeft += percent;
                        if(NS) document.slide.left += percent;
                        lastScrollX = lastScrollX + percent;
                }       
        }

        function checkFocus(x,y) { 
        var totalY, totalX;
                floatx = document.slide.pageX;
                floaty = document.slide.pageY;
                floatwidth = document.slide.clip.width;
                floatheight = document.slide.clip.height;
                        
                        if(20 == 0) totalY = floatheight;
                        else totalY = 20;
                        if(0 == 0) totalX = floatwidth;
                        else totalX = 0;
                if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true;
                else return false;
        }
        
        function grabIt(e) {
                if(IE) {
                        whichIt = event.srcElement;
                        while (whichIt.id.indexOf("slide") == -1) {
                                whichIt = whichIt.parentElement;
                                if (whichIt == null) { return true; }
                    }
                        whichIt.style.pixelLeft = whichIt.offsetLeft;
                    whichIt.style.pixelTop = whichIt.offsetTop;
                        currentX = (event.clientX + document.body.scrollLeft);
                        currentY = (event.clientY + document.body.scrollTop);
                        
                        if(20 == 0) totalY = whichIt.style.pixelHeight;
                        else totalY = 20;
                        if(0 == 0) totalX = whichIt.style.pixelWidth;
                        else totalX = 0;
                        if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) || 
                        !(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null;
                } else { 
                window.captureEvents(Event.MOUSEMOVE);
                if(checkFocus (e.pageX,e.pageY)) { 
                        whichIt = document.slide;
                        FloatTouchedX = e.pageX-document.slide.pageX;
                        FloatTouchedY = e.pageY-document.slide.pageY;
                } 
                }
            return true;
        }
        
        function moveIt(e) {
                if (whichIt == null) { return false; }
                if(IE) {
                    newX = (event.clientX + document.body.scrollLeft);
                    newY = (event.clientY + document.body.scrollTop);
                    distanceX = (newX - currentX);    distanceY = (newY - currentY);
                    currentX = newX;    currentY = newY;
                    whichIt.style.pixelLeft += distanceX;
                    whichIt.style.pixelTop += distanceY;
                        if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
                        if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
                        if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
                        if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
                        event.returnValue = false;
                } else { 
                        whichIt.moveTo(e.pageX-FloatTouchedX,e.pageY-FloatTouchedY);
                if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
                if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
                if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
                if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
                return false;
                }
            return false;
        }
        
        function dropIt() {
                whichIt = null;
            if(NS) window.releaseEvents (Event.MOUSEMOVE);
            return true;
        }

        
        if(NS) {
                window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
                window.onmousedown = grabIt;
                window.onmousemove = moveIt;
                window.onmouseup = dropIt;
        }
        if(IE) {
                document.onmousedown = grabIt;
                document.onmousemove = moveIt;
                document.onmouseup = dropIt;
        }
        
        
        if(NS || IE) action = window.setInterval("heartBeat()",1);
        

</script>

<!-- End OF Slide Menu DHTML -->
###ENDOFSCRIPT### #
Slideout
<!-- START OF Slide Out DHTML -->

<!-- SUMMARY BRIEFS

	This DHTML script is an entire webpage by itself.  Open it
	up into a blank webpage and try it out.  You can then add
	your content around it.  Basically, you can have 5 different
	"layers" which switch when the user clicks on the appropriate
	links.  You can adjust the links, colors, and text below.

     IMPORTANT

	This example has an image.  It is found in the CoffeeCup
	Software folder on your hard drive.
-->


<SCRIPT LANGUAGE="JavaScript">
<!--



n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	slideoutActive = 0
	if (n) {
		slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
		slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
		slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
		slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
                slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
	}

	if (ie) {
		slideout1 = slideoutContent1.style
		slideout2 = slideoutContent2.style
		slideout3 = slideoutContent3.style
		slideout4 = slideoutContent4.style
                slideout5 = slideoutContent5.style
	}
	slideoutShown = slideout1		
	slideoutShown.xpos = 0
	slideoutNew = "none"			
	slideoutNew.xpos = -285
}


function slideout(which) {
	if (!slideoutActive && slideoutShown != which) {
		slideoutActive = 1  
		slideoutNew = which
		slideoutNew.xpos = -285
		slideoutLeft()
	}
}


function slideoutLeft() {
	if (slideoutShown.xpos > -285) {
		slideoutShown.xpos -= 15
		slideoutShown.left = slideoutShown.xpos
		setTimeout("slideoutLeft()",30)
	}
	else {
		hide(slideoutShown)
		show(slideoutNew)
		setTimeout("slideoutRight()",50)
	}
}


function slideoutRight() {
	if (slideoutNew.xpos < 0) {
		slideoutNew.xpos += 15
		slideoutNew.left = slideoutNew.xpos
		setTimeout("slideoutRight()",30)
	}
	else {
		slideoutShown = slideoutNew
		slideoutActive = 0  // stops the sequence
	}
}


function show(showobj) {
	if (n) showobj.visibility = "show"
	if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
	if (n) hideobj.visibility = "hide"
	if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}

#slideoutInterface {position:absolute; left:50; top:50; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}

#slideoutContent {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#slideoutContent1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#slideoutContent2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}

//-->
</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" onLoad="init()">

<DIV ID="slideoutInterface">

<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">Contact Us</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">Help</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">Services</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">Products</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">Order</A></P></DIV>

<DIV ID="slideoutContent">

<DIV ID="slideoutContent1">
<P ALIGN="CENTER"><STRONG>Contact Us</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent2">
<P ALIGN="CENTER"><STRONG>Help</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent3">
<P ALIGN="CENTER"><STRONG>Services</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent4">
<P ALIGN="CENTER"><STRONG>Products</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>


<DIV ID="slideoutContent5">
<P ALIGN="CENTER"><STRONG>Order</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

</DIV>

</BODY>
</HTML>

<!-- END OF Slide Out DHTML -->
###ENDOFSCRIPT### #
Watermark
<!-- Start of Watermark DHTML 

	SUMMARY BRIEFS

	Put this entire DHTML script below your last line of 
	code on your webpage.  Usually this will be under the
	</HTML> tag.

	Look for this in the JavaScript to adjust to your 
	image's HEIGHT and WIDTH:

	var IMGW= 100;
	var IMGH= 89;

	Then look for this in the <DIV> tag to adjust to your 
	URL and IMAGE source including the HEIGHT and WIDTH.	

	IMPORTANT

	The image we used 'watermark.gif' can be found in the 
	CoffeeCup Software folder.  

-->

<script language="JavaScript">

var IW= 0;
var IH= 0;
var PX= 0;
var PY= 0;
var ZIN= 0;
var us= null;
var IMGW= 100;
var IMGH= 89;
var LSAFETY= 20;
var TSAFETY= 17;
function branding() {
 oldIW= IW;
 oldIH= IH;
 oldPX= PX;
 oldPY= PY;
 if (navigator.appName == 'Netscape') {
  if ((window.innerHeight != oldIH)||(window.innerWidth != oldIW)||(window.pageXOffset != oldPX)||(window.pageYOffset != oldPY))
    {
    if (us == null)
      {
      for (i=0; i<document.layers.length; i++)
        {
        us= document.layers[i];
        if (us.id == "Valley")
          break;
        }
      }
    if (us != null)
      {
      us.visibility= "hide";
      IH= window.innerHeight;
      IW= window.innerWidth;
      PX= window.pageXOffset;
      PY= window.pageYOffset;


      (IH > IMGH) ? us.top= (IH+PY-(IMGH+TSAFETY)) : us.top= 0;
      (IW > IMGW) ? us.left= (IW+PX-(IMGW+LSAFETY)) : us.left= 0;

//alert('document.layers.length: ' + document.layers.length);
      for (i=0; i<document.layers.length; i++)
        {
        templay= document.layers[i];
//	alert('document.layers[' + i + '].id: ' + document.layers[i].id);
        if (templay.zIndex > ZIN)
          ZIN= (templay.zIndex + 1);
        }
      us.zIndex= ZIN;
      us.visibility= "show";
      }
    }
 }
 else{
  if (navigator.appVersion.indexOf("Mac") == -1)
    {
    if ((document.body.clientHeight != oldIH)||(document.body.clientWidth != oldIW)||(document.body.scrollLeft != oldPX)||(document.body.scrollTop != oldPY))      {
      alldivs= document.all.tags("DIV");
      if (us == null){ 
        for (i=0; i<alldivs.length; i++)
          {
          us= alldivs(i);
          if (us.id == "Valley")
            break;
          }
      }
      if (us != null){
        us.style.display= "none";
        IH= document.body.clientHeight;
        IW= document.body.clientWidth;
        PX= document.body.scrollLeft;
        PY= document.body.scrollTop;
        us.style.top= (IH+PY-(IMGH+TSAFETY)+12);
        us.style.left=(IW+PX-(IMGW+LSAFETY)+15);
        for (i=0; i<alldivs.length; i++){
          templay= alldivs(i);
          if (templay.style.zIndex > ZIN)
            us.style.zindex= (templay.style.zIndex + 1);
        }
        us.style.display= "";
      }
  }
 }
 }
}
if ((document.all) || (document.layers)){
 setInterval("branding()",100);
}
</SCRIPT>
<DIV CLASS="Watermark" ID="Watermark" STYLE="position:absolute;top:1;visibility:hide;" ALIGN="right">
<A HREF="http://www.coffeecup.com"><IMG SRC="watermark.gif" ALT="CoffeeCup Software" WIDTH=100 HEIGHT=89 BORDER=0></A>
</DIV>

<!-- End of Watermark DHTML -->
###ENDOFSCRIPT### #
Zoom Message
<!-- START OF Zoom Message DHTML -->

<!-- SUMMARY BRIEFS
	This example shows how you can create a webpage
	that displays lines of text that appear to be 
	flying out of the webpage.  Our example has an image.

     IMPORTANT
	The image used in this example can be found in the 
	CoffeeCup Software folder.  You do not need an image
	for it to work.
-->


<!-- Style Sheet created with the CoffeeCup StyleSheet Maker++ -->
<!-- http://www.coffeecup.com -->
<style type="text/css">
body
	{
	background-color:#FFFFFF; 
	font-family: Arial; 
	font-size:10pt; 
	}
</style>
<script>
//<!--Change this text-->
	text=new Array('www','coffeecup','com','CoffeeCup Software')

//<!--This is the number of words in your message-->
	var numText=4

//<!--These are the colors the last word will fade to.  The first color is the main color.-->
	color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')

//<!--This is the total number of colors from above.-->
	var numColors=5

//<!--This is the size you want the zoom to end at.-->
	var endSize=70

//<!--This is the speed you want it to zoom in.-->
	var Zspeed=30

//<!--This is the speed the colors will fade.-->
	var Cspeed=200

//<!--This is the font of the fade in message.-->
	var font='Arial Black'

//<!--This will allow you to have the message stay or go.  True will make it go.
//      False will make it stay.-->
	var hide=false

var size=10
var gonum=0
var ie, n;
if (document.all) {
		n=0
		ie=1
		zoomText='document.all.zoom.innerText=text[num]'
		zoomSize='document.all.zoom.style.fontSize=size'
		closeIt=""
		fadeColor="document.all.zoom.style.color=color[num]"
	}
if (document.layers) {
		n=1;ie=0
		zoomText=""
		zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"
		closeIt="document.zoom.document.close()"
		fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')"
	}
function zoom(num,fn){
	if (size<endSize){
		eval(zoomText)
		eval(zoomSize)
		eval(closeIt)
   		size+=5;
		setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
	}else{
	 	eval(fn);
	}
}
function fadeIt(num){
	if (num<numColors){
		eval(fadeColor)
		eval(closeIt)
   		num+=1;
		setTimeout("fadeIt("+num+")",Cspeed)
	}else{
		hideIt()
	}
}
function hideIt(){
	if(hide){
		if(ie)document.all.zoom.style.visibility="hidden"
		if(n)document.layers.zoom.visibility="hidden"
	}
}
function init(){
	if(ie){
		document.all.zoom.style.color=color[0]
		document.all.zoom.style.fontFamily=font
	}
	if(ie || n) go(0)	
}
function go(num){
	gonum+=1
	size=10
	if(num<numText){
		zoom(num,'go('+gonum+')')
	}else{
		fadeIt(0)
	}
}
</script>
</head>
<body onload="init()" bgcolor="FFFFFF">
<CENTER><IMG SRC="http://www.coffeecup.com/whitestrand.jpg" WIDTH="261" HEIGHT="229"></CENTER><P>
<div id="zoom" align="center" style="position:absolute; top:150">
</DIV>

<!-- END OF Zoom Message DHTML -->
###ENDOFSCRIPT### #
