/* ---------------------------------------------------------
   jlo Colour Selector
   Author: Tim Kinnane www.owlandfox.com
   Pattern by: Tim Kinnane www.owlandfox.com
   Version: 1.0 2 Nov 2010
   Description: Cut out comments and non-essential attributes
--------------------------------------------------------- */
(function($){
	$.fn.jloColours = function(options) {
		var opts = $.extend(true, {}, $.fn.jloColours.defaults, options); // combine passed in args with defaults
		var count = $(this).length; // how many elements being used
		var collection = $(this); // store elements collection for getting index of current for suffix
		return this.each(function() { // apply to all jquery elements in selector and return self for chaining
			var o = $.extend({}, opts, $(this).data()); // Extend passed options with any preexisting data
			var myself = $(this); // for easy access to self
			o.before.call(this); // do anything needed prior to init
			myself.children().remove();
			myself.empty(); // clear anything in the element first, just in case
			myself.addClass(o.className).css(o.css); // add class and css from options 
			var idsuffix = (count > 1) ? "-"+collection.index(this) : ""; // use numbered suffix for id'ing multiple elements
			if(myself.attr('id') == "") myself.attr("id", o.id+idsuffix); // if no id set, use id from defaults
			myself.data(o); // store all current options in element data
			if (o.addLabel) myself.prepend($('<label>'+o.title+'</label>')); // add a label to element if required
			/* CUSTOM FUNCTIONALITY HERE ---------------------------------------------------------------> */
			
			var group = $('<div />').addClass('colourGroup'); // colour group holder for seperation
			$.each(o.colours, function() { // go through colours and create pick items
				// if array element is null, create new colour group for seperation
				if (!this.length) {
					myself.append(group);
					group = group.clone().empty();
				} else {
					// make colour element and add CSS from options
					colour = $('<div />').addClass("colourPick");
					colour.css('backgroundColor', this[4]);
					colour.attr("id", this[0]);
					colour.attr("title", o.colourkeys[0]+": "+this[0]);
					colour.attr("alt", o.colourkeys[0]+": "+this[0]);
					colour.data('colours', { colourname: this[0], red: this[1], green: this[2], blue: this[3], hex: this[4] }); // add data for callback
					group.append(colour);
					
					// define default callback function as click event
					colour.click(function() {
						myself.find('.selected').removeClass("selected");
						$(this).addClass("selected");
						var colourObj = $(this).data('colours');
						
						// if control chained to layers, set colour property on those layers
						var property = myself.data('property');
						var chain = myself.data('chainTo');
						$(chain).each(function() {
							// make it the colour and store colour object it in data
							$(this).css(property, colourObj.hex);
							$(this).jloData(colourObj);
						});
						myself.data('selected', colourObj); // store the current selection in contro too
						o.clicked.call(this, colourObj); // call the custom select function
					});
				}
				myself.append(group);
			});
			/* END CUSTOM FUNCTIONALITY <---------------------------------------------------------------- */
			myself.bind('click', function() { myself.data('clicked').call(this) }); // call custom function for after its clicked
			if(o.chainClick){myself.bind('click',function(e,bc){bc?bc.push(this):bc=[this];$(myself.data('chainTo')).each(function(){if($(bc).index(this)<0)$(this).triggerHandler('click',[bc])})})}; // my super function to tie click events together
			if (o.focus) myself.focus(); // focus on self
			o.after.call(this);
		});
	}
	// Manually set colour
	$.fn.jloColoursSet = function(key) {
		var selectid = (key) ? "#"+key : "#"+$(this).data('startKey'); // use passed or default colour key
		$(this).find(selectid).trigger('click');
		return this;
	};
	$.fn.jloColours.defaults = {
		/* CUSTOM PROPERTIES AND METHODS */
		
		startKey: 100,
		selected: {},
		bg_colour: '#FFFFFF',
		cursor: 'pointer',
		className: 'colour-control',
		property: 'color',
		colourkeys: ["colourname","red","green","blue","hex"],
		colours: [
			["100",244,237,124,"#F4ED7C"],
			["101",244,237,71,"#F4ED47"],
			["102",249,232,20,"#F9E814"],
			["103",198,173,15,"#C6AD0F"],
			["104",173,155,12,"#AD9B0C"],
			["105",130,117,15,"#82750F"]],
		
		/* PATTERN DEFAULTS... */
		id: 'colour-control',
		className: 'colour-control',
		title: 'Select text colour',
		
		addLabel: true,
		css: {}, // default style object
		chainTo: [], // array of elements that this plugin is attached to - allows chaining events from one to the next
		chainClick: false, // will fire click event on chained elements when it is clicked
		before: function() {}, // function to call before initialising elements
		after: function() {}, // function to call when initialised
		clicked: function() {}, // function to call after click event processed
		updated: function() {}, // function to call when something is updated
		error: function() {}, // function to call when an error occurs
		removed: function() {}, // function to call if plugin element removed
		debug: false, // do or don't do debuging type stuff
		focus: false, // grab focus on self after init
		additional: function() {} // rename to whatever custom additional function you need
	}
})(jQuery); // ALL DONE