/*** Select Slider ***/

var selectSlider = Class.create({
	initialize: function(options){
		this.options = Object.extend({
			elInputSelect: $('my-select'),
			elInputSubmit: $('my-button'),
			elSlideResults: $('my-results')
		}, options || {});

		this.elSelectOptions = this.options.elInputSelect.childElements();
		this.elList = new Element('ul', { id: this.options.elInputSelect.id + '_slider' }).addClassName('slider-select');
		this.elListItem = this.elList.childElements();
		this.elSliderHandle = new Element('li').addClassName('slider-handle').setStyle({
			width: '30px'
		});

		this.selectTransform();
		this.dragDropSliderHandle();
	},
	selectTransform: function(){
		var base = this,
			elItemSelected,
			itemSelectedIndex,
			itemWidth;

		base.options.elInputSelect.insert({ before: base.elList });

		itemWidth = base.elList.getWidth() / base.elSelectOptions.length;

		for(var i=0; i<base.elSelectOptions.length; i++){
			var elListItem = new Element('li', {
					id: 'slider-item-' + base.elSelectOptions[i].innerHTML.replace(/\s+/g, '-').toLowerCase()
				}).addClassName('slider-item').update('<span>' + base.elSelectOptions[i].innerHTML + '</span>').setStyle({
					width: Math.floor(itemWidth) + 'px'
				});

			base.elList.insert({ bottom: elListItem });

			if(i == base.options.elInputSelect.selectedIndex){
				elListItem.addClassName('selected');
				elItemSelected = elListItem;
				itemSelectedIndex = i;
			}
		}

		base.elListItem = base.elList.childElements('li.slider-item');

		base.elList.insert({bottom: base.elSliderHandle}).fire('widget:onChange');

		base.sliderContent(elItemSelected, itemSelectedIndex);
		base.positionHandle();

		base.elListItem.invoke('observe', 'click', base._listItemClick.bindAsEventListener(base));
	},
	positionHandle: function(){
		var base = this,
			itemWidth = base.elListItem[0].getWidth(),
			handleWidth = base.elSliderHandle.getWidth();

		base.elSliderHandle.setStyle({
			border: 'none',
			left: (itemWidth * base.options.elInputSelect.selectedIndex) + (itemWidth / 2) - (handleWidth / 2) + 'px'
		});
	},
	dragDropSliderHandle: function(){
		var base = this,
			itemParentWidth = base.elList.getWidth(),
			itemWidth = base.elListItem[0].getWidth(),
			handleWidth = base.elSliderHandle.getWidth(),
			elIndex = 0;

		new Draggable(base.elSliderHandle, {
			constraint: 'horizontal',
			revert: function(){
				for(var i=0; i<base.elListItem.length; i++){
					if(base.elListItem[i].hasClassName('selected')){
						base.elSliderHandle.setStyle({
							left: (itemWidth * i) + (itemWidth / 2) - (handleWidth / 2) + 'px',
							margin: 0
						});
					}
				}
			},
			snap: function(x){
				return[x < itemParentWidth - handleWidth ? (x > 0 ? x : 0 ) : itemParentWidth - handleWidth];
			}
		});

		base.elListItem.each(function(el, index){
			Droppables.add(el.id, {
				accept: 'slider-handle',
				onDrop: function(dragged, dropped, event){
					var elListItem = dropped,
						elIndex = index,
						dropAdjust = (itemWidth * elIndex) + (itemWidth / 2) - (handleWidth / 2);
					
					dragged.setStyle({
						left: dropAdjust + 'px'
					});

					elListItem.siblings().invoke('removeClassName', 'selected');
					elListItem.addClassName('selected');

					for(var i=0; i<base.elSelectOptions.length; i++){
						base.elSelectOptions[i].removeAttribute('selected');
					}

					base.elSelectOptions[elIndex].writeAttribute('selected', 'selected').fire('widget:onChange');
					base.sliderContent(elListItem, elIndex);
				}
			});
		}.bind(base));
	},
	sliderContent: function(elItem, itemIndex){
		var base = this;

		base.options.elSlideResults.invoke('hide');
		base.options.elSlideResults.invoke('removeClassName', 'selected');

		for(var i=0; i<base.options.elSlideResults.length; i++){
			var elImage = base.options.elSlideResults[i].select('img');

			if(i == itemIndex){
				base.options.elSlideResults[i].appear({
					duration: 0.3
				}).addClassName('selected');

				if(elImage){
					for(var e=0; e<elImage.length; e++){
						if(elImage[e].readAttribute('src') == ''){
							var imageSrc = elImage[e].readAttribute('data-src');
	
							elImage[e].hide();
	
							elImage[e].observe('load', function(e){
								this.effects = new Effect.Appear(this,{
									duration: 0.3
								});
							});
	
							elImage[e].setAttribute('src', imageSrc);
						}
					}
				}
			}
		}
	},
	_listItemClick: function(e){
		var base = this,
			elListItem = e.findElement('li.slider-item'),
			itemWidth = base.elListItem[0].getWidth(),
			handleWidth = base.elSliderHandle.getWidth(),
			elIndex = 0;

		base.elListItem.each(function(el, index){
			if(el == elListItem){
				elIndex = index;
			}
			base.elSliderHandle.setStyle({
				left: (itemWidth * elIndex) + (itemWidth / 2) - (handleWidth / 2) + 'px',
				margin: 0
			});
		}.bind(base));

		elListItem.siblings().invoke('removeClassName', 'selected');
		elListItem.addClassName('selected');

		for(var i=0; i<base.elSelectOptions.length; i++){
			base.elSelectOptions[i].removeAttribute('selected');
		}

		base.elSelectOptions[elIndex].writeAttribute('selected', 'selected').fire('widget:onChange');
		base.sliderContent(elListItem, elIndex);
	}
});

/*** Widget On Change Event ***/

document.observe('widget:onChange', function(){
	Cufon.refresh('ul.slider-select li.slider-item span');
});