// JavaScript Document

$(document).ready(function() {
   // $('#demo').hide();
	
	$('.colorPicker').each(function () {
		$field = $(this);
		$field.css("background-color",$field.val());
	//alert($(this).attr("id"));
		$field.focus( function () {
			var thisId = $(this).attr("id");
			var insertEl = false;
			
			if (!$('#'+thisId+'_picker').attr("id")) {
			//	alert ("new element");
				$(this).after ( '<div id="'+thisId+'_picker"></div>' );
				insertEl = true;
			}	
			//$(this).parent().find( "#"+$(this).attr("id")+'_picker' ).farbtastic( $(this).attr("id") );
			
			var $picker = $('#'+thisId+'_picker');
			
			$picker.farbtastic('#'+thisId);
			
			if (insertEl) {
				$picker.append('<div class="pointer"><img src="/_colorpicker/pointer.png" width="11" height="20" alt="*" /></div>');
				$picker.append('<div class="close"><img src="/_colorpicker/close.gif" width="20" height="20" alt="*" /></div>');
			}
			
			$picker.css("display","none");
			
			$picker.css("position","fixed");
			$picker.css("z-index","9000");
			$picker.css("border","2px solid #000");
			$picker.css("background-color","#FFF");
			
			$pointer = $picker.find(".pointer");
			$pointer.css("position","absolute");
			$pointer.css("left","-11px");
			$pointer.css("top","40px");
			
			$close = $picker.find(".close");
			$close.css("position","absolute");
			$close.css("left","175px");
			$close.css("top","0px");
			
			var offset = $(this).offset();
			
			var top = offset.top - 40;
			$picker.css("top",top+"px");
			
			var left = offset.left + $(this).width() - 40;
			$picker.css("left",left+"px");
			
			//$picker.shadow();
			
			$picker.fadeIn(100);
			
			$(this).blur( function () {		
				$picker.fadeOut(100,function () {
					//$(this).remove();
				});
			});
	
		//$field.focus(	
		});

	//$field.each(	
	});
	
//document ready
});