window.onresize = function () {
	var myWidth = 0;
	var	myHeight = 0;
	
	if (typeof( window.innerWidth ) == 'number') {
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} 
	else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} 
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}

	var d = myWidth > 1202 ? "block" : "none";
	
	document.getElementById("popOutLeft").style.display = d;
	document.getElementById("popOutRight").style.display = d;
}

function bannerScrolling(fullSizeImageList) 
{
	this.construct(fullSizeImageList);
}

bannerScrolling.prototype = 
{
	construct : function (scrollingImageList) 
	{
		window.onresize();
		
		this.scrollWidth = 912 - (14 * 2);
		this.flipDot = false;
		
		this.sideCharactersLX = 800;
		this.sideCharactersRX = -800;
		
		this.tag = new __TAG();
		this.addSlidingFrames(scrollingImageList);

		this.sideNavigation = 0;
		this.buttonGap = 46;
		this.leftCharacterVisible = false;
		this.rightCharacterVisible = false;
		this.reset();
		
		this.timer = new Timer();
		this.timer.start(50, this.animate, this);
		
		if(!isTouchDevice())
		{
			this.popoutTimer = new Timer();
			this.popoutTimer.start(25, this.popout, this);		
		}

		this.fromAlpha = 0;
		this.toAlpha = 0;
		this.shouldFade = false;

		this.fadeFrom = this.allSlides.length-1;
		this.fadeTo = 0;
		this.applyAlpha(this.allSlides[this.fadeTo], 1);
	},
	
	popout : function () 
	{
		var hideShow = {hide: -200, show: 0};
	
		for (var i in this.sideNavs) 
		{
			xPos = this.calcPosition(this.NavXPOS[i], this.sideNavigation == 0, hideShow);
			this.sideNavs[i].style.left = xPos + "px"; 
			this.NavXPOS[i] = xPos;
			hideShow = {hide: 1000, show: 848};
		}
		xPos = this.calcPosition(this.sideCharactersLX, this.leftCharacterVisible == false, {hide: 800, show : 0});
		this.sideCharacters[0].style.left = xPos + "px";
		this.sideCharactersLX = xPos;

		xPos = this.calcPosition(this.sideCharactersRX, this.rightCharacterVisible == false, {hide: -800, show : 0});
		this.sideCharacters[1].style.left = xPos + "px";
		this.sideCharactersRX = xPos;
	},
	
	calcPosition : function (currentXY, isHidden, targetLocation) {
		targetXY = (isHidden) ? targetLocation.hide : targetLocation.show;
			
		results = (targetXY - currentXY) / 4;
		if (Math.abs(results) < 0.01) {
			currentXY = isHidden ? targetLocation.hide : targetLocation.show;
		}
		else {
			currentXY += results;
		}
		return currentXY;
	},
	
	getXY : function (obj) {
		var curleft = 0;
		var curtop = 0;
		if (obj.offsetParent) {
            do {
                  curleft += obj.offsetLeft;
                  curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
		}
		return {x : curleft, y : curtop};
	},
	
	clicked : function(e) 
	{
		var posx = 0;
		var posy = 0;
		if (!e) var e = window.event;
		
		var target = e.target || e.srcElement;
		
		var xy = target.classOwner.getXY(target);
		
		if (e.pageX || e.pageY) 
		{
			posx = e.pageX;
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY) 
		{
			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		var xPos = posx - xy.x;
		var yPos = posy - xy.y;
		
		var frames = target.classOwner.frames;
		window.location = frames[target.classOwner.fadeTo].URL;	
		return;
	},
	
	addSlidingFrames : function(imageList) 
	{
		this.frames = new Array();
		
		var sliderContainer = document.getElementById("sliderWindow");
		var slideXPos = 0;
		var slideID = 0;
		
		var totalImages = imageList.length;
		var navGap = 20;
		var navWidth = 9;
		var xPos = 20;
		
		this.animateDotX = xPos;
		this.animateDotGap = navWidth + navGap;
		
		var width = ((totalImages * (navWidth + navGap)) + 80);
		var navXPos = (this.scrollWidth - width) / 2;
		
		this.bannerNavigation = this.tag.add("div", "bannerNavigation", sliderContainer, {
				width 		: width + "px", 
				left		: navXPos + "px"});
		
		var cover = document.getElementById("cover");
		cover.classOwner = this;
		cover.innerHTML = "";
		cover.onmouseover = this.showSideNavigation;
		cover.onmouseout = this.hideSideNavigation; 	
	
		this.NavXPOS = new Array(-200, 1000);
		this.sideNavs = Array(document.getElementById("featuredLeftArrow"), document.getElementById("featuredRightArrow"));
		
		this.sideNavs[0].onmouseover = this.showLeftCharacter;
		this.sideNavs[0].onmouseout = this.hideLeftCharacter;
		this.sideNavs[0].onclick = this.prevSlide;
		
		this.sideNavs[1].onmouseover = this.showRightCharacter;
		this.sideNavs[1].onmouseout = this.hideRightCharacter;
		this.sideNavs[1].onclick = this.nextSlide;
		
		for (var i in this.sideNavs) {
			this.sideNavs[i].classOwner = this;
		}
		
		this.sideCharacters = Array(document.getElementById("popOutJSL"), document.getElementById("popOutJSR"));
		
		this.featureBanner = this.tag.add("div", "faulty_div", cover, {cursor : "pointer", width : this.scrollWidth + "px", height : "400px"}, {src : "./images/homePage/featured_image_shade.png", onclick : this.clicked, classOwner : this, alt : ""});
		this.allSlides = new Array();
		
		this.dots = new Array();
		for (var i in imageList) 
		{
			var imgInfo = imageList[i];
			
			var div = this.tag.add("div", null, sliderContainer, {position : "absolute", top : "0px", left : slideXPos + "px"}, {ref : i, URL : imgInfo.URL});
			div.id = "slide" + slideID;
			this.allSlides.push(div);
			this.applyAlpha(div, 0.0);
			
			var img = this.tag.add("img", null, div, null, {alt : imgInfo.alt, src : imgInfo.image, URL : imgInfo.URL});
			/*img.onclick = function()
			{
				window.location = this.URL;
			};*/

			this.frames[this.frames.length] = div;
			
			var navImage = this.tag.add("img", null, this.bannerNavigation, 
				{position : "absolute", left : xPos + "px", top : "9px", cursor : "pointer"}, 
				{inx : slideID, classOwner : this, src : this.getDotFilename(slideXPos == 0 && this.flipDot), onclick : this.navigateToSlide});
			this.dots.push(navImage);
			
			xPos += navWidth + navGap;
			slideID++;
			//slideXPos += this.scrollWidth;
		}
		
		this.progressBar = this.tag.add("div", null, this.bannerNavigation, {overflow : "hidden", position : "absolute", left : (xPos + 10) + "px", "top" : "5px"});
		this.tag.add("img", null, this.progressBar, {}, {src : "images/homepage/featured_image_sliderbar.png"});
		
		this.tag.add("img", null, this.bannerNavigation, {position : "absolute", left : (-4) + "px", "top" : "0px"}, {src : "images/homepage/featured_image_slider_left.png"});
		this.tag.add("img", null, this.bannerNavigation, {position : "absolute", left : (width-1) + "px", "top" : "0px"}, {src : "images/homepage/featured_image_slider_right.png"});
		
		if (!this.flipDot) {
			this.animateDot = this.tag.add("img", null, this.bannerNavigation, {position : "absolute", left : this.animateDotX + "px", top : "9px"}, {src : this.getDotFilename(true)});
		}
	},

	applyAlpha : function (obj, value) 
	{
		try 
		{
			if (obj.style.filter) 
			{ // Older IE
				obj.style.filter = "filter:alpha(opacity="+(100 * value)+")";
			}
		}
		catch (error) {}
		
		obj.style.opacity = value;
		obj.style.MozOpacity = value;
	},
	
	showLeftCharacter : function () {
		this.classOwner.sideNavigation++;
		this.classOwner.leftCharacterVisible = true;
	},
	
	hideLeftCharacter : function () {
		this.classOwner.sideNavigation--;
		this.classOwner.leftCharacterVisible = false;
	},
	
	showRightCharacter : function () {
		this.classOwner.sideNavigation++;
		this.classOwner.rightCharacterVisible = true;
	},
	
	hideRightCharacter : function () {
		this.classOwner.sideNavigation--;
		this.classOwner.rightCharacterVisible = false;
	},
	
	showSideNavigation : function () {
		this.classOwner.sideNavigation++
	},
	
	hideSideNavigation : function () {
		this.classOwner.sideNavigation--;
	},
	
	getDotFilename : function (selected) {
		return "images/shared/indicator_dot" + (selected ? "_sel" : "") + ".png";
	},
	
	reset : function() 
	{
		// progress bar
		this.now = 0;
		this.nowMax = 200;

		// main fading
		this.shouldFade = false;
		this.fromAlpha = 0;
		this.toAlpha = 0;
	},
		
	navigateToSlide : function () 
	{
		this.classOwner.activateSlide(this.inx);
	},
	
	activateSlide : function (inx) 
	{
		this.fromAlpha = 1;
		this.toAlpha = 0;
		this.shouldFade = true;

		this.fadeFrom = this.fadeTo;
		this.fadeTo = inx;

		// dots and progress bar
		this.animateDot.style.left = 20+parseInt((this.fadeTo)*29) + "px";
		this.updateProgressBar(null, this.nowMax, this.nowMax);
		this.animate();
	},
	
	animate : function(dt) 
	{	
		//var dt = 0.1;
		dt = dt || 0;
		if (this.shouldFade)
		{
			this.toAlpha += dt;
			this.fromAlpha -= dt;

			for (var s in this.allSlides) 
			{
				if(s == this.fadeFrom)
					this.applyAlpha(this.allSlides[s], this.fromAlpha);
				else if(s == this.fadeTo)
					this.applyAlpha(this.allSlides[s], this.toAlpha);
				else
					this.applyAlpha(this.allSlides[s], 0);
			}
		}
		else 
		{
			this.updateProgressBar(null, this.now+=((this.nowMax*0.333)*dt), this.nowMax);
			if (this.now >= this.nowMax) 
			{
				this.activateSlide(this.getSlideINX(+1));
				return;
			}
		}
		
		if (this.toAlpha >= 1)
		{
			this.now = 0;
			if (this.flipDot) 
			{
				this.dots[this.fadeFrom].src = this.getDotFilename(false);
				this.dots[this.fadeTo].src = this.getDotFilename(true);
			}
			this.toAlpha = 1;
			this.fromAlpha = 0;

			for (var s in this.allSlides) 
			{
				if(s == this.fadeTo)
					this.applyAlpha(this.allSlides[s], 1);
				else
					this.applyAlpha(this.allSlides[s], 0);
			}

			this.reset();
		}
	},
	
	prevSlide : function () {
		this.classOwner.activateSlide(this.classOwner.getSlideINX(-1));
	},
	
	nextSlide : function () {
		this.classOwner.activateSlide(this.classOwner.getSlideINX(+1));
	},
	
	updateProgressBar : function(clock, current, total) {
		var imageWidth = 41;
		this.progressBar.style.width = parseInt((imageWidth) * (1 - (current/total))) + "px"; 
	},
	
	// only accepts -1 or +1
	getSlideINX : function(whichOne) 
	{
		var totalFrames = this.allSlides.length;
		return ((this.fadeTo)+totalFrames+whichOne)%totalFrames;
	},
	
	getSlide : function(whichOne) {
		return document.getElementById("slide" + this.getSlideINX(whichOne));
		
	}
}