init_ui_rating.base = "";

function express_ui_rating(el) {
	var el = this;
	el.runtimeStyle.behavior="none";
	init_ui_rating.id = init_ui_rating.id ||0;
	init_ui_rating.id++;
	el.id = (el.id=="" || el.id==null)?"init_ui_rating_id"+ init_ui_rating.id:el.id;
	var foo = function(){ init_ui_rating(el);}
    el.m = setTimeout(foo,1);
}

function init_ui_rating(el) {
	if(el.className !="ui_rating"){return;}
	var image_name = "bar_rating_green.gif";

	switch( el.getAttribute("for") ) {
		case "user" :image_name = "user_rating_yellow.gif";break;
		case "merchant" :image_name = "merchant_rating_green.gif";break;		
		case "expert" :image_name = "expert_rating_blue.gif";break;		
		default:break;
	}

	image_name = "http://doctorscorecard.com/images/user_rating_yellow.gif";

	var select = el.getElementsByTagName("select")[0];
	var ops =  select.options;

	select.style.display="none";

	//inline-block 
	var ib = new Image(20,100);
	ib.src= init_ui_rating.base+ image_name;

	ib.alt="";
	ib.className ="inline-block";
	el.appendChild(ib);
	el.className = "ui_rating_on";
	init_ui_rating.id = init_ui_rating.id ||0;
	init_ui_rating.id++;
	el.id = (el.id=="" || el.id==null)?"init_ui_rating_id"+ init_ui_rating.id:el.id;
	//stars
	el.stars = new Array();
	var left=0;
	for(var i=0;i<ops.length;i++) {
	  var d=document.createElement("div");
	  d.onmouseover = mouseover_ui_rating;
	  d.onclick = click_ui_rating;
	  d.optionIndex = i;
	  d.className ="star-box";
	  el.appendChild(d);
	  d.style.left = left +"px";
	  d.innerHTML = "<div><img src='"+init_ui_rating.base+ image_name + "' /></div>";
	  if(i>0){  left += d.offsetWidth;};
	  el.stars[el.stars.length] = d.firstChild;
	  if(i==0){d.style.display="none";}
  }
  //adjust inline-block width;
  ib.style.width = left +"px";
  el.onmouseout = function(){this.m = setTimeout("mouseout_ui_rating(document.getElementById('"+this.id+"'))",200);};
  
  //legend
	el.legend = document.createElement("span");
	el.legend.className = "ui_rating_legend";
	el.parentNode.insertBefore(el.legend,el);
	var tempNode =  document.createElement("span");
	el.parentNode.insertBefore(tempNode,el.legend);
	el.parentNode.replaceChild(el,tempNode);

   //go!
   set_ui_rating(el,select.selectedIndex);
}

function render_ui_rating(el,p)
{
 var img = el.getElementsByTagName("img")[0];
 img.style.top ="-" + el.offsetHeight*p +"px";
}


function mouseover_ui_rating(e)
{
 var el = this;
 var component = el.parentNode;
 clearTimeout(component.m);

 for(var i=0;i<component.stars.length;i++)
 {
   var img = component.stars[i].getElementsByTagName("img")[0];
   var s = component.stars[i];
   if(!s.selected)
   {
	if(i<=el.optionIndex){  render_ui_rating(s,2)}
	else{render_ui_rating(s,0)}
   }else
   {
	if(i<=el.optionIndex){render_ui_rating(s,3)}
	else{ render_ui_rating(s,1)}
   }
 }

 var select = component.getElementsByTagName("select")[0];
 component.legend.innerHTML = select.options[el.optionIndex].innerHTML;


}

function mouseout_ui_rating(component )
{

 for(var i=0;i<component.stars.length;i++)
 {
   var img = component.stars[i].getElementsByTagName("img")[0];
   var s = component.stars[i];
   if(!s.selected)
   { render_ui_rating(s,0);}   
   else{s.selected=true;render_ui_rating(s,4)}
 }
 var select = component.getElementsByTagName("select")[0];

 component.legend.innerHTML = select.options[select.selectedIndex].innerHTML;


}

function set_ui_rating(component,optionIndex)
{
	for(var i=0;i<component.stars.length;i++)
	{
		var img = component.stars[i].getElementsByTagName("img")[0];
		var s = component.stars[i];

		if(i<=optionIndex){s.selected=true;render_ui_rating(s,4)}
		else{ render_ui_rating(s,0);s.selected=false;}
	}
	var select = component.getElementsByTagName("select")[0];
	select.selectedIndex =optionIndex;
	component.legend.innerHTML = select.options[optionIndex].innerHTML;
}

function click_ui_rating(e)
{
	var el = this;
	var component = el.parentNode;
	var select = component.getElementsByTagName("select")[0];
	var ops =  select.options;
	set_ui_rating( component, el.optionIndex);
	
}

document.write("<style>");
document.write("span.ui_rating{visibility:hidden;}");
document.write("</style>");