//konaRoll
var konaRoll = function( selector, userOptions ) {
var _this = {};
var defaults = {
direction: 1, // up:0 right:1 down:2 left:3
auto: 1,
mouseover: 1,
rollTime: 1000,
delay: 0,
list: 1,
step: 1,
cycle: 1,
easing: 'swing',
panel: 'li',
click:{
turnLeft: null,
turnRight: null,
turnUp: null,
turnDown: null
}
};
var options;
var container, outerContainer, innerContainer, panel, panelWidth, panelHeight, panelLength, curPanel = 0, totalViewPanel;
var rollDirection, rollTime, scroll = 0;
var rollInterval;
var clickStatus = 0;
function init() {
options = $.extend( true, {}, defaults, userOptions );
container = $( selector );
panel = container.find( options.panel );
panelWidth = panel.outerWidth(1);
panelHeight = panel.outerHeight(1);
panelLength = panel.size();
totalViewPanel = parseInt( container.width() / panelWidth + 1 );
if ( panelLength < totalViewPanel ) {
return ;
}
container.wrapInner('').wrapInner('');
outerContainer = container.children('div').css({ width: container.width(), height: container.height(), overflow: 'hidden' });
innerContainer = outerContainer.children('div');
if ( options.cycle ) {
innerContainer.children().clone().appendTo(innerContainer).clone().appendTo(innerContainer);
if ( options.direction % 2 == 1 ) {
innerContainer.css({ width: panelWidth * panelLength * 3, height: panelHeight });
} else {
innerContainer.css({ width: panelWidth, height: panelHeight * panelLength * 3 });
}
} else {
if ( options.direction % 2 == 1 ) {
innerContainer.css({ width: panelWidth * panelLength, height: panelHeight });
} else {
innerContainer.css({ width: panelWidth, height: panelHeight * panelLength });
}
}
rollDirection = options.direction;
setRollTime( options.rollTime );
outerContainer.scrollLeft(0).scrollTop(0);
if ( options.auto && options.cycle ) {
if ( options.mouseover ) {
mouseOverStop();
}
autoRoll();
}
mouseClick();
}
function roll( d, t, e, f ) {
var time = typeof t === 'number' ? t : rollTime;
var easing = e ? e : options.easing;
var func = f ? f : null;
rollDirection = typeof d == 'number' ? d : rollDirection;
countScroll();
if ( options.direction % 2 == 0 && outerContainer.scrollTop() == scroll || options.direction % 2 == 1 && outerContainer.scrollLeft() == scroll ) {
func();
return;
}
if ( options.direction % 2 == 1 ) {
outerContainer.stop().animate({
scrollLeft: scroll
}, time, easing, func );
} else {
outerContainer.stop().animate({
scrollTop: scroll
}, time, easing, func );
}
}
function countScroll() {
if ( options.cycle ) {
if ( rollDirection == 3 ) {
scroll += panelWidth * options.step;
if ( scroll > innerContainer.width() - outerContainer.width() ) {
outerContainer.scrollLeft( outerContainer.scrollLeft() - innerContainer.width() / 3 );
scroll = scroll - innerContainer.width() / 3;
}
}
if ( rollDirection == 1 ) {
scroll -= panelWidth * options.step;
if ( scroll < 0 ) {
outerContainer.scrollLeft( outerContainer.scrollLeft() + innerContainer.width() / 3 );
scroll = scroll + innerContainer.width() / 3;
}
}
if ( rollDirection == 0 ) {
scroll += panelHeight * options.step;
if ( scroll > innerContainer.height() - outerContainer.height() ) {
outerContainer.scrollTop( outerContainer.scrollTop() - innerContainer.height() / 3 );
scroll = scroll - innerContainer.height() / 3;
}
}
if ( rollDirection == 2 ) {
scroll -= panelHeight * options.step;
if ( scroll < 0 ) {
outerContainer.scrollTop( outerContainer.scrollTop() + innerContainer.height() / 3 );
scroll = scroll + innerContainer.height() / 3;
}
}
} else {
if ( rollDirection == 3 ) {
scroll += panelWidth * options.step;
if ( scroll > ( panelLength - totalViewPanel ) * panelWidth ) {
scroll = ( panelLength - totalViewPanel ) * panelWidth;
}
}
if ( rollDirection == 1 ) {
scroll -= panelWidth * options.step;
if ( scroll < 0 ) {
scroll = 0;
}
}
if ( rollDirection == 0 ) {
scroll += panelHeight * options.step;
if ( scroll > ( panelLength - totalViewPanel ) * panelHeight ) {
scroll = ( panelLength - totalViewPanel ) * panelHeight;
}
}
if ( rollDirection == 2 ) {
scroll -= panelHeight * options.step;
if ( scroll < 0 ) {
scroll = 0;
}
}
}
if ( rollDirection == 1 || rollDirection == 2) {
curPanel -= options.step;
} else {
curPanel += options.step;
}
if ( options.cycle ) {
if ( curPanel >= panelLength ) {
curPanel = curPanel - panelLength;
} else if ( curPanel < 0 ) {
curPanel = curPanel + panelLength;
}
} else {
if ( curPanel > panelLength - totalViewPanel ) {
curPanel = panelLength - totalViewPanel;
} else if ( curPanel < 0 ) {
curPanel = 0;
}
}
}
function setRollTime( time ) {
rollTime = time ? time :
options.rollTime ? options.rollTime : 500;
}
function autoRoll() {
if ( options.auto && options.cycle ) {
rollInterval = setInterval(function() {
roll();
}, options.delay + rollTime );
}
}
function mouseOverStop() {
container.mouseover(function() {
clearInterval( rollInterval );
}).mouseout(function() {
autoRoll();
})
}
function mouseClick() {
if ( options.direction % 2 == 1 ) {
if ( options.click.turnLeft ) {
$( options.click.turnLeft ).click(function() {
if ( clickStatus == 0 ) {
mouseClickStart();
roll( 3, null, null, mouseClickEnd );
}
});
}
if ( options.click.turnRight ) {
$( options.click.turnRight ).click(function() {
if ( clickStatus == 0 ) {
mouseClickStart();
roll( 1, null, null, mouseClickEnd );
}
});
}
} else {
if ( options.click.turnUp ) {
$( options.click.turnUp ).click(function() {
if ( clickStatus == 0 ) {
mouseClickStart();
roll( 0, null, null, mouseClickEnd );
}
});
}
if ( options.click.turnDown ) {
$( options.click.turnDown ).click(function() {
if ( clickStatus == 0 ) {
mouseClickStart();
roll( 2, null, null, mouseClickEnd );
}
});
}
}
}
function mouseClickStart() {
clickStatus = 1;
clearInterval( rollInterval );
}
function mouseClickEnd() {
rollDirection = options.direction;
clickStatus = 0;
autoRoll();
}
function getCurPanel() {
return curPanel;
}
init();
_this.roll = roll;
_this.curPanel = getCurPanel;
_this.totalViewPanel = totalViewPanel;
return _this;
};