function headerTransparantSlider (appendTo) {
	var item = [];
	var activeImg = 0;
	var container;
	var animation = null;
	var myWidth, myHeight;
	var interval;
	var loader = null;
	
	var images	= [];
	
	this.init = function () { };
	
	this.addItem = function (src) {
		getBrowserWidth();
		item.push(src);
	};
	
	this.render = function () {
		container = document.createElement("div");
			appendTo.appendChild(container);
			container.className = 'headerContainer';
			container.style.overflow = 'hidden';
		var highestImg = 0;
		
		loader		= document.createElement('img');
		loader.src	= baseUrl + 'source/img/ajax-loader.gif';
		loader.className = 'loader';
		container.appendChild(loader);
		
		renderItems(highestImg);
		activeImg = 0;
		
		setInterval();
	};
	
	var renderItems = function (highestImg, i) {
		if (i === undefined)
			i = 0;
		
		if (item[i] !== undefined) {
			var div = document.createElement("div");
				container.appendChild(div);
				if(myWidth < headerWidth){
					var diff	= headerWidth - myWidth;
					div.style.marginLeft = "-" + (diff / 2) + "px";
				}
				// div.style.marginLeft	= "-600px";
				div.style.marginTop 	= "-" + highestImg + 'px';	
				div.style.lineHeight 	= '0px';
				div.style.marginTop 	= '-' + highestImg + 'px';
				div.style.position		= 'relative';
				div.style.zIndex		= (i == 0)? '1' : '0';
				div.style.width 		= headerWidth + 'px';
				div.style.height 		= headerHeight + 'px';
				div.style.visibility	= 'hidden';
				
			var img = new Image();
				img.src = item[i];
				img.onload = function () {
					if (loader !== null) {
						container.removeChild(loader);
						loader = null;
					}
					this.parentNode.style.visibility = 'visible';
					if (item[(i+1)] !== undefined)
						renderItems(highestImg, (i+1));
				};
				div.appendChild(img);
			
			
			if (highestImg < div.offsetHeight)
				highestImg = div.offsetHeight;
		}
		
		return;
		
	};

	var setInterval = function () {
		interval	= window.setInterval(function () {
			var oldWidth = myWidth;
			getBrowserWidth();
			if (oldWidth != myWidth) {
				var diff	= headerWidth - myWidth;
				for ( var i = 0; i < container.children.length; i++ ) {
					container.children[i].style.marginLeft = '-' + (diff / 2) + 'px';
				}
			}
		}, 20);
	};

	var getBrowserWidth = function () {
		if( typeof( window.innerWidth ) == 'number' ) {

		//Non-IE

		myWidth = window.innerWidth;
		myHeight = window.innerHeight;

		} else if( document.documentElement &&

		( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

		//IE 6+ in 'standards compliant mode'

		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;

		}
	};
	
	var animating = false;
	this.next = function (callBack) {
		if (!animating) {
			var fadeImage = container.children[activeImg];
			activeImg++;
			if (container.children[activeImg] === undefined)
				activeImg = 0;
			var startImage	= container.children[activeImg];
			
			fadeImage.style.zIndex = 2;
			startImage.style.zIndex = 1;
			
			
			animating =true;
			animation = new smoothAnimationHelper(0 ,100, 5);
				animation.onStep = function (value, speed) {
					var fadeOut = 100 - value;
					fadeImage.style.opacity = (fadeOut / 100);
					fadeImage.style.filter  = "alpha(opacity=" + fadeOut.toFixed() + ")";
				};
				animation.onReady = function () {
					fadeImage.style.zIndex = 0;
					fadeImage.style.opacity = (1);
					fadeImage.style.filter  = "alpha(opacity=" + 100 + ")";
					startImage.style.zIndex = 1;
					animating = false;
					if (callBack !== undefined) 
						callBack();
				};
		}
	};

	this.callImage = function (callBack, number) {
		if (!animating) {
			var fadeImage = container.children[activeImg];
			if (container.children[number] === undefined)
				number = 0;
			var startImage	= container.children[number];
			activeImg		= number;

			fadeImage.style.zIndex = 2;
			startImage.style.zIndex = 1;


			animating =true;
			animation = new smoothAnimationHelper(0 ,100, 5);
				animation.onStep = function (value, speed) {
					var fadeOut = 100 - value;
					fadeImage.style.opacity = (fadeOut / 100);
					fadeImage.style.filter  = "alpha(opacity=" + fadeOut.toFixed() + ")";
				};
				animation.onReady = function () {
					fadeImage.style.zIndex = 0;
					fadeImage.style.opacity = (1);
					fadeImage.style.filter  = "alpha(opacity=" + 100 + ")";
					startImage.style.zIndex = 1;
					animating = false;
					if (callBack !== undefined)
						callBack();
				};
		}
	};
	
	this.back = function (callBack) {
		if (!animating) {
			var fadeImage = container.children[activeImg];
			activeImg--;
			if (activeImg === -1)
				activeImg = (container.children.length -1 );
			
			var startImage	= container.children[activeImg];
			
			
			fadeImage.style.zIndex = 2;
			startImage.style.zIndex = 1;
			animating =true;
			animation = new smoothAnimationHelper(0 ,100, 5);
				animation.onStep = function (value, speed) {
					var fadeOut = 100 - value;
					
					if (fadeOut === 0)
						fadeOut = 1;
					
					fadeImage.style.opacity = (fadeOut / 100);
					fadeImage.style.filter  = "alpha(opacity=" + fadeOut.toFixed() + ")";
				};
				animation.onReady = function () {
					fadeImage.style.zIndex = 0;
					fadeImage.style.opacity = (1);
					fadeImage.style.filter  = "alpha(opacity=" + 100 + ")";
					startImage.style.zIndex = 1;
					animating = false;
					if (callBack !== undefined) 
						callBack();
				};
		}
	};
	
	this.getActiveImage = function () {
		return activeImg;
	};
	this.init();
	
	this.destroy = function () {
		item = new Array();
	};
}

new Header();