$( function (){


	$.roll('.slides', {
		loop: true,
		autoPlay: 3000,
		list: '.slides-player-ls',
		init: function (aItems){
			this.store('$pointBox', this.$ele.find('.slides-player-points'));
			this.store('$master', this.$ele.find('.slides-player-master .ha-box'));
			this.store('$secondary', this.$ele.find('.slides-player-secondary .ha-box'));

			this.$secondary.css({opacity: 0});
			var self = this;
			( function createPoints(){
				for (var i = 0; i < aItems.length; i++) {
					var $point = $('<a href="javascript:void(0);">' + (i+1) +'</a>');
					$point.on('click', (function (i){
						return function (){
							self.switchTo(i);
						}
					})(i));
					self.$pointBox.append($point);
				}
				self.store('$points', self.$pointBox.find('>a'));
			})();
		},
		onSwitch: function (oPrev, oNext){
			if(oPrev)
				this.$points.eq(oPrev.iIndex).removeClass('active');
			this.$points.eq(oNext.iIndex).addClass('active');
			var self = this;
			self.$secondary.parent().css({
				zIndex: 2
			});
			this.$secondary.stop().html(oNext.$ele.html()).show().animate({
				opacity: 1
			}, function (){
				self.$master.html(self.$secondary.html());
				self.$master.parent().css({
					zIndex: 2
				});
				self.$secondary.parent().css({
					zIndex: 0
				});
				self.$secondary.css({
					opacity: 0
				}).hide();
			});
		}
	}).switchTo(0);
} );