/////////////////////////////////////////////////
// ********* VARIABLE OPACITY SCRIPT ********* //
// ******** COPYRIGHT: BRIAN GOSSELIN ******** //
// ********* HTTP://SCRIPTASYLUM.COM ********* //
//
// INSTRUCTIONS:
// COPY AND PASTE THE CODE BELOW IN THE HEAD AREA OF YOUR PAGE:
// 
// <script language="javascript" src="opacity.js"></script>
//
// THEN, RIGHT BEFORE THE END BODY TAG ADD ALL YOUR OBJECTS THAT
// YOU WANT THE FADE IN EFFECT ENABLED.
//
// USAGE: 
//
// addFadeObject( id_value_string, percent_step, start_value, end_value, speed);
//
// WHERE:
// id_value_string = An ID value you gave to an HTML element. This ID must exist in your page somewhere!
// percent_step = Percentage increase/decrease in opacity per change iteration.
// start_value = Starting opacity value. minimum value is 0 (transparent), maximum value is 100 (opaque).
// end_value = Ending opacity value. minimum value is 0 (transparent), maximum value is 100 (opaque).
// speed = Number of milliseconds between changes in opacity steps.
//
// EXAMPLE:
//
// addFadeObject('div1', 10, 0, 100, 50); THIS EXAMPLE WOULD FADE INTO VIEW
// addFadeObject('div2', 10, 100, 0, 50); THIS EXAMPLE WOULD FADE OUT OF VIEW
//
// FOR "REAL WORLD" EXAMPLE, REFER TO THE DEMO.
//
/////////////////////////////////////////////////

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var IE4 = (document.all && !document.getElementById)? true : false;
var IE5 = (document.getElementById && document.all)? true : false;
var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var W3C = (document.getElementById)? true : false;
var idlist=new Array();
var ctr=0;

//(element_string, %_per_iteration, start_op, end_op, iteration_speed);

function addFadeObject(el,step,starto,endo,speed){
if(!NS4){
var idx=idlist.length;
idlist[idx]=(IE4)? document.all[el] : document.getElementById(el);
idlist[idx].ostep=step;
idlist[idx].step=step;
idlist[idx].starto=starto;
idlist[idx].endo=endo;
idlist[idx].speed=speed;
idlist[idx].id=0;
idlist[idx].count=0;
idlist[idx].fin=true;
idlist[idx].idx=idx;
idlist[idx].onmouseover=function(){
  clearInterval(idlist[idx].id);
  if(idlist[idx].fin)idlist[idx].count=idlist[idx].starto;
  idlist[idx].step=(idlist[idx].starto>idlist[idx].endo)? -idlist[idx].ostep : idlist[idx].ostep;
  idlist[idx].fin=false;
  idlist[idx].id=setInterval('adjop('+this.idx+')', this.speed);
  }
idlist[idx].onmouseout=function(){
  clearInterval(idlist[idx].id);
  if(idlist[idx].fin)idlist[idx].count=idlist[idx].endo;
  idlist[idx].step=-idlist[idx].step;
  idlist[idx].fin=false;
  idlist[idx].id=setInterval('adjop('+this.idx+')', this.speed);
  }
}}

function adjop(idx){
var curr=idlist[idx];
if(IE4||IE5)curr.style.filter="alpha(opacity="+curr.count+")";
if(NS6)curr.style.MozOpacity=curr.count/100;
curr.count+=curr.step;
if(!(((curr.starto>=curr.count)&&(curr.endo<=curr.count))||((curr.starto<=curr.count)&&(curr.endo>=curr.count)))){
clearInterval(curr.id);
curr.fin=true;
}}