// CytoColorPicker v0.5
// By MacKinley Smith
(function($){
	var defaults = {
		format:'hsla', // hsla, hex, rgba
		events:{
			change:function(color){}
		},
		widget:{
			label:{
				css:{
					display:'block',
					font:"<%=Cytoplasm.vars('fonts.sizes.small')+' '+Cytoplasm.vars('fonts.faces.light')%>",
					"margin-bottom":10
				},
				element:false,
				text:false
			},
			previewer:{
				css:{
					width:'100%',
					height:'100%',
					"border-top-left-radius":10,
					"border-bottom-left-radius":10
				},
				element:null,
				wrapper:{
					css:{
						display:'inline-block',
						"border-top-left-radius":10,
						"border-bottom-left-radius":10,
						background:"url(/assets/cytoplasm/transparent_bg.jpg)",
						"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"
					}
				}
			},
			slider_table:{
				attrs:{
					hue:{
						max:359
					},
					saturation:{
						max:1,
						step:0.01
					},
					lightness:{
						max:1,
						step:0.01
					},
					alpha:{
						max:1,
						step:0.01
					}
				},
				css:{
					display:'inline-block',
					'vertical-align':'top'
				},
				cytoTable:{
					widget:{
						table:{
							css:{
								"margin-bottom":0
							}
						}
					}
				},
				element:null,
				sliders:{
					elements:[],
					settings:{
						animate:true,
						min:0,
						slide:function(e,ui){
							$(this).parent().parent().find("span.num").html($(this).slider("value"));
							methods.update.apply($(this).parents(".cytoColorPicker-wrapper").find('.cytoColorPicker'));
						},
						change:function(e,ui){
							$(this).parent().parent().find("span.num").html($(this).slider("value"));
							methods.update.apply($(this).parents(".cytoColorPicker-wrapper").find('.cytoColorPicker'));
						}
					}
				}
			},
			wrapper:{
				css:{},
				element:null
			}
		},
		default_value:"hlsa(0,0%,50%,0)"
	};
	var attrs = ['hue','saturation','lightness','alpha'];
	var methods = {
		init:function(options){
			return this.each(function(){
				var $this = $(this);
				
				// Instantiate settings
				var settings = $.extend(true,{},defaults,options);
				$this.data('cytoColorPicker',settings);
				if ($this.data('label')!=null) settings.widget.label.text = $this.data('label')+":";
				
				// Generate widget
				$this.addClass('cytoColorPicker').css({display:'none'});
				settings.widget.wrapper.element = $this.wrap("<div class='cytoColorPicker-wrapper' />").parent().css(settings.widget.wrapper.css);
				settings.widget.previewer.wrapper.element = $('<div />').addClass('cytoColorPicker-previewer-wrapper').css(settings.widget.previewer.wrapper.css).appendTo(settings.widget.wrapper.element);
				settings.widget.previewer.element = $('<div />').addClass('cytoColorPicker-previewer').css(settings.widget.previewer.css).appendTo(settings.widget.previewer.wrapper.element).click(function(e){
					
				});
				if (settings.widget.label.text) settings.widget.label.element = $('<label />').attr("for",$this.attr("name")).html(settings.widget.label.text).css(settings.widget.label.css).prependTo(settings.widget.wrapper.element);
				
				// Generate slider table
				settings.widget.slider_table.element = $('<table />').cytoTable(settings.widget.slider_table.cytoTable).css(settings.widget.slider_table.css).appendTo(settings.widget.wrapper.element);
				$.each(attrs,function(i,attr){
					var letter = attr.charAt(0);
					var tr = $('<tr />').appendTo(settings.widget.slider_table.element);
					var lc = $('<td />').addClass('labelcell').html(letter.toUpperCase()+": ").append($('<span />').addClass('num').html(0)).appendTo(tr);
					var sc = $('<td />').addClass('cytoColorPicker-sliderCell').appendTo(tr);
					var slider = $('<div data-attr="'+attr+'" />').appendTo(sc).slider($.extend(true,{},settings.widget.slider_table.sliders.settings,settings.widget.slider_table.attrs[attr]));
					settings.widget.slider_table.sliders.elements.push(slider);
				});
				settings.widget.slider_table.element.find('td').css({'padding':"5px 10px"}).filter('.labelcell').width(50);
				
				// Set dimensions of previewer
				var h = 0;
				settings.widget.slider_table.element.find("tr").each(function(){h += $(this).children("td").first().outerHeight(true);});
				console.log(h);
				settings.widget.previewer.wrapper.element.width(h).height(h);
				
				// Get initial value as color
				settings.value = $.Color(($this.val()!=null && $this.val()!="") ? $this.val() : settings.default_value);
				
				// Commit settings to data-cytoColorPicker attribute
				$this.data('cytoColorPicker',settings);
				methods.resize.apply($this);
				methods.value.apply($this,[settings.value]);
			});
		},
		update:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoColorPicker');
				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the update method!");
				
				var wrapper = $this.parent();
				var previewer = wrapper.find(".cytoColorPicker-previewer");
				var sliders = wrapper.find('.ui-slider');
				var color = {};
				sliders.each(function(i){color[attrs[i]] = sliders.filter("[data-attr="+attrs[i]+"]").slider("value");});
				color = $.Color().hsla(color);
				previewer.css({"background":color.toHslaString()});
				
				$this.val(color.toHslaString());
				settings.events.change.apply($this,[color]);
			});
		},
		value:function(color){
			if (color == null) return $.Color(this.val()).toHslaString();
			if (typeof color != "object") color = $.Color(color);
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoColorPicker');
				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the value method!");
				
				var wrapper = $this.parent();
				var sliders = wrapper.find('.ui-slider');
				sliders.each(function(i){
					var c = color.hsla()[i];
					if (c==null) c = 0;
					sliders.filter("[data-attr="+attrs[i]+"]").slider("value",c);
				});
				
				methods.update.apply($this);
			});
		},
		resize:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $this.data('cytoColorPicker');
				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the resize method!");
				var w = settings.widget.wrapper.element.width(0).css({opacity:0});
				var t = settings.widget.slider_table.element.width(0);
				setTimeout(function(){
					w.width("100%");
					var magicNumber = w.innerWidth()-settings.widget.previewer.element.outerWidth(true);
					t.width('100%').width(magicNumber);
					w.find('.cytoColorPicker-sliderCell').width(magicNumber-94);
					w.css({opacity:1});
				},1);
			});
		},
		destroy:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $(this).data('cytoColorPicker');
				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the destroy method!");
				var wrapper = $this.parent();
				$this.insertBefore(wrapper).removeClass('cytoColorPicker').data('cytoColorPicker',null);
				wrapper.remove();
			});
		},
		refresh:function(){
			return this.each(function(){
				var $this = $(this);
				var settings = $(this).data('cytoColorPicker');
				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the refresh method!");
				methods.destroy.apply($this);
				methods.init.apply($this,[settings]);
				$this.trigger('change.cytoColorPicker');
			});
		},
		options:function(newOptions){
			if (newOptions!=null) {
				return this.each(function(){
					var $this = $(this);
					var settings = $this.data('cytoColorPicker');
					if (!$this.hasClass("cytoColorPicker") || settings==null) return console.warn("You must instanciate $.cytoColorPicker before you call the options method!");
					$this.data('cytoColorPicker',$.extend(true,{},settings,newOptions));
					methods.refresh.apply($this);
				});
			} else {
				var returnVal;
				this.each(function(){
					var $this = $(this);
					var settings = $this.data('cytoColorPicker');
					if (!$this.hasClass("cytoColorPicker") || settings==null) return console.warn("You must instanciate $.cytoColorPicker before you call the options method!");
					returnVal = settings;
				});
				return returnVal;
			}
		}
	};
	
	$.fn.cytoColorPicker = 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 $.cytoColorPicker!');
	};
	
	$(window).resize(function(){$('.cytoColorPicker').cytoColorPicker("resize");});
	$.Cytoplasm("ready",function(){
		$.Cytoplasm("addStyles","cytocolorpicker-styles",{
			'.cytoColorPicker-wrapper':{
				'.ui-slider[data-attr=hue]':{
					background:"linear-gradient(to right,#ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
					"box-shadow":"inset 0px 0px 5px hsla(0,0%,0%,0.5)"
				}
			}
		});
		$('.cytoColorPicker').cytoColorPicker();
	});
})(jQuery);