// CytoSlider v0.5
// By MacKinley Smith
(function($){
	var defaults = {
		dimensions:1,
		widget:{
			label:{
				css:{
					font:'<%=Cytoplasm.vars("fonts.sizes.small")+" "+Cytoplasm.vars("fonts.faces.light")%>'
				},
				element:false,
				html:"",
				readout:{
					css:{},
					unit:false
				}
			},
			sliders:{
				css:{},
				elements:[],
				options:{
					min:0,
					max:100,
					value:0,
					step:1,
					slide:function(e,ui){},
					change:function(e,ui){}
				}
			},
			wrapper:{
				css:{
					padding:"5px 0px"
				},
				element:false
			}
		},
		events:{
			create:function(cy){},
			change:function(cy,event){},
			destroy:function(cy){},
			resize:function(cy,event){}
		}
	};
	var methods = {
		init:function(options,reinit){
			if (reinit==null) reinit = false;
			return this.each(function(){
				var $this = $(this);
				if ($this.data('cytoSlider')!=null) return console.warn("You cannot reinstatiate cytoSlider before calling the destroy method.\nProtip: Use the refresh method to reinstantiate in one move.");
				if (!$this.hasClass('cytoSlider')) $this.addClass("cytoSlider");
				
				// Initialize settings
				var settings;
				if (!reinit) {
					settings = $.extend(true,{},defaults,options);
					if ($this.data('settings')!=null) settings = $.extend(true,{},settings,$this.data('settings'));
					if ($this.data('dimensions')!=null) settings.dimensions = $this.data('dimensions');
					if ($this.data('label')!=null) settings.widget.label.html = $this.data('label');
					if ($this.data('unit')!=null) settings.widget.label.readout.unit = $this.data('unit');
					if ($this.data('min')!=null) settings.widget.sliders.options.min = $this.data('min');
					if ($this.data('max')!=null) settings.widget.sliders.options.max = $this.data('max');
					if ($this.data('step')!=null) settings.widget.sliders.options.step = $this.data('step');
					if ($this.val()!=null && $this.val()!="") settings.widget.sliders.options.value = parseInt($this.val());
				} else settings = options;
				
				// Generate widget
				settings.widget.wrapper.element = $this.wrap("<div></div>").parent().addClass('cytoSlider-wrapper').css(settings.widget.wrapper.css);
				settings.widget.label.element = $('<label />').attr("for",$this.attr("name")).addClass('cytoSlider-label').css(settings.widget.label.css).html(settings.widget.label.html+": ").prependTo(settings.widget.wrapper.element);
				settings.widget.label.readout.element = $('<span />').addClass("cytoSlider-label-readout").css(settings.widget.label.readout.css).appendTo(settings.widget.label.element);
				
				// Bindings
				$this.bind("change.cytoSlider",function(e){
					settings.widget.label.readout.element.html($(this).val());
					settings.events.change.apply($this,[settings,e]);
				});
				
				// Generate sliders
				$this.data('cytoSlider',settings);
				methods.setDimensions.apply($this,[settings.dimensions]);
				
				// Save settings data to input
				$this.data('cytoSlider',settings);
				methods.resize.apply($this);
				settings.events.create.apply($this,[settings]);
			});
		},
		destroy:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoSlider');
				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the destroy method!");
				
				// Destroy widget
				$this.unbind(".cytoSlider").removeClass("cytoSlider").data("cytoSlider",null).insertBefore(settings.widget.wrapper.element);
				settings.widget.wrapper.element.remove();
				
				settings.events.destroy.apply($this,[settings]);
			});
		},
		refresh:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoSlider');
				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the refresh method!");
				
				// Destroy and reinit
				methods.destroy.apply($this);
				methods.init.apply($this,[settings,true]);
				$this.trigger('change.cytoSlider');
			});
		},
		resize:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoSlider');
				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the resize method!");
				
				var w = settings.widget.wrapper.element.width(0);
				setTimeout(function(){
					w.width("auto");
				},1);
			});
		},
		setDimensions:function(n){
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoSlider');
				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the setDimensions method!");
				
				// Reset sliders
				if (settings.widget.sliders.elements.length) settings.widget.sliders.elements.each(function(){$(this).remove()});
				
				// Create sliders
				for (var i=0;i<n;i++) {
					var slider = $('<div />').addClass('cytoSlider-slider')
						.css(settings.widget.sliders.css)
						.appendTo(settings.widget.wrapper.element)
						.slider();
				}
				var sliders = settings.widget.wrapper.element.find('.cytoSlider-slider');
				
				// Set up options
				$.each(["slide","change"],function(i,event){
					var orig = settings.widget.sliders.options[event];
					settings.widget.sliders.options[event] = function(e,ui){
						var values = [];
						$(this).parent().find('.cytoSlider-slider').each(function(){values.push($(this).slider("value")+settings.widget.label.readout.unit);});
						$this.val(values.join(" ")).trigger("change.cytoSlider");
						orig.apply($this,[e,ui]);
					};
				});
				
				// Margin fix
				if (n>1) {
					sliders.each(function(){$(this).css("margin-top",10);});
					$(sliders).first().css("margin-top",0);
				}
				
				// Set options
				sliders.each(function(){
					$(this).slider("option",settings.widget.sliders.options);
				});
				
				// Store settings
				settings.dimensions = n;
				settings.widget.sliders.elements = sliders;
				$this.data('cytoSlider',settings);
			});
		},
		value:function(set){
			if (set==null || set==undefined) set = false;
			var value;
			this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoSlider');
				if (settings==null) return console.warn("You must instantiate $.cytoSlider before you call the value method!");
				
				if (set===false) value = $this.val();
				else {
					if (set.indexOf(" ")>-1) {
						set = set.split(" ");
						methods.setDimensions.apply($this,[set.length]);
						$.each(set,function(i,v){
							settings.widget.sliders.elements[i].slider("value",parseFloat(v));
						});
					} else {
						methods.setDimensions.apply($this,[1]);
						settings.widget.sliders.elements[0].slider("value",parseFloat(set));
					}
					$this.trigger('change.cytoSlider');
				}
			});
			return (value!=null) ? value : this;
		},
		options:function(newOptions){
			if (newOptions!=null) {
				return this.each(function(){
					var $this = $(this);
					var settings = $this.data('cytoSlider');
					if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the options method!");
					$this.data('cytoSlider',$.extend(true,{},settings,newOptions));
					methods.refresh.apply($this);
				});
			} else {
				var returnVal;
				this.each(function(){
					var $this = $(this);
					var settings = $this.data('cytoSlider');
					if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the options method!");
					returnVal = settings;
				});
				return returnVal;
			}
		}
	};
	
	$.fn.cytoSlider=function(method){
		if (methods[method]) return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
		else if (typeof method == 'object' || !method) return methods.init.apply(this,arguments);
		else $.error('Method ' + method + ' does not exist on $.cytoSlider!');
	};
	
	$(window).resize(function(){$('.cytoSlider').cytoSlider('resize');});
	$.Cytoplasm("ready",function(){
		$('.cytoSlider').cytoSlider();
	});
})(jQuery);