/**
 * @author nhendriks
 * @version 1.1.0
 */



Ribbon = Class.create({
	
	_DEFAULT_OPTIONS: {
		"itemWidth": 0,
		"itemPosX": 163,
		"steps": 1,
		"margin": 10,
		"stepSize": 1,
		"startPos":0,
		"slideHeight":375,
		"classNames": {
			"ribbonNav": "ribbon-nav",
			"ribbonNavPrev": "prev-nav",
			"ribbonNavNext": "next-nav"
		}
	},
	
	_options: {},
	
	_isAnimationInProgress: false,
	
	initialize: function(){
		this.initOptions();
		this.element = $('slider');
		
		var _items = this.element.childElements();
		_items.each(this._rearrangeItems.bind(this));
		
		this.nrOfSteps = Math.ceil(_items.length/this._options.stepSize);
		/*
		this._options.steps = (Math.ceil(this.nrOfSteps/2));
		*/
		
		
		if(_items.length > this._options.stepSize){
			this._createNav();
		}
		
		var nav = $$("."+this._options.classNames.ribbonNav);
		nav.each(this._navActions.bind(this));
		
		
		$$('.media-selector').invoke("observe", "change", this.selectMedia.bindAsEventListener(this));
		
	
	
	
		
		
		
		//var newPos = -((this._options.steps-1) * this._options.itemWidth);
		var newPos = 0;
		
		var sliderBox = $('slider');
		new Effect.Move(sliderBox, { 
				x: newPos, 
				y: 0,
				duration:0.00001,
				"beforeStart": function(){
					this._isAnimationInProgress = true;
				}.bind(this),
				"afterFinish": function(){
					this._isAnimationInProgress = false;
					$('loading-box').hide();
				}.bind(this)
			});
		
	
	
	$$('.slide_prev').invoke("observe", "click", this.prevNextSlide.bindAsEventListener(this));
	$$('.slide_next').invoke("observe", "click", this.prevNextSlide.bindAsEventListener(this));
		
		
	},
	
	initOptions: function (options) {
		this._options = Object.extend({}, this._DEFAULT_OPTIONS);
		if (!Object.isUndefined(options)) {
			this._options = Object.extend(this._options, options);
		}		
	},
		
	selectMedia: function(ev){
		var elmSelector = ev.findElement('select');
		var selectValue = elmSelector.value;
		mainParent = elmSelector.up(1);
		
		mediaElm = mainParent.down('.media-elements').childElements();
		
		for (var i = 0; i < mediaElm.length; ++i) {
			if(mediaElm[i].className == "element-"+selectValue){
				mediaElm[i].show();
			}else{
				mediaElm[i].hide();
			}
		}
		
		
		
		
		
		
		
	},
		
	_rearrangeItems: function(el){
		this._options.itemWidth = el.getWidth() + this._options.margin;
		
		el.absolutize().setStyle({
			"left": this._options.itemPosX+"px"
		})	
		
		this._options.itemPosX = this._options.itemPosX + this._options.itemWidth;
		
	},
	
	_createNav: function(){
		var newNav = new Element("div", {
			id:	this._options.classNames.ribbonNav
		});	
		
		var navLinks = "<a href='#' id='"+this._options.classNames.ribbonNavPrev+"' class='ribbon-nav ribbon-nav-prev'>&nbsp;</a><a href='#' id='next-nav' class='ribbon-nav ribbon-nav-next'>&nbsp;</a>"; 
		$('ribbon-box').insert(newNav);
		$(this._options.classNames.ribbonNav).update(navLinks);
		//$(this._options.classNames.ribbonNavPrev).disable;
		//$(this._options.classNames.ribbonNavPrev).addClassName("disabled");
	},
	
	
	_scrollSlider: function(ev){
		var elm = ev.findElement('a');
		var sliderBox = $('slider');
		if(elm.hasClassName('disabled') == false){
		
			if(this._isAnimationInProgress == false){
		
				if(elm.id == this._options.classNames.ribbonNavNext){
					var newPos = -(this._options.stepSize * this._options.itemWidth);
					this._options.steps = this._options.steps + 1;
					$(this._options.classNames.ribbonNavPrev).removeClassName("disabled");
				}else{
					var newPos = (this._options.stepSize * this._options.itemWidth);
					this._options.steps = this._options.steps - 1;
					$(this._options.classNames.ribbonNavNext).removeClassName("disabled");
				}
			
				new Effect.Move(sliderBox, { 
					x: newPos, 
					y: 0,
					duration:0.25,
					"beforeStart": function(){
						this._isAnimationInProgress = true;
					}.bind(this),
					"afterFinish": function(){
						this._isAnimationInProgress = false;
					}.bind(this)
				});
			}
		
			if(this._options.steps >= this.nrOfSteps){
				this._options.steps = this.nrOfSteps;
				$(this._options.classNames.ribbonNavNext).addClassName("disabled");
			}else if (this._options.steps <= 1){
				this._options.steps = 1;
				$(this._options.classNames.ribbonNavPrev).addClassName("disabled");
			}
		}
		ev.stop();
	},
	
	_navActions: function(ev){
		Event.observe(ev,'click',this._scrollSlider.bindAsEventListener(this),false);
	},
	
	prevNextSlide: function(ev){
		
		var clickElm = ev.findElement('a');
		var parentElm = ev.findElement('div');
		var counterSpan = parentElm.down('span');
		var activeElm = counterSpan.innerHTML;
		
		var placeHolder = parentElm.next('div');
		var totalElm = placeHolder.id;
		
		var getChilderen = placeHolder.childElements();
		
		if(clickElm.hasClassName('slide_next')){
			newActive = parseInt(activeElm) + 1;
		}else{
			newActive = parseInt(activeElm) - 1;
		}
		
		if(newActive < 1){
			newActive = totalElm;
		}else if(newActive>totalElm){
			newActive = 1;
		}
	
		parentElm.down('span').update(newActive);
		
		
		for (i=0;i<getChilderen.length;i++){
			getChilderen[i].hide();
			if(i == (newActive-1)){
				getChilderen[i].show();
				
				
				if(getChilderen[i].hasClassName('rewrite')){
					splitImg = getChilderen[i].id.split('.');
					getLoc = getChilderen[i].href.split('uploads/');
					
					getChilderen[i].update('<img src="'+getLoc[0]+'uploads/'+splitImg[0]+'-650x375.'+splitImg[1]+'" />');
				}
			}
		}
		
		
		
		
		//alert(nrOfEl);
		
		ev.stop();
	},
	
	nextSlide: function(ev){
		alert('hallo');
		ev.stop();
	}
	
	
});

document.observe("dom:loaded", function () { new Ribbon(); },false);