/* 
	version: 1.9ish 
	changes: 
			Added animations. 
			Added easing to animations.
			Added new images. (The transitions between hoverstates should feel more smooth now).
			Added mouseEnter/mouseLeave events (Crossbrowser)
			Bind events as soon as we find the banner-element. No longer waits for entire page to load.
			Wrapped everything up in a self invoking function to minimize global namespace pollution and prevent overwriting of existing functions / variables
			Made the banner push down the content again.
	ToDo:	
			Optimize optimze optimize...
*/
(function(window,document,undefined) {

	// Add mouseEnter/mouseLeave events to all browsers (can't use mouseOver/mouseOut here because the span inside the banner will trigger the mouseOut event on the banner and hide it)
	var xb={evtHash:[],ieGetUniqueID:function(_elem){if(_elem===window){return'theWindow'}else if(_elem===document){return'theDocument'}else{return _elem.uniqueID}},addEvent:function(_elem,_evtName,_fn,_useCapture){if(typeof _elem.addEventListener!='undefined'){if(_evtName=='mouseenter'){_elem.addEventListener('mouseover',xb.mouseEnter(_fn),_useCapture)}else if(_evtName=='mouseleave'){_elem.addEventListener('mouseout',xb.mouseEnter(_fn),_useCapture)}else{_elem.addEventListener(_evtName,_fn,_useCapture)}}else if(typeof _elem.attachEvent!='undefined'){var key='{FNKEY::obj_'+xb.ieGetUniqueID(_elem)+'::evt_'+_evtName+'::fn_'+_fn+'}';var f=xb.evtHash[key];if(typeof f!='undefined'){return}f=function(){_fn.call(_elem)};xb.evtHash[key]=f;_elem.attachEvent('on'+_evtName,f);window.attachEvent('onunload',function(){_elem.detachEvent('on'+_evtName,f)});key=null}else{_elem['on'+_evtName]=_fn}},mouseEnter:function(_pFn){return function(_evt){var relTarget=_evt.relatedTarget;if(this==relTarget||xb.isAChildOf(this,relTarget)){return}_pFn.call(this,_evt)}},isAChildOf:function(_parent,_child){if(_parent==_child){return false};while(_child&&_child!=_parent){_child=_child.parentNode}return _child==_parent}};
	
	var siteNumPlayers = 4226,
		leaderName = 'BRANDARIS',
		leaderAlliance = 'puffs',
		getElementTimer = null,
		bannerWrapper = null,
		b1 = new Image(1000,50),
		b2 = new Image(1000,300);

	
	// Set image props (works as preloader too.)
	// We really don't need 2 images anymore. But the first one is smaller and loads faster so it's good to have it there to prevent a blank blue sky while the large image is loading.
	b1.src = "http://www.battleofthecheetos.com/banner/images/1000x50.jpg";
	//b1.src = "1000x50.jpg";
	b1.height = "50";

	b2.src = "http://www.battleofthecheetos.com/banner/images/1000x300.jpg";
	//b2.src = "1000x300.jpg";
	b2.height = "300";

	
	function expandBanner() {
		// Switch to the large banner-image
		document.images['cheetos'].src = b2.src;
		document.images['cheetos'].height = 300;
		if (!bannerWrapper.currentHeight) bannerWrapper.currentHeight = 50; 
		animateBanner(bannerWrapper, bannerWrapper.currentHeight, 300, 15, 10, 0.5);
	}

	function contractBanner() {
		animateBanner(bannerWrapper, bannerWrapper.currentHeight, 50, 15, 10, 1.5);
	}
	
	function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) { 
		var delta = maxValue - minValue; 
		var stepp = minValue+(Math.pow(((1 / totalSteps) * actualStep), powr) * delta); 
		return Math.ceil(stepp) 
	}
	
	function animateBanner(elem,startHeight,endHeight,steps,intervals,powr) { 
		if (elem.heightChange) {
			window.clearInterval(elem.heightChange);
		}
		
		var actStep = 0;
		
		elem.heightChange = window.setInterval(function() { 
			elem.currentHeight = easeInOut(startHeight,endHeight,steps,actStep,powr);
			elem.style.height = elem.currentHeight + "px"; 
			actStep++;
			if (actStep > steps) window.clearInterval(elem.heightChange);
		} ,intervals);
	}
	
	// Check for #chbwrap and when we find it, clear the interval and bind events
	if(document.getElementById) {
		(function checkForBannerElementInDOM(){
			if(document.getElementById('chbwrap')) {
				window.clearTimeout(getElementTimer);
				bannerWrapper = document.getElementById('chbwrap');
				xb.addEvent(bannerWrapper, 'mouseenter', expandBanner, false);
				xb.addEvent(bannerWrapper, 'mouseleave', contractBanner, false);
			}
			else {
				getElementTimer = window.setTimeout(checkForBannerElementInDOM, 1 );
			}
		})();
	}
	
	// Print the banner on page
	var htmlString = '<a id="chbwrap" style="outline:0;text-decoration:none;display:block;position:relative;z-index:9999;background: url(http://www.battleofthecheetos.com/banner/images/bgr_1000x300.jpg) repeat-x 0 0;height:50px;overflow:hidden;" href="http://www.battleofthecheetos.com/?banner=true&siteid=39&utm_source=39&utm_medium=banner&utm_content=shield&utm_campaign=takeover" target="_blank">'+
						'<img name="cheetos" id="cheetos" src="' + b1.src + '" style="border:0;display:block;margin:0 auto;" width="1000" height="50" />'+
						'<span style="cursor:pointer;font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px;line-height:20px;font-weight:normal;color:#fff;text-align:center;width:644px;display:block;position:absolute;top:71px;left:50%;margin-left:-300px;text-shadow:0px 0px 10px #426782;">'+
							siteNumPlayers + ' ARMIES ARE FIGHTING FOR CONTROL OF THE WEB.<br />'+
							'AND ' + leaderName + ' OF THE ' + leaderAlliance.toUpperCase() + ' ALLIANCE IS CURRENTLY RULING <br />'+
							'THIS SITE. ENLIST NOW AND TRY TO OVERTHROW THEM.'+
						'</span>'+
					'</a>';
						
	document.write(htmlString);
	
})(this,this.document);