var featureFade = {
	configholder: {},

	preload: function (panel, index, oncomplete) {
		var panel = $(panel).parent().children(".panel");
		var content = panel.children(".content");

		//lets see if its already loaded
		if (panel.hasClass("loaded")) {
			oncomplete();
		}
		else {

			panel.addClass("loaded");
			content.html(panelContents[index]);

			if (panel.css("background-image") == "none" && panelBGImages[index] != "") {
				panel.css("background-image", "url(" + panelBGImages[index] + ")");
			}

			var t = setTimeout(function () {
				oncomplete();
			}, 3000);

			var images = panel.find('img');
			var totalImage = images.size();

			var tracker = { "done": 0, "target": totalImage, "inc": function () {
				this.done++;
				if (this.done >= this.target) {
					clearTimeout(t);
					oncomplete();
				}
			}
			};

			images.each(function () {
				if ($(this)[0].complete) {
					tracker.inc();
				} else {
					$(this).load(function () {
						tracker.inc();
					});
					$(this).error(function () {
						tracker.inc();
					});
				}
			});



		}
	},

	getCurrentPanel: function (galleryid) {
		var config = featureFade.configholder[galleryid];
		return config.currentpanel;
	},


	stopautostepbyid: function (galleryid) {
		var config = featureFade.configholder[galleryid]
		if (typeof config == "undefined") {
			alert("There's an error with your set up of Carousel Viewer \"" + galleryid + "\"!")
			return
		};

		clearTimeout(config.steptimer)
		clearTimeout(config.resumeautostep)
	},

	stopautostep: function (config) {
		clearTimeout(config.steptimer)
		clearTimeout(config.resumeautostep)
	},

	autorotate: function (galleryid) {
		var config = featureFade.configholder[galleryid]
		if (config.$gallery.attr('_ismouseover') != "yes") {
			this.stepBy(galleryid, config.autostep.moveby)
		}
		config.steptimer = setTimeout(function () { featureFade.autorotate(galleryid) }, config.autostep.pause)
	},

	stepTo: function (galleryid, pindex) { /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */
		var config = featureFade.configholder[galleryid]
		if (typeof config == "undefined") {
			alert("There's an error with your set up of Carousel Viewer \"" + galleryid + "\"!")
			return
		};

		featureFade.stopautostep(config);

		var $currentpanel;
		var $newpanel;
		var newCurrentPanel;

		config.$panels.each(function (index) {
			if (index == pindex) {
				$newpanel = $(this);
				$newpanel.css({ visibility: "visible" }).fadeIn(config.panelbehavior.speed);
				if (config.onFadeStart != null) { config.onFadeStart($newpanel[0]); }

				$('#' + config.stepImgIDs[pindex]).attr({ src: config.defaultButtons.itemOn })

			} else if (index == config.currentpanel) {
				$currentpanel = $(this);
				//$currentpanel.css({ display: 'none' }).fadeOut(config.panelbehavior.speed);
				//$currentpanel.fadeOut(config.panelbehavior.speed);

				$('#' + config.stepImgIDs[config.currentpanel]).attr({ src: config.defaultButtons.itemOff })
			}
		})

		config.currentpanel = pindex;

	},

	stepBy: function (galleryid, steps) { //isauto if defined indicates stepBy() is being called automatically
		var config = featureFade.configholder[galleryid]
		if (typeof config == "undefined") {
			alert("There's an error with your set up of Carousel Viewer \"" + galleryid + "\"!")
			return
		};

		featureFade.stopautostep(config);

		var direction = (steps > 0) ? 'forward' : 'back'
		var pindex = config.currentpanel + steps

		if (pindex > config.lastvisiblepanel && direction == "forward") {
			//if destination pindex is greater than last visible panel, yet we're currently not at the end of the carousel yet
			pindex = (config.currentpanel < config.lastvisiblepanel) ? config.lastvisiblepanel : 0
		} else if (pindex < 0 && direction == "back") {
			//if destination pindex is less than 0, yet we're currently not at the beginning of the carousel yet
			pindex = (config.currentpanel > 0) ? 0 : config.lastvisiblepanel /*wrap around left*/

		}
		//alert("currentpanel: " + config.currentpanel + " lastvisiblepanel: " + config.lastvisiblepanel + " pindex: " + pindex);

		featureFade.displayLoadingButton(galleryid, direction);

		var $currentpanel;
		var $newpanel;
		var newCurrentPanel;
		var $panelToFade;


		config.$panels.each(function (index) {
			if (index == pindex) {
				$newpanel = $(this);
			} else if (index == config.currentpanel) {
				$panelToFade = $(this);
			}
		})



		//lets check if we need to load anything!
		if (config.preLoadNextPanel != null) {

			config.preLoadNextPanel($newpanel[0], pindex, function () {

				if ($panelToFade != null) {
					featureFade.fadeInPanel(galleryid, $newpanel);
					featureFade.fadeOutPanel(galleryid, $panelToFade);
					featureFade.resetButtons(galleryid);
				}

			});

		} else {
			if ($panelToFade != null) {
				featureFade.resetButtons(galleryid);
				featureFade.fadeInPanel(galleryid, $newpanel);
				featureFade.fadeOutPanel(galleryid, $panelToFade);
			}

		}


		config.currentpanel = pindex

	},

	fadeOutPanel: function (galleryid, panel) {

		var config = featureFade.configholder[galleryid]
		$currentpanel = panel;
		$currentpanel.fadeOut(config.panelbehavior.speed);

	},

	fadeInPanel: function (galleryid, panel) {

		var config = featureFade.configholder[galleryid]
		$currentpanel = panel;
		$currentpanel.fadeIn(config.panelbehavior.speed);
		if (config.onFadeStart != null) { config.onFadeStart($currentpanel[0]); }

	},

	resetButtons: function (galleryid) {

		var config = featureFade.configholder[galleryid];



		if (config.nextBackButtons != null) {
			var next = $('#' + config.nextBackButtons.nextID);
			next.attr('src', config.nextBackButtons.nextOn);

			var prev = $('#' + config.nextBackButtons.prevID);
			prev.attr('src', config.nextBackButtons.prevOn);

		}

	},

	displayLoadingButton: function (galleryid, direction) {

		var config = featureFade.configholder[galleryid];



		if (direction == "forward") {

			if (config.nextBackButtons != null) {
				var next = $('#' + config.nextBackButtons.nextID);
				next.attr('src', config.nextBackButtons.nextLoading);
			}
		} else {
			if (config.nextBackButtons != null) {
				var prev = $('#' + config.nextBackButtons.prevID);
				prev.attr('src', config.nextBackButtons.prevLoading);
			}
		}

	},


	alignpanels: function ($, config) {

		var paneloffset = 0
		config.paneloffsets = [paneloffset] //array to store upper left offset of each panel (1st element=0)
		config.panelwidths = [] //array to store widths of each panel
		config.$panels.each(function (index) { //loop through panels
			var $currentpanel = $(this);
			if (index == config.currentpanel) {
				$currentpanel.css({ float: 'none', position: 'absolute', left: '0px', top: '0px', display: 'block' });
				if (config.onFadeStart != null) { config.onFadeStart($currentpanel[0]); }
			} else {
				$currentpanel.css({ float: 'none', position: 'absolute', left: '0px', top: "0px", display: 'none' }); //position panel
			}
		})

		var lastpanelindex = config.$panels.length - 1;
		config.lastvisiblepanel = lastpanelindex;

		config.steptimer = setTimeout(function () { featureFade.autorotate(config.galleryid) }, config.autostep.pause)


	},

	setup: function (config) {
		document.write('<style type="text/css">\n#' + config.galleryid + '{overflow: hidden;}\n</style>');
		jQuery(document).ready(function ($) {
			config.$gallery = $('#' + config.galleryid);
			config.gallerywidth = config.$gallery.width();
			config.$belt = config.$gallery.find('.' + config.beltclass);
			config.$panels = config.$gallery.find('.' + config.panelclass);
			config.currentpanel = 0
			featureFade.configholder[config.galleryid] = config

			featureFade.alignpanels($, config);
		})
	}
}