function Features()
{
	var self = this;
	this.arrowAlpha = 0.7;
	this.promoAlpha = 0.85;
	this.serverPath = String(window.location).indexOf('internal') != -1 ? "http://internal.idstudios.net/natgeotv.com.au/" : "http://natgeotv.com.au/";
	//this.serverPath = "";
	this.currentIndex = 1;
	this.delay = 8000;
	this.frameRate = 50;
	this.currentTime = 0;
	this.interval;
	this.navWidth;
	this.queued = null;
	this.explanationIn = 641;
	this.explanationOut = 300;
	this.data; // written on the page
	this.dummyExplanation = "<h1>Test Explanation><p>Test Explanation</p>";
	this.initted = false;
	this.timerOff = false;
	this.stopOnClick = false;
	this.backgroundImagesOn = true;
	this.explanationsOn = true;
	
	this.ImageLoaded = function()
	{
		var source = String($(this).attr('src'));
		//source = source.replace(self.serverPath + 'home/includes/images/', '');
		for (var i = 0; i < self.data.length; i ++)
		{
			if (self.data[i].foreground == source)
			{
				self.data[i].fgLoaded = true;
				// don't break in case the same image is used for more than one highlight
			}
			if (self.backgroundImagesOn)
			{
				if (self.data[i].background == source)
				{
					self.data[i].bgLoaded = true;
					// don't break in case the same image is used for more than one highlight
				}
			}
			
		}
		
		self.checkQueued();
	}
	
	this.checkQueued = function()
	{
		if (self.queued != null)
		{
			if (self.data[self.queued].fgLoaded && (self.data[self.queued].bgLoaded || !self.backgroundImagesOn))
			{
				self.change(self.queued);
			}
		}
	}
	
	this.init = function(backgroundImagesOn, explanationsOn)
	{
		self.data = featureData;
		
		self.backgroundImagesOn = backgroundImagesOn;
		self.explanationsOn = explanationsOn;
		
		$("#FeaturesExplanation").css({opacity:0});
		
		for (var i = 0; i < self.data.length; i ++)
		{
			var fg = new Image();
			fg.onload = self.ImageLoaded;
			if (self.backgroundImagesOn)
			{
				var bg = new Image();
				bg.onload = self.ImageLoaded;
			}
			fg.src = self.data[i].foreground;
			if (self.backgroundImagesOn) bg.src = self.data[i].background;
		}
		
		// Mouse events
		if ($(".Promo").size() > 0)
		{
			$(".Promo img").css({opacity:self.promoAlpha});
			$(".Promo").mouseover(self.PromoOver);
			$(".Promo").mouseout(self.PromoOut);
		}
		
		if (self.data.length > 1)
		{
			$(".FeatureArrow").bind("mouseover", self.ArrowOver);
			$(".FeatureArrow").bind("mouseout", self.ArrowOut);
			$(".FeatureArrow").bind("click", self.ArrowClick);
			$(".FeatureArrow").css({opacity:self.arrowAlpha});
			$("#Features").bind("mouseenter", self.FeatureOver);
			$("#Features").bind("mouseleave", self.FeatureOut);
			
			// FNItems
			var total = self.data.length;
			self.navWidth = Math.floor(640 / total);
			for (var i = 0; i < total; i ++)
			{
				$("#FNStatus").after('<a href="javascript:void(0)" class="FNItem" style="width:' + self.navWidth + 'px; left:' + self.navWidth * i + 'px" index="' + i + '"></a>');
				if (i > 0) $("#FNStatus").after('<span class="FNDivider" style="left:' + (self.navWidth * i - 1)  + 'px;"></span>');			
			}
			$(".FNItem").html('<span style="width:' + self.navWidth + 'px"></span>');
			$(".FNItem").children("span").css({opacity:0});		
			/*$(".FNItem").bind("mouseover", self.FNOver);
			$(".FNItem").bind("mouseout", self.FNOut);
			$(".FNItem").bind("click", self.FNClick);*/	
			
			$(".FNItem").bind("mouseenter", self.FNOver);
			$(".FNItem").bind("mouseleave", self.FNOut);
		}
		else
		{
			$(".FeatureArrow").hide();
			$("#FeatureNavigation").hide();
		}
		
		// Change
		self.changeCheck(0);
	}
	
	this.FeatureOver = function()
	{
		clearInterval(self.interval);
		if (self.explanationsOn)
		{
			$("#FeaturesExplanation").show();
			$("#FeaturesExplanation").stop().animate({left:self.explanationIn, opacity:1}, 300, "easeOutExpo");
			self.changeExplanation();
		}
	}
	
	this.changeExplanation = function()
	{
		if (self.data[self.currentIndex].explanation != null)
		{
			$("#FeaturesExplanation").html(self.data[self.currentIndex].explanation);
			// Re-init reminders.js
			if (window["_rem"]) {
				initReminderModals();
			}
		}
		else
		{
			$("#FeaturesExplanation").html('<img src="' + self.serverPath + 'home/includes/images/preloader_transparent_30.gif" class="Preloader" />');
			self.loadExplanation();
		}
	}

	this.loadExplanation = function () {
	    $.ajax({
	        type: "POST",
	        /*dataType: "xml",*/
	        data: "id=" + self.data[self.currentIndex].id,
	        url: self.serverPath + "home/includes/feature-popout.aspx",
	        success: function (response) {

	            if ($.browser.msie) {
	                $("#ieDummy").html(response);
	                var id = $("#ieDummy").find("content").attr("id");
	                var content = $("#ieDummy").html();
	            }
	            else {
	                var id = $(response).contents().find("content").attr("id");
	                var content = $(response).contents().find("content").html();
	            }

	            if (self.data[self.currentIndex].id == id) {
	                self.data[self.currentIndex].explanation = content;
	                $("#FeaturesExplanation").html(content);

	                // Re-init reminders.js
	                if (window["_rem"]) {
	                    initReminderModals();
	                }
	            }
	        },
	        error: function (response) {
	            //alert('error: ' + response);
	        }
	    });
	}
	
	this.FeatureOut = function(e)
	{
		if (self.stopOnClick) self.timerOff = false;
		e.stopPropagation();
		clearInterval(self.interval);
		self.interval = setInterval(self.OnInterval, self.frameRate);
		if (self.explanationsOn) $("#FeaturesExplanation").stop().animate({left:self.explanationOut, opacity:0}, 300, "easeOutExpo");
	}
	
	this.OnInterval = function()
	{
		self.currentTime += self.frameRate;
		var width = Math.round(self.navWidth * ((self.currentTime / self.delay)));
		if (width > self.navWidth) width = self.navWidth;
		$("#FNStatus").width(width);
		if (self.currentTime > self.delay) self.changeCheck(self.currentIndex + 1);
	}
	
	this.addRemoveMouseEvents = function(removeAll)
	{
		if (self.data.length > 1)
		{
			$(".FNItem").unbind("click", self.FNClick);
			//$(".FNItem").unbind("mouseenter", self.FNOver);
			//$(".FNItem").unbind("mouseleave", self.FNOut);
			
			//$(".FeatureArrow").unbind("mouseover", self.ArrowOver);
			//$(".FeatureArrow").unbind("mouseout", self.ArrowOut);
			$(".FeatureArrow").unbind("click", self.ArrowClick);
			
			//$(".FeatureArrow").css({opacity:self.arrowAlpha});
			
			//$(".FNItem").children("span").stop().css({opacity:0});
			
			if (!removeAll)
			{
				$(".FNItem").each(function()
				{
					if (Number($(this).attr('index')) == self.currentIndex)
					{
						$(this).css({cursor:'default'});
						$(this).children("span").css({opacity:0});
						$(this).children("span").stop().css({opacity:0});
					}
					else
					{
						$(this).bind("click", self.FNClick);
						//$(this).bind("mouseenter", self.FNOver);
						//$(this).bind("mouseleave", self.FNOut);
						$(this).css({cursor:'pointer'});
					}
				});
				$(".FeatureArrow").bind("mouseover", self.ArrowOver);
				$(".FeatureArrow").bind("mouseout", self.ArrowOut);
				$(".FeatureArrow").bind("click", self.ArrowClick);
			}
			else
			{
				$(".FNItem").children("span").stop().css({opacity:0});
			}
		}
	}
	
	this.addMouseEvents = function()
	{
		self.addRemoveMouseEvents();
	}
	
	this.change = function(index)
	{
		// Hide preloader
		self.hidePreloader();
		
		// Clear queued
		self.queued = null;
		
		// Remove click events
		self.addRemoveMouseEvents(true);
		
		if (self.data.length > 1)
		{
			// Restart timer
			clearInterval(self.interval);
			self.currentTime = 0;
			if (!self.timerOff && !self.stopOnClick) self.interval = setInterval(self.OnInterval, self.frameRate);
			
			// Position FNStatus
			$("#FNStatus").css({left:index * self.navWidth, width:0});
		}
		
		// Get data
		if (self.backgroundImagesOn) var bg = self.data[index].background;
		var fg = self.data[index].foreground;
		var title = self.data[index].title;
		var url = self.data[index].url;
		
		// Remove old items
		$('.FeatureBG[active!="true"]').remove();
		$('.Feature[active!="true"]').remove();
		$('.FeatureTitle[active!="true"]').remove();
		
		// Remove active attribute on existing
		if (self.backgroundImagesOn) $(".FeatureBG").attr("active", "false");
		$(".Feature").attr("active", "false");
		$(".FeatureTitle").attr("active", "false");
		
		// Backgrounds
		if (self.backgroundImagesOn)
		{
			var bgTop = index > self.currentIndex || index == self.currentIndex ? -350 : 350;
			var bgTY = index > self.currentIndex || index == self.currentIndex ? 350 : -350;
			var bgAnimate = false;
			if (!bgAnimate) bgTop = bgTY = 0;
			$('.FeatureBG[active="true"]').css({opacity:0});
			$("#FeatureInner").append('<div class="FeatureBG" active="true" style="background-image:url(' + bg + '); top:' + bgTop + 'px"></div>');
			$('.FeatureBG[active="true"]').css({opacity:0});
			$('.FeatureBG[active="true"]').stop().animate({top:0, opacity:1}, 1500, "easeInOutExpo");
			$('.FeatureBG[active!="true"]').stop().animate({top:bgTY, opacity:0}, 1500, "easeInOutExpo");
		}
		
		// Foregrounds
		var fgLeft = index > self.currentIndex  ? 640 : -640;
		var fgTX = index > self.currentIndex  ? -640 : 640;
		var fgAnimate = true;
		if (!self.initted) fgAnimate = false;
		if (!fgAnimate) fgLeft = fgTX = 0;
		self.initted = true;
		$("#FeaturesHolder").append('<div class="Feature" style="left:' + fgLeft + 'px; " active="true" index="' + index + '"><a href="' + url + '"><img src="' + fg + '" width="640" height="310" /></a></div>');
		$('.Feature[active="true"]').css({opacity:0});
		$('.Feature[active="true"]').stop().animate({opacity:1, left:0}, 1500, "easeInOutExpo", self.addMouseEvents);
		$('.Feature[active!="true"]').stop().animate({opacity:0, left:fgTX}, 1500, "easeInOutExpo");
		$("#Features").show();
		
		// Text
	 	$("#Features").append('<span class="FeatureTitle" active="true"><a href="#">' + title + '</a></span>');
		if ($.browser.msie && Number($.browser.version) < 8)
		{
			$('.FeatureTitle[active!="true"]').hide();
		}
		else
		{
			$('.FeatureTitle[active="true"]').css({opacity:0});
			$('.FeatureTitle[active="true"]').stop().animate({opacity:1}, 1500, "easeInOutExpo");
			$('.FeatureTitle[active!="true"]').stop().animate({opacity:0}, 1500, "easeInOutExpo");
		}
		
		// Set index
		self.currentIndex = index;
		
		// Change the explanation
		if (self.explanationsOn) self.changeExplanation();
	}
	
	this.FNClick = function()
	{
		self.changeCheck(Number($(this).attr("index")));
	}
	
	this.FNOver = function(e)
	{
		//e.stopPropagation();
		$(this).children("span").stop().animate({opacity:1}, 750, "easeOutExpo");
	}
	
	this.FNOut = function(e)
	{
		//e.stopPropagation();
		$(this).children("span").stop().animate({opacity:0}, 750, "easeOutExpo");
	}
	
	this.PromoOver = function()
	{
		$(this).find("img").stop().animate({opacity:1}, 750, "easeOutExpo");
	}
	
	this.PromoOut = function()
	{
		$(this).find("img").stop().animate({opacity:self.promoAlpha}, 750, "easeOutExpo");
	}
	
	this.changeCheck = function(newIndex)
	{
		if (newIndex > self.data.length - 1) newIndex = 0;
		if (newIndex < 0) newIndex = self.data.length - 1;
		
		// Don't cache with < IE 8 || Opera
		var cache = true;
		if (($.browser.msie && Number($.browser.version) < 8) || $.browser.opera)
		{
			cache = false;
		}
		
		if (self.data[newIndex].fgLoaded && (self.data[newIndex].bgLoaded || !self.backgroundImagesOn) || !cache)
		{
			self.change(newIndex);
		}
		else
		{
			self.showPreloader();
			self.queued = newIndex;
		}
	}
	
	this.showPreloader = function()
	{
		$("#Preloader").show();
		$("#Preloader").animate({opacity:0.7}, 500, "easeOutExpo");	
	}
	
	this.hidePreloader = function()
	{
		$("#Preloader").hide();
		$("#Preloader").css({opacity:0});	
	}
	
	this.ArrowClick = function()
	{
		if (self.stopOnClick) self.timerOff = true;
		var direction = $(this).attr("id") == "FeatureRight" ? 1 : -1;
		var newIndex = self.currentIndex + direction;
		self.changeCheck(newIndex);
	}
	
	this.ArrowOver = function()
	{
		$(this).stop().animate({opacity:1}, 750, "easeOutExpo");
	}
	
	this.ArrowOut = function()
	{
		$(this).stop().animate({opacity:self.arrowAlpha}, 750, "easeOutExpo");
	}
}