if (!everylittlebit) var everylittlebit = {};

everylittlebit.Page = {

	featureCount: 0,
	featurePause: 6,    // seconds
	currentTimeout: null,

	featureClip: false,
	featureDims: null,

	featureHeight: null,
	featureSpan: null,

	featureHideOpacity: 0,
	featureFadeOpacity: 0.4,
	featureHoverOpacity: 0.6,

	featureScrollDuration: 1000,
	featureTransitionTime: 1000,


	featureData: null,

	handleReady: function() {

		//
		// Apply alternating CSS to promos
		//
		$('#Main .promos > div:odd').addClass('alternating');

		//
		// Old feature scroller
		//
		if (false) {
			//this.featureData = $("#FeatureList .Data").get(0).firstChild.textContent;
			var dataComment = $("#FeatureList .Data").get(0);
			if ($.browser.msie) { // && parseInt($.browser.version) < 7) {
				this.featureData = dataComment.innerHTML.replace(/(?:\<\!--|--\>)/g, "");
			} else {
				this.featureData = dataComment.firstChild.textContent;
			}
			this.featureData = $.evalJSON(this.featureData);
			this.featureData = this.featureData.Features.Feature;

			//
			// Preload Images
			//
			for (var i = 0; i < this.featureData.length; i++) {
				var item = this.featureData[i];
				item.imageObj = new Image();
				item.imageObj.src = item.Image;
			}

			/*
			$("#FeatureList .Feature").append('<div class="Shimmer"/>').hover(function(){
			$(this).find(".Shimmer").show();
			},function(){
			$(this).find(".Shimmer").hide();
			});
			*/

			this.featureCount = $("#FeatureList .Feature").length;

			//        this.featureIndex = this.featureCount > 5 ? 2 : Math.floor((this.featureCount - 1) / 2);
			this.featureIndex = 1;
			this.initFeatures();
			this.loadFeature(this.featureIndex);
		}
	},

	initFeatures: function() {

		var $features = $("#FeatureList .Feature");

		var Page = this;

		//
		// Get feature measurements.
		//
		this.featureHeight = $features.eq(0).height();
		this.featureSpan = $features.get(1).offsetTop - $features.get(0).offsetTop;

		var fade = this.featureFadeOpacity;

		$features.find("strong").each(function(i) {
			var $this = $(this);
			var title = $this.attr("title");
			$this.attr("title", $this.text());
			$this.text(title);
			$this.click(function() {
				Page.queueLoadFeature(i);
			});
		});

		$features.find("img").each(function() {
			var $this = $(this);
			var uri = $this.attr("src");
			var div = $("<span/>").addClass("image"); //.css({backgroundImage:"url("+uri+")"});
			$this.wrap(div);
			//$this.text($this.attr("title"));  // This was causing an error in IE. What was this code for?
		});

		$features.each(function(i) {
			var $this = $(this);
			$this.click(function() {
				var $this = $(this);
				var i = $this.prevAll(".Feature").length;

				Page.queueLoadFeature(i);
			});
			$this.css({
				opacity: fade
			});
		});

		var upButton = $("<img/>").attr("src", "Images/FeatureUp.png").addClass("Button");
		var downButton = $("<img/>").attr("src", "Images/FeatureDown.png").addClass("Button");

		upButton.click(function() {
			Page.gotoPrevFeature();
		});

		downButton.click(function() {
			Page.gotoNextFeature();
		});

		var $panel = $("#FeaturePanel");

		$panel.prepend($("<div/>").addClass("Up Control").append(upButton));
		$panel.append($("<div/>").addClass("Down Control").append(downButton));

		return;



		// center list
		this.featureDims = {
			//            width: $features.get(0).offsetWidth,
			height: $features.get(0).offsetHeight
		};
		var clipperWidth = this.featureDims.width * Math.min(5, this.featureCount);
		var panelWidth = $("#FeaturePanel").eq(0).width();
		var canvasWidth = this.featureDims.width * 7;

		canvasWidth = clipperWidth;

		$("#FeatureList").width(canvasWidth);
		$("#FeatureClipper").width(clipperWidth).css({
			position: "relative",
			marginLeft: Math.floor((panelWidth - clipperWidth) / 2)
		});
	},

	queueLoadFeature: function(i) {
		var self = this;

		if (this.currentTimeout) clearTimeout(this.currentTimeout);

		$("#FeatureList").queue(function() {
			//alert('Load '+i);
			self.loadFeature(i);
			$(this).dequeue();
		});
	},

	loadFeature: function(i) {
		var Page = this;

		if (this.currentTimeout) clearTimeout(this.currentTimeout);

		//
		// Get list, feature, and detail.
		// 
		var $list = $("#FeatureList");
		switch (typeof i) {
			case "number": $feature = $list.find(".Feature").eq(i); break;
			case "object": $feature = i; break;
			default: $feature = null;
		}
		var $detail = $("<div/>").addClass("Feature").html($feature.html());

		/*
		// Debugging
		var i = 0;
		$list.find(".Feature").css("border", "0px").each(function(){
		$(this).find("strong").text(i++);
		});
		$feature.css("border", "2px solid red");
		//$feature.find("strong").text(i);
		*/

		//
		// Manipulate detail.
		//
		$detail.find("img").each(function() {
			$(this).attr("src", $(this).attr("longdesc"));
		});
		$detail.find("img, .Text").click(function() {
			window.location = $(this).parents(".Feature").find("a").attr("href");
		});
		$detail.find("strong").each(function() {
			$(this).text($(this).attr("title"));
		});

		//
		// Remove "active" status on current item.
		//
		$list.find(".Active").removeClass("Active").animate({
			opacity: this.featureFadeOpacity
		}, this.featureTransitionTime);

		//
		// Add "active" status to new item and bring to fore
		// (after clearing effects queue).
		//
		$feature.addClass("Active").stop(true).animate({
			opacity: 1
		}, this.featureTransitionTime);

		//
		// Add hover to non-active features in list.
		//
		$list.find(".Feature").hover(function() {
			var $this = $(this);
			if (!$this.is(".Active")) {
				$(this).animate({
					opacity: Page.featureHoverOpacity
				}, 250);
			}
		}, function() {
			var $this = $(this);
			if (!$this.is(".Active")) {
				$(this).animate({
					opacity: Page.featureFadeOpacity
				}, 250);
			}
		});

		$details = $("#FeatureDetail .Feature");
		if (!$details.length) {
			$("#FeatureDetail").empty().append($detail);
		}
		else {
			$detail.css({
				opacity: 0
			});
			$detail.animate({
				opacity: 1
			});
			if ($details.length > 1) {
				$details.remove("div:not(div:last-child)");
			}
			$("#FeatureDetail").append($detail);
		}

		i = $feature.prevAll(".Feature").length;

		if (i > 1) {
			Page.scrollUp(1);   // Don't scroll if loading "0"
		} else if (i < 1) {
			Page.scrollDown(1);   // Don't scroll if loading "0"
		}

		this.startTimer();
	},

	startTimer: function() {
		var Page = this;
		this.currentTimeout = setTimeout(function() { Page.gotoNextFeature(); }, this.featurePause * 1000);
		//this.currentTimeout = setTimeout(function(){Page.gotoPrevFeature();}, this.featurePause * 1000);
	},

	gotoPrevFeature: function() {
		this.queueLoadFeature(0);
		return;

		var $current = $("#FeatureList .Active");
		var $prev = $current.prev(".Feature").eq(0);
		if (!$prev.length) {
			$prev = $current.siblings(".Feature").eq(0);
		}
		//        alert($prev);
		this.queueLoadFeature($prev);
		//this.scrollUp()
	},

	gotoNextFeature: function() {
		this.queueLoadFeature(2);
		return;

		var $current = $("#FeatureList .Active");
		var $next = $current.next(".Feature").eq(0);
		if (!$next.length) {
			$next = $current.siblings(".Feature").eq(0);
		}
		//        alert($next);
		this.queueLoadFeature($next);
		//this.scrollUp()
	},

	scrollUp: function(n) {
		var Page = this;
		var fade = this.featureFadeOpacity;
		var span = this.featureSpan;
		var duration = this.featureTransitionTime;

		var $list = $("#FeatureList");
		var $top = $list.find(".Feature:first");

		n = n || 1;

		//
		// Fade out top feature.
		//
		$list.find(".Feature:first").animate({
			opacity: this.featureHideOpacity
		}, duration);

		//
		// Scroll up list.
		//        
		$list.animate({
			top: "-=" + this.featureSpan + "px"
		}, duration, function() {
			//
			// Continue scroll if necessary...
			//            
			n--;
			if (n) Page.scrollUp(n);
		});

		//
		// Queue up list item shift to block subsequent scrolls
		// until finished.
		//
		$list.queue(function() {
			var $list = $(this);
			var $top = $list.find(".Feature:first");
			$list.append($top).css({
				"top": 0
			});
			$list.dequeue();
		});

		//
		// Reset/start bottom item fading in.
		//        
		$top.stop();
		$top.animate({
			opacity: fade
		}, duration);
	},

	scrollDown: function(n) {
		var Page = this;
		var $list = $("#FeatureList");
		var $last = $list.find(".Feature:last");
		var fade = this.featureFadeOpacity;
		var span = this.featureSpan;
		var duration = this.featureTransitionTime;

		n = n || 1;

		//
		// Fade out bottom (showing) feature.
		//        
		$list.find(".Feature").eq(2).animate({
			opacity: this.featureHideOpacity
		}, duration);

		//
		// Move top item to bottom and prepare list
		// position for scrolling.
		//
		$list.prepend($last).css({
			top: "-" + span + "px"
		});

		//
		// Start scroll.
		//
		$list.animate({
			top: 0
		}, duration, function() {
			//
			// Continue scroll if necessary...
			//            
			n--;
			if (n) Page.scrollDown(n);
		});

		//
		// Reset/start top item fading in.
		//        
		$last.stop();
		$last.animate({
			opacity: fade
		}, duration);

	}

}
$(document).ready(function() { everylittlebit.Page.handleReady(); });