when repeatElements is disabled, the plugin will stop
+ creating pages just before the first element is about to be
+ repeated
+ this is preferable if page selection controls are used
+ instead of prev/next
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
go to page example with repeatElements enabled (default)
when repeatElements is enabled more pages may
+ be generated than expected
+ this example shows undesirable behavior in cases
+ where page counts are made known to the user
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/widget/lib/jquery.ui.rcarousel.js b/widget/lib/jquery.ui.rcarousel.js
index 4d89e4a..2743def 100644
--- a/widget/lib/jquery.ui.rcarousel.js
+++ b/widget/lib/jquery.ui.rcarousel.js
@@ -217,13 +217,15 @@
throw new Error( "interval should be a positive number" );
}
break;
-
+ case "auto":
+
+
case "margin":
if ( isNaN(value) || typeof value !== "number" || value < 0 || Math.ceil(value) - value > 0 ) {
throw new Error( "margin should be a positive number" );
}
break;
- }
+ }
}
);
},
@@ -252,24 +254,48 @@
options = this.options,
data = $( this.element ).data( "data" ),
_visible = options.visible,
+ _step = options.step,
_pathsLen = data.paths.length;
-
+
+ // when the seamless option is not used:
// having 10 elements: A, B, C, D, E, F, G, H, I, J the algorithm
// creates 3 pages for ‘visible: 5’ and ‘step: 4’:
// [ABCDE], [EFGHI], [FGHIJ]
-
+
+ // when the seamless option is used:
+ // having 6 elements: A, B, C, D, E, F the algorithm
+ // creates 6 pages for 'visible: 1' and 'step: 1':
+ // [ABCDE], [BCDEF], [CDEFA], [DEFAB], [EFABC], [FABCD]
+ // be sure to test performance, because this can increase your
+ // memory usage in some cases
+ // for example, 10 elements ([A..J]) with 'visible: 4' and 'step: 3'
+ // will generate 10 pages: [ABCD], [DEFG] … [HIJA]
+
+ // please note that example comments below refer to
+ // the page set that is created when the seamless option
+ // is disabled, unless otherwise noted
+
function _init() {
// init creates the last page [FGHIJ] and remembers it
-
data.pages = [];
data.lastPage = [];
data.pages[0] = [];
- // init last page
- for ( var i = _pathsLen - 1; i >= _pathsLen - _visible; i-- ) {
- data.lastPage.unshift( data.paths[i] );
+ if ( options.seamless.enabled && options.seamless.repeatElements ) {
+ for ( var i = _visible - (_step + 1); i >= -_step; i-- ) {
+ data.lastPage.unshift( data.paths[((_pathsLen + i) % _pathsLen)] );
+ }
+ } else if ( options.seamless.enabled && !options.seamless.repeatElements ) {
+ var _lastElement = _pathsLen - (_pathsLen % _step) - 1;
+ for ( var i = _lastElement; i > _lastElement - _visible; i-- ) {
+ data.lastPage.unshift( data.paths[i] );
+ }
+ } else {
+ for ( var i = _pathsLen - 1; i >= _pathsLen - _visible; i-- ) {
+ data.lastPage.unshift( data.paths[i] );
+ }
}
-
+
// and first page
for ( var i = 0; i < _visible; i++ ) {
data.pages[0][data.pages[0].length] = data.paths[i];
@@ -278,7 +304,7 @@
function _islastPage( page ) {
var _isLast = false;
-
+
for ( var i = 0; i < data.lastPage.length; i++ ) {
if ( data.lastPage[i].get(0) === page[i].get(0) ) {
_isLast = true;
@@ -290,68 +316,33 @@
return _isLast;
}
-
- function _append( start, end, atIndex ) {
- var _index = atIndex || data.pages.length;
-
- if ( !atIndex ) {
- data.pages[_index] = [];
- }
-
- for ( var i = start; i < end; i++ ) {
- data.pages[_index].push( data.paths[i] );
- }
- return _index;
- }
-
- function _paginate() {
+
+ function _paginate(seamless) {
var _isBeginning = true,
- _complement = false,
- _start = options.step,
- _end, _index, _oldFirstEl, _oldLastEl;
-
- // continue until you reach the last page
- // we start from the 2nd page (1st page has been already initiated)
- while ( !_islastPage(data.pages[data.pages.length - 1]) || _isBeginning ) {
+ _start = 0,
+ _index;
+
+ while ( !_islastPage(data.pages[data.pages.length - 1]) || _isBeginning ) {
_isBeginning = false;
-
- _end = _start + _visible;
-
- // we cannot exceed _pathsLen
- if ( _end > _pathsLen ) {
- _end = _pathsLen;
- }
+
+ _index = data.pages.length;
+ data.pages[_index] = [];
- // when we run ouf of elements (_end - _start < _visible) we must add the difference at the begining
- // in our example the 3rd page is [FGHIJ] and J element is added in the second step
- // first we add [FGHI] as old elements
- // we must assure that we have always ‘visible’ (5 in our example) elements
- if ( _end - _start < _visible ) {
- _complement = true;
- } else {
- _complement = false;
- }
-
- if ( _complement ) {
-
- // first add old elemets; for 3rd page it adds [FGHI…]
- // remember the page we add to (_index)
- _oldFirstEl = _start - ( _visible - (_end - _start) );
- _oldLastEl = _oldFirstEl + ( _visible - (_end - _start) );
- _index = _append( _oldFirstEl, _oldLastEl );
-
- // then add new elements; for 3th page it is J element:
- // [fghiJ]
- _append( _start, _end, _index );
-
- } else {
-
- // normal pages like [ABCDE], [EFGHI]
- _append( _start, _end );
-
- // next step
- _start += options.step;
- }
+ _start += _step;
+
+ if ( options.seamless.enabled || (data.pages.length * _visible) < _pathsLen ) {
+ // when the seamless option is enabled, we will eventually create the last page in this loop
+ for ( var i = _start; i < _start + _visible; i++ ) {
+ data.pages[_index].push( data.paths[i % ( _pathsLen )] );
+ }
+ } else {
+ // otherwise, we can get a quicker match if we recognize when we are about to create a page that
+ // starts over on the first element (like [FGABC]) and instead create a page containing
+ // the highest possible _visible-length collection of elements (ends with the last element)
+ for ( var i = _visible; i > 0; i-- ) {
+ data.pages[_index].push( data.paths[_pathsLen - i] );
+ }
+ }
}
}
@@ -360,6 +351,8 @@
_paginate();
},
+
+
getCurrentPage: function() {
var data = $( this.element ).data( "data" );
return data.pageIndex + 1;
@@ -367,7 +360,8 @@
getTotalPages: function() {
var data = $( this.element ).data( "data" );
- return data.pages.length;
+
+ return data.pages.length;
},
goToPage: function( page ) {
@@ -519,7 +513,7 @@
self._trigger("pageLoaded", null, {page: _index});
});
- // reset to deafult
+ // reset to default
data.appended = false;
},
@@ -616,7 +610,7 @@
if ( !data.hoveredOver && options.auto.enabled ) {
// if autoMode is on and you change page manually
clearInterval( data.interval );
-
+
self._autoMode( options.auto.direction );
}
@@ -625,7 +619,7 @@
});
- // reset to deafult
+ // reset to default
data.appended = false;
},
@@ -731,6 +725,7 @@
}
},
+
_setStep: function(s) {
// calculate a step
var _step,
@@ -794,6 +789,10 @@
navigation: {
next: "#ui-carousel-next",
prev: "#ui-carousel-prev"
+ },
+ seamless: {
+ enabled: false,
+ repeatElements: true
}
}
});
diff --git a/widget/lib/jquery.ui.rcarousel.min.js b/widget/lib/jquery.ui.rcarousel.min.js
index cd37610..066debc 100644
--- a/widget/lib/jquery.ui.rcarousel.min.js
+++ b/widget/lib/jquery.ui.rcarousel.min.js
@@ -1 +1,24 @@
-(function(a){a.widget("ui.rcarousel",{_create:function(){var d,e=a(this.element),b=this,c=this.options;this._checkOptionsValidity(this.options);this._createDataObject();d=e.data("data");e.addClass("ui-carousel").children().wrapAll("");this._saveElements();this._generatePages();this._loadElements();this._setCarouselWidth();this._setCarouselHeight();a(c.navigation.next).click(function(f){b.next();f.preventDefault()});a(c.navigation.prev).click(function(f){b.prev();f.preventDefault()});d.navigation.next=a(c.navigation.next);d.navigation.prev=a(c.navigation.prev);e.hover(function(){if(c.auto.enabled){clearInterval(d.interval);d.hoveredOver=true}},function(){if(c.auto.enabled){d.hoveredOver=false;b._autoMode(c.auto.direction)}});this._setStep();if(c.auto.enabled){this._autoMode(c.auto.direction)}this._trigger("start")},_addElement:function(f,e){var d=a(this.element),c=d.find("div.wrapper"),b=this.options;f.width(b.width).height(b.height);if(b.orientation==="horizontal"){a(f).css("marginRight",b.margin)}else{a(f).css({marginBottom:b.margin,"float":"none"})}if(e==="prev"){c.prepend(f.clone(true,true))}else{c.append(f.clone(true,true))}},append:function(d){var c=a(this.element),b=c.data("data");d.each(function(e,f){b.paths.push(a(f))});b.oldPage=b.pages[b.oldPageIndex].slice(0);b.appended=true;this._generatePages()},_autoMode:function(d){var b=this.options,c=a(this.element).data("data");if(d==="next"){c.interval=setTimeout(a.proxy(this.next,this),b.auto.interval)}else{c.interval=setTimeout(a.proxy(this.prev,this),b.auto.interval)}},_checkOptionsValidity:function(c){var d,b=this,e="";a.each(c,function(f,g){switch(f){case"visible":if(!g||typeof g!=="number"||g<=0||(Math.ceil(g)-g>0)){throw new Error("visible should be defined as a positive integer")}break;case"step":if(!g||typeof g!=="number"||g<=0||(Math.ceil(g)-g>0)){throw new Error("step should be defined as a positive integer")}else{if(g>b.options.visible){for(d=1;d<=Math.floor(c.visible);d++){e+=(d0){throw new Error("width should be defined as a positive integer")}break;case"height":if(!g||typeof g!=="number"||g<=0||Math.ceil(g)-g>0){throw new Error("height should be defined as a positive integer")}break;case"speed":if(!g&&g!==0){throw new Error("speed should be defined as a number or a string")}if(typeof g==="number"&&g<0){throw new Error("speed should be a positive number")}else{if(typeof g==="string"&&!(g==="slow"||g==="normal"||g==="fast")){throw new Error('Only "slow", "normal" and "fast" values are valid')}}break;case"navigation":if(!g||a.isPlainObject(g)===false){throw new Error("navigation should be defined as an object with at least one of the properties: 'prev' or 'next' in it")}if(g.prev&&typeof g.prev!=="string"){throw new Error("navigation.prev should be defined as a string and point to '.class' or '#id' of an element")}if(g.next&&typeof g.next!=="string"){throw new Error(" navigation.next should be defined as a string and point to '.class' or '#id' of an element")}break;case"auto":if(typeof g.direction!=="string"){throw new Error("direction should be defined as a string")}if(!(g.direction==="next"||g.direction==="prev")){throw new Error("direction: only 'right' and 'left' values are valid")}if(isNaN(g.interval)||typeof g.interval!=="number"||g.interval<0||Math.ceil(g.interval)-g.interval>0){throw new Error("interval should be a positive number")}break;case"margin":if(isNaN(g)||typeof g!=="number"||g<0||Math.ceil(g)-g>0){throw new Error("margin should be a positive number")}break}})},_createDataObject:function(){var b=a(this.element);b.data("data",{paths:[],pathsLen:0,pages:[],lastPage:[],oldPageIndex:0,pageIndex:0,navigation:{},animated:false,appended:false,hoveredOver:false})},_generatePages:function(){var i=this,j=this.options,c=a(this.element).data("data"),b=j.visible,h=c.paths.length;function f(){c.pages=[];c.lastPage=[];c.pages[0]=[];for(var k=h-1;k>=h-b;k--){c.lastPage.unshift(c.paths[k])}for(var k=0;kh){k=h}if(k-mc.pages.length-1){d=c.pages.length-1}else{if(d<0){d=0}}c.pageIndex=d;b=d-c.oldPageIndex;if(b>=0){this._goToNextPage(b)}else{this._goToPrevPage(b)}c.oldPageIndex=d}},_loadElements:function(b,h){var k=this.options,e=a(this.element).data("data"),f=h||"next",j=b||e.pages[k.startAtPage],c=0,g=j.length;if(f==="next"){for(var d=c;d=c;d--){this._addElement(j[d],f)}}},_goToPrevPage:function(k){var c,j,f,l,g,m,n,p,b,h=a(this.element),o=this,q=this.options,e=a(this.element).data("data");if(e.appended){j=e.oldPage}else{j=e.pages[e.oldPageIndex]}l=e.oldPageIndex+k;c=e.pages[l].slice(0);a(c).each(function(r,s){if(s.get(0)===a(j[r]).get(0)){b=true}else{b=false}});if(e.appended&&b){if(e.pageIndex===0){l=e.pageIndex=e.pages.length-1}else{l=--e.pageIndex}c=e.pages[l].slice(0)}m=c[c.length-1].get(0);for(var d=j.length-1;d>=0;d--){if(m===a(j[d]).get(0)){n=false;p=d;break}else{n=true}}if(!n){while(p>=0){if(c[c.length-1].get(0)===j[p].get(0)){c.pop()}--p}}o._loadElements(c,"prev");f=q.width*c.length+(q.margin*c.length);if(q.orientation==="horizontal"){g={scrollLeft:0};h.scrollLeft(f)}else{g={scrollTop:0};h.scrollTop(f)}h.animate(g,q.speed,function(){o._removeOldElements("last",c.length);e.animated=false;if(!e.hoveredOver&&q.auto.enabled){clearInterval(e.interval);o._autoMode(q.auto.direction)}o._trigger("pageLoaded",null,{page:l})});e.appended=false},_goToNextPage:function(l){var c,k,f,m,g,j,n,p,b,h=a(this.element),q=this.options,e=h.data("data"),o=this;if(e.appended){k=e.oldPage}else{k=e.pages[e.oldPageIndex]}m=e.oldPageIndex+l;c=e.pages[m].slice(0);a(c).each(function(r,s){if(s.get(0)===a(k[r]).get(0)){b=true}else{b=false}});if(e.appended&&b){c=e.pages[++e.pageIndex].slice(0)}j=c[0].get(0);for(var d=0;dc.pages.length-1){c.pageIndex=0}this._goToNextPage(c.pageIndex-c.oldPageIndex);c.oldPageIndex=c.pageIndex}},prev:function(){var b=this.options,c=a(this.element).data("data");if(!c.animated){c.animated=true;if(!c.appended){--c.pageIndex}if(c.pageIndex<0){c.pageIndex=c.pages.length-1}this._goToPrevPage(c.pageIndex-c.oldPageIndex);c.oldPageIndex=c.pageIndex}},_removeOldElements:function(b,d){var e=a(this.element);for(var c=0;c");this._saveElements();this._generatePages();this._loadElements();this._setCarouselWidth();this._setCarouselHeight();$(options.navigation.next).click(function(event){_self.next();event.preventDefault()});$(options.navigation.prev).click(function(event){_self.prev();
+event.preventDefault()});data.navigation.next=$(options.navigation.next);data.navigation.prev=$(options.navigation.prev);$root.hover(function(){if(options.auto.enabled){clearInterval(data.interval);data.hoveredOver=true}},function(){if(options.auto.enabled){data.hoveredOver=false;_self._autoMode(options.auto.direction)}});this._setStep();if(options.auto.enabled)this._autoMode(options.auto.direction);this._trigger("start")},_addElement:function(jQueryElement,direction){var $root=$(this.element),$content=
+$root.find("div.wrapper"),options=this.options;jQueryElement.width(options.width).height(options.height);if(options.orientation==="horizontal")$(jQueryElement).css("marginRight",options.margin);else $(jQueryElement).css({marginBottom:options.margin,"float":"none"});if(direction==="prev")$content.prepend(jQueryElement.clone(true,true));else $content.append(jQueryElement.clone(true,true))},append:function(jqElements){var $root=$(this.element),data=$root.data("data");jqElements.each(function(i,el){data.paths.push($(el))});
+data.oldPage=data.pages[data.oldPageIndex].slice(0);data.appended=true;this._generatePages()},_autoMode:function(direction){var options=this.options,data=$(this.element).data("data");if(direction==="next")data.interval=setTimeout($.proxy(this.next,this),options.auto.interval);else data.interval=setTimeout($.proxy(this.prev,this),options.auto.interval)},_checkOptionsValidity:function(options){var i,self=this,_correctSteps="";$.each(options,function(key,value){switch(key){case "visible":if(!value||
+typeof value!=="number"||value<=0||Math.ceil(value)-value>0)throw new Error("visible should be defined as a positive integer");break;case "step":if(!value||typeof value!=="number"||value<=0||Math.ceil(value)-value>0)throw new Error("step should be defined as a positive integer");else if(value>self.options.visible){for(i=1;i<=Math.floor(options.visible);i++)_correctSteps+=i0)throw new Error("width should be defined as a positive integer");break;case "height":if(!value||typeof value!=="number"||value<=0||Math.ceil(value)-value>0)throw new Error("height should be defined as a positive integer");break;case "speed":if(!value&&value!==0)throw new Error("speed should be defined as a number or a string");if(typeof value==="number"&&value<0)throw new Error("speed should be a positive number");else if(typeof value===
+"string"&&!(value==="slow"||value==="normal"||value==="fast"))throw new Error('Only "slow", "normal" and "fast" values are valid');break;case "navigation":if(!value||$.isPlainObject(value)===false)throw new Error("navigation should be defined as an object with at least one of the properties: 'prev' or 'next' in it");if(value.prev&&typeof value.prev!=="string")throw new Error("navigation.prev should be defined as a string and point to '.class' or '#id' of an element");if(value.next&&typeof value.next!==
+"string")throw new Error(" navigation.next should be defined as a string and point to '.class' or '#id' of an element");break;case "auto":if(typeof value.direction!=="string")throw new Error("direction should be defined as a string");if(!(value.direction==="next"||value.direction==="prev"))throw new Error("direction: only 'right' and 'left' values are valid");if(isNaN(value.interval)||typeof value.interval!=="number"||value.interval<0||Math.ceil(value.interval)-value.interval>0)throw new Error("interval should be a positive number");
+break;case "auto":case "margin":if(isNaN(value)||typeof value!=="number"||value<0||Math.ceil(value)-value>0)throw new Error("margin should be a positive number");break}})},_createDataObject:function(){var $root=$(this.element);$root.data("data",{paths:[],pathsLen:0,pages:[],lastPage:[],oldPageIndex:0,pageIndex:0,navigation:{},animated:false,appended:false,hoveredOver:false})},_generatePages:function(){var self=this,options=this.options,data=$(this.element).data("data"),_visible=options.visible,_step=
+options.step,_pathsLen=data.paths.length;function _init(){data.pages=[];data.lastPage=[];data.pages[0]=[];if(options.seamless.enabled&&options.seamless.repeatElements)for(var i=_visible-(_step+1);i>=-_step;i--)data.lastPage.unshift(data.paths[(_pathsLen+i)%_pathsLen]);else if(options.seamless.enabled&&!options.seamless.repeatElements){var _lastElement=_pathsLen-_pathsLen%_step-1;for(var i=_lastElement;i>_lastElement-_visible;i--)data.lastPage.unshift(data.paths[i])}else for(var i=_pathsLen-1;i>=_pathsLen-
+_visible;i--)data.lastPage.unshift(data.paths[i]);for(var i=0;i<_visible;i++)data.pages[0][data.pages[0].length]=data.paths[i]}function _islastPage(page){var _isLast=false;for(var i=0;i0;i--)data.pages[_index].push(data.paths[_pathsLen-i])}}_init();_paginate()},getCurrentPage:function(){var data=$(this.element).data("data");return data.pageIndex+1},getTotalPages:function(){var data=$(this.element).data("data");return data.pages.length},goToPage:function(page){var _by,data=$(this.element).data("data");
+if(!data.animated&&page!==data.pageIndex){data.animated=true;if(page>data.pages.length-1)page=data.pages.length-1;else if(page<0)page=0;data.pageIndex=page;_by=page-data.oldPageIndex;if(_by>=0)this._goToNextPage(_by);else this._goToPrevPage(_by);data.oldPageIndex=page}},_loadElements:function(elements,direction){var options=this.options,data=$(this.element).data("data"),_dir=direction||"next",_elem=elements||data.pages[options.startAtPage],_start=0,_end=_elem.length;if(_dir==="next")for(var i=_start;i<
+_end;i++)this._addElement(_elem[i],_dir);else for(var i=_end-1;i>=_start;i--)this._addElement(_elem[i],_dir)},_goToPrevPage:function(by){var _page,_oldPage,_dist,_index,_animOpts,$lastEl,_unique,_pos,_theSame,$root=$(this.element),self=this,options=this.options,data=$(this.element).data("data");if(data.appended)_oldPage=data.oldPage;else _oldPage=data.pages[data.oldPageIndex];_index=data.oldPageIndex+by;_page=data.pages[_index].slice(0);$(_page).each(function(i,el){if(el.get(0)===$(_oldPage[i]).get(0))_theSame=
+true;else _theSame=false});if(data.appended&&_theSame){if(data.pageIndex===0)_index=data.pageIndex=data.pages.length-1;else _index=--data.pageIndex;_page=data.pages[_index].slice(0)}$lastEl=_page[_page.length-1].get(0);for(var i=_oldPage.length-1;i>=0;i--)if($lastEl===$(_oldPage[i]).get(0)){_unique=false;_pos=i;break}else _unique=true;if(!_unique)while(_pos>=0){if(_page[_page.length-1].get(0)===_oldPage[_pos].get(0))_page.pop();--_pos}self._loadElements(_page,"prev");_dist=options.width*_page.length+
+options.margin*_page.length;if(options.orientation==="horizontal"){_animOpts={scrollLeft:0};$root.scrollLeft(_dist)}else{_animOpts={scrollTop:0};$root.scrollTop(_dist)}$root.animate(_animOpts,options.speed,function(){self._removeOldElements("last",_page.length);data.animated=false;if(!data.hoveredOver&&options.auto.enabled){clearInterval(data.interval);self._autoMode(options.auto.direction)}self._trigger("pageLoaded",null,{page:_index})});data.appended=false},_goToNextPage:function(by){var _page,
+_oldPage,_dist,_index,_animOpts,$firstEl,_unique,_pos,_theSame,$root=$(this.element),options=this.options,data=$root.data("data"),self=this;if(data.appended)_oldPage=data.oldPage;else _oldPage=data.pages[data.oldPageIndex];_index=data.oldPageIndex+by;_page=data.pages[_index].slice(0);$(_page).each(function(i,el){if(el.get(0)===$(_oldPage[i]).get(0))_theSame=true;else _theSame=false});if(data.appended&&_theSame)_page=data.pages[++data.pageIndex].slice(0);$firstEl=_page[0].get(0);for(var i=0;i<_page.length;i++)if($firstEl===
+$(_oldPage[i]).get(0)){_unique=false;_pos=i;break}else _unique=true;if(!_unique)while(_pos<_oldPage.length){if(_page[0].get(0)===_oldPage[_pos].get(0))_page.shift();++_pos}this._loadElements(_page,"next");_dist=options.width*_page.length+options.margin*_page.length;if(options.orientation==="horizontal")_animOpts={scrollLeft:"+="+_dist};else _animOpts={scrollTop:"+="+_dist};$root.animate(_animOpts,options.speed,function(){self._removeOldElements("first",_page.length);if(options.orientation==="horizontal")$root.scrollLeft(0);
+else $root.scrollTop(0);data.animated=false;if(!data.hoveredOver&&options.auto.enabled){clearInterval(data.interval);self._autoMode(options.auto.direction)}self._trigger("pageLoaded",null,{page:_index})});data.appended=false},next:function(){var options=this.options,data=$(this.element).data("data");if(!data.animated){data.animated=true;if(!data.appended)++data.pageIndex;if(data.pageIndex>data.pages.length-1)data.pageIndex=0;this._goToNextPage(data.pageIndex-data.oldPageIndex);data.oldPageIndex=data.pageIndex}},
+prev:function(){var options=this.options,data=$(this.element).data("data");if(!data.animated){data.animated=true;if(!data.appended)--data.pageIndex;if(data.pageIndex<0)data.pageIndex=data.pages.length-1;this._goToPrevPage(data.pageIndex-data.oldPageIndex);data.oldPageIndex=data.pageIndex}},_removeOldElements:function(position,length){var $root=$(this.element);for(var i=0;i
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+