(function($) {
	$.fn.grpScroll = function(Arguements) {
		var defaults = {
			ParentBar: null, //The scroll container, the scroll bar will be moved inside this object
			AssociatedObject: null, // The object which will slide when you move the handle
			ViewWidth: "0", //The size of the viewable area for the LinkObject
			PrevControl: null,//For prev button
			PrevValue: "50", //How far it will move back
			NextControl: null, //For next button
			NextValue: "50", //How will it will move forward
			SlideSpeed: "300" //Slide speed when you click on the buttons
		}
		var Args = $.extend(defaults,Arguements);
		var ThisObj = this;
		var TranslationPercentage = 1; //The percentage to position your associate object with the handle bar
		return this.each(function(){
		
			TranslationPercentage = (Args.AssociatedObject.width() - Args.ViewWidth) / 
										(Args.ParentBar.width() - ThisObj.width());
			
			//Disable slidable object
			var stopSlideAction = function(e)
			{
				$(ThisObj).removeAttr("OldPos");
				//unbind all unneccesary functions
				$("html").unbind("mousemove", moveSlideAction)
					.unbind("mouseup", stopSlideAction);
			}
			
			//Move slidable object
			var moveSlideAction = function(e)
			{
				e.preventDefault();
				if($(ThisObj).attr("OldPos")>0){
					//Move the bar follow the mouse
					var NewPos = e.pageX - parseInt($(ThisObj).offset().left);
					//Calculate the new position using the OldPos Attribution
					var NextPos = (parseInt($(ThisObj).css("left").replace("px","")) + parseInt(NewPos) - parseInt($(ThisObj).attr("OldPos")));
					if(NextPos<0)	{
						NextPos = 0;
					}else if(NextPos + $(ThisObj).width()> Args.ParentBar.width())	{
						NextPos =Args.ParentBar.width() - $(ThisObj).width();
					}
					$(ThisObj).css("left", NextPos + "px");
					
					moveAssociateObject(NextPos, false);
				}		
			}					
			
			//Move the associated object base on the position of the slider handle
			var moveAssociateObject = function(nextPos, animated)
			{
				if(Args.AssociatedObject)
				{
					var NewAObjectPos = (-nextPos * TranslationPercentage) + "px";
					if(animated){
						Args.AssociatedObject.animate({left: NewAObjectPos}, Args.SlideSpeed);
					}
					else{
						Args.AssociatedObject.css("left", NewAObjectPos);
					}
				}				
			}
			
			//function when you click the prev button for the scroll bar
			function clickPrevButton()
			{
				var NextPos = $(ThisObj).position().left - Args.PrevValue;
				if(NextPos<0)	{
					NextPos = 0;
				}
				$(ThisObj).animate({left: NextPos}, Args.SlideSpeed);
				moveAssociateObject(NextPos, true);
			}
			
			//function when you click the prev button for the scroll bar
			function clickNextButton()
			{
				var NextPos = $(ThisObj).position().left+ Args.NextValue;
				if(NextPos + $(ThisObj).width()> Args.ParentBar.width())	{
					NextPos =Args.ParentBar.width() - $(ThisObj).width();
				}
				$(ThisObj).animate({left: NextPos}, Args.SlideSpeed);
				moveAssociateObject(NextPos, true);
			}				
			
			//Handle events for the scroll handle
			//When mousedown trigger, add a attribute to mark the mouse is down
			$(this).mousedown(function(e){
				e.preventDefault();
				OldPos = e.pageX - ThisObj.offset().left;
				ThisObj.attr("OldPos", OldPos);
				$("html").bind('mousemove', moveSlideAction); 
				//Remove the mark when mouse up
				$("html").bind('mouseup', stopSlideAction);
			});
			
			//Binding for control buttons
			Args.PrevControl.bind("click",clickPrevButton);
			Args.NextControl.bind("click",clickNextButton);
		});
	};
})(jQuery);