/**
 * @author aprian@digitaldevelopment.com
 * @description
 * 		Plugin to framed a list and made vertically scrollable
 * @use
 * 		$('list_element').framedList();
 * @options
 * 		segmentInFramed : 'numeric', how much segment do you want to show
 *		segmentOffset 	: 'numeric', offset for calculate height and width
 *		prevButton 		: 'string', you can add image or just a text for the previous button
 *		nextButton 		: 'string', you can add image or just a text for the next button
 *  @html
 *  	HTML that will be produced by this plugin:
 *  	<div class="wrapper_list">
 *  		<span class="framedNav"><a class="prevSegment" href=""> --options.prevButton-- </a></span>
 *  		<span class="framedNav"><a class="nextSegment" href=""> --options.nextButton-- </a></span>
 *  		<div class="framed">
 *  			<ul id="list_element">
 *  				<li>segments</li>
 *  			</ul>
 *  		</div>
 *  	</div>
 */


(function($){
	$.fn.framedList = function(options){
		
		/* Setup the default parameter */
		var defaults = {
			segmentInFramed: 4,
			segmentOffset: 15,
			prevButton: '&laquo; previous',
			nextButton: 'next &raquo;'
		};
		var options = $.extend({},defaults,options);
		 
		return this.each(function(){
			
			var framedList = $(this);
			
			// Wrapped this list
			framedList.wrap('<div class="wrapper_list"></div>');
			$(".wrapper_list").css({'position': 'relative'});
			
			// Calculate segment width and height
			var segments = framedList.children("li");
			var segment = framedList.children("li").eq(0);
			var numSegments = segments.size();
			var segmentOutFramed = numSegments - options.segmentInFramed;
			
			// Calculate width and height of the segment
			segmentWidth = parseInt(segment.width() + options.segmentOffset);
			segmentHeight = segment.outerHeight();

			// Calculate framed witdh. 
			var framedWidth = segmentWidth * options.segmentInFramed;
			var framedHeight = segmentHeight;

			// Create framed
			createFrameOnList(framedList,framedWidth,framedHeight,options.prevButton,options.nextButton);

			/* Next Button [framed go left] */
			$("a.nextSegment").bind('click', function(){
				var posLeft = parseInt(framedList.css('left'));
				var nextPosLeft = posLeft - segmentWidth;
				
				if(posLeft >= 0-(segmentWidth * (segmentOutFramed-1))) {
					framedList.animate({'left': nextPosLeft},"normal");	
				}
				else {
					framedList.animate({'left': 0},"normal");
				}
				return false;
			});
						
			/* Previous Button [framed go right] */ 
			$("a.prevSegment").bind('click', function(){
				var posLeft = parseInt(framedList.css('left'));
				var nextPosLeft = posLeft + segmentWidth;
				
				if(posLeft < 0) {
					framedList.animate({'left': nextPosLeft},"normal");	
				}
				return false;
			});
			
			
			/* 
			 * Function for creating the framed 
			 * o : jquery object of the list (ul)
			 * w : width of the framed
			 * h : height of the framed
			 * p : previous button (image or text)
			 * n : next button (image or text)
			 */
			function createFrameOnList(o,w,h,p,n){
				// wrap list on a div call .framed
				o.wrap('<div class="framed"></div>');
				
				// Set some css parameter
				var framed = $(".framed");
				framed.css({
					"width":w,
					"height":h,
					"position":"relative",
					"overflow":"hidden"
				});
				
				// Create prevButton and nextButton for navigation
				prevButton = createButton(p,'prevSegment');
				nextButton = createButton(n,'nextSegment');
				
				// Preppend those button to the wrapper. Set their position using css
				$(prevButton).insertBefore(framed);
				$(nextButton).insertBefore(framed);
				
				// Reset list position on top left corner of it's wrapper
				o.css({
					"position":"absolute",
					"top":0,
					"left":0
				});
			}
			
			/*
			 * Function for create previous button
			 * buttonFunction : prevSegment or nextSegment
			 * thisButton : button to be created, previous button or next button. Can be text or image.
			 */
			function createButton(thisButton, buttonFunction){
				var thisButton = '<span class="framedNav"><a href="" class="' + buttonFunction + '">' + thisButton + '</a></span>';
				return thisButton;
			}
			
		});
	};
	
	
})(jQuery)