/***************************************************

Scroller function
	
	To use simply call the plugin and give the optional parameters 
	(all parameters here are the defaults):
	   
	speed: 800 //Scroll Speed,
	step_no: 1 //Number of items per scroll,
	visible: 1 //Number of visible items in scroller,
	direction: 'horizontal' //Horizontal or vertical scroller,
	inverse: false //Used to start from bottom or right instead of top or left,
	end_button: false //Option to add buttons to scroll to start and end,
	easing: 'swing' //Add easing (easing plugin required for anything other than swing or linear
	
	
	HTML:
	         
	<div class="button_start"><span></span></div>
	<div class="button_left"><span></span></div>
	<div class="scroller_outer">
		<div class="scroller_in">
			<div class="scroller_item">
				//item
			</div>
			<div class="scroller_item">
				//item
			</div>
			<div class="scroller_item">
				//item
			</div>
			<div class="scroller_item">
				//item
			</div>
		</div>	
	</div>
	<div class="button_right"><span></span></div>
	<div class="button_end"><span></span></div>
	
	CSS (Note that the .scroller_in width will be adjusted automatically by the plugin):
	
	Vertical Example:
	
		#vert_scroll { overflow:auto; clear:both; position:relative; }
		#vert_scroll .scroller_outer { width:145px; overflow:hidden; position:relative; z-index:200; height:308px; }
		#vert_scroll .scroller_in { position: absolute; left: 0; top: 0; width: 145px; height: 2000px;}
		#vert_scroll .scroller_item { width:145px; height:142px; padding:6px 0; }
		
		#vert_scroll .button_start { }
		#vert_scroll .button_start span a { width: 146px; height: 33px; background:#fff url(images/scroll_sprite_vert.gif) no-repeat top left; display:block; text-decoration:none; }
		#vert_scroll .button_start span a:hover { background-position: bottom left; }
		#vert_scroll .button_start span.end a { background-position: bottom left; cursor:default; }
		
		#vert_scroll .button_left { }
		#vert_scroll .button_left span a { width: 146px; height: 33px; background:#fff url(images/scroll_sprite_vert.gif) no-repeat top left; display:block; text-decoration:none; }
		#vert_scroll .button_left span a:hover { background-position: bottom left; }
		#vert_scroll .button_left span.end a { background-position: bottom left; cursor:default; }
		
		#vert_scroll .button_right{ }
		#vert_scroll .button_right span a { width: 146px; height: 33px; background:#fff url(images/scroll_sprite_vert.gif) no-repeat top right; display:block; text-decoration:none; }
		#vert_scroll .button_right span a:hover { background-position: bottom right; }
		#vert_scroll .button_right span.end a { background-position: bottom right; cursor:default; }
		
		#vert_scroll .button_end{ }
		#vert_scroll .button_end span a { width: 146px; height: 33px; background:#fff url(images/scroll_sprite_vert.gif) no-repeat top right; display:block; text-decoration:none; }
		#vert_scroll .button_end span a:hover { background-position: bottom right; }
		#vert_scroll .button_end span.end a { background-position: bottom right; cursor:default; }
		
	Horizontal Exapmle:
		
		#hor_scroll { overflow:hidden; clear:both; position:relative; height: 78px; }
		#hor_scroll .scroller_outer { height:58px; overflow:hidden; position:relative; z-index:200; width:305px; float: left; }
		#hor_scroll .scroller_in { position: absolute; overflow: auto; left: 0; top: 0; height: 58px; width: 2000px;}
		#hor_scroll .scroller_item { width:59px; height:58px; margin-left: 1px; padding-right: 1px; float: left; background: url(templates/images/gallery_small_bg.gif) no-repeat top left; line-height: 1px;  }
		
		#hor_scroll .button_start { float: left; width: 58px; }
		#hor_scroll .button_start span a { width: 58px; height: 16px; background:url(templates/images/scroll_sprite_vert.gif) no-repeat top left; display:block; text-decoration:none; }
		#hor_scroll .button_start span a:hover { background-position: bottom left; }
		#hor_scroll .button_start span.end a { background-position: bottom left; cursor:default; }
		
		#hor_scroll .button_left { float: left; width: 58px; }
		#hor_scroll .button_left span a { width: 58px; height: 16px; background:url(templates/images/scroll_sprite_vert.gif) no-repeat top left; display:block; text-decoration:none; }
		#hor_scroll .button_left span a:hover { background-position: bottom left; }
		#hor_scroll .button_left span.end a { background-position: bottom left; cursor:default; }
		
		#hor_scroll .button_right{ float: left; width: 58px; }
		#hor_scroll .button_right span a { width: 58px; height: 16px; background:url(templates/images/scroll_sprite_vert.gif) no-repeat top right; display:block; text-decoration:none; }
		#hor_scroll .button_right span a:hover { background-position: bottom right; }
		#hor_scroll .button_right span.end a { background-position: bottom right; cursor:default; }
		
		#hor_scroll .button_end{ float: left; width: 58px; }
		#hor_scroll .button_end span a { width: 58px; height: 16px; background:url(templates/images/scroll_sprite_vert.gif) no-repeat top right; display:block; text-decoration:none; }
		#hor_scroll .button_end span a:hover { background-position: bottom right; }
		#hor_scroll .button_end span.end a { background-position: bottom right; cursor:default; }
		
	

****************************************************/



