$(function() {
	var imageFlipper = {
		settings : { 
			// Selectors
			flipperSelector : ".flipWrapper",
			flipperPortSelector : ".flipPort",
			flipperImageSelector : ".flipImage",
			flipperNavSelector : ".flipNav",
			flipperNavBtnSelector : ".flipNavBtn",
			flipperNavBtnLeftSelector : ".flipLeftBtn",
			flipperNavBtnRightSelector : ".flipRightBtn",
			// Timer Settings
			timerInterval: 7000,
			timerAnimation: 200,
			// States
			animating : false,
			// Appearance
			activeColor : "#0000FF",
			inactiveColor : "#FFFFFF",
			activeText : "#FFFFFF",
			inactiveText : "#003399"
		},
		init : function(width, height) {
			var imageFlipper = this;
			var settings = this.settings;
			var currentImage = 0;
			var totalImages = 0;
			// Set up main loop
			var timer = $.timer(settings.timerInterval, function(timer) {
				var cur = currentImage;
				var nxt = (currentImage + 1) % totalImages;
				
				// Move the images
				imageFlipper.moveImages(cur,nxt);
				// Change the value of the current image
				currentImage = nxt;
				// Reset timer
				timer.reset(settings.timerInterval);
			});
			// Move first image into view and the rest to the right of the view
			$(settings.flipperSelector).find(settings.flipperImageSelector).each(function(i) {
				var btnTitle = $(this).find("img").attr("title").substr(0,18);
				var flipBtn = '<div class="flipNavBtn" id="flipNavBtn'+i+'">'+btnTitle+'</div>';
				
				//$(settings.flipperNavSelector).append(flipBtn);
				if(i == 0) {
					$(this).css("left","0px").attr("id","flipImage"+i);
					//$("#flipNavBtn0").css("background",settings.activeColor);
				}else {
					$(this).css("left","500"+"px").attr("id","flipImage"+i);
					//$("#flipNavBtn"+i).css("background",settings.inactiveColor);
				}
				totalImages += 1;
			});
			// Set up bottom navigation
			$(settings.flipperNavSelector).find(settings.flipperNavBtnSelector).each(function(i) {
				var idString = $(this).attr("id");
				var id = parseInt(/\d/.exec(idString));
				$(this).click(function(e) {
					if(settings.animating == false && currentImage != id) {
						var cur = currentImage;
						var nxt = id;
						imageFlipper.moveImages(cur,nxt);
						currentImage = id;
						timer.reset(settings.timerInterval);
					}
				}).hover(function() {
					$(settings.flipperNavBtnSelector).css("bottom","-20px");
					$(this).animate({bottom:"0px"},300);
				},function() {
					$(settings.flipperNavBtnSelector).css("bottom","0px");
				});
			});
			// Set up side navigation
			$(settings.flipperPortSelector).append('<div class="flipLeftBtn"></div><div class="flipRightBtn"></div>');
			$(settings.flipperSelector).mouseenter(function() {
				$(settings.flipperNavBtnLeftSelector).animate({left:"0px"},700);
				$(settings.flipperNavBtnRightSelector).animate({right:"0px"},700);
			}).mouseleave(function() {
				$(settings.flipperNavBtnLeftSelector).animate({left:"-49px"},700);
				$(settings.flipperNavBtnRightSelector).animate({right:"-49px"},700);
			});
			$(settings.flipperNavBtnLeftSelector).bind("click",function(e) {
				e.preventDefault();
				if(settings.animating == false) {
					var cur = currentImage;
					var nxt = (currentImage - 1 == -1) ? totalImages - 1 : currentImage - 1;
					imageFlipper.moveImages(cur,nxt);
					currentImage = nxt;
					timer.reset(settings.timerInterval);
				}
			});
			$(settings.flipperNavBtnRightSelector).bind("click",function(e) {
				e.preventDefault();
				if(settings.animating == false) {
					var cur = currentImage;
					var nxt = (currentImage + 1) % totalImages;
					imageFlipper.moveImages(cur,nxt);
					currentImage = nxt;
					timer.reset(settings.timerInterval);
				}
			});
		},
		moveImages : function(cur,nxt) {
			imageFlipper = this;
			settings = this.settings;
			
			settings.animating = true;
			// Move image in view to left
			$("#flipImage"+cur).animate({
				left: "-"+"500"+"px"
			}, settings.timerAnimation, "linear", function() {
				$(this).css("left","500"+"px");
			});
			$("#flipNavBtn"+cur).css("background",settings.inactiveColor).css("color",settings.inactiveText);
			// Move next image into view
			$("#flipImage"+nxt).animate({
				left: "0px"
			}, settings.timerAnimation, "linear",function() {
				settings.animating = false;
			});
			$("#flipNavBtn"+nxt).css("background",settings.activeColor).css("color",settings.activeText);
		}
	};
	imageFlipper.init(500,500);
});