Add common component

add fileUpload plugin css,js and png picture

Issue-ID:CLIENT-164

Change-Id: I565ef385dea8e3930a633758396a87e9b0260fc0
Signed-off-by: YILI <li.yi101@zte.com.cn>

1 files changed, 1446 insertions, 0 deletions

diff --git a/alarm-analysis/src/main/webapp/public/common/js/jquery.sly.js b/alarm-analysis/src/main/webapp/public/common/js/jquery.sly.js
new file mode 100644
index 00000000..ce3390ff
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/public/common/js/jquery.sly.js
@@ -0,0 +1,1446 @@
+/*!
+ * jQuery Sly v0.9.6
+ * https://github.com/Darsain/sly
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jshint eqeqeq: true, noempty: true, strict: true, undef: true, expr: true, smarttabs: true, browser: true */
+/*global jQuery:false */
+
+;(function($, undefined){
+'use strict';
+
+// Plugin names
+var pluginName = 'sly',
+	namespace = 'plugin_' + pluginName;
+
+/**
+ * Plugin class
+ *
+ * @class
+ * @param {Element} frame DOM element of sly container
+ * @param {Object}  o Object with plugin options
+ */
+function Plugin( frame, o ){
+
+	// Alias for this
+	var self = this,
+
+	// Frame variables
+		$frame = $(frame),
+		$slidee = $frame.children().eq(0),
+		frameSize = 0,
+		slideeSize = 0,
+		pos = {
+			cur: 0,
+			max: 0,
+			min: 0
+		},
+
+	// Scrollbar variables
+		$sb = $(o.scrollBar).eq(0),
+		$handle = $sb.length ? $sb.children().eq(0) : 0,
+		sbSize = 0,
+		handleSize = 0,
+		hPos = {
+			cur: 0,
+			max: 0,
+			min: 0
+		},
+
+	// Pagesbar variables
+		$pb = $(o.pagesBar),
+		$pages = 0,
+		pages = [],
+
+	// Navigation type booleans
+		basicNav = o.itemNav === 'basic',
+		smartNav = o.itemNav === 'smart',
+		forceCenteredNav = o.itemNav === 'forceCentered',
+		centeredNav = o.itemNav === 'centered' || forceCenteredNav,
+		itemNav = basicNav || smartNav || centeredNav || forceCenteredNav,
+
+	// Other variables
+		$items = 0,
+		items = [],
+		rel = {
+			firstItem: 0,
+			lastItem: 1,
+			centerItem: 1,
+			activeItem: -1,
+			activePage: 0,
+			items: 0,
+			pages: 0
+		},
+		$scrollSource = o.scrollSource ? $( o.scrollSource ) : $frame,
+		$dragSource = o.dragSource ? $( o.dragSource ) : $frame,
+		$prevButton = $(o.prev),
+		$nextButton = $(o.next),
+		$prevPageButton = $(o.prevPage),
+		$nextPageButton = $(o.nextPage),
+		cycleIndex = 0,
+		cycleIsPaused = 0,
+		isDragging = 0,
+		callbacks = {};
+
+
+	/**
+	 * (Re)Loading function
+	 *
+	 * Populates arrays, sets sizes, binds events, ...
+	 *
+	 * @public
+	 */
+	var load = this.reload = function(){
+
+		// Local variables
+		var ignoredMargin = 0,
+			oldPos = $.extend({}, pos);
+
+		// Clear cycling timeout
+		clearTimeout( cycleIndex );
+
+		// Reset global variables
+		frameSize = o.horizontal ? $frame.width() : $frame.height();
+		sbSize = o.horizontal ? $sb.width() : $sb.height();
+		slideeSize = o.horizontal ? $slidee.outerWidth() : $slidee.outerHeight();
+		$items = $slidee.children();
+		items = [];
+		pages = [];
+
+		// Set position limits & relatives
+		pos.min = 0;
+		pos.max = slideeSize > frameSize ? slideeSize - frameSize : 0;
+		rel.items = $items.length;
+
+		// Sizes & offsets logic, but only when needed
+		if( itemNav ){
+
+			var marginStart = getPx( $items, o.horizontal ? 'marginLeft' : 'marginTop' ),
+				marginEnd = getPx( $items.slice(-1), o.horizontal ? 'marginRight' : 'marginBottom' ),
+				centerOffset = 0,
+				paddingStart = getPx( $slidee, o.horizontal ? 'paddingLeft' : 'paddingTop' ),
+				paddingEnd = getPx( $slidee, o.horizontal ? 'paddingRight' : 'paddingBottom' ),
+				areFloated = $items.css('float') !== 'none';
+
+			// Update ignored margin
+			ignoredMargin = marginStart ? 0 : marginEnd;
+
+			// Reset slideeSize
+			slideeSize = 0;
+
+			// Iterate through items
+			$items.each(function(i,e){
+
+				// Item
+				var item = $(e),
+					itemSize = o.horizontal ? item.outerWidth(true) : item.outerHeight(true),
+					marginTop    = getPx( item, 'marginTop' ),
+					marginBottom = getPx( item, 'marginBottom'),
+					marginLeft   = getPx( item, 'marginLeft'),
+					marginRight  = getPx( item, 'marginRight'),
+					itemObj = {
+						size: itemSize,
+						offStart: slideeSize - ( !i || o.horizontal ? 0 : marginTop ),
+						offCenter: slideeSize - Math.round( frameSize / 2 - itemSize / 2 ),
+						offEnd: slideeSize - frameSize + itemSize - ( marginStart ? 0 : marginRight ),
+						margins: {
+							top:    marginTop,
+							bottom: marginBottom,
+							left:   marginLeft,
+							right:  marginRight
+						}
+					};
+
+				// Account for centerOffset & slidee padding
+				if( !i ){
+					centerOffset = -( forceCenteredNav ? Math.round( frameSize / 2 - itemSize / 2 ) : 0 ) + paddingStart;
+					slideeSize += paddingStart;
+				}
+
+				// Increment slidee size for size of the active element
+				slideeSize += itemSize;
+
+				// Try to account for vertical margin collapsing in vertical mode
+				// It's not bulletproof, but should work in 99% of cases
+				if( !o.horizontal && !areFloated ){
+
+					// Subtract smaller margin, but only when top margin is not 0, and this is not the first element
+					if( marginBottom && marginTop && i > 0 ){
+						slideeSize -= marginTop < marginBottom ? marginTop : marginBottom;
+					}
+
+				}
+
+				// Things to be done at last item
+				if( i === $items.length - 1 ){
+					slideeSize += paddingEnd;
+				}
+
+				// Add item object to items array
+				items.push(itemObj);
+
+			});
+
+			// Resize slidee
+			$slidee.css( o.horizontal ? { width: slideeSize+'px' } : { height: slideeSize+'px' } );
+
+			// Adjust slidee size for last margin
+			slideeSize -= ignoredMargin;
+
+			// Set limits
+			pos.min = centerOffset;
+			pos.max = forceCenteredNav ? items[items.length-1].offCenter : slideeSize > frameSize ? slideeSize - frameSize : 0;
+
+			// Fix overflowing activeItem
+			rel.activeItem >= items.length && self.activate( items.length-1 );
+
+		}
+
+		// Assign relative position indexes
+		assignRelatives();
+
+		// Scrollbar
+		if( $handle ){
+
+			// Stretch scrollbar handle to represent the visible area
+			handleSize = o.dynamicHandle ? Math.round( sbSize * frameSize / slideeSize ) : o.horizontal ? $handle.width() : $handle.height();
+			handleSize = handleSize > sbSize ? sbSize : handleSize;
+			handleSize = handleSize < o.minHandleSize ? o.minHandleSize : handleSize;
+			hPos.max = sbSize - handleSize;
+
+			// Resize handle
+			$handle.css( o.horizontal ? { width: handleSize+'px' } : { height: handleSize+'px' } );
+
+		}
+
+		// Pages
+		var tempPagePos = 0,
+			pagesHtml = '',
+			pageIndex = 0;
+
+		// Populate pages array
+		if( forceCenteredNav ){
+			pages = $.map( items, function( o ){ return o.offCenter; } );
+		} else {
+			while( tempPagePos - frameSize < pos.max ){
+
+				var pagePos = tempPagePos > pos.max ? pos.max : tempPagePos;
+
+				pages.push( pagePos );
+				tempPagePos += frameSize;
+
+				// When item navigation, and last page is smaller than half of the last item size,
+				// adjust the last page position to pos.max and break the loop
+				if( tempPagePos > pos.max && itemNav && pos.max - pagePos < ( items[items.length-1].size - ignoredMargin ) / 2 ){
+
+					pages[pages.length-1] = pos.max;
+					break;
+
+				}
+
+			}
+		}
+
+		// Pages bar
+		if( $pb.length ){
+
+			for( var i = 0; i < pages.length; i++ ){
+				pagesHtml += o.pageBuilder( pageIndex++ );
+			}
+
+			// Bind page navigation, append to pagesbar, and save to $pages variable
+			$pages = $(pagesHtml).bind('click.' + namespace, function(){
+
+				self.activatePage( $pages.index(this) );
+
+			}).appendTo( $pb.empty() );
+
+		}
+
+		// Bind activating to items
+		$items.unbind('.' + namespace).bind('mouseup.' + namespace, function(e){
+
+			e.which === 1 && !isDragging && self.activate( this );
+
+		});
+
+		// Fix overflowing
+		pos.cur < pos.min && slide( pos.min );
+		pos.cur > pos.max && slide( pos.max );
+
+		// Extend relative variables object with some useful info
+		rel.pages = pages.length;
+		rel.slideeSize = slideeSize;
+		rel.frameSize = frameSize;
+		rel.sbSize = sbSize;
+		rel.handleSize = handleSize;
+
+		// Synchronize scrollbar
+		syncBars(0);
+
+		// Disable buttons
+		disableButtons();
+
+		// Automatic cycling
+		if( itemNav && o.cycleBy ){
+
+			var pauseEvents = 'mouseenter.' + namespace + ' mouseleave.' + namespace;
+
+			// Pause on hover
+			o.pauseOnHover && $frame.unbind(pauseEvents).bind(pauseEvents, function(e){
+
+				!cycleIsPaused && self.cycle( e.type === 'mouseenter', 1 );
+
+			});
+
+			// Initiate cycling
+			self.cycle( o.startPaused );
+
+		}
+
+		// Trigger :load event
+		$frame.trigger( pluginName + ':load', [ $.extend({}, pos, { old: oldPos }), $items, rel ] );
+
+	};
+
+
+	/**
+	 * Slide the slidee
+	 *
+	 * @private
+	 *
+	 * @param {Int} newPos New slidee position in relation to frame
+	 * @param {Bool} align  Whetner to Align elements to the frame border
+	 * @param {Int} speed  Animation speed in milliseconds
+	 */
+	function slide( newPos, align, speed ){
+
+		speed = isNumber( speed ) ? speed : o.speed;
+
+		// Align items
+		if( align && itemNav ){
+
+			var tempRel = getRelatives( newPos );
+
+			if( centeredNav ){
+
+				newPos = items[tempRel.centerItem].offCenter;
+				self[ forceCenteredNav ? 'activate' : 'toCenter']( tempRel.centerItem, 1 );
+
+			} else if( newPos > pos.min && newPos < pos.max ){
+
+				newPos = items[tempRel.firstItem].offStart;
+
+			}
+
+		}
+
+		// Fix overflowing position
+		if( !isDragging || !o.elasticBounds ){
+			newPos = newPos < pos.min ? pos.min : newPos;
+			newPos = newPos > pos.max ? pos.max : newPos;
+		}
+
+		// Stop if position has not changed
+		if( newPos === pos.cur ) {
+			return;
+		} else {
+			pos.cur = newPos;
+		}
+
+		// Reassign relative indexes
+		assignRelatives();
+
+		// Add disabled classes
+		disableButtons();
+
+		// halt ongoing animations
+		stop();
+
+		// Trigger :move event
+		!isDragging && $frame.trigger( pluginName + ':move', [ pos, $items, rel ] );
+
+		var newProp = o.horizontal ? { left: -pos.cur+'px' } : { top: -pos.cur+'px' };
+
+		// Slidee move
+		if( speed > 16 ){
+
+			$slidee.animate( newProp, speed, isDragging ? 'swing' : o.easing, function(e){
+
+				// Trigger :moveEnd event
+				!isDragging && $frame.trigger( pluginName + ':moveEnd', [ pos, $items, rel ] );
+
+			});
+
+		} else {
+
+			$slidee.css( newProp );
+
+			// Trigger :moveEnd event
+			!isDragging && $frame.trigger( pluginName + ':moveEnd', [ pos, $items, rel ] );
+
+		}
+
+	}
+
+
+	/**
+	 * Synchronizes scrollbar & pagesbar positions with the slidee
+	 *
+	 * @private
+	 *
+	 * @param {Int} speed Animation speed for scrollbar synchronization
+	 */
+	function syncBars( speed ){
+
+		// Scrollbar synchronization
+		if ($handle) {
+
+			hPos.cur = Math.round( ( pos.cur - pos.min ) / ( pos.max - pos.min ) * hPos.max );
+			hPos.cur = hPos.cur < hPos.min ? hPos.min : hPos.cur > hPos.max ? hPos.max : hPos.cur;
+			$handle.stop().animate( o.horizontal ? { left: hPos.cur+'px' } : { top: hPos.cur+'px' }, isNumber(speed) ? speed : o.speed, o.easing );
+
+		}
+
+		// Pagesbar synchronization
+		syncPages();
+
+	}
+
+
+	/**
+	 * Synchronizes pagesbar
+	 *
+	 * @private
+	 */
+	function syncPages(){
+
+		if (!$pages.length) {
+			return;
+		}
+
+		// Classes
+		$pages.removeClass(o.activeClass).eq(rel.activePage).addClass(o.activeClass);
+
+	}
+
+
+	/**
+	 * Activate previous item
+	 *
+	 * @public
+	 */
+	this.prev = function(){
+
+		self.activate( rel.activeItem - 1 );
+
+	};
+
+
+	/**
+	 * Activate next item
+	 *
+	 * @public
+	 */
+	this.next = function(){
+
+		self.activate( rel.activeItem + 1 );
+
+	};
+
+
+	/**
+	 * Activate previous page
+	 *
+	 * @public
+	 */
+	this.prevPage = function(){
+
+		self.activatePage( rel.activePage - 1 );
+
+	};
+
+
+	/**
+	 * Activate next page
+	 *
+	 * @public
+	 */
+	this.nextPage = function(){
+
+		self.activatePage( rel.activePage + 1 );
+
+	};
+
+
+	/**
+	 * Stop ongoing animations
+	 *
+	 * @private
+	 */
+	function stop(){
+
+		$slidee.add($handle).stop();
+
+	}
+
+
+	/**
+	 * Animate element or the whole slidee to the start of the frame
+	 *
+	 * @public
+	 *
+	 * @param {Element|Int} el DOM element, or index of element in items array
+	 */
+	this.toStart = function( el ){
+
+		if( itemNav ){
+
+			var index = getIndex( el );
+
+			if( el === undefined ){
+
+				slide( pos.min, 1 );
+
+			} else if( index !== -1 ){
+
+				// You can't align items to the start of the frame when centeredNav is enabled
+				if (centeredNav) {
+					return;
+				}
+
+				index !== -1 && slide( items[index].offStart );
+
+			}
+
+		} else {
+
+			if( el === undefined ){
+
+				slide( pos.min );
+
+			} else {
+
+				var $el = $slidee.find(el).eq(0);
+
+				if( $el.length ){
+
+					var offset = o.horizontal ? $el.offset().left - $slidee.offset().left : $el.offset().top - $slidee.offset().top;
+
+					slide( offset );
+
+				}
+
+			}
+
+		}
+
+		syncBars();
+
+	};
+
+
+	/**
+	 * Animate element or the whole slidee to the end of the frame
+	 *
+	 * @public
+	 *
+	 * @param {Element|Int} el DOM element, or index of element in items array
+	 */
+	this.toEnd = function( el ){
+
+		if( itemNav ){
+
+			var index = getIndex( el );
+
+			if( el === undefined ){
+
+				slide( pos.max, 1 );
+
+			} else if( index !== -1 ){
+
+				// You can't align items to the end of the frame when centeredNav is enabled
+				if (centeredNav) {
+					return;
+				}
+
+				slide( items[index].offEnd );
+
+			}
+
+		} else {
+
+			if( el === undefined ){
+
+				slide( pos.max );
+
+			} else {
+
+				var $el = $slidee.find(el).eq(0);
+
+				if( $el.length ){
+
+					var offset = o.horizontal ? $el.offset().left - $slidee.offset().left : $el.offset().top - $slidee.offset().top;
+
+					slide( offset - frameSize + $el[o.horizontal ? 'outerWidth' : 'outerHeight']() );
+
+				}
+
+			}
+
+		}
+
+		syncBars();
+
+	};
+
+
+	/**
+	 * Animate element or the whole slidee to the center of the frame
+	 *
+	 * @public
+	 *
+	 * @param {Element|Int} el DOM element, or index of element in items array
+	 */
+	this.toCenter = function( el ){
+
+		if( itemNav ){
+
+			var index = getIndex( el );
+
+			if( el === undefined ){
+
+				slide( Math.round( pos.max / 2 + pos.min / 2 ), 1 );
+
+			} else if( index !== -1 ){
+
+				slide( items[index].offCenter );
+				forceCenteredNav && self.activate( index, 1 );
+
+			}
+
+		} else {
+
+			if( el === undefined ){
+
+				slide( Math.round( pos.max / 2 ) );
+
+			} else {
+
+				var $el = $slidee.find(el).eq(0);
+
+				if( $el.length ){
+
+					var offset = o.horizontal ? $el.offset().left - $slidee.offset().left : $el.offset().top - $slidee.offset().top;
+
+					slide( offset - frameSize / 2 + $el[o.horizontal ? 'outerWidth' : 'outerHeight']() / 2 );
+
+				}
+
+			}
+
+
+		}
+
+		syncBars();
+
+	};
+
+
+	/**
+	 * Get an index of the element
+	 *
+	 * @private
+	 *
+	 * @param {Element|Int} el DOM element, or index of element in items array
+	 */
+	function getIndex( el ){
+
+		return isNumber(el) ? el < 0 ? 0 : el > items.length-1 ? items.length-1 : el : el === undefined ? -1 : $items.index( el );
+
+	}
+
+
+	/**
+	 * Parse style to pixels
+	 *
+	 * @private
+	 *
+	 * @param {Object} $item jQuery object with element
+	 * @param {Property} property Property to get the pixels from
+	 */
+	function getPx( $item, property ){
+
+		return parseInt( $item.css( property ), 10 );
+
+	}
+
+
+	/**
+	 * Activates an element
+	 *
+	 * Element is positioned to one of the sides of the frame, based on it's current position.
+	 * If the element is close to the right frame border, it will be animated to the start of the left border,
+	 * and vice versa. This helps user to navigate through the elements only by clicking on them, without
+	 * the need for navigation buttons, scrolling, or keyboard arrows.
+	 *
+	 * @public
+	 *
+	 * @param {Element|Int} el DOM element, or index of element in items array
+	 * @param {Bool} noReposition Activate item without repositioning it
+	 */
+	this.activate = function( el, noReposition ){
+
+		if (!itemNav || el === undefined) {
+			return;
+		}
+
+		var index = getIndex( el ),
+			oldActive = rel.activeItem;
+
+		// Update activeItem index
+		rel.activeItem = index;
+
+		// Add active class to the active element
+		$items.removeClass(o.activeClass).eq(index).addClass(o.activeClass);
+
+		// Trigget :active event if a new element is being activated
+		index !== oldActive && $items.eq( index ).trigger( pluginName + ':active', [ $items, rel ] );
+
+		if( !noReposition ){
+
+			// When centeredNav is enabled, center the element
+			if( centeredNav ){
+
+				self.toCenter( index );
+
+			// Otherwise determine where to position the element
+			} else if( smartNav ) {
+
+				// If activated element is currently on the far right side of the frame, assume that
+				// user is moving forward and animate it to the start of the visible frame, and vice versa
+				if (index >= rel.lastItem) {
+					self.toStart(index);
+				} else if (index <= rel.firstItem) {
+					self.toEnd(index);
+				}
+
+			}
+
+		}
+
+		// Add disabled classes
+		disableButtons();
+
+	};
+
+
+	/**
+	 * Activates a page
+	 *
+	 * @public
+	 *
+	 * @param {Int} index Page index, starting from 0
+	 */
+	this.activatePage = function( index ){
+
+		// Fix overflowing
+		index = index < 0 ? 0 : index >= pages.length ? pages.length-1 : index;
+		slide( pages[index], itemNav );
+
+		syncBars();
+
+	};
+
+
+	/**
+	 * Return relative positions of items based on their location within visible frame
+	 *
+	 * @private
+	 *
+	 * @param {Int} sPos Position of slidee
+	 */
+	function getRelatives( sPos ){
+
+		var newRel = {},
+			centerOffset = forceCenteredNav ? 0 : frameSize / 2;
+
+		// Determine active page
+		for( var p = 0; p < pages.length; p++ ){
+
+			if( sPos >= pos.max || p === pages.length - 1 ){
+				newRel.activePage = pages.length - 1;
+				break;
+			}
+
+			if( sPos <= pages[p] + centerOffset ){
+				newRel.activePage = p;
+				break;
+			}
+
+		}
+
+		// Relative item indexes
+		if( itemNav ){
+
+			var first  = false,
+				last   = false,
+				center = false;
+
+			/* From start */
+			for( var i=0; i < items.length; i++ ){
+
+				// First item
+				if (first === false && sPos <= items[i].offStart) {
+					first = i;
+				}
+
+				// Centered item
+				if (center === false && sPos - items[i].size / 2 <= items[i].offCenter) {
+					center = i;
+				}
+
+				// Last item
+				if (i === items.length - 1 || (last === false && sPos < items[i + 1].offEnd)) {
+					last = i;
+				}
+
+				// Terminate if all are assigned
+				if (last !== false) {
+					break;
+				}
+
+			}
+
+			// Safe assignment, just to be sure the false won't be returned
+			newRel.firstItem  = isNumber( first )  ? first  : 0;
+			newRel.centerItem = isNumber( center ) ? center : newRel.firstItem;
+			newRel.lastItem   = isNumber( last )   ? last   : newRel.centerItem;
+
+		}
+
+		return newRel;
+
+	}
+
+
+	/**
+	 * Assign element indexes to the relative positions
+	 *
+	 * @private
+	 */
+	function assignRelatives(){
+
+		$.extend( rel, getRelatives( pos.cur ) );
+
+	}
+
+
+	/**
+	 * Disable buttons when needed
+	 *
+	 * Adds disabledClass, and when the button is <button> or <input>,
+	 * activates :disabled state
+	 *
+	 * @private
+	 */
+	function disableButtons(){
+
+		// item navigation
+		if( itemNav ){
+
+			var isFirstItem = rel.activeItem === 0,
+				isLastItem = rel.activeItem >= items.length-1;
+
+			if( $prevButton.is('button,input') ){
+				$prevButton.prop('disabled', isFirstItem);
+			}
+
+			if( $nextButton.is('button,input') ){
+				$nextButton.prop('disabled', isLastItem);
+			}
+
+			$prevButton[ isFirstItem ? 'removeClass' : 'addClass'](o.disabledClass);
+			$nextButton[ isLastItem ? 'removeClass' : 'addClass'](o.disabledClass);
+
+		}
+
+		// pages navigation
+		if( $pages.length ){
+
+			var isStart = pos.cur <= pos.min,
+				isEnd = pos.cur >= pos.max;
+
+			if( $prevPageButton.is('button,input') ){
+				$prevPageButton.prop('disabled', isStart);
+			}
+
+			if( $nextPageButton.is('button,input') ){
+				$nextPageButton.prop('disabled', isEnd);
+			}
+
+			$prevPageButton[ isStart ? 'removeClass' : 'addClass'](o.disabledClass);
+			$nextPageButton[ isEnd ? 'removeClass' : 'addClass'](o.disabledClass);
+
+		}
+
+	}
+
+
+	/**
+	 * Manage cycling
+	 *
+	 * @public
+	 *
+	 * @param {Bool} pause Pass true to pause cycling
+	 * @param {Bool} soft Soft pause intended for pauseOnHover - won't set cycleIsPaused variable to true
+	 */
+	this.cycle = function( pause, soft ){
+
+		if (!itemNav || !o.cycleBy) {
+			return;
+		}
+
+		if( !soft ){
+			cycleIsPaused = !!pause;
+		}
+
+		if( pause ){
+
+			if( cycleIndex ){
+
+				cycleIndex = clearTimeout( cycleIndex );
+
+				// Trigger :cyclePause event
+				$frame.trigger( pluginName + ':cyclePause', [ pos, $items, rel ] );
+
+			}
+
+		} else {
+
+			// Don't initiate more than one cycle
+			if (cycleIndex) {
+				return;
+			}
+
+			// Trigger :cycleStart event
+			$frame.trigger( pluginName + ':cycleStart', [ pos, $items, rel ] );
+
+			// Cycling loop
+			(function loop(){
+
+				if( o.cycleInterval === 0 ){
+					return;
+				}
+
+				cycleIndex = setTimeout( function(){
+
+					if( !isDragging ){
+						switch( o.cycleBy ){
+
+							case 'items':
+								var nextItem = rel.activeItem >= items.length-1 ? 0 : rel.activeItem + 1;
+								self.activate( nextItem );
+							break;
+
+							case 'pages':
+								var nextPage = rel.activePage >= pages.length-1 ? 0 : rel.activePage + 1;
+								self.activatePage( nextPage );
+							break;
+
+						}
+					}
+
+					// Trigger :cycle event
+					$frame.trigger( pluginName + ':cycle', [ pos, $items, rel ] );
+
+					// Cycle the cycle!
+					loop();
+
+				}, o.cycleInterval );
+
+			}());
+
+		}
+
+	};
+
+
+	/**
+	 * Crossbrowser reliable way to stop default event action
+	 *
+	 * @private
+	 *
+	 * @param {Event} e Event object
+	 * @param {Bool} noBubbles Cancel event bubbling
+	 */
+	function stopDefault( e, noBubbles ){
+
+		var evt = e || window.event;
+		evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
+		noBubbles && evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
+
+	}
+
+
+	/**
+	 * Updates a signle or multiple option values
+	 *
+	 * @param {Mixed} property Option property name that should be updated, or object with options that will extend the current one
+	 * @param {Mixed} value    Option property value
+	 *
+	 * @public
+	 */
+	this.set = function( property, value ){
+
+		if( $.isPlainObject(property) ){
+
+			o = $.extend({}, o, property);
+
+		} else if( typeof property === 'string' ) {
+
+			o[property] = value;
+
+		}
+
+	};
+
+
+	/**
+	 * Destroys plugin instance and everything it created
+	 *
+	 * @public
+	 */
+	this.destroy = function(){
+
+		// Unbind all events
+		$frame.add(document).add($slidee).add($items).add($scrollSource).add($handle)
+		.add($prevButton).add($nextButton).add($prevPageButton).add($nextPageButton)
+		.unbind('.' + namespace);
+
+		// Reset some styles
+		$slidee.add($handle).css( o.horizontal ? { left: 0 } : { top: 0 } );
+
+		// Remove plugin classes
+		$prevButton.add($nextButton).removeClass(o.disabledClass);
+
+		// Remove page items
+		$pb.empty();
+
+		// Remove plugin from element data storage
+		$.removeData(frame, namespace);
+
+	};
+
+
+	/**
+	 * Check if variable is a number
+	 *
+	 * @param {Mixed} n Any type of variable
+	 *
+	 * @return {Boolean}
+	 */
+	function isNumber( n ) {
+		return !isNaN(parseFloat(n)) && isFinite(n);
+	}
+
+
+	/** Constructor */
+	(function(){
+
+		var doc = $(document),
+			dragEvents = 'mousemove.' + namespace + ' mouseup.' + namespace;
+
+		// Extend options
+		o = $.extend( {}, $.fn[pluginName].defaults, o );
+
+		// Set required styles to elements
+		$frame.css({ overflow: 'hidden' }).css('position') === 'static' && $frame.css({ position: 'relative' });
+		$sb.css('position') === 'static' && $sb.css({ position: 'relative' });
+		$slidee.add($handle).css( o.horizontal ? { position: 'absolute', left: 0 } : { position: 'absolute', top: 0 } );
+
+		// Load
+		load();
+
+		// Activate requested position
+		itemNav ? self.activate( o.startAt ) : slide( o.startAt );
+
+		// Sync scrollbar & pages
+		syncBars();
+
+		// Scrolling navigation
+		o.scrollBy && $scrollSource.bind('DOMMouseScroll.' + namespace + ' mousewheel.' + namespace, function(e){
+
+			// If there is no scrolling to be done, leave the default event alone
+			if (pos.min === pos.max) {
+				return;
+			}
+
+			stopDefault( e, 1 );
+
+			var orgEvent = e.originalEvent,
+				delta = 0,
+				isForward, nextItem;
+
+			// Old school scrollwheel delta
+			if ( orgEvent.wheelDelta ){ delta = orgEvent.wheelDelta / 120; }
+			if ( orgEvent.detail     ){ delta = -orgEvent.detail / 3; }
+
+			isForward = delta < 0;
+
+			if( itemNav ){
+
+				nextItem = getIndex( ( centeredNav ? forceCenteredNav ? rel.activeItem : rel.centerItem : rel.firstItem ) + ( isForward ? o.scrollBy : -o.scrollBy ) );
+
+				self[centeredNav ? forceCenteredNav ? 'activate' : 'toCenter' : 'toStart']( nextItem );
+
+			} else {
+
+				slide( pos.cur + ( isForward ? o.scrollBy : -o.scrollBy ) );
+
+			}
+
+			syncBars();
+
+		});
+
+		// Keyboard navigation
+		o.keyboardNav && doc.bind('keydown.' + namespace, function(e){
+
+			switch( e.keyCode || e.which ){
+
+				// Left or Up
+				case o.horizontal ? 37 : 38:
+
+					stopDefault(e);
+					o.keyboardNavByPages ? self.prevPage() : self.prev();
+
+				break;
+
+				// Right or Down
+				case o.horizontal ? 39 : 40:
+
+					stopDefault(e);
+					o.keyboardNavByPages ? self.nextPage() : self.next();
+
+				break;
+
+			}
+
+		});
+
+		// Navigation buttons
+		o.prev && $prevButton.bind('click.' + namespace, function(e){ stopDefault(e); self.prev(); });
+		o.next && $nextButton.bind('click.' + namespace, function(e){ stopDefault(e); self.next(); });
+		o.prevPage && $prevPageButton.bind('click.' + namespace, function(e){ stopDefault(e); self.prevPage(); });
+		o.nextPage && $nextPageButton.bind('click.' + namespace, function(e){ stopDefault(e); self.nextPage(); });
+
+		// Dragging navigation
+		o.dragContent && $dragSource.bind('mousedown.' + namespace, function(e){
+
+			// Ignore other than left mouse button
+			if (e.which !== 1) {
+				return;
+			}
+
+			stopDefault(e);
+
+			var leftInit = e.clientX,
+				topInit = e.clientY,
+				posInit = pos.cur,
+				start = +new Date(),
+				srcEl = e.target,
+				easeoff = 0,
+				isInitialized = 0;
+
+			// Add dragging class
+			$slidee.addClass(o.draggedClass);
+
+			// Stop potential ongoing animations
+			stop();
+
+			// Bind dragging events
+			doc.bind(dragEvents, function(e){
+
+				var released = e.type === 'mouseup',
+					path = o.horizontal ? e.clientX - leftInit : e.clientY - topInit,
+					newPos = posInit - path;
+
+				// Initialized logic
+				if( !isInitialized && Math.abs( path ) > 10 ){
+
+					isInitialized = 1;
+
+					// Trigger :dragStart event
+					$slidee.trigger( pluginName + ':dragStart', [ pos ] );
+
+				}
+
+				// Limits & Elastic bounds
+				if( newPos > pos.max ){
+					newPos = o.elasticBounds ? pos.max + ( newPos - pos.max ) / 6 : pos.max;
+				} else if( newPos < pos.min ){
+					newPos = o.elasticBounds ? pos.min + ( newPos - pos.min ) / 6 : pos.min;
+				}
+
+				// Adjust newPos with easing when content has been released
+				if( released ){
+
+					// Cleanup
+					doc.unbind(dragEvents);
+					$slidee.removeClass(o.draggedClass);
+
+					// How long was the dragging
+					var time = +new Date() - start;
+
+					// Calculate swing length
+					var swing = time < 300 ? Math.ceil( Math.pow( 6 / ( time / 300 ) , 2 ) * Math.abs( path ) / 120 ) : 0;
+					newPos += path > 0 ? -swing : swing;
+
+				}
+
+				// Drag only when isInitialized
+				if (!isInitialized) {
+					return;
+				}
+
+				stopDefault(e);
+
+				// Stop default click action on source element
+				if( srcEl ){
+
+					$(srcEl).bind('click.' + namespace, function stopMe(e){
+
+						stopDefault(e,true);
+						$(this).unbind('click.' + namespace, stopMe);
+
+					});
+
+					srcEl = 0;
+
+				}
+
+				// Dragging state
+				isDragging = !released;
+
+				// Animage, synch bars, & align
+				slide( newPos, released, released ? o.speed : 0 );
+				syncBars( released ? null : 0 );
+
+				// Trigger :drag event
+				if (isInitialized) {
+					$slidee.trigger(pluginName + ':drag', [pos]);
+				}
+
+				// Trigger :dragEnd event
+				if (released) {
+					$slidee.trigger(pluginName + ':dragEnd', [pos]);
+				}
+
+			});
+
+		});
+
+		// Scrollbar navigation
+		$handle && o.dragHandle && $handle.bind('mousedown.' + namespace, function(e){
+
+			// Ignore other than left mouse button
+			if (e.which !== 1) {
+				return;
+			}
+
+			stopDefault(e);
+
+			var leftInit = e.clientX,
+				topInit = e.clientY,
+				posInit = hPos.cur,
+				pathMin = -hPos.cur,
+				pathMax = hPos.max - hPos.cur,
+				nextDrag = 0;
+
+			// Add dragging class
+			$handle.addClass(o.draggedClass);
+
+			// Stop potential ongoing animations
+			stop();
+
+			// Bind dragging events
+			doc.bind(dragEvents, function(e){
+
+				stopDefault(e);
+
+				var released = e.type === 'mouseup',
+					path = o.horizontal ? e.clientX - leftInit : e.clientY - topInit,
+					newPos = posInit + path,
+					time = +new Date();
+
+				// Dragging state
+				isDragging = !released;
+
+				// Unbind events and remove classes when released
+				if( released ){
+
+					doc.unbind(dragEvents);
+					$handle.removeClass(o.draggedClass);
+
+				}
+
+				// Execute only moves within path limits
+				if( path < pathMax+5 && path > pathMin-5 || released ){
+
+					// Fix overflows
+					hPos.cur = newPos > hPos.max ? hPos.max : newPos < hPos.min ? hPos.min : newPos;
+
+					// Move handle
+					$handle.stop().css( o.horizontal ? { left: hPos.cur+'px' } : { top: hPos.cur+'px' } );
+
+					// Trigger :dragStart event
+					if (!nextDrag) {
+						$handle.trigger(pluginName + ':dragStart', [hPos]);
+					}
+
+					// Trigger :drag event
+					$handle.trigger( pluginName + ':drag', [ hPos ] );
+
+					// Trigger :dragEnd event
+					if (released) {
+						$handle.trigger(pluginName + ':dragEnd', [hPos]);
+					}
+
+					// Throttle sync interval -> smoother animations, lower CPU load
+					if( nextDrag <= time || released || path > pathMax || path < pathMin ){
+
+						nextDrag = time + 50;
+
+						// Synchronize slidee position
+						slide( Math.round( hPos.cur / hPos.max * ( pos.max - pos.min ) ) + pos.min, released, released ? o.speed : 50 );
+
+					}
+
+					// Sync pagesbar
+					syncPages();
+
+				}
+
+			});
+
+		});
+
+	}());
+
+}
+
+
+// jQuery plugin extension
+$.fn[pluginName] = function( options, returnInstance ){
+
+	var method = false,
+		methodArgs,
+		instances = [];
+
+	// Basic attributes logic
+	if( typeof options !== 'undefined' && !$.isPlainObject( options ) ){
+		method = options === false ? 'destroy' : options;
+		methodArgs = arguments;
+		Array.prototype.shift.call( methodArgs );
+	}
+
+	// Apply requested actions on all elements
+	this.each(function( i, element ){
+
+		// Plugin call with prevention against multiple instantiations
+		var plugin = $.data( element, namespace );
+
+		if( plugin && method ){
+
+			// Call plugin method
+			if( plugin[method] ){
+
+				plugin[method].apply( plugin, methodArgs );
+
+			}
+
+		} else if( !plugin && !method ){
+
+			// Create a new plugin object if it doesn't exist yet
+			plugin =  $.data( element, namespace, new Plugin( element, options ) );
+
+		}
+
+		// Push plugin to instances
+		instances.push( plugin );
+
+	});
+
+	// Return chainable jQuery object, or plugin instance(s)
+	return returnInstance && !method ? instances.length > 1 ? instances : instances[0] : this;
+
+};
+
+
+// Default options
+$.fn[pluginName].defaults = {
+
+	// Sly direction
+	horizontal:      0,       // set to 1 to change the sly direction to horizontal
+
+	// Navigation by items; when using this, `scrollBy` option scrolls by items, not pixels
+	itemNav:         0,       // enable type of item based navigation. when itemNav is enabled, items snap to frame edges or frame center
+	                          // itemNav also enables "item activation" functionality and methods associated with it
+	                          //
+	                          // itemNav can be:
+	                          // ------------------------------------------------------------------------------------
+	                          // basic:         items snap to edges (ideal if you don't care about "active item" functionality)
+	                          // smart:         same as basic, but activated item close to, or outside of the visible edge will be positioned to the opposite edge
+	                          // centered:      activated items are positioned to the center of visible frame if possible
+	                          // forceCentered: active items are always centered & centered items are always active (scrolling & dragging end activates centered item)
+
+	// Scrollbar
+	scrollBar:       null,    // selector or DOM element for scrollbar container (scrollbar container should have one child element representing scrollbar handle)
+	  dynamicHandle: 1,       // resizes scrollbar handle to represent the relation between hidden and visible content. set to "0" to leave it as big as CSS made it
+	  dragHandle:    1,       // set to 0 to disable dragging of scrollbar handle with mouse
+	  minHandleSize: 50,      // minimal height or width (depends on sly direction) of a handle in pixels
+
+	// Pagesbar (when centerActive is enabled, every item is considered to be a page)
+	pagesBar:        null,    // selector or DOM element for pages bar container
+	  pageBuilder:            // function with `index` (starting at 0) as argument that returns an HTML for one item
+	    function( index ){
+	      return '<li>'+(index+1)+'</li>';
+	    },
+
+	// Navigation buttons
+	prev:            null,    // selector or DOM element for "previous item" button ; doesn't work when `itemsNav` is disabled
+	next:            null,    // selector or DOM element for "next item" button     ; doesn't work when `itemsNav` is disabled
+	prevPage:        null,    // selector or DOM element for "previous page" button
+	nextPage:        null,    // selector or DOM element for "next page" button
+
+	// Automated cycling
+	cycleBy:         0,       // enable automatic cycling by 'items', or 'pages'
+	  cycleInterval: 5000,    // number of milliseconds between cycles
+	  pauseOnHover:  1,       // pause cycling when mouse hovers over frame
+	  startPaused:   0,       // set to "1" to start in paused sate. cycling can be than resumed with "cycle" method
+
+	// Mixed options
+	scrollBy:        0,       // how many pixels/items should one mouse scroll event go. leave "0" to disable mousewheel scrolling
+	dragContent:     0,       // set to 1 to enable navigation by dragging the content with your mouse
+	  elasticBounds: 0,       // when dragging past limits, stretch them a little bit (like on spartphones)
+	speed:           300,     // animations speed
+	easing:          'swing', // animations easing. build in jQuery options are "linear" and "swing". for more, install gsgd.co.uk/sandbox/jquery/easing/
+	scrollSource:    null,    // selector or DOM element for catching the mouse wheel event for sly scrolling. default source is the frame
+	dragSource:      null,    // selector or DOM element for catching the mouse dragging events. default source is the frame
+	startAt:         0,       // starting offset in pixels or items (depends on itemsNav option)
+	keyboardNav:     0,       // whether to allow navigation by keyboard arrows (left & right for horizontal, up & down for vertical)
+	                          // NOTE! keyboard navigation will disable page scrolling with keyboard arrows in correspondent sly direction (vertical or horizontal)
+	keyboardNavByPages: 0,    // whether the keyboard should navigate by pages instead of items (useful when not using `itemsNav` navigation)
+
+	// Classes
+	draggedClass:  'dragged', // class that will be added to scrollbar handle, or content when they are being dragged
+	activeClass:   'active',  // class that will be added to the active item, or page
+	disabledClass: 'disabled' // class that will be added to prev button when on start, or next button when on end
+
+};
+
+}(jQuery));
\ No newline at end of file