// create closure
(function($) {
	
	// Function to control the scrolling
	//$.fn.scroller = function($item_width, $step_no, $direction){
	$.fn.scroller = function(options){
		
		this.each(function(){
			// Extend our default options with those provided.
			// Note that the first arg to extend is an empty object -
	  		// this is to keep from overriding our "defaults" object.
			var opts = $.extend({}, $.fn.scroller.defaults, options);
			
			// build element specific options
	    	var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
		
			var container = $(this);
			
			//var container_width = $('.scroller_outer').css('width').replace('px','');
			//var visible_items = parseInt(container_width/200);
			//alert(visible_items);
			
			var visible = parseInt(o.visible,10);
			var direction = o.direction;
			var inverse = o.inverse;
			var step_no = o.step_no;
			var speed = o.speed;
			var end_button = o.end_button;
			var easing = o.easing;
			
			
			var button_left = $('.button_left',container);
			var button_right = $('.button_right',container);
			
			if (end_button == true){
				var button_start = $('.button_start',container);
				var button_end = $('.button_end',container);
			}
			
			var item_size = 0;
			// Initialise direction and get thte size of each item
			if(direction == 'vertical'){
				direction = 'top';
				if (inverse==true){
					$('.scroller_in',container).css({'top':'auto'});
					$('.scroller_in',container).css({'bottom':'0px'});
					direction = 'bottom';
				}
				var height = parseInt($('.scroller_item',container).css('height'),10);
				
				var ptop = $('.scroller_item',container).css('padding-top');
				if (ptop == 'auto'){ ptop = 0; }
				
				var pbottom = $('.scroller_item',container).css('padding-bottom');
				if (pbottom == 'auto'){ pbottom = 0; }
				
				var padding = parseInt(ptop,10) + parseInt(pright,10);
				
				var mtop = $('.scroller_item',container).css('margin-top');
				if (mtop == 'auto'){ mtop = 0; }
				
				var mbottom = $('.scroller_item',container).css('margin-bottom');
				if (mbottom == 'auto'){ mbottom = 0; }
				
				var margin = parseInt(mtop,10) + parseInt(mbottom,10);
				
				var item_size = height + padding + margin;
				
				
			} else if(direction == 'horizontal'){
				direction = 'left';
				if (inverse==true){
					$('.scroller_in',container).css({'left':'auto'});
					
					$('.scroller_in',container).css({'right':'0px'});
					direction = 'right';
				}
				
				var width = parseInt($('.scroller_item',container).css('width'),10);
				
				var pleft = $('.scroller_item',container).css('padding-left');
				if (pleft == 'auto'){ pleft = 0; }
				
				var pright = $('.scroller_item',container).css('padding-right');
				if (pright == 'auto'){ pright = 0; }
				
				var padding = parseInt(pleft,10) + parseInt(pright,10);
				
				var mleft = $('.scroller_item',container).css('margin-left');
				if (mleft == 'auto'){ mleft = 0; }
				
				var mright = $('.scroller_item',container).css('margin-right');
				if (mright == 'auto'){ mright = 0; }
				
				var margin = parseInt(mleft,10) + parseInt(mright,10);
				
				var item_size = width + padding + margin;
			}
			
			// Initialise item width
			//var item_width = item_size;
			
			// Initialise step if not given
			/*if($step_no == undefined){
				$step_no = 1;
			}*/
			
			// Initialise the animate css object
			var t = {};
			t[direction] = 0;
			
			// If inverse turn off right buttons at the start
			if (inverse==true){
				// Turn off left button to start 
				$('span',button_right).addClass('end');
				$('span',button_left).removeClass('end');
				
				// Turn off start button to start 
				if (end_button == true){
					$('span',button_end).addClass('end');
					$('span',button_start).removeClass('end');
				}
			} else {
				// Turn off left button to start 
				$('span',button_left).addClass('end');
				$('span',button_right).removeClass('end');
				
				// Turn off start button to start 
				if (end_button == true){
					$('span',button_start).addClass('end');
					$('span',button_end).removeClass('end');
				}
			}
			
			// Get the number of items in scroller
			var items=$(' .scroller_item',container).length;
			
			// Get width as negative value to check for end of scroller
			var width=items * parseInt('-'+item_size, 10);
			
			// Get the last position on the right
			var last = width + (visible * item_size);
			
			// Get number of pixels to scroll each time
			var step=item_size*step_no;
			
			// Initialise strting position
			var pos=0;
			
			// Set width or height of inner scroller
			var div_width=items * parseInt(item_size, 10) + 50;
			if (direction=='top' || direction=='bottom'){
				$('.scroller_in',container).css({'height':div_width});	
			} else {
				$('.scroller_in',container).css({'width':div_width});
			}
			
			if (inverse==true){
				// Right Button
				button_right.each(function(){
					var $this = $(this);
					var hd = $('span', $this);
					var bt = $('<a href="#">&nbsp;</a>');
					
					// Deactivate right button if too few items
					if (items <= visible){
						$('span',button_left).addClass('end');
					}
					
					bt.click(function(){
						// Only scroll if there are more items than can be viewed
						if (items > visible){
							button = $(this);
							
							// Only do stuff if its not already scrolling
							if (!button.hasClass('scrolling')){
								// Get current position
								pos = parseInt($('.scroller_in',container).css(direction), 10);
								// Get next position
								var new_pos = pos+step+'px';
								// If next position is past the start then set new position to the start
								if (parseInt(new_pos, 10) > 0){
									new_pos='0px';
								}
								// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
								if(pos != new_pos){
									t[direction] = new_pos;
									button.addClass('scrolling');
									$('.scroller_in',container).animate(t,speed,easing,function(){
										button.removeClass('scrolling');
									});
									$('span',button_left).removeClass('end');
									if (end_button == true){$('span',button_start).removeClass('end');}
								}
								
								// Check position to change button state
								if (new_pos=='0px'){ 
									$('span',button_right).addClass('end');
									if (end_button == true){$('span',button_end).addClass('end');}
								}
							}
						}
						return false;
					});
					hd.text('');
					bt.prependTo(hd);
				});
				
				
				
				// Left Button
				button_left.each(function(){
					var $this = $(this);
					var hd = $('span', $this);
					var bt = $('<a href="#">&nbsp;</a>');
					$(bt,container).click(function(){
						
						// Only scroll if there are more items than can be viewed
						if (items > visible){
							button = $(this);
							// Only do stuff if its not already scrolling
							if (!button.hasClass('scrolling')){
							
								// Get current position
								pos = parseInt($('.scroller_in',container).css(direction), 10);
								// Get next position
								var new_pos = pos-step+'px';
								// Get position of the next press of this button
								var next_pos = parseInt(new_pos, 10);
								// If next position is past the end then change new position to only go to the end of the last scroller item and not the full step
								//window.console.log('pos: '+next_pos+' width: '+width+' last: '+last+' visible: '+visible);
								if (next_pos <= last){
									//window.console.log('diff');
									//var diff=next_pos-width;
									new_pos = last+'px';
									next_pos = last;
									$('span',button_left).addClass('end');
									if (end_button == true){$('span',button_start).addClass('end');}
								}
								// If the new position is not at the end, scroll and activate left button for use
								if (next_pos >= last){
									t[direction] = new_pos;
									button.addClass('scrolling');
									$('.scroller_in',container).animate(t,speed,easing,function(){
										button.removeClass('scrolling');
									});
									$('span',button_right).removeClass('end');
									if (end_button == true){$('span',button_end).removeClass('end');}
								} 
								
								// Check position to change button state
								//new_pos = parseInt(new_pos, 10)-step+'px';
								//if (parseInt(new_pos, 10)==width){ $('span',button_right).addClass('end'); }
							}
						}
						return false;
					});
					hd.text('');
					bt.prependTo(hd);
				});
				
				
				if (end_button == true){
					// End Button
					button_end.each(function(){
						var $this = $(this);
						var hd = $('span', $this);
						var bt = $('<a href="#">&nbsp;</a>');
						
						// Deactivate right button if too few items
						if (items <= visible){
							$('span',button_start).addClass('end');
						}
						
						bt.click(function(){
							// Only scroll if there are more items than can be viewed
							if (items > visible){
								button = $(this);
								
								// Only do stuff if its not already scrolling
								if (!button.hasClass('scrolling')){
									// Get current position
									pos = parseInt($('.scroller_in',container).css(direction), 10);
									// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
									if(pos != 0){
										t[direction] = '0px';
										button.addClass('scrolling');
										$('.scroller_in',container).animate(t,speed,easing,function(){
											button.removeClass('scrolling');
										});
										$('span',button_left).removeClass('end');
										$('span',button_start).removeClass('end');
										$('span',button_right).addClass('end');
										$('span',button_end).addClass('end');
									}
								}
							}
							return false;
						});
						hd.text('');
						bt.prependTo(hd);
					});
					
					
					// Start Button
					button_start.each(function(){
						var $this = $(this);
						var hd = $('span', $this);
						var bt = $('<a href="#">&nbsp;</a>');
						
						// Deactivate start button if too few items
						if (items <= visible){
							$('span',button_start).addClass('end');
						}
						
						bt.click(function(){
							// Only scroll if there are more items than can be viewed
							if (items > visible){
								button = $(this);
								
								// Only do stuff if its not already scrolling
								if (!button.hasClass('scrolling')){
									// Get current position
									pos = parseInt($('.scroller_in',container).css(direction), 10);
									// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
									if(pos != last){
										t[direction] = last+'px';
										button.addClass('scrolling');
										$('.scroller_in',container).animate(t,speed,easing,function(){
											button.removeClass('scrolling');
										});
										$('span',button_right).removeClass('end');
										$('span',button_end).removeClass('end');
										$('span',button_left).addClass('end');
										$('span',button_start).addClass('end');
									}
								}
							}
							return false;
						});
						hd.text('');
						bt.prependTo(hd);
					});
				}
					
			} else {
				
				// Left Button
				button_left.each(function(){
					var $this = $(this);
					var hd = $('span', $this);
					var bt = $('<a href="#">&nbsp;</a>');
					
					// Deactivate right button if too few items
					if (items <= visible){
						$('span',button_right).addClass('end');
					}
					
					bt.click(function(){
						// Only scroll if there are more items than can be viewed
						if (items > visible){
							button = $(this);
							
							// Only do stuff if its not already scrolling
							if (!button.hasClass('scrolling')){
								// Get current position
								pos = parseInt($('.scroller_in',container).css(direction), 10);
								// Get next position
								var new_pos = pos+step+'px';
								// If next position is past the start then set new position to the start
								if (parseInt(new_pos, 10) > 0){
									new_pos='0px';
								}
								// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
								if(pos != new_pos){
									t[direction] = new_pos;
									button.addClass('scrolling');
									$('.scroller_in',container).animate(t,speed,easing,function(){
										button.removeClass('scrolling');
									});
									$('span',button_right).removeClass('end');
									if (end_button == true){$('span',button_end).removeClass('end');}
								}
								
								// Check position to change button state
								if (new_pos=='0px'){ 
									$('span',button_left).addClass('end');
									if (end_button == true){$('span',button_start).addClass('end');}
								}
							}
						}
						return false;
					});
					hd.text('');
					bt.prependTo(hd);
				});
				
				
				
				// Right Button
				button_right.each(function(){
					var $this = $(this);
					var hd = $('span', $this);
					var bt = $('<a href="#">&nbsp;</a>');
					$(bt,container).click(function(){
						
						// Only scroll if there are more items than can be viewed
						if (items > visible){
							button = $(this);
							// Only do stuff if its not already scrolling
							if (!button.hasClass('scrolling')){
							
								// Get current position
								pos = parseInt($('.scroller_in',container).css(direction), 10);
								// Get next position
								var new_pos = pos-step+'px';
								// Get position of the next press of this button
								var next_pos = parseInt(new_pos, 10);
								// If next position is past the end then change new position to only go to the end of the last scroller item and not the full step
								//window.console.log('pos: '+next_pos+' width: '+width+' last: '+last+' visible: '+visible);
								if (next_pos <= last){
									//window.console.log('diff');
									//var diff=next_pos-width;
									new_pos = last+'px';
									next_pos = last;
									$('span',button_right).addClass('end');
									if (end_button == true){$('span',button_end).addClass('end');}
								}
								// If the new position is not at the end, scroll and activate left button for use
								if (next_pos >= last){
									t[direction] = new_pos;
									button.addClass('scrolling');
									$('.scroller_in',container).animate(t,speed,easing,function(){
										button.removeClass('scrolling');
									});
									$('span',button_left).removeClass('end');
									if (end_button == true){$('span',button_start).removeClass('end');}
								} 
								
								// Check position to change button state
								//new_pos = parseInt(new_pos, 10)-step+'px';
								//if (parseInt(new_pos, 10)==width){ $('span',button_right).addClass('end'); }
							}
						}
						return false;
					});
					hd.text('');
					bt.prependTo(hd);
				});
				
				
				if (end_button == true){
					// Start Button
					button_start.each(function(){
						var $this = $(this);
						var hd = $('span', $this);
						var bt = $('<a href="#">&nbsp;</a>');
						
						// Deactivate right button if too few items
						if (items <= visible){
							$('span',button_end).addClass('end');
						}
						
						bt.click(function(){
							// Only scroll if there are more items than can be viewed
							if (items > visible){
								button = $(this);
								
								// Only do stuff if its not already scrolling
								if (!button.hasClass('scrolling')){
									// Get current position
									pos = parseInt($('.scroller_in',container).css(direction), 10);
									// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
									if(pos != 0){
										t[direction] = '0px';
										button.addClass('scrolling');
										$('.scroller_in',container).animate(t,speed,easing,function(){
											button.removeClass('scrolling');
										});
										$('span',button_right).removeClass('end');
										$('span',button_end).removeClass('end');
										$('span',button_left).addClass('end');
										$('span',button_start).addClass('end');
									}
								}
							}
							return false;
						});
						hd.text('');
						bt.prependTo(hd);
					});
					
					
					// End Button
					button_end.each(function(){
						var $this = $(this);
						var hd = $('span', $this);
						var bt = $('<a href="#">&nbsp;</a>');
						
						// Deactivate end button if too few items
						if (items <= visible){
							$('span',button_end).addClass('end');
						}
						
						bt.click(function(){
							// Only scroll if there are more items than can be viewed
							if (items > visible){
								button = $(this);
								
								// Only do stuff if its not already scrolling
								if (!button.hasClass('scrolling')){
									// Get current position
									pos = parseInt($('.scroller_in',container).css(direction), 10);
									// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
									if(pos != last){
										t[direction] = last+'px';
										button.addClass('scrolling');
										$('.scroller_in',container).animate(t,speed,easing,function(){
											button.removeClass('scrolling');
										});
										$('span',button_left).removeClass('end');
										$('span',button_start).removeClass('end');
										$('span',button_right).addClass('end');
										$('span',button_end).addClass('end');
									}
								}
							}
							return false;
						});
						hd.text('');
						bt.prependTo(hd);
					});
					
				}
			}
			
		});
	}
	
	
	// plugin defaults - added as a property on our plugin function
	$.fn.scroller.defaults = {
		speed: 800,
		step_no: 1,
		visible: 1,
		direction: 'horizontal',
		inverse: false,
		end_button: false,
		easing: 'swing'
	};
	
	
// end of closure
})(jQuery);