﻿/**
* jQuery.smoothDivScrolling - Smooth div scrolling using jQuery.
* This plugin is for turning a set of DIV's into a smooth scrolling area.
*
* Copyright (c) 2008 Thomas Kahn - thomas.kahn(at)karnhuset(dot)net
*
* This plugin is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* This plugin is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details. <http://www.gnu.org/licenses/>.
*
* Date: 2008-10-30
* @author Thomas Kahn
* @version 0.5
*
*/
 
(function($) { 
	jQuery.fn.smoothDivScroll = function(options){

		var defaults = {
		scrollingHotSpotLeft:"div.scrollingHotSpotLeft",
		scrollingHotSpotRight:"div.scrollingHotSpotRight",
		scrollWrapper:"div.scrollWrapper",
		scrollableArea: "div.scrollableArea"
		};
		
		var $mom = $(this);
		var originalMomWidth;

		var options = $.extend(defaults, options);

		// The left offset of the container on which you place 
		// the scrolling behavior.
		// This offset is used when calculating the mouse x-position 
		// in relation to scroll hotspots
		var freeScrollOffset = $mom.offset().left;
		
		// A variable used for storing the current hotspot width.
		// It is used when calculating the scroll speed
		var hotSpotWidth = 0;
		
		// A function for getting the current hotspot width
		function calculateHotSpotWidth()
		{
			hotSpotWidth = $mom.children(options.scrollingHotSpotRight).innerWidth();
		}
		
		// A variable used for storing the combined width of all
		// the elements inside the scrollable area
		var scrollableAreaWidth = 0;
	
		// A function for calculating the combined width of all
		// the elements inside the scrollable area
		function setWidthOfScrollableArea()
		{
			$mom.find(options.scrollableArea).children().each(function() {
				scrollableAreaWidth = scrollableAreaWidth + $(this).outerWidth({margin:true});	
			});
				
			$mom.find(options.scrollableArea).css("width",scrollableAreaWidth);
		}
		
		// EVENT - window load
		// Set the width of the scrollable area.
		// Do the same stuff as when the windows is resized
		$(function(){
			$(window).one("load",function(e){
				setWidthOfScrollableArea(); 
				windowIsResized();
				originalMomWidth = $mom.css("width");
			});
		});
		
		// EVENT - window resize
		$(window).bind("resize",function(e){
			windowIsResized();
		});
		
		// A function for doing the stuff that needs to be
		// done when the browser window is resized
		function windowIsResized()
		{
			// Reset the left offset of the scroll wrapper
			$mom.find(options.scrollWrapper).scrollLeft(0);
			
			// Recalculate the width of the mother div
			// and the wrapper div
			// Get the width of the page body
			var bodyWidth = $("body").innerWidth({margin:true});
			var motherAreaWidth = $mom.width();
			
			if(bodyWidth < motherAreaWidth)
			{
				$mom.css("width", bodyWidth);
			}
			else
			{
				$mom.css("width", originalMomWidth);
			}
			
			// Check the new hotspot width
			calculateHotSpotWidth();
			
			// Check if you need to show/hide any hotspots
			showHideHotSpots();
		}
		
		// HELPER FUNCTIONS FOR SHOWING AND HIDING HOT SPOTS
		function hideLeftHotSpot(){
			//if($.browser.msie){$mom.find(options.scrollingHotSpotLeft).hide();}
			//else{$mom.find(options.scrollingHotSpotLeft).fadeOut(250);}
		}
		function hideRightHotSpot(){
			//if($.browser.msie){ $mom.find(options.scrollingHotSpotRight).hide();}
			//else{$mom.find(options.scrollingHotSpotRight).fadeOut(250);}
		}		
		function showLeftHotSpot(){
			if($.browser.msie){$mom.find(options.scrollingHotSpotLeft).show();}
			else{$mom.find(options.scrollingHotSpotLeft).fadeIn(250);}
		}
		function showRightHotSpot(){
			if($.browser.msie){$mom.find(options.scrollingHotSpotRight).show();}
			else{$mom.find(options.scrollingHotSpotRight).fadeIn(250);}
		}
		
		// EVENTS - scroll right
		var rightScrollInterval;
		var scrollXpos;
		$(function(){
			$mom.find(options.scrollingHotSpotRight).bind('mousemove',function(e){
				var x = e.pageX - (this.offsetLeft + freeScrollOffset);
				x = Math.round(x/(hotSpotWidth/5));
				scrollXpos = x;
			});

			$mom.find(options.scrollingHotSpotRight).bind('mouseover',function(e){
				rightScrollInterval = setInterval(doScrollRight, 15);
			});	

			$mom.find(options.scrollingHotSpotRight).bind('mouseout',function(e){
				clearInterval(rightScrollInterval);
				scrollXpos = 0;
			});
		});
		
		// The function that does the actual scrolling right
		var doScrollRight = function()
		{	
			$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + scrollXpos);
			showHideHotSpots();			
		}
		
		// EVENTS - scroll left
		var leftScrollInterval;
		$(function(){
			// mousemove left hotspot
			$mom.find(options.scrollingHotSpotLeft).bind('mousemove',function(e){
				var x = $mom.find(options.scrollingHotSpotLeft).innerWidth({margin:true}) - (e.pageX - freeScrollOffset);
				x = Math.round(x/(hotSpotWidth/5));
				scrollXpos = x;
			});
			
			// mouseover left hotspot
			$mom.find(options.scrollingHotSpotLeft).bind('mouseover',function(e){
				leftScrollInterval = setInterval(doScrollLeft, 15);
			});	
			
			// mouseout left hotspot
			$mom.find(options.scrollingHotSpotLeft).bind('mouseout',function(e){
				clearInterval(leftScrollInterval);
				scrollXpos = 0;
			});
		});
		
		// The function that does the actual scrolling left
		var doScrollLeft = function()
		{	
			$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() - scrollXpos);
			showHideHotSpots();			
		};
		
		// Function for showing and hiding hotspots depending on the
		// offset of the scrolling
		function showHideHotSpots()
		{
			// Get the width of the page body
			var bodyWidth = $("body").innerWidth();
			
			// If the scrollable area is shorter than the current
			// window width, both scroll hotspots should be hidden.
			if(scrollableAreaWidth < bodyWidth)
			{
				hideLeftHotSpot();
				hideRightHotSpot();
			}
			// When you can't scroll further left
			// the left scroll hotspot should be hidden
			// and the right hotspot visible
			else if($mom.find(options.scrollWrapper).scrollLeft() == 0)
			{
				hideLeftHotSpot();
				showRightHotSpot();
			}
			// When you can't scroll further right
			// the right scroll hotspot should be hidden
			// and the left hotspot visible
			else if(scrollableAreaWidth == ($mom.find(options.scrollWrapper).width() + $mom.find(options.scrollWrapper).scrollLeft()))
			{
				hideRightHotSpot();
				showLeftHotSpot();
			}
			// If you are somewhere in the middle of your
			// scrolling, both hotspots should be visible
			else
			{
				showRightHotSpot();
				showLeftHotSpot();
			}

            // AJL - Sorry need them on all the time!			
            showRightHotSpot();
            showLeftHotSpot();

		}
};
})(jQuery); 
