/*

 +--------------------------------------------------------------+
 |                                                              |
 | cSlider v1.0                                                 |
 |                                                              |
 | by Bastian Sackermann - http://samisdat.org                  |
 |                                                              |
 | More Informations avaible at                                 |                
 | http://samisdat.org/cSlider/                                 |
 |                                                              |
 | Licensed under the Creative Commons BY-NC-SA 3.0 License     |                
 | http://creativecommons.org/licenses/by-nc-sa/3.0/            |
 |                                                              |
 +--------------------------------------------------------------+

*/
var DefaultOpts = {
	outerMenu: '.outerMenu',
	innerMenu: '.innerMenu',
	handle : '.bar',
	track : '.track',
	trackWrap:'.trackStyle',	
	itemCat : 'h3',
	itemContainer : 'ul',
	itemElem : 'li',
	skipPrev:'.trackWrap .left',	
	skipNext:'.trackWrap .right'	
}

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'));		
		
	},
	addTrack:function(){
		var html = "" +
			"<div class='trackWrap'>"+
				"<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(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(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(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(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(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'))*-1;
		this.slider.setValue(left)
	},

	slided:function(v){
		this.innerMenu.setStyle({left:-v+'px'})		
	}
});

SAMISDAT.JavaScript = {
    onload: function(){
    $$('.cSlider').each(function(cSliderElem){
        new cSlider(cSliderElem);
    });

    }

};