Weazel.Slider = {}; Weazel.Slider.Base = Class.create({ initialize: function(id, properties, structure) { this.options = Object.extend({ width: undefined, objects: 1, height: 150, singleWidth: 220, startLeft: true, speed: 2.7501, step: 1 }, properties || {}); if(Weazel.Tools.Check.isNull(this.options.width)) { this.options.width = this.options.singleWidth * this.options.objects; } this.sliderOutter = $(id); this.sliderOutter.addClassName('sliderOutter'); if(!Weazel.Tools.Check.isNull(structure)) { this.structure = $(structure); } }, create: function() { this.sliderInner = Weazel.Tools.Check.isNull(this.structure) ? new Element('div', { 'class': 'sliderInner' }) : this.structure; this.sliderInner.setWidth(this.options.width); this.sliderInner.setHeight(this.options.height); this.sliderInner.setStyle({ 'overflow': 'hidden' }); this.container = Weazel.Tools.Check.isNull(this.structure) ? new Element('div', { 'class': 'container' }) : this.structure.down('.container'); this.container.setStyle({ 'position': 'absolute' }); if(!Weazel.Tools.Check.isNull(this.structure)) { this.sliderInner.insert(this.container); this.container.setWidth(this.container.childElements().length * this.options.singleWidth); } this.createContainer(this.container); this.setContainerPosition(this.options.startLeft ? 0 : this.container.getWidth() - this.sliderInner.getWidth()); this.directionIndicator = this.options.startLeft; var left = new Element('div').update(' ').setHeight(this.options.height); var right = new Element('div').update(' ').setHeight(this.options.height); Event.observe(left, 'mouseover', this.over.bind(this)); Event.observe(left, 'mouseout', this.out.bind(this)); Event.observe(left, 'click', this.moveLeft.bind(this)); Event.observe(right, 'mouseover', this.over.bind(this)); Event.observe(right, 'mouseout', this.out.bind(this)); Event.observe(right, 'click', this.moveRight.bind(this)); this.sliderOutter.insert(left); this.sliderOutter.insert(this.sliderInner); this.sliderOutter.insert(right); left.addClassName('controls'); left.addClassName('left'); right.addClassName('controls'); right.addClassName('right'); return this; }, setContainerPosition: function(position) { this.containerPosition = position; this.container.setStyle({ 'left': position + 'px' }); }, getContainerPosition: function() { return this.containerPosition; }, show: function() { this.sliderOutter.show(); }, start: function() { if(this.sliderInner.getWidth() < this.container.getWidth()) { this.updater = new PeriodicalExecuter(this.move.bind(this), this.options.speed); } }, stop: function() { if(!Weazel.Tools.Check.isNull(this.updater)) { this.updater.stop(); } }, over: function(event) { this.stop(); $(Event.element(event)).addClassName('over'); }, out: function(event) { this.start(); $(Event.element(event)).removeClassName('over'); }, move: function() { this.moveIt(undefined); }, moveIt: function(forceDirectionIndicator) { if(!Weazel.Tools.Check.isNull(forceDirectionIndicator)) { this.directionIndicator = forceDirectionIndicator; } if(this.directionIndicator) { var end = this.getContainerPosition() - this.options.singleWidth; if(end <= (-1 * (this.container.getWidth() - this.sliderInner.getWidth()))) { this.directionIndicator = !this.directionIndicator; end = (-1 * (this.container.getWidth() - this.sliderInner.getWidth())); } } else { var end = this.getContainerPosition() + this.options.singleWidth; if(end >= 0) { this.directionIndicator = !this.directionIndicator; end = 0; } } this.doMove (end); }, moveLeft: function() { this.moveIt(false); }, moveRight: function() { this.moveIt(true); }, doMove: function(end) { if(!(Weazel.Tools.Check.isNull(this.blockMove) ? false : this.blockMove)) { var start = this.getContainerPosition(); var options = { 'duration': this.options.step, 'afterFinish': function() { this.blockMove = false; }.bind(this), 'beforeStart': function() { this.blockMove = true; }.bind(this) }; if(start != end) { var effect = new Effect.Tween(this.container, start, end, options, this.setContainerPosition.bind(this)); } } } }); Weazel.Slider.XML = Class.create(Weazel.Slider.Base, { xmlFile: undefined, initialize: function($super, id, properties, xml, structure) { this.xmlFile = xml; $super(id, properties, structure); }, createContainer: function(container) { var elements = this.getElements(); this.container.setWidth(elements.length * this.options.singleWidth); for(i=0; i