// A Scrollable Message Plugin
// Dominion Digital (c) 2009

jQuery.fn.scrollableMessage = function(options) {
 
	var defaults = { 
		viewableHeight: 'auto',
		interruptDelay: 5000,
		autoplayDelay: 5000,
		transitionType: "fade", // "fade" = default; "slide" = slides messages from right to left
		transitionInDelay: 250,
		transitionOutDelay: 250,
		displayNextPrevious: true,
		showNavNumbers: true		
	};
	
	var settings = $.extend({}, defaults, options);
 
	return this.each(function(){
						   
		var scrollableContainer = $(this);
		var $messageContainer = scrollableContainer.find('#sm-content');
		var messageList = scrollableContainer.find('#sm-content ul');
		messageList.css("left", 0);
		var $messageItems = messageList.find('li');
	
		if (messageList != null) {
		  var numberOfMessages = $messageItems.size();
	
		  if (numberOfMessages > 1) {
	
			messageWidth = parseInt($messageItems.width());
			
			if (settings.viewableHeight == 'auto') {
				messageHeight = parseInt($messageItems.height());
			} else {
				messageHeight = settings.viewableHeight;
			}

			var counter = 1;
			
	
			if (numberOfMessages >= 2) {
				// build navigation
				scrollableContainer.prepend("<div id='scrollableNav'><ul></ul></div>");
				
				
				temp = $("#scrollableNav ul")
								
				for(i=1;i<=numberOfMessages;i++) {
					var navLabel = "&nbsp;"
					if (settings.showNavNumbers) {
						navLabel = i
					}
					
					temp.append("<li id='item" + i + "'><a href='#'>" + navLabel + "</a></li>");
				}
				
				if (settings.displayNextPrevious) {
					temp.prepend("<li id='scrollPrevious'><a href='#'>&laquo;</a></li>")
					temp.append("<li id='scrollNext'><a href='#'>&raquo;</a></li>")
				}
				
				$scrollableNav = scrollableContainer.find('#scrollableNav');
				
				$scrollableNav.find("#item1").toggleClass("selected")
				
				
				$("#scrollableNav ul li").each( function() {
					$(this).click(function(event) {
							event.preventDefault();
							manageTimer();
							moveToMessage($(this).attr('id'))
					}); 
				})
				
				if (options.transitionType = "slide") {
					$messageContainer.width(messageWidth * numberOfMessages);
					$messageItems.css("float","left");
				}
				
				pauseDelay = null
				
				delayTimer()
			}
			
		  }
			scrollableContainer.css("visibility","visible");
		}
		
		function manageTimer() {
			if (pauseDelay != null) {
				clearTimeout(pauseDelay)
				pauseDelay = null
			}
			clearInterval(autoPlay);
			autoPlay = null
			pauseDelay = setTimeout(delayTimer, settings.interruptDelay);
		}
		
		function delayTimer() {
			autoPlay = setInterval(moveMessages, settings.autoplayDelay);
		}
		
		function moveMessages() {
			
			$scrollableNav.find("#item" + counter).toggleClass("selected");
			
			if (counter == numberOfMessages) {
				moveWhere = 0
				counter = 0;
			} else {
				if (settings.transitionType = "slide") {
					moveWhere = parseInt(messageList.css("left")) - messageWidth;
				} else {
					moveWhere = parseInt(messageList.css("top")) - messageHeight;
				}
			}
			transitionMessageOut()
			
			counter++;
			
			$scrollableNav.find("#item" + counter).toggleClass("selected");
		}
		
		function moveToMessage(whatAction) {
			$scrollableNav.find("#item" + counter).toggleClass("selected");
			if (whatAction == "scrollPrevious") {
				if (counter == 1) {
					counter = numberOfMessages
				} else {
					counter--
				}
			} else if (whatAction == "scrollNext") {
				if (counter == numberOfMessages) {
					counter = 1
				} else {
					counter++
				}
			} else if (whatAction.indexOf("item") == 0) {
				var whichMessage = parseInt(whatAction.substr(4, whatAction.length ))
				counter = whichMessage
			}
			
			if (settings.transitionType = "slide") {
				moveWhere = (messageWidth * -counter) + messageWidth;
			} else {
				moveWhere = (messageHeight * -counter) + messageHeight;
			}
			
			transitionMessageOut()
			
			$scrollableNav.find("#item" + counter).toggleClass("selected");
		}
		
		function transitionMessageOut() {
			if (settings.transitionType = "slide") {
				messageList.animate({"left": moveWhere}, (settings.transitionInDelay + settings.transitionOutDelay));
			} else {
				messageList.fadeOut(settings.transitionOutDelay, transitionMessageIn);
			}

		}
		function transitionMessageIn() {
			if (settings.transitionType = "slide") {

			} else {
				messageList.css("top",moveWhere);
				messageList.fadeIn(settings.transitionInDelay);
			}
		}
		
	});
	
};