// JavaScript Document

function setColorPickerEvents() {
	
	$('.no-color-selector').click(
		function() {
			$(this).parents('.color-picker').children( '.selected-color-container').children( '.selected-color').css("background-color", "none"  );
			$(this).parents('.color-picker').children( '.selected-color-container').children( '.selected-color').css("background", "url(images/no_color_icon.png)"  );
		}
	);
	
	$().click(
		function( event ) {
			
			var target = $(event.target);
			if( !target.is('#color_picker') && !target.parents().is('.color-picker') )
				$('.color-space').hide("normal");
		}
	);
	
	$( '.selected-color-container' ).click(
		function( event ) {
			$('.color-space').not( $(this).siblings() ).hide("normal");
			$(this).siblings('.color-space').toggle("normal");
		}
	);
	
	$('.color-selector').mousedown( function( event ) {					
								
		var diagram = $(this).parents('.color-space').children('.diagram-image');	
		event.data = { diagram: diagram };
		setColorSelectorByDiagram( event );
		
		// mouse move handler
		$().bind("mousemove", { diagram: diagram }, setColorSelectorByDiagram );
		
		$().mouseup( function( e ) { $().unbind("mousemove", setColorSelectorByDiagram ) } );
		
		$(this).mouseup( function( e ) {
			$().unbind("mousemove", setColorSelectorByDiagram );					  
		} );
		
		
		return false;
	});
	
	$('.diagram-image').mousedown( function( event ) {					
											
		event.data = { diagram: this };
		setColorSelectorByDiagram( event );
		
		// mouse move handler
		$().bind("mousemove", { diagram: this }, setColorSelectorByDiagram );
		
		$().mouseup( function( e ) { $(this).unbind("mousemove", setColorSelectorByDiagram ) } );
		
		$(this).parents('.color-space').children('.color-selector').mouseup( function( e ) {
			$(this).parents('.color-space').children('.diagram-image').unbind("mousemove", setColorSelectorByDiagram );					  
		} );
		
		
		return false;
	});
	
	$('.hue-selector').mousedown( function( event ) {					
								
		var diagram = $(this).parents('.hue-space').children('.hue-diagram');						
		
		event.data = { diagram: diagram };
		setHueSelectorByDiagram( event );
	
		// mouse move handler
		$().bind("mousemove", { diagram: diagram }, setHueSelectorByDiagram );
		
		$().mouseup( function( e ) { $(diagram).unbind("mousemove", setHueSelectorByDiagram ) } );
		
		$(diagram).parents('.hue-space').children('.hue-selector').mouseup( function( e ) {
			$(diagram).unbind("mousemove", setHueSelectorByDiagram );					  
		} );
		
		
		return false;
	});
	
	$('.hue-diagram').mousedown( function( event ) {
	
		event.data = { diagram: this };
		setHueSelectorByDiagram( event );
	
		// mouse move handler
		$().bind("mousemove", { diagram: this }, setHueSelectorByDiagram );
		
		$().mouseup( function( e ) { $(this).unbind("mousemove", setHueSelectorByDiagram ) } );
		
		$(this).parents('.hue-space').children('.hue-selector').mouseup( function( e ) {
			$(this).parents('.hue-space').children('.hue-diagram').unbind("mousemove", setHueSelectorByDiagram );					  
		} );
		
		
		return false;
	});
	
}

function relPosition( jObject, mouseX, mouseY) {
  var offset = $(jObject).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;

  return {'x': x, 'y': y};
}

function setColorSelectorByDiagram( e ) {
	
	var diagram = e.data.diagram;
	
	var relMousePos = relPosition( diagram, e.clientX, e.clientY );
	relMousePos.x = Math.max( Math.min(relMousePos.x, 100), 0);
	relMousePos.y = Math.max( Math.min(relMousePos.y, 100), 0);
	
	$(diagram).parents().children('.color-selector').css("left", relMousePos.x );
	$(diagram).parents().children('.color-selector').css("top", relMousePos.y );
	
	setSelectedColor( $(diagram).parents('.color-picker') );
}

function setHueSelectorByDiagram( e ) {
	
	var diagram = e.data.diagram;
	
	var relMousePos = relPosition( diagram, e.clientX, e.clientY );
	relMousePos.y = Math.max( Math.min(relMousePos.y, 100), 0);
	
	$(diagram).parents('.hue-space').children('.hue-selector').css("top", relMousePos.y );
	//$(target).parents('.color-space').children('.diagram-image').css("background-color");
	
	setSelectedColor( $(diagram).parents('.color-picker') );
}

function setSelectedColor( targetColorPicker ) {
	
	var colorPicker = $(targetColorPicker);
	var colorSelector = $(targetColorPicker).find('.color-selector');
	var colorDiagram = $(targetColorPicker).find('.diagram-image');
	var hueSelector = $(targetColorPicker).find('.hue-selector');
	var hueDiagram = $(targetColorPicker).find('.hue-diagram');
	var selectedColor = $(targetColorPicker).find('.selected-color');
	
	var hueSelectorYPos = $(hueSelector).css('top').replace( "px", "");
	var colorSelectorXPos = $(colorSelector).css('left').replace( "px", "");
	var colorSelectorYPos = $(colorSelector).css('top').replace( "px", "");
	
	var hue = hueSelectorYPos / $(hueDiagram).attr('height');
	var sat = ( $(colorDiagram).attr('height') - colorSelectorYPos ) / $(colorDiagram).attr('height');
	var val = colorSelectorXPos / $(colorDiagram).attr('width');

	var selectedColorHex = "#" + hsvToHex( hue, sat, val );
	var diagramColorHex = "#" + hsvToHex( hue, 1, 1 );
	
	$(colorDiagram).css("background-color", diagramColorHex );
	
	$(selectedColor).css("background-image", "none" );
	$(selectedColor).css("background-color", selectedColorHex );
}