/*  Banner rotator v1.0 - 05/08/2010 - mike foskett for http://websemantics.co.uk
    Requires: hasJS.js
    Example HTML:

      <div>
        <ul id="bannerButtons">
          <li class="show"><a href="#h1">1</a></li>
          <li><a href="#h2">2</a></li>
          <li><a href="#h3">3</a></li>
        </ul>
        <ul id="bannerStamps">
          <li id="h1" class="show"><a href="#"><img src="stampA.jpg" width="400" height="300" alt="link description" /></a></li>
          <li id="h2"><a href="#"><img src="stampB.jpg" width="400" height="300" alt="link description" /></a></li>
          <li id="h3"><a href="#"><img src="stampC.jpg" width="400" height="300" alt="link description" /></a></li>
        </ul>
      </div>

    No limit to the number of anchors and stamps.

    Example CSS:

      img {border:0 solid;}
      div {position:relative; width:400px}
      .hasJS div {height:300px; overflow:hidden}

      #bannerButtons {display:none}
      .hasJS #bannerButtons {display:block; position:absolute; top:5px; right:7px; z-index:1000;}
      #bannerButtons li {margin-left:5px; float:left; display:inline}
      #bannerButtons a,
      #bannerButtons a:link,
      #bannerButtons a:visited {border:1px solid #fff; display:block; float:left; font:bold large arial,sans-serif; padding:0 0.4em; color:#fff; background:#555; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
      #bannerButtons a:hover,
      #bannerButtons a:active,
      #bannerButtons a:focus {outline:none; color:black; background:white; border-color:black}
      #bannerButtons .show a,
      #bannerButtons .show a:link,
      #bannerButtons .show a:visited,
      #bannerButtons .show a:hover,
      #bannerButtons .show a:active,
      #bannerButtons .show a:focus {color:white; background:#000; border-color:white}

      .hasJS #bannerStamps li {position:absolute; top:0; left:0; width:400px; height:300px; overflow:hidden}
      #bannerStamps li.show {z-index:100}
      #bannerStamps li.next {z-index:110}

*/

var currentLi=0,
    nextLi=1;

var bannerRotator=function(){

  var buttonAreaId="bannerButtons",
      stampAreaId="bannerStamps",
      currentLiClass="show",
      nextLiClass="next",
      rotationTime=3000, // ms
      stepTimer=65; // ms

  var bannerStampsLis,
      bannerStampsLen,
      t,t2,
      As,
      fading=false,
      activationDelay=250;

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

  function incVariables(c,n){
    var s=document.getElementById('bannerStamps').getElementsByTagName('li');
    if (currentLi===nextLi)
    {
      nextLi++;
      if (nextLi>s.length){nextLi=0;}
      incVariables(c,n);
    }
    //setOpacity(c,0);
    currentLi=nextLi;
    if (currentLi>s.length)
    {
      currentLi=0;
    }
    for (var i=0;i<s.length;i++){
      if (i==currentLi){
        s[i].className=currentLiClass;
      }else{
        s[i].className="";
      }
    }
    nextLi++; 
    if(nextLi>=bannerStampsLen){nextLi=0;}
    fading=false;
  }

  function highlightButton(obj){
    for (var k=0;k<As.length;k++){
      // reset existing class names
      As[k].parentNode.className="";
    }
    // set class name
    obj.parentNode.className=currentLiClass;
  }


  // auto-change of hero image links
  // changes currentLi to nextLi
  // updates variable currentLi and nextLi upon completion.
  function changeLi(){
    if (fading){
      setTimeout('bannerRotator.changeLi;',10);
    }
    fading=true;
    var cid=bannerStampsLis[currentLi].id,
        nid=bannerStampsLis[nextLi].id;
    setOpacity(bannerStampsLis[nextLi].id,10);
    bannerStampsLis[nextLi].className=nextLiClass;
    //change currentLi
    highlightButton(As[nextLi]);

    for (var c=1;c<20;c++){
      setTimeout('bannerRotator.setOpacity("'+bannerStampsLis[nextLi].id+'",10+'+c*5+');',stepTimer*c);
    }

    // Increment variables
    setTimeout('bannerRotator.incVariables("'+cid+'","'+nid+'");',(stepTimer*20)+5);
  }



  function getAnchorFromURI(u){return u.slice(u.lastIndexOf('#')+1);}

  function stopChangeLi(){clearInterval(t);}
  function startChangeLi(){t=setInterval('bannerRotator.changeLi();',rotationTime);}

  function buttonClicked(){
    if (fading){
      setTimeout('bannerRotator.buttonClicked;',10);
    }else{
//alert(this.href)
      // stop auto-change
      stopChangeLi();
      //set clicked item as next
      nextLi=getAnchorFromURI(this.href).replace('h','')-1;
      //change item
      changeLi();
      //restart the auto-change
      startChangeLi();
    }
    return false;
  }

  function init(){
    /* author: Simon Willisons - http://simonwillison.net/2004/May/26/addLoadEvent/ */
    function addLoadEvent(f){var o=window.onload;if(typeof window.onload!='function'){window.onload=f;}else{window.onload=function(){if(o){o();}f();};}}

    addLoadEvent(function(){

      // Give global variables usable values
      bannerStampsLis=document.getElementById(stampAreaId).getElementsByTagName('li');
      bannerStampsLen=bannerStampsLis.length;
      As=document.getElementById(buttonAreaId).getElementsByTagName('a');

      if (As){

        // button links - Activate on click only!
        for (var i=0;i<As.length;i++){
          As[i].onclick=buttonClicked;
        }

        // start auto-change
        startChangeLi();

        // pause auto-change on mouseover or focus
        for (var i=0;i<bannerStampsLen;i++){
          bannerStampsLis[i].onmouseover=stopChangeLi;
          bannerStampsLis[i].onfocus=stopChangeLi;
          bannerStampsLis[i].onmouseout=startChangeLi;
          bannerStampsLis[i].onblur=startChangeLi;
        }
      }

    });

  }

  return{ // externally available functions
    init:init,
    setOpacity:setOpacity,
    changeLi:changeLi,
    incVariables:incVariables,
    buttonClicked:buttonClicked
  };

}();

bannerRotator.init();