$.ui.document.subclass("ui.indexbase", {

	_properties: {
		featuredHeaderImages: [],
		currentFeaturedImageIndex: -1,
		currentFeaturedImageId: "featuredImageA",
		featuredImageFirstRound: true
	},

	_create: function() {
		this.elements.featuredImageA = $("#featuredImageA");
		this.elements.featuredImageB = $("#featuredImageB");
		var featuredHeaderImages = [];
		$("#featuredHeaderImageList li").each(function(index, value) {
			featuredHeaderImages.push($(value).text());
		});
		this.featuredHeaderImages(featuredHeaderImages);
		window.intervalID = setTimeout($.proxy(this._refreshFeaturedImage, this), 4000);
		this.currentFeaturedImageIndex(0);
	},

	_refreshFeaturedImage: function() {
		var currentIndex = this.currentFeaturedImageIndex();
		if (currentIndex + 1 >= this.featuredHeaderImages().length) {
			currentIndex = 0;
		} else {
			currentIndex++;
		}
		this.currentFeaturedImageIndex(currentIndex);
		var gui = this.featuredHeaderImages()[currentIndex];
		var currentImage = (this.currentFeaturedImageId() == "featuredImageA") ? "featuredImageB" : "featuredImageA";
		var previousImage = this.currentFeaturedImageId();
		this.currentFeaturedImageId(currentImage);

		if (this.featuredImageFirstRound()) {
			this.featuredImageFirstRound(false);
			this.elements.featuredImageA.load({
				previous: this.elements.featuredImageB
			},
			$.proxy(this._featuredImage_loadHandler, this));
			this.elements.featuredImageB.load({
				previous: this.elements.featuredImageA
			},
			$.proxy(this._featuredImage_loadHandler, this));
		}
		this.elements[currentImage].attr("src", gui);
	},

	_featuredImage_loadHandler: function(e) {
		var previousImage = e.data.previous;
		var currentImage = $(e.currentTarget);
		previousImage.fadeOut(400, function() {
			previousImage.attr("src", "");
		});
		currentImage.fadeIn();
		window.intervalID = setTimeout($.proxy(this._refreshFeaturedImage, this), 4000);
	}

});