/*******************************************************************
* File    : JSFX_Layer.js  © JavaScript-FX.com
* Created : 2001/04/11
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
* Purpose : To create a cross browser dynamic layers.
* History
* Date         Version        Description
* 2001-03-17        3.0                Completely re-witten for use by javascript-fx
***********************************************************************/
if(!window.JSFX)
        JSFX=new Object();

JSFX.layerNo=0;
/**********************************************************************************/
JSFX.createElem = function(htmlStr, x, y)
{
        var elem = null;

         if(document.layers)
        {
                elem=new Layer(2000);
                elem.document.open();
                elem.document.write(htmlStr);
                elem.document.close();
                elem.moveTo(x,y);
                elem.innerHTML = htmlStr;
        }
        else
        if(document.all)
        {
                var xName = "xLayer" + JSFX.layerNo++;
                var txt = "<DIV ID='" + xName
                        + "' STYLE=\"position:absolute;"
                        + "left:"  + x + ";"
                        + "top:"   + y + ";"
                        + "visibility:hidden\">"
                        + htmlStr
                        + "</DIV>";

                        document.body.insertAdjacentHTML("BeforeEnd",txt);

                elem = document.all[xName];
        }
        else
        if (document.getElementById)
        {
                var xName="xLayer" + JSFX.layerNo++;
                var txt = ""
                        + "position:absolute;"
                        + "left:"  + x + "px;"
                        + "top:"   + y + "px;"
                        + "visibility:hidden";

                var newRange = document.createRange();

                elem = document.createElement("DIV");
                elem.setAttribute("style",txt);
                elem.setAttribute("id", xName);

                document.body.appendChild(elem);

                newRange.setStartBefore(elem);
                strFrag = newRange.createContextualFragment(htmlStr);
                elem.appendChild(strFrag);
        }

        return elem;
}
/**********************************************************************************/
JSFX.Layer = function(newLayer, x, y)
{
        if(!newLayer)
                return;

        if(x==null)x=0;
        if(y==null)y=0;

        if(typeof newLayer == "string")
                this.elem = JSFX.createElem(newLayer, x, y);
        else
                this.elem=newLayer;

        if(document.layers)
        {
                this.images=this.elem.document.images;
                this.style = this.elem;
         }
        else
        {
                this.images  = document.images;
                this.style   = this.elem.style;
        }
}
/**********************************************************************************/
JSFX.findLayer = function(theDiv, d)
{
        if(document.layers)
        {
                var i;
                if(d==null) d = document;
                var theLayer = d.layers[theDiv];
                if(theLayer != null)
                        return(theLayer);
                else
                        for(i=0 ; i<d.layers.length ; i++)
                        {
                                theLayer = JSFX.findLayer(theDiv, d.layers[i].document);
                                if(theLayer != null)
                                        return(theLayer);
                        }
                return("Undefined....");
        }
        else
        if(document.all)
                return(document.all[theDiv]);
        else
        if(document.getElementById)
                return(document.getElementById(theDiv));
        else
                return("Undefined.....");
}
var ns4 = (navigator.appName.indexOf("Netscape") != -1 && !document.getElementById);

/**********************************************************************************/
/*** moveTo (x,y) ***/
JSFX.Layer.prototype.moveTo = function(x,y)
{
        this.style.left = x+"px";
        this.style.top = y+"px";
}
if(ns4)
        JSFX.Layer.prototype.moveTo = function(x,y) { this.elem.moveTo(x,y); }
/**********************************************************************************/
/*** show()/hide() Visibility ***/
JSFX.Layer.prototype.show                = function()         { this.style.visibility = "visible"; }
JSFX.Layer.prototype.hide                = function()         { this.style.visibility = "hidden"; }
JSFX.Layer.prototype.isVisible        = function()        { return this.style.visibility == "visible"; }
if(ns4)
{
        JSFX.Layer.prototype.show                = function()         { this.style.visibility = "show"; }
        JSFX.Layer.prototype.hide                 = function()         { this.style.visibility = "hide"; }
        JSFX.Layer.prototype.isVisible         = function()         { return this.style.visibility == "show"; }
}
/**********************************************************************************/
/*** zIndex ***/
JSFX.Layer.prototype.setzIndex        = function(z)        { this.style.zIndex = z; }
JSFX.Layer.prototype.getzIndex        = function()        { return this.style.zIndex; }
/**********************************************************************************/
/*** BackGround Color ***/
JSFX.Layer.prototype.setBgColor        = function(color) { this.style.backgroundColor = color==null?'transparent':color; }
if(ns4)
        JSFX.Layer.prototype.setBgColor         = function(color) { this.elem.bgColor = color; }
/**********************************************************************************/
/*** BackGround Image ***/
JSFX.Layer.prototype.setBgImage        = function(image) { this.style.backgroundImage = "url("+image+")"; }
if(ns4)
        JSFX.Layer.prototype.setBgImage         = function(image) { this.style.background.src = image; }
