var bnFeatures = [];
var bnPosition = 0;
var bnScrollActive = true;
 
function animate(ele, iTargetX, uTotalTime){
  var startX = ele.scrollTop;
  var disp = iTargetX - startX; // total displacement
  var freq = Math.PI / (2 * uTotalTime); // frequency
  var startTime = new Date().getTime();
  var tmr = setInterval(
    function() {
      var elapsedTime = new Date().getTime() - startTime;
      if (elapsedTime < uTotalTime) {
        var f = Math.abs(Math.sin(elapsedTime * freq));
        ele.scrollTop = Math.round(f * disp + startX);
      }
      else {
        clearInterval(tmr);
        ele, iTargetX;
      }
    }, 10
  );
}
 
function setOpacity(ele, value) {
	ele.style.opacity = value/10;
	ele.style.filter = 'alpha(opacity=' + value*10 + ')';
}
 
function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}
 
addOnloadEvent(function(){
 
	var bnWrapper = document.getElementById("featureHolder");
 
	var imgHolder = document.getElementById("featureOutlineBlock");
	var titleHolder = document.getElementById("featureHeaderText");
	var priceHolder = document.getElementById("featurePriceHolder");
	var dataHolder = document.getElementById("featureDataBG");
        var dataHolderMain = document.getElementById("featureData");
 
	bnWrapper.onmouseover = function(e){
		bnScrollActive = false;
	}
	bnWrapper.onmouseout = function(e){
		bnScrollActive = true;
	}
	
	setOpacity(dataHolder, 7)
	for (var i=0;i<bnFeatures.length;i++){
		  var newDiv = document.createElement("div");
		  newDiv.id = 'bnFb-' + i;
		  newDiv.className = "featureBlock";
		  if(bnFeatures[i].link != null){
			newDiv.innerHTML = '<a href="'+bnFeatures[i].link+'" style="height: 190px; display:block;">&nbsp;</a>';
		  }else{
			newDiv.innerHTML = '&nbsp;';
		  }
		  newDiv.style.backgroundImage = "url("+bnFeatures[i].image+")";
		 
		  imgHolder.appendChild(newDiv);
 
		  var newLi = document.createElement("li");
		  newLi.id = 'bnDot-' + i;
		  newLi.innerHTML = '<a href="#">&nbsp;</a>';
		  newLi.onclick = function(e){
			var clickNum = this.id.split('-')[1];
			bnPosition = clickNum;
			updateBan(clickNum);
		    animate(imgHolder, document.getElementById('bnFb-' + clickNum).offsetTop, 1000);
			void(0);
			return false;
		  };	
		  document.getElementById("featureControls").appendChild(newLi);
	}
	updateBan(0);
	imgHolder.scrollTop = 0;
	setInterval(function(){
		if(bnScrollActive){
			if((bnPosition < bnFeatures.length-1)){
				bnPosition++;
				updateBan(bnPosition);
				animate(imgHolder, document.getElementById('bnFb-'+(bnPosition)).offsetTop, 1000);
			}else{
				bnPosition = 0;
				updateBan(0);
				animate(imgHolder, 0, 1000);
			}
		}
	}, 8000 );
 
	function updateBan(i) {
		if(bnFeatures[i].headerTxt == " "){
			dataHolder.style.display = 'none'; titleHolder.style.display = 'none'; priceHolder.style.display = 'none'; dataHolderMain.style.display = 'none';
		}else{
			dataHolder.style.display = 'block'; titleHolder.style.display = 'block'; priceHolder.style.display = 'block'; dataHolderMain.style.display = 'block';
			titleHolder.innerHTML = bnFeatures[i].header;
			priceHolder.innerHTML = bnFeatures[i].prices;	
		}
		for (i2=0;i2<bnFeatures.length;i2++){
			if(i==i2){
				document.getElementById('bnDot-'+i2).className = "dot on";
			}else{
				document.getElementById('bnDot-'+i2).className = "dot";
			}
		}
	}
});