(function($) {
	$.fn.colorPicker = function( userOptions ) {
		var defaultOptions = {
			speed: 500,
			filmstripW: 0,
			filmstripH: 0,
			filmstripP: 0.8,
			imageW:1400,
			imageH:900,
			imageM:50,
			backButton:"color_back",
			nextButton:"color_next",
			thumbnailHolder:"color_nav",
			imageHolder:"color_images",
			activeClass:"active",
			panelActiveClass:"active"
		}
		var uO = $.extend( defaultOptions, userOptions );

		var self = this;
	
		return this.each(function() {
			var $this = $( this );
			var $panels = $this.find( ".color_panels" );
			var $images = $this.find( ".color_images" );
			var $nav = $this.find( ".color_nav" );

			var wrapperW = $this.width();
			var wrapperH = $this.height();
			var totalImages = $nav.find( ".color_viewport li" ).length;
			var activeIndex = $nav.find( "." + uO.activeClass ).index();
			var imageIndex = 0;
			
			var currentColor = 0;
			var activeColor = 0;
			var currentPanel = 0;
			var activePanel = 0;

			/****************************************
			 *  Functions
			 */

			function getCurrentDuration() {
				var currentDistance = Math.abs( currentPanel - activePanel );
				var currentDuration = ( currentDistance * currentDistance ) + ( 300 * Math.abs( currentDistance ) ) + 200;
				return 600;
			}
			function translatePanel() {
				var panelOffset = 0 - uO.imageW * currentPanel;
				$panels.fadeTo( uO.speed, 0.25, function() {
					$panels.animate({left:panelOffset + "px"}, getCurrentDuration(), function() {
						$panels.fadeTo( uO.speed, 1.0, function() {
						});
						
					});
				});
			}
			function initialize() {
				// fade all images to 0.0, except for the first index
				$images.find( "li:gt(0)" ).fadeTo( 0, 0.0 );


				$this.find( ".color_viewport li" ).bind( "click", function() {
					currentColor = $( this ).index();
					activeColor = $( this ).parent().find( ".active" ).index();
					$( this ).parent().find( "li" ).removeClass( "active" );

					if( currentColor != activeColor ) {
						$( this ).parents( ".color_panel" ).find( ".color_images li:eq(" + activeColor + ")" ).fadeTo( uO.speed, 0.0 );
						$( this ).parents( ".color_panel" ).find( ".color_images li:eq(" + currentColor + ")" ).fadeTo( uO.speed, 1.0, function() {
							$( this ).parents( ".color_panel" ).find( ".color_viewport li:eq(" + currentColor + ")" ).addClass( "active" );
						});
					fireTag(2207.3,{'<color>':currentColor,'<angle>':currentPanel});
					}

				});
				$this.find( ".panel_nav li" ).bind( "click", function() {
					currentPanel = $( this ).index();

					var panelOffset = 0 - uO.imageW * currentPanel;
					$panels.fadeTo( uO.speed, 0.25, function() {
						$panels.animate({left:panelOffset + "px"}, getCurrentDuration(), function() {
							$panels.fadeTo( uO.speed, 1.0 );
						});
					});
				});
				

			}
			initialize();

		}); // end return this
		
		return this;
	}; // end plugin
	
	$.log = function(message) {
		if(window.console) {
			console.debug(message);
		} else {
			alert(message);
		}
	};
})(jQuery);
(function($) {
	$(document).ready(function(){
	    $('.color_nav_thumbnail').click(function(){
			$(this).parent().next('.color_viewport_desc').html($(this).attr('rel'));
			});
		$('.color_viewport ul li:first-child').click();
	});
})(jQuery);