var img = null;
var enableAnimate = false;

function bannerAnimate(){
	var o = document.getElementById('banner-bg');
	if (!img){
		img = new Image();
	}
	if (!enableAnimate) {
		var src = getStyle(o, 'backgroundImage');
		if (src == '') return;
		img.src = src.match(/url\(['"]?([^'"]*)['"]?\)/)[1];
		img.onload = function(){
			enableAnimate = true;
		}
		return;
	}
	
	var bgPos = getStyle(o, 'backgroundPosition');
	if (!bgPos) 
		bgPos = [0,0];
	else
		bgPos = bgPos.split(' ');
	
	var 
		x = parseInt(bgPos[0]), 
		y = parseInt(bgPos[1]),
		w = parseInt(getStyle(o, 'width')),
		h = parseInt(getStyle(o, 'height')),
		d = 1,
		opac = 1;
	if (!o.d) o.d = d;
	else d = o.d;
	
	if (((d > 0) ?
	 ((-x < (img.width - w - 1)) && (-y < (img.height - h - 1))) :
	 ((-x > 0) && (-y > 0))
	)){
		x-= 1*d; y-= 1*d;
	}
	else{
		d = -d;
		o.d = d;
	}
	
	var dw = img.width - w;
	var dh = img.height - h;
	if (dh < dw)
		opac = 1 + y * 1.0 / dh;
	else
		opac = 1 + x * 1.0 / dw;
	opac = opac * 0.85 + 0.15;
	if (opac > 1) opac = 1.0;
	if (opac < 0) opac = 0;

	o.style.backgroundPosition = x + 'px ' + y + 'px';
	o.style.opacity = opac;
}

var getStyle = function(){         
	var view = document.defaultView;
	return view && view.getComputedStyle ?
	function(el, prop){
		var el, v, cs;
		if(el == document) return null;
		return (v = el.style[prop]) ? v : 
			(cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
	} :
	function(el, prop){      
		var el, cs;     
		if(el == document) return null;      
		return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
	};
}();