_DM.define('DM_Widget_PageItem_Video_CarouselSmall', function () { var _self = { slideList : [], currentSlide : null, zap : null, loader : null, slideContainer : null, infoContainer : null, target : 'DM_Widget_PageItem_Video_CarouselSmall', activeSwipe : 0, // 0 or 1 cause addEnv don't work with booleans timeout : 0, gotoSlideTimeout : 0, delay : 0, destinationMargin : 0, animationStartTime : 0, animationStartMargin : 0, swipeCapture : 0, containerWidth : 0, containerHeight : 0, animationTime : 1000, slideDelay : 5000, firstSlideDelay : 10000, selectedSlideDelay : 7000, // This is the only "public method" you can use and the only you'll need gotoSlide : function(index, delay, animate) { var slide = this.getSlide(index); if (!slide) { return; } if (typeof animate == 'undefined') { animate = true; } this.reset(); this.delay = delay; this.currentSlide = slide; if (slide.loaded) { this.displaySlide(slide, animate); this.updateZap(); } else if (slide.loading) { this.gotoSlideTimeout = setTimeout($.proxy ( function() { this.gotoSlide(index, delay); }, this ), 500 ); } else { this.loadSlide(slide, $.proxy(function() { this.displaySlide(slide, animate); }, this ), true ); this.updateZap(); } }, gotoPreviousSlide: function() { this.gotoSlide(this.currentSlide.index - 1, this.selectedSlideDelay); }, gotoNextSlide: function() { this.gotoSlide(this.currentSlide.index + 1, this.selectedSlideDelay); }, getSlide : function(index) { if (this.slideList.length === 0) { return false; } else if (index < 0) { index = this.slideList.length + index; } else if (this.slideList.length <= index) { index = index % (this.slideList.length); } return this.slideList[index]; }, reset : function() { clearTimeout(this.timeout); clearTimeout(this.animationTimeout); clearTimeout(this.gotoSlideTimeout); }, updateZap : function() { if (this.zap) { this.zap.find('.bubble').each($.proxy( function(index, item) { $(item).removeClass('active'); if (!this.currentSlide) { if (index === 0) { $(item).addClass('active'); } } else if (index == this.currentSlide.index) { $(item).addClass('active'); } }, this )); } }, displaySlide : function(slide, animate) { $.each(this.slideList, function(item) { $(item.info).removeClass('selected'); }); slide.info.addClass('selected'); if (animate) { this.animateSlide(slide); } var nextSlide = this.getSlide(this.currentSlide.index + 1); if (nextSlide && !nextSlide.loaded && !nextSlide.loading) { this.loadSlide(nextSlide); } this.scheduleNextSlide(); }, scheduleNextSlide : function() { clearTimeout(this.timeout); this.timeout = setTimeout($.proxy( function() { this.gotoSlide(this.currentSlide.index + 1, this.slideDelay); }, this ), this.delay ); }, animateSlide : function(slide, isRepetition) { if (!isRepetition) { this.animationStartTime = new Date().getTime(); this.animationStartMargin = parseInt((this.slideContainer.css('left') != 'auto' ? this.slideContainer.css('left') : '0').replace(/px/, ''), 10) * -1; this.destinationMargin = slide.index * this.containerWidth; this.animationDirection = (this.destinationMargin > this.animationStartMargin) ? 'right' : 'left'; } var ratio = (new Date().getTime() - this.animationStartTime) / this.animationTime; ratio = (ratio=ratio-1)*ratio*ratio + 1; // easeOutCubic var margin = this.animationStartMargin + ((this.destinationMargin - this.animationStartMargin) * ratio); margin = (margin < 0) ? 0 : Math.floor(margin); margin = (this.animationDirection == 'right' && margin > this.destinationMargin) ? this.destinationMargin : margin; margin = (this.animationDirection == 'left' && margin < this.destinationMargin) ? this.destinationMargin : margin; this.slideContainer.css('left', '-' + margin + 'px'); if (margin != this.destinationMargin) { this.animationTimeout = setTimeout($.proxy( function() { this.animateSlide(slide, true); }, this ), 33 ); } else { $(this.slideList).each(function(i, item) { $(item.info).hide(); }); $(slide.info).show(); } }, buildSlide : function(slide, hideInfo) { slide.container = $('