/*
 * jQuery simpleColor plugin
 * @requires jQuery v1.1 or later
 *
 * Examples at: http://recurser.com/articles/2007/12/18/jquery-simplecolor-color-picker/
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id$
 * Version: 1.0.0  Aug-03-2007
 */
 (function($) {
/**
 * simpleColor() provides a mechanism for displaying simple color-pickers.
 *
 * If an options Object is provided, the following attributes are supported:
 *
 *  defaultColor: Default (initially selected) color
 *                 default value: '#FFF'
 *
 *  border:       CSS border properties
 *                 default value: '1px solid #B9D305'
 *
 *  cellWidth:    Width of each individual color cell
 *                 default value: 10
 *
 *  cellHeight:   Height of each individual color cell
 *                 default value: 10
 *
 *  cellMargin:   Margin of each individual color cell
 *                 default value: 1
 *
 *  boxWidth:     Width of the color display box
 *                 default value: 115px
 *
 *  boxHeight:    Height of the color display box
 *                 default value: 20px
 *
 *  columns:      Number of columns to display. Color order may look strange if this is altered
 *                 default value: 16
 *
 *  insert:       The position to insert the color picker. 'before' or 'after'
 *                 default value: 'after'
 */
$.fn.simpleColor = function(options) {
	
	var default_colors = 
		['990033','ff3366','cc0033','ff0033','ff9999','cc3366','ffccff','cc6699',
		'993366','660033','cc3399','ff99cc','ff66cc','ff99ff','ff6699','cc0066',
		'ff0066','ff3399','ff0099','ff33cc','ff00cc','ff66ff','ff33ff','ff00ff',
		'cc0099','990066','cc66cc','cc33cc','cc99ff','cc66ff','cc33ff','993399',
		'cc00cc','cc00ff','9900cc','990099','cc99cc','996699','663366','660099',
		'9933cc','660066','9900ff','9933ff','9966cc','330033','663399','6633cc',
		'6600cc','9966ff','330066','6600ff','6633ff','ccccff','9999ff','9999cc',
		'6666cc','6666ff','666699','333366','333399','330099','3300cc','3300ff',
		'3333ff','3333cc','0066ff','0033ff','3366ff','3366cc','000066','000033',
		'0000ff','000099','0033cc','0000cc','336699','0066cc','99ccff','6699ff',
		'003366','6699cc','006699','3399cc','0099cc','66ccff','3399ff','003399',
		'0099ff','33ccff','00ccff','99ffff','66ffff','33ffff','00ffff','00cccc',
		'009999','669999','99cccc','ccffff','33cccc','66cccc','339999','336666',
		'006666','003333','00ffcc','33ffcc','33cc99','00cc99','66ffcc','99ffcc',
		'00ff99','339966','006633','336633','669966','66cc66','99ff99','66ff66',
		'339933','99cc99','66ff99','33ff99','33cc66','00cc66','66cc99','009966',
		'009933','33ff66','00ff66','ccffcc','ccff99','99ff66','99ff33','00ff33',
		'33ff33','00cc33','33cc33','66ff33','00ff00','66cc33','006600','003300',
		'009900','33ff00','66ff00','99ff00','66cc00','00cc00','33cc00','339900',
		'99cc66','669933','99cc33','336600','669900','99cc00','ccff66','ccff33',
		'ccff00','999900','cccc00','cccc33','333300','666600','999933','cccc66',
		'666633','999966','cccc99','ffffcc','ffff99','ffff66','ffff33','ffff00',
		'ffcc00','ffcc66','ffcc33','cc9933','996600','cc9900','ff9900','cc6600',
		'993300','cc6633','663300','ff9966','ff6633','ff9933','ff6600','cc3300',
		'996633','330000','663333','996666','cc9999','993333','cc6666','ffcccc',
		'ff3333','cc3333','ff6666','660000','990000','cc0000','ff0000','ff3300',
		'cc9966','ffcc99','ffffff','cccccc','999999','666666','333333','000000',
		'000000','000000','000000','000000','000000','000000','000000','000000'];
	
	var default_pantones = 
		['201 C','1777 C','187 C','1788 C','486 C','7425 C','243 C','7432 C',
		'7435 C','222 C','240 C','210 C','238 C','245 C','1915 C','214 C',
		'1925 C','219 C','806 C','232 C','813 C','223 C','212 C','240 C',
		'234 C','235 C','252 C','249 C','2572 C','2582 C','Purple c','513 c',
		'2385 C','255 C','2592 C','254 C','7438 C','7440 C','519 C','2597 C',
		'2587 C','259 C','7442 C','265 C','7441 C','262 C','2577 C','266 C',
		'267 C','2665 C','2627 C','2685 C','2725 C','7444 C','2715 C','270 C',
		'814 C','2715 C','667 C','5255 C','2726 C','274 C','2735 C','Reflex Blue C',
		'072 C','2726 C','2728 C','285 C','2728 C','2727 C','2755 C','2768 C',
		'2735 C','2738 C','2736 C','2735 C','647 C','2727 C','283 C','2718 C',
		'654 C','542 C','7462 C','543 C','7459 C','7458 C','2790 C','661 C',
		'279 C','2925 C','2985 C','7471 C','3252 C','3255 C','3245 C','3252 C',
		'7473 C','7475 C','564 C','317 C','3252 C','3242 C','7472 C','5477 C',
		'561 C','5467 C','3385 C','3375 C','346 C','3395 C','353 C','352 C',
		'7479 C','346 C','349 C','7483 C','7489 C','360 C','7489 C','802 C',
		'362 C','345 C','7479 C','7479 C','360 C','7480 C','346 C','3415 C',
		'7482 C','360 C','7488 C','7486 C','373 C','374 C','375 C','376 C',
		'802 C','368 C','7488 C','374 C','369 C','376 C','364 C','357 C',
		'361 C','802 C','375 C','374 C','368 C','369 C','376 C','370 C',
		'367 C','371 C','7495 C','390 C','364 C','377 C','382 C','374 C',
		'388 C','384 C','604 C','584 C','5747 C','385 C','619 C','585 C',
		'5753 C','5777 C','616 C','600 C','100 C','101 C','3945 C','395 C',
		'123 C','135 C','122 C','7407 C','1395 C','1245 C','1375 C','153 C',
		'1675 C','471 C','732 C','163 C','1645 C','1495 C','1585 C','173 C',
		'464 C','4975 C','498 C','4995 C','694 C','1807 C','7418 C','496 C',
		'Warm Red C','1797 C','178 C','1815 C','1675 C','485 C','172 C','171 C',
		'429 C','148 C','White','420 C','423 C','Cool Grey 11 C','447 C','Black',
		'000000','000000','000000','000000','000000','000000','000000','000000'];
		
		
		
		
		
	// Option defaults
    options = $.extend({
        defaultColor:  this.attr('defaultColor') || '#FFF',
        border:        this.attr('border') || '1px solid #BBBBBD',
        cellWidth:     this.attr('cellWidth') || 10,
        cellHeight:    this.attr('cellHeight') || 10,
        cellMargin:    this.attr('cellMargin') || 1,
        boxWidth:      this.attr('boxWidth') || '49px',
        boxHeight:     this.attr('boxHeight') || '46px',
        columns:       this.attr('columns') || 16,
        insert:        this.attr('insert') || 'after',
        buttonClass:   this.attr('buttonClass') || '',
        colors:        this.attr('colors') || default_colors,
		pantones:      this.attr('pantones') || default_pantones,
        indicator:     this.attr('indicator') || null
    }, options || {});
	
	// Hide the input
	this.hide();
	
	// Figure out the cell dimensions
	options.totalWidth = options.columns * (options.cellWidth + (2 * options.cellMargin));
	if ($.browser.msie) {
		options.totalWidth += 2;
	}
	
	options.totalHeight = Math.ceil(options.colors.length / options.columns) * (options.cellHeight + (2 * options.cellMargin));
	
	// Store these options so they'll be available to the other functions
	// TODO - must be a better way to do this, not sure what the 'official'
	// jQuery method is. Ideally i want to pass these as a parameter to the 
	// each() function but i'm not sure how
	$.simpleColorOptions = options;
	
	this.each(buildSelector);
	
	return this;
	
	
	
	function buildSelector(index) {
		
		var options = $.simpleColorOptions;
		
		// Create a container to hold everything
		var container = $("<div class='simpleColorContainer' />");
		
		// Create the color display box
		var default_color = (this.value && this.value != '') ? this.value : options.defaultColor;
		
		var display_box = $("<div style='border:1px solid red;float:right;width:60px;height:100px'><div class='simpleColorDisplay'></div></div>");
		display_box.css('backgroundColor', default_color);
		display_box.css('border',          options.border);
		display_box.css('width',           options.boxWidth);
		display_box.css('height',          options.boxHeight);
		container.append(display_box);
		
		// Create the select button 
		var select_button = $("<div style=\"float:left;padding-left:12px;\"><input type='image' onclick='' src='/img/colorCircle.jpg' border='0' value='Select'" + 
							  " class='simpleColorSelectButton "+options.buttonClass+"'></div>");
		container.append(select_button);
		
		// Create the cancel button
		var cancel_button = $("<div style=\"float:left;padding-left:12px;\"><input type='image' src='/img/colorCircle.jpg' border='0' value='Cancel'" + 
							  " class='simpleColorCancelButton "+options.buttonClass+"'></div>");
		cancel_button.hide();
		container.append(cancel_button);
		
		// Bind the select button to display the chooser
		select_button.bind('click', {
				container: container, 
				input: this, 
				cancel_button: cancel_button, 
				display_box: display_box}, 
			function (event) {
				$(this).hide();
				event.data.cancel_button.show();
				
				// Use an existing chooser if there is one
				if (event.data.container.chooser) {
					event.data.container.chooser.show();
					
				// Build the chooser
				} else {
		
					// Make a chooser div to hold the cells
					var chooser = $("<div class='simpleColorChooser' style='background:white;position:absolute;z-index:99999'/>");
					chooser.css('border',  options.border);
					chooser.css('margin',  '0px');
					chooser.css('margin-top',  '50px');
					chooser.css('width',   options.totalWidth + 'px');
					chooser.css('height',  options.totalHeight + 'px');
					
					event.data.container.chooser = chooser;
					event.data.container.append(chooser);
					var pant = "";
					// Create the cells
					for (var i=0; i<options.colors.length; i++) {
						var cell = $("<div class='simpleColorCell' id='" + options.colors[i] + "'/>");
						cell.css('width',           options.cellWidth + 'px');
						cell.css('height',          options.cellHeight + 'px');
						cell.css('margin',          options.cellMargin + 'px');
						cell.css('cursor',          'pointer');
						cell.css('lineHeight',      options.cellHeight + 'px');
						cell.css('fontSize',        '1px');
						cell.css('float',           'left');
						cell.css('backgroundColor', '#'+options.colors[i]);
						chooser.append(cell);
						
						cell.bind('click', {
								input: event.data.input, 
								chooser: chooser, 
								select_button: select_button, 
								cancel_button: cancel_button, 
								display_box: display_box}, 
							function(event) {
								for(b=0;b<options.colors.length;b++){
									if(options.colors[b]==this.id){
										pant=options.pantones[b];
										break;
									}
								}
								$('#teste'+cores).attr('value',pant);
								event.data.input.value = '#' + this.id;
								event.data.display_box.css('backgroundColor', '#' + this.id);
								event.data.chooser.hide();
								event.data.cancel_button.hide();
								event.data.display_box.show();
								event.data.select_button.show();
							}
						);
					}
				}
			}
		);
		
		// Bind the cancel button to hide the chooser
		cancel_button.bind('click', {
				container: container, 
				select_button: select_button, 
				display_box: display_box}, 
			function (event) {
				$(this).hide();
				event.data.container.find('.simpleColorChooser').hide();
				event.data.display_box.show();
				event.data.select_button.show();
			}
		);
		
		$(this).after(container);
		
	};
};
	
/*
 * Close the given color selectors
 */
$.fn.closeSelector = function() {
	this.each( function(index) {
		var container = $(this).parent().find('div.simpleColorContainer');
		container.find('.simpleColorCancelButton').hide();
		container.find('.simpleColorChooser').hide();
		container.find('.simpleColorDisplay').show();
		container.find('.simpleColorSelectButton').show();
	});
	
	return this;
}
	
	
	


})(jQuery);