/*****************************************************************************
* Name: colourswap.js
* Function: Retrieves the selected colour in html hex form and sends of a 
*   request to the server to get a recoloured version of the selected picture.
* Usage: add <script src="colourswap.js"/> either in the head or the body of 
*   your webpage.
* Author: Neil Forshaw
*
* Other material taken from other sources including 'http://w3schools.com',
*    'http://javascriptsource.com' and 'http://CodeLifter.com'.
******************************************************************************/

// NOTE: Present mouse position is save as tempX and tempY because it is 
// in an imported piece of code


// Imported code from other sites
// http://w3schools.com

var xmlHttp

function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

// Get mouse position

<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
/*function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}  
//document.Show.MouseX.value = tempX;
//document.Show.MouseY.value = tempY;
return true;
}*/
//  End -->


function getMouseXY(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information
//document.Show.MouseX.value = posx;
//document.Show.MouseY.value = posy;
tempX = e.pageX;
tempY = e.pageY;
return true;
}

// Get an element's position. Used for cmy colour spot image

// http://javascriptsource.com

function getPosition(obj){
	var left = 0;
	var top  = 0;

	while (obj.offsetParent){
		left += obj.offsetLeft;
		top  += obj.offsetTop;
		obj   = obj.offsetParent;
	}
	left += obj.offsetLeft;
	top  += obj.offsetTop;

	return {x:left, y:top};
}


// Useful Mathematical functions 

function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);}


// End imported code from other sites

// New code


// Request sent to the server when a new colour is picked.

function ChangeColour(NewColour){

	//Check which part of the picture is selected
	if( 'Legs' == document.getElementById("SelectedTab").innerHTML){
		document.getElementById("ColourOne").innerHTML = NewColour
	} else if ( 'Seat' == document.getElementById("SelectedTab").innerHTML){
		document.getElementById("ColourTwo").innerHTML = NewColour
	}

	// Convert html hex format to separate decimal RGB values and turn to a value between 0 and 1
	FirstRed = h2d( document.getElementById("ColourOne").innerHTML .substr(0,2) ) / 255
	FirstGreen = h2d( document.getElementById("ColourOne").innerHTML .substr(2,2) ) / 255
	FirstBlue = h2d( document.getElementById("ColourOne").innerHTML .substr(4,2) ) / 255

	SecondRed = h2d( document.getElementById("ColourTwo").innerHTML .substr(0,2) ) / 255
	SecondGreen = h2d( document.getElementById("ColourTwo").innerHTML .substr(2,2) ) / 255
	SecondBlue = h2d( document.getElementById("ColourTwo").innerHTML .substr(4,2) ) / 255


	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
	{
		alert ("Your browser does not support AJAX!");
		  return;
	} 
	
	// Fetch the new picture
	var url= 'http://www.febland.co.uk/custom/colourswap.php?wr=' + FirstRed + '&wg=' + FirstGreen + '&wb=' + FirstBlue + '&xr=' + SecondRed + '&xg=' + SecondGreen + '&xb=' + SecondBlue
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	
	// Start the 'throbber'
	document.getElementById("Chair").src = 'images/fgu214_now_loading.gif'

}


// Assign the new picture when loaded

function stateChanged() 
{ 
	if (xmlHttp.readyState==4)
	{ 
		FirstRed = h2d( document.getElementById("ColourOne").innerHTML .substr(0,2) ) / 255
		FirstGreen = h2d( document.getElementById("ColourOne").innerHTML .substr(2,2) ) / 255
		FirstBlue = h2d( document.getElementById("ColourOne").innerHTML .substr(4,2) ) / 255

		SecondRed = h2d( document.getElementById("ColourTwo").innerHTML .substr(0,2) ) / 255
		SecondGreen = h2d( document.getElementById("ColourTwo").innerHTML .substr(2,2) ) / 255
		SecondBlue = h2d( document.getElementById("ColourTwo").innerHTML .substr(4,2) ) / 255
		
		// Picture has already been prefetched so this is instantaneous
		document.getElementById("Chair").src = 'http://www.febland.co.uk/custom/colourswap.php?wr=' + FirstRed + '&wg=' + FirstGreen + '&wb=' + FirstBlue + '&xr=' + SecondRed + '&xg=' + SecondGreen + '&xb=' + SecondBlue
	}
}


