/* cross-fading_disjointed_image_rollover.js */

/* author: Simon Willisons - http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
function addLoadEvent(f){var o=window.onload;if(typeof window.onload!='function'){window.onload=f}else{window.onload=function(){o();f()}}}

// standard functions
function $id(id){return(document.getElementById(id)?document.getElementById(id):false)}
function idExists(id){return($id(id)?true:false)}
function isDom(){return (document.getElementById&&document.getElementsByTagName&&document.createElement)?true:false}

function setOpacity(id,opacity){
  var object=$id(id).style;
  object.opacity=opacity/100;
  object.MozOpacity=opacity/100;
  object.KhtmlOpacity=opacity/100;
  object.filter="alpha(opacity="+opacity+")";
}

/* author: Steffen Rusitschka - http://www.ruzee.com/blog/2006/07/retrieving-css-styles-via-javascript/ */
function hyphenToCamel(s){for(var exp=/-([a-z])/;exp.test(s);s=s.replace(exp,RegExp.$1.toUpperCase()));return s;};

function getStyleProperty(id,property){
  // note this function is not 100% generic for all css properties
  var obj=$id(id),value='';
  if(window.getComputedStyle){
    value=window.getComputedStyle(obj,null).getPropertyValue(property);
  }else{
    if(obj.currentStyle){
      value=obj.currentStyle[hyphenToCamel(property)];
    }
  }
  return value;
}

function disjointedRollover(id,linkContainer,overlayID,spriteExt){
  if (idExists(id)){

    // get original bg image name
    var newImg=getStyleProperty(id,'background-image');
    //remove text styling "url()"
    newImg=newImg.replace('url(','').replace(')','');
    // remove IE ""
    newImg=newImg.replace(/"/g,'');

    // replace extension with .sprite.extension
    var ext=newImg.substring(newImg.lastIndexOf("."));
    newImg=newImg.replace(ext,spriteExt+ext);

    // preload rollover image and attach variables
    var img=new Image();
    img.overlayID=overlayID;
    img.spriteExt=spriteExt;
    img.disjointID=id;
    img.onload=function(){

      // image loaded so replace background image
      $id(id).style.backgroundImage="url("+img.src+")";

      // create an overlay span for fading
      var sp=document.createElement('span');
      sp.id=img.overlayID;
      sp.className=$id(id).className;
      sp.style.backgroundImage="url("+img.src+")";

      // main graphic acts as link
      sp.onclick=function(){
        window.location=$id(this.className).href;
      }

      //  add overlay to sectionTop
      $id(id).appendChild(sp);

    var rollover=function(){
          var obj=$id(img.overlayID)
          // set overlay initial opacity and position (via class)
          setOpacity(img.overlayID,0);
          obj.className=this.id;

          // fade in overlay: adjust 101 for fade steps, currently there's 4.
          for(var i=25;i<101;i+=25){
            setTimeout("setOpacity('"+img.overlayID+"',"+i+")",i*2);
          }

          // set bg img position
          setTimeout("$id('"+img.disjointID+"').className='"+this.id+"'",i*2);

          // switch off overlay
          setTimeout("setOpacity('"+img.overlayID+"',0)",i*2);
    }


      // add mouseover actions to links
      var liAs=$id(linkContainer).getElementsByTagName('a');
      for (var i=0;i<liAs.length;i++){
        liAs[i].onmouseover=rollover;
        liAs[i].onfocus=rollover;
      }

    }
    img.src = newImg;
  }
}

function disjointedRolloverMIN(A,l,o,e){if(idExists(A)){var N=getStyleProperty(A,'background-image').replace('url(','').replace(')','').replace(/"/g,''),X=N.substring(N.lastIndexOf(".")),G=new Image();N=N.replace(X,e+X);G.o=o;G.e=e;G.J=A;G.onload=function(){$id(A).style.backgroundImage="url("+G.src+")";var sp=document.createElement('span');sp.id=G.o;sp.className=$id(A).className;sp.style.backgroundImage="url("+G.src+")";sp.onclick=function(){window.location=$id(this.className).href};$id(A).appendChild(sp);var r=function(){var obj=$id(G.o);setOpacity(G.o,0);obj.className=this.id;for(var i=25;i<101;i+=25){setTimeout("setOpacity('"+G.o+"',"+i+")",i*2)};setTimeout("$id('"+G.J+"').className='"+this.id+"'",i*2);setTimeout("setOpacity('"+G.o+"',0)",i*2)};var L=$id(l).getElementsByTagName('a');for(var i=0;i<L.length;i++){L[i].onmouseover=r;L[i].onfocus=r}};G.src=N}}


function setup(){
  /*
  id of disjointed object,
  id of object containing the links,
  id of the overlay to be created,
  extension of disjointed image sprite
  */
  disjointedRolloverMIN('sectionTop','sectionTop',"overlay",".sprite")
}


if (isDom()){
  addLoadEvent(setup);
}