// JavaScript Document

function enableRate(id,rating){
var data = '';

var numOfIcons = 5;		//how many icons do you want to display.
	for (var i = 1; i <= numOfIcons; i++)
	{
	   var icn_id= 'icn_'+ id + '_' + i;
	   data += '<img class="singleHeadphone" id="' + icn_id + '" src="images/icn_rate_off.gif" onmouseover="set_icn_status(\'' + id + '\',' + i +
			   ')"  onmouseout="set_icn_status(\'' + id + '\',' + rating + ')"  onclick="ajaxRequest(\'ajax_rate.php\', \'div_id=' + id +		
			   '&rating='+i+'\')" />';
   }

$(id).innerHTML = data;
}



function set_icn_status(id,rate_value) {
//set the rate icon on/off while hovering
	for (var j =1; j <= 5; j++)
	{	
		var icn_id = 'icn_' + id+ '_' + j; 

		if (j <= rate_value)
		{	
			$(icn_id).src = 'images/icn_rate_on.gif';
		}
		else
		{
			$(icn_id).src = 'images/icn_rate_off.gif';
		}	
	}
}


/* ajax.Request */
function ajaxRequest(url,data) {
//send ajax variables via POST method callback getResponse()
  var aj = new Ajax.Request(
  url, {
   method:'post',
   parameters: data,
   onComplete: getResponse
   }
  );
}



/* ajax.Response */
function getResponse(oReq) {

	var str = oReq.responseText;	//example of my responseText: 4---slrate2149
	if (str == '1') {
		alert('You are not an active member or your session has expired.');
		return false;
	}
	
	var rating = str.substr(0,1);	//this parses the response string and pulls off the rating (first half)
	var id = str.substr(4);			//this parses the response string and pulls off the id (second half)
	updateRate(id,rating);
}



function updateRate(id,rating){
	//again this is propietary to my code. I'll show you how to create yours.
	id = 'sl_rate' + id;
	$(id).innerHTML = '<img src="images/headphones'+ rating +'.gif" ondblclick="enableRate(\'' + id + '\',' + rating + ');" >';	
}