// Retrieves the picked colour on the CMY colour spot image then calls ChangeColour

function PickColour(){

	var PointerPositionX = tempX
	var PointerPositionY = tempY
	var ImagePositionX = getPosition(document.getElementById("gradient")).x
	var ImagePositionY = getPosition(document.getElementById("gradient")).y
	var ImageWidth = document.getElementById("gradient").width
	var ImageHeight = document.getElementById("gradient").height
 	// Radius was determined from when image was generated
	var ColourSpotRadius = ImageWidth  / 3 

	var SpotPositionX 
	var SpotPositionY 
	var DistanceFromSpotSquared 

	//Get cyan 
	var Cyan
	SpotPositionX = ImagePositionX + ColourSpotRadius
	SpotPositionY = ImagePositionY + ColourSpotRadius
	DistanceFromSpotSquared = (( SpotPositionX - PointerPositionX ) * ( SpotPositionX - PointerPositionX )) + (( SpotPositionY - PointerPositionY ) * ( SpotPositionY - PointerPositionY ))  
	if ( ColourSpotRadius * ColourSpotRadius < DistanceFromSpotSquared ){
		Cyan = 0
	} else {
		Cyan = 255 * ( ( (ColourSpotRadius * ColourSpotRadius) - DistanceFromSpotSquared ) / (ColourSpotRadius * ColourSpotRadius) )
	}

	var Magenta
	SpotPositionX = ImagePositionX + ( 2 * ColourSpotRadius )
	SpotPositionY = ImagePositionY + ColourSpotRadius
	DistanceFromSpotSquared = (( SpotPositionX - PointerPositionX ) * ( SpotPositionX - PointerPositionX )) + (( SpotPositionY - PointerPositionY ) * ( SpotPositionY - PointerPositionY ))  
	if ( ColourSpotRadius * ColourSpotRadius < DistanceFromSpotSquared ){
		Magenta = 0
	} else {
		Magenta = 255 * ( ( (ColourSpotRadius * ColourSpotRadius) - DistanceFromSpotSquared ) / (ColourSpotRadius * ColourSpotRadius) )
	}

	//0.866025404 is Sin(60) so 1.866025404 is 1 + sin(60)
	var Yellow
	SpotPositionX = ImagePositionX + ( 1.5 * ColourSpotRadius )
	SpotPositionY = ImagePositionY + ( ColourSpotRadius * 1.866025404 )
	DistanceFromSpotSquared = (( SpotPositionX - PointerPositionX ) * ( SpotPositionX - PointerPositionX )) + (( SpotPositionY - PointerPositionY ) * ( SpotPositionY - PointerPositionY ))  
	if ( ColourSpotRadius * ColourSpotRadius < DistanceFromSpotSquared ){
		Yellow = 0
	} else {
		Yellow = 255 * ( ( (ColourSpotRadius * ColourSpotRadius) - DistanceFromSpotSquared ) / (ColourSpotRadius * ColourSpotRadius) )
	}

	//Convert to RGB then to hex format to send to ChangeColour

	var Red = Math.round( -1 * ( Cyan - 255 ) )
	var Green = Math.round( -1 * ( Magenta - 255 ) )
	var Blue = Math.round( -1 * ( Yellow - 255 ) )

	var HexRed = d2h( Red ) 
	var HexGreen = d2h( Green ) 
	var HexBlue = d2h( Blue ) 

	//Make sure values are 2 digits long
	if( 16 > Red ){
		HexRed = '0' + HexRed.toString()
	}
	if( 16 > Green ){
		HexGreen = '0' + HexGreen.toString()
	}
	if( 16 > Blue ){
		HexBlue = '0' + HexBlue.toString()
	}

	var NewColour = HexRed + HexGreen + HexBlue
	ChangeColour( NewColour )

}