//  ===========================================================================================
//  PRERENDER:
//  ===========================================================================================

//    <div class="some-container">
//        
//        <div class="img-container">
//            <a href=""><img src="" height="" width="" class="pulse" /></a>
//        </div>
//        
//        <div class="hide-overflow scrollable">
//            <span>TEXT THAT WILL HAVE OVERFLOW HIDDEN, SCROLLABLE, AND APPENDED WITH ELLIPSIS</span>
//        </div>
//        
//        <div class="hide-overflow">
//            <span>TEXT THAT WILL HAVE OVERFLOW HIDDEN AND APPENDED WITH ELLIPSIS</span>
//        </div>
//        
//        <div class="">
//            <span>NORMAL TEXT</span>
//        </div>
//        
//        <a href="" class="overlay-link">&nbsp;</a>
//        
//    </div>

//  ===========================================================================================
//  POSTRENDER:
//  ===========================================================================================

//    <div class="some-container">
//        
//        <div class="img-container">
//            <a href=""><img src="" height="" width="" class="pulse" /></a>
//        </div>
//        
//        <div class="hide-overflow scrollable">
//            <div class="overflow-mask-container">
//                <div class="overflow-mask">
//                    <span>TEXT THAT WILL HAVE OVERFLOW HIDDEN, SCROLLABLE, AND APPENDED WITH ELLIPSIS</span>
//                </div>
//            </div>
//            <div class="ellipsis">...</div>
//        </div>
//           
//        <div class="hide-overflow">
//            <div class="overflow-mask-container">
//                <div class="overflow-mask">
//                    <span>TEXT THAT WILL HAVE OVERFLOW HIDDEN AND APPENDED WITH ELLIPSIS</span>
//                </div>
//            </div>
//            <div class="ellipsis">...</div>
//       </div>
//        
//        <div class="">
//            <span>NORMAL TEXT</span>
//        </div>
//        
//        <a href="" class="overlay-link">&nbsp;</a>
//        
//    </div>


//  ==================================================================================================
//	Initialization of the Overflow Scoller Plugin
//  ==================================================================================================

    jQuery.fn.overflowScroller = function(settings) {
		settings = jQuery.extend({
		}, settings);		
		return this.each(function(){
		
			// assign the container to a variable 
			$container = jQuery(this);

			// find all spans with a parent of div.hide-overflow in our container
			$container.find("div.hide-overflow span").each(function(){
				
                // assign the span to a variable
				var $span = $(this);

				// wrap a div.overflow-mask around the span
				var $overflowDiv = $span.wrap("<div class='overflow-mask'></div>");								
				// wrap a div.overflow-mask-container around the div.overflow-mask
				var $overflowDivContainer = $span.parent().wrap("<div class='overflow-mask-container'></div>");								
                
                // assign the width of the span to a variable
				var $spanWidth = $span.width();
				// assign the width of the span's parent div.hide-overflow to a variable
				var $overflowContainerDivWidth = $span.parent().parent().parent().width();
				
				// reassign the span's div.overflow-mask
				$overflowDiv = $span.parent();
				
				// the content in the current span is overflowing past the width of the span's parent div.hide-overflow...
				if ( $spanWidth > $overflowContainerDivWidth )
				{
				    // add an ellipsis div to the span's parent div.hide-overflow
					$span.parent().parent().parent().append("<div class='ellipsis'>...</div>");	
					// realign the text of the div.hide-overflow to left, in case it was centered ( so the ellipsis is not covered over
					$span.parent().parent().parent().css("textAlign","left");
					// adjust the width of the div.overflow-mask-container to (div.hide-overflow - width of ellipsis div)
				    $span.parent().parent().parent().find("div.overflow-mask-container").width($overflowContainerDivWidth-18);
				    // set the div.overflow-mask width to the size of the div.hide-overflow
				    $overflowDiv.width($spanWidth);
				}
				// not an overflowed div...
				else
				{
				    // set the width of the overflow div to the size of the master div (for text-align:center purposes)
				    $overflowDiv.width($overflowContainerDivWidth);
				}
			});

		});	
    };

//  ==================================================================================================
//	MouseOver Event
//  ==================================================================================================

    jQuery.fn.overflowOver = function(settings) {
		settings = jQuery.extend({
		speed: 0.03,
		pause: 300
		}, settings);		
		return this.each(function(){
		
			$container = jQuery(this);
			$containerColor = $container.css("backgroundColor");
			$overlayLink = $container.find("a.overlay-link")

			// for each span in a scrollable div
			$container.find("div.scrollable div.overflow-mask span").each(function(){
			
				var $span = $(this);
				var $spanWidth = $span.width();
				var $overflowDiv = $span.parent();
				var $overflowContainerDivWidth = $span.parent().parent().parent().width();
				
				// the content in the span is overflowing 
				if ( $spanWidth > $overflowContainerDivWidth )
				{
					// normalize the speed of the scrollable
					var $normSpeed = $spanWidth/settings.speed;
					
					// set the width of the overflow mask to the size of the span content
					$overflowDiv.width($spanWidth);

					// function to animate the overflow content to the left until the text has reached the end
					// after animation has finished, set the text to the right side of the scrollable div and restart scrolling
					function ScrollOverflow(spanWidthIn, normSpeedIn){
						$overflowDiv.animate(
							{ left: "-=" + spanWidthIn }, 
							normSpeedIn, 
							"linear", 
							function(){
								$overflowDiv.css("left", $overflowContainerDivWidth); 
								ScrollOverflow($spanWidth*2, $normSpeed*2);
							});
					}

                    // set the time of the delay here for the animation to start scrolling
					$overflowDiv.animate({fontColor:'#eee'},settings.pause, 
						function(){
				            // hide the ellipsis div and lengthen the width on the overflow ask to 100% of its container
	                        $span.parent().parent().parent().find("div.ellipsis").css("display","none");
	                        $span.parent().parent().parent().find("div.overflow-mask-container").width($overflowContainerDivWidth);
				            // call animation function
				            ScrollOverflow($spanWidth, $normSpeed);
						});
				}
			});

		});	
    };

//  ==================================================================================================
//	MouseOut Event
//  ==================================================================================================

    jQuery.fn.overflowOut = function(settings) {
		settings = jQuery.extend({
		}, settings);		
		return this.each(function(){

			$this = jQuery(this);
			$this.find("div.ellipsis").css("display","block");
			
			$overflowContainerDivWidth = $this.find("div.overflow-mask-container").width()

			// stop all animation
			$this.find("div.overflow-mask").stop();
			// reset all overflow content to its original positision
			$this.find("div.overflow-mask").css("left","0px");

            // reset the width of the mask container if there is overflow
			$this.find("div.hide-overflow span").each(function(){

				var $span = $(this);
				var $spanWidth = $span.width();
				//var $overflowDiv = $span.parent();
				var $overflowContainerDivWidth = $span.parent().parent().parent().width();
				
				// the content in the span is overflowing 
				if ( $spanWidth > $overflowContainerDivWidth )
				{
				    $span.parent().parent().parent().find("div.overflow-mask-container").width($overflowContainerDivWidth-18);
				}
			});

		});	
    };