// DOM cell prefix for putting DOM refs back together
	var pre="ccc_";

	/**
	* Ajax Request Builder */
	function colourcardAjaxClick(id) {
		var brand =document.getElementById('hidbrandname').value;
		var url = '/lib/ajax/colour_card_data.php?clickID= ' + id + '&brandname=' + brand; 
		new Ajax.Request(url + '&data_only=true', {
			method: 'get',
			onComplete: parseCCAjaxClickResponse
	    });
	} 
	
	/**
	* Ajax Response Handler */
	function parseCCAjaxClickResponse(transport){
		if (200 == transport.status) {
			var data = transport.responseText.evalJSON();
			$('colour-card-detail').update(data.colour_card_detail);
			setBrandPaint($F('hidCentreColourId'));
		} else {   
			window.location.href = '/';
            }
	}

	/**
	* Colour Card Mouse Click Handler */
	function ccmouseclick(id) {
		cchighlight(id);
		document.getElementById('hidcentredcellDOMRef').value = id;
		document.getElementById('hidcolourcardclicked').value = 1;
		colourcardAjaxClick(id);
	}

	/**
	* Highlights the correct 9 squares on the Colour Card*/
	function cchighlight(id) {	
		// unhighlight the highlighted cells first
		ccunhighlight(centredcell);
		
		// split the existing DOM ref and force them into ints
		newgridref=id.split("_");
		newrow=parseInt(newgridref[1]);
		newcol=parseInt(newgridref[2]);
		
		// get the dimensions of the card 
		cardrows=document.getElementById('hidcolourcardrows').value-1;
		cardcols=document.getElementById('hidcolourcardcolumns').value-1;
		
		// make an index ref for php
		indexref=((newcol) * (cardrows+1)) + (newrow+1);
		
		// fix the click
		if (newrow==0) {newrow=newrow+1}
		if (newcol==0) {newcol=newcol+1}
		if (newrow==cardrows) {newrow=newrow-1}
		if (newcol==cardcols) {newcol=newcol-1}
		
		// make the corrected centre back into a DOM ref
		newid=pre+newrow+"_"+newcol;
		
		cctopleft = pre+(newrow-1)+"_"+(newcol-1);
		document.getElementById(cctopleft).style.borderLeft="1px solid black";
		document.getElementById(cctopleft).style.borderTop="1px solid black";
		
		cctop = pre+(newrow-1)+"_"+newcol;
		document.getElementById(cctop).style.borderTop="1px solid black";
		
		cctopright = pre+(newrow-1)+"_"+(newcol+1);
		document.getElementById(cctopright).style.borderRight="1px solid black";
		document.getElementById(cctopright).style.borderTop="1px solid black";

		cctop = pre+(newrow)+"_"+(newcol-1);
		document.getElementById(cctop).style.borderLeft="1px solid black";
		
		cctop = pre+(newrow)+"_"+(newcol+1);
		document.getElementById(cctop).style.borderRight="1px solid black";
		
		cctopleft = pre+(newrow+1)+"_"+(newcol-1);
		document.getElementById(cctopleft).style.borderLeft="1px solid black";
		document.getElementById(cctopleft).style.borderBottom="1px solid black";
		
		cctop = pre+(newrow+1)+"_"+newcol;
		document.getElementById(cctop).style.borderBottom="1px solid black";
		
		cctopright = pre+(newrow+1)+"_"+(newcol+1);
		document.getElementById(cctopright).style.borderRight="1px solid black";
		document.getElementById(cctopright).style.borderBottom="1px solid black";

		// store the DOM ref for erasing the rectangle with a new click
		centredcell=newid;
		
		// and store the index ref in a hidden field, for use with PHP 
		document.getElementById('hidcentredcell').value=indexref;
		
		// and show/hide the arrows
		showHideArrows(centredcell);
	}

	/**
	* UNHighlights the correct 9 squares on the Colour Card*/
	function ccunhighlight(id) {
		newgridref=id.split("_");
		newrow=parseInt(newgridref[1]);
		newcol=parseInt(newgridref[2]);

		// This only required on the first load 
		// get the dimensions of the card 
		cardrows=document.getElementById('hidcolourcardrows').value-1;
		cardcols=document.getElementById('hidcolourcardcolumns').value-1;
		
		// fix the click
		if (newrow==0) {newrow=newrow+1}
		if (newcol==0) {newcol=newcol+1}
		if (newrow==cardrows) {newrow=newrow-1}
		if (newcol==cardcols) {newcol=newcol-1}
		
		cctopleft = pre+(newrow-1)+"_"+(newcol-1);
		document.getElementById(cctopleft).style.borderLeft="1px solid white";
		document.getElementById(cctopleft).style.borderTop="1px solid white";
		
		cctop = pre+(newrow-1)+"_"+newcol;
		document.getElementById(cctop).style.borderTop="1px solid white";
		
		cctopright = pre+(newrow-1)+"_"+(newcol+1);
		document.getElementById(cctopright).style.borderRight="1px solid white";
		document.getElementById(cctopright).style.borderTop="1px solid white";

		cctop = pre+(newrow)+"_"+(newcol-1);
		document.getElementById(cctop).style.borderLeft="1px solid white";
		
		cctop = pre+(newrow)+"_"+(newcol+1);
		document.getElementById(cctop).style.borderRight="1px solid white";
		
		cctopleft = pre+(newrow+1)+"_"+(newcol-1);
		document.getElementById(cctopleft).style.borderLeft="1px solid white";
		document.getElementById(cctopleft).style.borderBottom="1px solid white";
		
		cctop = pre+(newrow+1)+"_"+newcol;
		document.getElementById(cctop).style.borderBottom="1px solid white";
		
		cctopright = pre+(newrow+1)+"_"+(newcol+1);
		document.getElementById(cctopright).style.borderRight="1px solid white";
		document.getElementById(cctopright).style.borderBottom="1px solid white";
	}

	/**
	* Colour Card Detail navigation button handler: up */
	function shiftup() {
		// get card dimensions
		cardrows=document.getElementById('hidcolourcardrows').value-1;
		
		// get current DOM ref
		domref = document.getElementById('hidcentredcellDOMRef').value;
		gridref=domref.split("_");
		row=parseInt(gridref[1]);
		col=parseInt(gridref[2]);
		
		if (row!=0) { row=row-1}
		if (row==cardrows-1) { row=row-1}
		
		// make the corrected centre back into a DOM ref
		newid=pre+row+"_"+col;

		cchighlight(newid);
		document.getElementById('hidcentredcellDOMRef').value = newid;
		document.getElementById("hidcolourcardclicked").value = 1;
		ccmouseclick(newid);
	}
	
	/**
	* Colour Card Detail navigation button handler: left */
	function shiftleft() {
		// get card dimensions
		cardcols=document.getElementById('hidcolourcardcolumns').value-1;
		
		// get current DOM ref
		domref = document.getElementById('hidcentredcellDOMRef').value;
		gridref=domref.split("_");
		row=parseInt(gridref[1]);
		col=parseInt(gridref[2]);
		
		if (col!=0) { col=col-1}
		if (col==cardcols-1) { col=col-1}
		
		// make the corrected centre back into a DOM ref
		newid=pre+row+"_"+col;

		cchighlight(newid);
		document.getElementById('hidcentredcellDOMRef').value = newid;
		document.getElementById("hidcolourcardclicked").value = 1;
		ccmouseclick(newid);
	}
	
	/**
	* Colour Card Detail navigation button handler: right */
	function shiftright() {
		// get card dimensions
		cardcols=document.getElementById('hidcolourcardcolumns').value-1;
		
		// get current DOM ref
		domref = document.getElementById('hidcentredcellDOMRef').value;
		gridref=domref.split("_");
		row=parseInt(gridref[1]);
		col=parseInt(gridref[2]);
		
		if (col!=cardcols) { col=col+1}
		if (col==1) { col=col+1}
		
		// make the corrected centre back into a DOM ref
		newid=pre+row+"_"+col;

		cchighlight(newid);
		document.getElementById('hidcentredcellDOMRef').value = newid;
		document.getElementById("hidcolourcardclicked").value = 1;
		ccmouseclick(newid);
	}
	
	/**
	* Colour Card Detail navigation button handler: down */
	function shiftdown() {
		// get card dimensions
		cardrows=document.getElementById('hidcolourcardrows').value-1;
		
		// get current DOM ref
		domref = document.getElementById('hidcentredcellDOMRef').value;
		gridref=domref.split("_");
		row=parseInt(gridref[1]);
		col=parseInt(gridref[2]);
		
		if (row!=cardrows) { row=row+1}
		if (row== 1) { row=row+1}
		
		// make the corrected centre back into a DOM ref
		newid=pre+row+"_"+col;

		cchighlight(newid);
		document.getElementById('hidcentredcellDOMRef').value = newid;
		document.getElementById("hidcolourcardclicked").value = 1;
		ccmouseclick(newid);
	}


	/**
	* Show or hide colourcard navigation arrows as required */
	function showHideArrows(id)
	{
		// get the dimensions of the card 
		cardrows=document.getElementById('hidcolourcardrows').value;
		cardcols=document.getElementById('hidcolourcardcolumns').value;
		
		// get ID and split
		gridref=id.split("_");
		row=parseInt(gridref[1]);
		col=parseInt(gridref[2]);

		if (row>1){
			$('nav-arrow-up').show();
		} else {
			$('nav-arrow-up').hide();
		}
		
		if (col>1)
		{
			$('nav-arrow-left').show();
		} else 
		{
			$('nav-arrow-left').hide();
		}
		
		if (col<(cardcols-2))
		{
			$('nav-arrow-right').show();
		} else 
		{
			$('nav-arrow-right').hide();
		}
		
		if (row<(cardrows-2))
		{
			$('nav-arrow-down').show();
		} else 
		{
			$('nav-arrow-down').hide();
		}
	}