var DefaultOpts = { outerMenu: '.outerMenu', innerMenu: '.innerMenu', handle: '.bar', track: '.track', trackWrap: '.trackStyle', itemCat: 'h3', itemContainer: 'ul', itemElem: 'li', skipPrev: '.trackWrap .left', skipPrev2: '.trackWrap .left2', skipNext: '.trackWrap .right', skipNext2: '.trackWrap .right2'
}
var cSlider = Class.create({ initialize: function(id, opts){ this.elem = $(id); this.elem.addClassName('script'); this.opts = Object.extend(Object.extend({}, DefaultOpts), opts ||{}); this.addTrack(); this.outerMenu = this.elem.select(this.opts.outerMenu)[0]; this.innerMenu = this.elem.select(this.opts.innerMenu)[0]; this.handle = this.elem.select(this.opts.handle)[0]; this.track = this.elem.select(this.opts.track)[0]; this.scanMenu(id); this.slider = new Control.Slider(this.handle, this.track, { sliderValue: 0, range: $R(0, this.innerMenu.getWidth() - this.outerMenu.getWidth()), onSlide: this.slided.bind(this), onChange: this.slided.bind(this)
}); this.elem.select(this.opts.skipPrev)[0].observe('click', this.step.bindAsEventListener(this, 'back')); this.elem.select(this.opts.skipNext)[0].observe('click', this.step.bindAsEventListener(this, 'forward')); this.elem.select(this.opts.skipPrev2)[0].observe('click', this.step.bindAsEventListener(this, 'back')); this.elem.select(this.opts.skipNext2)[0].observe('click', this.step.bindAsEventListener(this, 'forward'));}, addTrack: function(){ var html = "" + "<div class='trackWrap'>" + "<div class='left2'></div>" + "<div class='right2'></div>" + "<div class='left'></div>" + "<div class='center'></div>" + "<div class='right'></div>" + "<div class='track'>" + "<div class='bar'>" + "<div class='left'></div>" + "<div class='center'></div>" + "<div class='right'></div>" + "</div>" + "</div>" + "</div>"; this.elem.insert(html);}, scanMenu: function(id){ var itemCats = this.elem.select(this.opts.itemCat); this.track.insert({after: '<div class="barText"></div>'}); this.itemsCats = []; this.items = []; var widthAll = 0; var startItemCat = 0; var index = 0; if (itemCats.length > 0) { for (var i = 0; i < itemCats.length; i++) { this.itemsCats[i] = {}; this.itemsCats[i].title = itemCats[i].innerHTML.stripTags(); var width = 0; var items = this.elem.select(this.opts.itemContainer)[i].select(this.opts.itemElem); for (var x = 0; x < items.length; x++) { this.items[index] = { start: startItemCat + width, width: items[x].getWidth()
}
index++; width += items[x].getWidth();}
this.itemsCats[i].width = width; this.itemsCats[i].start = startItemCat; startItemCat += width; widthAll += this.itemsCats[i].width
}
}
else { this.itemsCats = false; var width = 0; var items = this.elem.select(this.opts.itemElem); for (var i = 0; i < items.length; i++) { this.items[index] = { start: width, width: items[i].getWidth()
}
index++; width += items[i].getWidth();}
widthAll += width;}
this.innerMenu.setStyle({ width: widthAll + 'px'
}); var trackWidth = this.innerMenu.getWidth() - this.outerMenu.getWidth(); var menu2track = (widthAll - this.outerMenu.getWidth()) / (this.track.getWidth() - this.handle.getWidth()); var posLeft = 0; for (var i = 0; i < itemCats.length; i++) { if (this.itemsCats[i].start < this.innerMenu.getWidth() - this.outerMenu.getWidth()) { posLeft = parseInt(this.itemsCats[i].start / menu2track);}
else { posLeft = this.track.getWidth() - 100;}
var style = 'style="position:absolute;top:0;left:' + posLeft + 'px;"'; this.elem.select('.barText')[0].insert('<div ' + style + '>' + this.itemsCats[i].title + '</div>'); this.elem.select('.barText div')[i].observe('click', this.skipTo.bindAsEventListener(this, this.itemsCats[i]));}
}, step: function(evt, mode){ var visible = []; var startPos = -1 * parseInt(this.innerMenu.getStyle('left')); var endPos = startPos + this.outerMenu.getWidth(); for (var i = 0; i < this.items.length; i++) { if (this.items[i].start >= startPos && (this.items[i].start + this.items[i].width) < endPos) { visible.push(i);}
}
var skipTo = 0; if (mode == 'forward') { skipTo = this.items[visible.last() + 1].start;}
if (mode == 'back') { skipTo = (this.items[visible.first() - 1].start + this.items[visible.first()].width - this.outerMenu.getWidth());}
this.move(skipTo);}, skipTo: function(evt, item){ this.move(item.start);}, move: function(to){ new Effect.Move(this.innerMenu, { duration: 0.3, x: -to, mode: 'absolute', afterUpdate: this.updateValue.bind(this)
});}, updateValue: function(){ var left = parseInt(this.innerMenu.getStyle('left'),10) * -1; this.slider.setValue(left);}, slided: function(v){ this.innerMenu.setStyle({ left: -v + 'px'
});}
}); document.observe("dom:loaded", function(){ $$('.cSlider').each(function(cSliderElem){ new cSlider(cSliderElem);})
});