/* Copyright (c) 2010 - 2011 Robert Willie, http://willieorwonthe.com/

RobQueeRedux 1.0
1st April 2011 - This is not an Apri's FOOL - it's 12.20pm :)


MIT Licence
--------------------

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/


(function($){
	$.fn.robQuee = function(options) {

		  var
		  defaults = {
			robDebug: false,
			gap: 100
		  },
		  settings = $.extend({}, defaults, options);

		  this.each(function() {

		  var $this = $(this);

  // 1. Grab the text string that we wish to duplicate (put the contents of #robQueeContainer into a variable)
  //    Note the added spaces ' ' - this is to seperate our sentances (used later).
  var robQueeText = ' ' + $this.text() + ' ';
  
  // 2. Delete the contents of .robQueeContainer
		$this.text('');
  // Then add it back in, wrapped in a div.. this is so we can use outerwidth on the element, and work out its displayed width.
		$this.append('<span style="margin-right:' + settings.gap + 'px">' + robQueeText + '</span>');
  
  // 3. Work out how wide our container is - as we need to fill it with text in order for this scroll effect to work
  var robQueeTextContainerWidth = $this.width();
  
  // 4. Then work out the width of our text string (the one from step 2)
  var robQueeTextWidth = $this.find('span').outerWidth(true);
  
  
  // 5. Work out how many times we need to repeat the text string (divide the container width by the text string width)
  //    And round that number up to the next whole number (we need a whole number for our scroll effect to work).
  var repeatBy = Math.ceil(robQueeTextContainerWidth / robQueeTextWidth) + 1;
				 
  // 6. Clean out the old html - because we don't need all those spans
		$this.html('');
	
  // 7. Additional code to make this plugin backwards compatable with old RobQuee.
  //	Add in CSS needed to make effect work - also means it can be omitted from stylesheet.	
		$this.css('white-space' , 'nowrap').css('overflow','hidden').css('cursor','pointer');
	
  // 8. Set up a loop to add in the number of spans needed for our effect to "loop".	
	var i=0;
		while (i<=repeatBy)
		  {
		  $this.append('<span style="margin-right:' + settings.gap + 'px">' + robQueeText + '</span>');
		  i++;
		  };

  // 10. Debug bar code... if debug is set to true this appears.. it helps with debugging....
		
		if(settings.robDebug == true) {
		
		if ($('.robDebugBar').length == 0) { // no element found. If debugBar doesn't exist - create it.
		
		$('body').append('<div class="robDebugBar" style="border: 1px solid #000; background: yellow; padding: 10px;  margin: 20px; width: 200px;"><h2>Debug Information</h2></div>');
		
		}
		
		  // Debug Bar
		$('.robDebugBar').append("<h3>" + robQueeText + '</h3>');
		$('.robDebugBar').append("<ul");
		$('.robDebugBar').append("<li style='list-style: none; border-bottom: 1px solid #000; padding: 5px;'>Text width :<strong style='float: right'>" + robQueeTextWidth + 'px</strong></li>');
		$('.robDebugBar').append("<li style='list-style: none; border-bottom: 1px solid #000; padding: 5px;'>Text gap :<strong style='float: right'>" + settings.gap + 'px</strong></li>');
		$('.robDebugBar').append("<li style='list-style: none; border-bottom: 1px solid #000; padding: 5px;'>Container width :<strong style='float: right'>" + robQueeTextContainerWidth + 'px</strong></li>');
		$('.robDebugBar').append("<li style='list-style: none; border-bottom: 1px solid #000; padding: 5px;'>Repeat text string by :<strong style='float: right'>" + repeatBy + 'px</strong></li>');
		$('.robDebugBar').append("</ul>");
		var resetID = $this.attr("id");
		$('.robDebugBar').append("<div class='" + resetID + "debug' style='padding: 5px;'></div>");
		var resetInfo = '.' + resetID + 'debug';
		}
	
  // 11. Now for the fun part: The scrolling!!	
  //     capture the robQueeContainer element
  //     We need the DOM object, not the jquery object - so we need to do $this[0] and not $this.
	var robscroll = $this[0];
	var lastPos; // stores the last scrollLeft position 
	var resetPoint = $this.find('span:first').outerWidth(true);  // Get the full width of our span - we'll use it as our loop point.
	
	
	// Our scroll ticks along nicely in 2px increments... so we need to make sure our reset point is "even" otherwise
	// If it's an odd number, we may accidentally miss it - and it wont reset!
	if(resetPoint%2 == 0) {
		// The reset point is even - so proceed as normal.
	}
	else {
	// The reset point is odd - so add a number to make it even.
		resetPoint  = resetPoint + 1
	}

	
  // we always reset when the page reloads so that the scroll always starts at the begining.
  // Because we scroll in 2px increments, we should start at 2px to be certain to kill any wobble!
  robscroll.scrollLeft = 2;

 // Allow for pause on hover..  
   var robsPauseHover = false;
  
  $this.hover(
		function () {
		robsPauseHover = true;
	}, 
		function () {
		robsPauseHover = false;
	});

  // use an interval to scroll the robQueeContainer
  setInterval(function () {   

	if (robsPauseHover == false) {
   // subtract to make the text scroll from left to right
    robscroll.scrollLeft += 2;
	}
	
    // if we've hit the beginning then the lastPos will be the same as the scrollLeft
    if (lastPos == resetPoint) {
      
		if(settings.robDebug == true) {
			    		
		  $(resetInfo).append("RESET! ");
		 
		  
		}
		
	// reset
	 robscroll.scrollLeft = 2;
    }
    
    lastPos = robscroll.scrollLeft;
  }, 50); // the combination of milliseconds 


		  });
		  // returns the jQuery object to allow for chainability.
		  return this;
	}
})(jQuery);