/**********************************************************************************/
/*** set Content***/
JSFX.Layer.prototype.setContent   = function(xHtml)        { this.elem.innerHTML=xHtml; }
if(ns4)
        JSFX.Layer.prototype.setContent   = function(xHtml)
        {
                this.elem.document.open();
                this.elem.document.write(xHtml);
                this.elem.document.close();
        }

/**********************************************************************************/
/*** Clipping ***/
JSFX.Layer.prototype.clip = function(x1,y1, x2,y2){ this.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4)
        JSFX.Layer.prototype.clip = function(x1,y1, x2,y2)
        {
                this.style.clip.top        =y1;
                this.style.clip.left        =x1;
                this.style.clip.bottom        =y2;
                this.style.clip.right        =x2;
        }
/**********************************************************************************/
/*** Resize ***/
JSFX.Layer.prototype.resizeTo = function(w,h)
{
        this.style.width        =w + "px";
        this.style.height        =h + "px";
}
if(ns4)
        JSFX.Layer.prototype.resizeTo = function(w,h)
        {
                this.style.clip.width        =w;
                this.style.clip.height        =h;
        }
/**********************************************************************************/
/*** getX/Y ***/
JSFX.Layer.prototype.getX        = function()         { return parseInt(this.style.left); }
JSFX.Layer.prototype.getY        = function()         { return parseInt(this.style.top); }
if(ns4)
{
        JSFX.Layer.prototype.getX        = function()         { return this.style.left; }
        JSFX.Layer.prototype.getY        = function()         { return this.style.top; }
}
/**********************************************************************************/
/*** getWidth/Height ***/
JSFX.Layer.prototype.getWidth                = function()         { return this.elem.offsetWidth; }
JSFX.Layer.prototype.getHeight        = function()         { return this.elem.offsetHeight; }
if(!document.getElementById)
        JSFX.Layer.prototype.getWidth                = function()
         {
                //Extra processing here for clip
                return this.elem.scrollWidth;
        }

if(ns4)
{
        JSFX.Layer.prototype.getWidth                = function()         { return this.style.clip.right; }
        JSFX.Layer.prototype.getHeight        = function()         { return this.style.clip.bottom; }
}
if(!window.JSFX)
        JSFX=new Object();

if(!JSFX.Browser)
        JSFX.Browser = new Object();

if(navigator.appName.indexOf("Netscape") != -1)
{
        /* Original
        JSFX.Browser.getCanvasWidth        = function() {return innerWidth;}
        JSFX.Browser.getCanvasHeight        = function() {return innerHeight;}
        JSFX.Browser.getWindowWidth         = function() {return outerWidth;}
        JSFX.Browser.getWindowHeight        = function() {return outerHeight;}
        JSFX.Browser.getScreenWidth         = function() {return screen.width;}
        JSFX.Browser.getScreenHeight        = function() {return screen.height;}
        JSFX.Browser.getMinX                = function() {return(pageXOffset);}
        JSFX.Browser.getMinY                = function() {return(pageYOffset);}
        JSFX.Browser.getMaxX                = function() {return(pageXOffset+innerWidth);}
        JSFX.Browser.getMaxY                = function() {return(pageYOffset+innerHeight);}
        */

        JSFX.Browser.getCanvasWidth        = function() {return innerWidth;}
        JSFX.Browser.getCanvasHeight        = function() {return innerHeight;}
        JSFX.Browser.getWindowWidth         = function() {return outerWidth;}
        JSFX.Browser.getWindowHeight        = function() {return outerHeight;}
        JSFX.Browser.getScreenWidth         = function() {return screen.width;}
        JSFX.Browser.getScreenHeight        = function() {return screen.height;}
        JSFX.Browser.getMinX                = function() {return(pageXOffset);}
        JSFX.Browser.getMinY                = function() {return(pageYOffset);}
        JSFX.Browser.getMaxX                = function() {return(pageXOffset+innerWidth);}
        JSFX.Browser.getMaxY                = function() {return(pageYOffset+innerHeight);}


}
else         if(document.all)         {
        /* Original
        JSFX.Browser.getCanvasWidth        = function() {return document.body.clientWidth;}
        JSFX.Browser.getCanvasHeight        = function() {return document.body.clientHeight;}
        JSFX.Browser.getWindowWidth         = function() {return document.body.clientWidth;}
        JSFX.Browser.getWindowHeight        = function() {return document.body.clientHeight;}
        JSFX.Browser.getScreenWidth        = function() {return screen.width;}
        JSFX.Browser.getScreenHeight        = function() {return screen.height;}
        JSFX.Browser.getMinX                = function() {return(document.body.scrollLeft);}
        JSFX.Browser.getMinY                = function() {return(document.body.scrollTop);}
        JSFX.Browser.getMaxX                = function() {
                return(document.body.scrollLeft
                        +document.body.clientWidth);
        }
        JSFX.Browser.getMaxY                = function() {
                        return(document.body.scrollTop
                                +document.body.clientHeight);
        }
        */
        JSFX.Browser.getCanvasWidth         = 700;
        JSFX.Browser.getCanvasHeight        = 380;
        JSFX.Browser.getWindowWidth         = 700;
        JSFX.Browser.getWindowHeight        = 580;
        JSFX.Browser.getScreenWidth         = 760;
        JSFX.Browser.getScreenHeight        = 600;
        JSFX.Browser.getMinX                = function() {return(document.body.scrollLeft);}
        JSFX.Browser.getMinY                = function() {return(document.body.scrollTop);}
        JSFX.Browser.getMaxX                = function() {
                return(document.body.scrollLeft
                        + 700);
        }
        JSFX.Browser.getMaxY                = function() {
                        return(document.body.scrollTop
                                +480);
        }
}
JSFX.FireworkDisplay = function(numFireworks)
{
        JSFX.FireworkDisplay.Fireworks = new Array();
        JSFX.FireworkDisplay.running = true;

        JSFX.FireworkDisplay.loadImages();

        var i=0;
        for(i=0 ; i<numFireworks; i++)
                JSFX.FireworkDisplay.Fireworks[i]=new JSFX.Firework(i, JSFX.FireworkDisplay.fwImages);

        setTimeout("JSFX.FireworkDisplay.animate()", 30 );
}
JSFX.FireworkDisplay.loadImages = function()
{
        var i;
        JSFX.FireworkDisplay.fwImages = new Array();

        for(i=0 ; i<21 ; i++)
        {
                JSFX.FireworkDisplay.fwImages[i] = new Image();
                JSFX.FireworkDisplay.fwImages[i].src = "fireimages/"+i+".gif"
        }
}
JSFX.FireworkDisplay.animate = function()
{
        var i;
        for(i=0 ; i<JSFX.FireworkDisplay.Fireworks.length ; i++)
                JSFX.FireworkDisplay.Fireworks[i].animate();

        setTimeout("JSFX.FireworkDisplay.animate()", 30);
}
/*
 * End Class FireworkDisplay
 */

