﻿// JScript File

var fadeShow=(function(){
	var _getCoords = function(el){
		var coords = { x: 0, y: 0, w: el.offsetWidth, h:el.offsetHeight };
		while (el) {
			coords.x += el.offsetLeft;
			coords.y += el.offsetTop;
			el = el.offsetParent;
		}
		return coords;
	}
	var _animOpacity = function(ob){							//alpha animation
		this.obA=ob;
		this.opacity = 1;
		var me = this;									//me is a tether reference to the current object
		this.fade=function(){								//incremental fade
			me.opacity+=me.fadeValue;
			if(window.attachEvent){
				me.obA.style.filter="alpha(opacity="+me.opacity*100+")";
			}else{
				me.obA.style.opacity=me.opacity;
			}
		}
		this.setValue=function(n){ // is scaled to unity (for 100 enter 1)		//directly set fade value
			me.opacity = n;
			if(window.attachEvent){
				me.obA.style.filter="alpha(opacity="+me.opacity*100+")";
			}else{
				me.obA.style.opacity=me.opacity;
			}
		}
		this.anim = function(fadeValue,speed,fnc){					//animation
			if(isNaN(fadeValue)||fadeValue==0){return}
			if(isNaN(speed)||speed==0){return}
			if(fnc!=null){me.fnc=fnc}
			me.fadeValue=fadeValue;
			me.speed=speed;
			if(fadeValue>0){
				(function(){							//do a fadein
					me.s = function(){
						me.fade()
						if(me.opacity<1){
							setTimeout(me.s,speed);
						}else{
							if(me.fnc!=null){me.fnc()}
						}
					}
					setTimeout(me.s,me.speed)
				})();
			}else{
				(function(){							//do a fadeout
					me.s = function(){
						me.fade()
						if(me.opacity>0){
							setTimeout(me.s,me.speed);
						}else{
							if(me.fnc!=null){me.fnc()}
						}
					}
					setTimeout(me.s,me.speed);
				})();
			}			
		}
	}
	var _init = function(){
		var d = document.getElementsByTagName("ul")
		var l = d.length;
		for(var i=l-1;i>-1;i--){
			(function(){
				var im = [];
				im[0] = new Image();						//frontscreen
				im[1] = new Image();						//backscreen
				im.a=[];							//image path container
				var e = d[i];
				if(e.className.indexOf("fadeShow")>-1){					//class check ul elements
					var k = e.children
					for(var j=0;j<k.length;j++){
						im.a.push(k[j].innerHTML);			//stores image paths
					}
					im.w = parseInt(e.style.width);
					im.h = parseInt(e.style.height);
				}
				im[0].src=im.a[0];						//assign inital forescreen image
				if(im.a.length>1){
					im[1].src=im.a[1];					//assign initial backscreen image if any
				}
				d[i].style.visibility="visible";
				(function(){
					var d = document.createElement("div");			//create fadeshow container
					d.style.position="relative";				//configure fadeshow

					if(!isNaN(im.w)){
						d.style.width=im.w+"2px";				//user set inline width/height;
						d.style.height=im.h+"2px";
					}else{
						//INITIAL DIMS ARE SET TO 0!
						d.style.width=im[0].width+"2px";				//this will set correctly on reload or when
						d.style.height=im[0].height+"2px";			//the user refreshes or browses back to the page.
	
						//CLUNKY SOLUTION - DIMS SET AFTER 1ST IMG LOAD
						if(im[0].width<1)
							(function(d){						//set the dimensions of the container after the
								var d = d;					//first image has loaded and its dimensions are.
								im[0].onload=function(){			//avilable/
									d.style.width=this.width+"2px";
									d.style.height=this.height+"2px";
								}
							})(d);
					}
					delete im.w;
					delete im.h;
					im[0].style.position="absolute";
					im[1].style.position="absolute";
					if(document.all){					//install fadeshow
						e.replaceNode(d);
					}else{
						var p = e.parentNode;
						p.replaceChild(d,e);
					}
					d.appendChild(im[1]);					//add frontscreen to fadeshow container
					d.appendChild(im[0]);					//add backscreen to fadeshow container
					im.a0 = new _animOpacity(im[0]);			//create and add animations
					im.a1 = new _animOpacity(im[1]);
					im.a0.setValue(1);
					im.a1.setValue(0);
					var me = im;						//ref to the tortured array
					im.delay=4500+Math.floor(Math.random()*1000);		//the image swap frequency
					im.cnt=0;
					im.s=function(){					//The fadeshow for this object
						//me.testDims();
						me.cnt++;
						me.cnt%=me.a.length;				//clamp upper limit of cnt to the number of images
						me[1].src=me.a[me.cnt];
						me.a0.anim(-.02,10);				//a0 is alpha animation for forescreen (alpha anim speed=10)		
						me.a1.anim(.02,10,function(){			//a1 is alpha animation for backscreen (alpha anim speed=10)
							me[0].src=im[1].src;
							me.a0.setValue(1);			//fully turn on image at end of animation cycle
							me.a1.setValue(0);			//fully turn off image at end of animation cycle
							setTimeout(me.s,me.delay);		//set time to start the next cycle
						});
					}
					setTimeout(im.s,im.delay);				//start it in motion
				})();
			})();
		}
	}
	return {
		init:function(){_init()}
	}
})();

/* 
|  Just load the FadeShow object into the page at startup and you're 
|  ready to go.
|
|  You can remove this clunky initialzation, just remember to call
|  fadeShow.init after the document body is avilable.
+------------------------------------------------------------------------------*/
var clunkyload=(window.attachEvent)?window.attachEvent("onload",fadeShow.init):
	(window.addEventListener)?window.addEventListener("load",fadeShow.init,true):
	window.onload=fadeShow.init;
delete clunkyload
