var EasySlide = new Class
({ Implements: [Options], element: null, slideModifier: $H({attributeName: 'width', value: 0}), isSliding: false, listItems: [], current: null, direction: null, loop: false, targetItem: $H(), eventListeners: $H(), initialize: function(sliderList, options)
{ this.element = sliderList; this.setOptions(options); this.element.set('tween', {duration: this.get('speed'), transition: Fx.Transitions.linear, onComplete: this.onComplete.bind(this)}); this.slideModifier.set('attributeName', (EasySlide.ALIGN.HORIZONTAL === this.get('align', EasySlide.ALIGN.HORIZONTAL)) ? 'width' : 'height');}, bootStrap: function()
{ var items = this.element.getElements('li'); var startPos = this.get('startPos', EasySlide.STARTPOS.FIRST); var startItemIndex = (EasySlide.STARTPOS.LAST === startPos) ? items.length - 1 : (EasySlide.STARTPOS.FIRST === startPos) ? 0 : startPos; this.buildSlider(startItemIndex, items); var event = $H({type: 'EasySlideEvent', event: EasySlide.EVENT.BUILD_COMPLETE, src: this, current: this.current, initialIndex: startItemIndex}); this.fireEvent(EasySlide.EVENT.BUILD_COMPLETE, event);}, buildSlider: function(initialItemIndex, listItems)
{ var buffer = []; var initializeListItem = function(element, pos)
{ var item = this.registerItemEvents(this.initItem(element, pos)); if ((this.get('elPerScreen') + pos < listItems.length) && pos < initialItemIndex - 1)
{ element.inject(this.element); buffer.push(item);}
else
{ this.listItems.push(item); this.current = $pick(this.current, item);}
}.bind(this); $each(listItems, initializeListItem); this.element.setStyle(this.slideModifier.get('attributeName'), this.slideModifier.get('value')); this.listItems.extend(buffer);}, initItem: function(element, pos)
{ var coords = element.getCoordinates(); var slideRange = this.slideModifier.get('value'); var styleProp = 'height' === this.slideModifier.get('attributeName') ? 'height' : 'width'; var marginStyle = 'margin-' + (styleProp === 'height' ? 'bottom' : 'right'); element.setStyle(marginStyle, this.get('space', 0)); slideRange += coords[styleProp] + this.get('space', 0); this.slideModifier.set('value', slideRange); return $H({index: pos, element: element});}, registerItemEvents: function(item)
{ var propagateClick = function (event, item) { this.fireEvent(EasySlide.EVENT.ITEM_CLICKED, $H({type: 'EasySlideEvent', event: EasySlide.EVENT.ITEM_CLICKED, srcEvent: event, src: item}));}.bindWithEvent(this, item); var propagateItemEnter = function (event, item) { this.fireEvent(EasySlide.EVENT.ITEM_MOUSEENTER, $H({type: 'EasySlideEvent', event: EasySlide.EVENT.ITEM_MOUSEENTER, srcEvent: event, src: item}));}.bindWithEvent(this, item); var propagateItemLeave = function (event, item) { this.fireEvent(EasySlide.EVENT.ITEM_MOUSELEAVE, $H({type: 'EasySlideEvent', event: EasySlide.EVENT.ITEM_MOUSELEAVE, srcEvent: event, src: item}));}.bindWithEvent(this, item)
item.get('element').addEvents({ 'click': propagateClick, 'mouseenter': propagateItemEnter, 'mouseleave': propagateItemLeave }); return item;}, slide: function(direction)
{ if (true === this.isSliding || (this.listItems.length <= this.get('elPerScreen'))) return false; if ((EasySlide.ROTATION.KARUSSEL === this.get('mode')) || this.isValidDirection(direction))
{ this.isSliding = true; this.direction = direction; var coords = this.current.get('element').getCoordinates(); var targetValue = 0; var attributeName = this.slideModifier.get('attributeName'); if (EasySlide.DIRECTION.L2R === direction || EasySlide.DIRECTION.T2B === direction)
{ this.current = this.listItems.pop(); this.listItems.unshift(this.current); this.current.get('element').inject(this.element, 'top'); this.element.get('tween').set('width' === attributeName ? 'left' : 'top', - (this.get('space', 0) + coords[attributeName]));}
else
{ targetValue -= coords[attributeName] + this.get('space', 0);}
this.fireEvent(EasySlide.EVENT.SLIDE_START, $H({type: 'EasySlideEvent', name: EasySlide.EVENT.SLIDE_START, src: this, direction: this.direction})); this.element.get('tween').start('width' === this.slideModifier.get('attributeName') ? 'left' : 'top', targetValue); return true;}
this.fireEvent(EasySlide.EVENT.SLIDE_STOP, $H({type: 'EasySlideEvent', name: EasySlide.EVENT.SLIDE_STOP, src: this, direction: this.direction})); this.loop = false; return false;}, slideTo: function(index)
{ if (this.current.get('index') === index) return; this.set('seekMode', EasySlide.SEEKMODE.TOFIRST); this.slideToIndex(index);}, slideIntoScreen: function(index)
{ if (this.isItemVisible(index)) return; this.set('seekMode', EasySlide.SEEKMODE.TOVISIBLE); this.slideToIndex(index);}, slideToIndex: function(initialIndex)
{ var targetItem = this.findItemByInitialIndex(initialIndex); if (!$chk(targetItem)) return; this.targetItem = targetItem; this.loop = true; this.slide(this.determineDirection(targetItem));}, hasNext: function()
{ return ((this.current.get('index') + this.get('elPerScreen')) < this.listItems.length);}, hasPrev: function()
{ return (0 < this.current.get('index'));}, isItemVisible: function(initialIndex)
{ var target = this.findItemByInitialIndex(initialIndex); return (this.listItems.indexOf(target) < (this.get('elPerScreen')));}, getCurrentItem: function()
{ return this.current;}, getItemAt: function(index)
{ return $pick(this.listItems[index], null);}, getItems: function()
{ return this.listItems;}, onComplete: function()
{ if (EasySlide.DIRECTION.R2L === this.direction || EasySlide.DIRECTION.B2T === this.direction)
{ this.listItems.push(this.listItems.shift()); this.current.get('element').inject(this.element); var styleName = 'width' === this.slideModifier.get('attributeName') ? 'left' : 'top'; this.element.get('tween').set(styleName, 0); this.current = this.listItems[0];}
this.checkTarget(); this.isSliding = false; this.fireEvent(EasySlide.EVENT.SLIDE_PROGRESS, $H({type: 'EasySlideEvent', name: EasySlide.EVENT.SLIDE_PROGRESS, src: this.current, direction: this.direction})); if (true === this.loop)
{ this.slide(this.direction); return;}
this.fireEvent(EasySlide.EVENT.SLIDE_STOP, $H({type: 'EasySlideEvent', name: EasySlide.EVENT.SLIDE_STOP, src: this, direction: this.direction}));}, checkTarget: function()
{ if (!$pick(this.targetItem, false)) return; if ((this.get('seekMode') === EasySlide.SEEKMODE.TOFIRST && this.isTargetHit()) || (this.get('seekMode') === EasySlide.SEEKMODE.TOVISIBLE && this.isItemVisible(this.targetItem.get('index'))))
{ this.fireEvent(EasySlide.EVENT.TARGET_REACHED, $H({type: 'EasySlideEvent', name: EasySlide.EVENT.TARGET_REACHED, src: this, direction: this.direction, target: this.targetItem})); this.targetItem = null; this.loop = false;}
}, determineDirection: function(targetItem)
{ var direction = (this.current.get('index') > targetItem.get('index')) ? EasySlide.DIRECTION.L2R : EasySlide.DIRECTION.R2L; if (this.get('mode') === EasySlide.ROTATION.KARUSELL && this.get('pathMode') === EasySlide.SEEKMODE.FASTPATH)
{ var leftDiff = this.listItems.length - this.listIetms.indexOf(targetItem); direction = (leftDiff < this.listItems.indexOf(targetItem)) ? EasySlide.DIRECTION.L2R : EasySlide.DIRECTION.R2L;}
if (EasySlide.ALIGN.VERTICAL === this.get('align'))
{ direction = (direction === EasySlide.DIRECTION.L2R) ? EasySlide.DIRECTION.T2B : EasySlide.DIRECTION.B2T;}
return direction;}, findItemByInitialIndex: function(index)
{ var checkItem = function(item)
{ return (item.get('index') === index);}
return $pick(this.listItems.filter(checkItem)[0], null);}, isTargetHit: function()
{ return (this.targetItem.get('index') === this.current.get('index'));}, isValidDirection: function(direction)
{ if (direction === EasySlide.DIRECTION.L2R || direction === EasySlide.DIRECTION.T2B)
{ return (0 < this.current.get('index'));}
else
{ return ((this.current.get('index') + this.get('elPerScreen')) < this.listItems.length);}
}, addEvent: function(eventName, callback)
{ if (!this.eventListeners.has(eventName))
{ this.eventListeners.set(eventName, $A([callback])); return callback;}
this.eventListeners.get(eventName).push(callback); return callback;}, removeEvent: function(eventName, callback)
{ if (!this.eventListeners.has(eventName)) return false; return this.eventListeners.get(eventName).erase(callback);}, fireEvent: function(eventName, event)
{ if (!this.eventListeners.has(eventName)) return; var handleCallback = function(callbackFunc){ callbackFunc(event);}
$each(this.eventListeners.get(eventName), handleCallback);}, get: function(key, defaultValue)
{ defaultValue = $pick(defaultValue, null); return $pick(this.options[key], defaultValue);}, set: function(key, value)
{ this.options[key] = value;}
}); EasySlide.ROTATION = { KARUSSEL: 1, SINGLE: 2
}; EasySlide.PATHMODE = { FASTPATH: 4, ORDERED: 8
}; EasySlide.SEEKMODE = { TOVISIBLE: 16, TOFIRST: 32
}; EasySlide.DIRECTION = {L2R: 'L2R', R2L: 'R2L', T2B: 'T2B', B2T: 'B2T'}; EasySlide.ALIGN = {VERTICAL: 'vertical', HORIZONTAL: 'horizontal'}; EasySlide.STARTPOS = {FIRST: 64, LAST: 128}; EasySlide.EVENT = { ITEM_CLICKED: 1, ITEM_MOUSEENTER: 2, ITEM_MOUSELEAVE: 3, BUILD_COMPLETE: 4, SLIDE_START: 5, SLIDE_STOP: 6, SLIDE_PROGRESS: 7, TARGET_REACHED: 8
}; 