/*
 * Class Firework extends Layer
 */
JSFX.Firework = function(fwNo, theImages)
{
        var imgName = "fw"+fwNo;
        var htmlStr = "<IMG SRC='"+theImages[0].src+"' NAME='"+imgName+"'>"

        //Call the superclass constructor
        this.superC = JSFX.Layer;
        this.superC(htmlStr, 0, 0);

        this.frame                = 0;
        this.state                = "OFF";
        this.fwImages        = theImages;
        this.imgName        = imgName;
        this.ay                = 0.1;
        this.resizeTo(2,2);
}
JSFX.Firework.prototype = new JSFX.Layer;

JSFX.Firework.prototype.animate = function()
{
        if(this.state == "ON")
        {
                this.frame++
                if(this.frame == this.fwImages.length)
                {
                        this.frame = 0;
                        this.state = "OFF";
                        this.hide();
                }
                else
                {
                        this.images[this.imgName].src = this.fwImages[this.frame].src;
                }
        }
        else if(this.state == "OFF")
        {
                var ydiff = JSFX.Browser.getMaxY() - JSFX.Browser.getMinY();

                if(ydiff > 800)
                        this.dy = -12;
                else if(ydiff > 600)
                        this.dy = -10;
                else if(ydiff > 400)
                        this.dy = -8;
                else if(ydiff > 300)
                        this.dy = -7;
                else
                        this.dy = -4;

                this.dx = Math.random()*-8 + 4;
                this.dy += Math.random()*3;
                this.clip(0,0,2,2);
                this.setBgColor(Math.random()>.33 ? Math.random()>.33 ? "#FF0000" : "#00FF00" : "#0000FF");

                this.x=JSFX.Browser.getMaxX()/2;
                this.y=JSFX.Browser.getMaxY()-10;
                this.moveTo(this.x,this.y);
                this.show();
                this.state="TRAVEL";
        }
        else if(this.state == "TRAVEL")
        {
                this.x += this.dx;
                this.y += this.dy;
                this.dy += this.ay;
                this.moveTo(this.x,this.y);
                if(this.dy > -1 && Math.random()<.05)
                {
                        this.state = "ON";
                        this.setBgColor(null);
                        this.clip(0,0,100,100);
                        this.x -=50;
                        this.y -=50;
                        this.moveTo(this.x, this.y);
                }
        }

}
/*** If no other script has added it yet, add the ns resize fix ***/
if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
{
        if(!JSFX.ns_resize)
        {
                JSFX.ow = outerWidth;
                JSFX.oh = outerHeight;
                JSFX.ns_resize = function()
                {
                        if(outerWidth != JSFX.ow || outerHeight != JSFX.oh )
                                location.reload();
                }
        }
        window.onresize=JSFX.ns_resize;
}